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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 30px;38  }39  .sb-icon {40    width: 38px;41    height: 38px;42  }43 44  /* Header */45  .header {46    position: absolute;47    top: 120px;48    left: 0;49    width: 1080px;50    height: 160px;51    display: flex;52    align-items: center;53    justify-content: space-between;54    box-sizing: border-box;55    padding: 0 40px;56    color: #111;57    border-bottom: 1px solid #eee;58  }59  .header-left {60    display: flex;61    align-items: center;62    gap: 24px;63  }64  .back-icon {65    width: 48px;66    height: 48px;67  }68  .title {69    font-weight: 800;70    font-size: 48px;71  }72  .header-actions {73    display: flex;74    align-items: center;75    gap: 40px;76  }77  .icon-btn {78    width: 60px;79    height: 60px;80  }81  .cart-wrap {82    position: relative;83  }84  .cart-badge {85    position: absolute;86    right: -2px;87    top: -8px;88    background: #000;89    color: #fff;90    border: 2px solid #fff;91    font-size: 28px;92    width: 40px;93    height: 40px;94    border-radius: 20px;95    display: flex;96    align-items: center;97    justify-content: center;98    box-sizing: border-box;99  }100 101  /* Content */102  .content {103    position: absolute;104    top: 280px;105    left: 0;106    width: 100%;107    box-sizing: border-box;108    padding: 0 60px;109  }110  .bullets {111    margin: 20px 0 30px;112    padding-left: 36px;113    font-size: 40px;114    line-height: 1.55;115    color: #111;116  }117  .bullets li { margin-bottom: 12px; }118 119  .view-details {120    font-size: 42px;121    color: #9e9e9e;122    margin: 20px 0 40px;123  }124 125  /* Pills / buttons */126  .pill {127    width: 960px;128    height: 140px;129    border-radius: 90px;130    border: 2px solid #e6e6e6;131    display: flex;132    align-items: center;133    justify-content: center;134    font-size: 44px;135    color: #111;136    margin: 30px 0;137    box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;138  }139  .pill .chev {140    width: 36px;141    height: 36px;142    margin-left: 12px;143  }144  .primary {145    background: #111;146    color: #fff;147    border: none;148    box-shadow: none;149  }150  .favorite {151    justify-content: space-between;152    padding: 0 60px;153    box-sizing: border-box;154  }155  .heart-icon {156    width: 48px;157    height: 48px;158  }159 160  /* Sections */161  .section {162    margin-top: 32px;163    border-top: 1px solid #eee;164    padding: 34px 0;165    display: flex;166    align-items: center;167    justify-content: space-between;168  }169  .section-title {170    font-size: 44px;171    font-weight: 700;172    color: #111;173  }174  .section .chev {175    width: 40px;176    height: 40px;177  }178 179  /* Reviews stars */180  .stars {181    display: flex;182    align-items: center;183    gap: 18px;184    margin-left: 20px;185  }186  .star {187    width: 50px;188    height: 50px;189  }190  .star.grey path { fill: #d9d9d9; }191 192  /* Share */193  .share-wrap {194    margin-top: 120px;195    display: flex;196    flex-direction: column;197    align-items: center;198    gap: 24px;199    color: #333;200  }201  .share-icon {202    width: 70px; height: 70px;203  }204  .share-text {205    font-size: 38px;206  }207 208  /* Home indicator */209  .home-indicator {210    position: absolute;211    bottom: 36px;212    left: 50%;213    transform: translateX(-50%);214    width: 360px;215    height: 16px;216    background: #000;217    border-radius: 8px;218    opacity: 0.15;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <!-- Status Bar -->226  <div class="status-bar">227    <div>8:31</div>228    <div class="status-right">229      <!-- simple cellular bars -->230      <svg class="sb-icon" viewBox="0 0 24 24">231        <rect x="2" y="14" width="3" height="8" fill="#fff"></rect>232        <rect x="8" y="10" width="3" height="12" fill="#fff"></rect>233        <rect x="14" y="6" width="3" height="16" fill="#fff"></rect>234        <rect x="20" y="2" width="3" height="20" fill="#fff"></rect>235      </svg>236      <!-- WiFi -->237      <svg class="sb-icon" viewBox="0 0 24 24">238        <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>239        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>240        <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>241        <circle cx="12" cy="18" r="2" fill="#fff"></circle>242      </svg>243      <!-- Battery -->244      <svg class="sb-icon" viewBox="0 0 28 20">245        <rect x="1" y="3" width="22" height="14" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"></rect>246        <rect x="4" y="6" width="16" height="8" fill="#fff"></rect>247        <rect x="24" y="7" width="3" height="6" rx="1" fill="#fff"></rect>248      </svg>249    </div>250  </div>251 252  <!-- Header -->253  <div class="header">254    <div class="header-left">255      <svg class="back-icon" viewBox="0 0 24 24">256        <path d="M15 5L6 12l9 7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>257      </svg>258      <div class="title">Nike Structure 25</div>259    </div>260    <div class="header-actions">261      <svg class="icon-btn" viewBox="0 0 24 24">262        <circle cx="11" cy="11" r="7.5" stroke="#111" stroke-width="2" fill="none"></circle>263        <path d="M20 20l-4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>264      </svg>265      <div class="cart-wrap">266        <svg class="icon-btn" viewBox="0 0 24 24">267          <path d="M7 8h10v10H7z" stroke="#111" stroke-width="2" fill="none" rx="2" ry="2"></path>268          <path d="M9 8c0-2 2-3 3-3s3 1 3 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>269        </svg>270        <div class="cart-badge">1</div>271      </div>272    </div>273  </div>274 275  <!-- Content -->276  <div class="content">277    <ul class="bullets">278      <li>Shown: Black/Racer Blue/Sundial/White</li>279      <li>Style: DJ7883-003</li>280      <li>Country/Region of Origin: Vietnam</li>281    </ul>282 283    <div class="view-details">View Product Details</div>284 285    <div class="pill">Size UK 9286      <svg class="chev" viewBox="0 0 24 24">287        <path d="M5 9l7 7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>288      </svg>289    </div>290 291    <div class="pill primary">Add to Bag</div>292 293    <div class="pill favorite">294      <div>Favorite</div>295      <svg class="heart-icon" viewBox="0 0 24 24">296        <path d="M12 21s-7-4.7-9.5-8.2C0 10 2.2 6.5 5.7 7.1c2 .4 3.1 1.9 3.8 3 0 0 1.7-2.8 4.7-3 3.6-.3 5.6 3 4 5.9C16.7 16.6 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"></path>297      </svg>298    </div>299 300    <div class="section">301      <div class="section-title">Size & Fit</div>302      <svg class="chev" viewBox="0 0 24 24">303        <path d="M5 9l7 7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>304      </svg>305    </div>306 307    <div class="section">308      <div class="section-title">Reviews (52)</div>309      <div class="stars">310        <svg class="star" viewBox="0 0 24 24">311          <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z" fill="#111"></path>312        </svg>313        <svg class="star" viewBox="0 0 24 24">314          <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z" fill="#111"></path>315        </svg>316        <svg class="star" viewBox="0 0 24 24">317          <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z" fill="#111"></path>318        </svg>319        <svg class="star" viewBox="0 0 24 24">320          <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z" fill="#111"></path>321        </svg>322        <svg class="star grey" viewBox="0 0 24 24">323          <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"></path>324        </svg>325      </div>326      <svg class="chev" viewBox="0 0 24 24">327        <path d="M5 9l7 7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>328      </svg>329    </div>330 331    <div class="section">332      <div class="section-title">Product Information</div>333      <svg class="chev" viewBox="0 0 24 24">334        <path d="M5 9l7 7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>335      </svg>336    </div>337 338    <div class="share-wrap">339      <svg class="share-icon" viewBox="0 0 24 24">340        <circle cx="5" cy="12" r="2" fill="none" stroke="#111" stroke-width="2"></circle>341        <circle cx="19" cy="5" r="2" fill="none" stroke="#111" stroke-width="2"></circle>342        <circle cx="19" cy="19" r="2" fill="none" stroke="#111" stroke-width="2"></circle>343        <path d="M7 12l10-6M7 12l10 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>344      </svg>345      <div class="share-text">Share</div>346    </div>347  </div>348 349  <div class="home-indicator"></div>350</div>351</body>352</html>