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>Options - Product Sizes</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 100px;26    padding: 22px 32px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32    opacity: 0.9;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 16px;38    font-size: 36px;39    font-weight: 600;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .status-dot, .status-icon {47    width: 24px; height: 24px; border-radius: 4px; background: #fff; opacity: 0.85;48  }49 50  /* Header */51  .header {52    display: flex;53    align-items: center;54    gap: 24px;55    padding: 20px 40px 10px 40px;56  }57  .back-icon {58    width: 48px; height: 48px;59  }60  .header-title {61    font-size: 64px;62    font-weight: 700;63    letter-spacing: 0.2px;64  }65 66  /* Product summary */67  .product-card {68    margin-top: 30px;69    padding: 0 40px;70    display: flex;71    align-items: flex-start;72    gap: 28px;73  }74  .product-img {75    width: 220px;76    height: 220px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    border-radius: 28px;80    display: flex;81    justify-content: center;82    align-items: center;83    color: #757575;84    font-size: 28px;85    text-align: center;86    line-height: 1.2;87    overflow: hidden;88  }89  .product-info {90    flex: 1;91    padding-top: 6px;92  }93  .product-title {94    font-size: 40px;95    line-height: 1.35;96    color: #FFFFFF;97    margin-bottom: 18px;98    max-width: 690px;99  }100  .product-price {101    font-size: 42px;102    font-weight: 600;103    color: #FFFFFF;104  }105 106  /* Right-side selectors (collapsed) */107  .selectors {108    position: absolute;109    right: 40px;110    top: 520px;111    display: flex;112    flex-direction: column;113    gap: 26px;114  }115  .selector-btn {116    width: 280px;117    height: 96px;118    border-radius: 18px;119    border: 2px solid #2E2E2E;120    background: #0F0F0F;121    display: flex;122    align-items: center;123    justify-content: flex-end;124    padding: 0 22px;125    box-sizing: border-box;126  }127  .caret {128    width: 32px; height: 32px; fill: #FFFFFF;129  }130 131  /* Modal sheet */132  .sheet {133    position: absolute;134    left: 40px;135    top: 720px;136    width: 1000px;137    height: 1480px;138    background: #3F3F3F;139    border-radius: 28px;140    box-shadow: 0 16px 32px rgba(0,0,0,0.6);141    overflow: hidden;142  }143  .sheet-content {144    padding: 36px 36px 28px 36px;145  }146  .sheet-title {147    font-size: 38px;148    color: #EAEAEA;149    margin-bottom: 28px;150  }151  .sheet-title b {152    color: #FFFFFF;153    font-weight: 800;154  }155  .size-item {156    margin: 34px 0;157  }158  .size-item .size {159    font-size: 44px;160    font-weight: 700;161    color: #FFFFFF;162    margin-bottom: 6px;163  }164  .size-item .range {165    font-size: 36px;166    color: #C8C8C8;167  }168 169  /* Home indicator */170  .home-indicator {171    position: absolute;172    bottom: 56px;173    left: 50%;174    transform: translateX(-50%);175    width: 320px;176    height: 12px;177    border-radius: 12px;178    background: #D9D9D9;179    opacity: 0.85;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar mimic -->187  <div class="status-bar">188    <div class="status-left">189      <span>4:57</span>190      <div class="status-icon"></div>191      <div class="status-icon"></div>192      <div class="status-icon"></div>193      <div class="status-dot"></div>194    </div>195    <div class="status-right">196      <!-- Simple wifi icon -->197      <svg width="36" height="28" viewBox="0 0 24 24" fill="none">198        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>199        <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>200        <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>201        <circle cx="12" cy="17" r="1.6" fill="#fff"/>202      </svg>203      <!-- Battery icon -->204      <svg width="40" height="24" viewBox="0 0 28 16" fill="none">205        <rect x="1" y="2" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>206        <rect x="3" y="4" width="16" height="8" rx="1.5" fill="#fff"/>207        <rect x="24" y="5" width="3" height="6" rx="1" fill="#fff"/>208      </svg>209    </div>210  </div>211 212  <!-- Header -->213  <div class="header">214    <svg class="back-icon" viewBox="0 0 24 24">215      <path d="M15 18L9 12l6-6" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>216    </svg>217    <div class="header-title">Options</div>218  </div>219 220  <!-- Product summary -->221  <div class="product-card">222    <div class="product-img">[IMG: Adidas Trail Running Shoes]</div>223    <div class="product-info">224      <div class="product-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>225      <div class="product-price">$79.99 - $100.00</div>226    </div>227  </div>228 229  <!-- Right-side collapsed selectors -->230  <div class="selectors">231    <div class="selector-btn">232      <svg class="caret" viewBox="0 0 24 24">233        <path d="M6 9l6 6 6-6" fill="#FFFFFF"/>234      </svg>235    </div>236    <div class="selector-btn">237      <svg class="caret" viewBox="0 0 24 24">238        <path d="M6 9l6 6 6-6" fill="#FFFFFF"/>239      </svg>240    </div>241  </div>242 243  <!-- Modal sheet: Size options -->244  <div class="sheet">245    <div class="sheet-content">246      <div class="sheet-title">US Shoe Size: <b>No selection</b></div>247 248      <div class="size-item">249        <div class="size">8</div>250        <div class="range">$79.99 - $100.00</div>251      </div>252 253      <div class="size-item">254        <div class="size">8.5</div>255        <div class="range">$79.99 - $100.00</div>256      </div>257 258      <div class="size-item">259        <div class="size">9</div>260        <div class="range">$79.99 - $100.00</div>261      </div>262 263      <div class="size-item">264        <div class="size">9.5</div>265        <div class="range">$79.99 - $100.00</div>266      </div>267 268      <div class="size-item">269        <div class="size">10</div>270        <div class="range">$79.99 - $100.00</div>271      </div>272 273      <div class="size-item">274        <div class="size">10.5</div>275        <div class="range">$79.99 - $100.00</div>276      </div>277 278      <div class="size-item">279        <div class="size">11</div>280        <div class="range">$79.99 - $100.00</div>281      </div>282 283      <div class="size-item">284        <div class="size">11.5</div>285        <div class="range">$79.99 - $100.00</div>286      </div>287 288      <div class="size-item">289        <div class="size">12</div>290        <div class="range">$79.99 - $100.00</div>291      </div>292 293      <div class="size-item">294        <div class="size">13</div>295        <div class="range">$79.99 - $100.00</div>296      </div>297    </div>298  </div>299 300  <!-- Home indicator -->301  <div class="home-indicator"></div>302 303</div>304</body>305</html>