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>Filter UI - Washing Machines</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 24px;12 }13 14 /* Top status bar */15 .status-bar {16 height: 80px; padding: 0 32px;17 display: flex; align-items: center; justify-content: space-between;18 color: #222; font-size: 28px;19 }20 .status-icons { display: flex; align-items: center; gap: 24px; color: #555; }21 .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }22 .dot-red { width: 16px; height: 16px; background: #ff1e1e; border-radius: 50%; margin-left: 8px; }23 24 /* Header / search */25 .header {26 padding: 12px 24px 18px;27 display: flex; align-items: center; gap: 18px;28 }29 .round-btn { width: 64px; height: 64px; border-radius: 32px; border: 1.5px solid #ddd; display: flex; align-items: center; justify-content: center; }30 .search-wrap {31 flex: 1; display: flex; align-items: center; gap: 14px;32 }33 .search-pill {34 flex: 1; height: 88px; border-radius: 44px; border: 1.5px solid #d5d5d5; padding: 0 26px;35 display: flex; align-items: center; justify-content: space-between; background: #fff;36 }37 .search-text { color: #222; font-size: 32px; }38 .camera-icon { width: 56px; height: 56px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; }39 .search-action {40 width: 120px; height: 88px; border-radius: 44px;41 background: #111; display: flex; align-items: center; justify-content: center;42 }43 44 /* Chips row */45 .chips-row {46 padding: 8px 24px 20px; display: flex; align-items: center; gap: 16px; overflow: hidden;47 }48 .chip-icon {49 width: 120px; height: 72px; border-radius: 36px; border: 1.5px solid #d5d5d5; display: flex; align-items: center; justify-content: center; gap: 12px;50 color: #222; font-size: 28px; background: #fff;51 }52 .chip {53 height: 72px; border-radius: 36px; padding: 0 24px; border: 1.5px solid #d5d5d5; display: flex; align-items: center; gap: 12px; font-size: 28px; color: #222; background: #fff;54 }55 .badge {56 min-width: 36px; height: 36px; border-radius: 18px; background: #111; color: #fff; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;57 }58 59 /* Filter overlay */60 .filter-overlay {61 position: absolute; left: 0; right: 0; top: 320px; height: 1520px;62 background: #fff; border-top-left-radius: 40px; border-top-right-radius: 40px;63 box-shadow: 0 10px 24px rgba(0,0,0,0.08);64 display: grid; grid-template-columns: 280px 1fr;65 }66 .overlay-header-spacer { position: absolute; left: 0; right: 0; top: 320px; height: 12px; background: transparent; }67 68 .sidebar {69 background: #f1f1f1; border-top-left-radius: 40px; padding-top: 28px; position: relative;70 }71 .sidebar .accent {72 position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #ffce2e;73 }74 .side-item {75 padding: 22px 24px; font-size: 28px; color: #222;76 }77 .side-item.active { background: #f7f7f7; font-weight: bold; }78 79 .content {80 padding: 32px 36px 24px; overflow: hidden;81 }82 .section-title {83 font-size: 36px; font-weight: bold; color: #111; margin-bottom: 18px;84 }85 .pill {86 display: inline-flex; align-items: center; border: 1.5px solid #d5d5d5; border-radius: 40px; padding: 18px 26px; font-size: 28px; color: #222; background: #fff; margin: 10px 12px 10px 0;87 }88 .pill.selected { border-color: #000; box-shadow: inset 0 0 0 2px #000; }89 .crumbs { margin-bottom: 8px; }90 .crumbs .pill { background: #fafafa; }91 .caret { font-size: 26px; color: #777; padding-left: 6px; }92 .row { display: flex; align-items: center; gap: 18px; }93 .muted { color: #777; font-size: 28px; }94 .price-input {95 width: 420px; height: 88px; border: 1.5px solid #d5d5d5; border-radius: 44px; padding: 0 24px;96 display: flex; align-items: center; justify-content: space-between; font-size: 28px; color: #666;97 background: #fff; margin-right: 14px;98 }99 .divider { margin: 0 12px; color: #999; font-size: 32px; }100 101 /* Bottom actions inside overlay */102 .overlay-bottom {103 position: absolute; left: 280px; right: 24px; bottom: 28px;104 display: flex; align-items: center; justify-content: space-between;105 }106 .ghost-btn {107 height: 96px; padding: 0 36px; border-radius: 48px; border: 2px solid #111; background: #fff; color: #111; font-size: 32px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;108 }109 .primary-btn {110 height: 96px; padding: 0 40px; border-radius: 48px; background: #111; color: #fff; font-size: 32px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;111 }112 113 /* Product list preview below overlay */114 .products {115 position: absolute; left: 0; right: 0; bottom: 0; height: 560px; background: #f8f8f8; padding: 24px;116 }117 .card {118 background: #fff; border-radius: 24px; box-shadow: 0 6px 16px rgba(0,0,0,0.06);119 display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 18px; align-items: center;120 }121 .img-placeholder {122 width: 280px; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD;123 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 16px;124 }125 .card-title { font-size: 30px; color: #222; margin-bottom: 12px; }126 .price-row { display: flex; align-items: baseline; gap: 18px; }127 .price { color: #d4573a; font-size: 40px; font-weight: 700; }128 .old-price { color: #aaa; font-size: 28px; text-decoration: line-through; }129 130 /* Simple helpers for icons */131 svg { display: block; }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status Bar -->138 <div class="status-bar">139 <div>10:27</div>140 <div class="status-icons">141 <div class="icon">142 <!-- small LR text placeholder -->143 <span style="font-size:20px; color:#444;">LR</span>144 </div>145 <div class="icon">146 <!-- magnifier small -->147 <svg viewBox="0 0 24 24" width="28" height="28">148 <circle cx="10" cy="10" r="7" stroke="#444" stroke-width="2" fill="none"></circle>149 <line x1="16" y1="16" x2="22" y2="22" stroke="#444" stroke-width="2"></line>150 </svg>151 </div>152 <div class="icon">153 <!-- square icon -->154 <svg viewBox="0 0 24 24" width="28" height="28">155 <rect x="4" y="4" width="16" height="16" fill="#666"></rect>156 </svg>157 </div>158 <div class="icon"><span style="font-size:24px; color:#666;">S</span></div>159 <div class="icon">160 <svg viewBox="0 0 24 24" width="28" height="28">161 <polygon points="12,2 22,12 12,22 2,12" fill="#777"></polygon>162 </svg>163 </div>164 <div class="icon">165 <svg viewBox="0 0 24 24" width="28" height="28">166 <path d="M6 6h12v12H6z" fill="none" stroke="#777" stroke-width="2"></path>167 <path d="M2 12h20" stroke="#777" stroke-width="2"></path>168 </svg>169 </div>170 </div>171 </div>172 173 <!-- Header with back/menu and search -->174 <div class="header">175 <div class="round-btn">176 <!-- Back arrow -->177 <svg viewBox="0 0 24 24" width="36" height="36">178 <path d="M15 4L5 12l10 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>179 </svg>180 </div>181 <div class="round-btn">182 <!-- Hamburger -->183 <svg viewBox="0 0 24 24" width="36" height="36">184 <line x1="3" y1="6" x2="21" y2="6" stroke="#111" stroke-width="2"></line>185 <line x1="3" y1="12" x2="21" y2="12" stroke="#111" stroke-width="2"></line>186 <line x1="3" y1="18" x2="21" y2="18" stroke="#111" stroke-width="2"></line>187 </svg>188 </div>189 <div class="dot-red"></div>190 191 <div class="search-wrap">192 <div class="search-pill">193 <div class="search-text">washing machine</div>194 <div class="camera-icon">195 <!-- Camera icon -->196 <svg viewBox="0 0 24 24" width="34" height="34">197 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"></rect>198 <circle cx="12" cy="12" r="3" stroke="#555" stroke-width="2" fill="none"></circle>199 <rect x="7" y="4" width="6" height="3" fill="#555"></rect>200 </svg>201 </div>202 </div>203 <div class="search-action">204 <!-- Search icon -->205 <svg viewBox="0 0 24 24" width="40" height="40">206 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>207 <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>208 </svg>209 </div>210 <div class="round-btn" style="border: none;">211 <!-- Location pin circle -->212 <svg viewBox="0 0 24 24" width="40" height="40">213 <path d="M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11S5 15 5 10a7 7 0 0 1 7-7z" fill="none" stroke="#111" stroke-width="2"></path>214 <circle cx="12" cy="10" r="3" fill="#111"></circle>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Top chips row -->221 <div class="chips-row">222 <div class="chip-icon">223 <!-- grid icon -->224 <svg viewBox="0 0 24 24" width="28" height="28">225 <rect x="3" y="3" width="8" height="8" fill="#111"></rect>226 <rect x="13" y="3" width="8" height="8" fill="#111"></rect>227 <rect x="3" y="13" width="8" height="8" fill="#111"></rect>228 <rect x="13" y="13" width="8" height="8" fill="#111"></rect>229 </svg>230 </div>231 <div class="chip">232 <!-- filter funnel -->233 <svg viewBox="0 0 24 24" width="28" height="28">234 <path d="M3 5h18l-7 8v6l-4-2v-4z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"></path>235 </svg>236 <span>Filter</span>237 <span class="badge">1</span>238 </div>239 <div class="chip">240 <span>Category</span>241 <span class="caret">ˇ</span>242 <span style="color:#999;">×</span>243 </div>244 <div class="chip"><span>Color</span><span class="caret">ˇ</span></div>245 <div class="chip"><span>Price</span><span class="caret">ˇ</span></div>246 </div>247 248 <!-- Filter Overlay -->249 <div class="filter-overlay">250 <div class="sidebar">251 <div class="accent"></div>252 <div class="side-item">Delivery</div>253 <div class="side-item">Ship from</div>254 <div class="side-item active">Category</div>255 <div class="side-item">Color</div>256 <div class="side-item">Price & Deals</div>257 <div class="side-item">Other</div>258 </div>259 260 <div class="content">261 <!-- Category section -->262 <div class="section-title">Category</div>263 <div class="crumbs">264 <span class="pill">All</span>265 <span class="muted" style="margin: 0 8px;"><</span>266 <span class="pill">Household Appliances</span>267 </div>268 269 <div class="row" style="margin-top: 14px; margin-bottom: 8px;">270 <span class="muted"><</span>271 <span class="pill selected">Washing Machines</span>272 </div>273 274 <div class="row" style="margin: 8px 0;">275 <span class="muted"><</span>276 <span class="pill">Washing Machine Parts</span>277 </div>278 279 <div>280 <span class="pill">Mini Washing Machines</span>281 </div>282 <div>283 <span class="pill">Top Loading Washing Machines</span>284 </div>285 286 <!-- Color section -->287 <div class="section-title" style="margin-top: 40px;">Color</div>288 <div>289 <span class="pill">Silver</span>290 <span class="pill">Red</span>291 <span class="pill">Blue</span>292 <span class="pill">Green</span>293 </div>294 <div>295 <span class="pill">Pink</span>296 <span class="pill">Light Green</span>297 <span class="pill">Purple</span>298 </div>299 <div>300 <span class="pill">Sky Blue</span>301 <span class="pill">Crystal white</span>302 <span class="pill">White</span>303 <span class="pill">More <span class="caret">ˇ</span></span>304 </div>305 306 <!-- Price section -->307 <div class="section-title" style="margin-top: 40px;">Price & Deals</div>308 <div class="row">309 <div class="price-input"><span>€ Min.</span></div>310 <span class="divider">-</span>311 <div class="price-input"><span>€ Max.</span></div>312 </div>313 </div>314 315 <!-- Bottom actions -->316 <div class="overlay-bottom">317 <div class="ghost-btn">Clear All</div>318 <div class="primary-btn">Show 36 Results</div>319 </div>320 </div>321 322 <!-- Product list preview at bottom -->323 <div class="products">324 <div class="card">325 <div class="img-placeholder">[IMG: Mini Washing Machine]</div>326 <div>327 <div class="card-title">Mini Washing Machines Multifunctional Portable ...</div>328 <div class="price-row">329 <div class="price">174,29 €</div>330 <div class="old-price">193,65 €</div>331 </div>332 </div>333 </div>334 </div>335 336</div>337</body>338</html>