GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Style Filter Bottom Sheet</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:#f5f5f5;11    border-radius:0;12  }13 14  /* Top app bar */15  .top-bar {16    position:absolute; top:0; left:0; right:0;17    height:140px;18    background:#111;19    color:#fff;20    display:flex;21    align-items:center;22    padding:0 32px;23    z-index:5;24  }25  .top-bar .left {26    display:flex; align-items:center;27  }28  .top-bar .right {29    margin-left:auto; display:flex; align-items:center; gap:28px;30  }31  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; cursor:pointer; }32  .filter-badge {33    position:absolute; top:-6px; right:-6px;34    width:42px; height:42px; background:#111; color:#fff;35    border:3px solid #fff; border-radius:50%;36    display:flex; align-items:center; justify-content:center;37    font-weight:700; font-size:24px;38  }39 40  /* Content skeleton behind sheet */41  .content {42    position:absolute; top:140px; left:0; right:0; bottom:0;43    background:#e9e9e9;44  }45  .skeleton-header {46    height:90px; width:70%; margin:36px auto 20px auto;47    background:#d6d6d6; border:1px solid #c2c2c2;48  }49  .skeleton-subheader {50    height:90px; width:60%; margin:0 auto 24px auto;51    background:#d6d6d6; border:1px solid #c2c2c2;52  }53  .card-row {54    display:flex; gap:28px; padding:0 36px; margin-top:18px;55  }56  .img-card {57    flex:1;58    height:520px; background:#E0E0E0; border:1px solid #BDBDBD;59    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;60  }61  .puma-circle {62    position:absolute; left:50%; transform:translateX(-50%);63    bottom:640px;64    width:540px; height:540px; border-radius:50%;65    background:#dcdcdc; border:1px solid #c7c7c7;66    display:flex; align-items:center; justify-content:center;67    color:#333; font-weight:700;68  }69 70  /* Dim overlay when sheet open */71  .dim {72    position:absolute; top:140px; left:0; right:0; bottom:0;73    background:rgba(0,0,0,0.55);74    z-index:6;75  }76 77  /* Bottom sheet */78  .sheet {79    position:absolute; left:0; right:0; bottom:0;80    height:980px; background:#fff; border-top-left-radius:40px; border-top-right-radius:40px;81    z-index:7; box-shadow:0 -10px 30px rgba(0,0,0,0.3);82    padding-top:24px;83  }84  .drag-handle {85    width:200px; height:8px; background:#bfbfbf; border-radius:6px;86    margin:12px auto 18px;87  }88  .sheet-header {89    position:relative; text-align:center; padding:10px 0 24px 0;90  }91  .sheet-title {92    font-size:56px; font-weight:800; letter-spacing:2px; color:#111;93  }94  .sheet-header .back-small {95    position:absolute; left:36px; top:0; width:72px; height:72px; display:flex; align-items:center; justify-content:center;96  }97  .sheet-header .close-small {98    position:absolute; right:36px; top:0; width:72px; height:72px; display:flex; align-items:center; justify-content:center;99  }100 101  .option {102    display:flex; align-items:center; gap:28px;103    padding:30px 48px;104    font-size:42px; color:#111;105  }106  .checkbox {107    width:58px; height:58px; border:4px solid #111; border-radius:6px; position:relative;108  }109  .checkbox.checked::after {110    content:"";111    position:absolute; left:14px; top:8px;112    width:26px; height:46px; border-right:6px solid #111; border-bottom:6px solid #111;113    transform:rotate(45deg);114  }115  .count { color:#666; margin-left:12px; font-size:42px; }116 117  .clear-btn {118    margin:40px 48px 28px;119    height:120px; border:4px solid #111; border-radius:12px;120    display:flex; align-items:center; justify-content:center;121    font-weight:800; font-size:44px; color:#111; background:#fff;122  }123 124  .apply-bar {125    margin:0 48px; height:140px; background:#111; color:#fff; border-radius:12px;126    display:flex; align-items:center; justify-content:center;127  }128  .spinner {129    width:54px; height:54px; border:6px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%;130    animation:spin 1.2s linear infinite;131  }132  @keyframes spin { to { transform:rotate(360deg); } }133 134  .home-indicator {135    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);136    width:320px; height:12px; background:#cfcfcf; border-radius:8px; z-index:8;137  }138 139  /* Utility SVG styles */140  svg { fill:none; stroke:#fff; stroke-width:6; }141  .dark-stroke svg { stroke:#111; }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Top bar -->148  <div class="top-bar">149    <div class="left">150      <div class="icon-btn">151        <svg width="42" height="42" viewBox="0 0 24 24">152          <path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="3" fill="none" />153          <path d="M9 12 H22" stroke="#fff" stroke-width="3" />154        </svg>155      </div>156    </div>157    <div class="right">158      <div class="icon-btn" style="position:relative;">159        <svg width="44" height="44" viewBox="0 0 24 24">160          <path d="M4 6 H14" stroke="#fff" stroke-width="3"/>161          <circle cx="18" cy="6" r="2.5" stroke="#fff" stroke-width="3"/>162          <path d="M4 12 H10" stroke="#fff" stroke-width="3"/>163          <circle cx="14" cy="12" r="2.5" stroke="#fff" stroke-width="3"/>164          <path d="M4 18 H18" stroke="#fff" stroke-width="3"/>165          <circle cx="8" cy="18" r="2.5" stroke="#fff" stroke-width="3"/>166        </svg>167        <div class="filter-badge">1</div>168      </div>169      <div class="icon-btn">170        <svg width="44" height="44" viewBox="0 0 24 24">171          <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="3"/>172          <path d="M15 15 L21 21" stroke="#fff" stroke-width="3"/>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- Content behind sheet -->179  <div class="content">180    <div class="skeleton-header"></div>181    <div class="skeleton-subheader" style="width:84%;"></div>182 183    <div class="card-row">184      <div class="img-card">[IMG: Product Card]</div>185      <div class="img-card">[IMG: Product Card]</div>186    </div>187 188    <div class="card-row">189      <div class="img-card" style="height:440px;">[IMG: Product Card]</div>190      <div class="img-card" style="height:440px;">[IMG: Product Card]</div>191    </div>192 193    <div class="card-row" style="margin-top:30px;">194      <div class="img-card" style="height:300px;">[IMG: Product Card]</div>195      <div class="img-card" style="height:300px;">[IMG: Product Card]</div>196    </div>197 198    <div class="puma-circle">[IMG: Puma Logo]</div>199  </div>200 201  <!-- Dim overlay since sheet is open -->202  <div class="dim"></div>203 204  <!-- Bottom sheet -->205  <div class="sheet">206    <div class="drag-handle"></div>207    <div class="sheet-header">208      <div class="back-small dark-stroke">209        <svg width="48" height="48" viewBox="0 0 24 24">210          <path d="M14 4 L8 12 L14 20" stroke="#111" stroke-width="3"/>211          <path d="M8 12 H22" stroke="#111" stroke-width="3"/>212        </svg>213      </div>214      <div class="sheet-title">STYLE</div>215      <div class="close-small dark-stroke">216        <svg width="48" height="48" viewBox="0 0 24 24">217          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="3"/>218        </svg>219      </div>220    </div>221 222    <div class="option">223      <div class="checkbox"></div>224      <div>Lows <span class="count">(464)</span></div>225    </div>226 227    <div class="option">228      <div class="checkbox checked"></div>229      <div>Mids <span class="count">(34)</span></div>230    </div>231 232    <div class="option">233      <div class="checkbox"></div>234      <div>Sandals <span class="count">(44)</span></div>235    </div>236 237    <div class="clear-btn">CLEAR ALL</div>238 239    <div class="apply-bar">240      <div class="spinner"></div>241    </div>242  </div>243 244  <div class="home-indicator"></div>245</div>246</body>247</html>