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>Options - Product</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    color: #FFFFFF;15  }16  /* Header */17  .header {18    position: relative;19    padding: 48px 48px 24px 48px;20  }21  .back-btn {22    width: 96px;23    height: 96px;24    display: inline-flex;25    justify-content: center;26    align-items: center;27    border-radius: 50%;28    color: #FFFFFF;29  }30  .back-btn svg { width: 48px; height: 48px; fill: #FFFFFF; }31  .title {32    position: absolute;33    left: 160px;34    top: 60px;35    font-size: 72px;36    font-weight: 700;37    letter-spacing: 0.3px;38  }39 40  /* Product row */41  .product-row {42    display: flex;43    gap: 32px;44    align-items: flex-start;45    padding: 24px 48px;46  }47  .prod-img {48    width: 180px;49    height: 180px;50    background: #E0E0E0;51    border: 1px solid #BDBDBD;52    border-radius: 18px;53    color: #555;54    display: flex;55    align-items: center;56    justify-content: center;57    text-align: center;58    font-size: 24px;59    line-height: 1.2;60  }61  .prod-info {62    flex: 1;63    padding-right: 48px;64  }65  .prod-title {66    font-size: 46px;67    line-height: 58px;68    font-weight: 700;69    color: #FFFFFF;70    margin-top: 6px;71  }72  .prod-price {73    margin-top: 12px;74    font-size: 44px;75    font-weight: 700;76    color: #FFFFFF;77  }78 79  /* Dropdown */80  .dropdown {81    margin: 28px 48px 0 48px;82    border: 2px solid #383838;83    border-radius: 18px;84    height: 140px;85    display: flex;86    align-items: center;87    padding: 0 32px;88    position: relative;89    background: rgba(255,255,255,0.02);90  }91  .dropdown .label {92    color: #CFCFCF;93    font-size: 42px;94    margin-right: 14px;95  }96  .dropdown .value {97    color: #FFFFFF;98    font-size: 44px;99    font-weight: 700;100  }101  .dropdown .chev {102    position: absolute;103    right: 28px;104    width: 48px;105    height: 48px;106  }107  .dropdown .chev svg { width: 48px; height: 48px; fill: #C9C9C9; }108 109  /* Bottom bar elements */110  .bottom-price {111    position: absolute;112    left: 48px;113    bottom: 208px;114    font-size: 64px;115    font-weight: 700;116    letter-spacing: 0.3px;117  }118  .watch-btn {119    position: absolute;120    right: 48px;121    bottom: 160px;122    width: 640px;123    height: 150px;124    background: #6FA3FF;125    border-radius: 90px;126    display: flex;127    align-items: center;128    justify-content: center;129    color: #0B2B6B;130    font-size: 54px;131    font-weight: 800;132  }133</style>134</head>135<body>136<div id="render-target">137  <!-- Header -->138  <div class="header">139    <div class="back-btn" aria-label="Back">140      <svg viewBox="0 0 24 24">141        <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>142      </svg>143    </div>144    <div class="title">Options</div>145  </div>146 147  <!-- Product summary row -->148  <div class="product-row">149    <div class="prod-img">[IMG: Laptop Table Stand]</div>150    <div class="prod-info">151      <div class="prod-title">152        Adjustable Laptop Table Stand - Movable Bedside Computer Desk for Sofa and Bed153      </div>154      <div class="prod-price">$19.99</div>155    </div>156  </div>157 158  <!-- Dropdown -->159  <div class="dropdown">160    <div class="label">Colour:</div>161    <div class="value">Black</div>162    <div class="chev">163      <svg viewBox="0 0 24 24">164        <path d="M7 10l5 5 5-5z"/>165      </svg>166    </div>167  </div>168 169  <!-- Bottom actions -->170  <div class="bottom-price">$19.99</div>171  <div class="watch-btn">Watch</div>172</div>173</body>174</html>