GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Filter - Style</title>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:#ffffff;12    color:#111;13  }14 15  /* Top utility bar */16  .topbar {17    height:120px;18    padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20  }21  .left-icons, .right-icons { display:flex; align-items:center; gap:26px; }22  .icon-btn { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }23  .badge {24    position:absolute; top:-6px; right:-6px;25    background:#111; color:#fff; width:38px; height:38px; border-radius:50%;26    display:flex; align-items:center; justify-content:center;27    font-size:22px; font-weight:700;28  }29 30  /* Headline + chips row */31  .headline { padding:0 36px; margin-top:6px; display:flex; align-items:center; justify-content:space-between; }32  .headline .title { font-size:44px; font-weight:800; letter-spacing:1px; }33  .sort { font-size:36px; font-weight:700; display:flex; align-items:center; gap:10px; }34  .chips { padding:18px 36px 20px 36px; display:flex; gap:22px; flex-wrap:nowrap; overflow:hidden; }35  .chip {36    padding:16px 28px; border:2px solid #d9d9d9; border-radius:48px; font-size:34px; font-weight:700; color:#111;37    background:#fff;38  }39 40  /* Product grid */41  .grid { padding:14px 36px 0 36px; display:grid; grid-template-columns:1fr 1fr; grid-column-gap:36px; grid-row-gap:50px; }42  .card { }43  .media {44    position:relative; height:360px; border:1px solid #BDBDBD; background:#E0E0E0;45    display:flex; align-items:center; justify-content:center; color:#666; font-size:30px;46  }47  .tag-new {48    position:absolute; left:16px; top:16px;49    background:#111; color:#fff; padding:10px 16px; font-size:28px; font-weight:800; border-radius:6px;50  }51  .wish {52    position:absolute; right:16px; top:16px; font-size:44px; color:#111; opacity:0.8;53  }54  .muted { color:#666; font-size:30px; margin:18px 0 10px 0; }55  .product-title {56    font-size:38px; font-weight:800; line-height:1.2; letter-spacing:0.2px;57  }58 59  /* Dim overlay + Bottom Sheet */60  .dim {61    position:absolute; left:0; top:0; width:100%; height:100%;62    background:rgba(0,0,0,0.55);63  }64  .sheet {65    position:absolute; left:0; right:0; bottom:0;66    height:1180px; background:#fff; border-top-left-radius:24px; border-top-right-radius:24px;67    box-shadow:0 -8px 30px rgba(0,0,0,0.25);68  }69  .sheet-header {70    height:120px; display:flex; align-items:center; justify-content:center; position:relative;71    border-bottom:1px solid #eee;72  }73  .sheet-title { font-size:52px; font-weight:800; letter-spacing:1px; }74  .sheet-header .left, .sheet-header .right {75    position:absolute; top:0; height:100%; display:flex; align-items:center;76    padding:0 30px;77  }78  .sheet-header .left { left:0; }79  .sheet-header .right { right:0; }80 81  .options { padding:30px 40px; }82  .opt-row {83    display:flex; align-items:center; gap:26px; padding:26px 0;84    font-size:42px; font-weight:700;85  }86  .box {87    width:56px; height:56px; border:3px solid #111; border-radius:10px; display:flex; align-items:center; justify-content:center;88  }89  .box.checked { background:#111; }90  .box.checked svg { fill:#fff; }91  .box svg { width:34px; height:34px; fill:#111; }92 93  .btn-outline, .btn-solid {94    width:1000px; margin:24px auto; height:120px; border-radius:10px; font-size:44px; font-weight:800;95    display:flex; align-items:center; justify-content:center;96  }97  .btn-outline { border:3px solid #111; color:#111; background:#fff; }98  .btn-solid { background:#111; color:#fff; }99 100  /* Simple helpers for icons */101  .ico { width:44px; height:44px; }102  .search-ico path, .back-ico path, .x-ico path, .sort-ico path { stroke:#111; stroke-width:4; fill:none; }103  .filter-ico rect { fill:#111; }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Top bar with back, filter, search -->110  <div class="topbar">111    <div class="left-icons">112      <div class="icon-btn">113        <svg class="ico back-ico" viewBox="0 0 24 24">114          <path d="M15 4 L7 12 L15 20"/>115        </svg>116      </div>117    </div>118    <div class="right-icons">119      <div class="icon-btn" style="position:relative;">120        <svg class="ico filter-ico" viewBox="0 0 24 24">121          <rect x="3" y="6" width="12" height="3" rx="1"></rect>122          <rect x="9" y="11" width="12" height="3" rx="1"></rect>123        </svg>124        <div class="badge">1</div>125      </div>126      <div class="icon-btn">127        <svg class="ico search-ico" viewBox="0 0 24 24">128          <circle cx="10" cy="10" r="6"></circle>129          <path d="M15 15 L21 21"></path>130        </svg>131      </div>132    </div>133  </div>134 135  <!-- Headline and sort -->136  <div class="headline">137    <div class="title">34 PRODUCTS</div>138    <div class="sort">139      SORT140      <svg class="ico sort-ico" viewBox="0 0 24 24">141        <path d="M7 7 L12 2 L17 7"></path>142        <path d="M17 17 L12 22 L7 17"></path>143      </svg>144    </div>145  </div>146 147  <!-- Category chips -->148  <div class="chips">149    <div class="chip">ALL</div>150    <div class="chip">SOCCER</div>151    <div class="chip">BASKETBALL</div>152    <div class="chip">MOTORSPORT</div>153  </div>154 155  <!-- Product grid preview (behind the sheet) -->156  <div class="grid">157    <div class="card">158      <div class="media">159        <div class="tag-new">NEW</div>160        <div class="wish">♡</div>161        [IMG: White/Red Soccer Cleat]162      </div>163      <div class="muted">1 Color</div>164      <div class="product-title">FUTURE ULTIMATE FG/AG Men's Soccer Cleats</div>165    </div>166 167    <div class="card">168      <div class="media">169        <div class="tag-new">NEW</div>170        <div class="wish">♡</div>171        [IMG: PUMA x KOCHÉ Mid Plexus Sneaker]172      </div>173      <div class="muted">1 Color</div>174      <div class="product-title">PUMA x KOCHÉ Mid Plexus Men's Sneakers</div>175    </div>176  </div>177 178  <!-- Dim background for sheet -->179  <div class="dim"></div>180 181  <!-- Bottom sheet -->182  <div class="sheet">183    <div class="sheet-header">184      <div class="left">185        <svg class="ico back-ico" viewBox="0 0 24 24">186          <path d="M15 4 L7 12 L15 20"></path>187        </svg>188      </div>189      <div class="sheet-title">STYLE</div>190      <div class="right">191        <svg class="ico x-ico" viewBox="0 0 24 24">192          <path d="M4 4 L20 20 M20 4 L4 20"></path>193        </svg>194      </div>195    </div>196 197    <div class="options">198      <div class="opt-row">199        <div class="box"></div>200        <div>Lows (464)</div>201      </div>202      <div class="opt-row">203        <div class="box checked">204          <svg viewBox="0 0 24 24">205            <path d="M5 12 L10 17 L19 8" stroke="#fff" stroke-width="3" fill="none"></path>206          </svg>207        </div>208        <div>Mids (34)</div>209      </div>210      <div class="opt-row">211        <div class="box"></div>212        <div>Sandals (44)</div>213      </div>214    </div>215 216    <div class="btn-outline">CLEAR ALL</div>217    <div class="btn-solid">SHOW 34 PRODUCTS</div>218  </div>219 220</div>221</body>222</html>