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 Overlay UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Status bar */15 .status-bar {16 height:80px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17 color:#222; font-weight:600; font-size:34px;18 }19 .status-right { display:flex; align-items:center; gap:24px; }20 .status-icon { width:36px; height:36px; border-radius:6px; background:#d9d9d9; }21 .battery { width:52px; height:28px; border:2px solid #333; border-radius:6px; position:relative; }22 .battery:after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:16px; background:#333; border-radius:2px; }23 .battery .level { position:absolute; left:3px; top:3px; width:36px; height:20px; background:#333; border-radius:4px; }24 25 /* Top search row */26 .top-bar {27 height:120px; padding:0 28px; display:flex; align-items:center; gap:24px;28 }29 .icon-btn {30 width:72px; height:72px; border-radius:36px; border:1.5px solid #000; display:flex; align-items:center; justify-content:center; background:#fff;31 }32 .search-pill {33 flex:1; height:88px; border-radius:44px; border:3px solid #000; display:flex; align-items:center; padding:0 28px; gap:22px;34 background:#fff;35 }36 .search-pill input {37 border:none; outline:none; font-size:34px; flex:1; color:#111; background:transparent;38 }39 .circle-btn {40 width:72px; height:72px; border-radius:36px; background:#000; display:flex; align-items:center; justify-content:center;41 }42 .location-flag {43 width:64px; height:64px; border-radius:32px; border:2px solid #000; display:flex; align-items:center; justify-content:center;44 background:#fff;45 margin-left:6px;46 }47 48 /* Chips row */49 .chips-row {50 padding:16px 24px; display:flex; align-items:center; gap:18px;51 }52 .chip {53 height:80px; border-radius:40px; border:2px solid #000; padding:0 32px; display:flex; align-items:center; font-size:34px; background:#fff;54 gap:14px;55 }56 .chip.light {57 border-color:#BDBDBD; color:#333;58 }59 .chip .count {60 background:#000; color:#fff; font-size:28px; border-radius:20px; padding:6px 14px;61 }62 63 /* Overlay filter sheet */64 .overlay {65 position:absolute; left:0; right:0; top:320px; bottom:180px;66 display:flex;67 }68 .side-nav {69 width:220px; background:#f2f2f2; padding:40px 24px; color:#444;70 }71 .side-nav .nav-title { font-size:34px; margin:28px 0; }72 .sheet {73 flex:1; background:#fff; border-top-left-radius:36px; border-top-right-radius:36px;74 box-shadow:0 -6px 24px rgba(0,0,0,0.08);75 padding:36px 40px 160px 40px; overflow:hidden;76 }77 78 .section-title { font-weight:700; font-size:42px; color:#111; margin:22px 0; }79 .pill {80 display:inline-flex; align-items:center; height:80px; border:2px solid #D4D4D4; border-radius:40px; padding:0 28px; margin:14px 10px; font-size:34px; color:#333; background:#fff; gap:16px;81 }82 .pill.dark-outline { border-color:#000; }83 .pill.soft { background:#f9f9f9; border-color:#e0e0e0; }84 .flag {85 width:46px; height:46px; border-radius:23px; background:#d32f2f; border:2px solid #b71c1c;86 }87 .breadcrumb-arrow { font-weight:700; margin-right:10px; color:#777; }88 89 .price-input {90 width:320px;91 }92 93 /* Bottom action bar inside sheet */94 .action-bar {95 position:absolute; left:40px; right:40px; bottom:24px; display:flex; gap:24px; justify-content:flex-end;96 }97 .btn {98 height:96px; border-radius:48px; padding:0 40px; font-size:38px; display:flex; align-items:center; justify-content:center; border:2.5px solid #000; background:#fff; color:#111;99 box-shadow:0 2px 0 rgba(0,0,0,0.06);100 }101 .btn.primary { background:#000; color:#fff; border-color:#000; }102 103 /* Product list glimpse */104 .feed {105 position:absolute; left:0; right:0; bottom:0; height:420px; background:#fafafa; border-top-left-radius:24px; border-top-right-radius:24px;106 padding:24px 24px 40px 24px;107 }108 .card { display:flex; align-items:flex-start; gap:24px; background:#fff; border-radius:28px; padding:20px; margin-bottom:18px; box-shadow:0 2px 10px rgba(0,0,0,0.06); }109 .img-ph {110 width:240px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; border-radius:12px;111 }112 .card .content { flex:1; }113 .price { color:#e64a19; font-weight:800; font-size:42px; }114 .old-price { color:#9e9e9e; text-decoration:line-through; font-size:30px; margin-left:16px; }115 116 /* SVG helpers */117 svg { display:block; }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status Bar -->124 <div class="status-bar">125 <div>10:27</div>126 <div class="status-right">127 <div class="status-icon"></div>128 <div class="status-icon"></div>129 <div class="status-icon"></div>130 <div class="battery"><div class="level"></div></div>131 </div>132 </div>133 134 <!-- Top search row -->135 <div class="top-bar">136 <div class="icon-btn">137 <svg width="34" height="34" viewBox="0 0 24 24">138 <path d="M15 19l-7-7 7-7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139 </svg>140 </div>141 <div class="icon-btn">142 <svg width="36" height="36" viewBox="0 0 24 24">143 <path d="M4 7h16M4 12h16M4 17h16" stroke="#000" stroke-width="2" stroke-linecap="round"/>144 </svg>145 </div>146 147 <div class="search-pill">148 <input type="text" value="washing machine">149 <svg width="42" height="42" viewBox="0 0 24 24">150 <path d="M5 7h14v10H5z" fill="none" stroke="#000" stroke-width="1.8"/>151 <circle cx="12" cy="12" r="3" fill="none" stroke="#000" stroke-width="1.8"/>152 </svg>153 <div class="circle-btn">154 <svg width="32" height="32" viewBox="0 0 24 24">155 <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"/>156 <path d="M21 21l-4.5-4.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>157 </svg>158 </div>159 </div>160 161 <div class="location-flag">162 <svg width="30" height="30" viewBox="0 0 24 24">163 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" fill="none" stroke="#000" stroke-width="1.6"/>164 </svg>165 </div>166 </div>167 168 <!-- Chips row -->169 <div class="chips-row">170 <div class="chip">171 <svg width="34" height="34" viewBox="0 0 24 24">172 <path d="M4 4h8v8H4zM12 4h8v8h-8zM4 12h8v8H4zM12 12h8v8h-8z" fill="none" stroke="#000" stroke-width="1.8"/>173 </svg>174 </div>175 <div class="chip">176 <svg width="36" height="36" viewBox="0 0 24 24">177 <path d="M4 6h16l-6 12H10z" fill="none" stroke="#000" stroke-width="2"/>178 </svg>179 <span class="count">1</span>180 </div>181 <div class="chip light">Category ✕</div>182 <div class="chip light">Price & Deals ▾</div>183 </div>184 185 <!-- Overlay sheet with side navigation -->186 <div class="overlay">187 <div class="side-nav">188 <div class="nav-title">Delivery</div>189 <div class="nav-title">Ship from</div>190 <div class="nav-title">Category</div>191 <div class="nav-title">Price & Deals</div>192 <div class="nav-title">Other</div>193 </div>194 195 <div class="sheet">196 <div class="pill soft">Free Shipping</div>197 198 <div class="section-title">Ship from</div>199 <div class="pill">200 <div class="flag"></div>201 China202 </div>203 204 <div class="section-title">Category</div>205 <div>206 <div class="pill">All</div>207 <div class="pill">208 <span class="breadcrumb-arrow"><</span>209 Household Appliances210 </div>211 </div>212 <div>213 <div class="pill">214 <span class="breadcrumb-arrow"><</span>215 Washing Machines216 </div>217 </div>218 <div>219 <div class="pill dark-outline">220 <span class="breadcrumb-arrow"><</span>221 Top Loading Washing Machines222 </div>223 </div>224 225 <div class="section-title">Price & Deals</div>226 <div style="display:flex; align-items:center; gap:18px; flex-wrap:wrap;">227 <div class="pill price-input">€ Min.</div>228 <div style="font-size:40px; color:#777;">-</div>229 <div class="pill price-input">€ Max.</div>230 </div>231 <div class="pill soft">Mobile Exclusive Deals</div>232 233 <div class="section-title">Other</div>234 <div class="pill">New Arrival</div>235 236 <!-- Bottom action buttons -->237 <div class="action-bar">238 <div class="btn">Clear All</div>239 <div class="btn primary">Show 3 Results</div>240 </div>241 </div>242 </div>243 244 <!-- Product feed glimpse (behind sheet) -->245 <div class="feed">246 <div class="card">247 <div class="img-ph">[IMG: Washing machine drum]</div>248 <div class="content">249 <div style="font-size:32px; color:#333;">Top Load Washer - 7kg</div>250 <div><span class="price">35,05 €</span><span class="old-price">73,02 €</span></div>251 </div>252 <div class="icon-btn" style="width:84px; height:84px;">253 <svg width="40" height="40" viewBox="0 0 24 24">254 <path d="M6 6h15l-1.5 9H8L7 4H4" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>255 <circle cx="9" cy="20" r="2" fill="#000"/>256 <circle cx="18" cy="20" r="2" fill="#000"/>257 </svg>258 </div>259 </div>260 <div class="card">261 <div class="img-ph">[IMG: Oral irrigator product]</div>262 <div class="content">263 <div style="font-size:32px; color:#333;">Oral Irrigators Powerful Water Flosser ...</div>264 <div><span class="price">35,05 €</span><span class="old-price">73,02 €</span></div>265 </div>266 </div>267 </div>268 269</div>270</body>271</html>