GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Nike Product Detail - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #000;24    font-size: 36px;25  }26  .status-left, .status-right {27    display: flex;28    align-items: center;29    gap: 22px;30  }31  .status-dot {32    width: 28px; height: 28px; background: #000; border-radius: 6px;33  }34  .status-round {35    width: 28px; height: 28px; border-radius: 50%; border: 3px solid #000;36  }37  /* Header */38  .header {39    padding: 16px 36px 24px 36px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .header-left {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .title {50    font-size: 48px;51    font-weight: 700;52    color: #111;53  }54  .icon-btn {55    width: 72px;56    height: 72px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60    border-radius: 16px;61    color: #111;62  }63  .section {64    padding: 0 36px;65    color: #111;66  }67  .price {68    font-size: 38px;69    font-weight: 700;70    margin-top: 8px;71  }72  .subtext {73    font-size: 30px;74    color: #666;75    margin-top: 6px;76  }77  .muted {78    font-size: 28px;79    color: #8a8a8a;80    margin-top: 6px;81  }82  .desc {83    font-size: 32px;84    line-height: 1.55;85    color: #222;86    margin-top: 44px;87  }88  .bullets {89    margin-top: 40px;90    font-size: 32px;91    color: #111;92  }93  .bullets li {94    margin: 18px 0;95  }96  .link {97    font-size: 34px;98    color: #6A6A6A;99    margin-top: 28px;100  }101  /* Selector pill */102  .pill {103    margin: 40px 36px 0 36px;104    height: 140px;105    border: 2px solid #E0E0E0;106    border-radius: 80px;107    padding: 0 40px;108    display: flex;109    align-items: center;110    justify-content: space-between;111    font-size: 36px;112    color: #111;113    background: #fff;114  }115  .caret {116    width: 0; height: 0;117    border-left: 14px solid transparent;118    border-right: 14px solid transparent;119    border-top: 18px solid #111;120    margin-left: 16px;121  }122  /* CTA */123  .cta {124    margin: 36px;125    height: 160px;126    border-radius: 96px;127    background: #111;128    color: #fff;129    font-size: 44px;130    font-weight: 700;131    display: flex;132    align-items: center;133    justify-content: center;134  }135  .secondary-btn {136    margin: 0 36px;137    height: 140px;138    border-radius: 96px;139    border: 2px solid #E6E6E6;140    background: #fff;141    color: #111;142    font-size: 40px;143    display: flex;144    align-items: center;145    justify-content: center;146    gap: 24px;147  }148  .heart {149    width: 48px; height: 48px;150  }151  /* Bottom sheet and toast */152  .footer-panel {153    position: absolute;154    bottom: 0;155    left: 0;156    width: 100%;157    height: 210px;158    background: #F1F1F1;159    border-top-left-radius: 18px;160    border-top-right-radius: 18px;161    display: flex;162    align-items: center;163    justify-content: space-between;164    padding: 0 36px;165    color: #111;166    font-size: 44px;167    box-shadow: 0 -2px 0 rgba(0,0,0,0.05);168  }169  .footer-caret {170    width: 0; height: 0;171    border-left: 16px solid transparent;172    border-right: 16px solid transparent;173    border-top: 22px solid #555;174  }175  .toast {176    position: absolute;177    bottom: 238px;178    left: 36px;179    width: 1008px;180    height: 120px;181    background: #3A3A3A;182    color: #fff;183    border-radius: 14px;184    display: flex;185    align-items: center;186    padding: 0 28px;187    font-size: 36px;188    box-shadow: 0 6px 18px rgba(0,0,0,0.15);189  }190</style>191</head>192<body>193<div id="render-target">194  <!-- Status bar -->195  <div class="status-bar">196    <div class="status-left">197      <div style="font-weight:700;">11:35</div>198      <div style="color:#000;">G</div>199      <div class="status-dot"></div>200      <div class="status-round"></div>201    </div>202    <div class="status-right">203      <div style="width:30px; height:30px; border:3px solid #000; border-radius:4px; transform: rotate(45deg);"></div>204      <div style="width:38px; height:22px; border:3px solid #000; border-radius:6px;"></div>205    </div>206  </div>207 208  <!-- Header -->209  <div class="header">210    <div class="header-left">211      <!-- Back chevron -->212      <div class="icon-btn" aria-label="Back">213        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">214          <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>215        </svg>216      </div>217      <div class="title">Nike SB Force 58</div>218    </div>219    <div class="header-right">220      <div class="icon-btn" aria-label="Search">221        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">222          <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2.5"></circle>223          <path d="M15.5 15.5L21 21" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>224        </svg>225      </div>226      <div class="icon-btn" aria-label="Bag">227        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">228          <path d="M6 8h12l-1 12H7L6 8z" stroke="#111" stroke-width="2.5" fill="none" stroke-linejoin="round"/>229          <path d="M9 8V6a3 3 0 016 0v2" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Price and tax -->236  <div class="section">237    <div class="price">MRP : ₹ 5 995.00</div>238    <div class="subtext">Incl. of taxes</div>239    <div class="muted">(Also includes all applicable duties)</div>240 241    <!-- Description -->242    <div class="desc">243      The latest and greatest innovation to hit the streets, the Nike SB Force 58 gives you the durability of a cupsole with the flexibility of a vulcanised shoe. Made from canvas and suede and finished with perforations, the whole look is infused with heritage basketball DNA.244    </div>245 246    <!-- Bullets -->247    <ul class="bullets">248      <li>Shown: Black/Black/White</li>249      <li>Style: CZ2959-001</li>250      <li>Country/Region of Origin: Vietnam</li>251    </ul>252 253    <div class="link">View Product Details</div>254  </div>255 256  <!-- Size selector -->257  <div class="pill">258    <div>Size UK 9</div>259    <div class="caret"></div>260  </div>261 262  <!-- Add to Bag -->263  <div class="cta">Add to Bag</div>264 265  <!-- Favorited pill -->266  <div class="secondary-btn">267    <span>Favorited</span>268    <svg class="heart" viewBox="0 0 24 24">269      <path d="M12 21s-7.5-4.6-9.2-8.7C1.7 9.5 3.6 6 7 6c2.3 0 3.3 1.2 5 2.8C13.7 7.2 14.7 6 17 6c3.4 0 5.3 3.5 4.2 6.3C19.5 16.4 12 21 12 21z" fill="#111"/>270    </svg>271  </div>272 273  <!-- Toast: Added to Favorites -->274  <div class="toast">Added to Favorites</div>275 276  <!-- Footer panel -->277  <div class="footer-panel">278    <div>Size & Fit</div>279    <div class="footer-caret"></div>280  </div>281</div>282</body>283</html>