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 Variant</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Header */20  .app-bar {21    position: absolute;22    top: 120px;23    left: 36px;24    right: 36px;25    display: flex;26    align-items: center;27  }28  .back-btn {29    width: 84px;30    height: 84px;31    border-radius: 42px;32    display: flex;33    align-items: center;34    justify-content: center;35    color: #FFFFFF;36  }37  .title {38    font-size: 68px;39    font-weight: 700;40    margin-left: 18px;41    letter-spacing: 0.2px;42  }43  .actions {44    margin-left: auto;45    display: flex;46    gap: 18px;47  }48  .circle-btn {49    width: 120px;50    height: 120px;51    border-radius: 60px;52    background: #2E2E2E;53    display: flex;54    align-items: center;55    justify-content: center;56  }57 58  /* Product row */59  .product {60    position: absolute;61    top: 340px;62    left: 48px;63    right: 48px;64    display: flex;65    gap: 36px;66    align-items: center;67  }68  .thumb-wrap {69    width: 230px;70    height: 230px;71    border-radius: 28px;72    background: #FFFFFF;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .img-ph {78    width: 200px;79    height: 200px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    color: #757575;83    font-size: 26px;84    display: flex;85    align-items: center;86    justify-content: center;87    border-radius: 14px;88    text-align: center;89    padding: 8px;90  }91  .info {92    flex: 1;93  }94  .name {95    font-size: 44px;96    line-height: 1.28;97    color: #ECECEC;98    margin-bottom: 12px;99    max-width: 680px;100  }101  .price {102    font-size: 56px;103    font-weight: 700;104    color: #FFFFFF;105  }106 107  /* Variant selectors */108  .selectors {109    position: absolute;110    top: 640px;111    left: 48px;112    right: 48px;113    display: flex;114    flex-direction: column;115    gap: 28px;116    max-width: 980px;117  }118  .select-row {119    height: 120px;120    border-radius: 18px;121    background: #111111;122    border: 2px solid #3D3D3D;123    display: flex;124    align-items: center;125    padding: 0 24px 0 24px;126  }127  .select-label {128    color: #CFCFCF;129    font-size: 38px;130  }131  .chev {132    margin-left: auto;133    width: 72px;134    height: 72px;135    border-radius: 16px;136    border: 2px solid #5A5A5A;137    display: flex;138    align-items: center;139    justify-content: center;140  }141 142  /* Dropdown overlay */143  .dropdown {144    position: absolute;145    top: 740px;146    left: 48px;147    width: 980px;148    border-radius: 28px;149    background: #3C3C3C;150    box-shadow: 0 20px 60px rgba(0,0,0,0.6);151    padding: 34px 32px;152  }153  .dd-header {154    font-size: 42px;155    color: #EDEDED;156    margin-bottom: 26px;157  }158  .dd-item {159    display: flex;160    align-items: center;161    gap: 28px;162    padding: 22px 0;163  }164  .dd-thumb {165    width: 120px;166    height: 120px;167    border-radius: 22px;168    background: #FFFFFF;169    display: flex;170    align-items: center;171    justify-content: center;172  }173  .dd-thumb .img-ph {174    width: 100px;175    height: 100px;176    font-size: 22px;177    border-radius: 12px;178  }179  .dd-title {180    font-size: 40px;181    color: #FFFFFF;182  }183  .muted {184    color: #BDBDBD;185    margin-left: 10px;186  }187 188  /* Gesture bar */189  .gesture {190    position: absolute;191    bottom: 42px;192    left: 50%;193    transform: translateX(-50%);194    width: 370px;195    height: 10px;196    background: #E6E6E6;197    border-radius: 8px;198    opacity: 0.9;199  }200</style>201</head>202<body>203<div id="render-target">204  <!-- Header -->205  <div class="app-bar">206    <div class="back-btn" aria-label="Back">207      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">208        <path d="M15 18l-6-6 6-6"/>209      </svg>210    </div>211    <div class="title">Options</div>212    <div class="actions">213      <div class="circle-btn" aria-label="Search">214        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">215          <circle cx="11" cy="11" r="7"></circle>216          <path d="M21 21l-4.3-4.3"></path>217        </svg>218      </div>219      <div class="circle-btn" aria-label="Cart">220        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">221          <path d="M6 6h15l-1.5 8.5H7.5L6 6z"></path>222          <circle cx="9" cy="19" r="1.5"></circle>223          <circle cx="18" cy="19" r="1.5"></circle>224        </svg>225      </div>226    </div>227  </div>228 229  <!-- Product summary -->230  <div class="product">231    <div class="thumb-wrap">232      <div class="img-ph">[IMG: Black sneakers]</div>233    </div>234    <div class="info">235      <div class="name">Skechers Women's Arch Comfort Sneaker Walking Shoes Ladies Comfortable Shoe</div>236      <div class="price">$37.99</div>237    </div>238  </div>239 240  <!-- Variant selectors -->241  <div class="selectors">242    <div class="select-row">243      <div class="select-label">Color</div>244      <div class="chev">245        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">246          <path d="M6 9l6 6 6-6"></path>247        </svg>248      </div>249    </div>250    <div class="select-row">251      <div class="select-label">Size</div>252      <div class="chev">253        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">254          <path d="M6 9l6 6 6-6"></path>255        </svg>256      </div>257    </div>258  </div>259 260  <!-- Dropdown overlay (open) -->261  <div class="dropdown">262    <div class="dd-header">No selection</div>263 264    <div class="dd-item">265      <div class="dd-thumb">266        <div class="img-ph">[IMG: Black sneakers]</div>267      </div>268      <div class="dd-title">Black <span class="muted">(out of stock)</span></div>269    </div>270 271    <div class="dd-item">272      <div class="dd-thumb">273        <div class="img-ph">[IMG: Gray sneakers]</div>274      </div>275      <div class="dd-title">Gray</div>276    </div>277  </div>278 279  <div class="gesture"></div>280</div>281</body>282</html>