GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filters UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top gradient area */18 .header-bg {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 320px;24 background: linear-gradient(180deg, #8ee0d8 0%, #d2f2f5 100%);25 }26 27 .statusbar {28 position: absolute;29 top: 18px;30 left: 24px;31 right: 24px;32 height: 44px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 color: #1f1f1f;37 font-size: 34px;38 font-weight: 600;39 }40 .status-icons {41 display: flex;42 align-items: center;43 gap: 18px;44 }45 .icon-sq {46 width: 28px; height: 28px; background: #b7d9d5; border-radius: 4px;47 }48 .dot { width: 10px; height: 10px; background: #2b2b2b; border-radius: 50%; display: inline-block; margin: 0 10px; }49 .wifi, .battery { width: 40px; height: 24px; }50 .battery rect { stroke: #222; fill: none; stroke-width: 2; }51 .battery .cap { fill: #222; }52 .wifi path { fill: #222; }53 54 .topbar {55 position: absolute;56 top: 84px;57 left: 20px;58 right: 20px;59 display: flex;60 align-items: center;61 gap: 18px;62 }63 .back-btn {64 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%;65 background: transparent;66 }67 .search-bar {68 flex: 1;69 background: #fff;70 border-radius: 26px;71 height: 96px;72 display: flex;73 align-items: center;74 padding: 0 26px;75 box-shadow: 0 6px 14px rgba(0,0,0,0.12);76 border: 1px solid #e6ecec;77 }78 .search-bar svg { flex: 0 0 auto; }79 .search-placeholder {80 margin-left: 18px;81 font-size: 36px;82 color: #666;83 flex: 1;84 white-space: nowrap;85 overflow: hidden;86 text-overflow: ellipsis;87 }88 .scan-btn {89 width: 56px; height: 56px; background: #eef7f7; border: 1px solid #cfe6e5; border-radius: 50%;90 display: flex; align-items: center; justify-content: center;91 }92 93 .chips-row {94 position: absolute;95 top: 198px;96 left: 0;97 right: 0;98 padding: 0 20px;99 display: flex;100 align-items: center;101 gap: 16px;102 }103 .chip {104 display: inline-flex;105 align-items: center;106 gap: 10px;107 padding: 16px 22px;108 border-radius: 28px;109 font-size: 30px;110 color: #0f3e45;111 background: #e8f3f4;112 border: 1px solid #c7e0e3;113 }114 .chip.teal {115 background: #f1fbfb;116 border-color: #6bbdc3;117 }118 .chip .switch {119 width: 52px; height: 28px; background: #dfe8ea; border-radius: 14px; position: relative;120 border: 1px solid #c8d7da;121 }122 .chip .switch::after {123 content: "";124 position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2);125 }126 .chip .caret {127 width: 10px; height: 10px; border-right: 2px solid #0f3e45; border-top: 2px solid #0f3e45; transform: rotate(-45deg); margin-left: 6px;128 }129 130 /* Sheet */131 .sheet {132 position: absolute;133 top: 280px;134 left: 0;135 right: 0;136 bottom: 120px;137 background: #ffffff;138 border-top-left-radius: 24px;139 border-top-right-radius: 24px;140 box-shadow: 0 -2px 6px rgba(0,0,0,0.06) inset;141 display: flex;142 }143 144 .sidebar {145 width: 330px;146 background: #f5fbfb;147 border-right: 1px solid #e5f0f0;148 padding-top: 60px;149 }150 .side-item {151 padding: 28px 26px;152 font-size: 30px;153 color: #2a3b3f;154 border-bottom: 1px solid #eef5f6;155 display: flex;156 align-items: center;157 justify-content: space-between;158 }159 .side-item .count {160 background: #e9f2f3; color: #3a6d73; font-size: 24px; padding: 4px 12px; border-radius: 12px;161 }162 .side-item.active {163 background: #ffffff;164 border-left: 6px solid #0e8690;165 padding-left: 20px;166 font-weight: 700;167 }168 169 .content {170 flex: 1;171 padding: 40px 40px 140px 40px;172 }173 .content-header {174 display: flex;175 justify-content: space-between;176 align-items: center;177 margin-bottom: 30px;178 }179 .content-title {180 font-size: 40px;181 font-weight: 700;182 }183 .close-link {184 color: #0e8690; font-size: 34px; font-weight: 600;185 }186 187 .section h3 {188 font-size: 42px; margin: 20px 0 24px 0; font-weight: 800; color: #222;189 }190 191 .rating-chips { display: flex; gap: 20px; flex-wrap: wrap; }192 .rchip {193 display: inline-flex; align-items: center; gap: 12px;194 padding: 18px 24px; border-radius: 28px; background: #eef4f5; border: 1px solid #d6e6e8; font-size: 30px; color: #2c4e54;195 }196 .rchip.selected {197 background: #ffffff;198 border-color: #5fc2c9; box-shadow: 0 0 0 3px rgba(95,194,201,0.15) inset;199 }200 .stars { display: inline-flex; align-items: center; gap: 6px; }201 .stars svg { width: 28px; height: 28px; }202 .x-icon {203 width: 18px; height: 18px; border-radius: 50%; background: #0e8690; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-left: 8px;204 }205 206 /* Bottom bar */207 .bottom-actions {208 position: absolute;209 left: 0; right: 0; bottom: 0;210 height: 120px;211 border-top: 1px solid #e6eded;212 background: #ffffff;213 display: flex; align-items: center; justify-content: space-between;214 padding: 0 24px;215 }216 .btn-outline {217 padding: 18px 28px; border: 2px solid #d9e7e8; background: #ffffff; color: #137884; font-size: 34px; border-radius: 18px; font-weight: 600;218 }219 .btn-primary {220 padding: 24px 36px; background: #0e8690; color: #ffffff; font-size: 36px; border-radius: 22px; font-weight: 700;221 box-shadow: 0 6px 12px rgba(14,134,144,0.3);222 }223 224 .home-indicator {225 position: absolute;226 bottom: 16px; left: 50%; transform: translateX(-50%);227 width: 300px; height: 10px; background: #8d8d8d; border-radius: 6px;228 opacity: 0.7;229 }230</style>231</head>232<body>233<div id="render-target">234 <div class="header-bg"></div>235 236 <div class="statusbar">237 <div>2:21</div>238 <div class="status-icons">239 <div class="icon-sq"></div>240 <div class="icon-sq"></div>241 <div class="icon-sq"></div>242 <span class="dot"></span>243 <svg class="wifi" viewBox="0 0 24 24">244 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"></path>245 </svg>246 <svg class="battery" viewBox="0 0 30 18">247 <rect x="1" y="1" width="24" height="16" rx="3"></rect>248 <rect x="3" y="3" width="16" height="12" rx="2" fill="#222"></rect>249 <rect class="cap" x="25.5" y="6" width="3" height="6"></rect>250 </svg>251 </div>252 </div>253 254 <div class="topbar">255 <div class="back-btn" aria-label="Back">256 <svg width="40" height="40" viewBox="0 0 24 24">257 <path d="M15.4 3.4L7 12l8.4 8.6-1.8 1.8L3.6 12l10-10 1.8 1.4z" fill="#234" />258 </svg>259 </div>260 <div class="search-bar">261 <svg width="34" height="34" viewBox="0 0 24 24">262 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#556" />263 </svg>264 <div class="search-placeholder">women's running shoes campus</div>265 <div class="scan-btn" aria-label="Scan">266 <svg width="26" height="26" viewBox="0 0 24 24">267 <path d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14-4h2v10h-10v-2h8v-8z" fill="#0a6f76"/>268 </svg>269 </div>270 </div>271 </div>272 273 <div class="chips-row">274 <div class="chip teal">275 <span style="color:#0e8690; font-weight:700;">prime</span>276 <div class="switch"></div>277 </div>278 <div class="chip">Adidas</div>279 <div class="chip">280 <div class="stars">281 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>282 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>283 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>284 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>285 </div>286 <span> and Up</span>287 </div>288 <div class="chip teal">Filters (3)<span class="caret"></span></div>289 </div>290 291 <div class="sheet">292 <div class="sidebar">293 <div class="side-item">Prime & Delivery</div>294 <div class="side-item">Categories <span class="count">1</span></div>295 <div class="side-item">Brands <span class="count">1</span></div>296 <div class="side-item">Colours</div>297 <div class="side-item">Sizes</div>298 <div class="side-item">Price and Deals</div>299 <div class="side-item active">Customer Reviews <span class="count">1</span></div>300 <div class="side-item">Sort by</div>301 <div class="side-item">Special Features</div>302 <div class="side-item">Closure Type</div>303 <div class="side-item">Sole Width</div>304 <div class="side-item">Weight</div>305 </div>306 307 <div class="content">308 <div class="content-header">309 <div class="content-title">Filters (3)</div>310 <div class="close-link">Close</div>311 </div>312 313 <div class="section">314 <h3>Customer Reviews</h3>315 <div class="rating-chips">316 <div class="rchip selected">317 <div class="stars">318 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>319 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>320 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>321 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>322 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>323 </div>324 <span> & Up</span>325 <span class="x-icon">×</span>326 </div>327 328 <div class="rchip">329 <div class="stars">330 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>331 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>332 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>333 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>334 </div>335 <span> & Up</span>336 </div>337 338 <div class="rchip">339 <div class="stars">340 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>341 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>342 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>343 </div>344 <span> & Up</span>345 </div>346 347 <div class="rchip">348 <div class="stars">349 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6 6.6.6-5 4.2 1.6 6.3L12 16l-6.1 3.1 1.6-6.3-5-4.2 6.6-.6z" fill="#F7A01C"/></svg>350 </div>351 <span> & Up</span>352 </div>353 </div>354 </div>355 </div>356 </div>357 358 <div class="bottom-actions">359 <div class="btn-outline">Clear Filters</div>360 <div class="btn-primary">Show 9 results</div>361 </div>362 363 <div class="home-indicator"></div>364</div>365</body>366</html>