GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Nike Go - Product Page</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    left: 0; top: 0;21    width: 100%; height: 120px;22    background: #000;23    color: #fff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30    font-size: 40px;31  }32  .status-icons {33    display: flex; gap: 18px; align-items: center;34  }35  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: .85; }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 120px; left: 0;41    width: 100%; height: 120px;42    background: #fff;43    display: flex; align-items: center; justify-content: space-between;44    padding: 0 30px;45    box-sizing: border-box;46    border-bottom: 1px solid #eee;47  }48  .app-left, .app-right { display: flex; align-items: center; gap: 24px; }49  .title { font-size: 50px; font-weight: 700; color: #111; }50 51  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #111; stroke-width: 6; }52 53  /* Image strip */54  .image-strip {55    position: absolute;56    top: 240px; left: 0;57    width: 100%; height: 220px;58    display: flex; gap: 18px;59    padding: 0 28px;60    box-sizing: border-box;61  }62  .thumb {63    flex: 1;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex; align-items: center; justify-content: center;67    color: #757575; font-size: 34px;68  }69  .out-of-stock {70    position: absolute;71    top: 308px; /* centered vertically over strip */72    left: 0; right: 0;73    text-align: center;74    color: #7a7a7a;75    font-size: 42px;76    font-weight: 600;77  }78 79  /* Content */80  .content {81    position: absolute;82    top: 480px;83    left: 0;84    width: 100%;85    padding: 0 48px;86    box-sizing: border-box;87  }88  .subhead {89    font-size: 44px; color: #111; line-height: 1.3; margin-top: 12px;90  }91  .product-name {92    font-size: 80px; font-weight: 800; margin: 22px 0 24px 0;93  }94  .price {95    font-size: 50px; font-weight: 700; margin-bottom: 10px;96  }97  .muted {98    color: #8b8b8b; font-size: 36px; line-height: 1.3;99  }100  .muted.small { font-size: 32px; }101 102  .desc {103    margin-top: 44px;104    font-size: 40px; line-height: 1.7; color: #111;105  }106  .bullets {107    margin-top: 40px;108    font-size: 40px;109    line-height: 1.9;110  }111  .link {112    margin-top: 40px; font-size: 44px; color: #3b3b3b; font-weight: 600;113  }114 115  /* Select size */116  .size-picker {117    margin-top: 36px;118    height: 160px;119    border-radius: 80px;120    border: 1px solid #d9d9d9;121    display: flex; align-items: center; justify-content: space-between;122    padding: 0 48px;123    box-sizing: border-box;124    font-size: 48px; color: #111; font-weight: 700;125    background: #fafafa;126  }127  .caret {128    width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 22px solid #111;129    margin-left: 12px;130  }131 132  /* Add to Bag button */133  .bottom-cta {134    position: absolute;135    left: 48px;136    right: 48px;137    bottom: 80px;138    height: 170px;139    background: #0a0a0a;140    color: #fff;141    border-radius: 90px;142    display: flex; align-items: center; justify-content: center;143    font-size: 58px; font-weight: 800;144    letter-spacing: 0.5px;145  }146 147  /* Bottom safe-area indicator */148  .home-indicator {149    position: absolute;150    bottom: 24px; left: 50%;151    width: 420px; height: 12px; transform: translateX(-50%);152    background: #cfcfcf; border-radius: 6px;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>8:11</div>162    <div class="status-icons">163      <div class="dot"></div>164      <div class="dot"></div>165      <div class="dot"></div>166      <div class="dot"></div>167      <div class="dot"></div>168      <svg width="36" height="36" viewBox="0 0 24 24">169        <path fill="#fff" d="M17 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm1 13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10z"/>170      </svg>171    </div>172  </div>173 174  <!-- App Bar -->175  <div class="app-bar">176    <div class="app-left">177      <div class="icon-btn" aria-label="Back">178        <svg viewBox="0 0 24 24">179          <path d="M15.5 4.5L8 12l7.5 7.5" />180        </svg>181      </div>182      <div class="title">Nike Go</div>183    </div>184    <div class="app-right">185      <div class="icon-btn" aria-label="Search">186        <svg viewBox="0 0 24 24">187          <circle cx="11" cy="11" r="7" />188          <path d="M20 20l-4-4" />189        </svg>190      </div>191      <div class="icon-btn" aria-label="Bag">192        <svg viewBox="0 0 24 24">193          <path d="M6 8h12l-1 12H7L6 8z" />194          <path d="M9 8V6a3 3 0 0 1 6 0v2" />195        </svg>196      </div>197    </div>198  </div>199 200  <!-- Image Thumbnails -->201  <div class="image-strip">202    <div class="thumb">[IMG: Leggings Preview]</div>203    <div class="thumb">[IMG: Leggings Side]</div>204    <div class="thumb">[IMG: Leggings Back]</div>205  </div>206  <div class="out-of-stock">Out of Stock</div>207 208  <!-- Content -->209  <div class="content">210    <div class="subhead">Women's Firm-Support High-Waisted Leggings with Pockets</div>211    <div class="product-name">Nike Go</div>212 213    <div class="price">MRP : ₹ 5 795.00</div>214    <div class="muted">Incl. of taxes</div>215    <div class="muted small">(Also includes all applicable duties)</div>216 217    <div class="desc">218      Push yourself forwards with the right balance of support and comfort with our Nike Go leggings.219      Squat-proof—even during your toughest workouts—their sleek, midweight InfinaLock fabric feels220      compressive and supportive in all the right places. Multiple pockets let you carry everything you could221      need, whether you're hitting the trail, the gym or the mat.222    </div>223 224    <div class="bullets">225      • Shown: Black/Black<br>226      • Style: DQ5669-010<br>227      • Country/Region of Origin: China228    </div>229 230    <div class="link">View Product Details</div>231 232    <div class="size-picker">233      <div>Select Size</div>234      <div class="caret"></div>235    </div>236  </div>237 238  <!-- Bottom CTA -->239  <div class="bottom-cta">Add to Bag</div>240 241  <!-- Home indicator -->242  <div class="home-indicator"></div>243</div>244</body>245</html>