GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>App Grid UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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:#0e1116;19 color:#fff;20 }21 22 /* Status bar */23 .status-bar{24 position:absolute;25 top:0;26 left:0;27 width:100%;28 height:110px;29 padding:0 40px;30 display:flex;31 align-items:center;32 justify-content:space-between;33 box-sizing:border-box;34 color:#dfe6ee;35 font-size:40px;36 letter-spacing:0.5px;37 }38 .status-right{39 display:flex;40 align-items:center;41 gap:26px;42 }43 .icon-status{44 display:inline-block;45 width:48px;46 height:48px;47 }48 49 /* Main content */50 .content{51 position:absolute;52 top:140px;53 left:0;54 width:100%;55 box-sizing:border-box;56 padding:0 46px;57 }58 .app-grid{59 display:grid;60 grid-template-columns: repeat(4, 1fr);61 gap:54px 44px;62 }63 .app-item{64 text-align:center;65 }66 .app-icon{67 width:160px;68 height:160px;69 border-radius:50%;70 margin:0 auto 20px auto;71 display:flex;72 align-items:center;73 justify-content:center;74 box-shadow: 0 8px 18px rgba(0,0,0,0.5);75 }76 .app-label{77 font-size:34px;78 color:#e7ecf2;79 line-height:1.2;80 letter-spacing:0.2px;81 }82 83 /* Dock row */84 .dock{85 position:absolute;86 bottom:240px;87 left:0;88 width:100%;89 display:flex;90 justify-content:center;91 gap:110px;92 }93 .dock .dock-icon{94 width:160px;95 height:160px;96 border-radius:50%;97 background:#f5f7fb;98 display:flex;99 align-items:center;100 justify-content:center;101 box-shadow:0 10px 20px rgba(0,0,0,0.45);102 }103 104 /* Google search pill */105 .search-pill{106 position:absolute;107 bottom:120px;108 left:50%;109 transform:translateX(-50%);110 width:920px;111 height:120px;112 background:#2b2f36;113 border-radius:60px;114 display:flex;115 align-items:center;116 justify-content:space-between;117 padding:0 36px;118 box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.5);119 }120 .search-left{121 display:flex;122 align-items:center;123 gap:20px;124 color:#cbd1d8;125 font-size:40px;126 }127 .google-g{128 width:70px;129 height:70px;130 border-radius:50%;131 background:#ffffff;132 display:flex;133 align-items:center;134 justify-content:center;135 font-weight:700;136 color:#4285F4;137 }138 .search-right{139 display:flex;140 align-items:center;141 gap:28px;142 }143 .pill-icon{144 width:64px;145 height:64px;146 }147 148 /* Bottom navigation bar */149 .nav-bar{150 position:absolute;151 bottom:40px;152 left:50%;153 transform:translateX(-50%);154 width:220px;155 height:12px;156 background:#eaeaea;157 border-radius:6px;158 opacity:0.8;159 }160 161 /* Helper color circles for app icons */162 .c-teal{ background:#48c3c6; }163 .c-orange{ background:#ff9e3e; }164 .c-red{ background:#d84a4a; }165 .c-yellow{ background:#f4cf4c; }166 .c-mint{ background:#38d1b9; }167 .c-green{ background:#7cd241; }168 .c-blue{ background:#1e4aa8; }169 .c-pink{ background:#f08086; }170 .c-kayak{ background:#ff7f34; }171 .c-expedia{ background:#ffd24b; }172 .c-white{ background:#ffffff; }173 .c-redfin{ background:#b73737; }174 .c-rentberry{ background:#ffffff; }175 .c-trovit{ background:#4e86ff; }176 .c-trainline{ background:#4bb6a3; }177 .c-citymapper{ background:#58b548; }178 .c-omio{ background:#192e68; }179 .c-sbb{ background:#d95147; }180 181 .label-small{182 font-size:32px;183 }184 185 /* Simple SVGs default size */186 svg{ display:block; }187 188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status Bar -->194 <div class="status-bar">195 <div>10:35</div>196 <div class="status-right">197 <!-- Signal -->198 <svg class="icon-status" viewBox="0 0 24 24">199 <rect x="2" y="16" width="3" height="6" fill="#cfd8dc"></rect>200 <rect x="7" y="12" width="3" height="10" fill="#cfd8dc"></rect>201 <rect x="12" y="8" width="3" height="14" fill="#cfd8dc"></rect>202 <rect x="17" y="4" width="3" height="18" fill="#cfd8dc"></rect>203 </svg>204 <!-- Wifi -->205 <svg class="icon-status" viewBox="0 0 24 24">206 <path d="M2 8c5-4 15-4 20 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>207 <path d="M5 12c3-3 11-3 14 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>208 <path d="M9 16c2-2 4-2 6 0" stroke="#cfd8dc" stroke-width="2" fill="none"/>209 <circle cx="12" cy="19" r="2" fill="#cfd8dc"></circle>210 </svg>211 <!-- Battery -->212 <svg class="icon-status" viewBox="0 0 28 24">213 <rect x="1" y="5" width="22" height="14" rx="2" ry="2" stroke="#cfd8dc" stroke-width="2" fill="none"></rect>214 <rect x="3" y="7" width="16" height="10" fill="#cfd8dc"></rect>215 <rect x="24" y="9" width="3" height="6" fill="#cfd8dc"></rect>216 </svg>217 </div>218 </div>219 220 <!-- Content Grid -->221 <div class="content">222 <div class="app-grid">223 224 <!-- Row 1 -->225 <div class="app-item">226 <div class="app-icon c-teal">227 <!-- Reminder icon: person shape -->228 <svg width="90" height="90" viewBox="0 0 24 24">229 <circle cx="12" cy="6" r="3" fill="#093b4a"></circle>230 <rect x="6" y="10" width="12" height="4" rx="2" fill="#093b4a"></rect>231 <rect x="10" y="14" width="4" height="8" rx="2" fill="#093b4a"></rect>232 </svg>233 </div>234 <div class="app-label">Reminder</div>235 </div>236 237 <div class="app-item">238 <div class="app-icon c-orange">239 <!-- All Recipes: fork & spoon -->240 <svg width="90" height="90" viewBox="0 0 24 24">241 <rect x="7" y="4" width="2" height="16" fill="#fff"></rect>242 <circle cx="16" cy="8" r="3" fill="#fff"></circle>243 <rect x="15" y="11" width="2" height="9" fill="#fff"></rect>244 </svg>245 </div>246 <div class="app-label">All Recipes …</div>247 </div>248 249 <div class="app-item">250 <div class="app-icon c-red">251 <!-- OpenTable: white dot and ring -->252 <svg width="90" height="90" viewBox="0 0 24 24">253 <circle cx="8" cy="12" r="2.4" fill="#fff"></circle>254 <circle cx="16" cy="12" r="5.5" stroke="#fff" stroke-width="2.2" fill="none"></circle>255 </svg>256 </div>257 <div class="app-label">OpenTable</div>258 </div>259 260 <div class="app-item">261 <div class="app-icon c-yellow">262 <!-- Kitchen Stories: wavy lines -->263 <svg width="100" height="100" viewBox="0 0 24 24">264 <path d="M4 8c2 2 4 2 6 0s4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>265 <path d="M4 12c2 2 4 2 6 0s4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>266 <path d="M4 16c2 2 4 2 6 0s4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>267 </svg>268 </div>269 <div class="app-label">Kitchen Sto…</div>270 </div>271 272 <!-- Row 2 -->273 <div class="app-item">274 <div class="app-icon c-mint">275 <!-- Deliveroo: simple kangaroo mark -->276 <svg width="90" height="90" viewBox="0 0 24 24">277 <rect x="7" y="5" width="8" height="8" rx="2" fill="#fff"></rect>278 <rect x="5" y="14" width="12" height="4" rx="2" fill="#fff"></rect>279 </svg>280 </div>281 <div class="app-label">Deliveroo</div>282 </div>283 284 <div class="app-item">285 <div class="app-icon c-green">286 <!-- Duolingo: owl eyes -->287 <svg width="90" height="90" viewBox="0 0 24 24">288 <circle cx="8" cy="12" r="4" fill="#fff"></circle>289 <circle cx="16" cy="12" r="4" fill="#fff"></circle>290 <circle cx="8" cy="12" r="1.8" fill="#2f5a10"></circle>291 <circle cx="16" cy="12" r="1.8" fill="#2f5a10"></circle>292 </svg>293 </div>294 <div class="app-label">Duolingo</div>295 </div>296 297 <div class="app-item">298 <div class="app-icon c-blue">299 <!-- Booking.com -->300 <svg width="90" height="90" viewBox="0 0 24 24">301 <text x="6" y="17" font-size="14" fill="#fff" font-weight="700">B</text>302 </svg>303 </div>304 <div class="app-label">Booking.com</div>305 </div>306 307 <div class="app-item">308 <div class="app-icon c-pink">309 <!-- Airbnb loop -->310 <svg width="96" height="96" viewBox="0 0 24 24">311 <path d="M12 5c-3 6-6 9-6 11a6 6 0 0 0 12 0c0-2-3-5-6-11z" stroke="#fff" stroke-width="2.2" fill="none"/>312 </svg>313 </div>314 <div class="app-label">Airbnb</div>315 </div>316 317 <!-- Row 3 -->318 <div class="app-item">319 <div class="app-icon c-kayak">320 <svg width="90" height="90" viewBox="0 0 24 24">321 <text x="5" y="17" font-size="14" fill="#fff" font-weight="700">K</text>322 </svg>323 </div>324 <div class="app-label">KAYAK</div>325 </div>326 327 <div class="app-item">328 <div class="app-icon c-expedia">329 <!-- Arrow -->330 <svg width="100" height="100" viewBox="0 0 24 24">331 <path d="M4 16l9-6 0 5 7-5" stroke="#1b1b1b" stroke-width="2.2" fill="none"/>332 <circle cx="12" cy="12" r="10" stroke="#1b1b1b" stroke-width="1.2" fill="none"/>333 </svg>334 </div>335 <div class="app-label">Expedia</div>336 </div>337 338 <div class="app-item">339 <div class="app-icon c-white">340 <!-- H&M -->341 <svg width="90" height="90" viewBox="0 0 24 24">342 <text x="4" y="16" font-size="12" fill="#c62828" font-weight="700">H&M</text>343 </svg>344 </div>345 <div class="app-label">H&M</div>346 </div>347 348 <div class="app-item">349 <div class="app-icon c-redfin">350 <svg width="90" height="90" viewBox="0 0 24 24">351 <text x="3" y="16" font-size="12" fill="#fff" font-weight="700">REDFIN</text>352 </svg>353 </div>354 <div class="app-label">Redfin</div>355 </div>356 357 <!-- Row 4 -->358 <div class="app-item">359 <div class="app-icon c-rentberry">360 <!-- Rentberry house -->361 <svg width="90" height="90" viewBox="0 0 24 24">362 <path d="M4 12l8-6 8 6v8H4z" fill="#4a8ff0"></path>363 <rect x="10" y="14" width="4" height="6" fill="#f3d04d"></rect>364 </svg>365 </div>366 <div class="app-label">Rentberry</div>367 </div>368 369 <div class="app-item">370 <div class="app-icon c-trovit">371 <!-- Home outline -->372 <svg width="90" height="90" viewBox="0 0 24 24">373 <path d="M4 12l8-6 8 6v8H4z" stroke="#fff" stroke-width="2" fill="none"></path>374 <rect x="10" y="14" width="4" height="4" fill="#fff"></rect>375 <circle cx="18" cy="8" r="3" fill="#d7a7ff"></circle>376 </svg>377 </div>378 <div class="app-label">Trovit Homes</div>379 </div>380 381 <div class="app-item">382 <div class="app-icon c-trainline">383 <!-- 'train' word -->384 <svg width="100" height="100" viewBox="0 0 24 24">385 <text x="4" y="14" font-size="9" fill="#fff" font-weight="700">train</text>386 </svg>387 </div>388 <div class="app-label">Trainline</div>389 </div>390 391 <div class="app-item">392 <div class="app-icon c-citymapper">393 <!-- two dots and arrow -->394 <svg width="96" height="96" viewBox="0 0 24 24">395 <circle cx="6" cy="12" r="2.2" fill="#fff"></circle>396 <circle cx="12" cy="12" r="2.2" fill="#fff"></circle>397 <path d="M15 12h6l-3-3m3 3l-3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>398 </svg>399 </div>400 <div class="app-label">Citymapper</div>401 </div>402 403 <!-- Row 5 -->404 <div class="app-item">405 <div class="app-icon c-omio">406 <!-- Omio mark -->407 <svg width="96" height="96" viewBox="0 0 24 24">408 <circle cx="6" cy="8" r="2.4" fill="#ff6d6d"></circle>409 <path d="M8 16c6 0 6 4 10 4" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>410 <path d="M10 16a6 6 0 0 1 4-4" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>411 </svg>412 </div>413 <div class="app-label label-small">Omio</div>414 </div>415 416 <div class="app-item">417 <div class="app-icon c-sbb">418 <!-- SBB double arrow -->419 <svg width="96" height="96" viewBox="0 0 24 24">420 <path d="M3 12h8l-3-3m3 3l-3 3" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/>421 <path d="M13 12h8l-3-3m3 3l-3 3" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/>422 </svg>423 </div>424 <div class="app-label label-small">SBB Mobile</div>425 </div>426 427 <!-- Empty placeholders to keep grid spacing similar to screenshot -->428 <div></div>429 <div></div>430 431 </div>432 </div>433 434 <!-- Dock Icons -->435 <div class="dock">436 <!-- Phone -->437 <div class="dock-icon">438 <svg width="84" height="84" viewBox="0 0 24 24">439 <path d="M5 4c4 4 4 8 0 12 3 3 7 3 10 0l2 2c-4 4-11 4-15 0 0 0 0-1 0-1 4-4 4-8 0-12l3-1z" fill="#2a7ef0"></path>440 </svg>441 </div>442 <!-- Messages -->443 <div class="dock-icon">444 <svg width="84" height="84" viewBox="0 0 24 24">445 <rect x="3" y="4" width="18" height="14" rx="3" fill="#4e86ff"></rect>446 <polygon points="9,18 11,14 15,14" fill="#4e86ff"></polygon>447 </svg>448 </div>449 <!-- Chrome -->450 <div class="dock-icon">451 <svg width="84" height="84" viewBox="0 0 24 24">452 <circle cx="12" cy="12" r="10" fill="#f4c20d"></circle>453 <path d="M12 2a10 10 0 0 1 8 5H12" fill="#db4437"></path>454 <path d="M20 7a10 10 0 0 1-3 11l-5-8" fill="#0f9d58"></path>455 <circle cx="12" cy="12" r="4.5" fill="#4285f4"></circle>456 </svg>457 </div>458 <!-- Camera -->459 <div class="dock-icon">460 <svg width="84" height="84" viewBox="0 0 24 24">461 <rect x="3" y="6" width="18" height="12" rx="2" fill="#4a4a4a"></rect>462 <rect x="8" y="4" width="8" height="3" rx="1" fill="#4a4a4a"></rect>463 <circle cx="12" cy="12" r="4" fill="#90caf9"></circle>464 </svg>465 </div>466 </div>467 468 <!-- Google Search Pill -->469 <div class="search-pill">470 <div class="search-left">471 <div class="google-g">G</div>472 <div>Search</div>473 </div>474 <div class="search-right">475 <!-- Microphone -->476 <svg class="pill-icon" viewBox="0 0 24 24">477 <rect x="9" y="4" width="6" height="10" rx="3" fill="#8ab4f8"></rect>478 <path d="M6 10a6 6 0 0 0 12 0" stroke="#cbd1d8" stroke-width="2" fill="none"/>479 <rect x="11" y="16" width="2" height="4" fill="#cbd1d8"></rect>480 <rect x="9" y="20" width="6" height="2" rx="1" fill="#cbd1d8"></rect>481 </svg>482 <!-- Google Lens style square -->483 <svg class="pill-icon" viewBox="0 0 24 24">484 <rect x="4" y="4" width="16" height="16" rx="4" fill="#a3e0a3"></rect>485 <circle cx="12" cy="12" r="4" fill="#2b2f36"></circle>486 </svg>487 </div>488 </div>489 490 <!-- Bottom navigation bar -->491 <div class="nav-bar"></div>492 493</div>494</body>495</html>