GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top status gradient bar */17 .statusbar {18 height: 130px;19 background: linear-gradient(90deg, #9fd8d3, #b8e0c6);20 padding: 0 36px;21 display: flex;22 align-items: center;23 color: #1a3b42;24 font-weight: 600;25 letter-spacing: 1px;26 }27 .status-left { font-size: 40px; }28 .status-right {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .dot {35 width: 18px; height: 18px; background: #1a3b42; border-radius: 50%;36 }37 .signal {38 width: 34px; height: 26px; border: 3px solid #1a3b42; border-top: 0; border-radius: 3px;39 }40 41 /* Header toolbar */42 .toolbar {43 height: 120px;44 display: flex;45 align-items: center;46 padding: 0 36px;47 border-bottom: 1px solid #e4e7ea;48 background: #fff;49 }50 .toolbar .title {51 font-size: 60px;52 color: #1d2e30;53 font-weight: 700;54 }55 .toolbar .close {56 margin-left: auto;57 font-size: 48px;58 color: #2c6d78;59 font-weight: 600;60 }61 62 /* Two-column layout */63 .content {64 position: absolute;65 top: 250px; /* below status + toolbar */66 bottom: 170px; /* leave room for bottom button */67 left: 0;68 right: 0;69 display: flex;70 }71 72 .sidebar {73 width: 340px;74 background: #eff2f3;75 height: 100%;76 overflow: hidden;77 border-right: 1px solid #e2e5e7;78 }79 .sidebar-inner {80 padding: 26px 0;81 height: 100%;82 overflow: hidden;83 }84 .side-item {85 padding: 28px 30px;86 font-size: 38px;87 color: #222;88 border-bottom: 1px solid rgba(0,0,0,0.04);89 }90 .side-item.small { line-height: 1.25; }91 .side-section {92 padding: 20px 30px 10px;93 font-weight: 700;94 font-size: 40px;95 color: #2d2f31;96 }97 .side-active {98 background: #d0d3d5;99 color: #0f1111;100 font-weight: 700;101 }102 103 .main {104 flex: 1;105 background: #fff;106 padding: 32px 36px 120px 36px;107 overflow: hidden;108 }109 .group {110 margin-bottom: 48px;111 }112 .group-title {113 font-size: 40px;114 color: #171a1c;115 font-weight: 800;116 margin: 12px 0 22px;117 }118 119 .chip-row {120 display: flex;121 flex-wrap: wrap;122 gap: 20px;123 }124 .chip {125 padding: 22px 32px;126 background: #f6f7f8;127 border: 2px solid #e5e7ea;128 color: #1b1d1f;129 font-size: 36px;130 border-radius: 26px;131 }132 133 .prime-badge {134 display: inline-flex;135 align-items: center;136 gap: 14px;137 padding: 18px 26px;138 background: #f6f9ff;139 border: 2px solid #cfe0ff;140 border-radius: 18px;141 font-size: 36px;142 color: #2a6df2;143 font-weight: 700;144 }145 .prime-check {146 width: 36px; height: 36px;147 }148 .prime-check svg { width: 100%; height: 100%; }149 150 /* Bottom floating button */151 .bottom-cta {152 position: absolute;153 left: 0; right: 0;154 bottom: 40px;155 display: flex;156 justify-content: center;157 pointer-events: none;158 }159 .cta-btn {160 pointer-events: all;161 background: #2b6e79;162 color: #fff;163 font-size: 44px;164 padding: 34px 40px;165 border-radius: 24px;166 width: 860px;167 text-align: center;168 box-shadow: 0 6px 16px rgba(0,0,0,0.15);169 font-weight: 700;170 }171 172 /* Scroll area illusion on right */173 .scroll-pane {174 height: 100%;175 overflow-y: auto;176 padding-right: 6px;177 }178 179</style>180</head>181<body>182<div id="render-target">183 <!-- Status Bar -->184 <div class="statusbar">185 <div class="status-left">6:42</div>186 <div class="status-right">187 <div class="dot"></div>188 <div class="dot"></div>189 <div class="dot"></div>190 <div class="signal"></div>191 </div>192 </div>193 194 <!-- Toolbar -->195 <div class="toolbar">196 <div class="title">Filters</div>197 <div class="close">Close</div>198 </div>199 200 <!-- Main Content -->201 <div class="content">202 <!-- Sidebar -->203 <div class="sidebar">204 <div class="sidebar-inner">205 <div class="side-section">Prime & Delivery</div>206 <div class="side-item">Categories</div>207 <div class="side-item">Brands</div>208 <div class="side-item">Colours</div>209 <div class="side-item">Sizes</div>210 <div class="side-item">Price and Deals</div>211 <div class="side-item">Customer Reviews</div>212 <div class="side-item">Sort by</div>213 214 <div class="side-item side-active">Women's Shoes</div>215 216 <div class="side-item small">Shoes Special<br/>Features</div>217 <div class="side-item small">Shoe Outer<br/>Material</div>218 <div class="side-item">Shoes Closure Type</div>219 <div class="side-item">Sole Width</div>220 <div class="side-item">Shoes Lifestyle</div>221 <div class="side-item">Shoe Toe Style</div>222 <div class="side-item">Height Map</div>223 <div class="side-item">Embellishment</div>224 </div>225 </div>226 227 <!-- Right pane -->228 <div class="main">229 <div class="scroll-pane">230 <div class="group">231 <div class="group-title">Delivery</div>232 <div class="chip-row">233 <div class="chip">Get It Today</div>234 <div class="chip">Get It by Tomorrow</div>235 <div class="chip">Get It in 2 Days</div>236 </div>237 </div>238 239 <div class="group">240 <div class="group-title">Shipping Options</div>241 <div class="chip-row">242 <div class="chip">Eligible for Pay On Delivery</div>243 </div>244 </div>245 246 <div class="group">247 <div class="group-title">Prime Programs</div>248 <div class="prime-badge">249 <span class="prime-check">250 <svg viewBox="0 0 24 24" fill="#ff9900">251 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"></path>252 </svg>253 </span>254 prime255 </div>256 </div>257 258 <!-- Blank area to mimic long page -->259 <div style="height: 1000px;"></div>260 </div>261 </div>262 </div>263 264 <!-- Bottom CTA -->265 <div class="bottom-cta">266 <div class="cta-btn">Show 10,000+ results</div>267 </div>268</div>269</body>270</html>