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</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: Roboto, Arial, sans-serif;17  }18 19  /* Top header */20  .header {21    position: absolute;22    left: 0;23    top: 110px; /* simulate status bar spacing */24    width: 100%;25    padding: 0 48px;26    display: flex;27    align-items: center;28    gap: 24px;29  }30  .header .back {31    width: 64px;32    height: 64px;33    display: inline-flex;34    align-items: center;35    justify-content: center;36    border-radius: 32px;37  }38  .header h1 {39    margin: 0;40    font-size: 72px;41    font-weight: 600;42    letter-spacing: 0.5px;43  }44 45  /* Product summary row */46  .product-row {47    position: absolute;48    left: 48px;49    top: 300px;50    right: 48px;51    display: flex;52    gap: 32px;53    align-items: flex-start;54  }55  .img-placeholder {56    width: 220px;57    height: 220px;58    background: #E0E0E0;59    border: 1px solid #BDBDBD;60    border-radius: 24px;61    color: #757575;62    display: flex;63    align-items: center;64    justify-content: center;65    font-size: 28px;66    text-align: center;67    padding: 12px;68    box-sizing: border-box;69  }70  .product-info {71    flex: 1;72    padding-top: 6px;73  }74  .product-title {75    font-size: 44px;76    line-height: 56px;77    font-weight: 500;78    margin: 0 0 18px 0;79  }80  .product-price {81    font-size: 52px;82    font-weight: 500;83    margin: 0;84  }85 86  /* Select boxes */87  .select-group {88    position: absolute;89    left: 48px;90    right: 48px;91    top: 600px;92    display: flex;93    flex-direction: column;94    gap: 36px;95  }96  .select-box {97    border: 2px solid #3D3D3D;98    border-radius: 22px;99    padding: 34px 28px;100    display: flex;101    align-items: center;102    justify-content: space-between;103    background: transparent;104  }105  .select-label {106    font-size: 42px;107    line-height: 48px;108    color: #EDEDED;109  }110  .select-label .bold {111    font-weight: 700;112    color: #FFFFFF;113  }114  .chev {115    width: 48px;116    height: 48px;117    opacity: 0.95;118  }119 120  /* tiny helper icon next to label text */121  .inline-icon {122    width: 32px;123    height: 32px;124    vertical-align: middle;125    margin-left: 8px;126    opacity: 0.9;127  }128 129  /* Gesture bar */130  .gesture-bar {131    position: absolute;132    bottom: 48px;133    left: 50%;134    transform: translateX(-50%);135    width: 360px;136    height: 10px;137    background: #EDEDED;138    border-radius: 10px;139    opacity: 0.9;140  }141</style>142</head>143<body>144<div id="render-target">145  <!-- Header -->146  <div class="header">147    <div class="back" aria-label="Back">148      <svg width="40" height="40" viewBox="0 0 24 24">149        <path d="M15.5 5l-7 7 7 7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>150      </svg>151    </div>152    <h1>Options</h1>153  </div>154 155  <!-- Product summary -->156  <div class="product-row">157    <div class="img-placeholder">[IMG: Two Adidas trail shoes]</div>158    <div class="product-info">159      <p class="product-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</p>160      <p class="product-price">$79.99 - $100.00</p>161    </div>162  </div>163 164  <!-- Select boxes -->165  <div class="select-group">166    <div class="select-box">167      <div class="select-label">168        US Shoe Size:169        <svg class="inline-icon" viewBox="0 0 24 24">170          <path d="M12 3C8.7 3 6 5.7 6 9c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8a3 3 0 110-6 3 3 0 010 6z" fill="#9E9E9E"/>171        </svg>172        <span class="bold">9</span>173      </div>174      <svg class="chev" viewBox="0 0 24 24">175        <path d="M6 9l6 6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>176      </svg>177    </div>178 179    <div class="select-box">180      <div class="select-label">Fashion Color: <span class="bold">Select</span></div>181      <svg class="chev" viewBox="0 0 24 24">182        <path d="M6 9l6 6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>183      </svg>184    </div>185  </div>186 187  <!-- Bottom gesture bar -->188  <div class="gesture-bar"></div>189</div>190</body>191</html>