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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    height: 100px;22    background: #000;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 36px;29    line-height: 1;30  }31  .status-left { flex: 1; }32  .status-right {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .icon {38    width: 42px;39    height: 42px;40  }41 42  /* Header */43  .header {44    height: 120px;45    background: #fff;46    border-bottom: 1px solid #eaeaea;47    display: flex;48    align-items: center;49    padding: 0 28px;50    box-sizing: border-box;51    gap: 20px;52  }53  .back-btn, .hdr-icon {54    width: 76px;55    height: 76px;56    display: flex;57    align-items: center;58    justify-content: center;59    cursor: default;60  }61  .title {62    font-size: 44px;63    font-weight: 600;64    flex: 1;65    white-space: nowrap;66    overflow: hidden;67    text-overflow: ellipsis;68  }69 70  /* Hero image section */71  .hero {72    background: #f4f4f4;73    height: 980px;74    box-sizing: border-box;75    padding-top: 80px;76  }77  .shoe-image {78    width: 940px;79    height: 520px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    color: #757575;83    margin: 0 auto 120px auto;84    display: flex;85    align-items: center;86    justify-content: center;87    font-size: 34px;88    letter-spacing: 0.2px;89  }90  .indicator {91    width: 720px;92    height: 8px;93    background: #e0e0e0;94    margin: 0 auto;95    border-radius: 8px;96    position: relative;97  }98  .indicator::before {99    content: "";100    position: absolute;101    left: 0;102    top: 0;103    height: 8px;104    width: 140px;105    background: #6b6b6b;106    border-radius: 8px;107  }108 109  /* Thumbnails row */110  .thumbs {111    background: #fff;112    padding: 40px 40px 10px 40px;113    box-sizing: border-box;114  }115  .thumb {116    width: 520px;117    height: 360px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    color: #757575;121    display: flex;122    align-items: center;123    justify-content: center;124    font-size: 28px;125  }126 127  /* Product info */128  .info {129    padding: 30px 44px 0 44px;130    box-sizing: border-box;131  }132  .category {133    color: #6b6b6b;134    font-size: 34px;135    margin: 16px 0 10px 0;136  }137  .product-name {138    font-size: 64px;139    font-weight: 800;140    letter-spacing: -0.5px;141    line-height: 1.15;142    margin: 8px 0 0 0;143  }144 145  /* Bottom home indicator (gesture bar) */146  .bottom-safe {147    position: absolute;148    left: 0; right: 0; bottom: 0;149    height: 110px;150    background: #000;151  }152  .home-pill {153    position: absolute;154    left: 50%;155    bottom: 34px;156    transform: translateX(-50%);157    width: 360px;158    height: 12px;159    background: #ffffff;160    border-radius: 12px;161    opacity: 0.9;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="status-left">2:57</div>171    <div class="status-right">172      <!-- simple dot as notifications separator -->173      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>174      <!-- WiFi -->175      <svg class="icon" viewBox="0 0 24 24">176        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>177        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>178        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>179        <circle cx="12" cy="19" r="1.5" fill="#fff"/>180      </svg>181      <!-- Battery -->182      <svg class="icon" viewBox="0 0 28 24">183        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>184        <rect x="4" y="8" width="14" height="8" fill="#fff"/>185        <rect x="22" y="10" width="4" height="4" fill="#fff"/>186      </svg>187    </div>188  </div>189 190  <!-- Header -->191  <div class="header">192    <div class="back-btn" aria-label="Back">193      <svg width="44" height="44" viewBox="0 0 24 24">194        <path d="M15 5L8 12l7 7" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196    </div>197    <div class="title">Nike Air Force 1 '07 LV8 EMB</div>198    <div class="hdr-icon" aria-label="Search">199      <svg width="44" height="44" viewBox="0 0 24 24">200        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.2" fill="none"/>201        <path d="M20 20l-4-4" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"/>202      </svg>203    </div>204    <div class="hdr-icon" aria-label="Bag">205      <svg width="44" height="44" viewBox="0 0 24 24">206        <rect x="4" y="8" width="16" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"/>207        <path d="M8 8a4 4 0 0 1 8 0" stroke="#111" stroke-width="2" fill="none"/>208      </svg>209    </div>210  </div>211 212  <!-- Hero image area -->213  <div class="hero">214    <div class="shoe-image">[IMG: White sneaker side view]</div>215    <div class="indicator"></div>216  </div>217 218  <!-- Thumbnails -->219  <div class="thumbs">220    <div class="thumb">[IMG: Sneaker thumbnail]</div>221  </div>222 223  <!-- Product Info -->224  <div class="info">225    <div class="category">Shoes</div>226    <div class="product-name">Nike Air Force 1 '07 LV8 EMB</div>227  </div>228 229  <!-- Bottom gesture area -->230  <div class="bottom-safe">231    <div class="home-pill"></div>232  </div>233</div>234</body>235</html>