GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product - Added to Bag</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #f6f6f6;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 96px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    z-index: 6;31    color: #222;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-bar .time { font-size: 36px; }36  .sb-icons {37    display: flex; align-items: center; gap: 24px;38  }39  .sb-icons svg { width: 40px; height: 40px; }40 41  /* Hero section */42  .hero {43    position: absolute;44    top: 96px;45    left: 0;46    width: 100%;47    height: 1150px;48  }49  .hero .hero-img {50    position: absolute;51    left: 40px;52    right: 40px;53    top: 20px;54    bottom: 0;55    background: #E0E0E0;56    border: 1px solid #BDBDBD;57    display: flex;58    justify-content: center;59    align-items: center;60    color: #757575;61    font-size: 42px;62    text-align: center;63  }64  .hero .label-new {65    position: absolute;66    left: 48px;67    bottom: 240px;68    background: #e9e9e9;69    color: #111;70    font-weight: 700;71    letter-spacing: 3px;72    font-size: 28px;73    padding: 20px 28px;74  }75  .thumbs {76    position: absolute;77    left: 0;78    right: 0;79    bottom: 60px;80    height: 140px;81    padding: 0 40px;82    display: flex;83    align-items: center;84    gap: 28px;85    opacity: 0.9;86  }87  .thumb {88    width: 240px;89    height: 120px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    justify-content: center;94    align-items: center;95    color: #777;96    font-size: 22px;97  }98  .thumb.selected {99    outline: 2px dashed #9E9E9E;100    outline-offset: 6px;101  }102  .scroll-handle {103    position: absolute;104    left: 50%;105    transform: translateX(-50%);106    bottom: -10px;107    width: 160px; height: 12px;108    background: #c9c9c9; border-radius: 6px;109  }110 111  /* Details section under hero */112  .details {113    position: absolute;114    top: 1250px;115    left: 0; right: 0;116    padding: 40px 48px 220px 48px;117    background: #f4f4f4;118    border-top: 1px solid #e0e0e0;119    z-index: 1;120  }121  .title-row {122    display: flex;123    align-items: flex-start;124    justify-content: space-between;125    gap: 20px;126  }127  .title-row .title {128    font-size: 64px;129    line-height: 76px;130    font-weight: 800;131    letter-spacing: 3px;132    text-transform: uppercase;133    max-width: 860px;134  }135  .title-row .heart {136    font-size: 64px;137    line-height: 64px;138    color: #111;139    opacity: 0.85;140    margin-top: 10px;141  }142  .price-row {143    margin-top: 32px;144    display: flex;145    align-items: center;146    gap: 36px;147  }148  .price-row .price {149    font-size: 38px;150    font-weight: 800;151    letter-spacing: 2px;152  }153  .price-row .perf {154    font-size: 30px;155    letter-spacing: 6px;156    color: #444;157  }158 159  /* Background scrim when sheet is open */160  .scrim {161    position: absolute;162    inset: 0;163    background: rgba(0,0,0,0.55);164    z-index: 3;165  }166 167  /* Close (X) on top right of background */168  .close-hero {169    position: absolute;170    top: 240px;171    right: 40px;172    width: 84px; height: 84px;173    background: transparent;174    border: none;175    z-index: 6;176    opacity: 0.9;177    cursor: default;178  }179  .close-hero svg { width: 100%; height: 100%; }180 181  /* Bottom sheet */182  .sheet {183    position: absolute;184    left: 0;185    right: 0;186    bottom: 120px;187    height: 940px;188    background: #fff;189    border-top-left-radius: 24px;190    border-top-right-radius: 24px;191    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);192    z-index: 5;193    display: flex;194    flex-direction: column;195  }196  .sheet-header {197    position: relative;198    padding: 38px 48px;199    border-bottom: 1px solid #e5e5e5;200    text-align: center;201    font-weight: 800;202    font-size: 34px;203    letter-spacing: 3px;204  }205  .sheet-header .close {206    position: absolute;207    right: 32px; top: 26px;208    width: 72px; height: 72px; border: none; background: transparent;209  }210  .sheet-content {211    padding: 40px 40px 0 40px;212    flex: 1;213  }214  .item-card {215    background: #EDF0F2;216    border: 1px solid #e2e6e9;217    display: flex;218    gap: 36px;219    padding: 36px;220    align-items: center;221  }222  .item-images {223    width: 300px;224  }225  .item-images .img {226    width: 300px;227    height: 160px;228    background: #E0E0E0;229    border: 1px solid #BDBDBD;230    display: flex;231    align-items: center;232    justify-content: center;233    color: #757575;234    font-size: 22px;235  }236  .item-images .img + .img { margin-top: 20px; height: 120px; }237  .item-info { flex: 1; position: relative; }238  .price-tag {239    position: absolute;240    left: 0; top: -10px;241    background: #fff;242    border: 1px solid #E0E0E0;243    padding: 12px 18px;244    font-weight: 800;245    font-size: 30px;246    letter-spacing: 1px;247  }248  .item-title {249    margin-top: 40px;250    font-size: 40px;251    line-height: 50px;252    font-weight: 800;253    letter-spacing: 1px;254    text-transform: uppercase;255    max-width: 600px;256  }257  .item-size {258    margin-top: 16px;259    color: #444;260    font-size: 28px;261    letter-spacing: 2px;262  }263 264  .view-bag {265    margin: 40px 40px 0 40px;266    height: 132px;267    background: #000;268    color: #fff;269    border: none;270    font-size: 36px;271    font-weight: 800;272    letter-spacing: 6px;273    display: flex;274    align-items: center;275    justify-content: space-between;276    padding: 0 40px 0 48px;277  }278  .view-bag svg { width: 52px; height: 52px; }279 280  /* Home indicator */281  .home-indicator {282    position: absolute;283    bottom: 24px;284    left: 50%;285    transform: translateX(-50%);286    width: 220px;287    height: 12px;288    background: #cfcfcf;289    border-radius: 6px;290    z-index: 6;291  }292</style>293</head>294<body>295<div id="render-target">296 297  <!-- Status bar -->298  <div class="status-bar">299    <div class="time">3:18</div>300    <div class="sb-icons">301      <!-- simple signal icon -->302      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">303        <path d="M3 17h2"></path>304        <path d="M3 13h5"></path>305        <path d="M3 9h8"></path>306      </svg>307      <!-- Wi-Fi -->308      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">309        <path d="M2 8a16 16 0 0 1 20 0"></path>310        <path d="M5 12a11 11 0 0 1 14 0"></path>311        <path d="M8 16a6 6 0 0 1 8 0"></path>312        <circle cx="12" cy="20" r="1.6" fill="#222" stroke="none"></circle>313      </svg>314      <!-- Battery -->315      <svg viewBox="0 0 28 16" fill="none" stroke="#222" stroke-width="2">316        <rect x="1" y="3" width="22" height="10" rx="2"></rect>317        <rect x="3" y="5" width="14" height="6" fill="#222" stroke="none"></rect>318        <rect x="23" y="6" width="4" height="4" rx="1" fill="#222" stroke="none"></rect>319      </svg>320    </div>321  </div>322 323  <!-- Hero product image area -->324  <div class="hero">325    <div class="hero-img">[IMG: Product Hero - Cleats]</div>326 327    <div class="thumbs">328      <div class="thumb">[IMG]</div>329      <div class="thumb selected">[IMG]</div>330      <div class="thumb">[IMG]</div>331      <div class="scroll-handle"></div>332    </div>333 334    <div class="label-new">NEW</div>335  </div>336 337  <!-- Product details (behind scrim) -->338  <div class="details">339    <div class="title-row">340      <div class="title">PREDATOR ACCURACY+ ARTIFICIAL GRASS CLEATS</div>341      <div class="heart">♡</div>342    </div>343    <div class="price-row">344      <div class="price">$300.00</div>345      <div class="perf">PERFORMANCE</div>346    </div>347  </div>348 349  <!-- Scrim overlay to dim background -->350  <div class="scrim"></div>351 352  <!-- Close icon over top-right of dimmed page -->353  <button class="close-hero" aria-label="Close">354    <svg viewBox="0 0 24 24" stroke="#111" stroke-width="2" stroke-linecap="round">355      <path d="M4 4l16 16M20 4L4 20"></path>356    </svg>357  </button>358 359  <!-- Bottom sheet: Added to bag -->360  <div class="sheet">361    <div class="sheet-header">362      ADDED TO BAG363      <button class="close" aria-label="Dismiss">364        <svg viewBox="0 0 24 24" stroke="#111" stroke-width="2" stroke-linecap="round">365          <path d="M4 4l16 16M20 4L4 20"></path>366        </svg>367      </button>368    </div>369    <div class="sheet-content">370      <div class="item-card">371        <div class="item-images">372          <div class="img">[IMG: Cleats Side]</div>373          <div class="img">[IMG: Cleats Sole]</div>374        </div>375        <div class="item-info">376          <div class="price-tag">$300.00</div>377          <div class="item-title">PREDATOR ACCURACY+ ARTIFICIAL GRASS CLEATS</div>378          <div class="item-size">M 8 / W 9</div>379        </div>380      </div>381 382      <button class="view-bag">383        <span>VIEW BAG</span>384        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">385          <path d="M4 12h14"></path>386          <path d="M12 5l7 7-7 7"></path>387        </svg>388      </button>389    </div>390  </div>391 392  <!-- Home indicator -->393  <div class="home-indicator"></div>394 395</div>396</body>397</html>