GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Adidas Product - Samba OG Shoes</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f5f5f5;14 }15 16 /* Top navigation */17 .top-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 140px;23 padding: 40px 40px 0 40px;24 box-sizing: border-box;25 }26 .nav-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 height: 60px;31 }32 .icon-btn {33 width: 56px;34 height: 56px;35 display: flex;36 align-items: center;37 justify-content: center;38 }39 .icon {40 width: 40px;41 height: 40px;42 stroke: #222;43 fill: none;44 stroke-width: 4;45 }46 .title-wrap {47 text-align: center;48 margin-top: 10px;49 }50 .title {51 font-size: 42px;52 letter-spacing: 2px;53 color: #111;54 font-weight: 700;55 }56 .price {57 margin-top: 8px;58 font-size: 34px;59 color: #111;60 }61 62 /* Carousel */63 .thumb-strip {64 width: 100%;65 display: flex;66 padding: 20px 40px 10px 40px;67 box-sizing: border-box;68 gap: 22px;69 align-items: center;70 overflow: hidden;71 }72 .thumb {73 width: 150px;74 height: 80px;75 background: #E0E0E0;76 border: 1px solid #BDBDBD;77 border-radius: 8px;78 display: flex;79 justify-content: center;80 align-items: center;81 color: #757575;82 font-size: 24px;83 }84 .thumb.active {85 outline: 3px solid #cfcfcf;86 }87 88 /* Size section */89 .size-section {90 padding: 10px 40px 0 40px;91 box-sizing: border-box;92 }93 .size-header {94 display: flex;95 align-items: center;96 gap: 16px;97 color: #111;98 font-weight: 700;99 letter-spacing: 1px;100 font-size: 28px;101 margin-bottom: 16px;102 }103 .ruler-icon {104 width: 64px;105 height: 52px;106 border: 2px solid #BDBDBD;107 border-radius: 8px;108 display: flex;109 align-items: center;110 justify-content: center;111 }112 .ruler-icon svg { width: 42px; height: 24px; }113 .sizes-row {114 display: flex;115 gap: 40px;116 padding: 10px 0 20px 0;117 font-size: 32px;118 color: #777;119 overflow-x: auto;120 }121 .size-chip {122 padding-bottom: 16px;123 }124 .size-chip.active {125 color: #111;126 font-weight: 700;127 border-bottom: 6px solid #111;128 }129 130 /* Add to bag & Buy it now */131 .action-block {132 padding: 10px 40px 0 40px;133 box-sizing: border-box;134 }135 .add-to-bag {136 border: 2px solid #BDBDBD;137 border-radius: 8px;138 height: 120px;139 display: flex;140 align-items: center;141 justify-content: space-between;142 padding: 0 28px;143 font-size: 34px;144 color: #111;145 background: #fff;146 }147 .buy-now {148 margin-top: 24px;149 height: 120px;150 border-radius: 8px;151 background: #000;152 color: #fff;153 display: flex;154 align-items: center;155 justify-content: space-between;156 padding: 0 36px;157 font-size: 36px;158 letter-spacing: 1px;159 }160 .buy-arrow {161 width: 38px;162 height: 38px;163 stroke: #fff;164 fill: none;165 stroke-width: 5;166 }167 168 /* Payment methods */169 .payments {170 display: flex;171 gap: 30px;172 padding: 26px 40px 0 40px;173 box-sizing: border-box;174 align-items: center;175 }176 .pay-pill {177 height: 72px;178 min-width: 150px;179 padding: 0 24px;180 border-radius: 12px;181 border: 2px dashed #C7C7C7;182 background: #FFFFFF;183 color: #666;184 display: flex;185 align-items: center;186 justify-content: center;187 font-size: 26px;188 }189 190 /* Link */191 .store-link {192 padding: 28px 40px 0 40px;193 font-size: 32px;194 color: #111;195 text-decoration: underline;196 }197 198 /* Shipping info */199 .shipping {200 margin-top: 16px;201 padding: 26px 40px;202 display: flex;203 align-items: center;204 justify-content: space-between;205 color: #111;206 }207 .ship-left {208 display: flex;209 align-items: center;210 gap: 22px;211 font-size: 30px;212 line-height: 1.2;213 }214 .check-icon {215 width: 54px;216 height: 54px;217 }218 .info-circle {219 width: 56px;220 height: 56px;221 }222 223 /* Toast: Added to bag */224 .toast {225 position: absolute;226 bottom: 540px;227 left: 0;228 width: 100%;229 height: 120px;230 background: #fff;231 border-top: 2px solid #dedede;232 box-shadow: 0 2px 8px rgba(0,0,0,0.08);233 display: flex;234 align-items: center;235 justify-content: center;236 font-size: 34px;237 color: #111;238 letter-spacing: 1px;239 }240 .toast .close {241 position: absolute;242 right: 32px;243 width: 40px;244 height: 40px;245 stroke: #111;246 stroke-width: 5;247 }248 249 /* Product section after toast */250 .product-section {251 position: absolute;252 left: 0;253 bottom: 180px;254 width: 100%;255 padding: 40px;256 box-sizing: border-box;257 background: #f5f5f5;258 }259 .big-heading {260 font-size: 54px;261 color: #B5B5B5;262 font-weight: 800;263 letter-spacing: 2px;264 margin-bottom: 20px;265 }266 .product-card {267 display: flex;268 gap: 40px;269 align-items: flex-start;270 }271 .product-img {272 width: 380px;273 height: 240px;274 background: #E0E0E0;275 border: 1px solid #BDBDBD;276 border-radius: 10px;277 display: flex;278 align-items: center;279 justify-content: center;280 color: #757575;281 font-size: 26px;282 }283 .product-info {284 flex: 1;285 }286 .product-name {287 font-size: 40px;288 font-weight: 800;289 color: #111;290 margin-bottom: 12px;291 }292 .product-size {293 font-size: 30px;294 color: #333;295 margin-bottom: 14px;296 }297 .desc {298 font-size: 28px;299 color: #777;300 line-height: 1.4;301 }302 303 /* Specifications bar */304 .spec-bar {305 margin-top: 34px;306 border-top: 2px solid #dcdcdc;307 background: #fff;308 height: 140px;309 display: flex;310 align-items: center;311 justify-content: space-between;312 padding: 0 36px;313 border-radius: 8px;314 }315 .spec-title {316 font-size: 32px;317 letter-spacing: 2px;318 font-weight: 800;319 color: #111;320 }321 .view-bag {322 font-size: 30px;323 color: #111;324 }325 .spec-arrow {326 width: 38px;327 height: 38px;328 stroke: #111;329 stroke-width: 5;330 fill: none;331 }332</style>333</head>334<body>335<div id="render-target">336 337 <!-- Top Navigation -->338 <div class="top-bar">339 <div class="nav-row">340 <div class="icon-btn">341 <svg class="icon" viewBox="0 0 48 48">342 <path d="M28 8 L12 24 L28 40" />343 </svg>344 </div>345 <div style="display:flex; gap:18px;">346 <div class="icon-btn">347 <!-- Share icon -->348 <svg class="icon" viewBox="0 0 48 48">349 <circle cx="12" cy="24" r="6"></circle>350 <circle cx="36" cy="12" r="6"></circle>351 <circle cx="36" cy="36" r="6"></circle>352 <path d="M18 22 L30 14"></path>353 <path d="M18 26 L30 34"></path>354 </svg>355 </div>356 <div class="icon-btn">357 <!-- Heart icon -->358 <svg class="icon" viewBox="0 0 48 48">359 <path d="M24 38 C14 30,8 24,8 18 C8 12,12 8,18 8 C21 8,23 10,24 12 C25 10,27 8,30 8 C36 8,40 12,40 18 C40 24,34 30,24 38 Z"></path>360 </svg>361 </div>362 </div>363 </div>364 <div class="title-wrap">365 <div class="title">SAMBA OG SHOES</div>366 <div class="price">$100.00</div>367 </div>368 </div>369 370 <!-- Carousel Thumbnails -->371 <div class="thumb-strip" style="margin-top: 160px;">372 <div class="thumb">[IMG: White/Gray Shoe]</div>373 <div class="thumb">[IMG: Navy/White Shoe]</div>374 <div class="thumb">[IMG: Green Trim Shoe]</div>375 <div class="thumb">[IMG: Red Trim Shoe]</div>376 <div class="thumb">[IMG: White/Black Shoe]</div>377 <div class="thumb active">[IMG: Black/White Shoe]</div>378 </div>379 380 <!-- Size Section -->381 <div class="size-section">382 <div class="size-header">383 <div>SIZE</div>384 <div class="ruler-icon">385 <svg viewBox="0 0 80 40">386 <rect x="2" y="6" width="76" height="28" rx="4" ry="4" stroke="#BDBDBD" fill="none" stroke-width="2"></rect>387 <path d="M10 30 V18 M18 30 V22 M26 30 V18 M34 30 V22 M42 30 V18 M50 30 V22 M58 30 V18 M66 30 V22" stroke="#BDBDBD" stroke-width="2"></path>388 </svg>389 </div>390 </div>391 <div class="sizes-row">392 <div class="size-chip">M 7 / W 8</div>393 <div class="size-chip active">M 7.5 / W 8.5</div>394 <div class="size-chip">M 8 / W 9</div>395 <div class="size-chip">M 8.5 / W 9.5</div>396 <div class="size-chip">M 9 / W 10</div>397 <div class="size-chip">M 9.5 / W 10.5</div>398 <div class="size-chip">M 10 / W 11</div>399 </div>400 </div>401 402 <!-- Actions -->403 <div class="action-block">404 <div class="add-to-bag">405 <div>ADD TO BAG</div>406 <div style="display:flex; align-items:center; gap:16px;">407 <!-- Simple bag with plus icon -->408 <svg viewBox="0 0 56 56" width="56" height="56" stroke="#111" fill="none" stroke-width="3">409 <path d="M16 20 H40 L44 48 H12 Z"></path>410 <path d="M20 20 C20 14,24 10,28 10 C32 10,36 14,36 20"></path>411 <path d="M28 28 V40 M22 34 H34"></path>412 </svg>413 </div>414 </div>415 416 <div class="buy-now">417 <div>BUY IT NOW</div>418 <svg class="buy-arrow" viewBox="0 0 48 48">419 <path d="M10 24 H38"></path>420 <path d="M28 14 L38 24 L28 34"></path>421 </svg>422 </div>423 </div>424 425 <!-- Payment Methods -->426 <div class="payments">427 <div class="pay-pill">Google Pay</div>428 <div class="pay-pill">PayPal</div>429 <div class="pay-pill">Klarna</div>430 </div>431 432 <!-- Check stores link -->433 <div class="store-link">CHECK STORES NEARBY</div>434 435 <!-- Shipping and returns -->436 <div class="shipping">437 <div class="ship-left">438 <svg class="check-icon" viewBox="0 0 48 48">439 <circle cx="24" cy="24" r="22" stroke="#111" fill="none" stroke-width="3"></circle>440 <path d="M14 24 L21 31 L34 18" stroke="#111" stroke-width="4" fill="none"></path>441 </svg>442 <div>443 <div>FREE STANDARD SHIPPING + FREE RETURNS &</div>444 <div>EXCHANGES</div>445 </div>446 </div>447 <svg class="info-circle" viewBox="0 0 48 48">448 <circle cx="24" cy="24" r="20" stroke="#111" fill="none" stroke-width="3"></circle>449 <line x1="24" y1="16" x2="24" y2="16" stroke="#111" stroke-width="4"></line>450 <line x1="24" y1="22" x2="24" y2="34" stroke="#111" stroke-width="4"></line>451 </svg>452 </div>453 454 <!-- Toast - Added to Bag -->455 <div class="toast">456 ADDED TO BAG457 <svg class="close" viewBox="0 0 48 48">458 <path d="M12 12 L36 36"></path>459 <path d="M36 12 L12 36"></path>460 </svg>461 </div>462 463 <!-- Product section -->464 <div class="product-section">465 <div class="big-heading">SAMBA ORIGINALS</div>466 <div class="product-card">467 <div class="product-img">[IMG: Black Samba Shoe]</div>468 <div class="product-info">469 <div class="product-name">Samba OG Shoes</div>470 <div class="product-size">Size: M 7.5 / W 8.5</div>471 <div class="desc">472 Born on the pitch, the Samba is a timeless icon of street style. This silhouette stays true to its legacy with a tasteful, low-profile, soft leather upper, suede overlays and gum sole, making it a staple in everyone's closet – on and off the pitch.473 </div>474 </div>475 </div>476 477 <div class="spec-bar">478 <div>479 <div class="spec-title">SPECIFICATIONS</div>480 <div class="view-bag">VIEW BAG</div>481 </div>482 <svg class="spec-arrow" viewBox="0 0 48 48">483 <path d="M12 24 H36"></path>484 <path d="M26 14 L36 24 L26 34"></path>485 </svg>486 </div>487 </div>488 489</div>490</body>491</html>