GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sort & Filter UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #000;24 color: #fff;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 box-sizing: border-box;30 font-weight: 600;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 26px;36 font-size: 42px;37 }38 .status-icons {39 display: flex;40 gap: 22px;41 }42 .dot {43 width: 26px;44 height: 26px;45 background: #fff;46 border-radius: 50%;47 opacity: 0.9;48 }49 .status-right {50 display: flex;51 align-items: center;52 gap: 22px;53 }54 .battery {55 width: 38px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;56 }57 .battery::after {58 content: "";59 position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;60 }61 .battery-fill {62 position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: #fff;63 }64 65 /* Page header */66 .page-header {67 position: absolute;68 top: 120px;69 left: 0;70 width: 1080px;71 height: 140px;72 display: flex;73 align-items: center;74 justify-content: space-between;75 padding: 0 40px;76 box-sizing: border-box;77 }78 .title {79 font-size: 54px;80 font-weight: 700;81 color: #111;82 margin-left: 20px;83 }84 .header-left, .header-right {85 display: flex;86 align-items: center;87 gap: 28px;88 }89 .icon-btn {90 width: 72px;91 height: 72px;92 border-radius: 36px;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #111;97 }98 .bag {99 position: relative;100 }101 .bag-badge {102 position: absolute;103 right: -4px; top: -6px;104 background: #000;105 color: #fff;106 width: 44px; height: 44px;107 border-radius: 22px;108 font-size: 28px;109 display: flex; align-items: center; justify-content: center;110 border: 4px solid #fff;111 }112 113 /* Close floating button */114 .close-fab {115 position: absolute;116 top: 232px;117 right: 40px;118 width: 104px;119 height: 104px;120 background: #111;121 border-radius: 52px;122 display: flex;123 align-items: center;124 justify-content: center;125 }126 .close-fab svg { width: 40px; height: 40px; }127 128 /* Content */129 .content {130 position: absolute;131 top: 300px;132 left: 0;133 width: 100%;134 box-sizing: border-box;135 padding: 0 40px 240px 40px;136 }137 .section-title {138 font-size: 48px;139 font-weight: 700;140 color: #111;141 margin: 20px 0 30px 0;142 }143 .divider {144 height: 2px;145 background: #e6e6e6;146 margin: 18px 0 36px 0;147 }148 149 .sub-title {150 font-size: 44px;151 font-weight: 700;152 color: #111;153 margin-bottom: 20px;154 }155 156 .option {157 display: flex;158 align-items: center;159 gap: 28px;160 padding: 22px 0;161 font-size: 40px;162 color: #222;163 }164 165 /* Radio */166 .radio {167 width: 56px;168 height: 56px;169 border-radius: 50%;170 border: 6px solid #9c9c9c;171 box-sizing: border-box;172 position: relative;173 }174 .radio.checked {175 border-color: #000;176 }177 .radio.checked::after {178 content: "";179 position: absolute;180 top: 50%; left: 50%;181 width: 22px; height: 22px;182 background: #000;183 border-radius: 50%;184 transform: translate(-50%, -50%);185 }186 187 /* Checkbox */188 .checkbox {189 width: 56px; height: 56px;190 border-radius: 8px;191 border: 6px solid #9c9c9c;192 position: relative;193 box-sizing: border-box;194 }195 .checkbox.checked {196 background: #000;197 border-color: #000;198 }199 .checkbox.checked::after {200 content: "";201 position: absolute;202 width: 18px; height: 36px;203 border-right: 6px solid #fff;204 border-bottom: 6px solid #fff;205 transform: rotate(40deg);206 left: 18px; top: 8px;207 }208 209 /* Price chip boxes */210 .chips {211 display: flex;212 flex-wrap: wrap;213 gap: 28px;214 margin-top: 18px;215 }216 .chip {217 height: 120px;218 min-width: 220px;219 padding: 0 40px;220 border-radius: 26px;221 border: 2px solid #d9d9d9;222 background: #f7f7f7;223 display: flex;224 align-items: center;225 justify-content: center;226 font-size: 44px;227 color: #222;228 }229 230 /* Bottom actions */231 .bottom-actions {232 position: absolute;233 left: 0;234 bottom: 0;235 width: 100%;236 padding: 30px 40px 40px 40px;237 box-sizing: border-box;238 background: #fff;239 }240 .action-row {241 display: flex;242 gap: 40px;243 justify-content: space-between;244 }245 .btn {246 flex: 1;247 height: 140px;248 border-radius: 70px;249 font-size: 48px;250 font-weight: 700;251 display: flex;252 align-items: center;253 justify-content: center;254 border: 2px solid #d9d9d9;255 }256 .btn.secondary {257 background: #f2f2f2;258 color: #111;259 }260 .btn.primary {261 background: #000;262 color: #fff;263 border: none;264 }265 266 /* Utility spacing between sections */267 .section { margin-bottom: 40px; }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div class="status-left">276 <div>12:09</div>277 <div class="status-icons">278 <div class="dot"></div>279 <div class="dot"></div>280 <div class="dot"></div>281 <div class="dot"></div>282 <div class="dot"></div>283 </div>284 </div>285 <div class="status-right">286 <!-- simple wifi-like icon -->287 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">288 <path d="M6 16c6-6 26-6 32 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>289 <path d="M12 22c4-4 16-4 20 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>290 <path d="M18 28c2-2 6-2 8 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>291 <circle cx="22" cy="34" r="2.8" fill="#fff"/>292 </svg>293 <div class="battery"><div class="battery-fill"></div></div>294 </div>295 </div>296 297 <!-- Page header -->298 <div class="page-header">299 <div class="header-left">300 <div class="icon-btn">301 <svg width="54" height="54" viewBox="0 0 24 24">302 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 <div class="title">Basketball</div>306 </div>307 <div class="header-right">308 <div class="icon-btn">309 <svg width="54" height="54" viewBox="0 0 24 24">310 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.5" fill="none"/>311 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>312 </svg>313 </div>314 <div class="icon-btn bag">315 <svg width="54" height="54" viewBox="0 0 24 24">316 <path d="M6 8h12l-1 11H7L6 8z" stroke="#111" stroke-width="2.5" fill="none" stroke-linejoin="round"/>317 <path d="M9 8a3 3 0 0 1 6 0" stroke="#111" stroke-width="2.5" fill="none"/>318 </svg>319 <div class="bag-badge">1</div>320 </div>321 </div>322 </div>323 324 <!-- Close floating button -->325 <div class="close-fab">326 <svg viewBox="0 0 24 24">327 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>328 </svg>329 </div>330 331 <!-- Main content -->332 <div class="content">333 <div class="section-title">Sort & Filter</div>334 <div class="divider"></div>335 336 <!-- Sort By -->337 <div class="section">338 <div class="sub-title">Sort By</div>339 <div class="option">340 <div class="radio"></div>341 <div>Featured</div>342 </div>343 <div class="option">344 <div class="radio"></div>345 <div>Newest</div>346 </div>347 <div class="option">348 <div class="radio checked"></div>349 <div>Price: Low-High</div>350 </div>351 <div class="option">352 <div class="radio"></div>353 <div>Price: High-Low</div>354 </div>355 </div>356 357 <div class="divider"></div>358 359 <!-- Gender -->360 <div class="section">361 <div class="sub-title">Gender (1)</div>362 <div class="option">363 <div class="checkbox"></div>364 <div>Men</div>365 </div>366 <div class="option">367 <div class="checkbox checked"></div>368 <div>Women</div>369 </div>370 <div class="option">371 <div class="checkbox"></div>372 <div>Unisex</div>373 </div>374 </div>375 376 <div class="divider"></div>377 378 <!-- Shop By Price -->379 <div class="section">380 <div class="sub-title">Shop By Price</div>381 <div class="option">382 <div class="checkbox"></div>383 <div>Over ₹ 13 000.00</div>384 </div>385 </div>386 387 <div class="divider"></div>388 389 <!-- Size -->390 <div class="section">391 <div class="sub-title">Size</div>392 <div class="chips">393 <div class="chip">2.5</div>394 <div class="chip">3</div>395 <div class="chip">3.5</div>396 <div class="chip">4.5</div>397 </div>398 </div>399 </div>400 401 <!-- Bottom actions -->402 <div class="bottom-actions">403 <div class="action-row">404 <div class="btn secondary">Reset (3)</div>405 <div class="btn primary">Apply</div>406 </div>407 </div>408 409</div>410</body>411</html>