GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    color:#222;12  }13 14  /* Top gradient status area */15  .top-gradient {16    position:absolute; left:0; top:0; width:1080px; height:170px;17    background: linear-gradient(90deg, #b7e6cf 0%, #a9d7da 100%);18  }19  .status-bar {20    position:absolute; top:20px; left:25px; right:25px; height:60px;21    display:flex; align-items:center; justify-content:space-between; color:#2f4f4f;22    font-size:36px; letter-spacing:0.5px;23  }24  .status-icons { display:flex; align-items:center; gap:28px; }25  .dot { width:20px; height:20px; border-radius:50%; background:#2f4f4f; opacity:0.75; }26 27  /* Title bar */28  .title-bar {29    position:absolute; top:170px; left:0; width:1080px; height:120px;30    background:#ffffff; border-bottom:1px solid #e6e6e6;31    display:flex; align-items:center; justify-content:space-between;32    padding:0 36px;33  }34  .title-bar .title { font-size:64px; font-weight:700; color:#0c1f1f; }35  .close-btn {36    font-size:46px; color:#2b6e79; display:flex; align-items:center; gap:16px; cursor:pointer;37  }38  .close-btn svg { width:36px; height:36px; }39 40  /* Main layout */41  .content {42    position:absolute; top:290px; left:0; right:0; bottom:190px;43    display:flex;44  }45 46  /* Left sidebar */47  .sidebar {48    width:340px; background:#EFF2F3; border-right:1px solid #e6e6e6;49    padding:32px 26px;50    overflow-y:auto;51  }52  .side-item {53    font-size:40px; padding:26px 18px; color:#1c2424;54    border-radius:12px; margin-bottom:18px;55  }56  .side-item.section { font-weight:700; }57  .side-item.active {58    background:#656a70; color:#ffffff;59  }60 61  /* Right panel */62  .panel {63    flex:1; padding:30px 40px; overflow-y:auto;64    background:#ffffff;65  }66  .block-title { font-size:46px; font-weight:700; color:#223131; margin:22px 0 18px 0; }67  .card {68    background:#fafafa; border:1px solid #e1e1e1; border-radius:20px;69    padding:28px; margin-bottom:34px;70  }71 72  /* Slider UI */73  .slider-wrap { height:140px; display:flex; align-items:center; }74  .slider {75    position:relative; height:14px; background:#d1e5ea; border-radius:7px;76    width:700px; margin-left:10px; margin-right:10px;77  }78  .slider::before {79    content:""; position:absolute; left:0; right:0; top:0; bottom:0;80    background:#2b6e79; opacity:0.7;81  }82  .knob {83    position:absolute; top:-33px; width:82px; height:82px;84    border-radius:50%; background:#2b6e79; border:8px solid #ffffff;85    box-shadow:0 2px 8px rgba(0,0,0,0.15);86  }87  .knob.left { left:-10px; }88  .knob.right { right:-10px; }89 90  /* Chips */91  .chips { display:flex; gap:18px; flex-wrap:wrap; }92  .chip {93    padding:22px 28px; background:#f1f3f4; border:1px solid #e3e3e3; border-radius:22px;94    font-size:40px; color:#222; box-shadow:0 1px 0 rgba(0,0,0,0.05);95  }96 97  /* Bottom action button */98  .bottom-bar {99    position:absolute; left:0; right:0; bottom:0; height:190px; background:#ffffff;100    border-top:1px solid #e6e6e6;101  }102  .show-btn {103    position:absolute; right:36px; bottom:40px;104    background:#2b6e79; color:#ffffff;105    padding:32px 42px; border-radius:22px; font-size:42px; font-weight:700;106    box-shadow:0 6px 14px rgba(43,110,121,0.35);107  }108  .gesture {109    position:absolute; left:50%; transform:translateX(-50%);110    bottom:18px; width:500px; height:12px; background:#b3b3b3; border-radius:8px;111    opacity:0.7;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Gradient status area with simple icons -->119  <div class="top-gradient"></div>120  <div class="status-bar">121    <div>5:46</div>122    <div class="status-icons">123      <div class="dot"></div>124      <div class="dot" style="width:28px;height:18px;border-radius:6px;"></div>125      <div class="dot"></div>126    </div>127  </div>128 129  <!-- Title Bar -->130  <div class="title-bar">131    <div class="title">Filters</div>132    <div class="close-btn">133      Close134      <svg viewBox="0 0 24 24">135        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#2b6e79" stroke-width="2.5" fill="none" stroke-linecap="round"/>136      </svg>137    </div>138  </div>139 140  <!-- Main content -->141  <div class="content">142    <!-- Sidebar -->143    <div class="sidebar">144      <div class="side-item section">Prime & Delivery</div>145      <div class="side-item section">Categories</div>146      <div class="side-item section">Price and Deals</div>147      <div class="side-item section">Customer Reviews</div>148      <div class="side-item section">Sort by</div>149      <div class="side-item active">Books</div>150      <div class="side-item section">New Arrivals</div>151      <div class="side-item section">English & Indian Languages</div>152      <div class="side-item section">Kindle Unlimited Eligibility</div>153      <div class="side-item section">Format</div>154      <div class="side-item section">Author</div>155      <div class="side-item section">Foreign Languages</div>156      <div class="side-item section">Prime Reading Eligibility</div>157      <div class="side-item section">Item Condition</div>158      <div class="side-item section">Availability</div>159    </div>160 161    <!-- Right panel -->162    <div class="panel">163      <div class="block-title">Price</div>164      <div class="card">165        <div style="font-size:42px; color:#1f2d2d; margin-bottom:24px;">₹0 – ₹77,300+</div>166        <div class="slider-wrap">167          <div class="slider">168            <div class="knob left"></div>169            <div class="knob right"></div>170          </div>171        </div>172      </div>173 174      <div class="block-title">Deals & Discounts</div>175      <div class="chips" style="margin-bottom:28px;">176        <div class="chip">All Discounts</div>177        <div class="chip">Today's Deals</div>178      </div>179 180      <div class="block-title">Discount</div>181      <div class="chips">182        <div class="chip">10% Off or more</div>183        <div class="chip">25% Off or more</div>184        <div class="chip">35% Off or more</div>185        <div class="chip">50% Off or more</div>186        <div class="chip">60% Off or more</div>187        <div class="chip">70% Off or more</div>188      </div>189    </div>190  </div>191 192  <!-- Bottom action area -->193  <div class="bottom-bar">194    <div class="show-btn">Show 10,000+ results</div>195    <div class="gesture"></div>196  </div>197 198</div>199</body>200</html>