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.0" />6<title>Mobile UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 .status-bar {24 height: 90px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #222;30 font-weight: 600;31 font-size: 36px;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .status-right {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .sb-icon {44 width: 36px;45 height: 36px;46 }47 48 .location-row {49 padding: 24px 36px 20px;50 display: flex;51 align-items: center;52 justify-content: space-between;53 }54 .loc-left {55 display: flex;56 align-items: center;57 gap: 18px;58 }59 .loc-texts {60 display: flex;61 flex-direction: column;62 line-height: 1.2;63 }64 .loc-title {65 font-size: 40px;66 font-weight: 700;67 color: #1d1d1d;68 }69 .loc-sub {70 font-size: 30px;71 color: #6b6b6b;72 }73 .loc-actions {74 display: flex;75 align-items: center;76 gap: 32px;77 }78 .icon-btn {79 width: 64px;80 height: 64px;81 }82 83 .divider {84 height: 2px;85 background: #e7e7e7;86 margin: 0 36px 24px;87 border-radius: 1px;88 }89 90 .search-wrap {91 margin: 0 36px;92 height: 110px;93 border: 1px solid #dadada;94 border-radius: 55px;95 background: #f6f7f3;96 display: flex;97 align-items: center;98 padding: 0 28px;99 gap: 24px;100 }101 .search-input {102 flex: 1;103 font-size: 34px;104 color: #6c6c6c;105 }106 .search-mic {107 width: 84px;108 height: 84px;109 border-left: 1px solid #e1e1e1;110 display: flex;111 align-items: center;112 justify-content: center;113 margin-left: 12px;114 }115 116 .categories {117 padding: 26px 24px 8px;118 }119 .cat-grid {120 display: flex;121 flex-wrap: wrap;122 gap: 22px;123 }124 .cat-card {125 width: 196px;126 display: flex;127 flex-direction: column;128 align-items: center;129 }130 .cat-img {131 width: 196px;132 height: 196px;133 background: #E0E0E0;134 border: 1px solid #BDBDBD;135 border-radius: 36px;136 display: flex;137 justify-content: center;138 align-items: center;139 color: #757575;140 font-size: 28px;141 text-align: center;142 padding: 8px;143 }144 .cat-label {145 margin-top: 16px;146 font-size: 30px;147 color: #3a3a3a;148 text-align: center;149 }150 151 .banner-row {152 padding: 30px 36px 12px;153 display: flex;154 gap: 24px;155 }156 .banner {157 flex: 1;158 height: 520px;159 background: #E0E0E0;160 border: 1px solid #BDBDBD;161 color: #757575;162 border-radius: 36px;163 display: flex;164 align-items: center;165 justify-content: center;166 font-size: 34px;167 }168 .pager {169 display: flex;170 align-items: center;171 gap: 10px;172 padding: 16px 36px;173 }174 .pager-pill {175 background: #3a3a3a;176 color: #fff;177 border-radius: 24px;178 padding: 10px 16px;179 font-size: 26px;180 }181 .pager-dot {182 width: 14px;183 height: 14px;184 border-radius: 50%;185 background: #cfcfcf;186 }187 .pager-dot.active {188 background: #7b8b56;189 }190 191 .section-title {192 font-size: 40px;193 font-weight: 700;194 padding: 10px 36px 24px;195 color: #222;196 }197 198 .bottom-nav {199 position: absolute;200 left: 0;201 right: 0;202 bottom: 110px;203 height: 200px;204 border-top: 1px solid #e7e7e7;205 background: #ffffff;206 display: flex;207 align-items: center;208 justify-content: space-around;209 padding: 0 24px;210 }211 .nav-item {212 width: 160px;213 display: flex;214 flex-direction: column;215 align-items: center;216 gap: 16px;217 color: #7b8b56;218 font-size: 28px;219 }220 .nav-item .label {221 color: #7b8b56;222 font-weight: 600;223 }224 .nav-item.inactive .label {225 color: #8a8a8a;226 font-weight: 500;227 }228 .nav-icon {229 width: 64px;230 height: 64px;231 }232 233 .brand-badge {234 position: absolute;235 left: 36px;236 bottom: 206px;237 display: flex;238 align-items: center;239 gap: 12px;240 color: #7b8b56;241 font-weight: 700;242 font-size: 34px;243 }244 .brand-icon {245 width: 44px;246 height: 44px;247 }248 249 .gesture-bar {250 position: absolute;251 left: 0;252 right: 0;253 bottom: 26px;254 height: 58px;255 display: flex;256 align-items: center;257 justify-content: center;258 }259 .gesture-pill {260 width: 240px;261 height: 12px;262 background: #000000;263 border-radius: 10px;264 opacity: 0.9;265 }266</style>267</head>268<body>269<div id="render-target">270 271 <!-- Status Bar -->272 <div class="status-bar">273 <div class="status-left">274 <div>12:18</div>275 <!-- simple small app icons placeholders -->276 <svg class="sb-icon" viewBox="0 0 24 24">277 <rect x="2" y="4" width="20" height="16" rx="3" fill="#c7c7c7"></rect>278 </svg>279 <svg class="sb-icon" viewBox="0 0 24 24">280 <circle cx="12" cy="12" r="10" fill="#c7c7c7"></circle>281 </svg>282 <svg class="sb-icon" viewBox="0 0 24 24">283 <rect x="6" y="3" width="12" height="18" rx="2" fill="#c7c7c7"></rect>284 </svg>285 <svg class="sb-icon" viewBox="0 0 24 24">286 <rect x="3" y="3" width="18" height="18" rx="2" fill="#c7c7c7"></rect>287 </svg>288 <span style="font-size:28px;color:#777;">•</span>289 </div>290 <div class="status-right">291 <!-- silent bell -->292 <svg class="sb-icon" viewBox="0 0 24 24">293 <path d="M12 3c-3 0-5 2-5 5v3l-2 2v2h14v-2l-2-2V8c0-3-2-5-5-5z" fill="#c7c7c7"></path>294 <rect x="3" y="3" width="18" height="18" fill="none" stroke="#c7c7c7" stroke-width="0"></rect>295 <path d="M4 4l16 16" stroke="#9a9a9a" stroke-width="2"></path>296 </svg>297 <!-- wifi -->298 <svg class="sb-icon" viewBox="0 0 24 24">299 <path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z" stroke="#c7c7c7" stroke-width="2" fill="none" stroke-linecap="round"></path>300 </svg>301 <!-- battery -->302 <svg class="sb-icon" viewBox="0 0 24 24">303 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#c7c7c7" fill="none"></rect>304 <rect x="4" y="8" width="12" height="8" rx="1" fill="#c7c7c7"></rect>305 <rect x="20" y="10" width="2" height="6" rx="1" fill="#c7c7c7"></rect>306 </svg>307 </div>308 </div>309 310 <!-- Location Row -->311 <div class="location-row">312 <div class="loc-left">313 <!-- location pin -->314 <svg class="icon-btn" viewBox="0 0 24 24">315 <path d="M12 2c-3.3 0-6 2.7-6 6 0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#7b8b56"></path>316 </svg>317 <div class="loc-texts">318 <div class="loc-title">Kishanganj</div>319 <div class="loc-sub">855101 ></div>320 </div>321 </div>322 <div class="loc-actions">323 <!-- heart outline -->324 <svg class="icon-btn" viewBox="0 0 24 24">325 <path d="M12 20s-7-4.5-9-8.5C1.5 8 3.5 5.5 6.5 5.5c2 0 3.3 1.2 3.5 1.5.2-.3 1.5-1.5 3.5-1.5 3 0 5 2.5 4.5 6C19 15.5 12 20 12 20z" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>326 </svg>327 <!-- cart -->328 <svg class="icon-btn" viewBox="0 0 24 24">329 <circle cx="9" cy="20" r="2" fill="#1f1f1f"></circle>330 <circle cx="17" cy="20" r="2" fill="#1f1f1f"></circle>331 <path d="M3 5h2l2 10h10l2-7H7" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>332 </svg>333 </div>334 </div>335 336 <div class="divider"></div>337 338 <!-- Search -->339 <div class="search-wrap">340 <!-- search icon -->341 <svg class="sb-icon" viewBox="0 0 24 24">342 <circle cx="11" cy="11" r="7" stroke="#7b8b56" stroke-width="2" fill="none"></circle>343 <path d="M16 16l5 5" stroke="#7b8b56" stroke-width="2" stroke-linecap="round"></path>344 </svg>345 <div class="search-input">Christma</div>346 <div class="search-mic">347 <!-- mic icon -->348 <svg class="sb-icon" viewBox="0 0 24 24">349 <rect x="9" y="4" width="6" height="10" rx="3" fill="#7b8b56"></rect>350 <path d="M5 11c0 4 3 7 7 7s7-3 7-7M12 18v3" stroke="#7b8b56" stroke-width="2" fill="none" stroke-linecap="round"></path>351 </svg>352 </div>353 </div>354 355 <!-- Categories -->356 <div class="categories">357 <div class="cat-grid">358 <div class="cat-card">359 <div class="cat-img">[IMG: New Year Card]</div>360 <div class="cat-label">New Year Gifts</div>361 </div>362 <div class="cat-card">363 <div class="cat-img">[IMG: Christmas Tree]</div>364 <div class="cat-label">Christmas Gifts</div>365 </div>366 <div class="cat-card">367 <div class="cat-img">[IMG: Red Roses Bouquet]</div>368 <div class="cat-label">Anniversary</div>369 </div>370 <div class="cat-card">371 <div class="cat-img">[IMG: Personalized Mug & Flowers]</div>372 <div class="cat-label">Birthday</div>373 </div>374 <div class="cat-card">375 <div class="cat-img">[IMG: Airplane Icon]</div>376 <div class="cat-label">International</div>377 </div>378 379 <div class="cat-card">380 <div class="cat-img">[IMG: Flower Bouquet]</div>381 <div class="cat-label">Flowers</div>382 </div>383 <div class="cat-card">384 <div class="cat-img">[IMG: Chocolate Cake]</div>385 <div class="cat-label">Cakes</div>386 </div>387 <div class="cat-card">388 <div class="cat-img">[IMG: Mixed Gift Combos]</div>389 <div class="cat-label">Combos</div>390 </div>391 <div class="cat-card">392 <div class="cat-img">[IMG: Gift Collection]</div>393 <div class="cat-label">Gifts</div>394 </div>395 </div>396 </div>397 398 <!-- Promo Banner Carousel -->399 <div class="banner-row">400 <div class="banner">[IMG: Festive 2024 Gift Banner]</div>401 <div class="banner" style="width:320px">[IMG: Holiday Delivery Promo]</div>402 </div>403 <div class="pager">404 <div class="pager-pill">1/5</div>405 <div class="pager-dot active"></div>406 <div class="pager-dot"></div>407 <div class="pager-dot"></div>408 <div class="pager-dot"></div>409 </div>410 411 <div class="section-title">Tailored For Your Occassions</div>412 413 <!-- Bottom nav and brand -->414 <div class="brand-badge">415 <!-- gift bag icon -->416 <svg class="brand-icon" viewBox="0 0 24 24">417 <path d="M6 7h12l-1 13H7L6 7z" fill="#7b8b56"></path>418 <path d="M8 7c0-2 2-4 4-4s4 2 4 4" stroke="#7b8b56" stroke-width="2" fill="none" stroke-linecap="round"></path>419 </svg>420 <span>fnp</span>421 </div>422 423 <div class="bottom-nav">424 <div class="nav-item">425 <!-- cake icon -->426 <svg class="nav-icon" viewBox="0 0 24 24">427 <path d="M4 14h16v6H4z" fill="#7b8b56"></path>428 <path d="M6 12c2-1 4-1 6-1s4 0 6 1V9c-2-1-4-1-6-1s-4 0-6 1v3z" fill="#a9b586"></path>429 <circle cx="12" cy="6" r="2" fill="#7b8b56"></circle>430 </svg>431 <div class="label">Home</div>432 </div>433 434 <div class="nav-item inactive">435 <!-- truck icon -->436 <svg class="nav-icon" viewBox="0 0 24 24">437 <path d="M2 6h12v8H2zM14 10h4l4 4v4h-8z" fill="#cfcfcf"></path>438 <circle cx="6" cy="18" r="2" fill="#8a8a8a"></circle>439 <circle cx="18" cy="18" r="2" fill="#8a8a8a"></circle>440 </svg>441 <div class="label">Same Day</div>442 </div>443 444 <div class="nav-item inactive">445 <!-- gift box icon -->446 <svg class="nav-icon" viewBox="0 0 24 24">447 <rect x="3" y="8" width="18" height="12" rx="2" fill="#cfcfcf"></rect>448 <path d="M12 8v12" stroke="#8a8a8a" stroke-width="2"></path>449 <path d="M3 12h18" stroke="#8a8a8a" stroke-width="2"></path>450 <path d="M7 8c0-2 2-4 5-4s5 2 5 4H7z" fill="#cfcfcf"></path>451 </svg>452 <div class="label">All Gifts</div>453 </div>454 455 <div class="nav-item inactive">456 <!-- airplane icon -->457 <svg class="nav-icon" viewBox="0 0 24 24">458 <path d="M2 12l20-6-6 20-3-8-8-3z" fill="#cfcfcf"></path>459 </svg>460 <div class="label">Abroad</div>461 </div>462 463 <div class="nav-item inactive">464 <!-- user icon -->465 <svg class="nav-icon" viewBox="0 0 24 24">466 <circle cx="12" cy="8" r="4" fill="#cfcfcf"></circle>467 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#8a8a8a" stroke-width="2"></path>468 </svg>469 <div class="label">Account</div>470 </div>471 </div>472 473 <!-- Gesture bar -->474 <div class="gesture-bar">475 <div class="gesture-pill"></div>476 </div>477 478</div>479</body>480</html>