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 Product Detail - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 28px;25    box-sizing: border-box;26    font-size: 32px;27    letter-spacing: 0.5px;28  }29  .status-bar .right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .status-icon {36    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;37  }38  /* App header */39  .app-bar {40    height: 120px;41    background: #fff;42    display: flex;43    align-items: center;44    padding: 0 24px;45    box-sizing: border-box;46    border-bottom: 1px solid #eaeaea;47  }48  .app-title {49    font-weight: 700;50    font-size: 40px;51    margin-left: 12px;52  }53  .app-actions {54    margin-left: auto;55    display: flex;56    align-items: center;57    gap: 26px;58  }59  .icon-btn {60    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;61  }62 63  /* Hero image */64  .hero {65    width: 100%;66    height: 260px;67    background: #E0E0E0;68    border-top: 1px solid #BDBDBD;69    border-bottom: 1px solid #BDBDBD;70    display: flex;71    align-items: center;72    justify-content: center;73    color: #757575;74    font-size: 30px;75  }76 77  /* Content */78  .content {79    padding: 48px 64px 0 64px;80    box-sizing: border-box;81  }82  .lead-copy {83    font-size: 42px;84    line-height: 1.4;85    margin: 24px 0 100px 0;86  }87  .section-title {88    font-size: 50px;89    font-weight: 700;90    margin: 20px 0 36px 0;91  }92 93  /* Product grid */94  .products {95    display: flex;96    gap: 36px;97    padding: 0 16px;98  }99  .card {100    flex: 1 1 0;101  }102  .prod-img {103    width: 100%;104    height: 280px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    display: flex;108    align-items: center;109    justify-content: center;110    color: #757575;111    font-size: 28px;112  }113  .prod-title {114    font-size: 36px;115    font-weight: 700;116    margin: 22px 0 8px 0;117  }118  .prod-sub {119    color: #777;120    font-size: 30px;121    margin-bottom: 10px;122  }123  .price-row {124    display: flex;125    align-items: baseline;126    gap: 16px;127    margin-bottom: 22px;128  }129  .price-new {130    font-size: 36px;131    font-weight: 700;132  }133  .price-old {134    font-size: 32px;135    color: #9e9e9e;136    text-decoration: line-through;137  }138 139  .divider {140    height: 1px;141    background: #e9e9e9;142    margin: 24px 0;143  }144  .note {145    color: #8b8b8b;146    font-size: 28px;147    padding: 0 32px 0 32px;148    margin-top: 8px;149  }150 151  /* Bottom gesture area */152  .gesture-area {153    position: absolute;154    left: 0; right: 0; bottom: 0;155    height: 120px;156    background: #000;157    display: flex;158    align-items: center;159    justify-content: center;160  }161  .gesture-pill {162    width: 260px;163    height: 12px;164    border-radius: 8px;165    background: #fff;166    opacity: 0.9;167  }168</style>169</head>170<body>171<div id="render-target">172  <!-- Status bar -->173  <div class="status-bar">174    <div>10:56</div>175    <div class="right">176      <!-- Simple status icons -->177      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">178        <path d="M2 18h2a8 8 0 0 1 8-8V8A10 10 0 0 0 2 18z"></path>179      </svg>180      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">181        <path d="M3 9l9-6 9 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"></path>182      </svg>183      <div style="display:flex; align-items:center; gap:6px;">184        <svg width="46" height="24" viewBox="0 0 46 24">185          <rect x="1" y="4" width="36" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>186          <rect x="3" y="6" width="30" height="12" fill="#fff"/>187          <rect x="39" y="8" width="6" height="8" rx="1" fill="#fff"/>188        </svg>189        <span style="font-size:28px;">80%</span>190      </div>191    </div>192  </div>193 194  <!-- App header -->195  <div class="app-bar">196    <div class="icon-btn" aria-hidden="true">197      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">198        <path d="M15 18l-6-6 6-6"></path>199      </svg>200    </div>201    <div class="app-title">Nike Waffle Debut</div>202    <div class="app-actions">203      <div class="icon-btn">204        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">205          <circle cx="11" cy="11" r="7"></circle>206          <path d="M21 21l-4.3-4.3"></path>207        </svg>208      </div>209      <div class="icon-btn">210        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">211          <path d="M6 7h12l-1 12H7L6 7z"></path>212          <path d="M9 7a3 3 0 0 1 6 0"></path>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Hero banner / image -->219  <div class="hero">[IMG: Shoe close-up banner]</div>220 221  <!-- Body content -->222  <div class="content">223    <p class="lead-copy">Low-cut, padded collar looks sleek and feels great.</p>224 225    <div style="height: 160px;"></div>226 227    <div class="section-title">You Might Also Like</div>228 229    <div class="products">230      <!-- Product 1 -->231      <div class="card">232        <div class="prod-img">[IMG: Black/White Nike Waffle One SE]</div>233        <div class="prod-title">Nike Waffle One SE</div>234        <div class="prod-sub">Men's Shoes</div>235        <div class="price-row">236          <span class="price-new">$88.97</span>237          <span class="price-old">$110</span>238        </div>239      </div>240 241      <!-- Product 2 -->242      <div class="card">243        <div class="prod-img">[IMG: Brown Nike Waffle One SE]</div>244        <div class="prod-title">Nike Waffle One SE</div>245        <div class="prod-sub">Men's Shoes</div>246        <div class="price-row">247          <span class="price-new">$88.97</span>248          <span class="price-old">$110</span>249        </div>250      </div>251    </div>252 253    <div class="divider"></div>254    <div class="note">*Store availability and pricing not guaranteed.</div>255  </div>256 257  <!-- Gesture home indicator -->258  <div class="gesture-area">259    <div class="gesture-pill"></div>260  </div>261</div>262</body>263</html>