GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Filter Panel UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111; }9 #render-target {10 position: relative;11 width:1080px;12 height:2400px;13 overflow:hidden;14 background:#ffffff;15 }16 17 /* Top status bar */18 .statusbar {19 height:90px;20 padding:0 36px;21 display:flex;22 align-items:center;23 font-size:30px;24 color:#1a1a1a;25 }26 .statusbar .spacer { flex:1; }27 .dot { width:18px; height:18px; background:#111; border-radius:50%; display:inline-block; margin:0 10px; }28 .hollow { background:#e0e0e0; }29 30 /* Search row */31 .search-row {32 padding:12px 24px 12px 24px;33 display:flex;34 align-items:center;35 gap:18px;36 }37 .icon-btn {38 width:64px; height:64px;39 border-radius:50%;40 display:flex; align-items:center; justify-content:center;41 }42 .icon-btn svg { width:38px; height:38px; }43 .search-wrap {44 flex:1;45 display:flex;46 align-items:center;47 background:#fff;48 border:2px solid #d9d9d9;49 border-radius:44px;50 padding:18px 18px 18px 26px;51 gap:16px;52 }53 .search-input {54 flex:1;55 font-size:34px;56 color:#555;57 }58 .cam-btn {59 width:74px; height:60px; border-radius:16px;60 border:2px solid #d0d0d0;61 display:flex; align-items:center; justify-content:center;62 }63 .go-btn {64 background:#0e0e0e; color:#fff;65 border-radius:36px;66 padding:16px 22px;67 display:flex; align-items:center; justify-content:center;68 }69 .go-btn svg { width:34px; height:34px; fill:#fff; }70 71 /* Toolbar chips below search */72 .toolbar {73 display:flex;74 align-items:center;75 gap:18px;76 padding:10px 28px 24px 28px;77 }78 .pill {79 display:inline-flex; align-items:center; gap:12px;80 padding:18px 28px;81 border:2px solid #1a1a1a;82 border-radius:999px;83 font-size:34px;84 color:#111;85 background:#fff;86 }87 .pill.light {88 border-color:#d8d8d8;89 background:#f3f3f3;90 color:#222;91 }92 .badge {93 min-width:36px; height:36px; padding:0 8px;94 border-radius:18px; background:#111; color:#fff;95 font-size:22px; display:flex; align-items:center; justify-content:center;96 }97 98 /* Filter layout */99 .filter-area {100 position:relative;101 margin-top:12px;102 height:1620px;103 display:flex;104 }105 .side-menu {106 width:250px;107 background:#efefef;108 padding-top:30px;109 }110 .side-item {111 padding:26px 24px;112 font-size:34px;113 color:#4b4b4b;114 }115 .side-item.active { font-weight:700; color:#111; }116 117 .panel {118 position:relative;119 flex:1;120 background:#fff;121 border-radius:36px 0 0 36px;122 box-shadow:0 8px 24px rgba(0,0,0,0.08);123 padding:34px 40px 140px 40px;124 }125 126 .section {127 margin:12px 0 34px 0;128 }129 .section h3 {130 margin:18px 0 18px 0;131 font-size:40px;132 }133 134 .chip {135 display:inline-flex; align-items:center; gap:14px;136 padding:22px 32px;137 border:2px solid #d8d8d8;138 border-radius:999px;139 background:#fff;140 color:#333;141 font-size:34px;142 margin:10px 16px 16px 0;143 }144 .chip.gray { background:#f6f6f6; }145 146 .flag {147 width:34px; height:34px; border-radius:50%;148 background:#d80000; position:relative;149 }150 .inputs-row { display:flex; align-items:center; gap:18px; }151 .dash { font-size:40px; color:#777; }152 153 /* Bottom actions */154 .actions {155 position:absolute;156 right:30px;157 bottom:30px;158 display:flex; gap:20px;159 }160 .btn-outline, .btn-solid {161 border-radius:999px; font-size:36px;162 padding:22px 36px; display:inline-flex; align-items:center; justify-content:center;163 }164 .btn-outline { border:2px solid #111; color:#111; background:#fff; }165 .btn-solid { border:2px solid #111; color:#fff; background:#111; }166 167 /* Faded product area behind (bottom preview) */168 .faded-results {169 position:absolute;170 left:0;171 right:0;172 bottom:0;173 height:560px;174 background:#f0f0f0;175 }176 .result-card {177 position:absolute; left:560px; bottom:130px;178 width:420px; height:320px;179 background:#e0e0e0; border:1px solid #bdbdbd;180 display:flex; align-items:center; justify-content:center; color:#757575;181 font-size:28px;182 }183 /* Small red dot near menu */184 .notif {185 position:absolute; left:182px; top:214px;186 width:14px; height:14px; background:#ff1a1a; border-radius:50%;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="statusbar">195 <div style="font-weight:600;">11:09</div>196 <span class="spacer"></span>197 <span class="dot hollow"></span>198 <span class="dot"></span>199 <span class="dot hollow"></span>200 <span class="dot hollow" style="margin-right:0;"></span>201 </div>202 203 <!-- Search / top controls -->204 <div class="search-row">205 <div class="icon-btn" aria-label="Back">206 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M15 6l-6 6 6 6"/></svg>207 </div>208 <div class="icon-btn" aria-label="Menu">209 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h12"/></svg>210 </div>211 212 <div class="search-wrap">213 <div class="search-input">Hammer drill machine</div>214 <div class="cam-btn" aria-label="Camera">215 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M4 8h16v10H4z"/><path d="M9 8l2-2h2l2 2"/></svg>216 </div>217 <div class="go-btn" aria-label="Search">218 <svg viewBox="0 0 24 24"><path d="M15.5 14l5 5-1.5 1.5-5-5V14h1.5zM10 16a6 6 0 110-12 6 6 0 010 12z"/></svg>219 </div>220 </div>221 222 <div class="icon-btn" aria-label="Language">223 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 4 3 14 0 18"/></svg>224 </div>225 </div>226 227 <!-- Row of quick filters -->228 <div class="toolbar">229 <div class="pill">230 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#111" stroke-width="2"><path d="M3 6h18M6 12h12M9 18h6"/></svg>231 <span>Sort</span>232 </div>233 <div class="pill">234 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#111" stroke-width="2"><path d="M3 4h18L14 14v6l-4-2v-4z"/></svg>235 <span> </span>236 <span class="badge">1</span>237 </div>238 <div class="pill light">Category ▴</div>239 <div class="pill light" style="border-color:#e5e5e5;">Price & Deals</div>240 </div>241 242 <span class="notif"></span>243 244 <!-- Filter panel with side menu -->245 <div class="filter-area">246 <div class="side-menu">247 <div class="side-item active">Delivery</div>248 <div class="side-item">Ship from</div>249 <div class="side-item">Category</div>250 <div class="side-item">Price & Deals</div>251 <div class="side-item">Other</div>252 </div>253 254 <div class="panel">255 <div class="section">256 <h3>Delivery</h3>257 <div class="chip">Free Shipping</div>258 </div>259 260 <div class="section">261 <h3>Ship from</h3>262 <div class="chip">263 <span class="flag"></span>264 <span>China</span>265 </div>266 </div>267 268 <div class="section">269 <h3>Category</h3>270 <div class="chip gray" style="border-color:#dcdcdc;">All</div>271 <div class="chip">Home & Garden</div>272 </div>273 274 <div class="section">275 <h3>Price & Deals</h3>276 <div class="inputs-row" style="margin-bottom:18px;">277 <div class="chip gray">£ Min.</div>278 <div class="dash">-</div>279 <div class="chip gray">£ Max.</div>280 </div>281 <div class="chip">Mobile Exclusive Deals</div>282 </div>283 284 <div class="section">285 <h3>Other</h3>286 <div class="chip">New Arrival</div>287 </div>288 289 <div class="actions">290 <div class="btn-outline">Clear All</div>291 <div class="btn-solid">Show 5 Results</div>292 </div>293 </div>294 </div>295 296 <!-- Faded results area (background under the panel) -->297 <div class="faded-results">298 <div class="result-card">[IMG: Product Grid Placeholder]</div>299 </div>300 301</div>302</body>303</html>