GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render - Filters</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 32px;16 box-shadow: 0 10px 40px rgba(0,0,0,0.22);17 color: #222;18 }19 /* Top gradient header */20 .top-grad {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 260px;26 background: linear-gradient(180deg, #8bded6 0%, #bff1ea 100%);27 }28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 18px;32 left: 24px;33 right: 24px;34 height: 60px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 color: #1b1b1b;39 font-size: 34px;40 font-weight: 600;41 }42 .status-right {43 display: flex;44 align-items: center;45 gap: 22px;46 }47 .sb-dot { width: 24px; height: 24px; border-radius: 50%; background: #000; }48 .wifi {49 width: 36px; height: 24px;50 border: 2px solid #000; border-top-left-radius: 18px; border-top-right-radius: 18px;51 border-bottom: none;52 }53 .battery {54 width: 44px; height: 24px; border: 2px solid #000; position: relative;55 }56 .battery::after {57 content: ""; position: absolute; right: -6px; top: 8px; width: 6px; height: 8px; background: #000; border-radius: 2px;58 }59 60 /* Search / toolbar */61 .back-btn {62 position: absolute;63 left: 24px;64 top: 132px;65 width: 66px;66 height: 66px;67 display: flex;68 align-items: center;69 justify-content: center;70 }71 .search-bar {72 position: absolute;73 left: 96px;74 right: 24px;75 top: 110px;76 height: 96px;77 background: #fff;78 border-radius: 28px;79 box-shadow: 0 4px 10px rgba(0,0,0,0.08);80 display: flex;81 align-items: center;82 padding: 0 24px;83 gap: 18px;84 }85 .search-icon { width: 44px; height: 44px; }86 .search-text {87 flex: 1;88 font-size: 38px;89 color: #444;90 }91 .sb-icon {92 width: 56px; height: 56px;93 border-radius: 14px;94 background: #f2f2f2;95 display: flex;96 align-items: center;97 justify-content: center;98 }99 /* Chips row beneath header */100 .chip-row {101 position: absolute;102 top: 260px;103 left: 0;104 width: 1080px;105 height: 110px;106 background: #f5f7f7;107 display: flex;108 align-items: center;109 gap: 18px;110 padding: 0 24px;111 border-top: 1px solid #e7e7e7;112 border-bottom: 1px solid #e7e7e7;113 }114 .chip, .chip-slim {115 display: inline-flex;116 align-items: center;117 gap: 12px;118 background: #eee;119 color: #333;120 border-radius: 22px;121 padding: 18px 24px;122 font-size: 32px;123 white-space: nowrap;124 }125 .chip-slim { padding: 14px 20px; font-size: 30px; }126 .chip.selected {127 background: #dff1f2;128 border: 2px solid #86cfd3;129 color: #0a656d;130 }131 .toggle {132 display: inline-flex; align-items: center; gap: 10px; font-size: 30px;133 }134 .switch {135 width: 68px; height: 36px; background: #ddd; border-radius: 18px; position: relative; border: 1px solid #cfcfcf;136 }137 .switch::after {138 content: ""; position: absolute; left: 4px; top: 3px; width: 30px; height: 30px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2);139 }140 /* Main content split layout */141 .content {142 position: absolute;143 top: 370px;144 left: 0;145 right: 0;146 bottom: 160px;147 display: grid;148 grid-template-columns: 300px 1fr;149 }150 .left-nav {151 background: #f6f9f9;152 border-right: 1px solid #e5e5e5;153 padding-top: 16px;154 }155 .nav-item {156 padding: 26px 24px;157 font-size: 34px;158 color: #4a4a4a;159 border-bottom: 1px solid #eef0f0;160 position: relative;161 }162 .nav-item.active {163 background: #ffffff;164 border-left: 8px solid #0b7b83;165 padding-left: 16px;166 font-weight: 600;167 color: #1e1e1e;168 }169 .nav-count {170 position: absolute; right: 18px; top: 28px; color: #0b7b83; font-weight: 700;171 }172 173 .right-panel {174 background: #fff;175 padding: 24px 32px;176 }177 .filters-top {178 display: flex;179 align-items: center;180 justify-content: space-between;181 padding: 18px 8px 12px;182 border-bottom: 1px solid #f0f0f0;183 }184 .filters-top .title { font-size: 40px; font-weight: 700; }185 .filters-top .close { color: #0b7b83; font-size: 34px; text-decoration: none; }186 .section-title {187 margin: 24px 8px 10px;188 font-size: 44px;189 font-weight: 700;190 color: #222;191 }192 .sub-title {193 margin: 26px 8px 14px;194 font-size: 36px;195 font-weight: 700;196 }197 .chips-wrap { display: flex; flex-wrap: wrap; gap: 18px; }198 .chip.gray { background: #efefef; }199 .chip .x {200 width: 28px; height: 28px; border-radius: 50%; background: #0b7b83; color: #fff;201 font-size: 22px; display: inline-flex; align-items: center; justify-content: center;202 }203 204 /* Footer bar */205 .footer-bar {206 position: absolute;207 left: 0; right: 0; bottom: 82px;208 height: 130px;209 background: #f7fbfb;210 border-top: 1px solid #e6ecec;211 display: flex;212 align-items: center;213 justify-content: space-between;214 padding: 0 24px;215 }216 .btn-outline {217 height: 92px; padding: 0 28px; border-radius: 18px;218 border: 2px solid #cfe1e2; background: #fff; font-size: 36px; color: #0b7b83;219 display: inline-flex; align-items: center; justify-content: center;220 }221 .btn-primary {222 height: 92px; padding: 0 32px; border-radius: 22px; background: #0b7b83; color: #fff; font-size: 38px; font-weight: 700;223 display: inline-flex; align-items: center; justify-content: center;224 box-shadow: 0 4px 10px rgba(11,123,131,0.35);225 }226 .gesture {227 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);228 width: 300px; height: 12px; background: #7e7e7e; border-radius: 6px;229 }230 .orange { color: #ff9800; }231</style>232</head>233<body>234<div id="render-target">235 236 <div class="top-grad"></div>237 238 <div class="status-bar">239 <div>10:15</div>240 <div class="status-right">241 <div class="sb-dot"></div>242 <div class="sb-dot" style="background:#1b1b1b;"></div>243 <div class="sb-dot" style="background:#000;"></div>244 <div class="wifi"></div>245 <div class="battery"></div>246 </div>247 </div>248 249 <div class="back-btn">250 <svg width="56" height="56" viewBox="0 0 40 40">251 <path d="M26 8 L12 20 L26 32" fill="none" stroke="#1b1b1b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 255 <div class="search-bar">256 <svg class="search-icon" viewBox="0 0 24 24">257 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>258 <line x1="15" y1="15" x2="22" y2="22" stroke="#333" stroke-width="2"/>259 </svg>260 <div class="search-text">floor lamp</div>261 <div class="sb-icon">262 <!-- simple camera icon -->263 <svg width="28" height="28" viewBox="0 0 24 24">264 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#555" stroke-width="2"/>265 <circle cx="12" cy="12" r="4" fill="none" stroke="#555" stroke-width="2"/>266 <rect x="8" y="4" width="8" height="3" rx="1" fill="none" stroke="#555" stroke-width="2"/>267 </svg>268 </div>269 <div class="sb-icon">270 <!-- mic icon -->271 <svg width="24" height="24" viewBox="0 0 24 24">272 <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#555" stroke-width="2"/>273 <path d="M6 11 C6 15, 18 15, 18 11" fill="none" stroke="#555" stroke-width="2"/>274 <line x1="12" y1="15" x2="12" y2="20" stroke="#555" stroke-width="2"/>275 <line x1="9" y1="20" x2="15" y2="20" stroke="#555" stroke-width="2"/>276 </svg>277 </div>278 </div>279 280 <div class="chip-row">281 <div class="toggle">282 <div class="switch"></div>283 <span style="color:#0b7b83; font-weight:600;">prime</span>284 </div>285 <div class="chip selected">All Discounts</div>286 <div class="chip-slim" style="background:#eee;">287 <span class="orange">★ ★ ★ ★ ★</span>288 <span style="color:#666;">and</span>289 </div>290 <div class="chip-slim" style="background:#f0f0f0;">291 Filters (1)292 <svg width="20" height="20" viewBox="0 0 20 20">293 <path d="M5 12 L10 7 L15 12" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>294 </svg>295 </div>296 </div>297 298 <div class="content">299 <!-- Left navigation -->300 <div class="left-nav">301 <div class="nav-item">Prime & Delivery</div>302 <div class="nav-item">Categories</div>303 <div class="nav-item">Brands</div>304 <div class="nav-item active">Price and Deals <span class="nav-count">1</span></div>305 <div class="nav-item">Customer Reviews</div>306 <div class="nav-item">Sort by</div>307 <div class="nav-item">Lamp Height</div>308 <div class="nav-item">Room Type</div>309 <div class="nav-item">Lamp Switch Type</div>310 <div class="nav-item">Special Features</div>311 <div class="nav-item">Lamp Width</div>312 </div>313 314 <!-- Right panel -->315 <div class="right-panel">316 <div class="filters-top">317 <div class="title">Filters (1)</div>318 <a href="#" class="close">Close</a>319 </div>320 321 <div class="section-title">Price and Deals</div>322 323 <div class="sub-title">Price</div>324 <div class="chips-wrap" style="margin-bottom: 8px;">325 <div class="chip selected">All Prices</div>326 <div class="chip gray">₹1,000 - ₹2,000</div>327 <div class="chip gray">₹2,000 - ₹3,000</div>328 <div class="chip gray">Over ₹3,000</div>329 </div>330 331 <div class="sub-title">Deals & Discounts</div>332 <div class="chips-wrap" style="margin-bottom: 8px;">333 <div class="chip selected">All Discounts <span class="x">×</span></div>334 <div class="chip gray">Today's Deals</div>335 </div>336 337 <div class="sub-title">Discount</div>338 <div class="chips-wrap">339 <div class="chip gray">10% Off or more</div>340 <div class="chip gray">25% Off or more</div>341 <div class="chip gray">35% Off or more</div>342 <div class="chip gray">50% Off or more</div>343 <div class="chip gray">60% Off or more</div>344 <div class="chip gray">70% Off or more</div>345 </div>346 </div>347 </div>348 349 <div class="footer-bar">350 <div class="btn-outline">Clear Filters</div>351 <div class="btn-primary">Show 299 results</div>352 </div>353 354 <div class="gesture"></div>355</div>356</body>357</html>