GD-ML/AndroidCode

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>Filter - Floor Lamp</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }10 11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: linear-gradient(180deg, #8adfd8 0%, #71cfd0 100%);17  }18 19  /* Status bar */20  .status-bar {21    height: 90px;22    padding: 20px 24px 0 24px;23    display: flex;24    align-items: center;25    color: #0b2c2f;26    font-weight: 600;27    font-size: 32px;28  }29  .status-icons {30    margin-left: 16px;31    display: flex;32    align-items: center;33    gap: 16px;34  }35  .circle-icon {36    width: 28px; height: 28px; background: #000; border-radius: 50%;37  }38  .wifi-icon, .battery-icon {39    width: 36px; height: 24px;40    border: 2px solid #1c2d2e; border-radius: 4px;41  }42  .battery-icon { position: relative; }43  .battery-icon::after {44    content: "";45    position: absolute; right: -6px; top: 6px;46    width: 6px; height: 12px; background: #1c2d2e; border-radius: 2px;47  }48 49  /* Search bar area */50  .search-area {51    position: relative;52    padding: 12px 24px 20px 24px;53  }54  .back-btn {55    position: absolute;56    left: 24px;57    top: 18px;58    width: 60px; height: 60px;59    display: flex; align-items: center; justify-content: center;60  }61  .search-bar {62    margin-left: 92px;63    height: 96px;64    background: #fff;65    border-radius: 24px;66    box-shadow: 0 6px 12px rgba(0,0,0,0.15);67    display: flex; align-items: center;68    padding: 0 20px;69  }70  .search-icon {71    width: 40px; height: 40px; margin-right: 18px;72  }73  .search-text {74    flex: 1; color: #333; font-size: 34px;75  }76  .search-actions {77    display: flex; align-items: center; gap: 22px;78  }79  .action-icon { width: 42px; height: 42px; }80 81  /* Top filter strip */82  .top-strip {83    height: 120px;84    background: #e9e9e9;85    display: flex; align-items: center;86    padding: 0 24px;87    gap: 18px;88    border-top-left-radius: 24px;89    border-top-right-radius: 24px;90  }91  .prime-label {92    display: flex; align-items: center; gap: 10px; color: #3a8fbd; font-weight: 700; font-size: 30px;93  }94  .switch {95    width: 80px; height: 40px; background: #d1d1d1; border-radius: 20px; position: relative;96  }97  .switch::before {98    content: ""; position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; background: #fff; border-radius: 50%;99    box-shadow: 0 1px 3px rgba(0,0,0,0.2);100  }101  .pill {102    background: #f5f5f5; border-radius: 24px; padding: 14px 22px; font-size: 30px; color: #333; border: 1px solid #e0e0e0;103  }104  .filters-right {105    margin-left: auto; color: #3a8fbd; font-size: 32px; display: flex; align-items: center; gap: 10px;106  }107 108  /* Main filter content */109  .content {110    position: relative;111    background: #fff;112    height: 1820px;113    display: flex;114    border-bottom-left-radius: 24px;115    border-bottom-right-radius: 24px;116  }117  .sidebar {118    width: 264px; background: #f7fbfc; border-right: 1px solid #e5ecef; padding-top: 24px;119  }120  .side-item {121    padding: 28px 24px;122    font-size: 30px;123    color: #667c84;124    border-bottom: 1px solid #eef3f5;125  }126  .side-item.active {127    color: #157a8b;128    border-left: 6px solid #157a8b;129    background: #eff7f8;130    padding-left: 18px;131  }132 133  .main {134    flex: 1;135    padding: 36px 36px 120px 36px;136    position: relative;137  }138  .header-row {139    display: flex; align-items: center;140  }141  .title {142    font-size: 40px; font-weight: 700; color: #2d3c40;143  }144  .close-link {145    margin-left: auto; color: #157a8b; font-size: 32px; font-weight: 700;146  }147 148  .section {149    margin-top: 26px;150  }151  .section h3 {152    font-size: 32px; color: #37474f; margin: 18px 0 14px 0;153  }154  .chip-row {155    display: flex; flex-wrap: wrap; gap: 18px;156  }157  .chip {158    background: #eeeeee; border-radius: 18px; padding: 18px 24px; font-size: 30px; color: #444;159    border: 1px solid #dcdcdc;160  }161  .chip.primary {162    background: #eaf6f7; border-color: #86c9cf; color: #2e7f8c; font-weight: 700;163  }164 165  /* Floating button */166  .float-bar {167    position: absolute; bottom: 140px; right: 24px;168  }169  .cta {170    background: #0b7480; color: #fff; font-size: 34px; padding: 26px 36px; border-radius: 24px; box-shadow: 0 6px 10px rgba(0,0,0,0.2);171  }172 173  /* Bottom nav indicator */174  .bottom-nav {175    position: absolute; bottom: 30px; left: 50%;176    transform: translateX(-50%);177    width: 420px; height: 12px; background: #6f6f6f; border-radius: 6px;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div>10:14</div>187    <div class="status-icons">188      <div class="circle-icon"></div>189      <div class="circle-icon" style="background:#2c2c2c;"></div>190      <div class="circle-icon" style="background:#2c2c2c;"></div>191      <div style="width: 28px; height: 28px; border-radius: 50%; background:#2c2c2c;"></div>192      <div class="wifi-icon"></div>193      <div class="battery-icon"></div>194    </div>195  </div>196 197  <!-- Search Area -->198  <div class="search-area">199    <div class="back-btn">200      <svg width="44" height="44" viewBox="0 0 24 24">201        <path d="M15 18l-6-6 6-6" stroke="#1f3b3f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202      </svg>203    </div>204    <div class="search-bar">205      <svg class="search-icon" viewBox="0 0 24 24">206        <circle cx="10" cy="10" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"/>207        <line x1="15" y1="15" x2="22" y2="22" stroke="#4a4a4a" stroke-width="2"/>208      </svg>209      <div class="search-text">floor lamp</div>210      <div class="search-actions">211        <svg class="action-icon" viewBox="0 0 24 24">212          <rect x="4" y="6" width="16" height="12" rx="2" ry="2" stroke="#4a4a4a" stroke-width="2" fill="none"/>213          <circle cx="12" cy="12" r="3" stroke="#4a4a4a" stroke-width="2" fill="none"/>214        </svg>215        <svg class="action-icon" viewBox="0 0 24 24">216          <rect x="9" y="3" width="6" height="12" rx="3" stroke="#4a4a4a" stroke-width="2" fill="none"/>217          <path d="M7 21h10" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Top Filter Strip -->224  <div class="top-strip">225    <div class="prime-label">226      <span>✓prime</span>227      <div class="switch"></div>228    </div>229    <div class="pill">Under ₹500</div>230    <div class="filters-right">231      <span>Filters</span>232      <svg width="26" height="26" viewBox="0 0 24 24">233        <path d="M6 9l6 6 6-6" stroke="#3a8fbd" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234      </svg>235    </div>236  </div>237 238  <!-- Main Content -->239  <div class="content">240    <div class="sidebar">241      <div class="side-item">Prime & Delivery</div>242      <div class="side-item">Categories</div>243      <div class="side-item">Brands</div>244      <div class="side-item active">Price and Deals</div>245      <div class="side-item">Customer Reviews</div>246      <div class="side-item">Sort by</div>247      <div class="side-item">Lamp Height</div>248      <div class="side-item">Room Type</div>249      <div class="side-item">Lamp Switch Type</div>250      <div class="side-item">Special Features</div>251      <div class="side-item">Lamp Width</div>252    </div>253 254    <div class="main">255      <div class="header-row">256        <div class="title">Price and Deals</div>257        <div class="close-link">Close</div>258      </div>259 260      <div class="section">261        <h3>Price</h3>262        <div class="chip-row">263          <div class="chip primary">All Prices</div>264          <div class="chip">Under ₹500</div>265        </div>266        <div class="chip-row" style="margin-top: 16px;">267          <div class="chip">₹500 - ₹1,000</div>268          <div class="chip">₹1,000 - ₹2,000</div>269        </div>270        <div class="chip-row" style="margin-top: 16px;">271          <div class="chip">₹2,000 - ₹3,000</div>272          <div class="chip">Over ₹3,000</div>273        </div>274      </div>275 276      <div class="section">277        <h3>Deals & Discounts</h3>278        <div class="chip-row">279          <div class="chip">All Discounts</div>280          <div class="chip">Today's Deals</div>281        </div>282      </div>283 284      <div class="section">285        <h3>Discount</h3>286        <div class="chip-row">287          <div class="chip">10% Off or more</div>288          <div class="chip">25% Off or more</div>289        </div>290        <div class="chip-row" style="margin-top: 16px;">291          <div class="chip">35% Off or more</div>292          <div class="chip">50% Off or more</div>293        </div>294        <div class="chip-row" style="margin-top: 16px;">295          <div class="chip">60% Off or more</div>296          <div class="chip">70% Off or more</div>297        </div>298      </div>299    </div>300  </div>301 302  <!-- Floating CTA -->303  <div class="float-bar">304    <div class="cta">Show 7,006 results</div>305  </div>306 307  <!-- Bottom Navigation Indicator -->308  <div class="bottom-nav"></div>309 310</div>311</body>312</html>