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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .statusbar {17    height: 90px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 32px;20    color: #4b4b4b; font-size: 34px;21  }22  .status-icons { display: flex; align-items: center; gap: 18px; }23  .dot { width: 10px; height: 10px; background: #808080; border-radius: 50%; display: inline-block; }24  .icon-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #808080; display: inline-block; }25 26  /* App bar */27  .appbar {28    height: 150px; border-bottom: 1px solid #e6e6e6;29    display: flex; align-items: center;30    padding: 0 24px;31  }32  .appbar-left { display: flex; align-items: center; gap: 24px; }33  .app-title { font-size: 56px; color: #222; font-weight: 600; }34  .clear-link { margin-left: auto; font-size: 42px; color: #222; }35 36  .arrow {37    width: 60px; height: 60px;38  }39  .arrow svg { width: 100%; height: 100%; }40  .arrow path { stroke: #222; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }41 42  /* Main content */43  .content {44    position: absolute; left: 0; right: 0;45    top: 240px; /* statusbar + appbar */46    bottom: 260px; /* footer + navbar space */47    display: flex;48  }49 50  /* Sidebar */51  .sidebar {52    width: 360px; background: #eceff1;53    padding-top: 16px;54  }55  .side-item {56    padding: 38px 30px;57    font-size: 40px; color: #222;58    border-bottom: 1px solid #e2e5e7;59    position: relative;60  }61  .side-item .tick {62    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);63    width: 36px; height: 36px; border-radius: 50%;64    border: 3px solid #3f6fd1;65  }66  .side-item .tick::after {67    content: ""; position: absolute; left: 8px; top: 6px;68    width: 14px; height: 24px; border-right: 4px solid #3f6fd1; border-bottom: 4px solid #3f6fd1;69    transform: rotate(45deg);70  }71  .side-link { color: #1a73e8; font-weight: 600; }72 73  /* Right pane */74  .pane {75    flex: 1; padding: 26px 40px;76  }77  .section-title {78    font-size: 36px; color: #8d8d8d; margin: 12px 0 28px;79  }80  .checkbox-row {81    display: flex; align-items: center; gap: 26px;82    padding: 26px 6px;83  }84  .checkbox {85    width: 62px; height: 62px; border-radius: 10px;86    border: 6px solid #111; box-sizing: border-box;87  }88  .checkbox.selected {89    border: none; background: #3f6fd1; position: relative;90  }91  .checkbox.selected::after {92    content: ""; position: absolute; left: 18px; top: 10px;93    width: 18px; height: 32px;94    border-right: 6px solid #fff; border-bottom: 6px solid #fff;95    transform: rotate(45deg);96  }97  .row-label { font-size: 44px; color: #222; }98 99  .others-title { font-size: 36px; color: #9c9c9c; margin-top: 40px; margin-bottom: 10px; }100  .view-more { color: #1a73e8; font-size: 44px; font-weight: 700; margin-top: 10px; }101 102  /* Footer */103  .footer {104    position: absolute; left: 0; right: 0; bottom: 130px;105    height: 180px; display: flex; align-items: center;106    padding: 0 36px;107  }108  .products-count {109    flex: 1;110  }111  .count-number { font-size: 54px; color: #222; font-weight: 700; }112  .count-sub { font-size: 34px; color: #9b9b9b; margin-top: 6px; }113  .apply-btn {114    width: 420px; height: 120px; background: #ff6a00;115    color: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center;116    font-size: 46px; font-weight: 700;117    box-shadow: 0 4px 0 rgba(0,0,0,0.12);118  }119 120  /* Bottom navigation bar */121  .navbar {122    position: absolute; left: 0; right: 0; bottom: 0;123    height: 130px; background: #000;124    display: flex; align-items: center; justify-content: center;125  }126  .home-indicator {127    width: 360px; height: 12px; background: #d9d9d9; border-radius: 6px;128  }129</style>130</head>131<body>132<div id="render-target">133  <!-- Status bar -->134  <div class="statusbar">135    <div>7:01</div>136    <div class="status-icons">137      <span class="icon-circle"></span>138      <span class="icon-circle"></span>139      <span class="icon-circle"></span>140      <span class="icon-circle"></span>141      <span class="dot"></span>142      <span class="icon-circle"></span>143      <span class="icon-circle"></span>144      <span class="icon-circle"></span>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="appbar">150    <div class="appbar-left">151      <div class="arrow">152        <svg viewBox="0 0 24 24">153          <path d="M15 5 L7 12 L15 19"></path>154        </svg>155      </div>156      <div class="app-title">Filters</div>157    </div>158    <div class="clear-link">Clear Filters</div>159  </div>160 161  <!-- Main content -->162  <div class="content">163    <!-- Sidebar -->164    <div class="sidebar">165      <div class="side-item">Gender</div>166      <div class="side-item">Plus (FAssured)</div>167      <div class="side-item">Deliver At <span class="tick"></span></div>168      <div class="side-item">Discount</div>169      <div class="side-item">Brand</div>170      <div class="side-item">Size - UK/India</div>171      <div class="side-item">Customer Ratings</div>172      <div class="side-item">Price</div>173      <div class="side-item">Occasion</div>174      <div class="side-item">Color</div>175      <div class="side-item">Offers</div>176      <div class="side-item"><span class="side-link">Theme</span></div>177      <div class="side-item">Outer Material</div>178    </div>179 180    <!-- Right pane -->181    <div class="pane">182      <div class="section-title">Popular Filters</div>183 184      <div class="checkbox-row">185        <div class="checkbox"></div>186        <div class="row-label">Slip-On</div>187      </div>188      <div class="checkbox-row">189        <div class="checkbox"></div>190        <div class="row-label">Lace-Ups</div>191      </div>192      <div class="checkbox-row">193        <div class="checkbox"></div>194        <div class="row-label">Summer Brights</div>195      </div>196      <div class="checkbox-row">197        <div class="checkbox"></div>198        <div class="row-label">Velcro Fastening</div>199      </div>200      <div class="checkbox-row">201        <div class="checkbox selected"></div>202        <div class="row-label">Chunky Soles</div>203      </div>204 205      <div class="others-title">Others</div>206 207      <div class="checkbox-row">208        <div class="checkbox"></div>209        <div class="row-label">Adjustable</div>210      </div>211      <div class="checkbox-row">212        <div class="checkbox"></div>213        <div class="row-label">Barbie Crush</div>214      </div>215      <div class="checkbox-row">216        <div class="checkbox"></div>217        <div class="row-label">Colourblock</div>218      </div>219      <div class="checkbox-row">220        <div class="checkbox"></div>221        <div class="row-label">Colourblocked</div>222      </div>223      <div class="checkbox-row">224        <div class="checkbox"></div>225        <div class="row-label">Logo Mania</div>226      </div>227 228      <div class="view-more">View More</div>229    </div>230  </div>231 232  <!-- Footer -->233  <div class="footer">234    <div class="products-count">235      <div class="count-number">522</div>236      <div class="count-sub">products found</div>237    </div>238    <div class="apply-btn">Apply</div>239  </div>240 241  <!-- Bottom navigation bar -->242  <div class="navbar">243    <div class="home-indicator"></div>244  </div>245</div>246</body>247</html>