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">6<title>Android Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1b1b1b;15 }16 17 /* Wallpaper placeholder */18 .wallpaper {19 position: absolute;20 inset: 0;21 background: #E0E0E0;22 border: 1px solid #BDBDBD;23 color: #757575;24 display: flex;25 align-items: center;26 justify-content: center;27 font-size: 32px;28 letter-spacing: 0.5px;29 }30 31 /* Dim overlay to simulate readability over wallpaper */32 .overlay {33 position: absolute;34 inset: 0;35 background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.20) 70%, rgba(0,0,0,0.35) 100%);36 pointer-events: none;37 }38 39 /* Status bar */40 .status-bar {41 position: absolute;42 top: 24px;43 left: 32px;44 right: 32px;45 height: 60px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 color: #fff;50 z-index: 2;51 }52 .status-left {53 display: flex;54 align-items: center;55 gap: 18px;56 font-weight: 600;57 font-size: 36px;58 letter-spacing: 0.5px;59 }60 .status-extra {61 font-size: 28px;62 font-weight: 500;63 opacity: 0.9;64 }65 .status-right {66 display: flex;67 align-items: center;68 gap: 20px;69 }70 .dot {71 width: 10px;72 height: 10px;73 background: #fff;74 border-radius: 50%;75 opacity: 0.9;76 }77 78 /* Icon grid */79 .grid {80 position: absolute;81 top: 180px;82 left: 0;83 right: 0;84 padding: 0 40px;85 display: grid;86 grid-template-columns: repeat(4, 1fr);87 column-gap: 30px;88 row-gap: 78px;89 z-index: 2;90 }91 .app {92 width: 200px;93 margin: 0 auto;94 text-align: center;95 }96 .icon {97 width: 160px;98 height: 160px;99 border-radius: 50%;100 background: #ffffff;101 box-shadow: 0 6px 16px rgba(0,0,0,0.25);102 display: flex;103 align-items: center;104 justify-content: center;105 position: relative;106 }107 .label {108 margin-top: 18px;109 font-size: 32px;110 color: #ffffff;111 text-shadow: 0 2px 4px rgba(0,0,0,0.6);112 white-space: nowrap;113 overflow: hidden;114 text-overflow: ellipsis;115 }116 .badge {117 position: absolute;118 right: 6px;119 top: 6px;120 width: 28px;121 height: 28px;122 background: #8bd66a;123 border: 3px solid #fff;124 border-radius: 50%;125 }126 127 /* Dock row */128 .dock {129 position: absolute;130 bottom: 330px;131 left: 0;132 right: 0;133 display: grid;134 grid-template-columns: repeat(4, 1fr);135 column-gap: 70px;136 padding: 0 120px;137 z-index: 2;138 }139 140 /* Search bar */141 .search-bar {142 position: absolute;143 left: 60px;144 right: 60px;145 bottom: 190px;146 height: 120px;147 background: #3a3736;148 border-radius: 60px;149 box-shadow: 0 10px 24px rgba(0,0,0,0.45);150 display: flex;151 align-items: center;152 justify-content: space-between;153 padding: 0 40px;154 z-index: 2;155 }156 .search-left, .search-right {157 display: flex;158 align-items: center;159 gap: 26px;160 }161 .search-text {162 color: #bdbdbd;163 font-size: 34px;164 }165 166 /* Navigation pill */167 .nav-pill {168 position: absolute;169 left: 50%;170 transform: translateX(-50%);171 bottom: 100px;172 width: 240px;173 height: 14px;174 background: rgba(255,255,255,0.92);175 border-radius: 10px;176 z-index: 2;177 }178 179 /* Simple color helpers for icons */180 .c-blue { color: #2f6df6; }181 .c-orange { color: #f06b1f; }182 .c-yellow { color: #f5c344; }183 .c-green { color: #41bb67; }184 .c-red { color: #e4483d; }185 .c-white { color: #ffffff; }186 .c-dark { color: #222; }187 .c-sky { color: #4fa3ff; }188 189 /* SVG sizing */190 svg { width: 100px; height: 100px; }191 192</style>193</head>194<body>195<div id="render-target">196 <div class="wallpaper">[IMG: Mountain forest wallpaper]</div>197 <div class="overlay"></div>198 199 <!-- Status bar -->200 <div class="status-bar">201 <div class="status-left">202 <div>1:20</div>203 <div class="status-extra">AI</div>204 <div class="status-extra">33° 33°</div>205 <div class="dot"></div>206 </div>207 <div class="status-right">208 <!-- wifi -->209 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">210 <path d="M2 8c9-7 11-7 20 0"/>211 <path d="M5 11c6-5 8-5 14 0"/>212 <path d="M8 14c3-3 5-3 8 0"/>213 <circle cx="12" cy="18" r="2" fill="#fff" stroke="none"/>214 </svg>215 <!-- battery -->216 <svg viewBox="0 0 28 24" fill="none">217 <rect x="1" y="5" width="22" height="14" rx="3" stroke="#fff" stroke-width="2"></rect>218 <rect x="3" y="7" width="16" height="10" fill="#fff"></rect>219 <rect x="23" y="9" width="3" height="6" fill="#fff"></rect>220 </svg>221 </div>222 </div>223 224 <!-- Icon grid -->225 <div class="grid">226 <!-- Row 1 -->227 <div class="app">228 <div class="icon">229 <svg viewBox="0 0 100 100">230 <ellipse cx="50" cy="26" rx="28" ry="10" stroke="#f5c344" stroke-width="6" fill="none"></ellipse>231 <text x="50" y="68" font-size="44" text-anchor="middle" fill="#ff9e9e" font-family="Arial">me</text>232 </svg>233 </div>234 <div class="label">ThinkRight...</div>235 </div>236 <div class="app">237 <div class="icon">238 <svg viewBox="0 0 100 100">239 <circle cx="72" cy="30" r="16" fill="#f5c344"></circle>240 <path d="M28 64c-1-10 8-18 18-18s16 8 16 18H28z" fill="#ffffff"></path>241 <path d="M20 70h48c0-9-7-16-16-16-10 0-18 7-18 16z" fill="#cfe3ff"></path>242 </svg>243 </div>244 <div class="label">Weather</div>245 </div>246 <div class="app">247 <div class="icon">248 <svg viewBox="0 0 100 100">249 <path d="M20 70 L40 30 L50 70 L70 30" stroke="#353535" stroke-width="10" fill="none" stroke-linecap="round"></path>250 </svg>251 </div>252 <div class="label">Atom</div>253 </div>254 <div class="app">255 <div class="icon">256 <svg viewBox="0 0 100 100">257 <circle cx="50" cy="50" r="26" fill="#f06b1f"></circle>258 <circle cx="50" cy="50" r="18" fill="#ff9350"></circle>259 </svg>260 </div>261 <div class="label">AccuWeather...</div>262 </div>263 264 <!-- Row 2 -->265 <div class="app">266 <div class="icon">267 <svg viewBox="0 0 100 100">268 <circle cx="32" cy="30" r="12" fill="#f5c344"></circle>269 <circle cx="62" cy="50" r="26" stroke="#2f6df6" stroke-width="6" fill="none"></circle>270 </svg>271 </div>272 <div class="label">Weather&R...</div>273 </div>274 <div class="app">275 <div class="icon">276 <svg viewBox="0 0 100 100">277 <ellipse cx="50" cy="66" rx="26" ry="12" fill="#c87f3a"></ellipse>278 <rect x="24" y="68" width="52" height="4" rx="2" fill="#a96a2f"></rect>279 </svg>280 </div>281 <div class="label">Insight Timer</div>282 </div>283 <div class="app">284 <div class="icon">285 <svg viewBox="0 0 100 100">286 <circle cx="50" cy="50" r="28" fill="#3b87b9"></circle>287 <circle cx="50" cy="50" r="20" fill="#fff"></circle>288 <circle cx="50" cy="50" r="8" fill="#3b87b9"></circle>289 <path d="M30 74a30 30 0 0 1 40 0" stroke="#3b87b9" stroke-width="6" fill="none"></path>290 </svg>291 </div>292 <div class="label">YoWindow</div>293 </div>294 <div class="app">295 <div class="icon">296 <svg viewBox="0 0 100 100">297 <circle cx="50" cy="50" r="26" fill="#ffe8a6"></circle>298 <circle cx="50" cy="50" r="22" fill="#ffcf58"></circle>299 </svg>300 </div>301 <div class="label">Weather</div>302 </div>303 304 <!-- Row 3 -->305 <div class="app">306 <div class="icon">307 <svg viewBox="0 0 100 100">308 <circle cx="50" cy="50" r="28" stroke="#4fa3ff" stroke-width="8" fill="none"></circle>309 <path d="M28 50h44" stroke="#4fa3ff" stroke-width="8"></path>310 </svg>311 </div>312 <div class="label">Windy.app</div>313 </div>314 <div class="app">315 <div class="icon">316 <svg viewBox="0 0 100 100">317 <circle cx="50" cy="50" r="48" fill="#c4472f"></circle>318 <path d="M28 66c8-22 16-22 24 0M52 66c8-22 16-22 24 0" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round"></path>319 </svg>320 </div>321 <div class="label">Windy</div>322 </div>323 <div class="app">324 <div class="icon">325 <div class="badge"></div>326 <svg viewBox="0 0 100 100">327 <rect x="20" y="20" width="60" height="60" rx="10" fill="#5aa4ff"></rect>328 <circle cx="40" cy="40" r="10" fill="#fff"></circle>329 <rect x="28" y="60" width="44" height="10" fill="#fff"></rect>330 </svg>331 </div>332 <div class="label">Local Weat...</div>333 </div>334 <div class="app">335 <div class="icon">336 <svg viewBox="0 0 100 100">337 <rect x="18" y="32" width="64" height="36" rx="18" fill="#3f6fa4"></rect>338 <rect x="26" y="40" width="48" height="8" rx="4" fill="#9cc1e6"></rect>339 <rect x="26" y="52" width="30" height="8" rx="4" fill="#9cc1e6"></rect>340 </svg>341 </div>342 <div class="label">Ventusky</div>343 </div>344 345 <!-- Row 4 -->346 <div class="app">347 <div class="icon">348 <svg viewBox="0 0 100 100">349 <circle cx="70" cy="36" r="14" fill="#f5c344"></circle>350 <path d="M26 66c0-10 8-18 18-18s18 8 18 18H26z" fill="#fff"></path>351 <path d="M22 72h48c0-9-7-16-16-16-10 0-18 7-18 16z" fill="#a9d4ff"></path>352 </svg>353 </div>354 <div class="label">Weather XL</div>355 </div>356 <div class="app">357 <div class="icon">358 <div class="badge"></div>359 <svg viewBox="0 0 100 100">360 <path d="M30 70c18-40 22-40 40 0" stroke="#ff8a65" stroke-width="10" fill="none" stroke-linecap="round"></path>361 </svg>362 </div>363 <div class="label">Today Wea...</div>364 </div>365 <div class="app">366 <div class="icon" style="background:#2b2b2b;">367 <svg viewBox="0 0 100 100">368 <text x="40" y="58" font-size="44" fill="#ff9933" font-weight="700">wu</text>369 <circle cx="72" cy="36" r="6" fill="#3faef7"></circle>370 </svg>371 </div>372 <div class="label">Wundergro...</div>373 </div>374 <div class="app">375 <div class="icon">376 <svg viewBox="0 0 100 100">377 <circle cx="50" cy="50" r="30" fill="#fff2c6"></circle>378 <path d="M50 20 L58 44 L84 50 L58 56 L50 80 L42 56 L16 50 L42 44Z" fill="#f5c344"></path>379 </svg>380 </div>381 <div class="label">Weather M...</div>382 </div>383 384 <!-- Row 5 -->385 <div class="app">386 <div class="icon">387 <svg viewBox="0 0 100 100">388 <circle cx="50" cy="50" r="30" fill="#ffe08a"></circle>389 <text x="50" y="62" font-size="44" text-anchor="middle" fill="#c08a2b">W</text>390 </svg>391 </div>392 <div class="label">What a We...</div>393 </div>394 <div class="app">395 <div class="icon">396 <svg viewBox="0 0 100 100">397 <circle cx="50" cy="50" r="28" stroke="#3f77b7" stroke-width="10" fill="none"></circle>398 <circle cx="50" cy="50" r="12" fill="#3f77b7"></circle>399 </svg>400 </div>401 <div class="label">Mausam</div>402 </div>403 <div class="app">404 <div class="icon">405 <svg viewBox="0 0 100 100">406 <circle cx="70" cy="34" r="12" fill="#7fb9ff"></circle>407 <path d="M22 66h40c0-10-8-18-18-18s-22 8-22 18z" fill="#ffffff"></path>408 <path d="M22 70h42" stroke="#7fb9ff" stroke-width="6"></path>409 </svg>410 </div>411 <div class="label">Weather</div>412 </div>413 <div class="app">414 <div class="icon">415 <div class="badge"></div>416 <svg viewBox="0 0 100 100">417 <rect x="14" y="18" width="72" height="64" rx="18" fill="#203a5a"></rect>418 <circle cx="34" cy="42" r="14" fill="#fff"></circle>419 <rect x="30" y="62" width="40" height="10" fill="#7fb9ff"></rect>420 </svg>421 </div>422 <div class="label">Daily Weat...</div>423 </div>424 </div>425 426 <!-- Dock icons -->427 <div class="dock">428 <div class="app">429 <div class="icon">430 <svg viewBox="0 0 100 100">431 <path d="M30 30c10-10 30-10 40 0M36 36l28 28" stroke="#2f6df6" stroke-width="10" stroke-linecap="round" fill="none"></path>432 </svg>433 </div>434 </div>435 <div class="app">436 <div class="icon">437 <svg viewBox="0 0 100 100">438 <rect x="18" y="28" width="64" height="44" rx="22" fill="#2f6df6"></rect>439 <rect x="28" y="44" width="44" height="12" rx="6" fill="#ffffff"></rect>440 </svg>441 </div>442 </div>443 <div class="app">444 <div class="icon">445 <svg viewBox="0 0 100 100">446 <circle cx="50" cy="50" r="40" fill="#f4e04d"></circle>447 <path d="M50 10A40 40 0 0 1 90 50H50Z" fill="#e4483d"></path>448 <path d="M50 10A40 40 0 0 0 10 50H50Z" fill="#41bb67"></path>449 <circle cx="50" cy="50" r="16" fill="#2f6df6"></circle>450 </svg>451 </div>452 </div>453 <div class="app">454 <div class="icon">455 <svg viewBox="0 0 100 100">456 <rect x="20" y="28" width="60" height="44" rx="10" fill="#2b3a64"></rect>457 <circle cx="50" cy="50" r="16" fill="#69a9ff"></circle>458 <rect x="26" y="34" width="12" height="8" rx="2" fill="#ffffff"></rect>459 </svg>460 </div>461 </div>462 </div>463 464 <!-- Search bar -->465 <div class="search-bar">466 <div class="search-left">467 <div class="icon" style="width:72px;height:72px;border-radius:36px;background:#ffffff; box-shadow:none;">468 <svg viewBox="0 0 100 100">469 <text x="50" y="62" font-size="60" text-anchor="middle" fill="#4285F4">G</text>470 </svg>471 </div>472 <div class="search-text">Search</div>473 </div>474 <div class="search-right">475 <!-- mic -->476 <div class="icon" style="width:72px;height:72px;border-radius:36px;background:#ffffff; box-shadow:none;">477 <svg viewBox="0 0 100 100">478 <rect x="40" y="28" width="20" height="30" rx="10" fill="#e4483d"></rect>479 <path d="M36 54c0 10 28 10 28 0M50 64v10" stroke="#4285F4" stroke-width="6" fill="none" stroke-linecap="round"></path>480 </svg>481 </div>482 <!-- lens -->483 <div class="icon" style="width:72px;height:72px;border-radius:36px;background:#ffffff; box-shadow:none;">484 <svg viewBox="0 0 100 100">485 <rect x="22" y="22" width="56" height="56" rx="12" fill="#2f6df6"></rect>486 <circle cx="50" cy="50" r="16" fill="#41bb67"></circle>487 <rect x="30" y="30" width="40" height="10" fill="#e4483d"></rect>488 </svg>489 </div>490 </div>491 </div>492 493 <!-- Navigation pill -->494 <div class="nav-pill"></div>495</div>496</body>497</html>