GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Android Home Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 10  /* Root container must match screenshot size */11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: radial-gradient(1200px 1200px at 80% 60%, #4b5b50 0%, #5f6f62 35%, #6e7e71 60%, #7b8c7e 85%) no-repeat,17                linear-gradient(160deg, #6d7d70 0%, #5f6f62 40%, #495a4e 100%);18    border-radius: 32px;19  }20 21  /* Subtle abstract arcs to mimic wallpaper */22  .arc {23    position: absolute;24    border: 6px solid rgba(0,0,0,0.25);25    border-left-color: transparent;26    border-top-color: rgba(0,0,0,0.3);27    border-right-color: rgba(0,0,0,0.4);28    border-bottom-color: transparent;29    border-radius: 50%;30    transform: rotate(6deg);31    pointer-events: none;32    filter: blur(0.2px);33  }34  .arc.a1 { width: 1200px; height: 1600px; right: -300px; top: 300px; }35  .arc.a2 { width: 900px; height: 1300px; right: -180px; top: 600px; border-width: 5px; opacity: 0.65; }36  .arc.a3 { width: 1600px; height: 2000px; left: -900px; top: 900px; border-width: 4px; opacity: 0.35; }37 38  /* Status bar */39  .statusbar {40    position: absolute;41    top: 0;42    left: 0;43    right: 0;44    height: 110px;45    padding: 24px 32px 0 32px;46    color: #fff;47    font-weight: 500;48    text-shadow: 0 1px 2px rgba(0,0,0,0.4);49    display: flex;50    align-items: center;51    justify-content: space-between;52    box-sizing: border-box;53  }54  .statusbar .time {55    font-size: 40px;56    letter-spacing: 1px;57  }58  .right-icons {59    display: flex;60    align-items: center;61    gap: 18px;62  }63  .dot {64    width: 10px;65    height: 10px;66    background: #fff;67    border-radius: 50%;68    opacity: 0.9;69  }70  .icon-sq {71    width: 34px; height: 24px;72    border-radius: 4px;73    color: #111; background: #fff;74    font-size: 16px; font-weight: 700;75    display:flex; align-items:center; justify-content:center;76  }77  .wifi svg, .battery svg { display: block; }78  .wifi { width: 36px; height: 24px; }79  .battery { width: 48px; height: 24px; }80 81  /* App grid */82  .apps {83    position: absolute;84    left: 40px;85    right: 40px;86    top: 190px;87    display: grid;88    grid-template-columns: repeat(4, 1fr);89    grid-auto-rows: 240px;90    gap: 34px 26px;91  }92  .app {93    text-align: center;94    color: #fff;95    text-shadow: 0 2px 3px rgba(0,0,0,0.45);96    display: flex;97    flex-direction: column;98    align-items: center;99    justify-content: flex-start;100  }101  .app .icon {102    width: 150px; height: 150px;103    border-radius: 50%;104    box-shadow: 0 8px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);105    display:flex; align-items:center; justify-content:center;106    color: rgba(0,0,0,0.7);107    font-weight: 700; font-size: 42px;108  }109  .app .label {110    margin-top: 18px;111    font-size: 30px;112    line-height: 1.1;113    max-width: 220px;114  }115 116  /* Icon color presets */117  .g-green { background: #5aa469; color: #0b3117; }118  .g-gray { background: #b1b6bd; color: #333; }119  .g-yellow { background: #ffd43b; color: #2e2e2e; }120  .g-white { background: #fafafa; color: #d22; }121  .g-blue { background: #2e7df6; color: #fff; }122  .g-white-dark { background: #f0f0f0; color: #111; }123  .g-white-green { background: #ffffff; color: #1a8e4b; }124  .g-beige { background: #d7b88c; color: #111; }125  .g-gold { background: #ffd54d; color: #5a3; }126 127  /* Dock row above search bar */128  .dock {129    position: absolute;130    left: 120px;131    right: 120px;132    bottom: 360px;133    display: flex;134    justify-content: space-between;135  }136  .dock .dock-app .icon {137    width: 150px; height: 150px;138  }139  .dock .dock-app .label { display: none; }140 141  /* Search bar */142  .search-bar {143    position: absolute;144    left: 90px;145    right: 90px;146    bottom: 210px;147    height: 108px;148    background: rgba(22,22,22,0.9);149    border-radius: 58px;150    box-shadow: 0 8px 18px rgba(0,0,0,0.45);151    display: flex;152    align-items: center;153    padding: 0 26px;154    color: #ddd;155    box-sizing: border-box;156  }157  .search-bar .g-logo {158    width: 66px; height: 66px; border-radius: 50%;159    background: #fff; display:flex; align-items:center; justify-content:center;160    margin-right: 18px;161    font-weight: 900; color: #1a73e8; font-size: 32px;162    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.06);163  }164  .search-placeholder {165    flex: 1;166    opacity: 0.8;167    font-size: 34px;168  }169  .sb-actions {170    display: flex; align-items: center; gap: 18px;171  }172  .sb-round {173    width: 66px; height: 66px; border-radius: 50%;174    background: #2e2e2e;175    display:flex; align-items:center; justify-content:center;176  }177  .sb-round svg { width: 30px; height: 30px; fill: #9ad; }178 179  /* Gesture handle */180  .handle {181    position: absolute;182    bottom: 110px;183    left: 50%;184    transform: translateX(-50%);185    width: 260px; height: 10px;186    border-radius: 6px;187    background: rgba(0,0,0,0.35);188  }189 190  /* helper for empty grid spots */191  .empty { opacity: 0; pointer-events: none; }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Wallpaper arcs -->198  <div class="arc a1"></div>199  <div class="arc a2"></div>200  <div class="arc a3"></div>201 202  <!-- Status bar -->203  <div class="statusbar">204    <div class="time">3:49</div>205    <div class="right-icons">206      <div class="icon-sq">G</div>207      <div class="icon-sq">E</div>208      <div class="dot"></div>209      <div class="wifi">210        <svg viewBox="0 0 24 24">211          <path fill="#fff" d="M12 18.5l-2.2-2.1a3 3 0 014.4 0L12 18.5zm6-5.5a9 9 0 00-12 0l-1.6-1.6a11 11 0 0115.2 0L18 13z"/>212        </svg>213      </div>214      <div class="battery">215        <svg viewBox="0 0 30 16">216          <rect x="1" y="2" width="24" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>217          <rect x="3" y="4" width="16" height="8" rx="1" ry="1" fill="#fff"></rect>218          <rect x="26" y="6" width="3" height="4" rx="1" ry="1" fill="#fff"></rect>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- App grid -->225  <div class="apps">226    <!-- Row 1 -->227    <div class="app">228      <div class="icon g-green">D</div>229      <div class="label">DBW Show...</div>230    </div>231    <div class="app">232      <div class="icon g-gray">Z</div>233      <div class="label">Zombie Wa..</div>234    </div>235    <div class="app">236      <div class="icon g-yellow">E</div>237      <div class="label">Expedia</div>238    </div>239    <div class="app">240      <div class="icon g-white">H</div>241      <div class="label">H&amp;M</div>242    </div>243 244    <!-- Row 2 -->245    <div class="app">246      <div class="icon g-blue">F</div>247      <div class="label">Flipkart</div>248    </div>249    <div class="app">250      <div class="icon g-white-dark">Z</div>251      <div class="label">ZARA</div>252    </div>253    <div class="app">254      <div class="icon g-white-green">C</div>255      <div class="label">Chat</div>256    </div>257    <div class="app empty">258      <div class="icon g-gray"></div>259      <div class="label">&nbsp;</div>260    </div>261 262    <!-- Row 3 (centered item) -->263    <div class="app empty">264      <div class="icon g-gray"></div>265      <div class="label">&nbsp;</div>266    </div>267    <div class="app empty">268      <div class="icon g-gray"></div>269      <div class="label">&nbsp;</div>270    </div>271    <div class="app">272      <div class="icon g-beige">A</div>273      <div class="label">Amazon</div>274    </div>275    <div class="app empty">276      <div class="icon g-gray"></div>277      <div class="label">&nbsp;</div>278    </div>279 280    <!-- Row 4 (single left item) -->281    <div class="app">282      <div class="icon g-gold">K</div>283      <div class="label">Kitchen Sto...</div>284    </div>285    <div class="app empty">286      <div class="icon g-gray"></div>287      <div class="label">&nbsp;</div>288    </div>289    <div class="app empty">290      <div class="icon g-gray"></div>291      <div class="label">&nbsp;</div>292    </div>293    <div class="app empty">294      <div class="icon g-gray"></div>295      <div class="label">&nbsp;</div>296    </div>297  </div>298 299  <!-- Dock icons -->300  <div class="dock">301    <div class="app dock-app">302      <div class="icon g-white">☎</div>303      <div class="label">Phone</div>304    </div>305    <div class="app dock-app">306      <div class="icon g-white-dark">💬</div>307      <div class="label">Messages</div>308    </div>309    <div class="app dock-app">310      <div class="icon g-white-dark">🌐</div>311      <div class="label">Chrome</div>312    </div>313    <div class="app dock-app">314      <div class="icon g-white-dark">📷</div>315      <div class="label">Camera</div>316    </div>317  </div>318 319  <!-- Search bar -->320  <div class="search-bar">321    <div class="g-logo">G</div>322    <div class="search-placeholder">Search</div>323    <div class="sb-actions">324      <div class="sb-round" title="Voice">325        <svg viewBox="0 0 24 24">326          <path d="M12 3a3 3 0 013 3v5a3 3 0 11-6 0V6a3 3 0 013-3zm-1 15.9V22h2v-3.1A7 7 0 005 12h2a5 5 0 0010 0h2a7 7 0 00-8 6.9z" />327        </svg>328      </div>329      <div class="sb-round" title="Lens">330        <svg viewBox="0 0 24 24">331          <path d="M17 3H7a4 4 0 00-4 4v10a4 4 0 004 4h10a4 4 0 004-4V7a4 4 0 00-4-4zm-5 4a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z"/>332        </svg>333      </div>334    </div>335  </div>336 337  <!-- Gesture handle -->338  <div class="handle"></div>339</div>340</body>341</html>