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>Filters Screen</title>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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #767676;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-weight: 600;27  }28  .status-left { font-size: 44px; }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 24px;34    font-size: 34px;35    opacity: 0.95;36  }37  .sb-icon { width: 34px; height: 34px; display: inline-block; }38  .sb-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.75; }39 40  /* Header */41  .header {42    height: 150px;43    background: #161616;44    display: flex;45    align-items: center;46    padding: 0 30px;47    letter-spacing: 3px;48  }49  .back-btn {50    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;51    margin-right: 16px;52  }53  .header-title {54    font-size: 56px;55    font-weight: 700;56    color: #eaeaea;57  }58 59  /* Main area */60  .content {61    display: flex;62    height: 1910px; /* 2400 - status(120) - header(150) - bottom bar(220) */63  }64 65  /* Left panel */66  .left-panel {67    width: 330px;68    background: #202020;69    padding-top: 24px;70    padding-left: 24px;71    padding-right: 24px;72  }73  .left-item {74    color: #bdbdbd;75    font-size: 40px;76    font-weight: 650;77    padding: 26px 6px;78  }79  .left-item.active {80    padding: 10px 6px;81  }82  .active-pill {83    background: #2e3a12;84    color: #e8f5c8;85    border-radius: 36px;86    padding: 22px 26px;87    display: inline-block;88    width: 100%;89  }90 91  /* Right list */92  .right-panel {93    flex: 1;94    background: #141414;95    padding: 24px 28px;96  }97  .brand-list {98    margin-top: 12px;99  }100  .brand-row {101    display: flex;102    align-items: center;103    padding: 30px 24px;104    border-radius: 12px;105    border-bottom: 1px solid #222;106    background: #151515;107    margin-bottom: 16px;108  }109  .checkbox {110    width: 60px; height: 60px;111    background: #f4ffd8;112    border: 2px solid #cfe6a2;113    border-radius: 10px;114    margin-right: 26px;115    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.4);116  }117  .brand-name {118    font-size: 42px;119    color: #cfcfcf;120    flex: 1;121  }122  .brand-count {123    font-size: 36px;124    color: #8f8f8f;125    margin-left: 16px;126  }127 128  /* Bottom bar */129  .bottom-bar {130    position: absolute;131    left: 0; right: 0; bottom: 0;132    height: 220px;133    background: #1b1b1b;134    display: flex;135    align-items: center;136    padding: 0 40px;137  }138  .reset {139    color: #cde7e7;140    font-size: 46px;141    font-weight: 600;142  }143  .apply-btn {144    margin-left: auto;145    background: #777;146    color: #fff;147    font-size: 46px;148    font-weight: 700;149    width: 420px;150    height: 110px;151    border-radius: 24px;152    display: flex;153    align-items: center;154    justify-content: center;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">10:49</div>164    <div class="status-right">165      <span class="sb-icon">166        <!-- small circle icon -->167        <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/></svg>168      </span>169      <span class="sb-icon">170        <!-- minimal square icon -->171        <svg viewBox="0 0 24 24" width="34" height="34"><rect x="5" y="5" width="14" height="14" fill="none" stroke="#fff" stroke-width="2"/></svg>172      </span>173      <span class="sb-icon">174        <!-- LR badge -->175        <svg viewBox="0 0 36 24" width="36" height="24">176          <rect x="1" y="1" width="34" height="22" rx="4" fill="none" stroke="#fff" stroke-width="2"/>177          <text x="7" y="16" fill="#fff" font-size="12" font-family="sans-serif">LR</text>178        </svg>179      </span>180      <span class="sb-dot"></span>181      <span class="sb-icon">182        <!-- Do Not Disturb symbol -->183        <svg viewBox="0 0 24 24" width="34" height="34">184          <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>185          <line x1="6" y1="12" x2="18" y2="12" stroke="#fff" stroke-width="2"/>186        </svg>187      </span>188      <span class="sb-icon">189        <!-- Wifi -->190        <svg viewBox="0 0 24 24" width="34" height="34">191          <path d="M2 9c5-4 15-4 20 0M6 13c3-3 9-3 12 0M10 17c2-2 4-2 6 0" fill="none" stroke="#fff" stroke-width="2" />192          <circle cx="12" cy="20" r="1.5" fill="#fff"/>193        </svg>194      </span>195      <span style="display:inline-flex; align-items:center; gap:8px;">196        <svg viewBox="0 0 28 14" width="42" height="24">197          <rect x="1" y="2" width="22" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>198          <rect x="3" y="4" width="18" height="6" rx="1" fill="#fff"/>199          <rect x="24" y="5" width="3" height="4" fill="#fff"/>200        </svg>201        <span style="font-size:34px;">95%</span>202      </span>203    </div>204  </div>205 206  <!-- Header -->207  <div class="header">208    <div class="back-btn">209      <svg viewBox="0 0 24 24" width="64" height="64">210        <path d="M15 5l-7 7 7 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211      </svg>212    </div>213    <div class="header-title">FILTERS</div>214  </div>215 216  <!-- Main Content -->217  <div class="content">218    <!-- Left Navigation -->219    <div class="left-panel">220      <div class="left-item">Categories</div>221      <div class="left-item">Discount</div>222      <div class="left-item">Offers</div>223      <div class="left-item active"><span class="active-pill">Brand</span></div>224      <div class="left-item">Color</div>225      <div class="left-item">Size</div>226      <div class="left-item">Toe Shape</div>227      <div class="left-item">Sport Type</div>228      <div class="left-item">Closure</div>229      <div class="left-item">Material</div>230      <div class="left-item">Prints &amp; Pattern</div>231      <div class="left-item">No. Of Pcs</div>232      <div class="left-item">Essential</div>233      <div class="left-item">Lowest Priced</div>234      <div class="left-item">Occasion</div>235      <div class="left-item">Exclusive</div>236    </div>237 238    <!-- Right Panel: Brand List -->239    <div class="right-panel">240      <div class="brand-list">241        <div class="brand-row">242          <div class="checkbox"><