GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Nike Sizes Bottom Sheet</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #000;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 40px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 1px;30  }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .dot {38    width: 22px;39    height: 22px;40    background: #fff;41    border-radius: 50%;42    opacity: 0.9;43  }44  .wifi {45    width: 34px; height: 34px;46    border: 3px solid #fff;47    border-radius: 50%;48    position: relative;49  }50  .battery {51    width: 36px; height: 22px;52    border: 3px solid #fff;53    border-radius: 4px;54    position: relative;55  }56  .battery::after {57    content: "";58    position: absolute;59    right: -8px; top: 6px;60    width: 6px; height: 10px; background: #fff; border-radius: 2px;61  }62 63  /* App bar */64  .app-bar {65    position: absolute;66    top: 120px;67    left: 0;68    width: 1080px;69    height: 120px;70    background: #fff;71    display: flex;72    align-items: center;73    padding: 0 28px;74    box-sizing: border-box;75    border-bottom: 1px solid #eee;76  }77  .app-title {78    font-size: 46px;79    font-weight: 700;80    color: #222;81    margin-left: 16px;82  }83  .app-actions {84    margin-left: auto;85    display: flex;86    gap: 30px;87  }88  .icon-btn {89    width: 72px; height: 72px;90    display: flex; align-items: center; justify-content: center;91    border-radius: 16px;92  }93  .icon {94    width: 48px; height: 48px;95    fill: none; stroke: #222; stroke-width: 3px;96  }97 98  /* Product content underlay */99  .content {100    position: absolute;101    top: 240px;102    left: 0;103    width: 100%;104    height: 2160px;105    box-sizing: border-box;106    padding: 24px 40px;107    color: #222;108  }109  .images-row {110    display: flex;111    gap: 24px;112    margin-bottom: 24px;113  }114  .img-ph {115    width: 320px; height: 160px;116    background: #E0E0E0;117    border: 1px solid #BDBDBD;118    display: flex; align-items: center; justify-content: center;119    color: #757575; font-size: 28px;120  }121  .chip {122    display: inline-block;123    margin: 10px 0 18px 0;124    padding: 16px 24px;125    color: #777;126    background: #f3f3f3;127    border-radius: 28px;128    font-size: 30px;129  }130  .subtitle {131    font-size: 40px;132    line-height: 54px;133    color: #333;134    margin-bottom: 20px;135  }136  .product-title {137    font-size: 72px; font-weight: 800; margin: 16px 0 8px 0;138  }139  .price {140    font-size: 42px; font-weight: 700; margin-top: 14px;141  }142  .tax {143    font-size: 32px; color: #666; margin-top: 8px;144  }145  .desc {146    font-size: 36px; color: #222; line-height: 52px;147    margin-top: 26px;148  }149 150  /* Overlay and bottom sheet */151  .overlay {152    position: absolute;153    top: 0; left: 0;154    width: 1080px; height: 2400px;155    background: rgba(0, 0, 0, 0.5);156  }157  .bottom-sheet {158    position: absolute;159    left: 0; right: 0; bottom: 0;160    width: 1080px;161    height: 980px;162    background: #fff;163    border-top-left-radius: 36px;164    border-top-right-radius: 36px;165    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);166    overflow: hidden;167  }168  .sheet-header {169    height: 140px;170    display: flex;171    align-items: center;172    padding: 0 40px;173    box-sizing: border-box;174    border-bottom: 1px solid #eee;175  }176  .sheet-header .title {177    font-size: 56px; font-weight: 800; color: #222;178  }179  .sheet-header .cancel {180    margin-left: auto;181    font-size: 46px; color: #8a8a8a;182  }183  .size-row {184    height: 150px;185    display: flex;186    align-items: center;187    padding: 0 40px;188    box-sizing: border-box;189    border-bottom: 1px solid #e9e9e9;190    font-size: 48px;191    color: #222;192  }193  .size-row .note {194    margin-left: 36px;195    font-size: 42px;196    color: #2f2f2f;197  }198  .home-indicator {199    position: absolute;200    bottom: 18px;201    left: 50%;202    transform: translateX(-50%);203    width: 400px; height: 12px;204    background: #ddd;205    border-radius: 12px;206  }207 208  /* back arrow style */209  .back-icon {210    width: 56px; height: 56px;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Status bar -->218  <div class="status-bar">219    <div>8:11</div>220    <div class="status-icons">221      <div class="dot"></div>222      <div class="dot"></div>223      <div class="dot"></div>224      <div class="wifi"></div>225      <div class="battery"></div>226    </div>227  </div>228 229  <!-- App bar -->230  <div class="app-bar">231    <div class="icon-btn">232      <svg class="back-icon" viewBox="0 0 24 24">233        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>234      </svg>235    </div>236    <div class="app-title">Nike Go</div>237    <div class="app-actions">238      <div class="icon-btn">239        <svg class="icon" viewBox="0 0 24 24">240          <circle cx="11" cy="11" r="7"></circle>241          <line x1="17" y1="17" x2="22" y2="22"></line>242        </svg>243      </div>244      <div class="icon-btn">245        <svg class="icon" viewBox="0 0 24 24">246          <path d="M8 7h8l1 3v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V10l1-3z" stroke="#222"></path>247          <path d="M10 7V5a2 2 0 0 1 4 0v2" stroke="#222"></path>248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Product content (under dim overlay) -->254  <div class="content">255    <div class="images-row">256      <div class="img-ph">[IMG: Leggings - Slide 1]</div>257      <div class="img-ph">[IMG: Leggings - Slide 2]</div>258      <div class="img-ph">[IMG: Leggings - Slide 3]</div>259    </div>260 261    <div class="chip">Out of Stock</div>262 263    <div class="subtitle">Women's Firm-Support High-Waisted Leggings with Pockets</div>264    <div class="product-title">Nike Go</div>265 266    <div class="price">MRP : ₹ 5 795.00</div>267    <div class="tax">Incl. of taxes</div>268    <div class="tax">(Also includes all applicable duties)</div>269 270    <div class="desc">271      Push yourself forwards with the right balance of support and comfort with our Nike Go leggings.272      Designed for performance and daily wear, they deliver a firm hold with high-waisted coverage and273      convenient pockets.274    </div>275  </div>276 277  <!-- Overlay and Sizes bottom sheet -->278  <div class="overlay"></div>279 280  <div class="bottom-sheet">281    <div class="sheet-header">282      <div class="title">Sizes</div>283      <div class="cancel">Cancel</div>284    </div>285 286    <div class="size-row">287      <div>XS</div>288      <div class="note">Just a few left</div>289    </div>290    <div class="size-row">291      <div>S</div>292    </div>293    <div class="size-row">294      <div>M</div>295    </div>296    <div class="size-row">297      <div>L</div>298    </div>299    <div class="size-row" style="border-bottom: none;">300      <div>XL</div>301    </div>302  </div>303 304  <!-- Home indicator bar -->305  <div class="home-indicator"></div>306 307</div>308</body>309</html>