GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Size Filter Drawer</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #fafafa;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    background: #ffffff;25    color: #222;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30    z-index: 5;31  }32  .status-left { font-weight: 600; font-size: 36px; }33  .status-right {34    margin-left: auto; display: flex; gap: 22px; align-items: center;35  }36  .sb-icon { width: 34px; height: 34px; background: #9e9e9e; border-radius: 6px; opacity: 0.9; }37 38  /* Underlying product list page */39  .page {40    position: absolute;41    top: 96px;42    left: 0;43    right: 0;44    bottom: 0;45    background: #ffffff;46    z-index: 1;47    overflow: hidden;48  }49  .page-header {50    height: 120px;51    display: flex;52    align-items: center;53    gap: 24px;54    padding: 0 32px;55    border-bottom: 1px solid #e5e5e5;56    box-sizing: border-box;57  }58  .page-header .title {59    font-size: 40px;60    font-weight: 600;61    color: #222;62  }63  .back-icon {64    width: 48px; height: 48px;65  }66  .content {67    padding: 24px 32px;68    display: grid;69    grid-template-columns: 1fr;70    gap: 28px;71  }72  .card {73    background: #fff;74    border: 1px solid #e5e5e5;75    border-radius: 8px;76    overflow: hidden;77    width: 660px; /* only a sliver peeks from the left, but keep a realistic card width */78  }79  .card .img {80    height: 420px;81    background: #E0E0E0;82    border-bottom: 1px solid #BDBDBD;83    color: #757575;84    display: flex; align-items: center; justify-content: center;85    font-size: 32px;86  }87  .card .meta {88    padding: 24px;89  }90  .price { font-size: 44px; font-weight: 800; color: #111; }91  .desc { font-size: 30px; color: #777; line-height: 1.3; margin-top: 8px; }92 93  /* Dim scrim under the drawer */94  .scrim {95    position: absolute;96    inset: 0;97    background: rgba(0,0,0,0.28);98    z-index: 6;99  }100 101  /* Right sheet / drawer */102  .sheet {103    position: absolute;104    top: 96px;105    right: 0;106    width: 860px;107    height: calc(2400px - 96px);108    background: #ffffff;109    box-shadow: -8px 0 24px rgba(0,0,0,0.18);110    z-index: 7;111    display: flex;112    flex-direction: column;113  }114  .sheet-header {115    height: 140px;116    display: flex; align-items: center;117    border-bottom: 1px solid #eee;118    padding: 0 32px;119    box-sizing: border-box;120    gap: 24px;121  }122  .sheet-title {123    font-size: 42px;124    font-weight: 700;125    letter-spacing: 2px;126    color: #222;127  }128  .spacer { flex: 1; }129  .pill {130    display: inline-flex;131    align-items: center;132    gap: 16px;133    background: #efefef;134    border-radius: 8px;135    padding: 20px 28px;136    font-weight: 700;137    color: #333;138    text-transform: uppercase;139    font-size: 30px;140  }141  .pill svg { width: 34px; height: 34px; }142 143  .list {144    position: relative;145    overflow-y: auto;146    -webkit-overflow-scrolling: touch;147    height: calc(100% - 220px - 140px); /* minus footer and header */148    background: #fff;149  }150  .row {151    padding: 46px 40px;152    border-bottom: 1px solid #efefef;153    font-size: 38px;154    color: #333;155    line-height: 1.35;156    display: flex;157    align-items: center;158  }159  .count { color: #9e9e9e; margin-left: 14px; }160 161  .footer {162    height: 220px;163    background: #efefef;164    border-top: 1px solid #e5e5e5;165    display: flex; align-items: center; justify-content: center;166    padding: 0 40px;167    box-sizing: border-box;168  }169  .cta {170    width: 760px;171    height: 120px;172    background: #1d1d1d;173    color: #fff;174    border-radius: 6px;175    font-weight: 800;176    font-size: 38px;177    text-transform: uppercase;178    display: flex; align-items: center; justify-content: center;179    letter-spacing: 2px;180  }181 182  /* Home indicator */183  .home-indicator {184    position: absolute;185    bottom: 18px;186    left: 50%;187    transform: translateX(-50%);188    width: 360px;189    height: 14px;190    background: #c7c7c7;191    border-radius: 10px;192    z-index: 2;193    opacity: 0.9;194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Status bar -->200  <div class="status-bar">201    <div class="status-left">8:23</div>202    <div class="status-right">203      <div class="sb-icon"></div>204      <div class="sb-icon"></div>205      <div class="sb-icon"></div>206    </div>207  </div>208 209  <!-- Underlying product page -->210  <div class="page">211    <div class="page-header">212      <svg class="back-icon" viewBox="0 0 24 24">213        <path d="M15 4L7 12l8 8" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214      </svg>215      <div class="title">"WO...</div>216    </div>217    <div class="content">218      <div class="card">219        <div class="img">[IMG: Sneaker Product]</div>220        <div class="meta">221          <div class="price">$134.00</div>222          <div class="desc">New Balance gray stone - Exclusive</div>223        </div>224      </div>225      <div class="card">226        <div class="img">[IMG: Sneaker Product]</div>227        <div class="meta">228          <div class="price">$134.00</div>229          <div class="desc">New Balance gray stone - Exclusive</div>230        </div>231      </div>232    </div>233  </div>234 235  <!-- Scrim -->236  <div class="scrim"></div>237 238  <!-- Right drawer -->239  <div class="sheet">240    <div class="sheet-header">241      <svg class="back-icon" viewBox="0 0 24 24">242        <path d="M15 4L7 12l8 8" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243      </svg>244      <div class="sheet-title">SIZE</div>245      <div class="spacer"></div>246      <div class="pill">247        <svg viewBox="0 0 24 24">248          <path d="M20 6l-11 11-5-5" stroke="#111" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249        </svg>250        <span>ALL</span>251      </div>252    </div>253 254    <div class="list">255      <div class="row">US 13.5 <span class="count">(4)</span></div>256      <div class="row">US 14 <span class="count">(3)</span></div>257      <div class="row">UK 8.5 <span class="count">(1)</span></div>258      <div class="row">UK 9 <span class="count">(1)</span></div>259      <div class="row">UK 9.5 <span class="count">(1)</span></div>260      <div class="row">UK 11.5 <span class="count">(1)</span></div>261      <div class="row">999999, Mens US 3.5, Womens US 5 <span class="count">(9)</span></div>262      <div class="row">999999, Mens US 4, Womens US 5.5 <span class="count">(17)</span></div>263      <div class="row">999999, Mens US 4.5, Womens US 6 <span class="count">(18)</span></div>264      <div class="row">999999, Mens US 5, Womens US 6.5 <span class="count">(17)</span></div>265      <div class="row">999999, Mens US 5.5, Womens US 7 <span class="count">(20)</span></div>266      <div class="row">US 6 <span class="count">(21)</span></div>267      <div class="row">US 6.5 <span class="count">(15)</span></div>268      <div class="row">US 7 <span class="count">(10)</span></div>269      <div class="row">US 7.5 <span class="count">(8)</span></div>270      <div class="row">US 8 <span class="count">(12)</span></div>271      <div class="row">US 8.5 <span class="count">(6)</span></div>272      <div class="row">US 9 <span class="count">(3)</span></div>273      <div class="row">US 9.5 <span class="count">(2)</span></div>274      <div class="row">US 10 <span class="count">(1)</span></div>275    </div>276 277    <div class="footer">278      <div class="cta">VIEW ITEMS</div>279    </div>280  </div>281 282  <div class="home-indicator"></div>283</div>284</body>285</html>