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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000; color: #FFFFFF;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #eaeaea;24    font-weight: 600;25    font-size: 34px;26    opacity: 0.9;27  }28  .status-icons { display: flex; gap: 24px; align-items: center; }29 30  /* Header */31  .header {32    display: flex;33    align-items: center;34    justify-content: space-between;35    padding: 0 40px;36    height: 150px;37  }38  .header-left {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .back-icon {44    width: 60px; height: 60px;45  }46  .title {47    font-size: 64px;48    font-weight: 700;49    letter-spacing: 0.2px;50  }51  .actions {52    display: flex;53    gap: 28px;54  }55  .icon-circle {56    width: 120px; height: 120px;57    background: #2B2B2B;58    border-radius: 60px;59    display: flex; align-items: center; justify-content: center;60  }61  .icon-circle svg { width: 56px; height: 56px; }62 63  /* Product section */64  .product {65    display: flex;66    gap: 36px;67    padding: 20px 40px;68    align-items: center;69  }70  .product-img {71    width: 200px; height: 200px;72    background: #E0E0E0;73    border: 1px solid #BDBDBD;74    border-radius: 28px;75    display: flex; align-items: center; justify-content: center;76    color: #757575; font-size: 26px; text-align: center; padding: 12px;77  }78  .product-info {79    flex: 1;80  }81  .product-title {82    font-size: 42px; line-height: 1.25; font-weight: 600; color: #f5f5f5;83    margin-bottom: 18px;84  }85  .product-price {86    font-size: 46px; font-weight: 700;87  }88 89  /* Dropdowns */90  .dropdown {91    margin: 26px 40px;92    border: 2px solid #3F3F3F;93    background: #0A0A0A;94    border-radius: 24px;95    height: 120px;96    display: flex; align-items: center; justify-content: space-between;97    padding: 0 36px;98  }99  .dropdown-label {100    font-size: 40px;101    color: #dcdcdc;102  }103  .dropdown-label b { color: #ffffff; }104  .chevron {105    width: 40px; height: 40px;106  }107 108  /* Bottom bar */109  .bottom-bar {110    position: absolute;111    left: 40px; right: 40px; bottom: 140px;112    display: flex; align-items: center; justify-content: space-between;113  }114  .bottom-price {115    font-size: 72px; font-weight: 700;116  }117  .watch-btn {118    width: 560px; height: 140px;119    background: #6FA6FF;120    border-radius: 80px;121    display: flex; align-items: center; justify-content: center;122    color: #0D1B2A; font-size: 48px; font-weight: 800;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status-bar">131    <div>8:59</div>132    <div class="status-icons">133      <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" opacity="0.8"><circle cx="12" cy="12" r="12"/></svg>134      <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" opacity="0.8"><rect x="4" y="6" width="16" height="12" rx="2"/></svg>135      <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" opacity="0.8"><path d="M12 2l5 9H7l5-9z"/></svg>136    </div>137  </div>138 139  <!-- Header -->140  <div class="header">141    <div class="header-left">142      <svg class="back-icon" viewBox="0 0 24 24">143        <path d="M15 4L7 12l8 8" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144      </svg>145      <div class="title">Options</div>146    </div>147    <div class="actions">148      <div class="icon-circle">149        <svg viewBox="0 0 24 24">150          <circle cx="11" cy="11" r="7" stroke="#FFFFFF" stroke-width="2" fill="none"/>151          <path d="M20 20l-4-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>152        </svg>153      </div>154      <div class="icon-circle">155        <svg viewBox="0 0 24 24" fill="none">156          <path d="M7 6h13l-2 9H8L6 6h1z" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>157          <circle cx="10" cy="20" r="2" fill="#FFFFFF"/>158          <circle cx="17" cy="20" r="2" fill="#FFFFFF"/>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Product -->165  <div class="product">166    <div class="product-img">[IMG: Skechers Slip-on Sneakers]</div>167    <div class="product-info">168      <div class="product-title">169        Skechers Women's Arch Comfort Sneaker<br>170        Walking Shoes Ladies Comfortable Shoe171      </div>172      <div class="product-price">$37.99</div>173    </div>174  </div>175 176  <!-- Dropdowns -->177  <div class="dropdown">178    <div class="dropdown-label">Color: <b>Gray</b></div>179    <svg class="chevron" viewBox="0 0 24 24">180      <path d="M6 9l6 6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>181    </svg>182  </div>183 184  <div class="dropdown">185    <div class="dropdown-label">Size: <b>8</b></div>186    <svg class="chevron" viewBox="0 0 24 24">187      <path d="M6 9l6 6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>188    </svg>189  </div>190 191  <!-- Bottom controls -->192  <div class="bottom-bar">193    <div class="bottom-price">$37.99</div>194    <div class="watch-btn">Watch</div>195  </div>196 197</div>198</body>199</html>