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>Choose Your Size UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f5f5f5;14  }15 16  /* Top header/toolbar */17  .top-bar {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 360px;23    background: #e9e9ea;24    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);25  }26  .icon-btn {27    width: 84px;28    height: 84px;29    display: flex;30    align-items: center;31    justify-content: center;32    cursor: default;33  }34  .back-btn {35    position: absolute;36    left: 36px;37    top: 96px;38  }39  .search-btn {40    position: absolute;41    right: 36px;42    top: 96px;43  }44  .cart-area {45    position: absolute;46    right: 168px;47    top: 88px;48    display: flex;49    align-items: center;50    gap: 12px;51    color: #111;52  }53  .cart-bubble {54    position: absolute;55    right: -16px;56    top: -8px;57    width: 54px;58    height: 54px;59    background: #111;60    color: #fff;61    border-radius: 27px;62    display: flex;63    align-items: center;64    justify-content: center;65    font-weight: bold;66    font-size: 28px;67  }68  .sort-area {69    position: absolute;70    right: 36px;71    bottom: 78px;72    display: flex;73    align-items: center;74    gap: 12px;75    color: #222;76    font-weight: 700;77    letter-spacing: 1px;78  }79  .products-label {80    position: absolute;81    left: 44px;82    bottom: 78px;83    font-size: 42px;84    font-weight: 800;85    color: #222;86    letter-spacing: 1px;87  }88  .small-handle {89    position: absolute;90    left: 50%;91    transform: translateX(-50%);92    bottom: 24px;93    width: 140px;94    height: 8px;95    background: #c4c7ca;96    border-radius: 6px;97  }98 99  /* Modal sheet */100  .sheet {101    position: absolute;102    left: 0;103    top: 360px;104    width: 1080px;105    height: 2040px;106    background: #ffffff;107    border-top-left-radius: 12px;108    border-top-right-radius: 12px;109    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);110  }111  .sheet .close-btn {112    position: absolute;113    right: 36px;114    top: 48px;115  }116  .sheet-title {117    position: absolute;118    left: 44px;119    top: 100px;120    font-size: 72px;121    font-weight: 900;122    color: #111;123    letter-spacing: 1px;124  }125 126  /* Size list */127  .size-list {128    position: absolute;129    left: 0;130    top: 220px;131    width: 100%;132  }133  .size-row {134    display: flex;135    align-items: center;136    justify-content: space-between;137    height: 160px;138    border-bottom: 2px solid #ececec;139    padding: 0 60px;140  }141  .size-row .num {142    font-size: 54px;143    font-weight: 800;144    color: #111;145  }146  .size-row .check {147    width: 48px;148    height: 48px;149  }150 151  /* Size guide row */152  .guide-row {153    position: absolute;154    left: 0;155    bottom: 280px;156    width: 100%;157    display: flex;158    align-items: center;159    justify-content: space-between;160    padding: 0 60px;161    height: 140px;162    color: #111;163    border-top: 2px solid transparent;164  }165  .guide-row .label {166    font-size: 46px;167    font-weight: 800;168    letter-spacing: 1px;169    color: #222;170  }171 172  /* Bottom primary button */173  .primary-btn {174    position: absolute;175    left: 44px;176    bottom: 120px;177    width: 992px;178    height: 140px;179    background: #111;180    color: #fff;181    border-radius: 8px;182    font-size: 44px;183    font-weight: 800;184    letter-spacing: 2px;185    display: flex;186    align-items: center;187    justify-content: center;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Top toolbar -->195  <div class="top-bar">196    <div class="icon-btn back-btn">197      <svg width="64" height="64" viewBox="0 0 24 24">198        <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201 202    <div class="cart-area">203      <svg width="48" height="48" viewBox="0 0 24 24">204        <path d="M7 6h10M7 12h10M7 18h10" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>205      </svg>206      <div class="cart-bubble">1</div>207    </div>208 209    <div class="icon-btn search-btn">210      <svg width="64" height="64" viewBox="0 0 24 24">211        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>212        <path d="M20 20l-4.2-4.2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>213      </svg>214    </div>215 216    <div class="products-label">44 PRODUCTS</div>217 218    <div class="sort-area">219      <div>SORT</div>220      <svg width="36" height="36" viewBox="0 0 24 24">221        <path d="M8 6l-3 3-3-3M16 18l3-3 3 3" stroke="#111" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>222      </svg>223    </div>224 225    <div class="small-handle"></div>226  </div>227 228  <!-- White sheet -->229  <div class="sheet">230    <div class="close-btn icon-btn">231      <svg width="64" height="64" viewBox="0 0 24 24">232        <path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2" stroke-linecap="round"/>233      </svg>234    </div>235 236    <div class="sheet-title">CHOOSE YOUR SIZE</div>237 238    <div class="size-list">239      <div class="size-row">240        <div class="num">4</div>241        <svg class="check" viewBox="0 0 24 24">242          <path d="M4 12l6 6 10-12" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243        </svg>244      </div>245      <div class="size-row">246        <div class="num">5</div>247      </div>248      <div class="size-row">249        <div class="num">6</div>250      </div>251      <div class="size-row">252        <div class="num">7</div>253      </div>254      <div class="size-row">255        <div class="num">8</div>256      </div>257      <div class="size-row">258        <div class="num">9</div>259      </div>260      <div class="size-row">261        <div class="num">10</div>262      </div>263      <div class="size-row">264        <div class="num">11</div>265      </div>266      <div class="size-row" style="border-bottom: none;">267        <div class="num">12</div>268      </div>269    </div>270 271    <div class="guide-row">272      <div class="label">SIZE GUIDE</div>273      <svg width="48" height="48" viewBox="0 0 24 24">274        <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275      </svg>276    </div>277 278    <div class="primary-btn">ADD TO WISHLIST</div>279  </div>280 281</div>282</body>283</html>