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>Product Options - Dark UI</title>7<style>8  body{9    margin:0;10    padding:0;11    background:transparent;12    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;13  }14  #render-target{15    width:1080px;16    height:2400px;17    position:relative;18    overflow:hidden;19    background:#000000;20    color:#FFFFFF;21  }22 23  /* Status bar */24  .status-bar{25    height:88px;26    padding:0 28px;27    display:flex;28    align-items:center;29    justify-content:space-between;30    color:#EDEDED;31    font-size:36px;32    letter-spacing:0.5px;33  }34  .status-icons{35    display:flex;36    align-items:center;37    gap:18px;38  }39  .icon-dot{width:10px;height:10px;background:#CFCFCF;border-radius:50%;}40  .icon-shape{width:26px;height:26px;border:2px solid #EAEAEA;border-radius:4px;}41  .icon-battery{width:36px;height:18px;border:2px solid #EAEAEA;border-radius:3px;position:relative;}42  .icon-battery:after{content:"";position:absolute;right:-6px;top:4px;width:4px;height:10px;background:#EAEAEA;border-radius:1px;}43  .wifi{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #EAEAEA;border-radius:3px;}44 45  /* Header */46  .header{47    padding:18px 28px 8px 20px;48    display:flex;49    align-items:center;50    gap:18px;51  }52  .back-btn{53    width:72px;height:72px;border-radius:36px;54    display:flex;align-items:center;justify-content:center;55  }56  .title{57    font-size:72px;58    font-weight:700;59    letter-spacing:0.2px;60  }61  .header-actions{62    margin-left:auto;63    display:flex;gap:28px;64  }65  .circle-btn{66    width:104px;height:104px;border-radius:52px;background:#2E2E2E;67    display:flex;align-items:center;justify-content:center;68  }69  .svg-icon{fill:#FFFFFF}70 71  /* Product row */72  .product{73    padding:12px 36px 8px 36px;74    display:flex; gap:28px; align-items:flex-start;75  }76  .thumb{77    width:220px;height:180px;border-radius:28px;background:#E0E0E0;border:1px solid #BDBDBD;78    display:flex;align-items:center;justify-content:center;color:#555; font-size:28px; text-align:center; padding:10px;79  }80  .p-info{flex:1;}81  .p-title{font-size:40px;line-height:1.28;color:#EDEDED;margin-bottom:12px;}82  .p-price{font-size:44px;font-weight:700;color:#FFFFFF;}83 84  /* Fields */85  .form{86    padding:20px 36px 0 36px;87    display:flex;flex-direction:column;gap:28px;88  }89  .field{90    position:relative;91    border:2px solid #3C3C3C;92    border-radius:22px;93    padding:30px 80px 30px 28px;94    color:#CFCFCF;95    font-size:36px;96    background:#0C0C0C;97  }98  .field b{color:#FFFFFF;}99  .chevron{100    position:absolute; right:28px; top:50%; transform:translateY(-50%);101    width:28px;height:28px;102  }103  .chevron svg{fill:#EAEAEA}104 105  /* Dropdown panel overlay */106  .dropdown-panel{107    position:absolute;108    left:36px;109    top:720px;110    width:1008px;111    height:1200px;112    background:#3A3A3A;113    border-radius:32px;114    box-shadow:0 12px 40px rgba(0,0,0,0.6);115    padding:40px 28px;116    overflow:hidden;117  }118  .dropdown-scroll{119    height:100%; overflow-y:auto; padding-right:10px;120  }121  .option{122    font-size:40px;123    color:#EAEAEA;124    padding:26px 6px;125    border-bottom:1px solid rgba(255,255,255,0.06);126  }127  .muted{color:#BDBDBD;}128  .spacer-1{height:10px;}129  .home-indicator{130    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);131    width:300px;height:10px;border-radius:6px;background:#E0E0E0;opacity:0.85;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status bar -->139  <div class="status-bar">140    <div>8:58</div>141    <div class="status-icons">142      <div class="icon-shape"></div>143      <div class="icon-dot"></div>144      <div class="icon-dot"></div>145      <div class="icon-dot"></div>146      <div class="wifi"></div>147      <div class="icon-battery"></div>148    </div>149  </div>150 151  <!-- Header -->152  <div class="header">153    <div class="back-btn">154      <svg class="svg-icon" width="40" height="40" viewBox="0 0 24 24">155        <path d="M14 18l-6-6 6-6v12z"/>156      </svg>157    </div>158    <div class="title">Options</div>159    <div class="header-actions">160      <div class="circle-btn">161        <svg class="svg-icon" width="44" height="44" viewBox="0 0 24 24">162          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>163        </svg>164      </div>165      <div class="circle-btn">166        <svg class="svg-icon" width="44" height="44" viewBox="0 0 24 24">167          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h8.45c.75 0 1.41-.41 1.75-1.03l3.24-5.88-1.74-.97L16.45 10H8.53l-1.1-2.45L6.16 6H2v2h2l3.6 7.59-1.35 2.44C5.52 19.37 6.21 20 7 20h12v-2H7.42l.74-1.36z"/>168        </svg>169      </div>170    </div>171  </div>172 173  <!-- Product Row -->174  <div class="product">175    <div class="thumb">[IMG: Black slip-on sneaker]</div>176    <div class="p-info">177      <div class="p-title">Skechers Women's Arch Comfort Sneaker Walking Shoes Ladies Comfortable Shoe</div>178      <div class="p-price">$37.99</div>179    </div>180  </div>181 182  <!-- Form Fields -->183  <div class="form">184    <div class="field">185      Color: <b>Select</b>186      <div class="chevron">187        <svg width="28" height="28" viewBox="0 0 24 24">188          <path d="M7 10l5 5 5-5z"/>189        </svg>190      </div>191    </div>192    <div class="field">193      Size: <b>Select</b>194      <div class="chevron">195        <svg width="28" height="28" viewBox="0 0 24 24">196          <path d="M7 10l5 5 5-5z"/>197        </svg>198      </div>199    </div>200  </div>201 202  <!-- Open dropdown panel -->203  <div class="dropdown-panel">204    <div class="dropdown-scroll">205      <div class="option" style="font-weight:600;">No selection</div>206      <div class="option">6 <span class="muted">(out of stock)</span></div>207      <div class="option">7</div>208      <div class="option">8</div>209      <div class="option">9 <span class="muted">(out of stock)</span></div>210      <div class="option">10</div>211      <div class="option">6.5 <span class="muted">(out of stock)</span></div>212      <div class="option">7.5 <span class="muted">(out of stock)</span></div>213      <div class="option">8.5</div>214      <div class="spacer-1"></div>215    </div>216  </div>217 218  <!-- Home indicator -->219  <div class="home-indicator"></div>220</div>221</body>222</html>