GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Nike Waffle Debut</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20    color: #111;21  }22 23  /* Status bar */24  .status-bar {25    height: 90px;26    background: #000;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 32px;31    box-sizing: border-box;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-left { flex: 1; }36  .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-icon svg { display: block; }42 43  /* App bar */44  .app-bar {45    height: 128px;46    background: #fff;47    display: flex;48    align-items: center;49    box-sizing: border-box;50    padding: 0 28px;51    border-bottom: 1px solid #eee;52  }53  .app-left, .app-right {54    width: 180px;55    display: flex;56    align-items: center;57    gap: 28px;58  }59  .app-left { justify-content: flex-start; }60  .app-right { justify-content: flex-end; }61  .app-title {62    flex: 1;63    text-align: center;64    font-size: 46px;65    font-weight: 600;66    color: #222;67  }68  .icon-btn svg { width: 64px; height: 64px; }69 70  /* Content */71  .content {72    height: calc(2400px - 90px - 128px - 46px);73    overflow: hidden;74  }75  .hero {76    width: 100%;77    height: 980px;78    background: #E0E0E0;79    border-top: 1px solid #BDBDBD;80    border-bottom: 1px solid #BDBDBD;81    display: flex;82    align-items: flex-end;83    justify-content: flex-start;84    position: relative;85  }86  .img-label {87    position: absolute;88    left: 32px;89    top: 32px;90    color: #757575;91    font-size: 34px;92    background: rgba(255,255,255,0.85);93    padding: 12px 16px;94    border: 1px solid #BDBDBD;95    border-radius: 6px;96  }97 98  .desc {99    background: #fff;100    padding: 64px 56px 48px;101    box-sizing: border-box;102  }103  .desc p {104    margin: 0;105    font-size: 44px;106    line-height: 68px;107    color: #222;108  }109 110  .secondary-img {111    margin-top: 28px;112    width: 100%;113    height: 340px;114    background: #E0E0E0;115    border-top: 1px solid #BDBDBD;116    border-bottom: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 34px;122  }123 124  /* Gesture bar */125  .gesture-container {126    position: absolute;127    left: 0;128    right: 0;129    bottom: 24px;130    height: 46px;131    display: flex;132    justify-content: center;133    align-items: center;134    pointer-events: none;135  }136  .gesture-bar {137    width: 360px;138    height: 10px;139    background: #000;140    border-radius: 10px;141    opacity: 0.9;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="status-left">10:56</div>151    <div class="status-right">152      <span class="status-icon" title="cell">153        <svg width="44" height="44" viewBox="0 0 48 48" fill="none">154          <rect x="4" y="30" width="6" height="14" fill="#fff"/>155          <rect x="14" y="24" width="6" height="20" fill="#fff" opacity="0.9"/>156          <rect x="24" y="18" width="6" height="26" fill="#fff" opacity="0.8"/>157          <rect x="34" y="12" width="6" height="32" fill="#fff" opacity="0.7"/>158        </svg>159      </span>160      <span class="status-icon" title="wifi">161        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">162          <path d="M6 18c12-10 24-10 36 0"/>163          <path d="M12 24c8-6 16-6 24 0"/>164          <path d="M18 30c4-3 8-3 12 0"/>165          <circle cx="24" cy="36" r="2.5" fill="#fff" stroke="none"/>166        </svg>167      </span>168      <span class="status-icon" title="battery">169        <svg width="64" height="44" viewBox="0 0 64 44" fill="none" stroke="#fff" stroke-width="3">170          <rect x="2" y="10" width="52" height="24" rx="3"></rect>171          <rect x="6" y="14" width="36" height="16" fill="#fff" stroke="none"></rect>172          <rect x="54" y="16" width="6" height="12" rx="1" fill="#fff" stroke="none"></rect>173        </svg>174      </span>175      <span style="font-size:34px;">80%</span>176    </div>177  </div>178 179  <!-- App Bar -->180  <div class="app-bar">181    <div class="app-left">182      <span class="icon-btn" title="Back">183        <svg viewBox="0 0 48 48" width="64" height="64" fill="none" stroke="#111" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">184          <path d="M28 8 L12 24 L28 40"/>185        </svg>186      </span>187    </div>188    <div class="app-title">Nike Waffle Debut</div>189    <div class="app-right">190      <span class="icon-btn" title="Search">191        <svg viewBox="0 0 48 48" width="64" height="64" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round">192          <circle cx="20" cy="20" r="12"></circle>193          <path d="M30 30 L42 42"></path>194        </svg>195      </span>196      <span class="icon-btn" title="Bag">197        <svg viewBox="0 0 48 48" width="64" height="64" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">198          <rect x="8" y="14" width="32" height="28" rx="3"></rect>199          <path d="M16 14c0-4 4-7 8-7s8 3 8 7"></path>200        </svg>201      </span>202    </div>203  </div>204 205  <!-- Main Content -->206  <div class="content">207    <div class="hero">208      <div class="img-label">[IMG: Lifestyle photo of legs wearing Nike Waffle Debut shoes]</div>209    </div>210 211    <div class="desc">212      <p>213        Swoosh logos wrap around heel to form a pull tab, adding thoughtful aesthetics to the easy on and off functionality.214      </p>215    </div>216 217    <div class="secondary-img">[IMG: Close-up product detail]</div>218  </div>219 220  <!-- Gesture Bar -->221  <div class="gesture-container">222    <div class="gesture-bar"></div>223  </div>224 225</div>226</body>227</html>