GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Weather Share UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: Arial, Helvetica, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    height: 90px;22    padding: 0 30px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #dddddd;27    font-size: 36px;28    opacity: 0.95;29  }30  .status-right { display: flex; gap: 28px; align-items: center; }31 32  /* Header with share & menu */33  .header {34    display: flex;35    align-items: center;36    padding: 16px 36px;37  }38  .icon-btn {39    width: 72px; height: 72px;40    display: flex; align-items: center; justify-content: center;41    color: #cfcfcf;42  }43  .title {44    flex: 1;45    text-align: center;46    font-size: 64px;47    font-weight: 700;48    color: #cfcfcf;49  }50 51  /* Weather card */52  .weather-card {53    margin: 26px 36px 20px;54    background: #214e96;55    border-radius: 36px;56    padding: 40px;57  }58  .weather-top { display: flex; align-items: center; gap: 30px; }59  .temp { font-size: 148px; font-weight: 700; letter-spacing: 1px; }60  .feels { font-size: 44px; color: #bcd0ff; margin-left: 12px; }61  .message { margin-top: 30px; font-size: 44px; line-height: 1.4; color: #cfe0ff; }62  .illustration {63    margin-top: 30px;64    height: 140px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex; align-items: center; justify-content: center;68    color: #757575;69    border-radius: 18px;70  }71 72  /* Warning pill */73  .warning {74    margin: 24px 36px;75    background: #8b2b2b;76    border-radius: 32px;77    padding: 36px;78    font-weight: 700;79    font-size: 52px;80    text-align: center;81    color: #f3c7c7;82  }83 84  /* Share sheet overlay */85  .share-sheet {86    position: absolute;87    left: 0; right: 0; bottom: 0;88    height: 1180px;89    background: #1a1a1a;90    border-top-left-radius: 40px;91    border-top-right-radius: 40px;92    box-shadow: 0 -12px 30px rgba(0,0,0,0.6);93  }94  .drag-handle {95    width: 160px; height: 12px;96    background: #3a3a3a;97    border-radius: 8px;98    margin: 24px auto 20px;99  }100  .sheet-content { padding: 20px 60px; }101  .chips { display: flex; gap: 36px; justify-content: center; margin: 10px 0 40px; }102  .chip {103    display: flex; align-items: center; gap: 16px;104    padding: 18px 28px;105    border: 2px solid #7fb35e;106    color: #d8ffd0;107    border-radius: 18px;108    font-size: 42px;109    background: #222222;110  }111  .no-reco {112    text-align: center;113    color: #b7b7b7;114    font-size: 40px;115    margin: 80px 0;116  }117 118  /* App picker row */119  .app-row {120    display: flex;121    justify-content: space-around;122    align-items: flex-start;123    gap: 40px;124    padding: 0 20px;125    margin-top: 20px;126  }127  .app { display: flex; flex-direction: column; align-items: center; gap: 16px; }128  .app .avatar {129    width: 160px; height: 160px;130    background: #ffffff;131    border-radius: 80px;132    border: 1px solid #BDBDBD;133    display: flex; align-items: center; justify-content: center;134    color: #444444; font-weight: bold;135  }136  .app label { font-size: 38px; color: #eaeaea; }137 138  /* Gesture bar */139  .gesture-bar {140    position: absolute;141    bottom: 24px; left: 50%;142    transform: translateX(-50%);143    width: 320px; height: 12px;144    background: #eaeaea; border-radius: 8px; opacity: 0.85;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status bar -->152  <div class="status-bar">153    <div>2:56</div>154    <div class="status-right">155      <span>34°</span>156      <span>0°</span>157      <span>•</span>158      <span>🔇</span>159      <span>⦸</span>160      <span>🔋 100%</span>161    </div>162  </div>163 164  <!-- Top header with share/menu icons -->165  <div class="header">166    <div class="icon-btn">167      <!-- Share icon -->168      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf">169        <path d="M18 8l-6-6v4H6a6 6 0 000 12h2v-2H6a4 4 0 110-8h6v4l6-6z"></path>170      </svg>171    </div>172    <div class="title">Madrid, Spain</div>173    <div class="icon-btn">174      <!-- Kebab menu -->175      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf">176        <circle cx="12" cy="5" r="2"></circle>177        <circle cx="12" cy="12" r="2"></circle>178        <circle cx="12" cy="19" r="2"></circle>179      </svg>180    </div>181  </div>182 183  <!-- Weather card -->184  <div class="weather-card">185    <div class="weather-top">186      <!-- Sun icon -->187      <svg width="140" height="140" viewBox="0 0 64 64">188        <circle cx="32" cy="32" r="14" fill="#f5d349"></circle>189        <g fill="#c57a1e">190          <circle cx="32" cy="8" r="4"></circle>191          <circle cx="32" cy="56" r="4"></circle>192          <circle cx="8" cy="32" r="4"></circle>193          <circle cx="56" cy="32" r="4"></circle>194          <circle cx="14" cy="14" r="4"></circle>195          <circle cx="50" cy="14" r="4"></circle>196          <circle cx="14" cy="50" r="4"></circle>197          <circle cx="50" cy="50" r="4"></circle>198        </g>199      </svg>200      <div>201        <div class="temp">31°</div>202        <div class="feels">Feels 31°</div>203      </div>204    </div>205 206    <div class="message">207      I'm getting the menu lined up for my big summer barbecue. What do you think, kitten burgers or puppy steaks?208    </div>209 210    <div class="illustration">[IMG: Landscape illustration]</div>211  </div>212 213  <!-- Warning pill -->214  <div class="warning">Extremely High Temperature Warning</div>215 216  <!-- Share sheet overlay -->217  <div class="share-sheet">218    <div class="drag-handle"></div>219    <div class="sheet-content">220      <div class="chips">221        <div class="chip">222          <!-- Nearby share icon -->223          <svg width="36" height="36" viewBox="0 0 24 24" stroke="#9fd37c" fill="none" stroke-width="2">224            <path d="M6 12c3-4 9-4 12 0"></path>225            <path d="M8 15c2-3 6-3 8 0"></path>226          </svg>227          <span>Nearby</span>228        </div>229        <div class="chip">230          <!-- Edit icon -->231          <svg width="34" height="34" viewBox="0 0 24 24" stroke="#9fd37c" fill="none" stroke-width="2">232            <path d="M4 20l8-8"></path>233            <path d="M14 6l4 4"></path>234          </svg>235          <span>Edit</span>236        </div>237      </div>238 239      <div class="no-reco">No recommended people to share with</div>240 241      <div class="app-row">242        <div class="app">243          <div class="avatar">M</div>244          <label>Gmail</label>245        </div>246        <div class="app">247          <div class="avatar">💬</div>248          <label>Messages</label>249        </div>250        <div class="app">251          <div class="avatar">△</div>252          <label>Drive</label>253        </div>254        <div class="app">255          <div class="avatar">⌁</div>256          <label>Bluetooth</label>257        </div>258      </div>259    </div>260  </div>261 262  <!-- Gesture bar -->263  <div class="gesture-bar"></div>264 265</div>266</body>267</html>