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 - Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #f4f6f7;13  }14 15  /* Header gradient */16  .header {17    height: 250px;18    background: linear-gradient(90deg, #82dce2, #86d89f);19    position: relative;20    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;21  }22  .status-bar {23    height: 56px;24    display: flex; align-items: center;25    padding: 0 28px; color: #123; font-weight: 600; font-size: 30px;26  }27  .status-right { margin-left: auto; display: flex; gap: 16px; align-items: center; }28  .dot { width: 10px; height: 10px; background: #223; border-radius: 50%; opacity: .6; }29 30  .top-row {31    display: flex; align-items: center;32    padding: 20px 24px 12px;33    gap: 18px;34  }35  .icon-btn {36    width: 72px; height: 72px; border-radius: 36px;37    background: rgba(255,255,255,0.2);38    display: flex; align-items: center; justify-content: center;39  }40  .search-bar {41    flex: 1;42    background: #fff; height: 96px; border-radius: 24px;43    box-shadow: 0 4px 10px rgba(0,0,0,0.12);44    display: flex; align-items: center; padding: 0 28px; gap: 18px;45  }46  .search-text { color: #333; font-size: 34px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }47  .chip-strip {48    height: 94px; background: #e9ecef;49    display: flex; align-items: center; padding: 0 24px; gap: 16px;50  }51  .chip { background: #dfe3e7; color: #222; padding: 18px 28px; border-radius: 22px; font-size: 30px; }52  .filters-link { margin-left: auto; color: #11606c; font-weight: 600; }53 54  /* Content card */55  .content {56    position: relative;57    background: #fff;58    border-radius: 24px 24px 0 0;59    margin-top: 0;60    height: 1780px;61    box-shadow: 0 -2px 0 rgba(0,0,0,0.04);62  }63  .content-head {64    display: flex; align-items: center;65    padding: 28px 28px 16px 28px;66    border-bottom: 1px solid #eef1f3;67  }68  .content-head h2 { margin: 0; font-size: 44px; font-weight: 700; color: #222; }69  .content-head .close { margin-left: auto; color: #3a6a76; font-size: 34px; font-weight: 600; }70 71  .filters-wrap {72    display: flex;73    height: calc(100% - 90px);74  }75  .sidebar {76    width: 300px; background: #f3f8f9; border-right: 1px solid #e7ecef;77    padding-top: 18px;78  }79  .side-item {80    padding: 28px 24px; font-size: 32px; color: #424b55;81    border-bottom: 1px solid #eff3f5;82  }83  .side-item.active {84    background: #eef7f8;85    border-left: 6px solid #0b7d89;86    padding-left: 18px;87    color: #0b3b44; font-weight: 700;88  }89 90  .detail {91    flex: 1; padding: 28px 34px 34px 34px; overflow: hidden;92  }93  .detail h3 { margin: 8px 0 12px; font-size: 40px; color: #111; }94  .detail .sub { color: #666; font-size: 30px; margin: 14px 0; }95  .tag-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }96  .tag {97    background: #efefef; color: #222; padding: 18px 26px; border-radius: 18px;98    font-size: 32px; border: 1px solid #e1e1e1;99  }100  .tag.long { padding: 18px 30px; }101 102  /* Floating result button */103  .cta {104    position: absolute; right: 40px; bottom: 150px;105    background: #0e7785; color: #fff; font-weight: 700;106    padding: 28px 40px; border-radius: 22px; font-size: 36px;107    box-shadow: 0 6px 14px rgba(14,119,133,0.35);108  }109 110  /* Bottom handle */111  .handle {112    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);113    width: 300px; height: 10px; background: #bbb; border-radius: 6px;114  }115 116  /* Tiny toggle mock for Prime */117  .toggle {118    width: 92px; height: 48px; background: #d3d7db; border-radius: 24px; position: relative; display: inline-block; vertical-align: middle; margin-right: 8px;119  }120  .toggle::after {121    content: ""; position: absolute; width: 42px; height: 42px; background: #fff; border-radius: 50%; top: 3px; left: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);122  }123</style>124</head>125<body>126<div id="render-target">127 128  <div class="header">129    <div class="status-bar">130      <div>2:19</div>131      <div class="status-right">132        <div class="dot"></div>133        <div class="dot"></div>134        <div class="dot"></div>135        <div style="width:18px;height:18px;border:2px solid #233;border-radius:3px"></div>136        <div style="width:14px;height:26px;border:2px solid #233;border-radius:3px"></div>137      </div>138    </div>139 140    <div class="top-row">141      <div class="icon-btn" title="Back">142        <svg width="34" height="34" viewBox="0 0 24 24" fill="#083b43"><path d="M14.5 4l-8 8 8 8 1.5-1.5L9 12l7-6.5z"/></svg>143      </div>144      <div class="search-bar">145        <svg width="40" height="40" viewBox="0 0 24 24" fill="#6b7b85"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 105 15.5 6.5 6.5 0 0014.23 14l.27.28v.79L20 20.5 21.5 19l-6-5zM6.5 11A4.5 4.5 0 1111 6.5 4.5 4.5 0 016.5 11z"/></svg>146        <div class="search-text">women's running shoes campus</div>147        <div class="icon-btn" style="background: #f2f6f6; width:72px;height:72px;">148          <svg width="34" height="34" viewBox="0 0 24 24" fill="#0a5b66">149            <path d="M5 5h5v2H7v3H5V5zm9 0h5v5h-2V7h-3V5zM5 14h2v3h3v2H5v-5zm12 0h2v5h-5v-2h3v-3z"/>150          </svg>151        </div>152      </div>153    </div>154 155    <div class="chip-strip">156      <span class="chip" style="display:flex;align-items:center;gap:10px;">157        <span class="toggle"></span>158        prime159      </span>160      <span class="chip">Adidas</span>161      <span class="filters-link">Filters ⌄</span>162    </div>163  </div>164 165  <div class="content">166    <div class="content-head">167      <h2>Filters</h2>168      <div class="close">Close</div>169    </div>170 171    <div class="filters-wrap">172      <div class="sidebar">173        <div class="side-item">Prime & Delivery</div>174        <div class="side-item">Categories</div>175        <div class="side-item active">Brands</div>176        <div class="side-item">Colours</div>177        <div class="side-item">Sizes</div>178        <div class="side-item">Price and Deals</div>179        <div class="side-item">Customer Reviews</div>180        <div class="side-item">Sort by</div>181        <div class="side-item">Seasons</div>182        <div class="side-item">Shoes Special Features</div>183        <div class="side-item">Shoe Outer Material</div>184        <div class="side-item">Shoe Closure</div>185      </div>186 187      <div class="detail">188        <h3>Brands</h3>189 190        <div class="sub">Shoes Fashion Brands</div>191        <div class="tag-row">192          <div class="tag">Top Brands</div>193          <div class="tag">Made for Amazon</div>194        </div>195 196        <div class="sub" style="color:#222;font-weight:700;">Brand</div>197        <div class="tag-row">198          <div class="tag">Campus</div>199          <div class="tag">ASIAN</div>200          <div class="tag">Adidas</div>201          <div class="tag">Sparx</div>202        </div>203        <div class="tag-row">204          <div class="tag">Bourge</div>205          <div class="tag">Nike</div>206        </div>207        <div class="tag-row">208          <div class="tag long">DOCTOR EXTRA SOFT</div>209          <div class="tag">Flavia</div>210        </div>211 212        <!-- whitespace to simulate scrollable empty area -->213        <div style="height: 900px;"></div>214      </div>215    </div>216  </div>217 218  <div class="cta">Show 675 results</div>219 220  <div class="handle"></div>221</div>222</body>223</html>