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 Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background:20      radial-gradient(1200px 900px at 30% 20%, #222 0%, #141414 60%, #0f0f0f 100%),21      repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, rgba(0,0,0,0.0) 12px, rgba(0,0,0,0.0) 22px);22    color: #fff;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 24px;29    left: 24px;30    right: 24px;31    height: 72px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    pointer-events: none;36  }37  .time {38    font-size: 42px;39    font-weight: 500;40    letter-spacing: 0.5px;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .status-icons svg {48    width: 40px;49    height: 40px;50    fill: none;51    stroke: #fff;52    stroke-width: 3;53  }54 55  /* App grid */56  .apps {57    position: absolute;58    top: 180px;59    left: 90px;60    width: 900px;61    display: grid;62    grid-template-columns: repeat(4, 180px);63    grid-row-gap: 140px;64    grid-column-gap: 60px;65  }66  .icon-block {67    width: 180px;68    text-align: center;69  }70  .app-icon {71    width: 160px;72    height: 160px;73    border-radius: 50%;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 24px;81    line-height: 1.2;82    box-shadow: 0 10px 20px rgba(0,0,0,0.35);83    margin: 0 auto;84  }85  .app-label {86    margin-top: 18px;87    font-size: 34px;88    color: #f1f1f1;89    white-space: nowrap;90    overflow: hidden;91    text-overflow: ellipsis;92  }93 94  /* Dock icons */95  .dock {96    position: absolute;97    left: 60px;98    right: 60px;99    bottom: 300px;100    height: 160px;101    display: flex;102    align-items: center;103    justify-content: space-between;104  }105  .dock-icon {106    width: 140px;107    height: 140px;108    border-radius: 50%;109    background: #ffffff;110    box-shadow: 0 12px 24px rgba(0,0,0,0.45);111    position: relative;112  }113  .dock-icon .inner {114    position: absolute;115    inset: 32px;116    border-radius: 50%;117    background: #4c8bf5;118  }119  .dock-icon.chrome .inner {120    background: conic-gradient(#3aa757 0 90deg, #f4b400 90deg 180deg, #db4437 180deg 270deg, #4285f4 270deg 360deg);121  }122  .dock-icon.camera .inner {123    background: #1e88e5;124    box-shadow: inset 0 0 0 10px #cfd8dc;125  }126  .dock-icon.msg .inner { background: #4db6ff; }127  .dock-icon.phone .inner { background: #3a74ff; }128 129  /* Search bar */130  .search-bar {131    position: absolute;132    left: 60px;133    right: 60px;134    bottom: 140px;135    height: 120px;136    background: #2f2f2f;137    border-radius: 60px;138    box-shadow: 0 12px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);139    display: flex;140    align-items: center;141    justify-content: space-between;142    padding: 0 40px;143  }144  .search-left {145    display: flex;146    align-items: center;147    gap: 24px;148  }149  .g-logo {150    width: 72px;151    height: 72px;152    border-radius: 50%;153    background: conic-gradient(#4285F4 0 90deg, #DB4437 90deg 180deg, #F4B400 180deg 270deg, #0F9D58 270deg 360deg);154    display: flex;155    align-items: center;156    justify-content: center;157    box-shadow: inset 0 0 0 8px #2f2f2f;158  }159  .g-logo span {160    color: #fff;161    font-weight: 700;162    font-size: 40px;163  }164  .search-right {165    display: flex;166    align-items: center;167    gap: 28px;168  }169  .search-right svg {170    width: 52px;171    height: 52px;172    fill: none;173    stroke: #fff;174    stroke-width: 3.2;175  }176 177  /* Home indicator */178  .home-indicator {179    position: absolute;180    bottom: 34px;181    left: 50%;182    transform: translateX(-50%);183    width: 240px;184    height: 11px;185    border-radius: 6px;186    background: rgba(255,255,255,0.75);187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status bar -->194  <div class="status-bar">195    <div class="time">11:57</div>196    <div class="status-icons">197      <!-- Wi-Fi -->198      <svg viewBox="0 0 24 24" aria-label="wifi">199        <path d="M2 8c5-4 15-4 20 0"></path>200        <path d="M5 11c3-3 11-3 14 0"></path>201        <path d="M8 14c2-2 6-2 8 0"></path>202        <circle cx="12" cy="17.5" r="1.8" fill="#fff" stroke="none"></circle>203      </svg>204      <!-- Battery -->205      <svg viewBox="0 0 28 24" aria-label="battery">206        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff"></rect>207        <rect x="23" y="9" width="3" height="6" rx="1" ry="1" stroke="#fff"></rect>208        <rect x="4" y="8" width="16" height="8" fill="#fff" stroke="none"></rect>209      </svg>210    </div>211  </div>212 213  <!-- App grid -->214  <div class="apps">215    <div class="icon-block">216      <div class="app-icon">[APP ICON: DBW Showcase]</div>217      <div class="app-label">DBW Show...</div>218    </div>219    <div class="icon-block">220      <div class="app-icon">[APP ICON: Office: Presentations]</div>221      <div class="app-label">Office: Pres...</div>222    </div>223    <div class="icon-block">224      <div class="app-icon">[APP ICON: Khan Academy]</div>225      <div class="app-label">Khan Acad...</div>226    </div>227    <div class="icon-block">228      <div class="app-icon">[APP ICON: Oppia]</div>229      <div class="app-label">Oppia</div>230    </div>231 232    <div class="icon-block">233      <div class="app-icon">[APP ICON: Math]</div>234      <div class="app-label">Math</div>235    </div>236    <div class="icon-block">237      <div class="app-icon">[APP ICON: WPS Office]</div>238      <div class="app-label">WPS Office</div>239    </div>240    <!-- empty cells in row kept implicit -->241  </div>242 243  <!-- Dock icons -->244  <div class="dock">245    <div class="dock-icon phone">246      <div class="inner"></div>247    </div>248    <div class="dock-icon msg">249      <div class="inner"></div>250    </div>251    <div class="dock-icon chrome">252      <div class="inner"></div>253    </div>254    <div class="dock-icon camera">255      <div class="inner"></div>256    </div>257  </div>258 259  <!-- Search bar -->260  <div class="search-bar">261    <div class="search-left">262      <div class="g-logo" aria-label="Google">263        <span>G</span>264      </div>265      <div style="color:#cfcfcf;font-size:34px;">Search</div>266    </div>267    <div class="search-right">268      <!-- Microphone -->269      <svg viewBox="0 0 24 24" aria-label="microphone">270        <rect x="8" y="4" width="8" height="10" rx="4"></rect>271        <path d="M6 11c0 3.5 3 5 6 5s6-1.5 6-5"></path>272        <path d="M12 16v4"></path>273        <path d="M9 20h6"></path>274      </svg>275      <!-- Camera -->276      <svg viewBox="0 0 24 24" aria-label="camera">277        <rect x="3" y="6" width="18" height="12" rx="2"></rect>278        <path d="M8 6l2-3h4l2 3"></path>279        <circle cx="12" cy="12" r="4"></circle>280      </svg>281    </div>282  </div>283 284  <!-- Home indicator -->285  <div class="home-indicator"></div>286</div>287</body>288</html>