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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #111;14  }15 16  /* Root container per requirements */17  #render-target {18    width: 1080px;19    height: 2400px;20    position: relative;21    overflow: hidden;22    background: #fff;23  }24 25  /* Status bar */26  .status-bar {27    height: 120px;28    background: #000;29    color: #fff;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    box-sizing: border-box;35    font-weight: 600;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 18px;41    font-size: 40px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 20px;47  }48  .icon {49    width: 42px;50    height: 42px;51    display: inline-flex;52    align-items: center;53    justify-content: center;54  }55 56  /* App bar */57  .app-bar {58    height: 140px;59    padding: 0 36px;60    display: flex;61    align-items: center;62    box-sizing: border-box;63    border-bottom: 1px solid #e5e5e5;64    background: #fff;65  }66  .app-title {67    font-size: 52px;68    font-weight: 700;69    margin-left: 16px;70  }71  .app-right {72    margin-left: auto;73    display: flex;74    align-items: center;75    gap: 28px;76  }77  .tap-area {78    width: 88px;79    height: 88px;80    display: inline-flex;81    align-items: center;82    justify-content: center;83  }84 85  /* Hero image area */86  .hero {87    height: 980px;88    background: #f3f3f3;89    display: flex;90    align-items: center;91    justify-content: center;92    box-sizing: border-box;93  }94  .img-placeholder {95    width: 920px;96    height: 440px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    color: #757575;100    display: flex;101    align-items: center;102    justify-content: center;103    font-size: 36px;104    border-radius: 8px;105  }106 107  /* Pager indicator */108  .pager {109    height: 120px;110    display: flex;111    align-items: center;112    justify-content: center;113  }114  .pager-track {115    width: 680px;116    height: 8px;117    background: #dedede;118    border-radius: 6px;119    position: relative;120    overflow: hidden;121  }122  .pager-active {123    width: 160px;124    height: 100%;125    background: #9e9e9e;126    border-radius: 6px;127    position: absolute;128    left: 180px;129    top: 0;130  }131 132  /* Thumbnails row */133  .thumbs {134    padding: 22px 36px 24px;135    box-sizing: border-box;136    display: grid;137    grid-template-columns: repeat(3, 1fr);138    gap: 28px;139  }140  .thumb {141    height: 320px;142    background: #E0E0E0;143    border: 1px solid #BDBDBD;144    display: flex;145    align-items: center;146    justify-content: center;147    color: #757575;148    font-size: 32px;149    border-radius: 6px;150  }151 152  /* Product info */153  .info {154    padding: 28px 36px 0;155    box-sizing: border-box;156  }157  .info .label {158    font-size: 44px;159    color: #5f5f5f;160    margin-bottom: 8px;161  }162  .info .title {163    font-size: 88px;164    font-weight: 800;165    line-height: 1.05;166  }167 168  /* Bottom gesture pill (for visual completeness) */169  .gesture {170    position: absolute;171    bottom: 24px;172    left: 50%;173    transform: translateX(-50%);174    width: 280px;175    height: 12px;176    background: #111;177    opacity: 0.9;178    border-radius: 12px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div class="status-left">188      <div>10:55</div>189      <div class="icon">190        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">191          <path d="M12 2v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>192          <path d="M4.93 4.93l2.83 2.83" stroke="#fff" stroke-width="2" stroke-linecap="round"/>193        </svg>194      </div>195      <div class="icon">196        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" xmlns="http://www.w3.org/2000/svg">197          <circle cx="12" cy="13" r="5"/>198          <path d="M12 3v2M3 13h2m14 0h2M12 21v-2"/>199        </svg>200      </div>201      <div class="icon">202        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">203          <path d="M3 5h18v14H3z"/>204          <path d="M3 7l9 6 9-6" fill="#000"/>205        </svg>206      </div>207      <div class="icon">208        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" xmlns="http://www.w3.org/2000/svg">209          <path d="M12 2l9 18H3z"/>210        </svg>211      </div>212    </div>213    <div class="status-right">214      <div class="icon">215        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" xmlns="http://www.w3.org/2000/svg">216          <path d="M2 10l10-7 10 7v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10z"/>217        </svg>218      </div>219      <div class="icon" style="width:auto; font-size:36px;">80%</div>220      <div class="icon">221        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">222          <rect x="3" y="7" width="16" height="10" rx="2"/>223          <rect x="19" y="10" width="2" height="4" rx="1"/>224        </svg>225      </div>226    </div>227  </div>228 229  <!-- App Bar -->230  <div class="app-bar">231    <div class="tap-area">232      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" xmlns="http://www.w3.org/2000/svg">233        <path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/>234      </svg>235    </div>236    <div class="app-title">Nike Waffle Debut</div>237    <div class="app-right">238      <div class="tap-area">239        <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" xmlns="http://www.w3.org/2000/svg">240          <circle cx="11" cy="11" r="7"/>241          <path d="M20 20l-4-4" stroke-linecap="round"/>242        </svg>243      </div>244      <div class="tap-area">245        <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" xmlns="http://www.w3.org/2000/svg">246          <path d="M6 7h12v12H6z"/>247          <path d="M8 7a4 4 0 0 1 8 0" />248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Hero Image -->254  <div class="hero">255    <div class="img-placeholder">[IMG: Nike Waffle Debut Shoe]</div>256  </div>257 258  <!-- Pager Indicator -->259  <div class="pager">260    <div class="pager-track">261      <div class="pager-active"></div>262    </div>263  </div>264 265  <!-- Thumbnails -->266  <div class="thumbs">267    <div class="thumb">[IMG: Black Colorway]</div>268    <div class="thumb">[IMG: Light Blue Colorway]</div>269    <div class="thumb">[IMG: Black/White Colorway]</div>270  </div>271 272  <!-- Product Info -->273  <div class="info">274    <div class="label">Men's Shoes</div>275    <div class="title">Nike Waffle Debut</div>276  </div>277 278  <!-- Bottom gesture pill -->279  <div class="gesture"></div>280</div>281</body>282</html>