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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14    color: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    color: #fff;30    font-size: 34px;31    letter-spacing: 0.2px;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 20px;37  }38  .sb-icon {39    width: 34px;40    height: 34px;41    opacity: 0.9;42    border-radius: 6px;43    background: rgba(255,255,255,0.15);44  }45  .wifi svg, .battery svg {46    display: block;47  }48 49  /* App bar */50  .app-bar {51    position: absolute;52    top: 96px;53    left: 0;54    width: 100%;55    height: 120px;56    display: flex;57    align-items: center;58    padding: 0 36px;59  }60  .back-btn {61    width: 64px;62    height: 64px;63    display: flex;64    align-items: center;65    justify-content: center;66    margin-right: 16px;67  }68  .app-title {69    font-size: 64px;70    font-weight: 700;71  }72 73  /* Content */74  .content {75    position: absolute;76    top: 240px;77    left: 36px;78    right: 36px;79  }80  .product-row {81    display: flex;82    gap: 28px;83    align-items: flex-start;84  }85  .product-img {86    width: 170px;87    height: 170px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    border-radius: 12px;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 26px;96    text-align: center;97    padding: 8px;98  }99  .product-info {100    flex: 1;101    padding-top: 6px;102  }103  .product-title {104    font-size: 40px;105    line-height: 1.3;106    color: #FFFFFF;107    margin-bottom: 18px;108  }109  .price {110    font-size: 48px;111    font-weight: 700;112    color: #FFFFFF;113  }114 115  /* Dropdown */116  .dropdown {117    margin-top: 50px;118    width: 100%;119    height: 120px;120    border: 2px solid #3A3A3A;121    border-radius: 18px;122    background: #0B0B0B;123    display: flex;124    align-items: center;125    justify-content: space-between;126    padding: 0 28px 0 28px;127  }128  .dropdown-label {129    font-size: 40px;130    color: #CFCFCF;131  }132  .dropdown-label .strong {133    color: #FFFFFF;134    font-weight: 700;135  }136  .chevron {137    width: 32px;138    height: 32px;139    opacity: 0.9;140  }141 142  /* Bottom home indicator */143  .home-indicator {144    position: absolute;145    bottom: 46px;146    left: 50%;147    transform: translateX(-50%);148    width: 500px;149    height: 16px;150    background: #FFFFFF;151    border-radius: 8px;152    opacity: 0.85;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div class="status-left">162      <div style="font-weight: 600;">1:06</div>163      <div class="sb-icon"></div>164      <div class="sb-icon"></div>165      <div class="sb-icon"></div>166      <div class="sb-icon" style="width: 12px; height: 12px; border-radius: 50%;"></div>167    </div>168    <div class="status-right">169      <div class="wifi">170        <svg width="40" height="32" viewBox="0 0 24 24" fill="none">171          <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>172          <path d="M5 11c3.8-3.1 10.2-3.1 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>173          <path d="M8.5 14.5c2.1-1.7 4.9-1.7 7 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>174          <circle cx="12" cy="18.5" r="1.8" fill="#fff"/>175        </svg>176      </div>177      <div class="battery">178        <svg width="46" height="24" viewBox="0 0 28 14" fill="none">179          <rect x="1" y="2" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>180          <rect x="3" y="4" width="16" height="6" rx="1" fill="#fff"/>181          <rect x="24" y="4" width="3" height="6" rx="1" fill="#fff"/>182        </svg>183      </div>184    </div>185  </div>186 187  <!-- App Bar -->188  <div class="app-bar">189    <div class="back-btn">190      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">191        <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>192      </svg>193    </div>194    <div class="app-title">Options</div>195  </div>196 197  <!-- Content -->198  <div class="content">199    <div class="product-row">200      <div class="product-img">[IMG: Adjustable Laptop Table]</div>201      <div class="product-info">202        <div class="product-title">203          Adjustable Laptop Table Stand - Movable<br>204          Bedside Computer Desk for Sofa and Bed205        </div>206        <div class="price">$19.99</div>207      </div>208    </div>209 210    <div class="dropdown">211      <div class="dropdown-label">Colour: <span class="strong">Select</span></div>212      <svg class="chevron" viewBox="0 0 24 24">213        <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>214      </svg>215    </div>216  </div>217 218  <!-- Home Indicator -->219  <div class="home-indicator"></div>220 221</div>222</body>223</html>