GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Home UI 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 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: linear-gradient(#4e6872 0%, #5f7883 120px, #5f7883 100%);19 color: #eef3f6;20 }21 22 /* Status bar shading */23 .status-shade {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 170px;29 background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0));30 pointer-events: none;31 }32 33 /* Status bar */34 .statusbar {35 position: absolute;36 top: 24px;37 left: 0;38 width: 100%;39 height: 60px;40 padding: 0 30px;41 box-sizing: border-box;42 }43 .statusbar .time {44 position: absolute;45 left: 30px;46 top: 0;47 font-size: 34px;48 letter-spacing: 0.5px;49 }50 .statusbar .right {51 position: absolute;52 right: 30px;53 top: 0;54 display: flex;55 align-items: center;56 gap: 22px;57 }58 .status-icon svg {59 width: 40px;60 height: 40px;61 fill: none;62 stroke: #eef3f6;63 stroke-width: 4;64 }65 .status-icon .battery {66 stroke-width: 3.5;67 }68 69 /* Date and weather */70 .date-block {71 position: absolute;72 top: 470px;73 left: 70px;74 }75 .date-block .date {76 font-size: 72px;77 font-weight: 500;78 }79 .date-block .weather {80 margin-top: 24px;81 display: flex;82 align-items: center;83 gap: 20px;84 font-size: 42px;85 color: #dfe6ea;86 }87 .weather .waves {88 width: 64px;89 height: 40px;90 }91 92 /* Clock widget */93 .clock {94 position: absolute;95 top: 860px;96 left: 240px;97 width: 600px;98 height: 600px;99 background: #e9eff4;100 border-radius: 50%;101 box-shadow: 0 10px 30px rgba(0,0,0,0.15);102 }103 .clock .num {104 position: absolute;105 font-size: 140px;106 color: rgba(130,150,160,0.45);107 font-weight: 700;108 }109 .clock .n12 { top: 78px; left: 230px; }110 .clock .n3 { top: 270px; right: 60px; }111 .clock .n6 { bottom: 65px; left: 270px; }112 .clock .n9 { top: 300px; left: 70px; }113 114 .clock .center-dot {115 position: absolute;116 left: 50%;117 top: 50%;118 width: 22px;119 height: 22px;120 background: #3b454b;121 border-radius: 50%;122 transform: translate(-50%, -50%);123 }124 .hand {125 position: absolute;126 left: 50%;127 top: 50%;128 transform-origin: left center;129 transform: translate(-50%, -50%) rotate(0deg);130 border-radius: 8px;131 }132 .hand.hour {133 width: 160px;134 height: 18px;135 background: #3b454b;136 transform: translate(-50%, -50%) rotate(50deg);137 }138 .hand.min {139 width: 220px;140 height: 10px;141 background: #67757d;142 transform: translate(-50%, -50%) rotate(15deg);143 }144 .hand.sec {145 width: 240px;146 height: 4px;147 background: #8d9ba3;148 transform: translate(-50%, -50%) rotate(8deg);149 }150 151 /* App icons */152 .row {153 position: absolute;154 left: 60px;155 width: 960px;156 display: flex;157 justify-content: space-between;158 align-items: flex-start;159 }160 .row.row1 { top: 1510px; }161 .row.row2 { top: 1730px; }162 .row.row3 { top: 1960px; }163 164 .app {165 width: 190px;166 text-align: center;167 color: #e9eef2;168 }169 .icon {170 width: 160px;171 height: 160px;172 border-radius: 50%;173 background: #ffffff;174 box-shadow: 0 8px 18px rgba(0,0,0,0.25);175 margin: 0 auto 22px;176 display: flex;177 align-items: center;178 justify-content: center;179 }180 .label {181 font-size: 40px;182 color: #e6edf1;183 }184 185 /* Simple SVG styling inside icons */186 .icon svg {187 width: 110px;188 height: 110px;189 }190 191 /* Search bar */192 .search-bar {193 position: absolute;194 left: 60px;195 bottom: 190px;196 width: 960px;197 height: 120px;198 background: #ffffff;199 border-radius: 60px;200 box-shadow: 0 8px 18px rgba(0,0,0,0.22);201 display: flex;202 align-items: center;203 padding: 0 36px;204 box-sizing: border-box;205 }206 .search-bar .glogo {207 font-size: 56px;208 font-weight: 700;209 color: #4285F4;210 margin-right: 22px;211 }212 .search-placeholder {213 color: #7f8b92;214 font-size: 42px;215 flex: 1;216 }217 .search-actions {218 display: flex;219 align-items: center;220 gap: 28px;221 }222 .search-actions svg {223 width: 60px;224 height: 60px;225 }226 227 /* Gesture pill */228 .gesture {229 position: absolute;230 bottom: 80px;231 left: 50%;232 width: 240px;233 height: 16px;234 background: rgba(255,255,255,0.85);235 border-radius: 12px;236 transform: translateX(-50%);237 }238</style>239</head>240<body>241<div id="render-target">242 <div class="status-shade"></div>243 244 <div class="statusbar">245 <div class="time">1:12</div>246 <div class="right">247 <div class="status-icon">248 <!-- Wi-Fi -->249 <svg viewBox="0 0 24 24">250 <path d="M2 8c5-4 15-4 20 0" />251 <path d="M5 12c3-3 11-3 14 0" />252 <path d="M8 16c2-2 6-2 8 0" />253 <circle cx="12" cy="19" r="1.8" fill="#eef3f6" stroke="none"/>254 </svg>255 </div>256 <div class="status-icon">257 <!-- Battery -->258 <svg class="battery" viewBox="0 0 28 18">259 <rect x="1.5" y="3" width="22" height="12" rx="2" />260 <rect x="24" y="6" width="3" height="6" rx="1.2" />261 <rect x="4" y="5.5" width="16" height="7" fill="#eef3f6" stroke="none"/>262 </svg>263 </div>264 </div>265 </div>266 267 <!-- Date and Weather -->268 <div class="date-block">269 <div class="date">Wed, Jun 14</div>270 <div class="weather">271 <svg class="waves" viewBox="0 0 64 40">272 <path d="M2 12c8 8 16 8 24 0s16-8 24 0" stroke="#cfd9de" stroke-width="4" fill="none"/>273 <path d="M2 24c8 8 16 8 24 0s16-8 24 0" stroke="#cfd9de" stroke-width="4" fill="none"/>274 <path d="M2 32c8 8 16 8 24 0s16-8 24 0" stroke="#cfd9de" stroke-width="4" fill="none"/>275 </svg>276 <span>39°C</span>277 </div>278 </div>279 280 <!-- Clock Widget -->281 <div class="clock">282 <div class="num n12">12</div>283 <div class="num n3">3</div>284 <div class="num n6">6</div>285 <div class="num n9">9</div>286 <div class="center-dot"></div>287 <div class="hand hour"></div>288 <div class="hand min"></div>289 <div class="hand sec"></div>290 </div>291 292 <!-- Row 1: Maps & Settings -->293 <div class="row row1">294 <div class="app">295 <div class="icon">296 <!-- Maps (pin) -->297 <svg viewBox="0 0 64 64">298 <circle cx="32" cy="24" r="10" fill="#34A853"/>299 <path d="M32 10c-9 0-16 7-16 16 0 10 16 28 16 28s16-18 16-28c0-9-7-16-16-16z" fill="#4285F4"/>300 <circle cx="32" cy="24" r="5" fill="#FBBC05"/>301 </svg>302 </div>303 <div class="label">Maps</div>304 </div>305 <div class="app">306 <div class="icon">307 <!-- Settings (gear simplified) -->308 <svg viewBox="0 0 64 64">309 <circle cx="32" cy="32" r="20" fill="#8AB4F8"/>310 <circle cx="32" cy="32" r="10" fill="#ffffff"/>311 <g stroke="#5f7fb0" stroke-width="6">312 <line x1="32" y1="10" x2="32" y2="0"/>313 <line x1="32" y1="64" x2="32" y2="54"/>314 <line x1="10" y1="32" x2="0" y2="32"/>315 <line x1="64" y1="32" x2="54" y2="32"/>316 <line x1="14" y1="14" x2="6" y2="6"/>317 <line x1="58" y1="58" x2="50" y2="50"/>318 <line x1="14" y1="50" x2="6" y2="58"/>319 <line x1="58" y1="6" x2="50" y2="14"/>320 </g>321 </svg>322 </div>323 <div class="label">Settings</div>324 </div>325 </div>326 327 <!-- Row 2: Play Store, Gmail, Photos, YouTube -->328 <div class="row row2">329 <div class="app">330 <div class="icon">331 <!-- Play Store -->332 <svg viewBox="0 0 64 64">333 <polygon points="16,12 52,32 16,52" fill="#34A853"/>334 <polygon points="20,16 48,32 20,48" fill="#EA4335" opacity="0.8"/>335 <polygon points="16,12 16,52 28,32" fill="#4285F4"/>336 <polygon points="28,32 52,32 36,42" fill="#FBBC05"/>337 </svg>338 </div>339 <div class="label">Play Store</div>340 </div>341 <div class="app">342 <div class="icon">343 <!-- Gmail -->344 <svg viewBox="0 0 64 64">345 <rect x="10" y="16" width="44" height="32" rx="6" fill="#ffffff"/>346 <path d="M10 20 L32 36 L54 20" stroke-width="8" stroke="#EA4335" fill="none"/>347 <path d="M10 20 L32 36 L54 20" stroke-width="8" stroke="#34A853" fill="none" opacity="0.8"/>348 <path d="M10 20 L32 36 L54 20" stroke-width="8" stroke="#4285F4" fill="none" opacity="0.6"/>349 <path d="M10 20 L32 36 L54 20" stroke-width="8" stroke="#FBBC05" fill="none" opacity="0.4"/>350 </svg>351 </div>352 <div class="label">Gmail</div>353 </div>354 <div class="app">355 <div class="icon">356 <!-- Photos -->357 <svg viewBox="0 0 64 64">358 <path d="M32 8 a16 16 0 0 1 0 32 a16 16 0 0 0 0 -32" fill="#EA4335"/>359 <path d="M56 32 a16 16 0 0 1 -32 0 a16 16 0 0 0 32 0" fill="#34A853"/>360 <path d="M32 56 a16 16 0 0 1 0 -32 a16 16 0 0 0 0 32" fill="#4285F4"/>361 <path d="M8 32 a16 16 0 0 1 32 0 a16 16 0 0 0 -32 0" fill="#FBBC05"/>362 <circle cx="32" cy="32" r="6" fill="#ffffff"/>363 </svg>364 </div>365 <div class="label">Photos</div>366 </div>367 <div class="app">368 <div class="icon">369 <!-- YouTube -->370 <svg viewBox="0 0 64 64">371 <rect x="8" y="16" width="48" height="32" rx="8" fill="#FF0000"/>372 <polygon points="28,24 28,40 44,32" fill="#ffffff"/>373 </svg>374 </div>375 <div class="label">YouTube</div>376 </div>377 </div>378 379 <!-- Row 3: Phone, Messages, Chrome, Camera -->380 <div class="row row3">381 <div class="app">382 <div class="icon">383 <!-- Phone -->384 <svg viewBox="0 0 64 64">385 <path d="M16 20c6 16 12 22 28 28l6-8c-4-2-8-4-10-7l-5 5c-6-4-10-8-14-14l5-5c-3-2-5-6-7-10z" fill="#1A73E8"/>386 </svg>387 </div>388 <div class="label">Phone</div>389 </div>390 <div class="app">391 <div class="icon">392 <!-- Messages -->393 <svg viewBox="0 0 64 64">394 <rect x="8" y="12" width="48" height="36" rx="10" fill="#4285F4"/>395 <rect x="16" y="20" width="24" height="10" rx="5" fill="#ffffff"/>396 <rect x="16" y="34" width="20" height="8" rx="4" fill="#e6eef8"/>397 </svg>398 </div>399 <div class="label">Messages</div>400 </div>401 <div class="app">402 <div class="icon">403 <!-- Chrome -->404 <svg viewBox="0 0 64 64">405 <circle cx="32" cy="32" r="28" fill="#DB4437"/>406 <path d="M32 4a28 28 0 0 1 24 14H32z" fill="#F4B400"/>407 <path d="M14 50a28 28 0 0 1-6-18h24z" fill="#0F9D58"/>408 <circle cx="32" cy="32" r="12" fill="#4285F4"/>409 <circle cx="32" cy="32" r="6" fill="#ffffff"/>410 </svg>411 </div>412 <div class="label">Chrome</div>413 </div>414 <div class="app">415 <div class="icon">416 <!-- Camera -->417 <svg viewBox="0 0 64 64">418 <rect x="10" y="18" width="44" height="30" rx="6" fill="#37474F"/>419 <rect x="20" y="10" width="16" height="10" rx="3" fill="#607D8B"/>420 <circle cx="32" cy="33" r="10" fill="#90CAF9"/>421 <circle cx="32" cy="33" r="5" fill="#1976D2"/>422 </svg>423 </div>424 <div class="label">Camera</div>425 </div>426 </div>427 428 <!-- Search bar -->429 <div class="search-bar">430 <div class="glogo">G</div>431 <div class="search-placeholder">Search...</div>432 <div class="search-actions">433 <!-- Mic -->434 <svg viewBox="0 0 24 24">435 <rect x="9" y="4" width="6" height="10" rx="3" fill="#1A73E8"/>436 <path d="M6 11c0 4 3 6 6 6s6-2 6-6" fill="none" stroke="#34A853" stroke-width="2"/>437 <line x1="12" y1="17" x2="12" y2="21" stroke="#EA4335" stroke-width="2"/>438 <line x1="8" y1="21" x2="16" y2="21" stroke="#FBBC05" stroke-width="2"/>439 </svg>440 <!-- Lens/Camera -->441 <svg viewBox="0 0 24 24">442 <rect x="4" y="6" width="16" height="12" rx="3" fill="#ffffff" stroke="#4285F4" stroke-width="2"/>443 <circle cx="12" cy="12" r="4" fill="#34A853"/>444 <rect x="8" y="3" width="8" height="4" rx="2" fill="#EA4335"/>445 </svg>446 </div>447 </div>448 449 <!-- Gesture pill -->450 <div class="gesture"></div>451</div>452</body>453</html>