GD-ML/AndroidCode
13.4k
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>Android Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #111;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Wallpaper placeholder */20 .wallpaper {21 position: absolute;22 inset: 0;23 background: #E0E0E0;24 border: 1px solid #BDBDBD;25 color: #757575;26 display: flex;27 align-items: center;28 justify-content: center;29 font-size: 38px;30 z-index: 0;31 }32 33 /* Status bar */34 .status-bar {35 position: absolute;36 top: 24px;37 left: 0;38 width: 100%;39 height: 96px;40 color: #fff;41 z-index: 2;42 pointer-events: none;43 }44 .status-left {45 position: absolute;46 left: 36px;47 top: 18px;48 font-weight: 600;49 font-size: 48px;50 letter-spacing: 0.5px;51 }52 .status-center {53 position: absolute;54 left: 380px;55 right: 380px;56 top: 26px;57 display: flex;58 gap: 14px;59 justify-content: center;60 align-items: center;61 }62 .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: 0.9; }63 .status-square { width: 22px; height: 22px; border: 2px solid #fff; border-radius: 4px; opacity: 0.9; }64 .status-right {65 position: absolute;66 right: 28px;67 top: 26px;68 display: flex;69 align-items: center;70 gap: 22px;71 }72 .icon-wifi, .icon-battery {73 width: 42px; height: 42px;74 }75 .icon-battery rect { stroke: #fff; fill: none; stroke-width: 3; }76 .icon-battery .cap { fill: #fff; }77 .icon-wifi path { fill: none; stroke: #fff; stroke-width: 4; opacity: 0.95; }78 79 /* App grid */80 .grid {81 position: absolute;82 left: 60px;83 right: 60px;84 top: 180px;85 display: grid;86 grid-template-columns: repeat(4, 1fr);87 grid-column-gap: 60px;88 grid-row-gap: 80px;89 z-index: 3;90 }91 .app {92 text-align: center;93 color: #fff;94 }95 .app .label {96 margin-top: 18px;97 font-size: 30px;98 line-height: 1.2;99 text-shadow: 0 2px 4px rgba(0,0,0,0.6);100 white-space: nowrap;101 overflow: hidden;102 text-overflow: ellipsis;103 }104 .icon {105 width: 170px;106 height: 170px;107 border-radius: 50%;108 margin: 0 auto;109 position: relative;110 display: grid;111 place-items: center;112 box-shadow: 0 10px 20px rgba(0,0,0,0.25);113 }114 .notif-dot {115 position: absolute;116 right: 12px;117 top: 12px;118 width: 26px;119 height: 26px;120 background: #9ED37B;121 border: 3px solid #fff;122 border-radius: 50%;123 }124 125 /* Icon color bases (approximate to brands) */126 .c-blue { background: #4A86FF; }127 .c-darkblue { background: #0F2D66; }128 .c-red { background: #E1443A; }129 .c-orange { background: #F59D2A; }130 .c-white { background: #fff; }131 .c-yellow { background: #F2C94C; color: #222; }132 .c-teal { background: #2CB6A8; }133 .c-magenta { background: #C82A7D; }134 .c-sky { background: #5AA9E6; }135 .c-tan { background: #D7C19B; color: #111; }136 .c-gray { background: #BDBDBD; }137 138 /* Simple icon glyphs */139 .glyph { width: 120px; height: 120px; }140 .glyph-small { width: 96px; height: 96px; }141 .glyph-text {142 font-weight: 700;143 font-size: 56px;144 color: currentColor;145 }146 .glyph-text-multi {147 font-weight: 700;148 font-size: 42px;149 color: #2E2E2E;150 }151 152 /* Dock row */153 .dock {154 position: absolute;155 left: 80px;156 right: 80px;157 bottom: 420px;158 display: grid;159 grid-template-columns: repeat(4, 1fr);160 align-items: center;161 justify-items: center;162 z-index: 4;163 gap: 40px;164 }165 166 /* Google search bar */167 .search-bar {168 position: absolute;169 left: 64px;170 right: 64px;171 bottom: 220px;172 height: 120px;173 background: #2E2E2E;174 border-radius: 60px;175 display: flex;176 align-items: center;177 padding: 0 36px;178 z-index: 4;179 box-shadow: 0 14px 28px rgba(0,0,0,0.35);180 }181 .search-left {182 display: flex;183 align-items: center;184 gap: 18px;185 }186 .g-logo {187 width: 64px; height: 64px; border-radius: 50%;188 background:189 conic-gradient(#4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);190 }191 .search-text {192 color: #DADADA; font-size: 32px;193 }194 .search-right {195 margin-left: auto; display: flex; gap: 26px; align-items: center;196 }197 .pill {198 position: absolute;199 bottom: 110px;200 left: 50%;201 transform: translateX(-50%);202 width: 280px;203 height: 12px;204 background: #fff;205 border-radius: 8px;206 opacity: 0.9;207 z-index: 5;208 }209 210 /* Helper */211 .svg-white path, .svg-white circle, .svg-white rect, .svg-white polygon, .svg-white line { fill: #fff; stroke: none; }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Wallpaper placeholder -->218 <div class="wallpaper">[IMG: Forest Mountain Wallpaper]</div>219 220 <!-- Status bar -->221 <div class="status-bar">222 <div class="status-left">8:38</div>223 <div class="status-center">224 <div class="status-square"></div>225 <div class="status-square" style="width:22px;height:14px;border-radius:3px;"></div>226 <div class="status-dot"></div>227 <div class="status-dot"></div>228 </div>229 <div class="status-right">230 <svg class="icon-wifi" viewBox="0 0 24 24">231 <path d="M2 8c10-8 20 0 20 0M5 12c7-6 14 0 14 0M9 16c4-4 8 0 8 0M12 20a2 2 0 1 0 0.01 0"></path>232 </svg>233 <svg class="icon-battery" viewBox="0 0 30 20">234 <rect x="1" y="3" width="24" height="14" rx="3"></rect>235 <rect class="cap" x="26" y="7" width="3.5" height="6" rx="1"></rect>236 <rect x="4" y="6" width="16" height="8" fill="#fff"></rect>237 </svg>238 </div>239 </div>240 241 <!-- App grid -->242 <div class="grid">243 244 <!-- Row 1 -->245 <div class="app">246 <div class="icon c-darkblue">247 <svg class="glyph" viewBox="0 0 100 100">248 <rect x="16" y="18" width="68" height="68" rx="10" fill="#4C84F6"></rect>249 <circle cx="50" cy="45" r="22" fill="#fff"></circle>250 <rect x="38" y="62" width="24" height="10" rx="5" fill="#fff"></rect>251 </svg>252 </div>253 <div class="label">DBW Show...</div>254 </div>255 256 <div class="app">257 <div class="icon c-blue">258 <svg class="glyph" viewBox="0 0 100 100">259 <polyline points="28,52 44,68 74,38" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"></polyline>260 </svg>261 <div class="notif-dot"></div>262 </div>263 <div class="label">Any.do</div>264 </div>265 266 <div class="app">267 <div class="icon c-white">268 <svg class="glyph" viewBox="0 0 100 100">269 <path d="M50 22c12 0 22 10 22 22v22H28V44c0-12 10-22 22-22z" fill="#000"></path>270 <rect x="44" y="68" width="12" height="8" fill="#000"></rect>271 </svg>272 </div>273 <div class="label">Remind Me</div>274 </div>275 276 <div class="app">277 <div class="icon c-teal">278 <svg class="glyph" viewBox="0 0 100 100">279 <circle cx="50" cy="40" r="20" fill="#1F7D72"></circle>280 <rect x="36" y="58" width="28" height="14" rx="7" fill="#1F7D72"></rect>281 </svg>282 </div>283 <div class="label">Reminder</div>284 </div>285 286 <!-- Row 2 -->287 <div class="app">288 <div class="icon c-darkblue">289 <svg class="glyph" viewBox="0 0 100 100">290 <text x="50" y="62" text-anchor="middle" class="glyph-text" fill="#fff">xe</text>291 </svg>292 </div>293 <div class="label">Xe</div>294 </div>295 296 <div class="app">297 <div class="icon c-white">298 <svg class="glyph" viewBox="0 0 100 100">299 <text x="50" y="58" text-anchor="middle" class="glyph-text-multi">eBay</text>300 </svg>301 </div>302 <div class="label">eBay</div>303 </div>304 305 <div class="app">306 <div class="icon c-blue">307 <svg class="glyph" viewBox="0 0 100 100">308 <rect x="24" y="32" width="44" height="34" rx="6" fill="#F2C94C"></rect>309 <circle cx="68" cy="34" r="6" fill="#F2C94C"></circle>310 <text x="50" y="78" text-anchor="middle" class="glyph-text" fill="#fff">F</text>311 </svg>312 <div class="notif-dot"></div>313 </div>314 <div class="label">BestPrice F</div>315 </div>316 317 <div class="app">318 <div class="icon c-red">319 <svg class="glyph" viewBox="0 0 100 100">320 <circle cx="38" cy="50" r="10" fill="#fff"></circle>321 <circle cx="62" cy="50" r="10" fill="#fff"></circle>322 </svg>323 </div>324 <div class="label">OpenTable</div>325 </div>326 327 <!-- Row 3 -->328 <div class="app">329 <div class="icon c-orange">330 <svg class="glyph" viewBox="0 0 100 100">331 <path d="M50 26c16 12-4 22 6 48" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round"></path>332 </svg>333 </div>334 <div class="label">Swiggy</div>335 </div>336 337 <div class="app">338 <div class="icon c-red">339 <svg class="glyph" viewBox="0 0 100 100">340 <text x="50" y="64" text-anchor="middle" class="glyph-text" fill="#fff">z</text>341 </svg>342 </div>343 <div class="label">Zomato</div>344 </div>345 346 <div class="app">347 <div class="icon c-white">348 <svg class="glyph" viewBox="0 0 100 100">349 <path d="M30 60c10-26 18-28 40-20-12 18-18 26-40 20z" fill="#58A7E6"></path>350 </svg>351 </div>352 <div class="label">Vimeo</div>353 </div>354 355 <div class="app">356 <div class="icon c-yellow">357 <svg class="glyph" viewBox="0 0 100 100">358 <text x="50" y="60" text-anchor="middle" class="glyph-text" fill="#111">blink</text>359 </svg>360 </div>361 <div class="label">Blinkit</div>362 </div>363 364 <!-- Row 4 -->365 <div class="app">366 <div class="icon c-orange">367 <svg class="glyph" viewBox="0 0 100 100">368 <circle cx="30" cy="50" r="10" fill="#fff"></circle>369 <circle cx="70" cy="38" r="10" fill="#fff"></circle>370 <circle cx="68" cy="68" r="10" fill="#fff"></circle>371 <path d="M40 50L60 40M40 52L60 66" stroke="#fff" stroke-width="6"></path>372 </svg>373 </div>374 <div class="label">TripIt</div>375 </div>376 377 <div class="app">378 <div class="icon c-magenta">379 <svg class="glyph" viewBox="0 0 100 100">380 <path d="M50 26c-12 0-22 10-22 22s10 22 22 22 22-10 22-22S62 26 50 26z" fill="none" stroke="#fff" stroke-width="8"></path>381 <circle cx="50" cy="48" r="8" fill="#fff"></circle>382 </svg>383 </div>384 <div class="label">Rome2Rio</div>385 </div>386 387 <div class="app">388 <div class="icon c-white">389 <svg class="glyph" viewBox="0 0 100 100">390 <rect x="30" y="30" width="40" height="40" rx="10" fill="#2B5AA3"></rect>391 <text x="50" y="58" text-anchor="middle" class="glyph-text" fill="#fff">fm</text>392 </svg>393 </div>394 <div class="label">Fresh Mode</div>395 </div>396 397 <div class="app">398 <div class="icon c-blue">399 <svg class="glyph" viewBox="0 0 100 100">400 <rect x="34" y="32" width="32" height="34" rx="6" fill="#F2C94C"></rect>401 <path d="M34 68h32" stroke="#fff" stroke-width="8"></path>402 <circle cx="66" cy="34" r="6" fill="#F2C94C"></circle>403 </svg>404 </div>405 <div class="label">Flipkart</div>406 </div>407 408 <!-- Row 5 -->409 <div class="app">410 <div class="icon c-gray">411 <svg class="glyph" viewBox="0 0 100 100">412 <rect x="20" y="28" width="60" height="44" rx="8" fill="#9E9E9E"></rect>413 <text x="50" y="58" text-anchor="middle" class="glyph-text" fill="#222">±</text>414 </svg>415 </div>416 <div class="label">Currency P...</div>417 </div>418 419 <div class="app">420 <div class="icon c-white">421 <svg class="glyph" viewBox="0 0 100 100">422 <circle cx="50" cy="50" r="40" fill="#2F6DB3"></circle>423 <text x="50" y="62" text-anchor="middle" class="glyph-text" fill="#fff">€</text>424 </svg>425 </div>426 <div class="label">Currency</div>427 </div>428 429 <div class="app">430 <div class="icon c-tan">431 <svg class="glyph" viewBox="0 0 100 100">432 <path d="M30 56c18 18 42 4 42 4" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round"></path>433 <rect x="40" y="26" width="20" height="16" rx="4" fill="#4A86FF" opacity="0.35"></rect>434 </svg>435 </div>436 <div class="label">Amazon</div>437 </div>438 439 <div class="app">440 <div class="icon c-white">441 <svg class="glyph" viewBox="0 0 100 100">442 <rect x="26" y="28" width="48" height="44" rx="10" fill="#6CBF47"></rect>443 <text x="50" y="58" text-anchor="middle" class="glyph-text" fill="#B03030">bb</text>444 </svg>445 </div>446 <div class="label">bigbasket</div>447 </div>448 449 </div>450 451 <!-- Dock icons -->452 <div class="dock">453 <div class="icon c-white">454 <svg class="glyph-small" viewBox="0 0 100 100">455 <path d="M30 26c30 30 44 44 44 44-10 10-18 10-26 2-8-8-18-20-26-28 0-10 8-16 8-18z" fill="#2F77FF"></path>456 </svg>457 </div>458 <div class="icon c-white">459 <svg class="glyph-small" viewBox="0 0 100 100">460 <rect x="20" y="30" width="60" height="40" rx="12" fill="#4A86FF"></rect>461 <circle cx="36" cy="50" r="6" fill="#fff"></circle>462 </svg>463 </div>464 <div class="icon" style="background: #fff;">465 <div style="width:120px;height:120px;border-radius:60px;background: conic-gradient(#DB4437 0 25%, #F4B400 25% 50%, #0F9D58 50% 75%, #4285F4 75% 100%); display:grid; place-items:center;">466 <div style="width:56px;height:56px;border-radius:50%; background:#fff;"></div>467 </div>468 </div>469 <div class="icon c-white">470 <svg class="glyph-small" viewBox="0 0 100 100">471 <rect x="26" y="36" width="48" height="32" rx="8" fill="#3A3A3A"></rect>472 <circle cx="50" cy="52" r="8" fill="#4A86FF"></circle>473 <rect x="42" y="26" width="16" height="10" rx="3" fill="#3A3A3A"></rect>474 </svg>475 </div>476 </div>477 478 <!-- Google Search Bar -->479 <div class="search-bar">480 <div class="search-left">481 <div class="g-logo"></div>482 <div class="search-text">Search</div>483 </div>484 <div class="search-right">485 <!-- Mic icon -->486 <svg viewBox="0 0 24 24" width="48" height="48">487 <path d="M12 4a4 4 0 0 1 4 4v4a4 4 0 1 1-8 0V8a4 4 0 0 1 4-4z" fill="#34A853"></path>488 <path d="M6 11a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2" fill="none"></path>489 <rect x="11" y="18" width="2" height="4" fill="#fff"></rect>490 </svg>491 <!-- Lens icon -->492 <svg viewBox="0 0 24 24" width="48" height="48">493 <circle cx="10" cy="10" r="6" stroke="#EA4335" stroke-width="3" fill="none"></circle>494 <rect x="14" y="14" width="8" height="8" rx="3" fill="#4285F4"></rect>495 </svg>496 </div>497 </div>498 499 <!-- Gesture pill -->500 <div class="pill"></div>501 502</div>503</body>504</html>