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>Size Selection 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: #6b6b6b;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; width: 100%; height: 120px;20    background: #4a4a4a; color: #fff;21  }22  .status-content {23    position: absolute; top: 28px; left: 40px; right: 40px; height: 64px;24    display: flex; align-items: center; justify-content: space-between;25    font-weight: 600;26  }27  .status-left { display: flex; align-items: center; gap: 24px; }28  .status-right { display: flex; align-items: center; gap: 26px; }29  .status-icon {30    width: 24px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.75);31  }32  .wifi-icon, .battery-icon { display: inline-flex; align-items: center; }33  .wifi-icon svg, .battery-icon svg { width: 36px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; }34 35  /* Product image area */36  .product-area {37    position: absolute; top: 120px; left: 0; width: 100%; height: 780px;38  }39  .product-img {40    position: absolute; left: 0; top: 0; width: 100%; height: 100%;41    background: #E0E0E0; border: 1px solid #BDBDBD;42    display: flex; justify-content: center; align-items: center; color: #757575;43    font-size: 34px;44  }45 46  /* Back chevron */47  .back-btn {48    position: absolute; top: 220px; left: 24px; width: 64px; height: 64px;49    display: flex; align-items: center; justify-content: center;50  }51  .back-btn svg { width: 34px; height: 34px; stroke: #111; stroke-width: 4; fill: none; }52 53  /* Info banner */54  .info-banner {55    position: absolute; top: 190px; left: 60px; width: 900px; min-height: 180px;56    background: #ffffff; border-radius: 6px;57    box-shadow: 0 10px 20px rgba(0,0,0,0.25);58    display: flex; align-items: center; gap: 30px; padding: 34px 40px;59  }60  .info-icon {61    width: 52px; height: 52px; border: 2px solid #999; border-radius: 26px;62    display: flex; align-items: center; justify-content: center; color: #777; font-weight: 700;63  }64  .info-text {65    font-size: 36px; line-height: 1.35; color: #222;66  }67 68  /* Size guide pill */69  .size-guide {70    position: absolute; top: 740px; left: 60px; height: 100px; width: 300px;71    background: #fff; border-radius: 50px;72    box-shadow: 0 8px 18px rgba(0,0,0,0.2);73    display: flex; align-items: center; gap: 20px; padding: 0 28px;74    font-size: 34px; font-weight: 600; color: #222;75  }76  .tape-icon svg { width: 40px; height: 40px; stroke: #333; stroke-width: 2; fill: none; }77 78  /* Close floating button */79  .close-btn {80    position: absolute; top: 860px; right: 60px; width: 100px; height: 100px;81    background: #ffffff; border-radius: 50%;82    box-shadow: 0 6px 14px rgba(0,0,0,0.25);83    display: flex; align-items: center; justify-content: center;84  }85  .close-btn svg { width: 42px; height: 42px; stroke: #222; stroke-width: 5; }86 87  /* Bottom sheet */88  .bottom-sheet {89    position: absolute; left: 0; right: 0; top: 920px; bottom: 0;90    background: #ffffff; border-top-left-radius: 0; border-top-right-radius: 0;91    box-shadow: 0 -10px 22px rgba(0,0,0,0.2);92  }93  .sheet-header {94    font-size: 44px; font-weight: 700; color: #222; padding: 48px 60px 24px;95  }96  .divider {97    height: 3px; background: #E3E3E3; margin: 0 60px 20px;98  }99  .size-list {100    list-style: none; padding: 0 60px; margin: 0;101  }102  .size-list li {103    font-size: 48px; color: #111; padding: 52px 0;104    border-bottom: 1px solid transparent;105  }106  .note {107    font-size: 34px; color: #4c4c4c; padding: 40px 60px 0;108  }109 110  /* Home indicator */111  .home-indicator {112    position: absolute; bottom: 36px; left: 50%;113    width: 420px; height: 16px; transform: translateX(-50%);114    background: #777; border-radius: 10px;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-content">124      <div class="status-left">125        <div style="font-size:36px;">4:24</div>126        <div class="status-icon"></div>127        <div class="status-icon"></div>128        <div class="status-icon"></div>129        <div style="width: 10px; height: 10px; border-radius: 5px; background: #fff;"></div>130      </div>131      <div class="status-right">132        <span class="wifi-icon">133          <svg viewBox="0 0 24 24">134            <path d="M2 8c5-4 15-4 20 0"></path>135            <path d="M6 12c3-3 9-3 12 0"></path>136            <path d="M10 16c2-2 4-2 6 0"></path>137            <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>138          </svg>139        </span>140        <span class="battery-icon">141          <svg viewBox="0 0 36 24">142            <rect x="2" y="6" width="26" height="12" rx="2"></rect>143            <rect x="30" y="9" width="4" height="6" rx="1" fill="none" stroke="#fff"></rect>144            <rect x="5" y="9" width="20" height="6" fill="#fff" stroke="none"></rect>145          </svg>146        </span>147      </div>148    </div>149  </div>150 151  <!-- Product area -->152  <div class="product-area">153    <div class="product-img">[IMG: Black leather boot]</div>154  </div>155 156  <!-- Back chevron -->157  <div class="back-btn">158    <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" /></svg>159  </div>160 161  <!-- Info banner -->162  <div class="info-banner">163    <div class="info-icon">i</div>164    <div class="info-text">165      We’ve removed half sizes in shoes. Please see our<br>166      Size Guide for updates.167    </div>168  </div>169 170  <!-- Size guide pill -->171  <div class="size-guide">172    <div class="tape-icon">173      <svg viewBox="0 0 24 24">174        <rect x="2" y="6" width="20" height="12" rx="6"></rect>175        <path d="M6 9 v6 M10 9 v4 M14 9 v3 M18 9 v5" />176      </svg>177    </div>178    <div>Size guide</div>179  </div>180 181  <!-- Close floating button -->182  <div class="close-btn">183    <svg viewBox="0 0 24 24">184      <path d="M5 5 L19 19"></path>185      <path d="M19 5 L5 19"></path>186    </svg>187  </div>188 189  <!-- Bottom sheet -->190  <div class="bottom-sheet">191    <div class="sheet-header">Select size</div>192    <div class="divider"></div>193    <ul class="size-list">194      <li>4</li>195      <li>5</li>196      <li>6</li>197      <li>7</li>198      <li>8</li>199      <li>9</li>200      <li>10</li>201    </ul>202    <div class="note">For store sizes, select in-store pickup</div>203  </div>204 205  <div class="home-indicator"></div>206</div>207</body>208</html>