GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Shoppers Stop - Filter Bottom Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: #000;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-weight: 600;28 font-size: 36px;29 letter-spacing: 0.5px;30 justify-content: space-between;31 }32 .status-icons {33 display: flex;34 gap: 28px;35 align-items: center;36 }37 .status-dot {38 width: 10px; height: 10px; background:#fff; border-radius: 50%;39 opacity: .9;40 }41 42 /* App bar */43 .app-bar {44 height: 180px;45 background: #fafafa;46 border-bottom: 1px solid #eee;47 display: flex;48 align-items: center;49 padding: 0 36px;50 gap: 28px;51 }52 .brand {53 font-family: "Times New Roman", Georgia, serif;54 font-size: 52px;55 letter-spacing: 4px;56 font-weight: 600;57 margin-right: auto;58 }59 .app-actions {60 display: flex;61 gap: 30px;62 align-items: center;63 }64 .icon-btn svg { width: 48px; height: 48px; }65 66 /* Back + Title */67 .sub-header {68 height: 120px;69 display: flex;70 align-items: center;71 padding: 0 36px;72 gap: 18px;73 color: #333;74 font-size: 44px;75 font-weight: 600;76 }77 .sub-header .count { font-weight: 500; color: #6b6b6b; }78 79 /* Grid content behind sheet */80 .grid {81 padding: 24px 30px 0 30px;82 display: grid;83 grid-template-columns: 1fr 1fr;84 gap: 24px;85 }86 .card {87 position: relative;88 border-radius: 16px;89 overflow: hidden;90 }91 .img-ph {92 width: 100%;93 height: 540px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 display: flex;97 align-items: center;98 justify-content: center;99 color: #757575;100 font-size: 32px;101 }102 .wish {103 position: absolute;104 top: 18px; right: 18px;105 width: 84px; height: 84px;106 background: rgba(255,255,255,0.95);107 border-radius: 50%;108 display: flex; align-items: center; justify-content: center;109 border: 1px solid #ddd;110 }111 .wish svg { width: 44px; height: 44px; fill: none; stroke: #777; stroke-width: 3; }112 113 /* Bottom sheet */114 .sheet {115 position: absolute;116 left: 0; right: 0; bottom: 0;117 height: 1500px;118 background: #fff;119 border-top-left-radius: 44px;120 border-top-right-radius: 44px;121 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);122 display: flex;123 flex-direction: column;124 }125 .grabber {126 width: 160px; height: 10px; border-radius: 6px; background: #ddd;127 margin: 18px auto 16px;128 }129 .sheet-head {130 display: flex; align-items: center;131 padding: 12px 36px 24px 36px;132 }133 .sheet-title {134 font-size: 64px; font-weight: 700; flex: 1; color: #222;135 }136 .clear {137 font-size: 40px; font-weight: 700; color: #111; text-decoration: none;138 }139 .divider-h {140 height: 1px; background: #eee;141 }142 .sheet-body {143 flex: 1;144 display: grid;145 grid-template-columns: 340px 1fr;146 position: relative;147 }148 .left-nav {149 padding: 24px 0;150 background: #fff;151 }152 .left-item {153 display: flex; align-items: center;154 gap: 18px;155 padding: 26px 24px 26px 0;156 font-size: 42px;157 color: #9b9b9b;158 position: relative;159 }160 .left-item.active {161 color: #111; font-weight: 700;162 }163 .left-item .badge {164 background: #E24E2A;165 color: #fff; font-size: 26px; font-weight: 700;166 min-width: 36px; height: 36px; border-radius: 18px;167 display: inline-flex; align-items: center; justify-content: center;168 padding: 0 8px;169 margin-left: 10px;170 }171 .left-indicator {172 position: absolute; left: 0; top: 50%; transform: translateY(-50%);173 width: 12px; height: 56px; background: #E3703A; border-radius: 6px;174 }175 176 .right-panel {177 border-left: 1px solid #eee;178 padding: 24px 40px 180px 40px;179 overflow: hidden;180 }181 .opt {182 display: flex; align-items: center; gap: 26px;183 padding: 26px 0;184 font-size: 42px; color: #222;185 }186 .checkbox {187 width: 56px; height: 56px;188 border: 4px solid #333; border-radius: 10px;189 display: inline-flex; align-items: center; justify-content: center;190 }191 .checkbox.checked {192 border-color: #111;193 background: #111; color: #fff;194 }195 .checkbox.checked svg { fill: none; stroke: #fff; stroke-width: 8px; }196 197 /* Apply button fixed inside sheet */198 .apply-wrap {199 position: absolute;200 left: 36px; right: 36px; bottom: 34px;201 }202 .apply-btn {203 width: 100%; height: 132px; border-radius: 10px;204 background: #fff; border: 1px solid #d9d9d9;205 display: flex; align-items: center; justify-content: center;206 font-size: 44px; font-weight: 800; letter-spacing: 2px;207 box-shadow: 0 6px 16px rgba(0,0,0,0.15);208 }209 210 /* Bottom gesture bar */211 .gesture {212 position: absolute; left: 50%; transform: translateX(-50%);213 bottom: 14px; width: 300px; height: 10px; border-radius: 6px;214 background: #000; opacity: .8;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status Bar -->222 <div class="status-bar">223 <div>8:21</div>224 <div class="status-icons">225 <div class="status-dot"></div>226 <div class="status-dot"></div>227 <div class="status-dot"></div>228 </div>229 </div>230 231 <!-- App Bar -->232 <div class="app-bar">233 <div class="icon-btn" aria-label="menu">234 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>235 </div>236 <div class="brand">Shoppers Stop</div>237 <div class="app-actions">238 <div class="icon-btn" aria-label="search">239 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/><path d="M16.5 16.5L21 21" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>240 </div>241 <div class="icon-btn" aria-label="wishlist">242 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-8.2C.4 9.4 2.1 5.6 5.7 5.3 7.7 5.1 9.4 6.3 10 7.8c.6-1.5 2.3-2.7 4.3-2.5 3.6.3 5.3 4.1 3.2 7.5C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/></svg>243 </div>244 <div class="icon-btn" aria-label="bag">245 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/></svg>246 </div>247 </div>248 </div>249 250 <!-- Sub Header -->251 <div class="sub-header">252 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>253 <div>Search<span class="count">(7527)</span></div>254 </div>255 256 <!-- Background Product Grid -->257 <div class="grid">258 <div class="card">259 <div class="img-ph">[IMG: Product Photo]</div>260 <div class="wish">261 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-8.2C.4 9.4 2.1 5.6 5.7 5.3 7.7 5.1 9.4 6.3 10 7.8c.6-1.5 2.3-2.7 4.3-2.5 3.6.3 5.3 4.1 3.2 7.5C19 16.4 12 21 12 21z"/></svg>262 </div>263 </div>264 <div class="card">265 <div class="img-ph">[IMG: Product Photo]</div>266 <div class="wish">267 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-8.2C.4 9.4 2.1 5.6 5.7 5.3 7.7 5.1 9.4 6.3 10 7.8c.6-1.5 2.3-2.7 4.3-2.5 3.6.3 5.3 4.1 3.2 7.5C19 16.4 12 21 12 21z"/></svg>268 </div>269 </div>270 </div>271 272 <!-- Bottom Sheet -->273 <div class="sheet">274 <div class="grabber"></div>275 <div class="sheet-head">276 <div class="sheet-title">Filter</div>277 <a class="clear" href="#">Clear All</a>278 </div>279 <div class="divider-h"></div>280 281 <div class="sheet-body">282 <!-- Left categories -->283 <div class="left-nav">284 <div class="left-item active">285 <span class="left-indicator"></span>286 <span style="margin-left:24px;">Department</span>287 <span class="badge">1</span>288 </div>289 <div class="left-item"> <span style="margin-left:24px;">Categories</span></div>290 <div class="left-item"> <span style="margin-left:24px;">Sub-categories</span></div>291 <div class="left-item"> <span style="margin-left:24px;">Brands</span></div>292 <div class="left-item"> <span style="margin-left:24px;">Offers</span></div>293 <div class="left-item"> <span style="margin-left:24px;">Product type</span></div>294 <div class="left-item"> <span style="margin-left:24px;">Size</span></div>295 <div class="left-item"> <span style="margin-left:24px;">Colors</span></div>296 <div class="left-item"> <span style="margin-left:24px;">Delivery type</span></div>297 <div class="left-item"> <span style="margin-left:24px;">Price</span></div>298 <div class="left-item"> <span style="margin-left:24px;">Gender</span></div>299 </div>300 301 <!-- Right options -->302 <div class="right-panel">303 <div class="opt">304 <div class="checkbox"></div>305 <div>All (9606)</div>306 </div>307 <div class="opt">308 <div class="checkbox"></div>309 <div>BOYS (738)</div>310 </div>311 <div class="opt">312 <div class="checkbox"></div>313 <div>GIRLS (1)</div>314 </div>315 <div class="opt">316 <div class="checkbox"></div>317 <div>Homeware (2)</div>318 </div>319 <div class="opt">320 <div class="checkbox checked">321 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>322 </div>323 <div>Men (7527)</div>324 </div>325 <div class="opt">326 <div class="checkbox"></div>327 <div>Women (1338)</div>328 </div>329 </div>330 331 <!-- Apply button -->332 <div class="apply-wrap">333 <div class="apply-btn">APPLY</div>334 </div>335 </div>336 </div>337 338 <!-- Bottom gesture pill -->339 <div class="gesture"></div>340</div>341</body>342</html>