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    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff;11  }12 13  /* Top gradient status bar */14  .statusbar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 120px;17    background: linear-gradient(180deg, #94d7cf 0%, #bfe3d9 100%);18    color: #1b3e40;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 32px;21    font-size: 36px; font-weight: 600;22  }23  .status-left { display: flex; align-items: center; gap: 24px; }24  .status-right { display: flex; align-items: center; gap: 28px; }25 26  .icon {27    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;28  }29  .icon svg { width: 40px; height: 40px; fill: #2c5b5e; }30 31  /* Header */32  .header {33    position: absolute; top: 120px; left: 0; right: 0;34    height: 170px; background: #ffffff;35    border-bottom: 1px solid #e5e5e5;36    display: flex; align-items: center; justify-content: space-between;37    padding: 0 36px;38  }39  .header .title { font-size: 64px; font-weight: 700; color: #222; }40  .header .close { font-size: 48px; color: #2b6777; }41 42  /* Main content area */43  .content {44    position: absolute; top: 290px; left: 0; right: 0;45    height: calc(2400px - 290px - 210px); /* subtract header+status and bottom area */46    display: flex;47  }48  .sidebar {49    width: 360px; background: #f1f4f5; height: 100%;50    border-right: 1px solid #e6e6e6;51    padding: 24px 24px 120px 24px;52    overflow: hidden;53  }54  .sidebar .item {55    font-size: 40px; color: #222;56    padding: 28px 20px; border-radius: 8px;57    margin-bottom: 12px;58  }59  .sidebar .item.selected {60    background: #5a5f63; color: #ffffff; font-weight: 700;61  }62 63  .main {64    width: 720px; padding: 24px 32px; overflow: hidden;65  }66  .section-title {67    font-size: 44px; font-weight: 700; color: #222; margin: 18px 0 22px 0;68  }69  .chips { display: flex; flex-wrap: wrap; gap: 18px; }70  .chip {71    font-size: 36px; color: #202223;72    background: #f5f5f5; border: 1px solid #e0e0e0;73    padding: 18px 28px; border-radius: 22px;74  }75  .subhead {76    font-size: 38px; color: #333; margin: 26px 0 16px 0; font-weight: 700;77  }78 79  /* Bottom button area */80  .bottom-area {81    position: absolute; bottom: 0; left: 0; right: 0;82    height: 210px; background: #ffffff;83    display: flex; align-items: center; justify-content: center;84    border-top: 1px solid #e4e7e8;85  }86  .cta {87    width: 820px; height: 120px; background: #1f6f8f;88    color: #ffffff; font-size: 42px; font-weight: 700;89    border-radius: 24px; display: flex; align-items: center; justify-content: center;90    box-shadow: 0 6px 12px rgba(31,111,143,0.3);91  }92  .handle {93    position: absolute; bottom: 20px; left: 50%;94    width: 480px; height: 12px; transform: translateX(-50%);95    background: #b9b9b9; border-radius: 6px;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Top status bar -->103  <div class="statusbar">104    <div class="status-left">105      <div>6:42</div>106      <div class="icon" title="Lock">107        <svg viewBox="0 0 24 24">108          <path d="M6 10h12v10H6z"></path>109          <path d="M8 10V7a4 4 0 018 0v3h-2V7a2 2 0 00-4 0v3H8z"></path>110        </svg>111      </div>112      <div class="icon" title="Ghost">113        <svg viewBox="0 0 24 24">114          <circle cx="12" cy="12" r="9"></circle>115        </svg>116      </div>117      <div class="icon" title="Square">118        <svg viewBox="0 0 24 24">119          <rect x="4" y="4" width="16" height="16"></rect>120        </svg>121      </div>122      <div class="icon" title="Dot">123        <svg viewBox="0 0 24 24">124          <circle cx="12" cy="12" r="3"></circle>125        </svg>126      </div>127    </div>128    <div class="status-right">129      <div class="icon" title="WiFi">130        <svg viewBox="0 0 24 24">131          <path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9z"></path>132          <path d="M6 13c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2z"></path>133          <circle cx="12" cy="18" r="2"></circle>134        </svg>135      </div>136      <div class="icon" title="Battery">137        <svg viewBox="0 0 24 24">138          <rect x="3" y="6" width="17" height="12" rx="2"></rect>139          <rect x="21" y="10" width="2" height="4"></rect>140        </svg>141      </div>142    </div>143  </div>144 145  <!-- Header -->146  <div class="header">147    <div class="title">Filters</div>148    <div class="close">Close</div>149  </div>150 151  <!-- Main content -->152  <div class="content">153    <!-- Left sidebar -->154    <div class="sidebar">155      <div class="item">Prime & Delivery</div>156      <div class="item">Categories</div>157      <div class="item">Brands</div>158      <div class="item">Colours</div>159      <div class="item">Sizes</div>160      <div class="item">Price and Deals</div>161      <div class="item">Customer Reviews</div>162      <div class="item">Sort by</div>163      <div class="item selected">Women's Shoes</div>164      <div class="item">Shoes Special<br>Features</div>165      <div class="item">Shoe Outer<br>Material</div>166      <div class="item">Shoes Closure Type</div>167      <div class="item">Sole Width</div>168      <div class="item">Shoes Lifestyle</div>169      <div class="item">Shoe Toe Style</div>170      <div class="item">Height Map</div>171      <div class="item">Embellishment</div>172    </div>173 174    <!-- Right main panel -->175    <div class="main">176      <div class="section-title">Shoes Fashion Brands</div>177      <div class="chips">178        <div class="chip">Top Brands</div>179        <div class="chip">Made for Amazon</div>180        <div class="chip">Premium Brands</div>181      </div>182 183      <div class="subhead">A - F</div>184      <div class="chips">185        <div class="chip">AJANTA</div>186        <div class="chip">Amazon Brand - Symbol</div>187        <div class="chip">BATA</div>188        <div class="chip">Bourge</div>189        <div class="chip">Catwalk</div>190        <div class="chip">Centrino</div>191        <div class="chip">Clarks</div>192        <div class="chip">commander shoes</div>193        <div class="chip">crocs</div>194        <div class="chip">DEEANNE LONDON</div>195        <div class="chip">Denill</div>196        <div class="chip">Elegant feet</div>197        <div class="chip">FASHIMO</div>198      </div>199    </div>200  </div>201 202  <!-- Bottom CTA -->203  <div class="bottom-area">204    <div class="cta">Show 10,000+ results</div>205    <div class="handle"></div>206  </div>207 208</div>209</body>210</html>