GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Switch FWD Running Shoes</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 100px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #000;24    font-weight: 600;25    font-size: 34px;26  }27  .status-left {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 16px;36  }37  .dot {38    width: 18px; height: 18px; border-radius: 50%; background: #000;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 24px;44  }45  .icon { width: 40px; height: 40px; }46 47  /* Header */48  .header {49    padding: 28px 48px 18px 48px;50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .title {55    font-size: 52px;56    letter-spacing: 2px;57    font-weight: 800;58    color: #000;59  }60  .header-actions {61    display: flex;62    align-items: center;63    gap: 24px;64  }65  .price-pill {66    background: #000;67    color: #fff;68    font-size: 36px;69    font-weight: 700;70    padding: 16px 28px;71    border-radius: 18px;72    letter-spacing: 1px;73  }74  .close-btn {75    width: 72px; height: 72px; border-radius: 12px;76    display: flex; align-items: center; justify-content: center;77    border: 2px solid #000;78    background: #fff;79  }80 81  /* Carousel thumbnails */82  .thumb-row {83    padding: 12px 48px 4px 48px;84    display: flex;85    gap: 30px;86    overflow: hidden;87  }88  .thumb {89    width: 150px;90    height: 100px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    display: flex; justify-content: center; align-items: center;94    color: #757575;95    font-weight: 600; font-size: 22px;96    border-radius: 10px;97  }98 99  /* Body copy */100  .content {101    padding: 20px 48px 0 48px;102    color: #1a1a1a;103    font-size: 32px;104    line-height: 1.5;105  }106 107  .small-label {108    margin-top: 60px;109    font-size: 34px;110    font-weight: 800;111    letter-spacing: 2px;112    color: #000;113  }114  .main-headline {115    margin-top: 40px;116    font-size: 72px;117    font-weight: 900;118    letter-spacing: 2px;119    color: #000;120  }121  .section-title {122    margin-top: 50px;123    font-size: 46px;124    font-weight: 800;125    letter-spacing: 1.5px;126    color: #000;127  }128  .section-body {129    margin-top: 16px;130    font-size: 30px;131    color: #222;132    line-height: 1.6;133  }134 135  /* Bottom handle */136  .bottom-handle {137    position: absolute;138    bottom: 28px;139    left: 50%;140    transform: translateX(-50%);141    width: 280px;142    height: 12px;143    background: #D9D9D9;144    border-radius: 12px;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Status bar -->152  <div class="status-bar">153    <div class="status-left">154      <div>5:13</div>155      <div class="status-icons">156        <div class="dot"></div>157        <div class="dot"></div>158        <div class="dot"></div>159        <div class="dot" style="opacity:0.6"></div>160      </div>161    </div>162    <div class="status-right">163      <!-- WiFi -->164      <svg class="icon" viewBox="0 0 24 24">165        <path d="M12 18c.7 0 1.2.5 1.2 1.2S12.7 20.4 12 20.4s-1.2-.5-1.2-1.2S11.3 18 12 18z" fill="#000"/>166        <path d="M4.5 11.5c4.9-4.6 10.1-4.6 15 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>167        <path d="M7.8 14.3c2.8-2.6 5.6-2.6 8.4 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>168      </svg>169      <!-- Battery -->170      <svg class="icon" viewBox="0 0 28 24">171        <rect x="1" y="5" width="20" height="14" rx="3" ry="3" stroke="#000" stroke-width="2" fill="none"/>172        <rect x="3" y="7" width="12" height="10" fill="#000"/>173        <rect x="22" y="9" width="4" height="6" rx="1" fill="#000"/>174      </svg>175    </div>176  </div>177 178  <!-- Header -->179  <div class="header">180    <div class="title">SWITCH FWD RUNNING SHOES</div>181    <div class="header-actions">182      <div class="price-pill">$140.00</div>183      <div class="close-btn">184        <svg width="36" height="36" viewBox="0 0 24 24">185          <path d="M5 5L19 19M19 5L5 19" stroke="#000" stroke-width="2" stroke-linecap="round"/>186        </svg>187      </div>188    </div>189  </div>190 191  <!-- Carousel thumbnails -->192  <div class="thumb-row">193    <div class="thumb">[IMG: Shoe]</div>194    <div class="thumb">[IMG: Shoe]</div>195    <div class="thumb">[IMG: Shoe]</div>196    <div class="thumb">[IMG: Shoe]</div>197    <div class="thumb">[IMG: Shoe]</div>198  </div>199 200  <!-- Intro copy -->201  <div class="content">202    <p>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.</p>203 204    <div class="small-label">SPECIFICATIONS</div>205 206    <div class="main-headline">HIGHLIGHTS</div>207 208    <div class="section-title">NEW MIDSOLE TECHNOLOGY</div>209    <div class="section-body">210      The EVA midsole structure is engineered with voids that compress and expand under pressure.211    </div>212 213    <div class="section-title">BREATHABLE UPPER</div>214    <div class="section-body">215      An engineered lightweight mesh upper includes window panels for breathability. Made in part with recycled materials.216    </div>217 218    <div class="section-title">CONTINENTAL™ OUTSOLE</div>219    <div class="section-body">220      The durable and lightweight Continental™ outsole features a high‑performance compound for optimized grip in all conditions.221    </div>222  </div>223 224  <div class="bottom-handle"></div>225</div>226</body>227</html>