GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Nike Waffle Debut - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    box-sizing: border-box;26    font-size: 42px;27    letter-spacing: 1px;28  }29  .status-left { flex: 1; }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34    font-size: 36px;35  }36  .icon-wifi, .icon-battery {37    width: 44px; height: 44px;38  }39 40  /* App bar */41  .app-bar {42    height: 120px;43    background: #fff;44    display: flex;45    align-items: center;46    padding: 0 36px;47    box-sizing: border-box;48    border-bottom: 1px solid #e8e8e8;49  }50  .app-left, .app-right { display: flex; align-items: center; }51  .app-left { gap: 24px; flex: 1; }52  .title { font-size: 48px; font-weight: 600; }53  .app-right { gap: 36px; }54  .icon-btn { width: 64px; height: 64px; }55 56  /* Content */57  .content {58    position: absolute;59    left: 0; right: 0;60    top: 240px; /* status + app bars */61    bottom: 120px; /* gesture area */62    overflow: hidden;63  }64  .inner {65    height: 100%;66    overflow-y: auto;67    padding: 40px 48px 0 48px;68    box-sizing: border-box;69  }70  .section {71    margin-bottom: 42px;72  }73  .label {74    font-size: 40px; font-weight: 700; margin-bottom: 8px;75  }76  .subtext { font-size: 36px; color: #4b4b4b; margin: 6px 0; }77  .link { font-size: 36px; color: #111; text-decoration: underline; width: fit-content; }78  .divider { height: 1px; background: #e6e6e6; margin: 34px 0; }79 80  .accordion {81    display: flex; align-items: center; justify-content: space-between;82    padding: 22px 0;83  }84  .acc-title { font-size: 52px; font-weight: 700; }85  .chev { width: 40px; height: 40px; }86 87  .reviews-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }88  .stars { display: flex; align-items: center; gap: 12px; }89  .star { width: 44px; height: 44px; }90 91  .actions {92    display: flex; justify-content: space-around; align-items: center;93    padding: 40px 0;94  }95  .action {96    width: 360px; text-align: center;97  }98  .action-icon {99    width: 92px; height: 92px; margin: 0 auto 14px auto; display: block;100  }101  .action-label { font-size: 38px; }102 103  .explore { font-size: 48px; font-weight: 600; margin: 40px 0 24px 0; }104 105  .img-placeholder {106    width: 100%;107    height: 520px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    display: flex;111    justify-content: center;112    align-items: center;113    color: #757575;114    font-size: 38px;115  }116 117  /* Gesture area */118  .gesture {119    position: absolute;120    left: 0; right: 0; bottom: 0;121    height: 120px;122    background: #000;123    display: flex; justify-content: center; align-items: center;124  }125  .pill {126    width: 320px; height: 16px; background: #D5D5D5; border-radius: 12px;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div class="status-left">10:56</div>136    <div class="status-right">137      <!-- simple icons -->138      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">139        <path d="M2 8c5-4 15-4 20 0"/>140        <path d="M5 12c3-3 11-3 14 0"/>141        <path d="M8 16c2-2 6-2 8 0"/>142        <circle cx="12" cy="20" r="1.8" fill="#fff"/>143      </svg>144      <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">145        <rect x="2" y="6" width="18" height="12" rx="2"></rect>146        <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>147        <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>148      </svg>149      <div style="font-size:36px;">80%</div>150    </div>151  </div>152 153  <!-- App bar -->154  <div class="app-bar">155    <div class="app-left">156      <!-- Back arrow -->157      <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">158        <path d="M15 5l-7 7 7 7"/>159      </svg>160      <div class="title">Nike Waffle Debut</div>161    </div>162    <div class="app-right">163      <!-- Search -->164      <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">165        <circle cx="11" cy="11" r="7"></circle>166        <path d="M20 20l-3.5-3.5"></path>167      </svg>168      <!-- Bag -->169      <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">170        <path d="M6 8h12l-1 12H7L6 8z"></path>171        <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>172      </svg>173    </div>174  </div>175 176  <!-- Main content -->177  <div class="content">178    <div class="inner">179 180      <div class="section">181        <div class="label">Shipping</div>182        <div class="subtext">Arrives by Wed, Nov 22</div>183        <div class="link">Edit Location</div>184      </div>185 186      <div class="section">187        <div class="label">Pickup</div>188        <div class="link">Find a Store</div>189      </div>190 191      <div class="divider"></div>192 193      <div class="accordion">194        <div class="acc-title">Size & Fit</div>195        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">196          <path d="M6 9l6 6 6-6"/>197        </svg>198      </div>199 200      <div class="divider"></div>201 202      <div class="reviews-row">203        <div class="acc-title" style="font-weight:700;">Reviews (295)</div>204        <div style="display:flex; align-items:center; gap:20px;">205          <div class="stars">206            <!-- 4 solid stars -->207            <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z"/></svg>208            <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z"/></svg>209            <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z"/></svg>210            <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z"/></svg>211            <!-- half star -->212            <svg class="star" viewBox="0 0 24 24">213              <defs>214                <clipPath id="half">215                  <rect x="0" y="0" width="12" height="24"></rect>216                </clipPath>217              </defs>218              <path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z" fill="#111" clip-path="url(#half)"></path>219              <path d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 7L12 18l-6.2 3.2L7 14.2 2 9.3l6.9-1L12 2z" fill="none" stroke="#111" stroke-width="1.2"></path>220            </svg>221          </div>222          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">223            <path d="M6 9l6 6 6-6"/>224          </svg>225        </div>226      </div>227 228      <div class="divider"></div>229 230      <div class="actions">231        <div class="action">232          <!-- Chat bubble with green dot -->233          <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.6">234            <path d="M4 5h12a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4H9l-5 4V9a4 4 0 0 1 4-4z"/>235            <circle cx="17.2" cy="9" r="1.8" fill="#2ecc71" stroke="none"/>236          </svg>237          <div class="action-label">Message</div>238        </div>239        <div class="action">240          <!-- Share icon -->241          <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.8">242            <circle cx="6" cy="12" r="2"></circle>243            <circle cx="18" cy="6" r="2"></circle>244            <circle cx="18" cy="18" r="2"></circle>245            <path d="M8 12l8-6M8 12l8 6"/>246          </svg>247          <div class="action-label">Share</div>248        </div>249      </div>250 251      <div class="divider"></div>252 253      <div class="explore">Explore the Nike Waffle Debut Men’s Shoes</div>254 255      <div class="img-placeholder">[IMG: Product lifestyle banner]</div>256 257      <div style="height: 80px;"></div>258    </div>259  </div>260 261  <!-- Gesture area -->262  <div class="gesture">263    <div class="pill"></div>264  </div>265</div>266</body>267</html>