GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product Page - Jumanji Wooden Box</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-weight: 600;24    font-size: 36px;25    color: #111;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 20px;31  }32  .dot { width: 18px; height: 18px; border-radius: 50%; background: #999; }33  .tiny-rect { width: 26px; height: 18px; border-radius: 3px; background: #777; }34  .signal { width: 28px; height: 28px; border: 2px solid #777; border-radius: 50%; position: relative; }35  .signal::after { content: ""; position: absolute; width: 10px; height: 10px; background: #777; border-radius: 50%; right: 6px; bottom: 6px; }36 37  /* Header actions */38  .top-actions {39    padding: 10px 30px 0 30px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .back-wrap {45    display: flex;46    align-items: center;47    gap: 20px;48    color: #7A56EA;49    font-size: 44px;50    font-weight: 600;51  }52  .pill-icon {53    width: 92px;54    height: 92px;55    border-radius: 24px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59    margin-left: 18px;60    box-shadow: 0 2px 6px rgba(0,0,0,0.08);61  }62  .purple { background: #7A56EA; }63  .green { background: #79C24A; }64  .blue { background: #4D6EFF; }65  .icon svg { width: 42px; height: 42px; }66 67  /* Floating right side buttons */68  .floating-btn {69    position: absolute;70    right: 30px;71    width: 112px;72    height: 112px;73    border-radius: 32px;74    background: #F0ECFF;75    display: flex;76    align-items: center;77    justify-content: center;78    box-shadow: 0 2px 8px rgba(0,0,0,0.08);79  }80  .share-btn { top: 290px; }81  .heart-btn { top: 410px; }82 83  /* Main image */84  .product-image {85    width: 980px;86    height: 980px;87    margin: 20px auto 0 auto;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    border-radius: 24px;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 40px;96    text-align: center;97    padding: 20px;98  }99 100  /* Thumbnails */101  .thumb-row {102    width: 980px;103    margin: 30px auto 0 auto;104    display: flex;105    align-items: center;106    justify-content: space-between;107  }108  .thumb {109    width: 250px;110    height: 180px;111    border-radius: 24px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    display: flex;115    align-items: center;116    justify-content: center;117    color: #757575;118    font-size: 28px;119  }120  .thumb-arrow {121    width: 50px;122    height: 50px;123    border-radius: 50%;124    background: #EEE8FF;125    display: flex;126    align-items: center;127    justify-content: center;128    margin: 0 10px;129    box-shadow: 0 2px 6px rgba(0,0,0,0.08);130  }131  .thumb-mid-spacer { flex: 1; }132 133  /* Brand + see more */134  .brand-block {135    width: 980px;136    margin: 40px auto 0 auto;137    display: grid;138    grid-template-columns: 120px 1fr;139    gap: 24px;140    align-items: center;141  }142  .brand-logo {143    width: 120px;144    height: 120px;145    border-radius: 24px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #757575;152    font-size: 24px;153  }154  .brand-info {155    display: flex;156    align-items: baseline;157    gap: 20px;158  }159  .see-more {160    color: #7A56EA;161    font-weight: 700;162    font-size: 38px;163  }164  .brand-name {165    font-size: 40px;166    font-weight: 800;167    color: #1a1a1a;168  }169 170  /* Title */171  .title {172    width: 980px;173    margin: 40px auto 0 auto;174    font-size: 56px;175    font-weight: 800;176    color: #173453;177    line-height: 1.2;178  }179 180  /* Price */181  .price-row {182    width: 980px;183    margin: 26px auto 0 auto;184    display: flex;185    align-items: center;186    justify-content: space-between;187  }188  .price {189    font-size: 54px;190    font-weight: 800;191    color: #173453;192  }193 194  /* Quantity selector */195  .qty {196    display: flex;197    align-items: center;198    gap: 12px;199    background: #F5F3FF;200    border: 2px solid #E3DBFF;201    padding: 12px 22px;202    border-radius: 60px;203  }204  .qty-btn {205    width: 80px;206    height: 80px;207    border-radius: 50%;208    background: #7A56EA;209    display: flex;210    align-items: center;211    justify-content: center;212  }213  .qty-count {214    font-size: 48px;215    font-weight: 700;216    color: #232323;217    padding: 0 16px;218  }219 220  /* Bottom sticky bar */221  .bottom-bar {222    position: absolute;223    bottom: 0;224    left: 0;225    width: 1080px;226    height: 220px;227    background: #FAF7FF;228    border-top-left-radius: 24px;229    border-top-right-radius: 24px;230    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);231    padding: 30px 40px;232    display: flex;233    align-items: center;234    justify-content: space-between;235  }236  .bottom-price {237    font-size: 44px;238    color: #1f2f47;239  }240  .bottom-price strong { font-weight: 800; }241  .add-btn {242    width: 640px;243    height: 120px;244    border-radius: 60px;245    background: #7A56EA;246    color: #fff;247    font-size: 48px;248    font-weight: 800;249    display: flex;250    align-items: center;251    justify-content: center;252    box-shadow: 0 8px 20px rgba(122,86,234,0.35);253  }254 255  /* Simple icon styles */256  .white-stroke svg path { stroke: #FFFFFF; }257  .white-fill svg path { fill: #FFFFFF; }258  .purple-fill svg path { fill: #7A56EA; }259</style>260</head>261<body>262<div id="render-target">263 264  <!-- Status bar -->265  <div class="status-bar">266    <div>8:19</div>267    <div class="status-icons">268      <div class="dot"></div>269      <div class="dot"></div>270      <div class="tiny-rect"></div>271      <div class="signal"></div>272    </div>273  </div>274 275  <!-- Header actions -->276  <div class="top-actions">277    <div class="back-wrap">278      <svg width="46" height="46" viewBox="0 0 24 24">279        <path d="M15 18l-6-6 6-6" fill="none" stroke="#7A56EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>280      </svg>281      <div>Back</div>282    </div>283    <div>284      <span class="pill-icon purple icon">285        <!-- Search -->286        <svg viewBox="0 0 24 24">287          <path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm8.5 14.5L18 17" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>288        </svg>289      </span>290      <span class="pill-icon green icon">291        <!-- Home -->292        <svg viewBox="0 0 24 24">293          <path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10z" fill="#fff"/>294        </svg>295      </span>296      <span class="pill-icon blue icon">297        <!-- Cart -->298        <svg viewBox="0 0 24 24">299          <path d="M6 6h15l-2 8H7L6 6zm1 12a2 2 0 1 0 .001-4.001A2 2 0 0 0 7 18zm9 0a2 2 0 1 0 .001-4.001A2 2 0 0 0 16 18z" fill="#fff"/>300        </svg>301      </span>302    </div>303  </div>304 305  <!-- Floating share and heart -->306  <div class="floating-btn share-btn">307    <svg width="44" height="44" viewBox="0 0 24 24">308      <path d="M4 12l7-7v4h6v6h-6v4z" fill="#7A56EA"/>309    </svg>310  </div>311  <div class="floating-btn heart-btn">312    <svg width="44" height="44" viewBox="0 0 24 24">313      <path d="M12 21s-7-4.6-9-8.2C1.1 8.4 3.3 6 6.1 6c2 0 3.3 1.2 3.9 2.1.6-.9 1.9-2.1 3.9-2.1 2.8 0 5 2.4 3.1 6.8C19 16.4 12 21 12 21z" fill="#7A56EA"/>314    </svg>315  </div>316 317  <!-- Main product image -->318  <div class="product-image">[IMG: Jumanji Board Game in Real Wooden Box]</div>319 320  <!-- Thumbnails -->321  <div class="thumb-row">322    <div class="thumb-arrow">323      <svg width="28" height="28" viewBox="0 0 24 24">324        <path d="M15 6l-6 6 6 6" fill="none" stroke="#7A56EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>325      </svg>326    </div>327    <div class="thumb">[IMG: Board Game Top View]</div>328    <div class="thumb-mid-spacer"></div>329    <div class="thumb">[IMG: Jumanji Box]</div>330    <div class="thumb-arrow">331      <svg width="28" height="28" viewBox="0 0 24 24">332        <path d="M9 6l6 6-6 6" fill="none" stroke="#7A56EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>333      </svg>334    </div>335  </div>336 337  <!-- Brand / See more -->338  <div class="brand-block">339    <div class="brand-logo">[IMG: Spin Master]</div>340    <div class="brand-info">341      <div class="see-more">See More by</div>342      <div class="brand-name">Spin Master</div>343    </div>344  </div>345 346  <!-- Title -->347  <div class="title">Jumanji The Game In Real Wooden Box</div>348 349  <!-- Price and Qty -->350  <div class="price-row">351    <div class="price">BHD 20.500</div>352    <div class="qty">353      <div class="qty-btn">354        <svg width="34" height="34" viewBox="0 0 24 24">355          <path d="M5 12h14" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>356        </svg>357      </div>358      <div class="qty-count">01</div>359      <div class="qty-btn">360        <svg width="34" height="34" viewBox="0 0 24 24">361          <path d="M12 5v14M5 12h14" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>362        </svg>363      </div>364    </div>365  </div>366 367  <!-- Bottom bar -->368  <div class="bottom-bar">369    <div class="bottom-price">Price <strong>BHD 20.500</strong></div>370    <div class="add-btn">Add to cart</div>371  </div>372 373</div>374</body>375</html>