GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Android Home UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111;14    border-radius: 28px;15    box-shadow: 0 8px 30px rgba(0,0,0,0.35);16    font-family: Arial, Helvetica, sans-serif;17    color: #fff;18  }19  /* Wallpaper placeholder */20  .wallpaper {21    position: absolute;22    left: 0; top: 0;23    width: 1080px; height: 2400px;24    background: #E0E0E0;25    border: 1px solid #BDBDBD;26    display: flex; align-items: center; justify-content: center;27    color: #757575;28    font-size: 28px;29    letter-spacing: 0.3px;30  }31  /* Status bar */32  .status-bar {33    position: absolute;34    top: 20px; left: 24px; right: 24px;35    height: 48px;36    display: flex; align-items: center; justify-content: space-between;37    color: #fff;38    z-index: 2;39  }40  .status-left { font-size: 32px; font-weight: 600; opacity: 0.95; }41  .status-right { display: flex; gap: 20px; align-items: center; }42  .icon { width: 32px; height: 32px; opacity: 0.95; }43  /* Date & weather */44  .date-wrap {45    position: absolute;46    top: 180px; left: 56px;47    z-index: 2;48  }49  .date-wrap .date {50    font-size: 64px; font-weight: 600; color: rgba(255,255,255,0.92);51  }52  .weather {53    margin-top: 22px;54    display: flex; align-items: center; gap: 16px;55    color: rgba(255,255,255,0.88);56    font-size: 32px;57  }58  /* App grid */59  .grid {60    position: absolute;61    left: 56px;62    top: 1180px;63    width: 968px;64    display: grid;65    grid-template-columns: repeat(4, 1fr);66    grid-row-gap: 80px;67    grid-column-gap: 36px;68    z-index: 2;69  }70  .app {71    display: flex; flex-direction: column; align-items: center;72  }73  .app .icon-circle {74    width: 160px; height: 160px; border-radius: 50%;75    background: #E0E0E0; border: 1px solid #BDBDBD;76    display: flex; align-items: center; justify-content: center;77    color: #757575; font-size: 22px; text-align: center; padding: 10px;78  }79  .app .label {80    margin-top: 18px;81    font-size: 30px; color: rgba(255,255,255,0.92);82  }83  /* USB debugging overlay */84  .usb-overlay {85    position: absolute;86    left: 56px;87    bottom: 420px;88    width: 968px;89    background: rgba(0,0,0,0.64);90    border-radius: 36px;91    padding: 34px 36px;92    z-index: 3;93    color: #fff;94  }95  .usb-title { font-size: 44px; font-weight: 700; margin-bottom: 18px; }96  .usb-text { font-size: 28px; line-height: 1.4; color: rgba(255,255,255,0.92); }97  .usb-checkbox {98    display: flex; align-items: center; gap: 18px;99    margin-top: 22px; font-size: 30px;100  }101  .chk-box {102    width: 40px; height: 40px; border-radius: 8px;103    border: 2px solid #ccc; background: rgba(255,255,255,0.06);104  }105  .usb-actions {106    margin-top: 26px;107    display: flex; align-items: center; justify-content: space-between;108  }109  .quick-actions {110    display: flex; gap: 38px; align-items: flex-start;111  }112  .qa-item { display: flex; flex-direction: column; align-items: center; }113  .qa-icon {114    width: 120px; height: 120px; border-radius: 50%;115    background: #E0E0E0; border: 1px solid #BDBDBD;116    display: flex; align-items: center; justify-content: center;117    color: #757575; font-size: 20px; text-align: center; padding: 8px;118  }119  .qa-label {120    margin-top: 8px; font-size: 26px; color: #d5d5d5;121  }122  /* Search bar */123  .search-bar {124    position: absolute;125    left: 56px;126    bottom: 180px;127    width: 968px; height: 120px;128    background: rgba(30,30,30,0.92);129    border-radius: 60px;130    display: flex; align-items: center; justify-content: space-between;131    padding: 0 28px;132    z-index: 2;133  }134  .search-left {135    display: flex; align-items: center; gap: 18px;136  }137  .g-icon {138    width: 68px; height: 68px; border-radius: 50%;139    background: #E0E0E0; border: 1px solid #BDBDBD;140    display: flex; align-items: center; justify-content: center;141    color: #757575; font-size: 22px;142  }143  .search-right { display: flex; align-items: center; gap: 22px; }144  .small-pill {145    position: absolute; left: 290px; bottom: 100px;146    width: 500px; height: 16px; border-radius: 16px;147    background: rgba(255,255,255,0.85);148    z-index: 2;149  }150  /* Subdued labels under grid (for obscured apps) */151  .dim-label { color: rgba(255,255,255,0.65); }152</style>153</head>154<body>155<div id="render-target">156  <div class="wallpaper">[IMG: Wallpaper - Feather texture]</div>157 158  <div class="status-bar">159    <div class="status-left">9:24</div>160    <div class="status-right">161      <!-- Simple icons -->162      <svg class="icon" viewBox="0 0 24 24">163        <path fill="#fff" d="M3 12c4-5 14-5 18 0-4 5-14 5-18 0z"></path>164      </svg>165      <svg class="icon" viewBox="0 0 24 24">166        <path fill="#fff" d="M4 10h16v10H4zM7 6h10v2H7z"></path>167      </svg>168      <svg class="icon" viewBox="0 0 24 24">169        <path fill="#fff" d="M6 18h12a4 4 0 004-4V6H2v8a4 4 0 004 4z"></path>170      </svg>171    </div>172  </div>173 174  <div class="date-wrap">175    <div class="date">Thu, Dec 21</div>176    <div class="weather">177      <svg width="42" height="42" viewBox="0 0 24 24">178        <path fill="#ffd166" d="M12 4a4 4 0 110 8 4 4 0 010-8z"></path>179      </svg>180      <div>26°C · Today 33° / 23° · Mostly cloudy</div>181    </div>182  </div>183 184  <div class="grid">185    <!-- Row 1 -->186    <div class="app">187      <div class="icon-circle">[IMG: Skyscanner Icon]</div>188      <div class="label">Skyscanner</div>189    </div>190    <div class="app">191      <div class="icon-circle">[IMG: Japan Airlines Icon]</div>192      <div class="label">Japan Airlin...</div>193    </div>194    <div class="app"></div>195    <div class="app"></div>196 197    <!-- Row 2 (partially obscured by dialog) -->198    <div class="app">199      <div class="icon-circle">[IMG: Google Play Icon]</div>200      <div class="label dim-label">Play Store</div>201    </div>202    <div class="app">203      <div class="icon-circle">[IMG: Gmail Icon]</div>204      <div class="label dim-label">Gmail</div>205    </div>206    <div class="app">207      <div class="icon-circle">[IMG: Google Photos Icon]</div>208      <div class="label dim-label">Photos</div>209    </div>210    <div class="app">211      <div class="icon-circle">[IMG: YouTube Icon]</div>212      <div class="label dim-label">YouTube</div>213    </div>214  </div>215 216  <div class="usb-overlay">217    <div class="usb-title">Allow USB debugging?</div>218    <div class="usb-text">219      The computer's RSA key fingerprint is:<br>220      49:9C:BA:C9:59:A2:59:65:B4:0C:E6:ED:94:0D:17:31221    </div>222    <div class="usb-checkbox">223      <div class="chk-box"></div>224      <div>Always allow from this computer</div>225    </div>226    <div class="usb-actions">227      <div class="quick-actions">228        <div class="qa-item">229          <div class="qa-icon">[IMG: Phone]</div>230        </div>231        <div class="qa-item">232          <div class="qa-icon">[IMG: Messages]</div>233        </div>234        <div class="qa-item">235          <div class="qa-icon">[IMG: Chrome]</div>236          <div class="qa-label">Cancel</div>237        </div>238        <div class="qa-item">239          <div class="qa-icon">[IMG: Camera]</div>240          <div class="qa-label">Allow</div>241        </div>242      </div>243    </div>244  </div>245 246  <div class="search-bar">247    <div class="search-left">248      <div class="g-icon">G</div>249    </div>250    <div class="search-right">251      <div class="g-icon">[Mic]</div>252      <div class="g-icon">[Lens]</div>253      <div class="g-icon">[Camera]</div>254    </div>255  </div>256 257  <div class="small-pill"></div>258</div>259</body>260</html>