GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Options Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16    font-family: "Inter", -apple-system, system-ui, Roboto, Arial, sans-serif;17  }18 19  /* Top App Bar */20  .top-bar {21    position: relative;22    display: flex;23    align-items: center;24    padding: 70px 40px 20px 40px; /* leave room for status bar */25  }26  .back {27    width: 72px;28    height: 72px;29    display: flex;30    align-items: center;31    justify-content: center;32    margin-right: 20px;33  }34  .title {35    font-weight: 700;36    font-size: 54px;37    letter-spacing: 0.2px;38  }39  .actions {40    margin-left: auto;41    display: flex;42    gap: 22px;43  }44  .icon-btn {45    width: 96px;46    height: 96px;47    border-radius: 50%;48    background: #2D2D2D;49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .icon-btn svg { width: 48px; height: 48px; }54 55  /* Product Row */56  .product {57    display: flex;58    align-items: center;59    padding: 30px 40px;60    gap: 32px;61  }62  .thumb {63    width: 200px;64    height: 200px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    border-radius: 36px;68    display: flex;69    align-items: center;70    justify-content: center;71    color: #757575;72    font-weight: 600;73    text-align: center;74    padding: 14px;75    box-sizing: border-box;76  }77  .details {78    flex: 1;79  }80  .name {81    font-size: 38px;82    line-height: 1.28;83    font-weight: 600;84    margin-bottom: 18px;85  }86  .price {87    font-size: 44px;88    font-weight: 700;89  }90 91  /* Option Selectors */92  .options {93    padding: 10px 40px;94  }95  .option {96    margin-top: 26px;97    background: #121212;98    border: 2px solid #3A3A3A;99    border-radius: 22px;100    height: 140px;101    display: flex;102    align-items: center;103    justify-content: space-between;104    padding: 0 32px;105    box-sizing: border-box;106  }107  .option-label {108    font-size: 38px;109    color: #BFBFBF;110  }111  .option-label b {112    color: #FFFFFF;113  }114  .caret {115    width: 44px;116    height: 44px;117  }118 119  /* Gesture bar at bottom */120  .gesture {121    position: absolute;122    bottom: 40px;123    left: 50%;124    transform: translateX(-50%);125    width: 300px;126    height: 14px;127    background: #EDEDED;128    border-radius: 10px;129    opacity: 0.85;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Top App Bar -->137  <div class="top-bar">138    <div class="back">139      <svg viewBox="0 0 48 48">140        <path d="M30 8 L14 24 L30 40" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>141      </svg>142    </div>143    <div class="title">Options</div>144 145    <div class="actions">146      <div class="icon-btn">147        <svg viewBox="0 0 48 48">148          <circle cx="22" cy="22" r="12" fill="none" stroke="#FFFFFF" stroke-width="4"></circle>149          <path d="M32 32 L42 42" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></path>150        </svg>151      </div>152      <div class="icon-btn">153        <svg viewBox="0 0 48 48">154          <path d="M6 10 H40 L37 28 H16 L12 12" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>155          <circle cx="20" cy="38" r="3.5" fill="#FFFFFF"></circle>156          <circle cx="32" cy="38" r="3.5" fill="#FFFFFF"></circle>157        </svg>158      </div>159    </div>160  </div>161 162  <!-- Product Row -->163  <div class="product">164    <div class="thumb">[IMG: Skechers Black Sneaker]</div>165    <div class="details">166      <div class="name">Skechers Women's Arch Comfort Sneaker Walking Shoes Ladies Comfortable Shoe</div>167      <div class="price">$37.99</div>168    </div>169  </div>170 171  <!-- Option Selectors -->172  <div class="options">173    <div class="option">174      <div class="option-label">Color: <b>Select</b></div>175      <svg class="caret" viewBox="0 0 24 24">176        <path d="M5 9 L12 16 L19 9" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>177      </svg>178    </div>179 180    <div class="option">181      <div class="option-label">Size: <b>8</b></div>182      <svg class="caret" viewBox="0 0 24 24">183        <path d="M5 9 L12 16 L19 9" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>184      </svg>185    </div>186  </div>187 188  <div class="gesture"></div>189</div>190</body>191</html>