GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home Screen Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: "Roboto", Arial, sans-serif;12 }13 #render-target {14 position: relative;15 overflow: hidden;16 width: 1080px;17 height: 2400px;18 background: radial-gradient(1200px 1200px at 20% 70%, #98a692 0%, #7d8b77 40%, #6c7b66 70%, #5b6b58 100%);19 }20 21 /* Decorative curved wallpaper accents */22 .curve {23 position: absolute;24 border-radius: 1000px;25 pointer-events: none;26 filter: contrast(105%);27 }28 .curve.curve-1 {29 width: 1200px;30 height: 2200px;31 left: 520px;32 top: -200px;33 background: linear-gradient(180deg, rgba(40,50,40,0.25), rgba(40,50,40,0.05));34 border: 2px solid rgba(0,0,0,0.25);35 transform: rotate(6deg);36 }37 .curve.curve-2 {38 width: 900px;39 height: 1800px;40 left: 800px;41 top: 400px;42 background: linear-gradient(180deg, rgba(30,40,30,0.30), rgba(30,40,30,0.08));43 border: 2px solid rgba(0,0,0,0.35);44 transform: rotate(28deg);45 }46 .curve.curve-3 {47 width: 1400px;48 height: 1600px;49 left: -300px;50 top: 700px;51 background: linear-gradient(180deg, rgba(30,40,30,0.15), rgba(30,40,30,0.04));52 border: 2px solid rgba(0,0,0,0.18);53 transform: rotate(-8deg);54 }55 56 /* Status bar */57 .status-bar {58 position: absolute;59 top: 22px;60 left: 0;61 width: 100%;62 height: 60px;63 color: #fff;64 font-size: 34px;65 line-height: 60px;66 padding: 0 32px;67 display: flex;68 justify-content: space-between;69 align-items: center;70 letter-spacing: 0.5px;71 }72 .status-left {73 display: flex;74 align-items: center;75 gap: 18px;76 }77 .status-right {78 display: flex;79 align-items: center;80 gap: 22px;81 font-size: 0; /* rely on icon sizes */82 }83 .status-icon svg {84 width: 34px;85 height: 34px;86 fill: #fff;87 }88 89 /* Timer text on home */90 .timer-display {91 position: absolute;92 top: 200px;93 left: 90px;94 display: flex;95 align-items: center;96 gap: 22px;97 color: #ffffff;98 }99 .timer-display svg {100 width: 48px;101 height: 48px;102 fill: #fff;103 }104 .timer-display .time-text {105 font-size: 52px;106 font-weight: 500;107 letter-spacing: 1px;108 text-shadow: 0 1px 2px rgba(0,0,0,0.25);109 }110 111 /* App grid */112 .app-grid {113 position: absolute;114 left: 50%;115 transform: translateX(-50%);116 bottom: 520px;117 width: 960px;118 display: grid;119 grid-template-columns: repeat(4, 1fr);120 grid-row-gap: 80px;121 grid-column-gap: 40px;122 justify-items: center;123 align-items: start;124 }125 .app {126 width: 180px;127 text-align: center;128 color: #ffffff;129 }130 .app .icon-wrap {131 position: relative;132 width: 140px;133 height: 140px;134 margin: 0 auto;135 border-radius: 50%;136 background: #ffffff;137 box-shadow: 0 6px 18px rgba(0,0,0,0.25);138 display: flex;139 align-items: center;140 justify-content: center;141 }142 .app .label {143 margin-top: 16px;144 font-size: 34px;145 font-weight: 500;146 text-shadow: 0 1px 2px rgba(0,0,0,0.25);147 }148 /* Badge dot */149 .badge {150 position: absolute;151 right: 8px;152 top: 8px;153 width: 28px;154 height: 28px;155 background: #c8e7f8;156 border: 3px solid #ffffff;157 border-radius: 50%;158 }159 160 /* Dock row icons (no labels) */161 .dock-row {162 position: absolute;163 left: 50%;164 transform: translateX(-50%);165 bottom: 360px;166 width: 840px;167 display: grid;168 grid-template-columns: repeat(4, 1fr);169 grid-column-gap: 56px;170 justify-items: center;171 align-items: center;172 }173 .dock-row .icon-wrap {174 width: 130px;175 height: 130px;176 }177 178 /* Search bar dock */179 .search-dock {180 position: absolute;181 left: 50%;182 transform: translateX(-50%);183 bottom: 210px;184 width: 920px;185 height: 120px;186 background: #2e2e2e;187 border-radius: 60px;188 box-shadow: 0 10px 24px rgba(0,0,0,0.35);189 display: flex;190 align-items: center;191 justify-content: space-between;192 padding: 0 34px;193 color: #fff;194 }195 .search-left {196 display: flex;197 align-items: center;198 gap: 22px;199 font-size: 40px;200 font-weight: 600;201 }202 .g-logo {203 width: 62px; height: 62px; border-radius: 50%;204 background: #fff;205 display: flex; align-items: center; justify-content: center;206 }207 .search-right {208 display: flex;209 align-items: center;210 gap: 26px;211 }212 .search-right .dock-icon svg {213 width: 48px; height: 48px; fill: #fff;214 }215 216 /* Bottom navigation pill */217 .nav-pill {218 position: absolute;219 left: 50%;220 transform: translateX(-50%);221 bottom: 72px;222 width: 220px;223 height: 14px;224 background: rgba(40,40,40,0.65);225 border-radius: 18px;226 }227 228 /* Simple SVG icon sizing inside app circles */229 .icon svg {230 width: 88px;231 height: 88px;232 display: block;233 }234 235 /* Helper colors for multi-color icons */236 .play-green { fill: #31a852; }237 .play-blue { fill: #1a73e8; }238 .play-red { fill: #ea4335; }239 .play-yellow { fill: #fbbc04; }240 .gmail-red { fill: #ea4335; }241 .gmail-green { fill: #34a853; }242 .gmail-blue { fill: #1a73e8; }243 .gmail-yellow { fill: #fbbc04; }244 .photos-blue { fill: #1a73e8; }245 .photos-red { fill: #ea4335; }246 .photos-yellow { fill: #fbbc04; }247 .photos-green { fill: #34a853; }248 .yt-red { fill: #ff3b30; }249 .phone-blue { fill: #2f6bd6; }250 .msg-blue { fill: #3d7bf6; }251 .chrome-red { fill: #ea4335; }252 .chrome-yellow { fill: #fbbc04; }253 .chrome-green { fill: #34a853; }254 .chrome-blue { fill: #1a73e8; }255 .camera-gray { fill: #4b4b4b; }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Wallpaper shapes -->262 <div class="curve curve-1"></div>263 <div class="curve curve-2"></div>264 <div class="curve curve-3"></div>265 266 <!-- Status bar -->267 <div class="status-bar">268 <div class="status-left">269 <span style="font-size:34px;">2:59</span>270 </div>271 <div class="status-right">272 <!-- Simple set of status icons -->273 <div class="status-icon" title="Do Not Disturb">274 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20A10 10 0 0 0 12 2zm-6 9h12v2H6z"/></svg>275 </div>276 <div class="status-icon" title="Wi-Fi">277 <svg viewBox="0 0 24 24"><path d="M12 18l-2.5-2.5a3.5 3.5 0 0 1 5 0L12 18zm6-5.5a7 7 0 0 0-12 0l-1.9-1.9a9.5 9.5 0 0 1 15.8 0L18 12.5z"/></svg>278 </div>279 <div class="status-icon" title="Battery">280 <svg viewBox="0 0 24 24"><path d="M18 7h1v10h-1v2H6V5h12v2zM8 7v10h8V7H8z"/></svg>281 </div>282 </div>283 </div>284 285 <!-- Timer display -->286 <div class="timer-display">287 <svg viewBox="0 0 24 24"><path d="M8 2h8v2H8V2zm8.7 4H7.3A6.5 6.5 0 0 0 6 7.9c0 2.2 2.7 3.9 5 5.1 2.3-1.2 5-2.9 5-5.1A6.5 6.5 0 0 0 16.7 6zM11 14.6c-2.3 1.2-5 2.9-5 5.1A6.4 6.4 0 0 0 7.3 22h9.4A6.4 6.4 0 0 0 18 19.7c0-2.2-2.7-3.9-5-5.1z"/></svg>288 <div class="time-text">23:25</div>289 </div>290 291 <!-- App grid row 1 -->292 <div class="app-grid">293 <!-- Play Store -->294 <div class="app">295 <div class="icon-wrap">296 <div class="icon">297 <svg viewBox="0 0 100 100">298 <path class="play-green" d="M20 20 L40 50 L20 80 Z"/>299 <path class="play-blue" d="M40 50 L78 32 Q84 29 80 25 L28 8 Z"/>300 <path class="play-red" d="M40 50 L78 68 Q84 71 80 75 L28 92 Z"/>301 <path class="play-yellow" d="M24 16 L28 8 L80 25 L76 29 Z"/>302 </svg>303 </div>304 </div>305 <div class="label">Play Store</div>306 </div>307 308 <!-- Gmail -->309 <div class="app">310 <div class="icon-wrap">311 <div class="icon">312 <svg viewBox="0 0 100 100">313 <rect x="18" y="28" width="64" height="44" rx="8" ry="8" fill="#ffffff" stroke="#dadce0" stroke-width="4"/>314 <path class="gmail-red" d="M18 32 L50 54 L82 32 L82 24 L50 46 L18 24 Z"/>315 <path class="gmail-blue" d="M18 32 V70 H30 V40 Z"/>316 <path class="gmail-yellow" d="M82 32 V70 H70 V40 Z"/>317 <path class="gmail-green" d="M30 40 L30 70 H70 V40 L50 54 Z"/>318 </svg>319 </div>320 <span class="badge"></span>321 </div>322 <div class="label">Gmail</div>323 </div>324 325 <!-- Photos -->326 <div class="app">327 <div class="icon-wrap">328 <div class="icon">329 <svg viewBox="0 0 100 100">330 <circle class="photos-blue" cx="50" cy="28" r="18"/>331 <circle class="photos-red" cx="72" cy="50" r="18"/>332 <circle class="photos-yellow" cx="50" cy="72" r="18"/>333 <circle class="photos-green" cx="28" cy="50" r="18"/>334 <circle cx="50" cy="50" r="10" fill="#ffffff"/>335 </svg>336 </div>337 <span class="badge"></span>338 </div>339 <div class="label">Photos</div>340 </div>341 342 <!-- YouTube -->343 <div class="app">344 <div class="icon-wrap">345 <div class="icon">346 <svg viewBox="0 0 100 100">347 <rect class="yt-red" x="18" y="30" width="64" height="40" rx="12" ry="12"/>348 <path fill="#ffffff" d="M44 42 L44 58 L60 50 Z"/>349 </svg>350 </div>351 <span class="badge"></span>352 </div>353 <div class="label">YouTube</div>354 </div>355 </div>356 357 <!-- Dock row (no labels) -->358 <div class="dock-row">359 <!-- Phone -->360 <div class="icon-wrap">361 <div class="icon">362 <svg viewBox="0 0 100 100">363 <path class="phone-blue" d="M30 20 h22 a8 8 0 0 1 8 8 v10 l-12 8 l12 8 v10 a8 8 0 0 1-8 8 H30 a8 8 0 0 1-8-8 V28 a8 8 0 0 1 8-8 z"/>364 </svg>365 </div>366 </div>367 368 <!-- Messages -->369 <div class="icon-wrap">370 <div class="icon">371 <svg viewBox="0 0 100 100">372 <rect class="msg-blue" x="22" y="26" width="56" height="40" rx="10"/>373 <rect fill="#ffffff" x="30" y="40" width="40" height="6" rx="3"/>374 <rect fill="#ffffff" x="30" y="32" width="28" height="6" rx="3"/>375 <path class="msg-blue" d="M38 66 L40 58 H70 L60 66 Z"/>376 </svg>377 </div>378 </div>379 380 <!-- Chrome -->381 <div class="icon-wrap">382 <div class="icon">383 <svg viewBox="0 0 100 100">384 <circle cx="50" cy="50" r="40" fill="#ffffff"/>385 <path class="chrome-red" d="M50 50 L30 16 A40 40 0 0 1 90 50 Z"/>386 <path class="chrome-green" d="M50 50 L90 50 A40 40 0 0 1 30 84 Z"/>387 <path class="chrome-yellow" d="M50 50 L30 84 A40 40 0 0 1 30 16 Z"/>388 <circle class="chrome-blue" cx="50" cy="50" r="16"/>389 </svg>390 </div>391 </div>392 393 <!-- Camera -->394 <div class="icon-wrap">395 <div class="icon">396 <svg viewBox="0 0 100 100">397 <rect class="camera-gray" x="20" y="30" width="60" height="40" rx="10"/>398 <rect fill="#ffffff" x="36" y="38" width="28" height="28" rx="14"/>399 <circle cx="50" cy="52" r="10" fill="#7aa0ff"/>400 <rect fill="#9e9e9e" x="30" y="24" width="16" height="8" rx="4"/>401 </svg>402 </div>403 </div>404 </div>405 406 <!-- Search dock bar -->407 <div class="search-dock">408 <div class="search-left">409 <div class="g-logo">410 <!-- Simplified colored "G" -->411 <svg viewBox="0 0 24 24" width="36" height="36">412 <path fill="#1a73e8" d="M12 4a8 8 0 1 0 0 16c2.2 0 3.8-.7 5.1-1.8l-3.1-2.4c-.6.4-1.4.8-2 .8a4.8 4.8 0 1 1 0-9.6c1.4 0 2.6.5 3.5 1.3l2.6-2.6C16.9 4.8 14.7 4 12 4z"/>413 <path fill="#34a853" d="M21 12.2c0-.4-.1-.8-.1-1.2H12v3.4h5.1c-.3 1.4-1.2 2.6-2.6 3.4l3.1 2.4c2-1.5 3.4-3.9 3.4-7z"/>414 <path fill="#fbbc04" d="M7.7 14.6A4.8 4.8 0 0 1 7.2 12c0-.9.2-1.8.5-2.6L4.8 7.9A8 8 0 0 0 4 12c0 1.4.3 2.7.8 3.9l2.9-1.3z"/>415 <path fill="#ea4335" d="M12 7.2c1.4 0 2.6.5 3.5 1.3l2.6-2.6A8 8 0 0 0 12 4v3.2z"/>416 </svg>417 </div>418 <span style="opacity:0.85;">Search</span>419 </div>420 <div class="search-right">421 <div class="dock-icon" title="Voice">422 <svg viewBox="0 0 24 24">423 <path fill="#4285f4" d="M12 4a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/>424 <path fill="#34a853" d="M7 11h2v1a3 3 0 0 0 6 0v-1h2v1a5 5 0 0 1-10 0v-1z"/>425 <rect fill="#fbbc04" x="11" y="18" width="2" height="3" rx="1"/>426 <rect fill="#ea4335" x="9" y="21" width="6" height="2" rx="1"/>427 </svg>428 </div>429 <div class="dock-icon" title="Lens">430 <svg viewBox="0 0 24 24">431 <rect x="4" y="6" width="16" height="12" rx="3" fill="#ffffff" stroke="#888" stroke-width="1.5"/>432 <circle cx="12" cy="12" r="4" fill="#7aa0ff"/>433 <rect x="8" y="4" width="4" height="3" rx="1" fill="#888"/>434 </svg>435 </div>436 </div>437 </div>438 439 <!-- Bottom navigation pill -->440 <div class="nav-pill"></div>441 442</div>443</body>444</html>