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>Product - Adding to Bag</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  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20    color: #111;21  }22 23  /* Status bar */24  .status-bar {25    height: 120px;26    background: #000;27    color: #fff;28    position: relative;29    padding: 0 40px;30    box-sizing: border-box;31    display: flex;32    align-items: center;33    justify-content: space-between;34  }35  .status-left {36    font-size: 38px;37    font-weight: 600;38    letter-spacing: 1px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 26px;44  }45  .dot {46    width: 10px;47    height: 10px;48    background: #fff;49    border-radius: 50%;50    opacity: .9;51  }52  .icon-battery,53  .icon-wifi {54    display: inline-block;55  }56 57  /* App bar */58  .app-bar {59    height: 140px;60    background: #fff;61    border-bottom: 1px solid #eee;62    display: flex;63    align-items: center;64    padding: 0 32px;65    box-sizing: border-box;66  }67  .app-title {68    font-size: 44px;69    font-weight: 700;70    margin-left: 16px;71    flex: 1;72    color: #111;73    white-space: nowrap;74    overflow: hidden;75    text-overflow: ellipsis;76  }77  .icon-btn {78    width: 80px;79    height: 80px;80    display: inline-flex;81    align-items: center;82    justify-content: center;83    color: #111;84  }85 86  /* Content */87  .content {88    padding: 36px 48px 0;89    box-sizing: border-box;90  }91  .para {92    font-size: 36px;93    line-height: 1.55;94    color: #333;95    margin: 8px 0 22px;96  }97  .bullets {98    margin: 24px 0 36px 20px;99    padding: 0 0 0 20px;100    color: #333;101  }102  .bullets li {103    font-size: 36px;104    line-height: 1.55;105    margin: 10px 0;106  }107  .link {108    color: #6b6b6b;109    font-size: 38px;110    margin-top: 10px;111  }112 113  /* Buttons area */114  .cta-area {115    margin-top: 40px;116  }117  .chip {118    height: 128px;119    border-radius: 64px;120    background: #f3f3f3;121    border: 1px solid #e2e2e2;122    display: flex;123    align-items: center;124    justify-content: center;125    color: #222;126    font-size: 40px;127    margin: 20px 0 30px;128  }129  .btn-primary {130    height: 160px;131    border-radius: 80px;132    background: #000;133    color: #fff;134    font-size: 44px;135    font-weight: 700;136    display: flex;137    align-items: center;138    justify-content: center;139    margin: 18px 0 26px;140  }141  .btn-outline {142    height: 128px;143    border-radius: 64px;144    border: 1px solid #e2e2e2;145    color: #111;146    font-size: 40px;147    display: flex;148    align-items: center;149    justify-content: center;150    background: #fff;151  }152 153  /* Sections */154  .section-row {155    margin: 60px 0 0;156    padding: 40px 0;157    border-top: 1px solid #efefef;158    border-bottom: 1px solid #efefef;159    display: flex;160    align-items: center;161    justify-content: space-between;162  }163  .section-title {164    font-size: 44px;165    font-weight: 700;166    color: #222;167  }168  .rating {169    display: inline-flex;170    gap: 8px;171  }172  .star {173    width: 44px;174    height: 44px;175    color: #111;176  }177  .half {178    position: relative;179  }180  .half:after {181    content: "";182    position: absolute;183    top: 0;184    right: 0;185    width: 50%;186    height: 100%;187    background: #fff;188  }189 190  /* Overlay for adding to bag */191  .overlay {192    position: absolute;193    inset: 0;194    background: rgba(0,0,0,0.72);195    display: flex;196    flex-direction: column;197    align-items: center;198    justify-content: center;199  }200  .spinner {201    width: 140px;202    height: 140px;203    border-radius: 50%;204    border: 12px solid rgba(255,255,255,0.3);205    border-top-color: #fff;206    animation: spin 1s linear infinite;207    margin-bottom: 36px;208  }209  .overlay-text {210    color: #fff;211    font-size: 44px;212    letter-spacing: 2px;213    font-weight: 700;214  }215  @keyframes spin {216    to { transform: rotate(360deg); }217  }218 219  /* Gesture bar */220  .gesture {221    position: absolute;222    left: 50%;223    transform: translateX(-50%);224    bottom: 22px;225    width: 360px;226    height: 14px;227    background: #eaeaea;228    border-radius: 10px;229  }230</style>231</head>232<body>233<div id="render-target">234  <!-- Status bar -->235  <div class="status-bar">236    <div class="status-left">3:01</div>237    <div class="status-right">238      <!-- simple dots to hint notifications -->239      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>240      <div style="width: 8px;"></div>241      <!-- WiFi -->242      <svg class="icon-wifi" width="48" height="32" viewBox="0 0 24 16" fill="none">243        <path d="M2 6c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>244        <path d="M6 10c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>245        <path d="M10 14c1-1 3-1 4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>246      </svg>247      <!-- Battery -->248      <svg class="icon-battery" width="66" height="32" viewBox="0 0 33 16" fill="none">249        <rect x="1" y="3" width="28" height="10" rx="2" stroke="#fff" stroke-width="2"/>250        <rect x="3" y="5" width="24" height="6" rx="1" fill="#fff"/>251        <rect x="30" y="6" width="3" height="4" rx="1" fill="#fff"/>252      </svg>253    </div>254  </div>255 256  <!-- App bar -->257  <div class="app-bar">258    <div class="icon-btn">259      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">260        <path d="M15 5L8 12l7 7" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261      </svg>262    </div>263    <div class="app-title">Nike Air Force 1 '07 LV8 EMB</div>264    <div class="icon-btn">265      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">266        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2"/>267        <path d="M20 20l-3-3" stroke="#111" stroke-width="2" stroke-linecap="round"/>268      </svg>269    </div>270    <div class="icon-btn">271      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">272        <path d="M6 7l1 12h10l1-12H6z" stroke="#111" stroke-width="2"/>273        <path d="M9 7a3 3 0 016 0" stroke="#111" stroke-width="2" stroke-linecap="round"/>274      </svg>275    </div>276  </div>277 278  <!-- Content -->279  <div class="content">280    <p class="para">281      Quench your thirst for style with this early take on the hoops original. Preserving everything you know best—'80s construction, bold details and nothin'-but-net style—, its cracked leather, salt-washed colours and weathered accents maintain its status as the coveted off-court shoe.282    </p>283 284    <ul class="bullets">285      <li>Shown: Summit White/Blue Whisper/Football Grey/White</li>286      <li>Style: DV0787-100</li>287      <li>Country/Region of Origin: Vietnam</li>288    </ul>289 290    <div class="link">View Product Details</div>291 292    <div class="cta-area">293      <div class="chip">Size UK 10 ×</div>294      <div class="btn-primary">Add to Bag</div>295      <div class="btn-outline">Favorite  ♥</div>296    </div>297 298    <div class="section-row">299      <div class="section-title">Size & Fit</div>300      <svg width="40" height="40" viewBox="0 0 24 24">301        <path d="M8 10l4 4 4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302      </svg>303    </div>304 305    <div class="section-row">306      <div class="section-title">Reviews (11)</div>307      <div class="rating">308        <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1L12 2z"/></svg>309        <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1L12 2z"/></svg>310        <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1L12 2z"/></svg>311        <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1L12 2z"/></svg>312        <div class="half" style="width:44px;height:44px;">313          <svg class="star" viewBox="0 0 24 24" fill="#111"><path d="M12 2l3.09 6.3 6.91 1-5 4.86 1.18 6.84L12 18.9l-6.18 3.1L7 14.16 2 9.3l6.91-1L12 2z"/></svg>314        </div>315      </div>316      <svg width="40" height="40" viewBox="0 0 24 24">317        <path d="M8 10l4 4 4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>318      </svg>319    </div>320  </div>321 322  <!-- Overlay showing Adding to Bag -->323  <div class="overlay">324    <div class="spinner"></div>325    <div class="overlay-text">ADDING TO BAG</div>326  </div>327 328  <!-- Gesture bar -->329  <div class="gesture"></div>330</div>331</body>332</html>