GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Nike Go - Product Detail</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 32px;26    box-sizing: border-box;27    font-size: 34px;28    justify-content: space-between;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .dot {36    width: 18px; height: 18px; background: #fff; border-radius: 50%;37    opacity: 0.85;38  }39  .battery {40    width: 34px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative;41  }42  .battery::after {43    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #fff; border-radius: 1px;44  }45  .battery-fill { position: absolute; left: 3px; top: 3px; height: 10px; width: 22px; background: #fff; }46 47  /* App bar */48  .app-bar {49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 28px;53    box-sizing: border-box;54    border-bottom: 1px solid #e6e6e6;55    background: #fff;56  }57  .back-btn {58    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;59  }60  .app-title {61    font-size: 46px; font-weight: 600; margin-left: 10px;62  }63  .app-actions {64    margin-left: auto;65    display: flex;66    align-items: center;67    gap: 24px;68  }69  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; position: relative; }70  .bag-badge {71    position: absolute; right: -2px; top: -8px;72    background: #000; color: #fff; font-size: 26px; line-height: 26px;73    padding: 2px 8px; border-radius: 14px;74  }75 76  /* Image strip */77  .image-strip {78    display: flex;79    gap: 18px;80    padding: 20px 28px 10px 28px;81    box-sizing: border-box;82    background: #f8f8f8;83  }84  .thumb {85    flex: 1;86    height: 150px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex; align-items: center; justify-content: center;90    color: #757575; font-size: 28px;91  }92  .soldout {93    position: absolute;94    left: 28px;95    top: 350px;96    color: #9e9e9e;97    font-size: 34px;98    font-weight: 600;99  }100 101  /* Content */102  .content {103    padding: 24px 40px;104    box-sizing: border-box;105  }106  .subtitle {107    font-size: 38px;108    line-height: 54px;109    color: #111;110    margin-bottom: 12px;111  }112  .title-main {113    font-size: 64px;114    font-weight: 700;115    margin: 18px 0 10px 0;116  }117  .price {118    font-size: 36px;119    font-weight: 600;120    margin-top: 6px;121  }122  .small-grey {123    font-size: 30px; color: #777; margin-top: 6px;124  }125  .desc {126    margin-top: 28px;127    font-size: 34px;128    line-height: 56px;129    color: #222;130  }131  ul.specs {132    margin-top: 24px;133    padding-left: 40px;134    font-size: 34px;135    line-height: 56px;136  }137  .link {138    margin-top: 24px;139    font-size: 34px;140    color: #1a73e8;141  }142 143  /* Size selector */144  .size-selector {145    margin: 26px 28px 0 28px;146    height: 140px;147    border: 1px solid #d9d9d9;148    border-radius: 70px;149    display: flex;150    align-items: center;151    justify-content: space-between;152    padding: 0 44px;153    box-sizing: border-box;154    font-size: 44px;155    color: #111;156  }157  .caret {158    width: 30px; height: 30px; border-right: 3px solid #111; border-bottom: 3px solid #111;159    transform: rotate(45deg); margin-left: 6px;160  }161 162  /* Add to Bag button */163  .cta {164    position: absolute;165    left: 28px;166    bottom: 170px;167    width: 1024px;168    height: 160px;169    background: #000;170    color: #fff;171    border-radius: 90px;172    display: flex;173    align-items: center;174    justify-content: center;175    font-size: 52px;176    font-weight: 700;177  }178 179  /* Gesture bar */180  .gesture {181    position: absolute;182    left: 50%;183    transform: translateX(-50%);184    bottom: 36px;185    width: 600px;186    height: 14px;187    background: #cfcfcf;188    border-radius: 10px;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status Bar -->196  <div class="status-bar">197    <div>8:14</div>198    <div class="status-right">199      <div class="dot"></div>200      <div class="dot"></div>201      <div class="dot"></div>202      <div class="battery"><div class="battery-fill"></div></div>203    </div>204  </div>205 206  <!-- App Bar -->207  <div class="app-bar">208    <div class="back-btn">209      <svg width="44" height="44" viewBox="0 0 24 24">210        <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211      </svg>212    </div>213    <div class="app-title">Nike Go</div>214    <div class="app-actions">215      <div class="icon-btn">216        <svg width="40" height="40" viewBox="0 0 24 24">217          <circle cx="10" cy="10" r="7" stroke="#000" stroke-width="2" fill="none"/>218          <path d="M21 21l-5.2-5.2" stroke="#000" stroke-width="2" stroke-linecap="round"/>219        </svg>220      </div>221      <div class="icon-btn">222        <svg width="40" height="40" viewBox="0 0 24 24">223          <path d="M7 7h10l-1 11H8L7 7z" fill="none" stroke="#000" stroke-width="2"/>224          <path d="M9 7V5h6v2" stroke="#000" stroke-width="2"/>225        </svg>226        <div class="bag-badge">1</div>227      </div>228    </div>229  </div>230 231  <!-- Image thumbnails strip -->232  <div class="image-strip" style="position: relative;">233    <div class="thumb">[IMG: Leggings Preview 1]</div>234    <div class="thumb">[IMG: Leggings Preview 2]</div>235    <div class="thumb">[IMG: Leggings Preview 3]</div>236  </div>237  <div class="soldout">Out of Stock</div>238 239  <!-- Content -->240  <div class="content">241    <div class="subtitle">Women's Firm-Support High-Waisted Leggings with Pockets</div>242    <div class="title-main">Nike Go</div>243    <div class="price">MRP : ₹ 5 795.00</div>244    <div class="small-grey">Incl. of taxes</div>245    <div class="small-grey">(Also includes all applicable duties)</div>246 247    <div class="desc">248      Push yourself forwards with the right balance of support and comfort with our Nike Go leggings.249      Squat-proof—even during your toughest workouts—their sleek, midweight InfinaLock fabric feels250      compressive and supportive in all the right places. Multiple pockets let you carry everything you251      could need, whether you're hitting the trail, the gym or the mat.252    </div>253 254    <ul class="specs">255      <li>Shown: Black/Black</li>256      <li>Style: DQ5669-010</li>257      <li>Country/Region of Origin: China</li>258    </ul>259 260    <div class="link">View Product Details</div>261  </div>262 263  <!-- Size Selector -->264  <div class="size-selector">265    <div>Size L</div>266    <div class="caret"></div>267  </div>268 269  <!-- CTA Button -->270  <div class="cta">Add to Bag</div>271 272  <!-- Gesture Bar -->273  <div class="gesture"></div>274 275</div>276</body>277</html>