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>Product Detail - Nike Air Force 1 '07 LV8 EMB</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: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar (black) */20  .status-bar {21    height: 120px;22    background: #000;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 40px;27    font-size: 38px;28    letter-spacing: 1px;29  }30  .status-left { flex: 1; opacity: 0.9; }31  .status-center { flex: 1; text-align: center; }32  .status-right { flex: 1; text-align: right; }33 34  /* Header */35  .header {36    height: 140px;37    display: flex;38    align-items: center;39    padding: 0 36px;40    border-bottom: 1px solid #eaeaea;41    background: #fff;42  }43  .header .title {44    font-size: 48px;45    font-weight: 700;46    margin-left: 24px;47    flex: 1;48    white-space: nowrap;49    overflow: hidden;50    text-overflow: ellipsis;51  }52  .icon-btn {53    width: 72px; height: 72px;54    display: inline-flex;55    align-items: center; justify-content: center;56    border-radius: 12px;57  }58  .icon {59    width: 44px; height: 44px; fill: none; stroke: #111; stroke-width: 3;60  }61 62  /* Progress bar */63  .progress {64    height: 24px;65    background: #f5f5f5;66  }67  .progress .line {68    height: 6px;69    background: #e0e0e0;70    margin: 9px 120px;71    border-radius: 4px;72    position: relative;73  }74  .progress .line::after {75    content: "";76    position: absolute;77    left: 80px; top: 0;78    height: 6px; width: 260px;79    background: #bdbdbd;80    border-radius: 4px;81  }82 83  /* Content */84  .content {85    padding: 36px;86  }87  .product-visual {88    display: flex;89    gap: 28px;90    align-items: flex-start;91  }92  .img-ph {93    width: 560px; height: 560px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center;97    color: #757575; font-size: 32px; text-align: center;98  }99 100  .section {101    margin-top: 48px;102  }103  .label {104    color: #6b6b6b;105    font-size: 40px;106    margin-bottom: 16px;107  }108  .title-lg {109    font-size: 70px;110    line-height: 1.1;111    font-weight: 800;112    margin: 8px 0 24px 0;113  }114  .price-row {115    display: flex; align-items: baseline; gap: 18px;116    margin: 12px 0;117  }118  .price {119    font-size: 46px;120    font-weight: 700;121  }122  .mrp {123    font-size: 42px;124    color: #8a8a8a;125  }126  .offer {127    font-size: 42px;128    color: #2e7d32;129    margin-top: 8px;130  }131  .subtle {132    color: #9e9e9e;133    font-size: 36px;134    line-height: 1.35;135  }136  .desc {137    margin-top: 60px;138    font-size: 42px;139    line-height: 1.6;140    color: #222;141  }142  .bullets {143    margin-top: 36px;144    padding-left: 28px;145  }146  .bullets li {147    font-size: 40px;148    line-height: 1.6;149    margin: 8px 0;150  }151  .link {152    color: #9e9e9e;153    font-size: 40px;154    margin-top: 40px;155    text-decoration: underline;156  }157 158  /* Bottom home indicator area */159  .home-indicator-zone {160    position: absolute;161    left: 0; right: 0; bottom: 0;162    height: 120px;163    background: #000;164    display: flex; align-items: center; justify-content: center;165  }166  .home-indicator {167    width: 260px; height: 10px; border-radius: 8px; background: #d9d9d9;168    opacity: 0.8;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Top status bar -->176  <div class="status-bar">177    <div class="status-left">2:59</div>178    <div class="status-center">• • • • •</div>179    <div class="status-right">◤ ◥</div>180  </div>181 182  <!-- Header with back and actions -->183  <div class="header">184    <div class="icon-btn" aria-label="Back">185      <svg class="icon" viewBox="0 0 24 24">186        <path d="M15 19L8 12l7-7" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188    </div>189    <div class="title">Nike Air Force 1 '07 LV8 EMB</div>190    <div class="icon-btn" aria-label="Search">191      <svg class="icon" viewBox="0 0 24 24">192        <circle cx="11" cy="11" r="7"></circle>193        <path d="M20 20l-4-4"></path>194      </svg>195    </div>196    <div class="icon-btn" aria-label="Bag">197      <svg class="icon" viewBox="0 0 24 24">198        <path d="M6 9h12l-1 11H7L6 9z"></path>199        <path d="M9 9V7a3 3 0 0 1 6 0v2" stroke-linecap="round"></path>200      </svg>201    </div>202  </div>203 204  <!-- Thin progress -->205  <div class="progress">206    <div class="line"></div>207  </div>208 209  <!-- Content -->210  <div class="content">211    <div class="product-visual section">212      <div class="img-ph">[IMG: Grey Nike Air Force 1 Sneaker]</div>213    </div>214 215    <div class="section">216      <div class="label">Shoes</div>217      <div class="title-lg">Nike Air Force 1 '07 LV8 EMB</div>218 219      <div class="price-row">220        <div class="price">₹ 10 257.00</div>221        <div class="mrp">MRP : ₹ 10 795.00</div>222      </div>223      <div class="offer">4% off</div>224 225      <div class="section subtle">226        Incl. of taxes<br>227        (Also includes all applicable duties)228      </div>229 230      <div class="desc">231        Quench your thirst for style with this salty take on the hoops original. Preserving everything you know best—'80s construction, bold details and nothin'-but-net style—, its cracked leather, salt-washed colours and weathered accents maintain its status as the coveted off-court shoe.232      </div>233 234      <ul class="bullets">235        <li>Shown: Summit White/Blue Whisper/Football Grey/White</li>236        <li>Style: DV0787-100</li>237        <li>Country/Region of Origin: Vietnam</li>238      </ul>239 240      <div class="link">View Product Details</div>241    </div>242  </div>243 244  <!-- Bottom home indicator -->245  <div class="home-indicator-zone">246    <div class="home-indicator"></div>247  </div>248</div>249</body>250</html>