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 Filter UI 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: #ffffff;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 30px;26 color: #000;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 18px;32 }33 .icon {34 width: 36px;35 height: 36px;36 display: inline-flex;37 align-items: center;38 justify-content: center;39 }40 41 /* Header with search */42 .header {43 height: 110px;44 padding: 0 24px;45 display: flex;46 align-items: center;47 gap: 18px;48 }49 .left-icons {50 display: flex;51 align-items: center;52 gap: 18px;53 }54 .notif-dot {55 width: 14px; height: 14px; background: #ff2b2b; border-radius: 50%;56 position: absolute; top: 118px; left: 170px;57 }58 .search-wrap {59 flex: 1;60 position: relative;61 height: 80px;62 border: 1px solid #D5D5D5;63 border-radius: 44px;64 padding: 0 170px 0 24px;65 display: flex;66 align-items: center;67 background: #fff;68 }69 .search-text {70 color: #333;71 font-size: 30px;72 opacity: 0.9;73 white-space: nowrap;74 overflow: hidden;75 text-overflow: ellipsis;76 }77 .search-right {78 position: absolute;79 right: 10px;80 top: 8px;81 height: 64px;82 display: flex;83 align-items: center;84 gap: 12px;85 }86 .cam-icon, .circle-search {87 width: 64px; height: 64px; border-radius: 32px;88 display: inline-flex; align-items: center; justify-content: center;89 }90 .cam-icon { background: #f0f0f0; border: 1px solid #D5D5D5; }91 .circle-search { background: #0e0e0f; border: 2px solid #fff; }92 .flag-wrap {93 width: 56px; height: 56px; border: 1px solid #D5D5D5; border-radius: 50%;94 display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #444;95 }96 97 /* Chips row */98 .chip-row {99 padding: 18px 20px;100 display: flex;101 align-items: center;102 gap: 16px;103 overflow: hidden;104 }105 .chip {106 display: inline-flex;107 align-items: center;108 gap: 12px;109 border: 1px solid #D5D5D5;110 background: #ffffff;111 border-radius: 32px;112 padding: 14px 22px;113 font-size: 28px;114 color: #222;115 white-space: nowrap;116 }117 .chip .caret { font-size: 26px; color: #666; }118 119 /* Product grid behind overlay */120 .product-grid {121 position: absolute;122 top: 560px;123 left: 0;124 right: 0;125 bottom: 0;126 padding: 12px 24px 120px;127 }128 .grid {129 display: grid;130 grid-template-columns: 1fr 1fr;131 gap: 18px;132 }133 .card {134 border: 1px solid #E5E5E5;135 border-radius: 18px;136 overflow: hidden;137 background: #fff;138 }139 .img-ph {140 width: 100%;141 height: 320px;142 background: #E0E0E0;143 border-bottom: 1px solid #BDBDBD;144 display: flex;145 align-items: center;146 justify-content: center;147 color: #757575;148 font-size: 26px;149 }150 .price { padding: 14px; font-size: 28px; font-weight: 600; }151 152 /* Bottom overlay sheet */153 .sheet {154 position: absolute;155 left: 0; right: 0;156 top: 360px;157 bottom: 230px;158 background: #fff;159 border-top-left-radius: 44px;160 border-top-right-radius: 44px;161 box-shadow: 0 -6px 24px rgba(0,0,0,0.08);162 display: flex;163 }164 .sheet-left {165 width: 270px;166 background: #f1f1f1;167 border-top-left-radius: 44px;168 padding-top: 34px;169 }170 .sheet-item {171 padding: 26px 22px 26px 34px;172 font-size: 28px;173 color: #444;174 }175 .sheet-item.active {176 background: #eaeaea;177 font-weight: 700;178 color: #111;179 position: relative;180 }181 .sheet-item.active:before {182 content: "";183 position: absolute; left: 0; top: 12px; bottom: 12px;184 width: 10px; background: #f4c500; border-radius: 4px;185 }186 187 .sheet-right {188 flex: 1;189 padding: 36px 34px 120px 34px;190 overflow: hidden;191 }192 .section-title {193 font-size: 34px; font-weight: 700; margin: 18px 0 18px;194 }195 .pills { display: flex; flex-wrap: wrap; gap: 16px; }196 .pill {197 padding: 18px 26px;198 border: 1px solid #D5D5D5;199 border-radius: 44px;200 font-size: 28px;201 background: #fff;202 color: #222;203 }204 .flag-pill {205 display: inline-flex; align-items: center; gap: 14px;206 padding: 10px 22px;207 height: 64px;208 border-radius: 44px;209 border: 1px solid #D5D5D5;210 background: #fff;211 font-size: 28px;212 }213 .flag-circle {214 width: 36px; height: 36px; border-radius: 18px; background: #cf1b1b;215 border: 2px solid #ffdb00;216 }217 .input-pill {218 display: inline-flex; align-items: center; gap: 10px;219 padding: 18px 22px;220 width: 300px;221 border-radius: 44px; border: 1px solid #D5D5D5;222 font-size: 28px; color: #666;223 }224 .dash { font-size: 30px; color: #666; padding: 0 8px; }225 .btns {226 position: absolute;227 bottom: 26px;228 left: 300px;229 right: 34px;230 display: flex;231 justify-content: space-between;232 gap: 20px;233 }234 .btn {235 height: 84px;236 padding: 0 40px;237 border-radius: 44px;238 display: inline-flex;239 align-items: center;240 justify-content: center;241 font-size: 30px;242 font-weight: 700;243 }244 .btn-outline {245 background: #fff;246 color: #111;247 border: 2px solid #111;248 }249 .btn-solid {250 background: #0b0b0b;251 color: #fff;252 border: 2px solid #0b0b0b;253 }254 255 /* Home bar */256 .home-bar {257 position: absolute;258 bottom: 24px;259 left: 50%;260 transform: translateX(-50%);261 width: 280px;262 height: 10px;263 background: #000;264 border-radius: 6px;265 opacity: 0.8;266 }267</style>268</head>269<body>270<div id="render-target">271 272 <!-- Status bar -->273 <div class="status-bar">274 <div style="font-weight:600;">11:09</div>275 <div class="status-right">276 <span class="icon">277 <svg width="34" height="34" viewBox="0 0 24 24" fill="#000"><circle cx="6" cy="12" r="2"/></svg>278 </span>279 <span class="icon">280 <svg width="34" height="34" viewBox="0 0 24 24" fill="#000"><circle cx="12" cy="12" r="2"/></svg>281 </span>282 <span class="icon">283 <svg width="34" height="34" viewBox="0 0 24 24" fill="#000"><circle cx="18" cy="12" r="2"/></svg>284 </span>285 <span class="icon">286 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#000" fill="none" stroke-width="2"><path d="M2 12h16"/><path d="M22 12l-3 2v-4z"/></svg>287 </span>288 <span class="icon">289 <svg width="34" height="34" viewBox="0 0 24 24" stroke="#000" fill="none" stroke-width="2"><rect x="2" y="6" width="16" height="12" rx="2"/><path d="M18 10h2v4h-2"/></svg>290 </span>291 </div>292 </div>293 294 <!-- Header -->295 <div class="header">296 <span class="icon">297 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">298 <path d="M15 18l-6-6 6-6"></path>299 </svg>300 </span>301 <span class="icon">302 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">303 <path d="M3 6h18M3 12h18M3 18h10"/>304 </svg>305 </span>306 <div class="notif-dot"></div>307 308 <div class="search-wrap">309 <div class="search-text">Hammer drill machine</div>310 <div class="search-right">311 <div class="cam-icon">312 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#555" fill="none" stroke-width="2">313 <rect x="3" y="7" width="18" height="12" rx="2"/>314 <path d="M9 7l2-3h2l2 3"/>315 <circle cx="12" cy="13" r="3"/>316 </svg>317 </div>318 <div class="circle-search">319 <svg width="28" height="28" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2">320 <circle cx="11" cy="11" r="7"/>321 <path d="M20 20l-4-4"/>322 </svg>323 </div>324 </div>325 </div>326 327 <div class="flag-wrap">🌐</div>328 </div>329 330 <!-- Chips row -->331 <div class="chip-row">332 <div class="chip">333 <svg width="26" height="26" viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2" style="margin-right:6px">334 <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>335 <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>336 </svg>337 Sort <span class="caret">▾</span>338 </div>339 <div class="chip">340 <svg width="24" height="24" viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2">341 <path d="M3 6h18l-7 7v5l-4-2v-3z"/>342 </svg>343 </div>344 <div class="chip" style="font-weight:700;">Category <span class="caret">▴</span></div>345 <div class="chip">Price & Deals <span class="caret">▾</span></div>346 </div>347 348 <!-- Product grid behind overlay -->349 <div class="product-grid">350 <div class="grid">351 <div class="card">352 <div class="img-ph">[IMG: Power Tool Set]</div>353 <div class="price">£ 598.11</div>354 </div>355 <div class="card">356 <div class="img-ph">[IMG: Shovel Attachments]</div>357 <div class="price">£ 508.11</div>358 </div>359 <div class="card">360 <div class="img-ph">[IMG: Drill Machine]</div>361 <div class="price">£ 219.99</div>362 </div>363 <div class="card">364 <div class="img-ph">[IMG: Grinder Tool]</div>365 <div class="price">£ 129.50</div>366 </div>367 </div>368 </div>369 370 <!-- Bottom filter sheet -->371 <div class="sheet">372 <div class="sheet-left">373 <div class="sheet-item">Delivery</div>374 <div class="sheet-item">Ship from</div>375 <div class="sheet-item active">Category</div>376 <div class="sheet-item">Price & Deals</div>377 <div class="sheet-item">Other</div>378 </div>379 <div class="sheet-right">380 <div class="section-title">Delivery</div>381 <div class="pills">382 <div class="pill">Free Shipping</div>383 </div>384 385 <div class="section-title" style="margin-top:32px;">Ship from</div>386 <div class="pills">387 <div class="flag-pill">388 <span class="flag-circle"></span>389 China390 </div>391 </div>392 393 <div class="section-title" style="margin-top:32px;">Category</div>394 <div class="pills">395 <div class="pill">All</div>396 <div class="pill">Home & Garden</div>397 <div class="pill" style="padding:18px 26px; white-space:nowrap;">Office & School & Business & Industrial</div>398 </div>399 400 <div class="section-title" style="margin-top:32px;">Price & Deals</div>401 <div class="pills" style="align-items:center;">402 <div class="input-pill"><span>£</span> Min.</div>403 <span class="dash">-</span>404 <div class="input-pill"><span>£</span> Max.</div>405 </div>406 <div class="pills" style="margin-top:16px;">407 <div class="pill">Mobile Exclusive Deals</div>408 </div>409 410 <div class="section-title" style="margin-top:32px;">Other</div>411 <div class="pills">412 <div class="pill">New Arrival</div>413 </div>414 415 <div class="btns">416 <div class="btn btn-outline">Clear All</div>417 <div class="btn btn-solid">Show 10 Results</div>418 </div>419 </div>420 </div>421 422 <!-- Home bar -->423 <div class="home-bar"></div>424</div>425</body>426</html>