GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Filters UI - Sofa Gray Colour</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #b9e6df 0%, #c5ebea 100%);13 }14 15 /* Top status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 padding: 20px 28px;23 box-sizing: border-box;24 color: #2b2b2b;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 font-size: 34px;30 }31 .status-icons { display: flex; gap: 24px; align-items: center; color: #2b2b2b; opacity: 0.75; font-size: 30px; }32 33 /* Search row */34 .search-row {35 position: absolute;36 top: 110px;37 left: 0;38 width: 1080px;39 box-sizing: border-box;40 padding: 18px 28px;41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .icon-btn {46 width: 72px;47 height: 72px;48 border-radius: 36px;49 background: transparent;50 display: flex; align-items: center; justify-content: center;51 }52 .search-box {53 flex: 1;54 height: 96px;55 background: #ffffff;56 border-radius: 22px;57 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;58 display: flex; align-items: center;59 padding: 0 24px;60 gap: 18px;61 box-sizing: border-box;62 }63 .search-text { font-size: 36px; color: #222; flex: 1; white-space: nowrap; }64 .round-icon {65 width: 72px; height: 72px; border-radius: 16px;66 background: #f1f5f6;67 display: flex; align-items: center; justify-content: center;68 }69 70 /* Chip row */71 .chip-row {72 position: absolute;73 top: 220px;74 left: 0;75 width: 1080px;76 box-sizing: border-box;77 padding: 10px 28px 16px;78 display: flex; align-items: center; gap: 20px;79 }80 .prime-switch {81 display: flex; align-items: center; gap: 12px; color: #3d3d3d; font-size: 32px;82 }83 .switch {84 width: 96px; height: 52px; border-radius: 26px; background: #e8ecec; position: relative;85 }86 .switch::after {87 content: ""; width: 44px; height: 44px; border-radius: 50%;88 background: #ffffff; position: absolute; top: 4px; left: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);89 }90 .chip {91 padding: 18px 26px; border-radius: 18px; border: 1px solid #b6d1d8; background: #eaf6f8; color: #255e72; font-size: 34px;92 }93 .filters-btn {94 margin-left: auto;95 display: flex; align-items: center; gap: 12px;96 color: #245b6c; font-size: 34px;97 }98 99 /* Filters sheet */100 .filters-sheet {101 position: absolute;102 top: 290px;103 left: 0;104 width: 1080px;105 height: 1750px;106 background: #ffffff;107 border-top-left-radius: 18px;108 border-top-right-radius: 18px;109 box-shadow: 0 -2px 0 rgba(0,0,0,0.06);110 display: flex;111 flex-direction: column;112 }113 .sheet-header {114 height: 110px;115 border-bottom: 1px solid #e6e6e6;116 padding: 0 28px;117 display: flex; align-items: center; justify-content: space-between;118 font-size: 40px; font-weight: 700; color: #222;119 }120 .close-link { color: #2f7c8f; font-weight: 700; font-size: 38px; }121 122 .sheet-body {123 flex: 1;124 display: grid;125 grid-template-columns: 280px 1fr;126 height: 100%;127 }128 129 /* Left sidebar */130 .sidebar {131 background: #f6fafb;132 border-right: 1px solid #e6e6e6;133 padding: 10px 0;134 }135 .side-item {136 padding: 34px 28px;137 font-size: 34px; color: #444; border-bottom: 1px solid #eef2f3;138 display: flex; justify-content: space-between; align-items: center;139 }140 .side-item.active {141 background: #e9f5f7;142 border-left: 6px solid #2e8197;143 padding-left: 22px;144 font-weight: 700;145 }146 .badge {147 background: #dfe9ed; color: #245b6c; border-radius: 20px; font-size: 28px; padding: 6px 16px;148 }149 150 /* Right content */151 .content {152 padding: 36px;153 }154 .breadcrumbs { color: #2f7c8f; font-size: 34px; }155 .breadcrumbs span { color: #1c1c1c; }156 .content h2 {157 margin: 20px 0 20px; font-size: 44px; color: #1e1e1e;158 }159 .pill-row { display: flex; gap: 18px; }160 .pill {161 padding: 18px 26px; border-radius: 16px; border: 1px solid #e2e6e8; color: #333; font-size: 34px; background: #f9fbfb;162 }163 .pill.selected {164 background: #eaf6f8; border-color: #b8d6dc; color: #255e72; font-weight: 700;165 }166 167 /* Bottom bar */168 .bottom-bar {169 position: absolute;170 bottom: 0;171 left: 0;172 width: 1080px;173 height: 190px;174 background: #ffffff;175 border-top: 1px solid #e6e6e6;176 box-sizing: border-box;177 padding: 26px 28px;178 display: flex; align-items: center; justify-content: space-between;179 }180 .btn {181 height: 110px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700;182 }183 .btn.clear {184 width: 300px; background: #f3f7f8; color: #2f5966; border: 1px solid #d5e3e7;185 }186 .btn.show {187 width: 470px; background: #2f7c8f; color: #ffffff;188 box-shadow: 0 2px 0 rgba(0,0,0,0.08);189 }190 191 /* Simple SVG icons */192 svg { display: block; }193 .icon { width: 42px; height: 42px; fill: #2c2c2c; }194 .icon-muted { fill: #6b6b6b; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div>11:10</div>203 <div class="status-icons">204 <span>⟂</span>205 <span>⟲</span>206 <span>🔔</span>207 <span>📶</span>208 <span>🔋</span>209 </div>210 </div>211 212 <!-- Search row -->213 <div class="search-row">214 <div class="icon-btn">215 <svg class="icon" viewBox="0 0 24 24">216 <path d="M15.5 3l-8.5 9 8.5 9 1.5-1.3-7.1-7.7 7.1-7.7z"/>217 </svg>218 </div>219 <div class="search-box">220 <svg class="icon" viewBox="0 0 24 24">221 <path d="M10 2a8 8 0 105.3 14.1l5 5 1.4-1.4-5-5A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>222 </svg>223 <div class="search-text">sofa gray colour</div>224 <div class="round-icon">225 <svg class="icon-muted" viewBox="0 0 24 24">226 <path d="M7 5h10l2 3h-4l-2-2h-2l-2 2H5l2-3zm-3 4h16v10H4V9zm5 2a3 3 0 106 0 3 3 0 00-6 0z"/>227 </svg>228 </div>229 </div>230 </div>231 232 <!-- Chip row -->233 <div class="chip-row">234 <div class="prime-switch">235 <span style="color:#f6a623; font-weight:700;">prime</span>236 <div class="switch"></div>237 </div>238 <div class="chip">Sofas & Couches</div>239 <div class="filters-btn">240 <span>Filters (1)</span>241 <svg class="icon" viewBox="0 0 24 24">242 <path d="M6 9l6 6 6-6H6z"/>243 </svg>244 </div>245 </div>246 247 <!-- Filters sheet -->248 <div class="filters-sheet">249 <div class="sheet-header">250 <div>Filters (1)</div>251 <div class="close-link">Close</div>252 </div>253 254 <div class="sheet-body">255 <!-- Sidebar -->256 <div class="sidebar">257 <div class="side-item">Prime & Delivery</div>258 <div class="side-item active">259 <span>Categories</span>260 <span class="badge">1</span>261 </div>262 <div class="side-item">Brands</div>263 <div class="side-item">Price and Deals</div>264 <div class="side-item">Customer Reviews</div>265 <div class="side-item">Sort by</div>266 <div class="side-item">Quality Certification</div>267 <div class="side-item">Assembly</div>268 <div class="side-item">Sofa Type</div>269 <div class="side-item">Material</div>270 <div class="side-item">Sofa Size</div>271 </div>272 273 <!-- Content -->274 <div class="content">275 <div class="breadcrumbs">276 <span>Any Category</span> > Home & Kitchen > Furniture > <span>Living Room Furniture</span>277 </div>278 279 <h2>Living Room Furniture</h2>280 281 <div class="pill-row">282 <div class="pill">All</div>283 <div class="pill selected">Sofas & Couches</div>284 </div>285 286 <!-- Blank space content area mimic -->287 <div style="height: 1150px;"></div>288 </div>289 </div>290 </div>291 292 <!-- Bottom bar -->293 <div class="bottom-bar">294 <div class="btn clear">Clear Filters</div>295 <div class="btn show">Show 150 results</div>296 </div>297 298</div>299</body>300</html>