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>Filters UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 18 /* Top status bar with gradient */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: linear-gradient(90deg, #b6e7cf 0%, #9fe3e5 100%);26 display: flex;27 align-items: center;28 padding: 0 34px;29 box-sizing: border-box;30 }31 .status-time {32 font-size: 38px;33 font-weight: 600;34 color: #102b2d;35 }36 .status-icons {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .status-icons svg { width: 42px; height: 42px; fill: #1b3a3c; }43 44 /* Header */45 .header {46 position: absolute;47 top: 120px;48 left: 0;49 width: 1080px;50 height: 120px;51 background: #fff;52 display: flex;53 align-items: center;54 border-bottom: 1px solid #e2e6e8;55 box-sizing: border-box;56 padding: 0 36px;57 }58 .header-title {59 font-size: 52px;60 font-weight: 700;61 color: #1a1a1a;62 }63 .header-action {64 margin-left: auto;65 font-size: 44px;66 color: #0a6b73;67 font-weight: 600;68 cursor: default;69 }70 71 /* Main layout */72 .main {73 position: absolute;74 top: 240px;75 left: 0;76 right: 0;77 bottom: 220px;78 display: flex;79 }80 81 /* Left filter list */82 .left-panel {83 width: 340px;84 background: #f1f3f4;85 border-right: 1px solid #e2e6e8;86 box-sizing: border-box;87 padding-top: 18px;88 }89 .filter-item {90 position: relative;91 padding: 34px 28px;92 font-size: 36px;93 color: #1c1c1c;94 min-height: 96px;95 display: flex;96 align-items: center;97 }98 .filter-item + .filter-item { border-top: 1px solid #e7eaec; }99 .filter-item .count {100 margin-left: auto;101 background: #fff;102 border: 1px solid #d0d5d9;103 color: #4b4f52;104 border-radius: 14px;105 font-size: 30px;106 padding: 6px 14px;107 }108 .filter-item.selected {109 background: #6d7377;110 color: #ffffff;111 font-style: italic;112 }113 114 /* Right content area */115 .right-panel {116 flex: 1;117 padding: 34px 36px;118 box-sizing: border-box;119 overflow: hidden;120 }121 .section-title {122 font-size: 40px;123 font-weight: 700;124 color: #202223;125 margin: 12px 0 10px;126 }127 .subtitle {128 font-size: 34px;129 color: #444;130 margin-top: 26px;131 margin-bottom: 10px;132 font-weight: 700;133 }134 135 .chip-row {136 display: flex;137 flex-wrap: wrap;138 gap: 22px 26px;139 margin-top: 16px;140 }141 .chip {142 display: inline-flex;143 align-items: center;144 padding: 18px 26px;145 background: #eeeeee;146 border: 1px solid #e0e0e0;147 border-radius: 26px;148 font-size: 34px;149 color: #111;150 white-space: nowrap;151 }152 .chip.primary {153 background: #d9eef0;154 border-color: #a9d7da;155 color: #0a6b73;156 font-weight: 700;157 }158 .chip .close-x {159 display: inline-flex;160 margin-left: 18px;161 }162 .chip .close-x svg { width: 28px; height: 28px; stroke: #0a6b73; stroke-width: 3; fill: none; }163 164 .pill {165 display: inline-block;166 padding: 16px 26px;167 border-radius: 22px;168 background: #efefef;169 border: 1px solid #e0e0e0;170 color: #333;171 font-size: 32px;172 font-weight: 600;173 }174 175 /* Bottom bar */176 .bottom-bar {177 position: absolute;178 left: 0;179 right: 0;180 bottom: 0;181 height: 220px;182 background: #ffffff;183 border-top: 1px solid #dfe5e7;184 box-sizing: border-box;185 padding: 28px 36px;186 display: flex;187 align-items: center;188 gap: 20px;189 }190 .btn {191 border-radius: 28px;192 font-size: 40px;193 padding: 26px 34px;194 cursor: default;195 }196 .btn-outline {197 color: #0a6b73;198 background: #ffffff;199 border: 2px solid #d7e7ea;200 box-shadow: 0 2px 0 rgba(0,0,0,0.03);201 }202 .btn-primary {203 margin-left: auto;204 background: #0a6b73;205 color: #ffffff;206 border: none;207 padding: 28px 40px;208 border-radius: 30px;209 box-shadow: 0 6px 0 rgba(0,0,0,0.06);210 }211 212 /* Gesture pill */213 .gesture {214 position: absolute;215 bottom: 10px;216 left: 50%;217 transform: translateX(-50%);218 width: 400px;219 height: 16px;220 background: #80868b;221 border-radius: 10px;222 }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Status Bar -->229 <div class="status-bar">230 <div class="status-time">1:06</div>231 <div class="status-icons">232 <!-- lock -->233 <svg viewBox="0 0 24 24"><path d="M6 10V7a6 6 0 0 1 12 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h8V7a4 4 0 0 0-8 0v3z"/></svg>234 <!-- wifi -->235 <svg viewBox="0 0 24 24"><path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM2 9a16 16 0 0 1 20 0l-1.6 1.6a13 13 0 0 0-16.8 0L2 9zm4 4a10 10 0 0 1 12 0l-1.6 1.6a8 8 0 0 0-8.8 0L6 13z"/></svg>236 <!-- battery -->237 <svg viewBox="0 0 28 16"><path d="M1 4a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4zM26 6h2v4h-2z"/></svg>238 </div>239 </div>240 241 <!-- Header -->242 <div class="header">243 <div class="header-title">Filters (2)</div>244 <div class="header-action">Close</div>245 </div>246 247 <!-- Main Content -->248 <div class="main">249 <!-- Left panel -->250 <div class="left-panel">251 <div class="filter-item">Prime & Delivery</div>252 <div class="filter-item">Categories <span class="count">1</span></div>253 <div class="filter-item">Brands <span class="count">1</span></div>254 <div class="filter-item">Price and Deals</div>255 <div class="filter-item">Customer Reviews</div>256 <div class="filter-item">Sort by</div>257 <div class="filter-item selected">Lapdesks</div>258 <div class="filter-item">Availability</div>259 </div>260 261 <!-- Right panel -->262 <div class="right-panel">263 <div class="section-title">Computers & Accessories Brands</div>264 <div class="pill">Top Brands</div>265 266 <div class="subtitle">Brands</div>267 <div class="chip-row">268 <div class="chip primary">269 EUREKA ERGONOMIC270 <span class="close-x" aria-hidden="true">271 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>272 </span>273 </div>274 275 <div class="chip">Portronics</div>276 <div class="chip">Rife</div>277 <div class="chip">Isomars</div>278 <div class="chip">MemeHo</div>279 <div class="chip">ABOUT SPACE</div>280 </div>281 </div>282 </div>283 284 <!-- Bottom Bar -->285 <div class="bottom-bar">286 <div class="btn btn-outline">Clear Filters</div>287 <div class="btn btn-primary">Show 3 results</div>288 </div>289 290 <!-- Gesture bar -->291 <div class="gesture"></div>292</div>293</body>294</html>