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 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: #222;17 }18 19 /* Status bar */20 .status-bar {21 height: 100px;22 background: #000;23 color: #fff;24 padding: 0 32px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 34px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: .9; }36 37 /* App bar */38 .appbar {39 height: 140px;40 background: #fff;41 border-bottom: 1px solid #e9e9e9;42 padding: 0 36px;43 display: flex;44 align-items: center;45 justify-content: space-between;46 }47 .left-app, .right-app { display: flex; align-items: center; gap: 28px; }48 .brand {49 font-family: "Georgia", "Times New Roman", serif;50 letter-spacing: 6px;51 font-size: 46px;52 color: #222;53 }54 .icon {55 width: 48px; height: 48px; display: inline-block;56 }57 .menu-icon, .search-icon, .heart-icon, .bag-icon, .back-icon { fill: none; stroke: #222; stroke-width: 4; }58 .heart-icon { stroke-width: 5; }59 .bag-icon { stroke-linejoin: round; }60 61 /* Sub header */62 .subheader {63 height: 110px;64 display: flex;65 align-items: center;66 gap: 18px;67 padding: 0 32px;68 font-size: 42px;69 color: #333;70 }71 .subheader .back { width: 44px; height: 44px; }72 73 /* Product grid (dimmed behind sheet) */74 .grid {75 padding: 24px 24px 0 24px;76 display: grid;77 grid-template-columns: 1fr 1fr;78 gap: 28px;79 }80 .card {81 position: relative;82 background: #fff;83 border-radius: 12px;84 }85 .img-ph {86 width: 100%;87 height: 520px;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #757575;94 font-size: 36px;95 }96 .fav-badge {97 position: absolute;98 top: 18px; right: 18px;99 width: 86px; height: 86px;100 background: rgba(255,255,255,.9);101 border-radius: 50%;102 display: flex; align-items: center; justify-content: center;103 border: 1px solid #ddd;104 }105 .fav-badge svg { width: 48px; height: 48px; stroke: #888; stroke-width: 5; fill: none; }106 107 /* Overlay and bottom sheet */108 .overlay {109 position: absolute; inset: 0;110 background: rgba(0,0,0,0.55);111 }112 .sheet {113 position: absolute;114 left: 0;115 top: 760px;116 width: 100%;117 height: 1530px; /* leaves space for system pill */118 background: #fff;119 border-top-left-radius: 40px;120 border-top-right-radius: 40px;121 box-shadow: 0 -8px 30px rgba(0,0,0,0.25);122 }123 .sheet .handle {124 position: absolute;125 top: 18px; left: 50%;126 transform: translateX(-50%);127 width: 180px; height: 12px;128 background: #ddd; border-radius: 8px;129 }130 .sheet-header {131 padding: 68px 48px 28px 48px;132 display: flex; align-items: flex-end; justify-content: space-between;133 }134 .sheet-title { font-size: 68px; font-weight: 700; }135 .clear-all {136 font-size: 34px; color: #111; text-decoration: underline; font-weight: 600;137 }138 .divider { height: 1px; background: #eee; }139 140 .sheet-content {141 position: absolute;142 top: 200px;143 bottom: 200px; /* make room for apply bar */144 left: 0; right: 0;145 display: flex;146 }147 .left-nav {148 width: 360px;149 padding: 22px 0 0 36px;150 border-right: 1px solid #eee;151 }152 .left-item {153 position: relative;154 padding: 26px 24px;155 margin: 12px 0;156 font-size: 40px;157 color: #9aa0a6;158 }159 .left-item.active { color: #222; font-weight: 600; }160 .left-item.active::before {161 content: "";162 position: absolute;163 left: -6px; top: 18px;164 width: 10px; height: 72px;165 background: #ef6c32; border-radius: 6px;166 }167 .badge {168 background: #ef6c32;169 color: #fff;170 font-size: 28px;171 line-height: 28px;172 border-radius: 16px;173 padding: 6px 10px;174 margin-left: 10px;175 }176 177 .right-list {178 flex: 1;179 padding: 22px 48px;180 }181 .option-row {182 display: flex;183 align-items: center;184 gap: 28px;185 padding: 28px 0;186 border-bottom: 1px solid #f2f2f2;187 font-size: 40px;188 color: #333;189 }190 .checkbox {191 width: 44px; height: 44px;192 border: 3px solid #333;193 border-radius: 6px;194 box-sizing: border-box;195 flex-shrink: 0;196 background: #fff;197 }198 199 .apply-bar {200 position: absolute;201 left: 0; right: 0; bottom: 40px;202 padding: 0 36px;203 }204 .apply-btn {205 height: 120px;206 background: #fff;207 border: 1px solid #d9d9d9;208 border-radius: 8px;209 box-shadow: 0 6px 16px rgba(0,0,0,0.15);210 display: flex; align-items: center; justify-content: center;211 font-size: 40px; font-weight: 800; letter-spacing: 2px;212 }213 214 /* System gesture bar */215 .system-bar {216 position: absolute; left: 0; right: 0; bottom: 0;217 height: 110px; background: #000;218 display: flex; align-items: center; justify-content: center;219 }220 .pill {221 width: 220px; height: 12px; border-radius: 8px; background: #fff; opacity: .9;222 }223</style>224</head>225<body>226<div id="render-target">227 <!-- Status Bar -->228 <div class="status-bar">229 <div>8:21</div>230 <div class="status-icons">231 <span class="dot"></span><span class="dot"></span><span class="dot"></span>232 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>233 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8h15l3 4-3 4H2z" stroke="#fff" stroke-width="2" fill="none"/></svg>234 </div>235 </div>236 237 <!-- App Bar -->238 <div class="appbar">239 <div class="left-app">240 <svg class="icon menu-icon" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>241 <div class="brand">SHOPPERS STOP</div>242 </div>243 <div class="right-app">244 <svg class="icon search-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-5-5"></path></svg>245 <svg class="icon heart-icon" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.6-7 10-7 10z"/></svg>246 <svg class="icon bag-icon" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8zM9 8V6a3 3 0 0 1 6 0v2"/></svg>247 </div>248 </div>249 250 <!-- Subheader -->251 <div class="subheader">252 <svg class="back back-icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="3" fill="none"/></svg>253 <div>Search(7527)</div>254 </div>255 256 <!-- Product Grid (background content) -->257 <div class="grid">258 <div class="card">259 <div class="img-ph">[IMG: Men's striped shirt]</div>260 <div class="fav-badge">261 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.6-7 10-7 10z"/></svg>262 </div>263 </div>264 <div class="card">265 <div class="img-ph">[IMG: Men's formal shirt]</div>266 <div class="fav-badge">267 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.6-7 10-7 10z"/></svg>268 </div>269 </div>270 </div>271 272 <!-- Modal overlay -->273 <div class="overlay"></div>274 275 <!-- Bottom Sheet -->276 <div class="sheet">277 <div class="handle"></div>278 <div class="sheet-header">279 <div class="sheet-title">Filter</div>280 <div class="clear-all">Clear All</div>281 </div>282 <div class="divider"></div>283 284 <div class="sheet-content">285 <!-- Left navigation -->286 <div class="left-nav">287 <div class="left-item">Department <span class="badge">1</span></div>288 <div class="left-item">Categories</div>289 <div class="left-item">Sub-categories</div>290 <div class="left-item">Brands</div>291 <div class="left-item">Offers</div>292 <div class="left-item">Product type</div>293 <div class="left-item">Size</div>294 <div class="left-item active">Colors</div>295 <div class="left-item">Delivery type</div>296 <div class="left-item">Price</div>297 <div class="left-item">Gender</div>298 </div>299 300 <!-- Right options list -->301 <div class="right-list">302 <div class="option-row"><div class="checkbox"></div>Beige (47)</div>303 <div class="option-row"><div class="checkbox"></div>Black (596)</div>304 <div class="option-row"><div class="checkbox"></div>Blue (1979)</div>305 <div class="option-row"><div class="checkbox"></div>Brown (580)</div>306 <div class="option-row"><div class="checkbox"></div>Green (787)</div>307 <div class="option-row"><div class="checkbox"></div>Grey (340)</div>308 <div class="option-row"><div class="checkbox"></div>Multi (471)</div>309 <div class="option-row"><div class="checkbox"></div>Orange (167)</div>310 </div>311 </div>312 313 <div class="apply-bar">314 <div class="apply-btn">APPLY</div>315 </div>316 </div>317 318 <!-- System gesture bar -->319 <div class="system-bar"><div class="pill"></div></div>320</div>321</body>322</html>