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 Screen Mock</title>6<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    font-size: 38px;30    letter-spacing: 0.5px;31    color: #fff;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon-circle { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #9E9E9E; }39  .wifi {40    width: 46px; height: 32px;41  }42  .wifi svg, .battery svg { display: block; }43  .battery { width: 60px; height: 32px; }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 120px;49    left: 0;50    width: 1080px;51    height: 140px;52    display: flex;53    align-items: center;54    padding: 0 40px;55  }56  .back-btn {57    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;58    margin-right: 18px;59  }60  .title {61    font-size: 66px;62    font-weight: 700;63  }64 65  /* Product row */66  .product-row {67    position: absolute;68    top: 320px;69    left: 40px;70    right: 40px;71    display: flex;72    align-items: flex-start;73    gap: 28px;74  }75  .img-placeholder {76    width: 170px;77    height: 170px;78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    border-radius: 14px;81    color: #757575;82    display: flex;83    justify-content: center;84    align-items: center;85    font-size: 28px;86    text-align: center;87    padding: 8px;88  }89  .product-info {90    max-width: 690px;91  }92  .product-name {93    font-size: 40px;94    line-height: 56px;95    font-weight: 500;96    margin-top: 6px;97  }98  .price {99    margin-top: 28px;100    font-size: 48px;101    font-weight: 700;102  }103  .dropdown-field {104    margin-left: auto;105    width: 190px;106    height: 86px;107    border: 2px solid #444;108    border-radius: 18px;109    display: flex;110    align-items: center;111    justify-content: flex-end;112    padding-right: 24px;113    background: transparent;114  }115  .dropdown-field svg { fill: #fff; }116 117  /* Dropdown overlay */118  .dropdown-overlay {119    position: absolute;120    top: 520px;121    left: 40px;122    width: 900px;123    background: #323232;124    border-radius: 28px;125    box-shadow: 0 20px 40px rgba(0,0,0,0.6);126    padding: 30px 40px;127  }128  .option {129    font-size: 48px;130    padding: 32px 0;131    border-bottom: 1px solid rgba(255,255,255,0.08);132  }133  .option:last-child { border-bottom: none; }134  .muted { color: #dcdcdc; }135 136  /* Gesture bar */137  .gesture {138    position: absolute;139    bottom: 42px;140    left: 290px;141    width: 500px;142    height: 10px;143    background: #fff;144    border-radius: 6px;145    opacity: 0.9;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status bar -->153  <div class="status-bar">154    <div>1:06</div>155    <div class="status-right">156      <div class="icon-circle"></div>157      <div class="icon-circle"></div>158      <div class="icon-circle"></div>159      <div class="wifi">160        <svg viewBox="0 0 24 24" width="46" height="32">161          <path fill="#fff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>162        </svg>163      </div>164      <div class="battery">165        <svg viewBox="0 0 28 14" width="60" height="32">166          <rect x="1" y="1" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>167          <rect x="3" y="3" width="18" height="8" fill="#fff"/>168          <rect x="24" y="4" width="3" height="6" fill="#fff"/>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- App bar -->175  <div class="app-bar">176    <div class="back-btn">177      <svg viewBox="0 0 24 24" width="54" height="54">178        <path fill="#fff" d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/>179      </svg>180    </div>181    <div class="title">Options</div>182  </div>183 184  <!-- Product Row -->185  <div class="product-row">186    <div class="img-placeholder">[IMG: Adjustable Laptop Table]</div>187    <div class="product-info">188      <div class="product-name">189        Adjustable Laptop Table Stand - Movable<br>190        Bedside Computer Desk for Sofa and Bed191      </div>192      <div class="price">$19.99</div>193    </div>194    <div class="dropdown-field">195      <svg viewBox="0 0 24 24" width="34" height="34">196        <path d="M7 10l5 5 5-5z"/>197      </svg>198    </div>199  </div>200 201  <!-- Dropdown Overlay -->202  <div class="dropdown-overlay">203    <div class="option"><span class="muted">No selection</span></div>204    <div class="option">Black</div>205    <div class="option">Brown</div>206  </div>207 208  <!-- Bottom gesture bar -->209  <div class="gesture"></div>210 211</div>212</body>213</html>