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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0000; /* keep outer container clean */14 }15 16 /* Wallpaper placeholder */17 .wallpaper {18 position: absolute;19 inset: 0;20 background: #E0E0E0;21 border: 1px solid #BDBDBD;22 display: flex;23 align-items: center;24 justify-content: center;25 color: #757575;26 font-size: 32px;27 letter-spacing: 0.5px;28 }29 30 /* Status bar */31 .status-bar {32 position: absolute;33 top: 20px;34 left: 24px;35 right: 24px;36 height: 64px;37 display: flex;38 align-items: center;39 color: #fff;40 z-index: 2;41 }42 .status-time {43 font-size: 36px;44 font-weight: 600;45 text-shadow: 0 2px 6px rgba(0,0,0,0.45);46 margin-right: 18px;47 }48 .status-icons {49 display: flex;50 align-items: center;51 gap: 18px;52 margin-left: 6px;53 }54 .status-right {55 margin-left: auto;56 display: flex;57 align-items: center;58 gap: 16px;59 }60 .si {61 width: 28px;62 height: 28px;63 opacity: 0.95;64 }65 66 /* App grid */67 .apps-grid {68 position: absolute;69 top: 160px;70 left: 20px;71 right: 20px;72 display: grid;73 grid-template-columns: repeat(4, 1fr);74 grid-auto-rows: minmax(240px, auto);75 gap: 28px 18px;76 z-index: 2;77 }78 .app {79 display: flex;80 flex-direction: column;81 align-items: center;82 justify-content: flex-start;83 color: #fff;84 text-align: center;85 }86 .icon {87 width: 160px;88 height: 160px;89 border-radius: 50%;90 position: relative;91 box-shadow: 0 6px 24px rgba(0,0,0,0.35);92 display: flex;93 align-items: center;94 justify-content: center;95 }96 .label {97 margin-top: 18px;98 font-size: 34px;99 line-height: 1.1;100 text-shadow: 0 2px 6px rgba(0,0,0,0.6);101 max-width: 220px;102 }103 .dot {104 position: absolute;105 top: 10px;106 right: 10px;107 width: 26px;108 height: 26px;109 background: #9ED47A;110 border: 3px solid rgba(255,255,255,0.9);111 border-radius: 50%;112 box-shadow: 0 2px 4px rgba(0,0,0,0.35);113 }114 115 /* Dock */116 .dock {117 position: absolute;118 bottom: 370px;119 left: 80px;120 right: 80px;121 height: 160px;122 display: flex;123 align-items: center;124 justify-content: space-between;125 z-index: 2;126 }127 .dock .icon {128 width: 140px;129 height: 140px;130 background: #ffffff;131 box-shadow: 0 10px 24px rgba(0,0,0,0.35);132 }133 134 /* Search bar */135 .search-bar {136 position: absolute;137 bottom: 240px;138 left: 60px;139 right: 60px;140 height: 120px;141 background: #3A3636;142 border-radius: 60px;143 box-shadow: 0 10px 28px rgba(0,0,0,0.45);144 display: flex;145 align-items: center;146 padding: 0 28px;147 z-index: 2;148 }149 .search-left {150 display: flex;151 align-items: center;152 gap: 16px;153 color: #fff;154 font-size: 34px;155 text-shadow: 0 2px 6px rgba(0,0,0,0.5);156 }157 .search-right {158 margin-left: auto;159 display: flex;160 align-items: center;161 gap: 30px;162 }163 .pill {164 background: rgba(255,255,255,0.12);165 color: #cfcfcf;166 font-size: 30px;167 padding: 16px 22px;168 border-radius: 40px;169 }170 171 /* Home indicator */172 .home-indicator {173 position: absolute;174 bottom: 120px;175 left: 50%;176 transform: translateX(-50%);177 width: 280px;178 height: 12px;179 background: rgba(255,255,255,0.85);180 border-radius: 8px;181 z-index: 2;182 }183 184 /* Simple color schemes for icons */185 .bg-brown { background: linear-gradient(135deg,#7b5a3a,#a9764d); }186 .bg-blue { background: linear-gradient(135deg,#4da9ff,#1e77e8); }187 .bg-white { background: #ffffff; }188 .bg-cyan { background: linear-gradient(135deg,#31c7ff,#1eb2e0); }189 .bg-pink { background: linear-gradient(135deg,#ff6a8e,#e83d6b); }190 .bg-purple { background: linear-gradient(135deg,#7c49ff,#4d2ce0); }191 .bg-orange { background: linear-gradient(135deg,#ffb74d,#ff7f00); }192 .bg-navy { background: linear-gradient(135deg,#102347,#384a8a); }193 .bg-green { background: linear-gradient(135deg,#5ad27f,#1ea75b); }194 .bg-indigo { background: linear-gradient(135deg,#2c5bd7,#0b3d9d); }195 .bg-royal { background: linear-gradient(135deg,#4b6cff,#3b54e0); }196 .bg-magenta { background: linear-gradient(135deg,#ff4a7a,#ff2b58); }197 198 /* Simple inline SVG sizing inside icon */199 .icon svg { width: 72%; height: 72%; }200 201 /* Single centered app row (Reminders) */202 .single-row {203 position: absolute;204 top: 1470px;205 left: 0;206 right: 0;207 display: flex;208 justify-content: center;209 z-index: 2;210 }211 212</style>213</head>214<body>215<div id="render-target">216 217 <div class="wallpaper">[IMG: Forest trail wallpaper]</div>218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div class="status-time">12:28</div>222 <div class="status-icons">223 <!-- bell -->224 <svg class="si" viewBox="0 0 24 24" fill="#ffffff">225 <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.7-6-6-6S6 7.7 6 11v5l-2 2v1h16v-1l-2-2z"/>226 </svg>227 <!-- location -->228 <svg class="si" viewBox="0 0 24 24" fill="#ffffff">229 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>230 </svg>231 <!-- check -->232 <svg class="si" viewBox="0 0 24 24" fill="#ffffff">233 <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>234 </svg>235 <!-- pencil -->236 <svg class="si" viewBox="0 0 24 24" fill="#ffffff">237 <path d="M3 17.2V21h3.8L17.9 9.9l-3.8-3.8L3 17.2zm18.3-10.2c.4-.4.4-1 0-1.4l-2.9-2.9c-.4-.4-1-.4-1.4 0l-1.9 1.9 3.8 3.8 2.4-1.4z"/>238 </svg>239 <!-- dot -->240 <svg class="si" viewBox="0 0 24 24" fill="#ffffff">241 <circle cx="12" cy="12" r="5"/>242 </svg>243 </div>244 <div class="status-right">245 <!-- battery -->246 <svg class="si" viewBox="0 0 28 24" fill="#ffffff">247 <rect x="2" y="6" width="20" height="12" rx="2"></rect>248 <rect x="23" y="9" width="3" height="6" rx="1"></rect>249 <rect x="4" y="8" width="14" height="8" fill="#9ae67f"></rect>250 </svg>251 </div>252 </div>253 254 <!-- Apps Grid -->255 <div class="apps-grid">256 257 <!-- Row 1 -->258 <div class="app">259 <div class="icon bg-brown">260 <!-- Android head grid -->261 <svg viewBox="0 0 100 100">262 <rect x="18" y="18" width="64" height="64" fill="#b07b4f"/>263 <g stroke="#fff" stroke-width="4">264 <line x1="18" y1="36" x2="82" y2="36"/>265 <line x1="18" y1="54" x2="82" y2="54"/>266 </g>267 <circle cx="38" cy="46" r="6" fill="#fff"/>268 <circle cx="62" cy="46" r="6" fill="#fff"/>269 </svg>270 </div>271 <div class="label">DBW Show...</div>272 </div>273 274 <div class="app">275 <div class="icon bg-blue">276 <svg viewBox="0 0 100 100">277 <polyline points="25,55 45,75 78,32" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 <div class="dot"></div>280 </div>281 <div class="label">Any.do</div>282 </div>283 284 <div class="app">285 <div class="icon bg-white">286 <svg viewBox="0 0 100 100">287 <circle cx="50" cy="35" r="20" fill="#000"/>288 <rect x="30" y="55" width="40" height="20" rx="10" fill="#000"/>289 </svg>290 </div>291 <div class="label" style="color:#fff">Remind Me</div>292 </div>293 294 <div class="app">295 <div class="icon bg-cyan">296 <svg viewBox="0 0 100 100">297 <circle cx="40" cy="40" r="18" fill="#00000022"/>298 <rect x="55" y="30" width="18" height="40" rx="9" fill="#00000044"/>299 </svg>300 </div>301 <div class="label">Reminder</div>302 </div>303 304 <!-- Row 2 -->305 <div class="app">306 <div class="icon bg-blue">307 <svg viewBox="0 0 100 100">308 <rect x="26" y="22" width="16" height="56" rx="8" fill="#fff"/>309 <rect x="50" y="34" width="16" height="44" rx="8" fill="#fff"/>310 </svg>311 </div>312 <div class="label">FormsApp</div>313 </div>314 315 <div class="app">316 <div class="icon bg-white">317 <svg viewBox="0 0 100 100">318 <text x="50" y="58" text-anchor="middle" font-size="36" font-weight="bold" fill="#e53935">e</text>319 <text x="68" y="58" font-size="36" font-weight="bold" fill="#1976d2">b</text>320 <text x="86" y="58" font-size="36" font-weight="bold" fill="#fb8c00">a</text>321 <text x="104" y="58" font-size="36" font-weight="bold" fill="#43a047">y</text>322 </svg>323 </div>324 <div class="label">eBay</div>325 </div>326 327 <div class="app">328 <div class="icon bg-blue">329 <svg viewBox="0 0 100 100">330 <circle cx="34" cy="34" r="20" fill="#ffd54f"/>331 <rect x="48" y="30" width="24" height="24" rx="6" fill="#fff"/>332 <circle cx="60" cy="70" r="14" fill="#fff"/>333 <circle cx="60" cy="70" r="8" fill="#1976d2"/>334 </svg>335 <div class="dot"></div>336 </div>337 <div class="label">BestPrice F...</div>338 </div>339 340 <div class="app">341 <div class="icon bg-pink">342 <svg viewBox="0 0 100 100">343 <path d="M50 78s-28-18-28-36a16 16 0 0 1 28-10 16 16 0 0 1 28 10c0 18-28 36-28 36z" fill="#fff"/>344 </svg>345 </div>346 <div class="label">Winni</div>347 </div>348 349 <!-- Row 3 -->350 <div class="app">351 <div class="icon bg-blue">352 <svg viewBox="0 0 100 100">353 <path d="M72 34c-6 6-14 10-24 10-4 0-8-1-12-3 2 8 8 14 16 16-6 4-14 5-22 3 8 6 18 9 28 9 32 0 40-24 40-40-7 5-16 8-26 8z" fill="#fff"/>354 </svg>355 <div class="dot"></div>356 </div>357 <div class="label">Twitter</div>358 </div>359 360 <div class="app">361 <div class="icon bg-navy">362 <svg viewBox="0 0 100 100">363 <circle cx="50" cy="58" r="22" fill="#180c35"/>364 <circle cx="62" cy="40" r="3" fill="#fff"/>365 <circle cx="40" cy="36" r="2.6" fill="#fff"/>366 <circle cx="72" cy="52" r="2.6" fill="#fff"/>367 </svg>368 </div>369 <div class="label">SkyView Free</div>370 </div>371 372 <div class="app">373 <div class="icon bg-magenta">374 <svg viewBox="0 0 100 100">375 <text x="50" y="64" text-anchor="middle" font-size="48" font-weight="800" fill="#fff">igp</text>376 </svg>377 <div class="dot"></div>378 </div>379 <div class="label">IGP</div>380 </div>381 382 <div class="app">383 <div class="icon bg-royal">384 <svg viewBox="0 0 100 100">385 <circle cx="50" cy="50" r="28" fill="#fff"/>386 <polyline points="38,52 48,62 66,40" fill="none" stroke="#3b54e0" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>387 </svg>388 <div class="dot"></div>389 </div>390 <div class="label">Tasks</div>391 </div>392 393 <!-- Row 4 -->394 <div class="app">395 <div class="icon bg-indigo">396 <svg viewBox="0 0 100 100">397 <polyline points="28,54 44,70 74,36" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>398 </svg>399 <div class="dot"></div>400 </div>401 <div class="label">To Do</div>402 </div>403 404 <div class="app">405 <div class="icon bg-white">406 <svg viewBox="0 0 100 100">407 <rect x="24" y="24" width="52" height="52" rx="10" fill="#f5f5f5" stroke="#d0d0d0" stroke-width="4"/>408 <circle cx="36" cy="38" r="6" fill="#7c49ff"/>409 <rect x="48" y="36" width="22" height="6" rx="3" fill="#7c49ff"/>410 <circle cx="36" cy="56" r="6" fill="#ff6a8e"/>411 <rect x="48" y="54" width="22" height="6" rx="3" fill="#ff6a8e"/>412 </svg>413 </div>414 <div class="label">To-do List</div>415 </div>416 417 <div class="app">418 <div class="icon bg-blue">419 <svg viewBox="0 0 100 100">420 <rect x="28" y="28" width="44" height="44" rx="8" fill="#0c3a76"/>421 <text x="50" y="60" text-anchor="middle" font-size="30" font-weight="700" fill="#fff">FM</text>422 </svg>423 </div>424 <div class="label">Fresh Mode</div>425 </div>426 427 <div class="app">428 <div class="icon bg-orange">429 <svg viewBox="0 0 100 100">430 <circle cx="50" cy="50" r="30" fill="#fff"/>431 <polyline points="36,54 48,66 70,42" fill="none" stroke="#ff9c2f" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>432 </svg>433 </div>434 <div class="label">TickTick</div>435 </div>436 </div>437 438 <!-- Single centered app (Reminders) -->439 <div class="single-row">440 <div class="app">441 <div class="icon bg-purple">442 <svg viewBox="0 0 100 100">443 <polyline points="28,54 44,70 74,36" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>444 </svg>445 <div class="dot"></div>446 </div>447 <div class="label">Reminders</div>448 </div>449 </div>450 451 <!-- Dock icons -->452 <div class="dock">453 <div class="icon">454 <svg viewBox="0 0 100 100">455 <path d="M34 28c-6 0-10 4-10 10 0 26 20 46 46 46 6 0 10-4 10-10v-8c0-3-2-6-6-6-5 0-10-1-14-3-2-1-5 0-7 2l-7 7c-8-6-14-12-18-20l7-7c2-2 3-5 2-7-2-4-3-9-3-14 0-4-3-6-6-6h-4z" fill="#3b63ff"/>456 </svg>457 </div>458 <div class="icon">459 <svg viewBox="0 0 100 100">460 <rect x="18" y="30" width="64" height="40" rx="12" fill="#3b63ff"/>461 <path d="M26 52h30" stroke="#fff" stroke-width="8" stroke-linecap="round"/>462 <circle cx="72" cy="50" r="8" fill="#fff"/>463 </svg>464 </div>465 <div class="icon">466 <svg viewBox="0 0 100 100">467 <circle cx="50" cy="50" r="34" fill="#4CAF50"/>468 <circle cx="50" cy="50" r="22" fill="#fff"/>469 <circle cx="50" cy="50" r="10" fill="#1E88E5"/>470 </svg>471 </div>472 <div class="icon">473 <svg viewBox="0 0 100 100">474 <rect x="22" y="26" width="56" height="48" rx="10" fill="#3b63ff"/>475 <circle cx="50" cy="50" r="12" fill="#fff"/>476 </svg>477 </div>478 </div>479 480 <!-- Search Bar -->481 <div class="search-bar">482 <div class="search-left">483 <span style="color:#4285F4;font-weight:bold">G</span>484 <div class="pill">Search…</div>485 </div>486 <div class="search-right">487 <!-- mic -->488 <svg viewBox="0 0 24 24" width="40" height="40">489 <path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6v3h2v-3a7 7 0 0 0 6-6h-2z" fill="#66BB6A"/>490 </svg>491 <!-- camera -->492 <svg viewBox="0 0 24 24" width="40" height="40">493 <path d="M9 4l2-2h2l2 2h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4z" fill="#FF7043"/>494 <circle cx="12" cy="12" r="4" fill="#fff"/>495 </svg>496 </div>497 </div>498 499 <!-- Home indicator -->500 <div class="home-indicator"></div>501 502</div>503</body>504</html>