GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Options UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, 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 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    right: 0;23    height: 120px;24    padding: 0 40px;25    display: flex;26    align-items: center;27    color: #fff;28  }29  .status-bar .time { font-size: 36px; letter-spacing: 0.5px; }30  .status-icons { margin-left: auto; display: flex; gap: 22px; align-items: center; }31  .status-icons div { width: 32px; height: 32px; background: #FFFFFF; opacity: 0.25; border-radius: 6px; }32 33  /* Header */34  .header {35    position: absolute;36    top: 120px;37    left: 0;38    right: 0;39    padding: 0 40px;40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .header .title { font-size: 60px; font-weight: 600; }45  .icon { width: 48px; height: 48px; }46 47  /* Content */48  .content { position: absolute; top: 240px; left: 0; right: 0; padding: 0 48px; }49  .product { display: flex; gap: 36px; align-items: flex-start; }50  .img-placeholder {51    width: 180px; height: 180px;52    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;53    display: flex; align-items: center; justify-content: center;54    color: #757575; font-size: 26px; text-align: center; padding: 10px;55  }56  .product-info { flex: 1; }57  .product-title { font-size: 38px; line-height: 1.25; color: #EAEAEA; }58  .product-price { font-size: 46px; font-weight: 600; margin-top: 16px; color: #FFFFFF; }59 60  .selects { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }61  .select-box {62    border: 2px solid #4A4A4A; border-radius: 24px;63    height: 120px; padding: 0 32px;64    display: flex; align-items: center; justify-content: space-between;65    background: transparent;66  }67  .select-box .label { font-size: 36px; color: #CFCFCF; }68  .select-box .label .value { color: #FFFFFF; font-weight: 700; }69  .chevron { width: 36px; height: 36px; }70 71  /* Footer */72  .footer {73    position: absolute;74    bottom: 160px;75    left: 48px;76    right: 48px;77    display: flex;78    align-items: center;79  }80  .total { font-size: 52px; font-weight: 600; }81  .watch-btn {82    margin-left: auto;83    width: 540px; height: 140px;84    border-radius: 90px;85    background: #6FA5FF;86    display: flex; align-items: center; justify-content: center;87    color: #0A0A0A; font-size: 44px; font-weight: 700;88  }89 90  .home-indicator {91    position: absolute;92    bottom: 60px;93    left: 50%;94    transform: translateX(-50%);95    width: 420px; height: 12px;96    background: #D7D7D7; border-radius: 6px; opacity: 0.5;97  }98</style>99</head>100<body>101<div id="render-target">102 103  <div class="status-bar">104    <div class="time">4:59</div>105    <div class="status-icons">106      <div></div><div></div><div></div><div></div>107    </div>108  </div>109 110  <div class="header">111    <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">112      <path fill="#FFFFFF" d="M15.5 19.5L7 12l8.5-7.5v3.5L11 12l4.5 4.5v3z"/>113    </svg>114    <div class="title">Options</div>115  </div>116 117  <div class="content">118    <div class="product">119      <div class="img-placeholder">[IMG: Adidas Trail Running Shoes]</div>120      <div class="product-info">121        <div class="product-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>122        <div class="product-price">$100.00</div>123      </div>124    </div>125 126    <div class="selects">127      <div class="select-box">128        <div class="label">US Shoe Size: <span class="value">9</span></div>129        <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">130          <path fill="#FFFFFF" d="M7 10l5 5 5-5z"/>131        </svg>132      </div>133      <div class="select-box">134        <div class="label">Fashion Color: <span class="value">Beige</span></div>135        <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">136          <path fill="#FFFFFF" d="M7 10l5 5 5-5z"/>137        </svg>138      </div>139    </div>140  </div>141 142  <div class="footer">143    <div class="total">$100.00</div>144    <div class="watch-btn">Watch</div>145  </div>146 147  <div class="home-indicator"></div>148</div>149</body>150</html>