GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Adidas Product - Samba OG Shoes</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F6F7F8;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 96px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 32px;26    color: #111;27    font-size: 32px;28    box-sizing: border-box;29  }30  .status-left { display: flex; align-items: center; gap: 18px; }31  .status-right { display: flex; align-items: center; gap: 24px; }32  .icon { display: inline-flex; align-items: center; justify-content: center; }33 34  /* Top hero image */35  .hero-image {36    position: absolute;37    top: 96px;38    left: 0;39    width: 1080px;40    height: 620px;41    background: #E0E0E0;42    border-bottom: 1px solid #D0D0D0;43    display: flex;44    align-items: center;45    justify-content: center;46    color: #666;47    font-size: 36px;48    letter-spacing: 0.5px;49  }50  .overlay-icons {51    position: absolute;52    top: 140px;53    left: 32px;54    right: 32px;55    display: flex;56    justify-content: space-between;57    align-items: center;58  }59  .overlay-right { display: flex; gap: 28px; }60 61  /* Main product image area */62  .product-stage {63    position: absolute;64    top: 716px;65    left: 0;66    width: 1080px;67    height: 640px;68    display: flex;69    align-items: center;70    justify-content: center;71    box-sizing: border-box;72  }73  .product-image {74    width: 940px;75    height: 420px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    font-size: 30px;83  }84  .pagination {85    position: absolute;86    right: 24px;87    top: 760px;88    width: 16px;89  }90  .pagination .bar {91    width: 6px;92    height: 28px;93    margin: 16px 0;94    background: #111;95    opacity: 0.25;96    border-radius: 3px;97  }98  .pagination .bar.active { opacity: 1; }99 100  /* Best seller badge */101  .best-seller {102    position: absolute;103    top: 1370px;104    left: 48px;105    padding: 18px 24px;106    border: 2px solid #E3E3E3;107    background: #ffffff;108    color: #111;109    font-size: 28px;110    text-transform: uppercase;111    letter-spacing: 2px;112    border-radius: 8px;113  }114 115  /* Thumbnails row */116  .thumbs {117    position: absolute;118    top: 1450px;119    left: 0;120    width: 1080px;121    padding: 24px 48px;122    box-sizing: border-box;123    display: flex;124    gap: 52px;125    align-items: center;126    overflow: hidden;127  }128  .thumb {129    width: 150px;130    height: 80px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    display: flex;134    align-items: center;135    justify-content: center;136    color: #777;137    font-size: 22px;138    border-radius: 8px;139  }140 141  /* AR badge */142  .ar-badge {143    position: absolute;144    top: 1640px;145    left: 48px;146    display: flex;147    align-items: center;148    gap: 14px;149  }150  .cube {151    width: 60px;152    height: 60px;153    border: 3px solid #111;154    border-radius: 10px;155    display: flex; align-items: center; justify-content: center;156    font-weight: bold; color: #111;157  }158 159  /* Product info */160  .info {161    position: absolute;162    top: 1690px;163    left: 48px;164    right: 48px;165    color: #111;166  }167  .title {168    font-size: 58px;169    font-weight: 800;170    letter-spacing: 1px;171  }172  .price-row {173    margin-top: 26px;174    display: flex;175    align-items: baseline;176    gap: 28px;177  }178  .price {179    font-size: 36px;180    font-weight: 800;181  }182  .category {183    font-size: 30px;184    color: #444;185  }186 187  /* Select size button */188  .size-btn {189    position: absolute;190    top: 1860px;191    left: 48px;192    width: 984px;193    height: 140px;194    background: #000;195    color: #fff;196    display: flex;197    align-items: center;198    justify-content: space-between;199    padding: 0 34px;200    box-sizing: border-box;201    font-size: 38px;202    letter-spacing: 2px;203    border-radius: 6px;204  }205 206  /* Bottom progress bar */207  .progress {208    position: absolute;209    bottom: 64px;210    left: 320px;211    width: 440px;212    height: 16px;213    background: #D0D0D0;214    border-radius: 8px;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <div class="status-left">224      <span>5:41</span>225      <!-- small check icon -->226      <svg class="icon" width="32" height="32" viewBox="0 0 48 48">227        <circle cx="24" cy="24" r="20" fill="none" stroke="#111" stroke-width="3"/>228        <path d="M14 24l6 6 14-14" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/>229      </svg>230      <!-- mail envelope -->231      <svg class="icon" width="32" height="32" viewBox="0 0 48 48">232        <rect x="7" y="12" width="34" height="24" rx="4" fill="none" stroke="#111" stroke-width="3"/>233        <path d="M7 14l17 12 17-12" fill="none" stroke="#111" stroke-width="3"/>234      </svg>235      <!-- bell icon -->236      <svg class="icon" width="32" height="32" viewBox="0 0 48 48">237        <path d="M24 8c-6 0-10 5-10 11v8l-4 4h28l-4-4v-8c0-6-4-11-10-11z" fill="none" stroke="#111" stroke-width="3"/>238        <circle cx="24" cy="40" r="4" fill="#111"/>239      </svg>240    </div>241    <div class="status-right">242      <!-- wifi -->243      <svg class="icon" width="36" height="36" viewBox="0 0 48 48">244        <path d="M6 18c10-8 26-8 36 0" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/>245        <path d="M12 24c7-6 17-6 24 0" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/>246        <path d="M18 30c4-4 8-4 12 0" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/>247        <circle cx="24" cy="36" r="2.8" fill="#111"/>248      </svg>249      <!-- battery -->250      <svg class="icon" width="48" height="36" viewBox="0 0 64 48">251        <rect x="6" y="12" width="48" height="24" rx="4" fill="none" stroke="#111" stroke-width="3"/>252        <rect x="10" y="16" width="38" height="16" fill="#111"/>253        <rect x="54" y="18" width="6" height="12" rx="2" fill="#111"/>254      </svg>255      <span style="font-size:28px;">100%</span>256    </div>257  </div>258 259  <!-- Hero Image Closeup -->260  <div class="hero-image">[IMG: Adidas Samba Closeup]</div>261 262  <!-- Overlay icons on hero -->263  <div class="overlay-icons">264    <!-- Back arrow -->265    <svg class="icon" width="56" height="56" viewBox="0 0 48 48">266      <path d="M22 10L8 24l14 14" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>267    </svg>268    <div class="overlay-right">269      <!-- Share icon -->270      <svg class="icon" width="56" height="56" viewBox="0 0 48 48">271        <circle cx="12" cy="24" r="5" fill="none" stroke="#111" stroke-width="3"/>272        <circle cx="36" cy="12" r="5" fill="none" stroke="#111" stroke-width="3"/>273        <circle cx="36" cy="36" r="5" fill="none" stroke="#111" stroke-width="3"/>274        <path d="M17 22l14-8M17 26l14 8" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/>275      </svg>276      <!-- Heart icon -->277      <svg class="icon" width="56" height="56" viewBox="0 0 48 48">278        <path d="M24 40s-14-9-14-18a8 8 0 0 1 14-5 8 8 0 0 1 14 5c0 9-14 18-14 18z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>279      </svg>280    </div>281  </div>282 283  <!-- Main Product Image Stage -->284  <div class="product-stage">285    <div class="product-image">[IMG: Samba OG Shoe Side View]</div>286  </div>287 288  <!-- Vertical pagination bars -->289  <div class="pagination">290    <div class="bar active"></div>291    <div class="bar"></div>292    <div class="bar"></div>293    <div class="bar"></div>294    <div class="bar"></div>295    <div class="bar"></div>296    <div class="bar"></div>297    <div class="bar"></div>298  </div>299 300  <!-- Best Seller badge -->301  <div class="best-seller">BEST SELLER</div>302 303  <!-- Thumbnails Carousel -->304  <div class="thumbs">305    <div class="thumb">[IMG]</div>306    <div class="thumb">[IMG]</div>307    <div class="thumb">[IMG]</div>308    <div class="thumb">[IMG]</div>309    <div class="thumb">[IMG]</div>310    <div class="thumb">[IMG]</div>311  </div>312 313  <!-- AR Badge -->314  <div class="ar-badge">315    <div class="cube">AR</div>316  </div>317 318  <!-- Product Info -->319  <div class="info">320    <div class="title">SAMBA OG SHOES</div>321    <div class="price-row">322      <div class="price">$100.00</div>323      <div class="category">Women's Originals</div>324    </div>325  </div>326 327  <!-- Select size button -->328  <div class="size-btn">329    <span>SELECT SIZE</span>330    <svg class="icon" width="48" height="48" viewBox="0 0 48 48">331      <path d="M18 10l16 14-16 14" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>332    </svg>333  </div>334 335  <!-- Bottom progress bar -->336  <div class="progress"></div>337 338</div>339</body>340</html>