GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Nike PDP Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 32px;26    font-weight: 600;27    font-size: 36px;28    letter-spacing: 0.5px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    gap: 24px;34    align-items: center;35  }36  .status-icons svg { fill: #fff; }37 38  /* App bar */39  .app-bar {40    height: 144px;41    display: flex;42    align-items: center;43    padding: 0 36px;44    gap: 24px;45  }46  .app-title {47    font-size: 56px;48    font-weight: 700;49    letter-spacing: 0.2px;50  }51  .app-actions {52    margin-left: auto;53    display: flex;54    gap: 28px;55    align-items: center;56  }57  .icon-btn {58    width: 72px;59    height: 72px;60    display: grid;61    place-items: center;62  }63 64  /* Content */65  .content {66    padding: 12px 48px 0 48px;67    font-size: 40px;68    line-height: 1.5;69  }70  .bullets {71    margin: 16px 0 28px 0;72    padding-left: 28px;73  }74  .bullets li { margin: 8px 0; }75  .muted-link {76    color: #9e9e9e;77    font-weight: 600;78    margin: 16px 0 36px;79  }80 81  /* Pills / buttons */82  .pill {83    height: 160px;84    border-radius: 100px;85    display: flex;86    align-items: center;87    justify-content: center;88    margin: 28px auto;89    width: 88%;90    font-size: 44px;91    font-weight: 700;92  }93  .pill.outline {94    border: 3px solid #E0E0E0;95    color: #111;96    background: #fff;97    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);98  }99  .pill.primary {100    background: #0f0f0f;101    color: #fff;102  }103  .pill .right-caret {104    margin-left: 18px;105    transform: rotate(90deg);106  }107 108  /* Sections */109  .divider {110    height: 2px;111    background: #efefef;112    width: 100%;113    margin: 36px 0;114  }115  .section-row {116    padding: 28px 0;117    display: flex;118    align-items: center;119    font-size: 48px;120    font-weight: 700;121  }122  .section-row .chev {123    margin-left: auto;124  }125  .stars {126    margin-left: auto;127    font-size: 48px;128    letter-spacing: 6px;129  }130  .stars .light { color: #d0d0d0; }131 132  /* Share area */133  .share-area {134    position: absolute;135    bottom: 220px;136    width: 100%;137    display: flex;138    flex-direction: column;139    align-items: center;140    color: #333;141  }142  .share-area .share-text {143    margin-top: 18px;144    font-size: 40px;145  }146 147  /* Snackbar */148  .snackbar {149    position: absolute;150    left: 36px;151    right: 36px;152    bottom: 156px;153    height: 120px;154    border-radius: 22px;155    background: rgba(51,51,51,0.95);156    color: #fff;157    display: flex;158    align-items: center;159    padding: 0 36px;160    font-size: 42px;161    font-weight: 700;162  }163 164  /* Gesture bar */165  .gesture-bar {166    position: absolute;167    bottom: 40px;168    left: 50%;169    transform: translateX(-50%);170    width: 360px;171    height: 12px;172    background: #d8d8d8;173    border-radius: 12px;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status Bar -->180  <div class="status-bar">181    8:32182    <div class="status-icons">183      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 22c4.4 0 8-3.6 8-8h-2a6 6 0 1 1-6-6V4C7.6 4 4 7.6 4 12s3.6 10 8 10z"/></svg>184      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M17 6H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 2v8H7V8h10z"/></svg>185    </div>186  </div>187 188  <!-- App Bar -->189  <div class="app-bar">190    <div class="icon-btn">191      <svg width="64" height="64" viewBox="0 0 48 48">192        <path d="M30 8 L14 24 L30 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193        <path d="M16 24 H40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>194      </svg>195    </div>196    <div class="app-title">Nike Structure 25</div>197    <div class="app-actions">198      <div class="icon-btn">199        <svg width="56" height="56" viewBox="0 0 24 24">200          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>201          <path d="M16.5 16.5 L21 21" stroke="#111" stroke-width="2" stroke-linecap="round"/>202        </svg>203      </div>204      <div class="icon-btn" style="position: relative;">205        <svg width="56" height="56" viewBox="0 0 24 24">206          <path d="M8 8V7a4 4 0 0 1 8 0v1h2a1 1 0 0 1 1 1v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a1 1 0 0 1 1-1h2zM10 8h4V7a2 2 0 0 0-4 0v1z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>207        </svg>208        <div style="position:absolute; right:4px; top:2px; background:#111; color:#fff; width:34px; height:34px; border-radius:50%; font-size:24px; display:flex; align-items:center; justify-content:center;">1</div>209      </div>210    </div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <ul class="bullets">216      <li>Shown: Black/Racer Blue/Sundial/White</li>217      <li>Style: DJ7883-003</li>218      <li>Country/Region of Origin: Vietnam</li>219    </ul>220 221    <div class="muted-link">View Product Details</div>222 223    <div class="pill outline">224      <span>Size UK 9</span>225      <svg class="right-caret" width="28" height="28" viewBox="0 0 24 24">226        <path d="M8 10 L12 14 L16 10" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>227      </svg>228    </div>229 230    <div class="pill primary">Add to Bag</div>231 232    <div class="pill outline" style="font-weight:600;">233      <span>Favorited</span>234      <svg width="48" height="48" viewBox="0 0 24 24" style="margin-left:18px;">235        <path d="M12 21s-7-4.35-7-9a4.5 4.5 0 0 1 8-2.9A4.5 4.5 0 0 1 19 12c0 4.65-7 9-7 9z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>236      </svg>237    </div>238 239    <div class="divider"></div>240 241    <div class="section-row">242      <div>Size & Fit</div>243      <svg class="chev" width="36" height="36" viewBox="0 0 24 24">244        <path d="M8 10 L12 14 L16 10" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>245      </svg>246    </div>247 248    <div class="divider"></div>249 250    <div class="section-row">251      <div>Reviews (52)</div>252      <div class="stars">253        <span>★</span><span>★</span><span>★</span><span>★</span><span class="light">★</span>254      </div>255      <svg class="chev" width="36" height="36" viewBox="0 0 24 24" style="margin-left:24px;">256        <path d="M8 10 L12 14 L16 10" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>257      </svg>258    </div>259 260    <div class="divider"></div>261 262    <div class="section-row">263      <div>Product Information</div>264      <svg class="chev" width="36" height="36" viewBox="0 0 24 24">265        <path d="M8 10 L12 14 L16 10" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>266      </svg>267    </div>268  </div>269 270  <!-- Share area near the bottom -->271  <div class="share-area">272    <svg width="72" height="72" viewBox="0 0 24 24">273      <circle cx="6" cy="12" r="2" fill="none" stroke="#111" stroke-width="2"/>274      <circle cx="18" cy="6" r="2" fill="none" stroke="#111" stroke-width="2"/>275      <circle cx="18" cy="18" r="2" fill="none" stroke="#111" stroke-width="2"/>276      <path d="M8 11 L16 7 M8 13 L16 17" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>277    </svg>278    <div class="share-text">Share</div>279  </div>280 281  <!-- Snackbar -->282  <div class="snackbar">Added to Favorites</div>283 284  <!-- Gesture bar -->285  <div class="gesture-bar"></div>286</div>287</body>288</html>