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>Nike Precision 6 - Product Detail</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, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 140px;26    background: #000;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 34px;31    box-sizing: border-box;32    font-weight: 600;33  }34  .status-left { font-size: 42px; }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .dot {42    width: 18px;43    height: 18px;44    background: #fff;45    border-radius: 50%;46    opacity: 0.8;47  }48  .status-shape {49    width: 36px; height: 22px; border-radius: 6px;50    border: 2px solid #fff;51  }52 53  /* Header */54  .header {55    position: absolute;56    top: 140px;57    left: 0;58    width: 1080px;59    height: 120px;60    background: #fff;61    display: flex;62    align-items: center;63    box-sizing: border-box;64    padding: 0 32px;65  }66  .header-left, .header-right { display: flex; align-items: center; }67  .header-title {68    position: absolute;69    left: 0; right: 0;70    text-align: center;71    font-size: 44px;72    font-weight: 700;73    letter-spacing: 0.3px;74    color: #111;75  }76  .icon-btn {77    width: 72px; height: 72px;78    display: inline-flex; align-items: center; justify-content: center;79    border-radius: 50%;80    color: #111;81  }82  .cart {83    position: relative;84  }85  .badge {86    position: absolute;87    top: 2px;88    right: 2px;89    background: #fff;90    border: 2px solid #111;91    color: #111;92    width: 40px; height: 40px;93    border-radius: 50%;94    font-size: 26px;95    display: flex; align-items: center; justify-content: center;96    font-weight: 700;97  }98 99  /* Content */100  .content {101    position: absolute;102    top: 260px;103    left: 0;104    width: 1080px;105    box-sizing: border-box;106    padding: 0 64px;107  }108  .category {109    font-size: 32px;110    color: #666;111    margin-top: 10px;112  }113  h1.product-name {114    font-size: 72px;115    margin: 16px 0 10px;116    font-weight: 800;117    letter-spacing: -0.5px;118  }119  .price {120    font-size: 38px;121    margin-top: 24px;122  }123  .tax-note {124    font-size: 30px;125    color: #777;126    margin-top: 12px;127    line-height: 40px;128  }129  .desc {130    margin-top: 60px;131    font-size: 36px;132    line-height: 58px;133    color: #222;134  }135  .bullets {136    margin-top: 34px;137    padding-left: 24px;138  }139  .bullets li {140    font-size: 34px;141    line-height: 52px;142    margin: 8px 0;143  }144  .link {145    margin-top: 36px;146    font-size: 34px;147    color: #9e9e9e;148  }149 150  /* Buttons area */151  .actions {152    margin-top: 80px;153    padding-bottom: 240px;154  }155  .pill {156    width: 952px;157    height: 120px;158    border-radius: 60px;159    display: flex; align-items: center; justify-content: center;160    font-size: 40px;161    box-sizing: border-box;162    margin: 24px 0;163  }164  .size-btn {165    border: 2px solid #d7d7d7;166    color: #111;167    background: #fff;168    font-weight: 700;169  }170  .size-btn .chev {171    margin-left: 10px;172    width: 26px; height: 26px; border-right: 4px solid #111; border-bottom: 4px solid #111; transform: rotate(45deg);173    display: inline-block;174  }175  .bag-btn {176    background: #111;177    color: #fff;178    font-weight: 800;179  }180 181  /* Favorited text behind snackbar */182  .favorited {183    margin-top: 14px;184    width: 952px;185    height: 120px;186    border-radius: 60px;187    border: 2px solid #e3e3e3;188    display: flex; align-items: center; padding: 0 40px;189    color: #222;190    font-size: 40px;191  }192  .heart {193    margin-left: auto;194    width: 44px; height: 44px; background: #111; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 21s-6.716-4.387-8.485-6.156C1.65 12.98 2.5 10 5.348 10c1.63 0 2.64.967 3.152 1.72C9.012 10.967 10.022 10 11.652 10c2.848 0 3.698 2.98 1.833 4.844C18.716 16.613 12 21 12 21z"/></svg>') center/contain no-repeat;195  }196 197  /* Snackbar */198  .snackbar {199    position: absolute;200    left: 40px;201    bottom: 180px;202    width: 1000px;203    height: 120px;204    background: rgba(50,50,50,0.92);205    color: #fff;206    border-radius: 22px;207    display: flex; align-items: center; padding: 0 34px;208    font-size: 36px;209    box-shadow: 0 8px 20px rgba(0,0,0,0.25);210  }211 212  /* Bottom gesture bar */213  .gesture {214    position: absolute;215    bottom: 34px;216    left: 50%;217    transform: translateX(-50%);218    width: 300px;219    height: 14px;220    background: #eee;221    border-radius: 7px;222  }223 224  /* Simple SVG icon styling */225  svg { display: block; }226</style>227</head>228<body>229<div id="render-target">230  <!-- Status bar -->231  <div class="statusbar">232    <div class="status-left">10:00</div>233    <div class="status-right">234      <div class="dot"></div>235      <div class="dot"></div>236      <div class="dot"></div>237      <div class="dot" style="opacity:0.6;"></div>238      <div class="status-shape"></div>239    </div>240  </div>241 242  <!-- Header -->243  <div class="header">244    <div class="header-left">245      <div class="icon-btn" aria-label="Back">246        <svg width="52" height="52" viewBox="0 0 24 24">247          <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248        </svg>249      </div>250    </div>251    <div class="header-title">Nike Precision 6</div>252    <div class="header-right" style="margin-left:auto; gap:18px;">253      <div class="icon-btn" aria-label="Search">254        <svg width="52" height="52" viewBox="0 0 24 24">255          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"/>256          <path d="M20 20l-4.2-4.2" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>257        </svg>258      </div>259      <div class="icon-btn cart" aria-label="Cart">260        <svg width="52" height="52" viewBox="0 0 24 24">261          <path d="M7 6h13l-2 10H8L6 4H3" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262          <circle cx="10" cy="20" r="1.8" fill="#111"/>263          <circle cx="18" cy="20" r="1.8" fill="#111"/>264        </svg>265        <div class="badge">1</div>266      </div>267    </div>268  </div>269 270  <!-- Content -->271  <div class="content">272    <div class="category">Basketball Shoes</div>273    <h1 class="product-name">Nike Precision 6</h1>274 275    <div class="price">MRP : ₹ 5 695.00</div>276    <div class="tax-note">277      Incl. of taxes<br>278      (Also includes all applicable duties)279    </div>280 281    <div class="desc">282      Create space, stop in an instant, shoot off the dribble—do it all with the Nike Precision 6. It's designed to enable quick players to shift speeds and change directions while staying in control. From the plush collar and tongue to the modified herringbone traction, the agile low top lets you make the most of your skills while pushing the tempo of the game.283    </div>284 285    <ul class="bullets">286      <li>Shown: Black/Sail/Volt</li>287      <li>Style: DD9535-009</li>288      <li>Country/Region of Origin: Vietnam</li>289    </ul>290 291    <div class="link">View Product Details</div>292 293    <div class="actions">294      <div class="pill size-btn">Size UK 9 <span class="chev"></span></div>295      <div class="pill bag-btn">Add to Bag</div>296      <div class="favorited">297        Favorited298        <div class="heart" aria-hidden="true"></div>299      </div>300    </div>301  </div>302 303  <!-- Snackbar -->304  <div class="snackbar">Added to Favorites</div>305 306  <!-- Bottom gesture bar -->307  <div class="gesture"></div>308</div>309</body>310</html>