GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Ultra 4D - Highlights</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    box-shadow: 0 0 0 0 rgba(0,0,0,0);14  }15 16  /* Top area */17  .top-wrap {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 330px;23    background: linear-gradient(#efefef, #f5f5f5);24    border-bottom: 1px solid #e0e0e0;25  }26  .title {27    position: absolute;28    left: 60px;29    top: 110px;30    font-size: 48px;31    font-weight: 800;32    letter-spacing: 2px;33  }34  .price-btn {35    position: absolute;36    right: 160px;37    top: 95px;38    padding: 18px 32px;39    border: 2px solid #111;40    border-radius: 14px;41    font-size: 36px;42    font-weight: 800;43    letter-spacing: 2px;44    background: #ffffff;45  }46  .close-btn {47    position: absolute;48    right: 60px;49    top: 95px;50    width: 70px;51    height: 70px;52    border-radius: 12px;53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .close-btn svg { width: 40px; height: 40px; }58 59  /* Thumbnails */60  .thumb-strip {61    position: absolute;62    left: 40px;63    right: 40px;64    bottom: 20px;65    height: 130px;66    display: flex;67    gap: 34px;68    align-items: center;69  }70  .thumb {71    width: 150px;72    height: 100px;73    background: #E0E0E0;74    border: 1px solid #BDBDBD;75    border-radius: 8px;76    color: #616161;77    display: flex;78    align-items: center;79    justify-content: center;80    font-size: 24px;81  }82  .thumb.active {83    border: 3px solid #9CCC65; /* green accent like selected */84    box-shadow: 0 0 0 6px rgba(156, 204, 101, 0.15);85  }86 87  /* Specifications tab */88  .spec-tab {89    position: absolute;90    left: 60px;91    top: 360px;92    font-size: 34px;93    font-weight: 800;94    letter-spacing: 3px;95    text-transform: uppercase;96  }97  .spec-tab::after {98    content: "";99    display: block;100    width: 240px;101    height: 6px;102    background: #000;103    margin-top: 10px;104  }105 106  /* Highlights title */107  .highlights {108    position: absolute;109    left: 60px;110    top: 470px;111    font-size: 72px;112    font-weight: 800;113    letter-spacing: 2px;114    text-transform: uppercase;115  }116 117  /* Sections */118  .section {119    position: absolute;120    left: 60px;121    width: 960px;122    color: #111;123  }124  .section h2 {125    margin: 0;126    font-size: 44px;127    font-weight: 800;128    letter-spacing: 2px;129    text-transform: uppercase;130  }131  .section p {132    margin: 28px 0 0 0;133    font-size: 30px;134    line-height: 44px;135    color: #333;136  }137 138  /* Positions for each block */139  #s1 { top: 620px; }140  #s2 { top: 1060px; }141  #s3 { top: 1460px; }142  #s4 { top: 1860px; }143 144  /* Home indicator */145  .home-indicator {146    position: absolute;147    left: 50%;148    transform: translateX(-50%);149    bottom: 36px;150    width: 320px;151    height: 12px;152    background: #d6d6d6;153    border-radius: 6px;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <div class="top-wrap">161    <div class="title">ULTRA 4D</div>162    <div class="price-btn">$220.00</div>163    <div class="close-btn" aria-label="Close">164      <svg viewBox="0 0 24 24">165        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>166      </svg>167    </div>168 169    <div class="thumb-strip">170      <div class="thumb">[IMG: Shoe 1]</div>171      <div class="thumb">[IMG: Shoe 2]</div>172      <div class="thumb">[IMG: Shoe 3]</div>173      <div class="thumb">[IMG: Shoe 4]</div>174      <div class="thumb">[IMG: Shoe 5]</div>175      <div class="thumb active">[IMG: Green/Black]</div>176    </div>177  </div>178 179  <div class="spec-tab">SPECIFICATIONS</div>180 181  <div class="highlights">HIGHLIGHTS</div>182 183  <div id="s1" class="section">184    <h2>Made in part with recycled materials</h2>185    <p>Made with a series of recycled materials, this upper features at least 50% recycled content. This product represents just one of our solutions to help end plastic waste.</p>186  </div>187 188  <div id="s2" class="section">189    <h2>Coded for the perfect ride</h2>190    <p>adidas 4D is a 3D-printed midsole with an unparalleled combination of impact absorption and stability for city running.</p>191  </div>192 193  <div id="s3" class="section">194    <h2>Foot-hugging upper</h2>195    <p>The adidas PRIMEKNIT upper wraps the foot with a supportive fit that enhances movement.</p>196  </div>197 198  <div id="s4" class="section">199    <h2>Rubber outsole</h2>200  </div>201 202  <div class="home-indicator"></div>203</div>204</body>205</html>