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">6<title>Filter Sheet UI</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: #FAFAFA;15 border-radius: 28px;16 box-shadow: 0 8px 30px rgba(0,0,0,0.12);17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: linear-gradient(#f0f0f0, #eaeaea);23 color: #2c2c2c;24 font-weight: 600;25 font-size: 40px;26 display: flex;27 align-items: center;28 padding: 0 36px;29 justify-content: space-between;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 font-size: 34px;36 }37 .status-dot { width: 10px; height: 10px; background: #7a7a7a; border-radius: 50%; display: inline-block; }38 39 /* Header with search */40 .app-header {41 height: 170px;42 background: #fff;43 border-bottom: 1px solid #e4e4e4;44 display: flex;45 align-items: center;46 padding: 0 28px;47 gap: 22px;48 }49 .icon-btn {50 width: 88px;51 height: 88px;52 border-radius: 44px;53 display: flex;54 align-items: center;55 justify-content: center;56 color: #3d3d3d;57 }58 .search-pill {59 flex: 1;60 height: 98px;61 border: 2px solid #3A63A5;62 border-radius: 50px;63 display: flex;64 align-items: center;65 padding: 0 32px;66 gap: 18px;67 color: #5b5b5b;68 font-size: 40px;69 background: #fff;70 }71 .header-actions {72 display: flex;73 align-items: center;74 gap: 24px;75 }76 .header-actions .icon-btn { border: 1px solid #e6e6e6; background: #fff; }77 78 .subtle-text {79 color: #6c6c6c;80 font-size: 34px;81 padding: 24px 40px;82 border-bottom: 1px solid #e9e9e9;83 background: #fff;84 }85 86 /* Overlay filter sheet */87 .filter-sheet {88 position: absolute;89 left: 0;90 top: 520px;91 width: 1080px;92 height: 1640px;93 background: #fff;94 border-top-left-radius: 34px;95 border-top-right-radius: 34px;96 box-shadow: 0 -10px 30px rgba(0,0,0,0.15);97 overflow: hidden;98 }99 .sheet-header {100 height: 140px;101 display: flex;102 align-items: center;103 padding: 0 34px;104 justify-content: space-between;105 border-bottom: 1px solid #efefef;106 }107 .sheet-title {108 font-size: 54px;109 font-weight: 700;110 color: #2b2b2b;111 }112 .close-btn {113 width: 88px;114 height: 88px;115 display: flex;116 align-items: center;117 justify-content: center;118 color: #4a4a4a;119 border-radius: 44px;120 }121 122 .sheet-body {123 display: grid;124 grid-template-columns: 300px 1fr;125 height: calc(100% - 300px); /* reserve space for footer buttons */126 }127 128 /* Left categories */129 .categories {130 background: #f6f6f6;131 border-right: 1px solid #ededed;132 padding-top: 12px;133 }134 .cat-item {135 display: flex;136 align-items: center;137 justify-content: space-between;138 height: 120px;139 padding: 0 24px 0 30px;140 font-size: 38px;141 color: #4a4a4a;142 border-bottom: 1px solid #eaeaea;143 position: relative;144 }145 .cat-item.active {146 background: #ffffff;147 color: #222;148 }149 .cat-item.active::before {150 content: "";151 position: absolute;152 left: 0;153 top: 0;154 width: 16px;155 height: 100%;156 background: #cf2f45;157 border-top-right-radius: 12px;158 border-bottom-right-radius: 12px;159 }160 .badge {161 min-width: 54px;162 height: 54px;163 border-radius: 27px;164 background: #111;165 color: #fff;166 font-size: 32px;167 display: inline-flex;168 align-items: center;169 justify-content: center;170 }171 172 /* Right options panel */173 .options-panel {174 padding: 24px 36px;175 }176 .search-size {177 height: 96px;178 border: 1px solid #e6e6e6;179 border-radius: 50px;180 display: flex;181 align-items: center;182 padding: 0 26px;183 gap: 18px;184 color: #7a7a7a;185 font-size: 38px;186 margin: 8px 0 12px;187 }188 .size-list {189 margin-top: 12px;190 }191 .size-row {192 display: grid;193 grid-template-columns: 150px 1fr 120px 120px;194 align-items: center;195 height: 120px;196 border-bottom: 1px solid #f0f0f0;197 color: #2f2f2f;198 font-size: 42px;199 padding: 0 10px;200 }201 .count {202 justify-self: end;203 color: #8b8b8b;204 font-size: 36px;205 }206 .checkbox {207 width: 60px;208 height: 60px;209 border: 2px solid #7b7b7b;210 border-radius: 12px;211 justify-self: end;212 }213 214 /* Footer buttons inside sheet */215 .sheet-footer {216 position: absolute;217 left: 0;218 bottom: 110px;219 width: 100%;220 display: flex;221 justify-content: space-between;222 padding: 0 40px;223 gap: 30px;224 }225 .btn {226 height: 120px;227 border-radius: 18px;228 font-size: 42px;229 display: flex;230 align-items: center;231 justify-content: center;232 padding: 0 40px;233 }234 .btn-outline {235 border: 2px solid #3a3a3a;236 background: #fff;237 color: #2d2d2d;238 flex: 0 0 440px;239 }240 .btn-primary {241 background: #cf2f45;242 color: #fff;243 flex: 1;244 border: none;245 }246 247 /* Bottom device nav hint */248 .device-bar {249 position: absolute;250 bottom: 22px;251 left: 50%;252 transform: translateX(-50%);253 width: 540px;254 height: 18px;255 background: #cfcfcf;256 border-radius: 9px;257 }258 .device-bg {259 position: absolute;260 bottom: 0;261 left: 0;262 width: 1080px;263 height: 120px;264 background: #000;265 }266 267 /* svg styling helper */268 svg { display: block; }269</style>270</head>271<body>272<div id="render-target">273 274 <!-- Status Bar -->275 <div class="status-bar">276 <div>9:57</div>277 <div class="status-right">278 <div class="status-dot"></div>279 <!-- simple icons to mimic status -->280 <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#6f6f6f" stroke-width="2"/></svg>281 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M2 8h20v8H2z" fill="none" stroke="#6f6f6f" stroke-width="2"/><rect x="5" y="10" width="14" height="4" fill="#6f6f6f"/></svg>282 <div style="font-size:36px;color:#2c2c2c;">100%</div>283 </div>284 </div>285 286 <!-- App Header -->287 <div class="app-header">288 <div class="icon-btn">289 <svg width="42" height="42" viewBox="0 0 24 24">290 <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 <div class="search-pill">294 <svg width="44" height="44" viewBox="0 0 24 24">295 <circle cx="11" cy="11" r="7" fill="none" stroke="#3A63A5" stroke-width="2"/>296 <path d="M16 16l5 5" stroke="#3A63A5" stroke-width="2" stroke-linecap="round"/>297 </svg>298 <div>sport shoes men</div>299 </div>300 <div class="header-actions">301 <div class="icon-btn">302 <svg width="42" height="42" viewBox="0 0 24 24">303 <path d="M3 10l9-7 9 7v10H3z" fill="none" stroke="#444" stroke-width="2"/>304 </svg>305 </div>306 <div class="icon-btn">307 <svg width="42" height="42" viewBox="0 0 24 24">308 <path d="M6 6h14l-2 9H8L6 6z" fill="none" stroke="#444" stroke-width="2"/>309 <circle cx="9" cy="20" r="2" fill="#444"/><circle cx="17" cy="20" r="2" fill="#444"/>310 </svg>311 </div>312 <div class="icon-btn">313 <svg width="42" height="42" viewBox="0 0 24 24">314 <path d="M17 7a5 5 0 0 0-8 4c0 4-4 5-4 5s4 1 8-3a5 5 0 0 0 4-6z" fill="none" stroke="#25D366" stroke-width="2"/>315 </svg>316 </div>317 </div>318 </div>319 320 <div class="subtle-text">Showing results for sport shoes men</div>321 322 <!-- Filter Sheet Overlay -->323 <div class="filter-sheet">324 <div class="sheet-header">325 <div class="sheet-title">Filters</div>326 <div class="close-btn">327 <svg width="42" height="42" viewBox="0 0 24 24">328 <path d="M5 5l14 14M19 5L5 19" stroke="#555" stroke-width="2" stroke-linecap="round"/>329 </svg>330 </div>331 </div>332 333 <div class="sheet-body">334 <!-- Left categories -->335 <div class="categories">336 <div class="cat-item">Category</div>337 <div class="cat-item">Price</div>338 <div class="cat-item">Customer Rating</div>339 <div class="cat-item">Color</div>340 <div class="cat-item active">Size</div>341 <div class="cat-item">Brand <span class="badge">1</span></div>342 <div class="cat-item">Outer Material <span class="badge">1</span></div>343 <div class="cat-item">Cushioning</div>344 <div class="cat-item">Discount %</div>345 </div>346 347 <!-- Right options -->348 <div class="options-panel">349 <div class="search-size">350 <svg width="40" height="40" viewBox="0 0 24 24">351 <circle cx="11" cy="11" r="7" fill="none" stroke="#808080" stroke-width="2"/>352 <path d="M16 16l5 5" stroke="#808080" stroke-width="2" stroke-linecap="round"/>353 </svg>354 <div>Search Size</div>355 </div>356 357 <div class="size-list">358 <div class="size-row">359 <div>10</div>360 <div></div>361 <div class="count">296</div>362 <div class="checkbox"></div>363 </div>364 <div class="size-row">365 <div>11</div>366 <div></div>367 <div class="count">6</div>368 <div class="checkbox"></div>369 </div>370 <div class="size-row">371 <div>12</div>372 <div></div>373 <div class="count">6</div>374 <div class="checkbox"></div>375 </div>376 <div class="size-row">377 <div>6</div>378 <div></div>379 <div class="count">423</div>380 <div class="checkbox"></div>381 </div>382 <div class="size-row">383 <div>7</div>384 <div></div>385 <div class="count">422</div>386 <div class="checkbox"></div>387 </div>388 <div class="size-row">389 <div>8</div>390 <div></div>391 <div class="count">378</div>392 <div class="checkbox"></div>393 </div>394 <div class="size-row">395 <div>9</div>396 <div></div>397 <div class="count">348</div>398 <div class="checkbox"></div>399 </div>400 </div>401 </div>402 </div>403 404 <!-- Footer buttons -->405 <div class="sheet-footer">406 <div class="btn btn-outline">Clear Filter</div>407 <div class="btn btn-primary">Apply Filter</div>408 </div>409 </div>410 411 <!-- Bottom device nav -->412 <div class="device-bg"></div>413 <div class="device-bar"></div>414</div>415</body>416</html>