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>Shoppers Stop - Filter Bottom Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F6F6F6;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-weight: 600;26 font-size: 40px;27 box-sizing: border-box;28 }29 .status-icons {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: .9; }36 37 /* App bar */38 .app-bar {39 height: 160px;40 background: #ffffff;41 display: flex;42 align-items: center;43 padding: 0 36px;44 box-sizing: border-box;45 border-bottom: 1px solid #ececec;46 }47 .brand {48 font-family: "Georgia", "Times New Roman", serif;49 font-size: 52px;50 letter-spacing: 2px;51 margin-left: 24px;52 }53 .app-actions {54 margin-left: auto;55 display: flex;56 align-items: center;57 gap: 34px;58 }59 .icon-btn svg { width: 52px; height: 52px; stroke: #111; fill: none; stroke-width: 2.5; }60 61 /* Search header row */62 .search-bar {63 height: 120px;64 background: #ffffff;65 display: flex;66 align-items: center;67 padding: 0 36px;68 box-sizing: border-box;69 color: #2b2b2b;70 font-size: 46px;71 gap: 18px;72 border-bottom: 1px solid #efefef;73 }74 .search-bar svg { width: 44px; height: 44px; stroke: #111; fill: none; stroke-width: 3; }75 76 /* Product grid (background content) */77 .product-grid {78 padding: 36px;79 box-sizing: border-box;80 display: flex;81 gap: 36px;82 }83 .card {84 position: relative;85 width: 492px;86 height: 620px;87 background: #E0E0E0;88 border: 1px solid #BDBDBD;89 display: flex;90 align-items: center;91 justify-content: center;92 color: #757575;93 font-size: 36px;94 text-align: center;95 border-radius: 14px;96 overflow: hidden;97 }98 .wish {99 position: absolute;100 top: 20px;101 right: 20px;102 width: 96px;103 height: 96px;104 border-radius: 50%;105 background: rgba(255,255,255,0.9);106 border: 1px solid #d6d6d6;107 display: flex;108 align-items: center;109 justify-content: center;110 }111 .wish svg { width: 54px; height: 54px; stroke: #666; fill: none; stroke-width: 2.6; }112 113 /* Backdrop + bottom sheet */114 .backdrop {115 position: absolute;116 inset: 0;117 background: rgba(0,0,0,0.45);118 }119 .sheet {120 position: absolute;121 left: 0; right: 0; bottom: 0;122 height: 1480px;123 background: #fff;124 border-radius: 40px 40px 0 0;125 box-shadow: 0 -8px 30px rgba(0,0,0,0.25);126 overflow: hidden;127 }128 .sheet-handle {129 width: 160px;130 height: 14px;131 background: #E5E5E5;132 border-radius: 8px;133 margin: 18px auto 16px;134 }135 .sheet-header {136 display: flex;137 align-items: center;138 padding: 12px 36px 28px;139 box-sizing: border-box;140 border-bottom: 1px solid #EFEFEF;141 }142 .sheet-title {143 font-size: 64px;144 font-weight: 700;145 }146 .clear-all {147 margin-left: auto;148 color: #111;149 text-decoration: underline;150 font-size: 40px;151 font-weight: 600;152 }153 154 .sheet-body {155 display: grid;156 grid-template-columns: 360px 1fr;157 height: calc(100% - 210px);158 }159 .left-nav {160 overflow: auto;161 padding: 24px 0;162 box-sizing: border-box;163 }164 .left-item {165 padding: 26px 36px;166 font-size: 46px;167 color: #8F8F8F;168 border-left: 12px solid transparent;169 }170 .left-item.active {171 color: #111;172 border-left-color: #EE8456;173 background: #FFF7F1;174 }175 .badge {176 display: inline-block;177 background: #E56C57;178 color: #fff;179 border-radius: 999px;180 font-size: 28px;181 padding: 6px 12px;182 margin-left: 12px;183 line-height: 1;184 }185 186 .right-panel {187 border-left: 1px solid #EEEEEE;188 padding: 24px 40px 180px 40px;189 box-sizing: border-box;190 overflow: auto;191 }192 .opt {193 display: flex;194 align-items: center;195 gap: 28px;196 padding: 26px 8px;197 font-size: 44px;198 color: #2b2b2b;199 }200 .checkbox {201 width: 56px;202 height: 56px;203 border: 3px solid #2b2b2b;204 border-radius: 8px;205 display: grid;206 place-items: center;207 }208 .checkbox svg { width: 36px; height: 36px; stroke: #111; stroke-width: 4; fill: none; display: none; }209 .checkbox.checked svg { display: block; }210 211 /* Apply button */212 .apply-wrap {213 position: absolute;214 left: 32px;215 right: 32px;216 bottom: 40px;217 }218 .apply-btn {219 height: 120px;220 background: #fff;221 border: 1px solid #D9D9D9;222 border-radius: 16px;223 box-shadow: 0 8px 20px rgba(0,0,0,0.15);224 display: flex;225 align-items: center;226 justify-content: center;227 font-size: 44px;228 font-weight: 800;229 letter-spacing: 1px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status bar -->237 <div class="status-bar">238 8:21239 <div class="status-icons">240 <div class="dot"></div>241 <div class="dot"></div>242 <div class="dot"></div>243 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">244 <path d="M17 7H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>245 <path d="M7 7V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1"/>246 </svg>247 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">248 <path d="M2 12h20"/>249 </svg>250 </div>251 </div>252 253 <!-- App bar -->254 <div class="app-bar">255 <!-- Hamburger -->256 <div class="icon-btn" aria-label="menu">257 <svg viewBox="0 0 24 24">258 <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2.4" stroke-linecap="round"/>259 </svg>260 </div>261 <div class="brand">Shoppers Stop</div>262 <div class="app-actions">263 <!-- Search -->264 <div class="icon-btn" aria-label="search">265 <svg viewBox="0 0 24 24">266 <circle cx="11" cy="11" r="7"></circle>267 <path d="M21 21l-4.3-4.3"></path>268 </svg>269 </div>270 <!-- Heart -->271 <div class="icon-btn" aria-label="wishlist">272 <svg viewBox="0 0 24 24">273 <path d="M12 21s-7-4.7-9-8.6C1 9.2 2.7 6 6 6c2 0 3.2 1 4 2 0.8-1 2-2 4-2 3.3 0 5 3.2 3 6.4C19 16.3 12 21 12 21z"></path>274 </svg>275 </div>276 <!-- Bag -->277 <div class="icon-btn" aria-label="bag">278 <svg viewBox="0 0 24 24">279 <path d="M6 7h12l-1 13H7L6 7z"></path>280 <path d="M8 7a4 4 0 0 1 8 0"></path>281 </svg>282 </div>283 </div>284 </div>285 286 <!-- Search row -->287 <div class="search-bar">288 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>289 <div>Search(7527)</div>290 </div>291 292 <!-- Background product grid -->293 <div class="product-grid">294 <div class="card">295 [IMG: Men's striped shirt]296 <div class="wish">297 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.7-9-8.6C1 9.2 2.7 6 6 6c2 0 3.2 1 4 2 0.8-1 2-2 4-2 3.3 0 5 3.2 3 6.4C19 16.3 12 21 12 21z"></path></svg>298 </div>299 </div>300 <div class="card">301 [IMG: Men's formal shirt]302 <div class="wish">303 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.7-9-8.6C1 9.2 2.7 6 6 6c2 0 3.2 1 4 2 0.8-1 2-2 4-2 3.3 0 5 3.2 3 6.4C19 16.3 12 21 12 21z"></path></svg>304 </div>305 </div>306 </div>307 308 <!-- Dim and Bottom Sheet -->309 <div class="backdrop"></div>310 311 <div class="sheet">312 <div class="sheet-handle"></div>313 <div class="sheet-header">314 <div class="sheet-title">Filter</div>315 <div class="clear-all">Clear All</div>316 </div>317 <div class="sheet-body">318 <!-- Left navigation -->319 <div class="left-nav">320 <div class="left-item">Department <span class="badge">1</span></div>321 <div class="left-item">Categories</div>322 <div class="left-item">Sub-categories</div>323 <div class="left-item">Brands</div>324 <div class="left-item">Offers</div>325 <div class="left-item">Product type</div>326 <div class="left-item">Size</div>327 <div class="left-item active">Colors</div>328 <div class="left-item">Delivery type</div>329 <div class="left-item">Price</div>330 <div class="left-item">Gender</div>331 </div>332 333 <!-- Right panel options -->334 <div class="right-panel">335 <div class="opt">336 <div class="checkbox"></div>337 <div>Beige (47)</div>338 </div>339 <div class="opt">340 <div class="checkbox"></div>341 <div>Black (596)</div>342 </div>343 <div class="opt">344 <div class="checkbox checked">345 <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" stroke-linecap="round" stroke-linejoin="round"/></svg>346 </div>347 <div>Blue (1979)</div>348 </div>349 <div class="opt">350 <div class="checkbox"></div>351 <div>Brown (580)</div>352 </div>353 <div class="opt">354 <div class="checkbox"></div>355 <div>Green (787)</div>356 </div>357 <div class="opt">358 <div class="checkbox"></div>359 <div>Grey (340)</div>360 </div>361 <div class="opt">362 <div class="checkbox"></div>363 <div>Multi (471)</div>364 </div>365 <div class="opt">366 <div class="checkbox"></div>367 <div>Orange (167)</div>368 </div>369 </div>370 </div>371 372 <div class="apply-wrap">373 <div class="apply-btn">APPLY</div>374 </div>375 </div>376 377</div>378</body>379</html>