GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shoes - Filter Style</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#F9F9F9; color:#111;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:70px; background:#000000;18    color:#fff; font-size:24px;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 30px;21  }22  .status-icons { display:flex; gap:24px; align-items:center; }23  .status-dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:.8; }24 25  /* Top header */26  .top-actions {27    position:absolute; top:90px; left:30px; right:30px;28    height:70px; display:flex; align-items:center; justify-content:space-between;29  }30  .icon-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:12px; }31  .icon-btn svg { width:34px; height:34px; }32  .search-group { display:flex; gap:24px; align-items:center; }33 34  /* Page title and meta */35  .page-title { position:absolute; top:170px; left:40px; font-size:72px; font-weight:800; letter-spacing:2px; }36  .products-count { position:absolute; top:270px; left:40px; font-size:32px; color:#444; font-weight:600; }37 38  /* Chips row and sort */39  .chip-row {40    position:absolute; top:330px; left:40px; right:40px;41    display:flex; align-items:center; gap:20px;42  }43  .chip {44    padding:20px 34px; border:1px solid #DADADA; border-radius:40px;45    font-size:32px; color:#333; background:#fff;46  }47  .chip.active { background:#111; color:#fff; border-color:#111; }48  .sort-row {49    position:absolute; top:330px; right:40px; font-size:34px; font-weight:700; color:#333; display:flex; align-items:center; gap:12px;50  }51  .sort-row svg { width:30px; height:30px; }52 53  /* Product grid */54  .grid {55    position:absolute; top:430px; left:40px; right:40px;56    display:grid; grid-template-columns:1fr 1fr; gap:40px;57  }58  .card {59    background:#fff; border:1px solid #E6E6E6; border-radius:20px;60    padding:24px; position:relative;61    box-shadow:0 2px 6px rgba(0,0,0,0.04);62  }63  .new-tag {64    position:absolute; top:24px; left:24px;65    padding:10px 18px; background:#111; color:#fff; font-size:28px; font-weight:800; border-radius:8px;66  }67  .fav-btn { position:absolute; top:24px; right:24px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; }68  .product-img {69    width:100%; height:350px; background:#E0E0E0; border:1px solid #BDBDBD;70    display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; border-radius:12px;71    margin-top:30px;72  }73  .color-note { margin-top:20px; font-size:32px; color:#555; }74  .title { margin-top:14px; font-size:38px; font-weight:800; line-height:1.2; }75  .price { margin-top:16px; font-size:38px; font-weight:800; }76 77  /* Overlay and bottom sheet */78  .scrim {79    position:absolute; left:0; top:0; width:100%; height:100%;80    background:rgba(0,0,0,0.40); z-index:5;81  }82  .bottom-sheet {83    position:absolute; left:0; bottom:0; width:100%; height:900px;84    background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;85    z-index:6; box-shadow:0 -8px 24px rgba(0,0,0,0.2);86    display:flex; flex-direction:column;87  }88  .sheet-handle {89    width:160px; height:10px; background:#CFCFCF; border-radius:6px;90    align-self:center; margin-top:16px;91  }92  .sheet-header {93    display:flex; align-items:center; justify-content:space-between;94    padding:26px 34px;95  }96  .sheet-title { font-size:56px; font-weight:800; letter-spacing:2px; }97  .close-btn svg { width:46px; height:46px; }98 99  .options { padding:20px 40px; display:flex; flex-direction:column; gap:36px; }100  .opt {101    display:flex; align-items:center; gap:26px; font-size:40px; color:#222;102  }103  .check {104    width:52px; height:52px; border:3px solid #222; border-radius:8px;105  }106 107  .sheet-footer {108    margin-top:auto; padding:30px 40px 40px;109  }110  .primary-btn {111    width:100%; padding:30px 0; font-size:42px; font-weight:800;112    background:#111; color:#fff; border-radius:12px; text-align:center;113    letter-spacing:2px;114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div>12:37</div>123    <div class="status-icons">124      <div class="status-dot"></div>125      <div class="status-dot"></div>126      <div class="status-dot"></div>127      <div class="status-dot"></div>128    </div>129  </div>130 131  <!-- Top actions -->132  <div class="top-actions">133    <div class="icon-btn">134      <!-- Back arrow -->135      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">136        <path d="M15 18l-6-6 6-6"/>137      </svg>138    </div>139    <div class="search-group">140      <!-- slider/filter icon -->141      <div class="icon-btn">142        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">143          <path d="M4 6h16M4 12h10M4 18h6"/>144        </svg>145      </div>146      <!-- search icon -->147      <div class="icon-btn">148        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">149          <circle cx="11" cy="11" r="7"/>150          <path d="M20 20l-4-4"/>151        </svg>152      </div>153    </div>154  </div>155 156  <!-- Title and count -->157  <div class="page-title">SHOES</div>158  <div class="products-count">542 PRODUCTS</div>159 160  <!-- Chips -->161  <div class="chip-row">162    <div class="chip active">ALL</div>163    <div class="chip">RUNNING</div>164    <div class="chip">MOTORSPORT</div>165    <div class="chip">BASKET</div>166  </div>167  <div class="sort-row">168    <div>SORT</div>169    <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">170      <path d="M6 9l6-6 6 6M6 15l6 6 6-6"/>171    </svg>172  </div>173 174  <!-- Product grid -->175  <div class="grid">176    <!-- Card 1 -->177    <div class="card">178      <div class="new-tag">NEW</div>179      <div class="fav-btn">180        <!-- Heart outline -->181        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">182          <path d="M12 21s-7-4.35-9-8.5C1.2 9.2 3.2 6 6.5 6c2 0 3.3 1.1 3.5 2 0.2-0.9 1.5-2 3.5-2 3.3 0 5.3 3.2 3.5 6.5-2 4.15-9 8.5-9 8.5z"/>183        </svg>184      </div>185      <div class="product-img">[IMG: White/GREEN Sneaker]</div>186      <div class="color-note">1 Color</div>187      <div class="title">PUMA x LAMELO BALL MB.02 Lo LaMel-O Me...</div>188      <div class="price">$125.00</div>189    </div>190 191    <!-- Card 2 -->192    <div class="card">193      <div class="new-tag">NEW</div>194      <div class="fav-btn">195        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">196          <path d="M12 21s-7-4.35-9-8.5C1.2 9.2 3.2 6 6.5 6c2 0 3.3 1.1 3.5 2 0.2-0.9 1.5-2 3.5-2 3.3 0 5.3 3.2 3.5 6.5-2 4.15-9 8.5-9 8.5z"/>197        </svg>198      </div>199      <div class="product-img">[IMG: Colorful RS-X THUNDERCATS Sneaker]</div>200      <div class="color-note">1 Color</div>201      <div class="title">PUMA x THUNDERCATS RS-X T3CH Thunderca...</div>202      <div class="price">$120.00</div>203    </div>204  </div>205 206  <!-- Dark scrim -->207  <div class="scrim"></div>208 209  <!-- Bottom sheet -->210  <div class="bottom-sheet">211    <div class="sheet-handle"></div>212    <div class="sheet-header">213      <div class="icon-btn">214        <!-- back chevron -->215        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">216          <path d="M15 18l-6-6 6-6"/>217        </svg>218      </div>219      <div class="sheet-title">STYLE</div>220      <div class="close-btn icon-btn">221        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">222          <path d="M6 6l12 12M18 6L6 18"/>223        </svg>224      </div>225    </div>226 227    <div class="options">228      <div class="opt"><div class="check"></div> <div>Lows (464)</div></div>229      <div class="opt"><div class="check"></div> <div>Mids (34)</div></div>230      <div class="opt"><div class="check"></div> <div>Sandals (44)</div></div>231    </div>232 233    <div class="sheet-footer">234      <div class="primary-btn">SHOW 542 PRODUCTS</div>235    </div>236  </div>237 238</div>239</body>240</html>