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 - Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;20    color: #111;21  }22 23  /* Status bar */24  .status-bar {25    height: 92px;26    background: #000;27    color: #fff;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    box-sizing: border-box;33    font-size: 28px;34    letter-spacing: 0.3px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .status-dot {42    width: 16px;43    height: 16px;44    background: #fff;45    border-radius: 50%;46    opacity: 0.9;47  }48 49  /* Top app bar */50  .appbar {51    height: 126px;52    display: flex;53    align-items: center;54    padding: 0 36px;55    box-sizing: border-box;56    background: #fff;57    border-bottom: 1px solid #eaeaea;58  }59  .appbar .title {60    font-size: 40px;61    font-weight: 600;62    margin-left: 20px;63  }64  .appbar .left,65  .appbar .right {66    display: flex;67    align-items: center;68  }69  .appbar .left {70    flex: 1;71  }72  .appbar .right {73    gap: 28px;74  }75  .icon-btn {76    width: 56px;77    height: 56px;78    display: inline-flex;79    align-items: center;80    justify-content: center;81    border-radius: 28px;82  }83  .icon {84    width: 44px;85    height: 44px;86  }87  .divider {88    width: 100%;89    height: 1px;90    background: #eee;91  }92 93  /* Banner image */94  .hero {95    width: 100%;96    height: 290px;97    background: #E0E0E0;98    border-top: 1px solid #BDBDBD;99    border-bottom: 1px solid #BDBDBD;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #757575;104    font-size: 28px;105    box-sizing: border-box;106  }107 108  /* Description */109  .desc {110    padding: 60px 64px 20px 64px;111    font-size: 44px;112    line-height: 62px;113    color: #222;114  }115 116  /* Section header */117  .section-header {118    padding: 160px 64px 24px 64px;119    font-size: 50px;120    font-weight: 700;121    color: #111;122  }123 124  /* Product list */125  .product-row {126    display: flex;127    gap: 60px;128    padding: 20px 64px 0 64px;129    box-sizing: border-box;130  }131  .product {132    width: calc(50% - 30px);133  }134  .product .img {135    width: 100%;136    height: 260px;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #757575;143    font-size: 26px;144    box-sizing: border-box;145  }146  .product .name {147    margin-top: 28px;148    font-size: 38px;149    font-weight: 700;150    color: #111;151  }152  .product .category {153    margin-top: 10px;154    font-size: 32px;155    color: #777;156  }157  .product .price-row {158    margin-top: 12px;159    display: flex;160    align-items: baseline;161    gap: 18px;162  }163  .product .price {164    font-size: 40px;165    font-weight: 700;166  }167  .product .old-price {168    font-size: 34px;169    color: #9e9e9e;170    text-decoration: line-through;171  }172 173  .footnote {174    margin: 56px 64px 0 64px;175    padding-top: 36px;176    border-top: 1px solid #eee;177    color: #777;178    font-size: 28px;179  }180 181  /* Bottom gesture area */182  .gesture {183    position: absolute;184    bottom: 0;185    left: 0;186    width: 100%;187    height: 118px;188    background: #000;189    display: flex;190    align-items: center;191    justify-content: center;192  }193  .gesture .pill {194    width: 280px;195    height: 10px;196    background: #cfcfcf;197    border-radius: 8px;198    opacity: 0.9;199  }200</style>201</head>202<body>203<div id="render-target">204  <!-- Status Bar -->205  <div class="status-bar">206    <div class="time">10:56</div>207    <div class="status-icons">208      <div class="status-dot" title="signal"></div>209      <div class="status-dot" title="wifi"></div>210      <div class="status-dot" title="notifications"></div>211      <div style="width: 44px; height: 20px; border: 2px solid #fff; border-radius: 4px; position: relative;">212        <div style="position:absolute; right:-8px; top:6px; width:6px; height:8px; background:#fff;"></div>213        <div style="width: 60%; height: 100%; background: #fff;"></div>214      </div>215      <div>80%</div>216    </div>217  </div>218 219  <!-- App Bar -->220  <div class="appbar">221    <div class="left">222      <span class="icon-btn" aria-label="Back">223        <svg class="icon" viewBox="0 0 48 48" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">224          <path d="M30 10 L16 24 L30 38"></path>225        </svg>226      </span>227      <div class="title">Nike Waffle Debut</div>228    </div>229    <div class="right">230      <span class="icon-btn" aria-label="Search">231        <svg class="icon" viewBox="0 0 48 48" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round">232          <circle cx="20" cy="20" r="12"></circle>233          <path d="M30 30 L42 42"></path>234        </svg>235      </span>236      <span class="icon-btn" aria-label="Bag">237        <svg class="icon" viewBox="0 0 48 48" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">238          <path d="M10 18 H38 L36 42 H12 Z"></path>239          <path d="M16 18 V14 a8 8 0 0 1 16 0 v4"></path>240        </svg>241      </span>242    </div>243  </div>244 245  <!-- Banner image -->246  <div class="hero">[IMG: Close-up shoe banner]</div>247 248  <!-- Description -->249  <div class="desc">250    Low-cut, padded collar looks sleek and feels<br/>great.251  </div>252 253  <!-- Suggestions header -->254  <div class="section-header">You Might Also Like</div>255 256  <!-- Products -->257  <div class="product-row">258    <div class="product">259      <div class="img">[IMG: Nike Waffle One Leather shoe]</div>260      <div class="name">Nike Waffle One Leather</div>261      <div class="category">Men's Shoes</div>262      <div class="price-row">263        <div class="price">$95.97</div>264        <div class="old-price">$120</div>265      </div>266    </div>267 268    <div class="product">269      <div class="img">[IMG: Nike Waffle One SE shoe]</div>270      <div class="name">Nike Waffle One SE</div>271      <div class="category">Men's Shoes</div>272      <div class="price-row">273        <div class="price">$87.97</div>274        <div class="old-price">$110</div>275      </div>276    </div>277  </div>278 279  <!-- Footnote -->280  <div class="footnote">*Store availability and pricing not guaranteed.</div>281 282  <!-- Bottom gesture area -->283  <div class="gesture">284    <div class="pill"></div>285  </div>286</div>287</body>288</html>