GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 30px;28    box-sizing: border-box;29    color: #222;30    font-weight: 600;31    font-size: 36px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .dot { width: 10px; height: 10px; background:#4d4d4d; border-radius:50%; display:inline-block; }39  .wifi-icon, .battery-icon, .lock-icon {40    width: 40px; height: 24px; display: inline-block;41  }42  .wifi-icon svg, .battery-icon svg, .lock-icon svg { width: 100%; height: 100%; }43 44  /* Top app bar */45  .top-bar {46    position: absolute;47    top: 90px;48    left: 0;49    width: 1080px;50    height: 110px;51    display: flex;52    align-items: center;53    padding: 0 30px;54    box-sizing: border-box;55  }56  .back-btn {57    width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; margin-right: 20px;58  }59  .title {60    font-size: 56px;61    font-weight: 700;62    color: #1c1c1c;63  }64  .clear-filters {65    margin-left: auto;66    font-size: 44px;67    color: #1c1c1c;68    font-weight: 600;69  }70 71  /* Content layout */72  .content {73    position: absolute;74    top: 200px;75    left: 0;76    width: 1080px;77    height: 1980px;78    display: flex;79  }80  .sidebar {81    width: 300px;82    background: #EEF1F5;83    height: 100%;84    padding-top: 20px;85    box-sizing: border-box;86  }87  .side-item {88    position: relative;89    padding: 26px 24px;90    font-size: 40px;91    color: #1f1f1f;92    height: 110px;93    display: flex;94    align-items: center;95    border-radius: 6px;96  }97  .side-item + .side-item { margin-top: 8px; }98  .checkmark {99    position: absolute;100    right: 18px;101    width: 38px; height: 38px;102  }103  .main-panel {104    flex: 1;105    background: #ffffff;106    padding: 30px 36px;107    box-sizing: border-box;108  }109  .breadcrumb {110    display: flex;111    align-items: center;112    gap: 16px;113    color: #6d6d6d;114    font-size: 40px;115    margin-top: 6px;116  }117  .link {118    margin-top: 24px;119    font-size: 48px;120    color: #1976d2;121    font-weight: 600;122  }123 124  /* Bottom info and button */125  .bottom-info {126    position: absolute;127    left: 30px;128    bottom: 180px;129    font-size: 40px;130    color: #1f1f1f;131  }132  .bottom-info .sub {133    font-size: 34px;134    color: #8a8a8a;135    margin-top: 8px;136  }137  .apply-btn {138    position: absolute;139    right: 30px;140    bottom: 120px;141    width: 520px;142    height: 120px;143    background: #e6672e;144    color: #ffffff;145    font-size: 52px;146    font-weight: 700;147    border-radius: 12px;148    display: flex;149    align-items: center;150    justify-content: center;151  }152 153  /* Gesture bar */154  .gesture-bar {155    position: absolute;156    bottom: 24px;157    left: 50%;158    transform: translateX(-50%);159    width: 650px;160    height: 18px;161    background: #232323;162    border-radius: 20px;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div>10:58</div>172    <div class="status-icons">173      <span class="dot"></span>174      <span class="dot"></span>175      <span class="dot"></span>176      <div class="wifi-icon">177        <svg viewBox="0 0 24 24">178          <path d="M2 8c6-6 14-6 20 0" stroke="#333" stroke-width="2" fill="none"/>179          <path d="M6 12c4-4 8-4 12 0" stroke="#333" stroke-width="2" fill="none"/>180          <circle cx="12" cy="16" r="2" fill="#333"/>181        </svg>182      </div>183      <div class="battery-icon">184        <svg viewBox="0 0 24 24">185          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>186          <rect x="20" y="10" width="2" height="4" fill="#333"/>187          <rect x="4" y="8" width="12" height="8" fill="#333"/>188        </svg>189      </div>190      <div class="lock-icon">191        <svg viewBox="0 0 24 24">192          <rect x="5" y="10" width="14" height="10" rx="2" fill="#333"/>193          <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#333" stroke-width="2" fill="none"/>194        </svg>195      </div>196    </div>197  </div>198 199  <!-- Top App Bar -->200  <div class="top-bar">201    <div class="back-btn">202      <svg viewBox="0 0 24 24">203        <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204      </svg>205    </div>206    <div class="title">Filters</div>207    <div class="clear-filters">Clear Filters</div>208  </div>209 210  <!-- Content -->211  <div class="content">212    <!-- Sidebar -->213    <div class="sidebar">214      <div class="side-item">Price</div>215      <div class="side-item">Plus (FAssured)</div>216      <div class="side-item">Deliver At217        <svg class="checkmark" viewBox="0 0 24 24">218          <path d="M20 6l-11 11-5-5" stroke="#1976d2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219        </svg>220      </div>221      <div class="side-item">Brand</div>222      <div class="side-item">Customer<br>Ratings</div>223      <div class="side-item">Offers</div>224      <div class="side-item">Discount</div>225      <div class="side-item">Features</div>226      <div class="side-item">Interface</div>227      <div class="side-item">GST Invoice<br>Available</div>228      <div class="side-item">Availability</div>229      <div class="side-item">Category230        <svg class="checkmark" viewBox="0 0 24 24">231          <path d="M20 6l-11 11-5-5" stroke="#1976d2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232        </svg>233      </div>234    </div>235 236    <!-- Main panel -->237    <div class="main-panel">238      <div class="breadcrumb">239        <svg viewBox="0 0 24 24" width="36" height="36">240          <path d="M15 18l-6-6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241        </svg>242        <span>Laptop Accessories</span>243      </div>244      <div class="link">Mouse</div>245    </div>246  </div>247 248  <!-- Bottom info and Apply button -->249  <div class="bottom-info">250    <div>8,985</div>251    <div class="sub">products found</div>252  </div>253  <div class="apply-btn">Apply</div>254 255  <!-- Gesture bar -->256  <div class="gesture-bar"></div>257 258</div>259</body>260</html>