GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Choose Your Size - Mobile UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11    color: #111;12  }13  #render-target {14    position: relative;15    width: 1080px;16    height: 2400px;17    overflow: hidden;18    background: #f6f6f6;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #0f0f10;29    color: #cfcfcf;30    display: flex;31    align-items: center;32    padding: 0 40px;33    box-sizing: border-box;34  }35  .status-time {36    font-size: 36px;37    font-weight: 600;38  }39  .status-icons {40    margin-left: auto;41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .dot {46    width: 20px;47    height: 20px;48    background: #cfcfcf;49    border-radius: 50%;50    opacity: 0.8;51  }52 53  /* App header behind sheet */54  .app-header {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 190px;60    background: #e9e9ea;61    display: flex;62    align-items: center;63    padding: 0 40px;64    box-sizing: border-box;65  }66  .back-btn {67    width: 72px;68    height: 72px;69    display: flex;70    align-items: center;71    justify-content: center;72    margin-right: 20px;73  }74  .header-actions {75    margin-left: auto;76    display: flex;77    align-items: center;78    gap: 36px;79  }80  .icon-btn {81    width: 72px;82    height: 72px;83    display: flex;84    align-items: center;85    justify-content: center;86    position: relative;87  }88  .badge {89    position: absolute;90    top: -8px;91    right: -8px;92    width: 46px;93    height: 46px;94    background: #111;95    color: #fff;96    border-radius: 50%;97    font-size: 28px;98    display: flex;99    align-items: center;100    justify-content: center;101  }102 103  .sub-header {104    position: absolute;105    top: 310px;106    left: 0;107    width: 1080px;108    height: 120px;109    background: #efeff0;110    display: flex;111    align-items: center;112    padding: 0 40px;113    box-sizing: border-box;114    border-top: 1px solid #ddd;115    border-bottom: 1px solid #ddd;116  }117  .sub-left {118    font-size: 44px;119    font-weight: 700;120    letter-spacing: 1px;121  }122  .sub-right {123    margin-left: auto;124    display: flex;125    align-items: center;126    gap: 18px;127    font-size: 40px;128    font-weight: 700;129    color: #222;130  }131 132  /* Modal sheet */133  .sheet {134    position: absolute;135    top: 360px;136    left: 0;137    width: 1080px;138    height: 1840px;139    background: #ffffff;140    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);141    z-index: 5;142  }143  .sheet-header {144    position: relative;145    padding: 60px 60px 30px 60px;146  }147  .sheet-title {148    font-size: 72px;149    font-weight: 800;150    letter-spacing: 1px;151    color: #111;152  }153  .close-btn {154    position: absolute;155    right: 40px;156    top: 40px;157    width: 88px;158    height: 88px;159    display: flex;160    align-items: center;161    justify-content: center;162    border-radius: 44px;163  }164  .size-list {165    padding: 10px 0 0 0;166  }167  .size-item {168    height: 140px;169    display: flex;170    align-items: center;171    padding: 0 60px;172    font-size: 56px;173    font-weight: 800;174    color: #111;175    border-top: 1px solid #e3e3e5;176    box-sizing: border-box;177  }178  .size-item:last-child {179    border-bottom: 1px solid #e3e3e5;180  }181 182  .sheet-bottom {183    position: absolute;184    left: 0;185    bottom: 180px;186    width: 100%;187    padding: 0 60px;188    box-sizing: border-box;189  }190  .size-guide {191    display: flex;192    align-items: center;193    justify-content: flex-end;194    gap: 16px;195    font-size: 44px;196    font-weight: 700;197    color: #111;198    padding-bottom: 40px;199  }200  .wishlist-btn {201    width: 100%;202    height: 150px;203    background: #c3c7cb;204    color: #222;205    border: none;206    font-size: 44px;207    font-weight: 800;208    letter-spacing: 3px;209    text-transform: uppercase;210    border-radius: 6px;211  }212 213  /* Home indicator */214  .home-indicator {215    position: absolute;216    bottom: 28px;217    left: 50%;218    transform: translateX(-50%);219    width: 620px;220    height: 18px;221    background: #c9c9cc;222    border-radius: 12px;223  }224 225  /* SVG styles for icons */226  svg {227    display: block;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="status-time">10:15</div>237    <div class="status-icons">238      <div class="dot"></div>239      <div class="dot"></div>240      <div class="dot"></div>241      <div class="dot"></div>242      <div class="dot"></div>243      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M19 6l-7 0-2 2H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"/></svg>244    </div>245  </div>246 247  <!-- App header with back/search etc. (behind sheet) -->248  <div class="app-header">249    <div class="back-btn">250      <svg width="54" height="54" viewBox="0 0 24 24">251        <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254    <div class="header-actions">255      <div class="icon-btn">256        <svg width="48" height="48" viewBox="0 0 24 24">257          <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>258        </svg>259        <div class="badge">1</div>260      </div>261      <div class="icon-btn">262        <svg width="48" height="48" viewBox="0 0 24 24">263          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"/>264          <path d="M20 20l-4-4" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>265        </svg>266      </div>267    </div>268  </div>269 270  <!-- Sub header (behind sheet) -->271  <div class="sub-header">272    <div class="sub-left">44 PRODUCTS</div>273    <div class="sub-right">274      <div>SORT</div>275      <svg width="44" height="44" viewBox="0 0 24 24">276        <path d="M8 7l-3 3-3-3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>277        <path d="M16 17l3-3 3 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>278      </svg>279    </div>280  </div>281 282  <!-- Modal sheet -->283  <div class="sheet">284    <div class="sheet-header">285      <div class="sheet-title">CHOOSE YOUR SIZE</div>286      <div class="close-btn">287        <svg width="54" height="54" viewBox="0 0 24 24">288          <path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2.4" stroke-linecap="round"/>289        </svg>290      </div>291    </div>292 293    <div class="size-list">294      <div class="size-item">4</div>295      <div class="size-item">5</div>296      <div class="size-item">6</div>297      <div class="size-item">7</div>298      <div class="size-item">8</div>299      <div class="size-item">9</div>300      <div class="size-item">10</div>301      <div class="size-item">11</div>302      <div class="size-item">12</div>303    </div>304 305    <div class="sheet-bottom">306      <div class="size-guide">SIZE GUIDE307        <svg width="40" height="40" viewBox="0 0 24 24">308          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>309        </svg>310      </div>311      <button class="wishlist-btn">ADD TO WISHLIST</button>312    </div>313  </div>314 315  <!-- Home indicator -->316  <div class="home-indicator"></div>317</div>318</body>319</html>