GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>US Shoe Size Filter</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #fafafa;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 130px;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    color: #333;29    font-weight: 500;30    font-size: 42px;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35  }36  .status-left svg, .status-right svg { margin-left: 16px; }37  .status-bar .spacer { flex: 1; }38 39  /* Background content (behind overlay) */40  .content-behind {41    position: absolute;42    top: 130px;43    left: 0;44    right: 0;45    bottom: 0;46    padding: 24px;47    box-sizing: border-box;48  }49  .card {50    width: 480px;51    height: 420px;52    background: #fff;53    border: 1px solid #ddd;54    border-radius: 24px;55    box-shadow: 0 6px 20px rgba(0,0,0,0.08);56    margin-bottom: 28px;57    display: flex;58    align-items: center;59    justify-content: center;60    overflow: hidden;61  }62  .card .img {63    width: 100%;64    height: 100%;65    background: #E0E0E0;66    border-top: 1px solid #BDBDBD;67    border-bottom: 1px solid #BDBDBD;68    display: flex;69    align-items: center;70    justify-content: center;71    color: #757575;72    font-size: 36px;73  }74 75  /* Bottom nav */76  .bottom-nav {77    position: absolute;78    left: 0;79    bottom: 0;80    width: 1080px;81    height: 180px;82    background: #ffffff;83    border-top: 1px solid #e5e5e5;84    display: flex;85    align-items: center;86    padding-left: 40px;87    box-sizing: border-box;88    color: #333;89    font-size: 40px;90  }91  .bottom-nav .home {92    display: flex;93    align-items: center;94    gap: 24px;95    color: #1a1a1a;96  }97 98  /* Overlay Sheet */99  .overlay {100    position: absolute;101    top: 0;102    left: 120px; /* small left reveal like screenshot */103    width: 960px;104    height: 2400px;105    background: #ffffff;106    box-shadow: -10px 0 30px rgba(0,0,0,0.12);107  }108 109  .overlay-header {110    height: 200px;111    display: flex;112    align-items: center;113    position: relative;114    border-bottom: 1px solid #eee;115  }116  .back-btn {117    position: absolute;118    left: 40px;119    top: 50%;120    transform: translateY(-50%);121    width: 92px;122    height: 92px;123    display: flex;124    align-items: center;125    justify-content: center;126  }127  .overlay-title {128    width: 100%;129    text-align: center;130    font-size: 64px;131    font-weight: 700;132    color: #1c1c1c;133    letter-spacing: 0.2px;134  }135 136  .list {137    padding-top: 10px;138  }139  .row {140    height: 170px;141    display: flex;142    align-items: center;143    padding: 0 60px;144    box-sizing: border-box;145    border-bottom: 1px solid #ededed;146  }147  .checkbox {148    width: 74px;149    height: 74px;150    border: 5px solid #1f1f1f;151    border-radius: 14px;152    margin-right: 40px;153    box-sizing: border-box;154  }155  .label {156    font-size: 56px;157    color: #222;158    font-weight: 600;159  }160  .count {161    font-size: 44px;162    color: #777;163    margin-left: 16px;164    font-weight: 500;165  }166 167  .cta-wrap {168    position: absolute;169    left: 0;170    right: 0;171    bottom: 160px;172    display: flex;173    justify-content: center;174  }175  .cta {176    width: 800px;177    height: 120px;178    background: #3F63F7;179    color: #fff;180    font-size: 48px;181    font-weight: 700;182    border-radius: 70px;183    display: flex;184    align-items: center;185    justify-content: center;186    box-shadow: 0 10px 20px rgba(63,99,247,0.35);187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status bar -->194  <div class="status-bar">195    <div class="status-left">196      <div>8:30</div>197      <!-- Simple sun icon -->198      <svg width="42" height="42" viewBox="0 0 24 24" fill="#f5b300"><circle cx="12" cy="12" r="5"/></svg>199      <!-- Cloud icon -->200      <svg width="42" height="42" viewBox="0 0 24 24" fill="#9e9e9e">201        <path d="M6 15a4 4 0 1 0 0 8h10a4 4 0 0 0 0-8h-.3A6 6 0 0 0 6 15z"/>202      </svg>203    </div>204    <div class="spacer"></div>205    <div class="status-right">206      <!-- WiFi icon -->207      <svg width="42" height="42" viewBox="0 0 24 24" fill="#444">208        <path d="M12 18l2 2-2 2-2-2 2-2zm-6.5-5.5a10 10 0 0 1 17 0l-1.7 1.7a7.5 7.5 0 0 0-13.6 0L5.5 12.5zm3.3 3.3a6 6 0 0 1 10.4 0l-1.6 1.6a3.9 3.9 0 0 0-7.2 0l-1.6-1.6z"/>209      </svg>210      <!-- Battery icon -->211      <svg width="46" height="42" viewBox="0 0 28 24" fill="none">212        <rect x="2" y="4" width="20" height="16" rx="3" stroke="#444" stroke-width="2"/>213        <rect x="4" y="6" width="14" height="12" fill="#444"/>214        <rect x="22" y="9" width="4" height="6" rx="1" fill="#444"/>215      </svg>216    </div>217  </div>218 219  <!-- Background content (partially visible behind overlay) -->220  <div class="content-behind">221    <div class="card" style="margin-left:24px;">222      <div class="img">[IMG: Gray Trail Shoe]</div>223    </div>224    <div class="card" style="margin-left:24px;">225      <div class="img">[IMG: Black Running Shoe]</div>226    </div>227  </div>228 229  <!-- Bottom navigation (behind overlay) -->230  <div class="bottom-nav">231    <div class="home">232      <!-- Home icon -->233      <svg width="56" height="56" viewBox="0 0 24 24" fill="#222">234        <path d="M12 3l9 7v11h-6v-6H9v6H3V10l9-7z"/>235      </svg>236      <div>Home</div>237    </div>238  </div>239 240  <!-- Overlay sheet -->241  <div class="overlay">242    <div class="overlay-header">243      <div class="back-btn">244        <!-- Back chevron -->245        <svg width="60" height="60" viewBox="0 0 24 24" fill="#1f1f1f">246          <path d="M15.5 4.5L7 12l8.5 7.5-2 2L3 12l10.5-9.5 2 2z"/>247        </svg>248      </div>249      <div class="overlay-title">US Shoe Size</div>250    </div>251 252    <div class="list">253      <div class="row">254        <div class="checkbox"></div>255        <div class="label">5<span class="count">(1)</span></div>256      </div>257      <div class="row">258        <div class="checkbox"></div>259        <div class="label">7.5<span class="count">(2)</span></div>260      </div>261      <div class="row">262        <div class="checkbox"></div>263        <div class="label">8<span class="count">(1)</span></div>264      </div>265      <div class="row">266        <div class="checkbox"></div>267        <div class="label">9<span class="count">(3)</span></div>268      </div>269      <div class="row">270        <div class="checkbox"></div>271        <div class="label">11<span class="count">(1)</span></div>272      </div>273    </div>274 275    <div class="cta-wrap">276      <div class="cta">Show 8 results</div>277    </div>278  </div>279 280</div>281</body>282</html>