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: "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */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: 36px;28    position: relative;29  }30  .status-bar .time { font-weight: 600; margin-right: 24px; }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 20px;35    margin-left: 8px;36    color: #fff;37  }38  .status-right {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .sb-dot {45    width: 16px; height: 16px; background: #e6e6e6; border-radius: 50%;46  }47  .wifi-icon, .battery-icon {48    display: inline-flex; align-items: center; justify-content: center;49  }50 51  /* Header */52  .header {53    height: 140px;54    display: flex;55    align-items: center;56    padding: 0 40px;57    border-bottom: 1px solid #eee;58    background: #fff;59  }60  .back-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }61  .header-title {62    font-size: 40px;63    font-weight: 700;64  }65  .header-actions { margin-left: auto; display: flex; gap: 32px; align-items: center; }66  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; position: relative; }67  .cart-badge {68    position: absolute;69    top: -6px; right: -6px;70    width: 40px; height: 40px;71    background: #fff;72    border: 2px solid #111;73    border-radius: 50%;74    display: flex; align-items: center; justify-content: center;75    font-size: 24px; font-weight: 700;76  }77 78  /* Content */79  .content {80    padding: 40px 48px 220px 48px;81  }82  .category {83    font-size: 36px;84    color: #555;85    margin-bottom: 10px;86  }87  .product-title {88    font-size: 84px;89    line-height: 94px;90    font-weight: 800;91    margin: 12px 0 24px 0;92  }93  .price {94    font-size: 40px;95    font-weight: 600;96    margin-top: 12px;97  }98  .tax-note {99    font-size: 30px;100    color: #777;101    margin-top: 14px;102  }103  .desc {104    font-size: 34px;105    line-height: 52px;106    color: #222;107    margin-top: 60px;108  }109  .spec-list {110    margin-top: 40px;111    padding-left: 30px;112    font-size: 32px;113    line-height: 50px;114    color: #222;115  }116  .details-link {117    margin-top: 30px;118    font-size: 34px;119    color: #8a8a8a;120  }121 122  /* Buttons */123  .actions {124    margin-top: 70px;125    display: flex;126    flex-direction: column;127    align-items: center;128    gap: 36px;129  }130  .pill {131    width: 940px;132    height: 140px;133    border-radius: 80px;134    display: flex; align-items: center; justify-content: center;135    font-size: 40px;136    font-weight: 700;137    cursor: default;138  }139  .pill.outline {140    border: 2px solid #ddd;141    color: #111;142    background: #fff;143  }144  .pill.dark {145    background: #111;146    color: #fff;147  }148  .pill .chevron {149    margin-left: 10px;150    width: 36px; height: 36px;151    display: inline-flex; align-items: center; justify-content: center;152  }153  .fav-content {154    display: inline-flex; align-items: center; gap: 18px;155  }156  .heart {157    width: 44px; height: 44px;158    display: inline-flex; align-items: center; justify-content: center;159  }160 161  /* Bottom system bar */162  .system-bar {163    position: absolute;164    bottom: 0; left: 0; right: 0;165    height: 120px;166    background: #000;167    display: flex; align-items: center; justify-content: center;168  }169  .home-indicator {170    width: 420px; height: 12px; background: #dadada; border-radius: 12px;171  }172 173  /* Simple SVG icon styles */174  svg { display: block; }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status bar -->181  <div class="status-bar">182    <div class="time">9:59</div>183    <div class="status-icons">184      <div class="sb-dot"></div>185      <div class="sb-dot"></div>186      <div class="sb-dot"></div>187      <div class="sb-dot"></div>188    </div>189    <div class="status-right">190      <div class="wifi-icon">191        <svg width="44" height="44" viewBox="0 0 44 44">192          <path d="M6 16c8-6 24-6 32 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>193          <path d="M11 22c6-4 16-4 22 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>194          <circle cx="22" cy="29" r="3.5" fill="#fff"/>195        </svg>196      </div>197      <div class="battery-icon">198        <svg width="50" height="44" viewBox="0 0 50 44">199          <rect x="4" y="10" width="36" height="24" rx="4" stroke="#fff" stroke-width="3" fill="none"/>200          <rect x="7" y="13" width="28" height="18" fill="#fff"/>201          <rect x="42" y="16" width="4" height="12" rx="2" fill="#fff"/>202        </svg>203      </div>204    </div>205  </div>206 207  <!-- Header -->208  <div class="header">209    <div class="back-btn">210      <svg width="44" height="44" viewBox="0 0 44 44">211        <path d="M28 8 L12 22 L28 36" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212      </svg>213    </div>214    <div class="header-title">Nike Precision 6</div>215    <div class="header-actions">216      <div class="icon-btn">217        <svg width="44" height="44" viewBox="0 0 44 44">218          <circle cx="18" cy="18" r="12" stroke="#111" stroke-width="3" fill="none"/>219          <path d="M28 28 L38 38" stroke="#111" stroke-width="3" stroke-linecap="round"/>220        </svg>221      </div>222      <div class="icon-btn">223        <svg width="44" height="44" viewBox="0 0 44 44">224          <path d="M12 18h20v16H12z" stroke="#111" stroke-width="3" fill="none" />225          <path d="M16 18c0-6 12-6 12 0" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>226        </svg>227        <div class="cart-badge">1</div>228      </div>229    </div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="category">Basketball Shoes</div>235 236    <div class="product-title">Nike Precision 6</div>237 238    <div class="price">MRP : ₹ 5 695.00</div>239    <div class="tax-note">Incl. of taxes<br>(Also includes all applicable duties)</div>240 241    <div class="desc">242      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.243    </div>244 245    <ul class="spec-list">246      <li>Shown: Black/Sail/Volt</li>247      <li>Style: DD9535-009</li>248      <li>Country/Region of Origin: Vietnam</li>249    </ul>250 251    <div class="details-link">View Product Details</div>252 253    <div class="actions">254      <div class="pill outline">255        Size UK 9256        <span class="chevron">257          <svg width="32" height="32" viewBox="0 0 32 32">258            <path d="M8 12 L16 20 L24 12" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>259          </svg>260        </span>261      </div>262 263      <div class="pill dark">Add to Bag</div>264 265      <div class="pill outline">266        <span class="fav-content">267          <span>Favorite</span>268          <span class="heart">269            <svg width="44" height="44" viewBox="0 0 44 44">270              <path d="M22 35 C10 26 8 16 14 12 c5-3 8 1 8 3 c0-2 3-6 8-3 c6 4 4 14 -8 23z" stroke="#111" stroke-width="3" fill="none" stroke-linejoin="round"/>271            </svg>272          </span>273        </span>274      </div>275    </div>276  </div>277 278  <!-- Bottom system bar -->279  <div class="system-bar">280    <div class="home-indicator"></div>281  </div>282 283</div>284</body>285</html>