GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Switch FWD Running Shoes - Mock</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; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff;11    box-shadow: 0 0 0 0 transparent;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 110px;18    padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #111;21    font-weight: 600;22    font-size: 42px;23    letter-spacing: 0.5px;24    background: #f8f8f8;25  }26  .status-icons {27    display: flex; gap: 28px; align-items: center;28    color: #777;29    font-size: 36px;30  }31  .dot { width: 10px; height: 10px; border-radius: 50%; background: #777; display: inline-block; }32 33  /* Header / nav */34  .nav {35    position: absolute; top: 110px; left: 0; right: 0;36    height: 130px;37    padding: 0 40px;38    display: flex; align-items: center; justify-content: space-between;39    background: #ffffff;40    border-bottom: 1px solid #ececec;41  }42  .nav-title {43    font-size: 54px; font-weight: 700; color: #111; letter-spacing: 1px;44  }45  .price-close {46    display: flex; align-items: center; gap: 30px;47  }48  .price-pill {49    padding: 24px 36px; border: 2px solid #111; border-radius: 16px;50    font-size: 44px; font-weight: 700; letter-spacing: 2px;51  }52  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }53 54  /* Thumbnails carousel */55  .thumbs {56    position: absolute; top: 240px; left: 0; right: 0;57    display: flex; gap: 36px; padding: 30px 40px; align-items: center;58    overflow: hidden;59  }60  .thumb {61    width: 180px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center;63    color: #757575; font-size: 26px; border-radius: 14px;64  }65  .thumb-indicator {66    position: absolute; left: 60px; top: 370px; width: 480px; height: 6px; background: #111;67    border-radius: 3px;68  }69 70  /* Badges row */71  .badges {72    position: absolute; top: 420px; left: 0; right: 0;73    display: grid; grid-template-columns: 120px auto 120px;74    align-items: center;75    padding: 20px 40px;76    height: 120px;77  }78  .badge-center {79    text-align: center; font-size: 36px; font-weight: 700; color: #111; letter-spacing: 2px;80  }81  .badge-sub {82    font-size: 30px; font-weight: 700; color: #111; letter-spacing: 2px;83    display: block;84  }85  .badge-icon {86    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 50%;87  }88 89  /* Info note */90  .note {91    position: absolute; top: 540px; left: 40px; right: 40px;92    background: #fafafa; border-radius: 8px; padding: 28px 24px;93    color: #666; font-size: 34px; line-height: 1.4;94  }95 96  /* Content sections */97  .content {98    position: absolute; top: 760px; left: 40px; right: 40px;99    padding-bottom: 400px;100  }101  .hero-title {102    font-size: 80px; font-weight: 800; color: #111; line-height: 1.1; letter-spacing: 1px;103    margin-bottom: 40px;104  }105  .section-title {106    font-size: 42px; font-weight: 800; color: #111; letter-spacing: 1.5px;107    margin-top: 10px; margin-bottom: 24px;108  }109  .paragraph {110    font-size: 34px; color: #111; line-height: 1.55; margin-bottom: 28px;111  }112  .link-title {113    font-size: 40px; font-weight: 800; letter-spacing: 3px; margin: 40px 0 20px 0;114  }115  .big-title {116    font-size: 58px; font-weight: 800; margin: 24px 0; color: #111;117  }118  .subhead {119    font-size: 44px; font-weight: 800; margin-top: 18px; color: #111; letter-spacing: 1px;120  }121 122  /* Home indicator */123  .home-indicator {124    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);125    width: 300px; height: 14px; background: #111; border-radius: 7px; opacity: 0.85;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status Bar -->133  <div class="status-bar">134    <div>5:13</div>135    <div class="status-icons">136      <span class="dot"></span>137      <span class="dot"></span>138      <span class="dot"></span>139      <span class="dot"></span>140      <span class="dot"></span>141    </div>142  </div>143 144  <!-- Header -->145  <div class="nav">146    <div class="nav-title">SWITCH FWD RUNNING SHOES</div>147    <div class="price-close">148      <div class="price-pill">$140.00</div>149      <div class="icon-btn" aria-label="Close">150        <svg width="60" height="60" viewBox="0 0 24 24">151          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Thumbnails -->158  <div class="thumbs">159    <div class="thumb">[IMG: Lime Shoe]</div>160    <div class="thumb">[IMG: Pink Shoe]</div>161    <div class="thumb">[IMG: Black Shoe]</div>162    <div class="thumb">[IMG: Beige Shoe]</div>163    <div class="thumb">[IMG: Camo Shoe]</div>164  </div>165  <div class="thumb-indicator"></div>166 167  <!-- Badges -->168  <div class="badges">169    <div class="badge-icon">170      <!-- Share icon -->171      <svg width="90" height="90" viewBox="0 0 24 24">172        <circle cx="6" cy="12" r="3" fill="none" stroke="#111" stroke-width="2"/>173        <circle cx="18" cy="6" r="3" fill="none" stroke="#111" stroke-width="2"/>174        <circle cx="18" cy="18" r="3" fill="none" stroke="#111" stroke-width="2"/>175        <path d="M8.8 10.8 L15.2 7.2 M8.8 13.2 L15.2 16.8" stroke="#111" stroke-width="2" stroke-linecap="round"/>176      </svg>177    </div>178    <div class="badge-center">179      FREE STANDARD SHIPPING + FREE180      <span class="badge-sub">RETURNS & EXCHANGES</span>181    </div>182    <div class="badge-icon">183      <!-- Info icon -->184      <svg width="90" height="90" viewBox="0 0 24 24">185        <circle cx="12" cy="12" r="10" fill="none" stroke="#111" stroke-width="2"/>186        <path d="M12 10 v6" stroke="#111" stroke-width="2" stroke-linecap="round"/>187        <circle cx="12" cy="7" r="1.6" fill="#111"/>188      </svg>189    </div>190  </div>191 192  <!-- Note -->193  <div class="note">194    Great catch! This exclusive product is only available at adidas and can't be found anywhere else. This product is excluded from all promotional discounts and offers.195  </div>196 197  <!-- Content -->198  <div class="content">199    <div class="hero-title">SWITCH FWD TURNS GRAVITY INTO FORWARD MOTION.</div>200 201    <div class="section-title">FORWARD THINKING INNOVATION</div>202    <div class="paragraph">203      Move your run up to the next level with the all-new switch fwd designed to turn gravity into forward motion.204    </div>205    <div class="paragraph">206      An engineered EVA midsole structure features purpose-built voids that compress and expand under pressure, helping you forward with every stride. Added comfort comes from a breathable mesh upper, and a dedicated support in the heel delivers stability at every pace. The lightweight, high-performance outsole brings optimized grip for all conditions. Experience your smoothest run yet with the new switch fwd.207    </div>208 209    <div class="link-title">SPECIFICATIONS</div>210 211    <div class="big-title">HIGHLIGHTS</div>212 213    <div class="subhead">NEW MIDSOLE TECHNOLOGY</div>214    <div class="paragraph">215      The EVA midsole structure is engineered with voids that...216    </div>217  </div>218 219  <!-- Floating check icon near badges (as seen) -->220  <div style="position:absolute; top: 460px; left: 220px; width: 90px; height: 90px; display:flex; align-items:center; justify-content:center;">221    <svg width="90" height="90" viewBox="0 0 24 24">222      <circle cx="12" cy="12" r="10" fill="none" stroke="#111" stroke-width="2"/>223      <path d="M7 12 L10.2 15.2 L17 8.8" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>224    </svg>225  </div>226 227  <!-- Home Indicator -->228  <div class="home-indicator"></div>229</div>230</body>231</html>