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    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: linear-gradient(180deg, #97D5D2 0%, #BDE3C9 100%);13    color: #121212;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    padding: 0 40px;26    box-sizing: border-box;27    color: #0b2c2c;28  }29  .status-left { display: flex; align-items: center; gap: 22px; }30  .time { font-size: 40px; font-weight: 600; letter-spacing: 1px; }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon { width: 40px; height: 40px; }38 39  /* Header */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 160px;46    background: #ffffff;47    box-sizing: border-box;48    padding: 40px 46px;49    border-bottom: 1px solid #e6e6e6;50    display: flex;51    align-items: center;52  }53  .header-title {54    font-size: 60px;55    font-weight: 700;56    color: #1c1c1c;57  }58  .header-close {59    margin-left: auto;60    font-size: 50px;61    color: #1372a6;62    font-weight: 600;63  }64 65  /* Content area */66  .content {67    position: absolute;68    top: 280px; /* below header */69    left: 0;70    width: 1080px;71    height: 1870px;72    background: #ffffff;73    display: flex;74  }75 76  /* Left sidebar */77  .sidebar {78    width: 330px;79    background: #eef1f2;80    border-right: 1px solid #e3e6e8;81    padding-top: 30px;82    box-sizing: border-box;83  }84  .sidebar-section {85    padding: 32px 28px;86    font-size: 40px;87    color: #101010;88    border-bottom: 1px solid #e7eaec;89  }90  .sidebar-section.small { font-size: 38px; }91  .sidebar-section.selected {92    background: #616769;93    color: #ffffff;94    font-weight: 700;95  }96 97  /* Right main area */98  .main {99    width: 750px;100    padding: 40px 36px 160px 36px;101    box-sizing: border-box;102    overflow: hidden;103  }104  .main h2 {105    margin: 0 0 24px 0;106    font-size: 46px;107    font-weight: 700;108  }109  .chip-grid {110    display: grid;111    grid-template-columns: repeat(4, 1fr);112    gap: 26px;113  }114  .chip {115    height: 100px;116    background: #f4f4f4;117    border: 1px solid #e0e0e0;118    border-radius: 28px;119    display: flex;120    align-items: center;121    justify-content: center;122    font-size: 42px;123    color: #111111;124  }125 126  /* Bottom CTA */127  .cta {128    position: absolute;129    right: 40px;130    bottom: 180px;131    background: #216b7b;132    color: #ffffff;133    padding: 34px 46px;134    border-radius: 26px;135    font-size: 42px;136    font-weight: 700;137    box-shadow: 0 6px 12px rgba(0,0,0,0.15);138  }139 140  /* Gesture bar */141  .gesture {142    position: absolute;143    bottom: 40px;144    left: 0;145    width: 100%;146    height: 30px;147    display: flex;148    justify-content: center;149  }150  .gesture > div {151    width: 500px;152    height: 10px;153    background: #9c9c9c;154    border-radius: 12px;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-left">164      <div class="time">11:05</div>165      <!-- simple mail icon -->166      <svg class="icon" viewBox="0 0 24 24">167        <rect x="3" y="5" width="18" height="14" rx="2" fill="#1c4b4b"></rect>168        <polyline points="4,6 12,12 20,6" fill="none" stroke="#9fd1cf" stroke-width="2"></polyline>169      </svg>170      <!-- cloud icon -->171      <svg class="icon" viewBox="0 0 24 24">172        <circle cx="10" cy="13" r="5" fill="#1c4b4b"></circle>173        <rect x="14" y="12" width="7" height="5" rx="2" fill="#1c4b4b"></rect>174      </svg>175    </div>176    <div class="status-right">177      <!-- wifi icon -->178      <svg class="icon" viewBox="0 0 24 24">179        <path d="M2 9c5-4 15-4 20 0" stroke="#1c4b4b" stroke-width="2" fill="none"></path>180        <path d="M5 12c4-3 10-3 14 0" stroke="#1c4b4b" stroke-width="2" fill="none"></path>181        <circle cx="12" cy="17" r="2" fill="#1c4b4b"></circle>182      </svg>183      <!-- battery icon -->184      <svg class="icon" viewBox="0 0 32 24">185        <rect x="2" y="5" width="24" height="14" rx="2" fill="#1c4b4b"></rect>186        <rect x="27" y="9" width="3" height="6" rx="1" fill="#1c4b4b"></rect>187        <rect x="5" y="7" width="18" height="10" fill="#9fd1cf"></rect>188      </svg>189    </div>190  </div>191 192  <!-- Header -->193  <div class="header">194    <div class="header-title">Filters</div>195    <div class="header-close">Close</div>196  </div>197 198  <!-- Content -->199  <div class="content">200    <!-- Sidebar -->201    <div class="sidebar">202      <div class="sidebar-section">Prime & Delivery</div>203      <div class="sidebar-section">Categories</div>204      <div class="sidebar-section">Brands</div>205      <div class="sidebar-section">Colours</div>206      <div class="sidebar-section">Sizes</div>207      <div class="sidebar-section">Price and Deals</div>208      <div class="sidebar-section">Customer Reviews</div>209      <div class="sidebar-section">Sort by</div>210      <div class="sidebar-section selected">Men's Formal Shoes</div>211      <div class="sidebar-section small">Shoes Special<br>Features</div>212      <div class="sidebar-section">Shoe Outer<br>Material</div>213      <div class="sidebar-section">Shoes Closure Type</div>214      <div class="sidebar-section">Sole Width</div>215      <div class="sidebar-section">Shoes Lifestyle</div>216      <div class="sidebar-section">Lace-Up Flat Style</div>217      <div class="sidebar-section">Shoe Toe Style</div>218      <div class="sidebar-section">Height Map</div>219    </div>220 221    <!-- Main -->222    <div class="main">223      <h2>Men's Shoe Size (UK/India)</h2>224      <div class="chip-grid">225        <div class="chip">3</div>226        <div class="chip">4</div>227        <div class="chip">5</div>228        <div class="chip">6</div>229 230        <div class="chip">6.5</div>231        <div class="chip">7</div>232        <div class="chip">7.5</div>233        <div class="chip">8</div>234 235        <div class="chip">8.5</div>236        <div class="chip">9</div>237        <div class="chip">9.5</div>238        <div class="chip">10</div>239 240        <div class="chip">10.5</div>241        <div class="chip">11</div>242        <div class="chip">11.5</div>243        <div class="chip">12</div>244 245        <div class="chip">13</div>246        <div class="chip">14</div>247        <div class="chip">15</div>248      </div>249    </div>250  </div>251 252  <!-- Bottom CTA -->253  <div class="cta">Show 10,000+ results</div>254 255  <!-- Gesture bar -->256  <div class="gesture"><div></div></div>257</div>258</body>259</html>