GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Options UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    color: #FFFFFF;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16  }17 18  .status-bar {19    height: 96px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 40px;24    color: #fff;25    font-size: 36px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .dot { width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%; display: inline-block; }33 34  .header {35    display: flex;36    align-items: center;37    gap: 22px;38    padding: 12px 40px 0 40px;39  }40  .header .title {41    font-size: 72px;42    font-weight: 600;43  }44  .icon-btn {45    width: 72px;46    height: 72px;47  }48 49  .product-summary {50    display: flex;51    gap: 32px;52    padding: 36px 40px 0 40px;53  }54  .product-img {55    width: 220px;56    height: 220px;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    border-radius: 28px;60    display: flex;61    align-items: center;62    justify-content: center;63    color: #757575;64    font-size: 26px;65    text-align: center;66    padding: 10px;67  }68  .product-info {69    width: 740px;70  }71  .product-title {72    font-size: 44px;73    line-height: 60px;74    font-weight: 500;75    color: #FFFFFF;76  }77  .product-price {78    font-size: 54px;79    font-weight: 600;80    margin-top: 22px;81    color: #FFFFFF;82  }83 84  .select-box {85    margin: 32px 40px 0 40px;86    border: 2px solid #3F3F3F;87    border-radius: 22px;88    height: 116px;89    display: flex;90    align-items: center;91    justify-content: space-between;92    padding: 0 28px;93    color: #DADADA;94    font-size: 40px;95  }96  .select-box .label b { color: #FFFFFF; }97  .chevron {98    width: 56px;99    height: 56px;100  }101 102  /* Overlay sheet */103  .sheet {104    position: absolute;105    left: 28px;106    top: 760px;107    width: 1024px;108    background: #3E3E3E;109    border-radius: 28px;110    box-shadow: 0 8px 24px rgba(0,0,0,0.6);111    overflow: hidden;112  }113  .sheet-header {114    padding: 36px 40px 10px 40px;115    font-size: 40px;116    color: #DADADA;117  }118  .sheet-header .selection {119    font-weight: 700;120    color: #FFFFFF;121  }122  .list-item {123    display: flex;124    align-items: center;125    gap: 32px;126    padding: 28px 40px;127  }128  .thumb {129    width: 160px;130    height: 160px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    display: flex;134    justify-content: center;135    align-items: center;136    color: #757575;137    font-size: 24px;138  }139  .item-info {140    color: #FFFFFF;141  }142  .item-title {143    font-size: 42px;144    font-weight: 600;145    margin-bottom: 8px;146  }147  .item-price {148    font-size: 40px;149    color: #D0D0D0;150  }151  .separator {152    height: 1px;153    background: rgba(255,255,255,0.12);154    margin: 0 40px;155  }156 157  /* Home indicator */158  .home-indicator {159    position: absolute;160    bottom: 38px;161    left: 50%;162    transform: translateX(-50%);163    width: 360px;164    height: 12px;165    background: #EDEDED;166    border-radius: 8px;167    opacity: 0.9;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status bar -->175  <div class="status-bar">176    <div>4:58</div>177    <div class="status-icons">178      <div class="dot"></div>179      <svg width="40" height="40" viewBox="0 0 40 40">180        <rect x="6" y="10" width="20" height="20" rx="4" fill="#FFFFFF"/>181      </svg>182      <svg width="40" height="40" viewBox="0 0 40 40">183        <path d="M6 30h24M6 20h24M6 10h24" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>184      </svg>185      <svg width="40" height="40" viewBox="0 0 40 40">186        <path d="M6 30h24M6 20h24M6 10h24" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>187      </svg>188      <svg width="40" height="40" viewBox="0 0 40 40">189        <path d="M8 28c8 0 8-16 16-16" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round"/>190      </svg>191    </div>192  </div>193 194  <!-- Header -->195  <div class="header">196    <svg class="icon-btn" viewBox="0 0 48 48">197      <path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198    </svg>199    <div class="title">Options</div>200  </div>201 202  <!-- Product summary -->203  <div class="product-summary">204    <div class="product-img">[IMG: Product Shoe]</div>205    <div class="product-info">206      <div class="product-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>207      <div class="product-price">$79.99 - $100.00</div>208    </div>209  </div>210 211  <!-- Select boxes -->212  <div class="select-box">213    <div class="label">US Shoe Size: <b>9</b></div>214    <svg class="chevron" viewBox="0 0 40 40">215      <path d="M10 16 L20 26 L30 16" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216    </svg>217  </div>218 219  <div class="select-box" style="margin-top: 24px;">220    <div class="label">Fashion Color: <b>No selection</b></div>221    <svg class="chevron" viewBox="0 0 40 40">222      <path d="M10 16 L20 26 L30 16" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223    </svg>224  </div>225 226  <!-- Overlay sheet showing color options -->227  <div class="sheet">228    <div class="sheet-header">Fashion Color: <span class="selection">No selection</span></div>229 230    <div class="list-item">231      <div class="thumb">[IMG: Black Shoe]</div>232      <div class="item-info">233        <div class="item-title">Black</div>234        <div class="item-price">$79.99</div>235      </div>236    </div>237 238    <div class="separator"></div>239 240    <div class="list-item">241      <div class="thumb">[IMG: Beige Shoe]</div>242      <div class="item-info">243        <div class="item-title">Beige</div>244        <div class="item-price">$100.00</div>245      </div>246    </div>247  </div>248 249  <!-- Home indicator -->250  <div class="home-indicator"></div>251</div>252</body>253</html>