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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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: 80px;18    padding: 0 32px;19    display: flex; align-items: center; justify-content: space-between;20    color: #424242; font-size: 32px;21  }22  .status-icons { display: flex; align-items: center; gap: 22px; }23  .dot { width: 10px; height: 10px; background:#616161; border-radius:50%; display:inline-block; }24  .wifi, .signal, .battery {25    display: inline-block;26    position: relative;27  }28  .wifi {29    width: 34px; height: 24px;30    border: 3px solid #616161; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom:none;31  }32  .signal { width: 24px; height: 24px; border-left: 3px solid #616161; border-bottom: 3px solid #616161; transform: skewX(-20deg); }33  .battery { width: 40px; height: 20px; border: 3px solid #616161; border-radius: 4px; }34  .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:8px; background:#616161; border-radius:2px; }35 36  /* Header (App bar) */37  .app-bar {38    height: 140px;39    border-bottom: 1px solid #eeeeee;40    padding: 0 36px;41    display: flex; align-items: center; justify-content: space-between;42  }43  .app-left { display: flex; align-items: center; gap: 22px; }44  .title { font-size: 52px; color:#212121; }45  .clear { font-size: 36px; color:#212121; }46 47  /* Layout */48  .content {49    position: absolute; left: 0; right: 0;50    top: 220px; /* statusbar + header */51    bottom: 120px; /* space for system bar */52    display: flex;53  }54 55  /* Side navigation */56  .side-nav {57    width: 360px; background: #ECEFF1;58    padding: 24px 24px 0 24px;59    box-sizing: border-box;60  }61  .nav-item {62    font-size: 36px; color:#333; padding: 28px 18px;63    border-radius: 8px;64    margin-bottom: 14px;65  }66  .nav-item.light { background:#E7EBEE; }67  .nav-item.selected { background:#E7EBEE; position: relative; }68  .nav-item.selected .tick {69    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);70  }71  .nav-link { font-size: 36px; color:#1e6dfb; padding: 28px 18px; margin-bottom: 14px; }72  .nav-block { background:#E7EBEE; padding: 36px 18px; border-radius: 8px; margin-top: 10px; }73 74  /* Right main area */75  .main {76    flex: 1; padding: 18px 48px; box-sizing: border-box;77  }78  .section-title {79    color: #9E9E9E; font-size: 34px; margin-top: 10px; margin-bottom: 30px;80  }81  .check-row {82    display: flex; align-items: center; gap: 26px;83    margin-bottom: 44px;84  }85  .checkbox {86    width: 50px; height: 50px; border: 3px solid #000; border-radius: 8px;87  }88  .label { font-size: 42px; color:#212121; }89 90  /* View more link */91  .view-more { color:#1e6dfb; font-size: 40px; font-weight: 600; margin-top: 8px; }92 93  /* Bottom info + Apply button */94  .bottom-info {95    position: absolute; left: 36px; bottom: 220px;96    color:#757575;97  }98  .bottom-info .count { font-size: 48px; font-weight: 700; color:#212121; }99  .bottom-info .sub { font-size: 30px; color:#9E9E9E; margin-top: 6px; }100 101  .apply-btn {102    position: absolute; right: 60px; bottom: 180px;103    width: 360px; height: 110px; background: #ff6a00; color:#fff;104    border-radius: 12px; display: flex; align-items: center; justify-content: center;105    font-size: 40px; font-weight: 600;106    box-shadow: 0 2px 0 rgba(0,0,0,0.1);107  }108 109  /* System gesture bar */110  .system-bar {111    position: absolute; left:0; right:0; bottom:0; height: 120px; background:#000;112  }113  .pill {114    position:absolute; left:50%; transform:translateX(-50%);115    bottom: 36px; width: 300px; height: 10px; background:#e0e0e0; border-radius: 8px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="statusbar">124    <div>7:01</div>125    <div class="status-icons">126      <span class="dot"></span>127      <span class="dot"></span>128      <span class="dot"></span>129      <span class="wifi"></span>130      <span class="signal"></span>131      <span class="battery"></span>132    </div>133  </div>134 135  <!-- App bar -->136  <div class="app-bar">137    <div class="app-left">138      <svg width="44" height="44" viewBox="0 0 24 24">139        <path d="M15 18L9 12l6-6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140      </svg>141      <div class="title">Filters</div>142    </div>143    <div class="clear">Clear Filters</div>144  </div>145 146  <!-- Main content -->147  <div class="content">148    <!-- Left navigation -->149    <div class="side-nav">150      <div class="nav-item light">Gender</div>151      <div class="nav-item light">Plus (FAssured)</div>152      <div class="nav-item selected">Deliver At153        <svg class="tick" width="28" height="28" viewBox="0 0 24 24">154          <path d="M20 6L9 17l-5-5" stroke="#1e6dfb" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155        </svg>156      </div>157      <div class="nav-item light">Discount</div>158      <div class="nav-item light">Brand</div>159      <div class="nav-item light">Size - UK/India</div>160      <div class="nav-item light">Customer Ratings</div>161      <div class="nav-item light">Price</div>162      <div class="nav-item light">Occasion</div>163      <div class="nav-item light">Color</div>164      <div class="nav-item light">Offers</div>165      <div class="nav-link">Theme</div>166      <div class="nav-block">Outer Material</div>167    </div>168 169    <!-- Right content -->170    <div class="main">171      <div class="section-title">Popular Filters</div>172 173      <div class="check-row"><div class="checkbox"></div><div class="label">Slip-On</div></div>174      <div class="check-row"><div class="checkbox"></div><div class="label">Lace-Ups</div></div>175      <div class="check-row"><div class="checkbox"></div><div class="label">Summer Brights</div></div>176      <div class="check-row"><div class="checkbox"></div><div class="label">Velcro Fastening</div></div>177      <div class="check-row"><div class="checkbox"></div><div class="label">Chunky Soles</div></div>178 179      <div class="section-title" style="margin-top: 40px;">Others</div>180 181      <div class="check-row"><div class="checkbox"></div><div class="label">Adjustable</div></div>182      <div class="check-row"><div class="checkbox"></div><div class="label">Barbie Crush</div></div>183      <div class="check-row"><div class="checkbox"></div><div class="label">Colourblock</div></div>184      <div class="check-row"><div class="checkbox"></div><div class="label">Colourblocked</div></div>185      <div class="check-row"><div class="checkbox"></div><div class="label">Logo Mania</div></div>186 187      <div class="view-more">View More</div>188    </div>189  </div>190 191  <!-- Bottom info and Apply button -->192  <div class="bottom-info">193    <div class="count">522</div>194    <div class="sub">products found</div>195  </div>196 197  <div class="apply-btn">Apply</div>198 199  <!-- System gesture bar -->200  <div class="system-bar">201    <div class="pill"></div>202  </div>203</div>204</body>205</html>