GD-ML/AndroidCode
13.4k
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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;13 }14 15 /* Root container: required sizing and boundary */16 #render-target {17 width: 1080px;18 height: 2400px;19 position: relative;20 overflow: hidden;21 /* Stylized wallpaper (illustrative, no external image) */22 background:23 radial-gradient(1200px 1200px at 20% 30%, rgba(255,140,105,0.35), transparent 60%),24 radial-gradient(900px 900px at 80% 60%, rgba(255,105,180,0.22), transparent 65%),25 radial-gradient(700px 700px at 40% 80%, rgba(255,80,60,0.22), transparent 70%),26 linear-gradient(180deg, #2f6d82 0%, #2e6a7e 40%, #2a6679 100%);27 color: #fff;28 }29 30 /* Decorative doodles to echo the playful background */31 .sparkle, .dot {32 position: absolute;33 pointer-events: none;34 opacity: 0.75;35 }36 .sparkle {37 width: 26px; height: 26px;38 border: 3px solid rgba(255, 180, 90, 0.9);39 transform: rotate(45deg);40 border-radius: 4px;41 }42 .dot {43 width: 14px; height: 14px;44 background: rgba(255, 120, 90, 0.9);45 border-radius: 50%;46 }47 48 /* Status bar */49 .status-bar {50 position: absolute;51 top: 0;52 left: 0;53 width: 100%;54 height: 96px;55 display: flex;56 align-items: center;57 justify-content: space-between;58 padding: 0 32px;59 font-size: 34px;60 letter-spacing: 0.5px;61 color: #ffffff;62 text-shadow: 0 1px 2px rgba(0,0,0,0.3);63 }64 .sb-right {65 display: flex;66 align-items: center;67 gap: 18px;68 font-size: 30px;69 }70 .icon-sb {71 display: inline-flex;72 align-items: center;73 justify-content: center;74 width: 40px;75 height: 40px;76 }77 .icon-sb svg {78 width: 36px;79 height: 36px;80 fill: #fff;81 }82 83 /* Apps grid */84 .apps {85 position: absolute;86 left: 50%;87 transform: translateX(-50%);88 top: 200px;89 width: 980px;90 display: grid;91 grid-template-columns: repeat(4, 1fr);92 row-gap: 78px;93 column-gap: 46px;94 }95 .app {96 text-align: center;97 color: #ffffff;98 text-shadow: 0 2px 3px rgba(0,0,0,0.35);99 }100 .app .circle {101 margin: 0 auto 16px;102 width: 150px;103 height: 150px;104 border-radius: 50%;105 box-shadow: 0 10px 16px rgba(0,0,0,0.28), inset 0 0 0 2px rgba(255,255,255,0.22);106 display: flex;107 align-items: center;108 justify-content: center;109 font-weight: 700;110 letter-spacing: 0.2px;111 color: #fff;112 }113 .app .label {114 font-size: 32px;115 white-space: nowrap;116 overflow: hidden;117 text-overflow: ellipsis;118 }119 120 /* Simple variety of app colors */121 .c-gray { background: linear-gradient(135deg, #757575, #555); }122 .c-green { background: linear-gradient(135deg, #34c759, #2e9d49); }123 .c-pink { background: linear-gradient(135deg, #ff6ea9, #e74d9c); }124 .c-red { background: linear-gradient(135deg, #ff5252, #e53935); }125 .c-blue { background: linear-gradient(135deg, #4f8cff, #2f6bff); }126 .c-indigo { background: linear-gradient(135deg, #5b6cff, #3b4add); }127 .c-purple { background: linear-gradient(135deg, #7e57c2, #5e35b1); }128 .c-yellow { background: linear-gradient(135deg, #ffcc33, #e6a300); color: #2a2000; text-shadow: none; }129 .c-teal { background: linear-gradient(135deg, #26c6da, #00acc1); }130 .c-orange { background: linear-gradient(135deg, #ff8a50, #ff6e40); }131 .c-dusk { background: linear-gradient(135deg, #4c5b6b, #2f3a46); }132 .c-spotify { background: #1db954; }133 134 /* Center floating app (Any.do) */135 .floating-center {136 position: absolute;137 left: 50%;138 transform: translateX(-50%);139 top: 1450px;140 text-align: center;141 }142 .floating-center .circle {143 width: 180px;144 height: 180px;145 border-radius: 50%;146 background: linear-gradient(145deg, #ff5a4a, #ff2f7a);147 position: relative;148 box-shadow: 0 12px 20px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.25);149 }150 .floating-center .check {151 position: absolute;152 right: -6px;153 bottom: -6px;154 width: 120px;155 height: 120px;156 background: #4a8dff;157 border-radius: 50%;158 display: flex;159 align-items: center;160 justify-content: center;161 box-shadow: 0 6px 12px rgba(0,0,0,0.35);162 }163 .floating-center .check svg {164 width: 70px; height: 70px; fill: #fff;165 }166 .floating-center .label {167 margin-top: 14px;168 font-size: 32px;169 text-shadow: 0 2px 3px rgba(0,0,0,0.35);170 }171 172 /* Bottom dock icons */173 .dock {174 position: absolute;175 left: 50%;176 transform: translateX(-50%);177 bottom: 340px;178 width: 820px;179 display: flex;180 justify-content: space-between;181 align-items: center;182 }183 .dock .dock-ic {184 width: 128px;185 height: 128px;186 background: #ffffff;187 border-radius: 50%;188 box-shadow: 0 8px 16px rgba(0,0,0,0.35);189 display: flex;190 align-items: center;191 justify-content: center;192 }193 .dock .dock-ic svg {194 width: 64px;195 height: 64px;196 fill: #2962ff;197 }198 199 /* Snackbar (notification pill) */200 .snackbar {201 position: absolute;202 left: 50%;203 transform: translateX(-50%);204 bottom: 470px;205 height: 120px;206 min-width: 720px;207 background: rgba(32, 36, 40, 0.95);208 border-radius: 28px;209 display: flex;210 align-items: center;211 padding: 0 28px;212 color: #e8eaed;213 box-shadow: 0 12px 24px rgba(0,0,0,0.4);214 gap: 20px;215 font-size: 34px;216 }217 .snackbar .left-ic {218 width: 64px; height: 64px;219 border-radius: 50%;220 background: #1bb3a7;221 display: flex; align-items: center; justify-content: center;222 }223 .snackbar .left-ic svg { width: 34px; height: 34px; fill: #fff; }224 225 /* Google search bar at bottom */226 .search-dock {227 position: absolute;228 left: 50%;229 transform: translateX(-50%);230 bottom: 220px;231 width: 980px;232 height: 120px;233 background: rgba(30, 32, 35, 0.95);234 border-radius: 60px;235 box-shadow: 0 14px 28px rgba(0,0,0,0.45);236 display: flex;237 align-items: center;238 padding: 0 26px;239 color: #dfe1e5;240 justify-content: space-between;241 }242 .search-left {243 display: flex; align-items: center; gap: 18px;244 font-size: 40px; font-weight: 600;245 }246 .g-circle {247 width: 64px; height: 64px; border-radius: 50%; background: #fff;248 color: #1a73e8; display: flex; align-items: center; justify-content: center;249 font-weight: 800;250 }251 .search-right {252 display: flex; align-items: center; gap: 16px;253 }254 .s-ic {255 width: 64px; height: 64px; border-radius: 16px;256 background: rgba(255,255,255,0.08);257 display: flex; align-items: center; justify-content: center;258 }259 .s-ic svg { width: 34px; height: 34px; fill: #fff; opacity: 0.9; }260 261 /* Gesture handle */262 .gesture {263 position: absolute;264 left: 50%;265 transform: translateX(-50%);266 bottom: 64px;267 width: 280px;268 height: 14px;269 border-radius: 7px;270 background: #ffffff;271 opacity: 0.92;272 box-shadow: 0 2px 6px rgba(0,0,0,0.25);273 }274</style>275</head>276<body>277<div id="render-target">278 279 <!-- Decorative doodles -->280 <div class="sparkle" style="top:140px; left:120px;"></div>281 <div class="sparkle" style="top:460px; left:880px; transform:rotate(25deg)"></div>282 <div class="dot" style="top:540px; left:760px;"></div>283 <div class="dot" style="top:960px; left:980px;"></div>284 <div class="dot" style="top:1260px; left:180px; background:#ff9b3d"></div>285 <div class="sparkle" style="top:1020px; left:560px; border-color:#ff6c9c"></div>286 287 <!-- Status Bar -->288 <div class="status-bar">289 <div class="sb-left">1:49</div>290 <div class="sb-right">291 <div class="icon-sb" title="Wi‑Fi">292 <svg viewBox="0 0 24 24" aria-hidden="true">293 <path d="M12 18.5c.9 0 1.6.7 1.6 1.5S12.9 21.5 12 21.5s-1.6-.7-1.6-1.5.7-1.5 1.6-1.5zM3 9.5c5.9-5 12.1-5 18 0l-2.1 2.2c-4.4-3.7-9.4-3.7-13.8 0L3 9.5zm4 4c3.6-3 6.4-3 10 0l-2.2 2c-2.3-1.9-3.3-1.9-5.6 0L7 13.5z"/>294 </svg>295 </div>296 <div class="icon-sb" title="Battery">297 <svg viewBox="0 0 24 24" aria-hidden="true">298 <path d="M16 6h1c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h1V5h8v1zM7 8v8h10V8H7z"/>299 </svg>300 </div>301 <div>100%</div>302 </div>303 </div>304 305 <!-- Apps Grid -->306 <div class="apps">307 <div class="app">308 <div class="circle c-gray">DBW</div>309 <div class="label">DBW Show...</div>310 </div>311 <div class="app">312 <div class="circle c-green">Ludo</div>313 <div class="label">Ludo King</div>314 </div>315 <div class="app">316 <div class="circle c-pink">N</div>317 <div class="label">Nykaa</div>318 </div>319 <div class="app">320 <div class="circle c-red">P</div>321 <div class="label">Pinterest</div>322 </div>323 324 <div class="app">325 <div class="circle c-blue">Ori</div>326 <div class="label">Origami</div>327 </div>328 <div class="app">329 <div class="circle c-indigo">Orgy</div>330 <div class="label">Origy</div>331 </div>332 <div class="app">333 <div class="circle c-spotify">♫</div>334 <div class="label">Spotify</div>335 </div>336 <div class="app">337 <div class="circle c-orange">Bird</div>338 <div class="label">Origami birds</div>339 </div>340 341 <div class="app">342 <div class="circle c-dusk">OS</div>343 <div class="label">Origami Se...</div>344 </div>345 <div class="app">346 <div class="circle c-yellow">Keep</div>347 <div class="label">Keep Notes</div>348 </div>349 <div class="app">350 <div class="circle c-teal">List</div>351 <div class="label">To‑do List</div>352 </div>353 <div class="app">354 <div class="circle c-purple">Rem</div>355 <div class="label">Reminder</div>356 </div>357 </div>358 359 <!-- Floating center app (Any.do) -->360 <div class="floating-center">361 <div class="circle">362 <div class="check" aria-hidden="true">363 <svg viewBox="0 0 24 24">364 <path d="M9.2 16.6 4.9 12.3l1.8-1.8 2.5 2.6 6.1-6.1 1.8 1.8-7.9 7.8z"/>365 </svg>366 </div>367 </div>368 <div class="label">Any.do</div>369 </div>370 371 <!-- Dock icons -->372 <div class="dock">373 <div class="dock-ic" title="Phone">374 <svg viewBox="0 0 24 24"><path d="M6.6 2.9 9 3.6c.4.1.7.4.9.8l1 2.6c.2.5.1 1-.2 1.4L9.2 10c1.2 2.2 3 4 5.2 5.2l1.6-1.6c.4-.3.9-.4 1.4-.2l2.6 1c.4.2.7.5.8.9l.7 2.4c.2.7-.2 1.5-.9 1.8-2 .8-6.5.6-11.2-4.1S1.9 6.9 2.7 4.9c.3-.7 1.1-1.1 1.9-.9z"/></svg>375 </div>376 <div class="dock-ic" title="Messages">377 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z"/></svg>378 </div>379 <div class="dock-ic" title="Chrome">380 <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 0 1 6.9 4H12l-3.5 6H6A8 8 0 1 1 12 4zm0 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>381 </div>382 <div class="dock-ic" title="Camera">383 <svg viewBox="0 0 24 24"><path d="M9 4h6l1.5 2H20c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3L9 4zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>384 </div>385 </div>386 387 <!-- Snackbar -->388 <div class="snackbar" role="status" aria-live="polite">389 <div class="left-ic">390 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 2.5-1.4 4.9-3.5 6.1L14 22l-2-3-2 3-1.5-6A7 7 0 0 1 5 9a7 7 0 0 1 7-7z"/></svg>391 </div>392 <div>Snoozing for 5 minutes.</div>393 </div>394 395 <!-- Search dock -->396 <div class="search-dock">397 <div class="search-left">398 <div class="g-circle">G</div>399 </div>400 <div class="search-right">401 <div class="s-ic" title="Voice Search">402 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-1 14.9V21h2v-3.1a7 7 0 0 0 6-6h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6z"/></svg>403 </div>404 <div class="s-ic" title="Lens">405 <svg viewBox="0 0 24 24"><path d="M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7zm4 0h10v10H7V7z"/></svg>406 </div>407 <div class="s-ic" title="Camera">408 <svg viewBox="0 0 24 24"><path d="M9 5h6l1.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3L9 5z"/></svg>409 </div>410 </div>411 </div>412 413 <!-- Gesture bar -->414 <div class="gesture" aria-hidden="true"></div>415 416</div>417</body>418</html>