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>Size Filter Drawer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f4f4f4;15  }16 17  /* Simulated underlying product list */18  .catalog {19    position: absolute;20    inset: 0;21    padding: 140px 36px 36px 36px;22    box-sizing: border-box;23  }24  .catalog-header {25    height: 96px;26    border-radius: 8px;27    background: #ffffff;28    display: flex;29    align-items: center;30    padding: 0 24px;31    box-shadow: 0 1px 0 rgba(0,0,0,0.08);32    font-weight: 700;33    letter-spacing: 1px;34    color: #2c2c2c;35  }36  .card {37    margin-top: 28px;38    background: #fff;39    border-radius: 10px;40    overflow: hidden;41    box-shadow: 0 2px 6px rgba(0,0,0,0.06);42  }43  .card .img {44    height: 520px;45    background: #E0E0E0;46    border: 1px solid #BDBDBD;47    display: flex; align-items: center; justify-content: center;48    color: #757575; font-size: 28px;49  }50  .card .meta {51    padding: 24px;52  }53  .price { font-size: 44px; font-weight: 700; letter-spacing: 0.5px; }54  .desc { margin-top: 10px; color: #777; font-size: 28px; line-height: 1.3; }55  .pill {56    margin-top: 18px;57    display: inline-block;58    padding: 8px 18px;59    background: #222;60    color: #fff;61    border-radius: 4px;62    font-size: 22px;63    letter-spacing: 1px;64  }65 66  /* Dark overlay behind the sheet */67  .scrim {68    position: absolute;69    inset: 0;70    background: rgba(0,0,0,0.35);71  }72 73  /* Right slide-over filter sheet */74  .sheet {75    position: absolute;76    top: 0;77    right: 0;78    width: 760px;79    height: 2400px;80    background: #ffffff;81    box-shadow: -12px 0 24px rgba(0,0,0,0.2);82    border-top-left-radius: 12px;83    border-bottom-left-radius: 12px;84    display: flex;85    flex-direction: column;86  }87  .status-spacer { height: 92px; } /* simulating Android status bar spacing */88 89  .sheet-header {90    height: 120px;91    display: flex;92    align-items: center;93    padding: 0 28px;94    border-bottom: 1px solid #eee;95  }96  .back-icon {97    width: 56px; height: 56px;98    display: flex; align-items: center; justify-content: center;99    margin-right: 16px;100  }101  .title {102    font-size: 40px;103    font-weight: 700;104    letter-spacing: 1px;105    color: #333;106  }107  .spacer { flex: 1; }108  .clear-btn {109    background: #efefef;110    color: #444;111    border-radius: 10px;112    padding: 20px 30px;113    font-size: 30px;114    font-weight: 600;115    letter-spacing: 1px;116  }117 118  .list {119    position: relative;120    flex: 1;121    overflow: hidden;122  }123  .items {124    position: absolute;125    inset: 0;126    overflow-y: auto;127    padding-bottom: 260px; /* space for sticky footer */128  }129 130  .row {131    display: flex;132    align-items: center;133    padding: 44px 32px;134    border-bottom: 1px solid #eee;135  }136  .check-col {137    width: 72px;138    display: flex; align-items: center; justify-content: center;139  }140  .label {141    font-size: 36px;142    color: #2d2d2d;143    letter-spacing: 0.5px;144  }145  .muted {146    color: #9E9E9E;147    margin-left: 6px;148  }149  .selected .label { font-weight: 700; }150  .selected .check-col svg { opacity: 1; }151  .check-col svg { width: 32px; height: 32px; opacity: 0; }152 153  .footer {154    position: absolute;155    left: 0; right: 0; bottom: 0;156    background: #efefef;157    height: 220px;158    display: flex; align-items: center; justify-content: center;159    border-top: 1px solid #e0e0e0;160  }161  .cta {162    width: 680px;163    background: #1f1f1f;164    color: #fff;165    text-align: center;166    padding: 32px 20px;167    font-size: 36px;168    font-weight: 800;169    letter-spacing: 2px;170    border-radius: 8px;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Underlying product list page -->178  <div class="catalog">179    <div class="catalog-header">RECOMMENDED FOR YOU</div>180 181    <div class="card">182      <div class="img">[IMG: Lifestyle sneaker product]</div>183      <div class="meta">184        <div class="price">$134.00</div>185        <div class="desc">New Balance sneakers in gray stone - Exclusive</div>186        <span class="pill">SELLING FAST</span>187      </div>188    </div>189 190    <div class="card">191      <div class="img">[IMG: Runner shoe product]</div>192      <div class="meta">193        <div class="price">$134.00</div>194        <div class="desc">New Balance runners in silver - Cushion sole</div>195        <span class="pill">SELLING FAST</span>196      </div>197    </div>198  </div>199 200  <!-- Dim background -->201  <div class="scrim"></div>202 203  <!-- Right slide-over sheet -->204  <div class="sheet">205    <div class="status-spacer"></div>206    <div class="sheet-header">207      <div class="back-icon">208        <!-- back arrow -->209        <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">210          <path d="M15 18l-6-6 6-6"/>211        </svg>212      </div>213      <div class="title">SIZE</div>214      <div class="spacer"></div>215      <div class="clear-btn">CLEAR</div>216    </div>217 218    <div class="list">219      <div class="items">220        <div class="row">221          <div class="check-col"></div>222          <div class="label">US 13.5 <span class="muted">(4)</span></div>223        </div>224        <div class="row">225          <div class="check-col"></div>226          <div class="label">US 14 <span class="muted">(3)</span></div>227        </div>228        <div class="row">229          <div class="check-col"></div>230          <div class="label">UK 8.5 <span class="muted">(1)</span></div>231        </div>232        <div class="row selected">233          <div class="check-col">234            <!-- blue check mark -->235            <svg viewBox="0 0 24 24">236              <path d="M4 12l4 4 12-12" stroke="#1e88e5" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237            </svg>238          </div>239          <div class="label">UK 9 <span class="muted">(1)</span></div>240        </div>241        <div class="row">242          <div class="check-col"></div>243          <div class="label">UK 9.5 <span class="muted">(1)</span></div>244        </div>245        <div class="row">246          <div class="check-col"></div>247          <div class="label">UK 11.5 <span class="muted">(1)</span></div>248        </div>249        <div class="row">250          <div class="check-col"></div>251          <div class="label">999999, Mens US 3.5, Womens US 5 <span class="muted">(9)</span></div>252        </div>253        <div class="row">254          <div class="check-col"></div>255          <div class="label">999999, Mens US 4, Womens US 5.5 <span class="muted">(17)</span></div>256        </div>257        <div class="row">258          <div class="check-col"></div>259          <div class="label">999999, Mens US 4.5, Womens US 6 <span class="muted">(18)</span></div>260        </div>261        <div class="row">262          <div class="check-col"></div>263          <div class="label">999999, Mens US 5, Womens US 6.5 <span class="muted">(17)</span></div>264        </div>265        <div class="row">266          <div class="check-col"></div>267          <div class="label">999999, Mens US 5.5, Womens US 7 <span class="muted">(20)</span></div>268        </div>269      </div>270    </div>271 272    <div class="footer">273      <div class="cta">VIEW ITEMS</div>274    </div>275  </div>276 277</div>278</body>279</html>