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>My Bag</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top system/status bar (mock) */18  .status-bar {19    height: 88px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #333;25    font-size: 30px;26  }27  .status-right {28    display: flex; align-items: center; gap: 18px;29  }30  .dot { width: 18px; height: 18px; background: #111; border-radius: 50%; display: inline-block; }31  .dot.gray { background: #bbb; }32  .signal { width: 34px; height: 22px; border: 3px solid #111; border-top: 6px solid #111; border-radius: 5px; }33  .battery { width: 42px; height: 22px; border: 3px solid #111; border-radius: 5px; position: relative; }34  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #111; border-radius: 2px; }35  /* Header */36  .header {37    height: 132px;38    display: flex;39    align-items: center;40    justify-content: center;41    position: relative;42    padding: 0 40px;43  }44  .header-title {45    font-size: 46px;46    font-weight: 700;47  }48  .icon-btn {49    position: absolute;50    top: 50%;51    transform: translateY(-50%);52    width: 80px; height: 80px;53    display: flex; align-items: center; justify-content: center;54    cursor: default;55  }56  .icon-left { left: 16px; }57  .icon-right { right: 16px; }58  .heart {59    font-size: 56px; color: #111; line-height: 1;60  }61 62  /* Promo banner */63  .promo {64    background: #efefef;65    color: #222;66    font-size: 34px;67    padding: 24px 36px;68    border-top: 1px solid #e5e5e5;69    border-bottom: 1px solid #e5e5e5;70  }71 72  /* Cart item */73  .cart {74    padding: 36px 36px 24px 36px;75  }76  .cart-row {77    display: grid;78    grid-template-columns: 80px 360px 1fr 140px;79    align-items: center;80    gap: 28px;81  }82  .select-box {83    width: 56px; height: 56px;84    display: flex; align-items: center; justify-content: center;85  }86  .product-img {87    width: 360px; height: 420px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex; align-items: center; justify-content: center;91    color: #757575; font-size: 28px; text-align: center; padding: 12px;92  }93  .details .name {94    font-size: 40px; font-weight: 600; line-height: 1.3; margin-bottom: 18px;95  }96  .variant {97    display: inline-flex; align-items: center; gap: 14px;98    font-size: 32px; color: #333; margin-bottom: 28px;99  }100  .swatch {101    width: 42px; height: 42px; background: #d8dbe0; border-radius: 8px; border: 1px solid #c9c9c9;102  }103  .price {104    font-size: 42px; font-weight: 700; margin-top: 4px;105  }106  .qty {107    width: 116px; height: 84px;108    border: 2px solid #D8D8D8; border-radius: 18px;109    display: flex; align-items: center; justify-content: center;110    font-size: 34px; color: #333;111  }112 113  /* Benefits section */114  .benefits {115    background: #F2F2F2;116    margin: 22px 0 0 0;117    padding: 30px 40px;118    border-top: 1px solid #e7e7e7;119    border-bottom: 1px solid #e7e7e7;120  }121  .benefit {122    display: flex; align-items: center; gap: 24px;123    padding: 22px 0;124    font-size: 34px;125    color: #222;126  }127  .benefit-icon {128    width: 72px; height: 72px;129    border: 2px solid #111; border-radius: 16px;130    display: flex; align-items: center; justify-content: center;131    background: #fff;132  }133 134  /* Recommendation section */135  .rec {136    padding: 44px 36px 200px 36px;137  }138  .rec h2 {139    font-size: 56px; font-weight: 700; margin: 12px 0 36px 0; letter-spacing: 0.5px;140  }141  .rec-grid {142    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;143  }144  .rec-card {145    width: 100%; height: 590px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    display: flex; align-items: center; justify-content: center;149    color: #757575; font-size: 30px;150  }151 152  /* Bottom bar */153  .bottom-bar {154    position: absolute;155    left: 0; right: 0; bottom: 48px;156    background: #fff;157    border-top: 1px solid #e8e8e8;158    height: 150px;159    display: grid; grid-template-columns: 220px 1fr 420px;160    align-items: center;161    padding: 0 28px;162    gap: 18px;163  }164  .all-select {165    display: flex; align-items: center; gap: 22px; font-size: 36px; font-weight: 600;166  }167  .total {168    text-align: right; font-size: 38px; font-weight: 700;169  }170  .checkout-btn {171    background: #000; color: #fff;172    height: 104px; border-radius: 26px;173    display: flex; align-items: center; justify-content: center;174    font-size: 38px; font-weight: 700;175    box-shadow: 0 6px 0 rgba(0,0,0,0.2);176  }177 178  /* Home indicator */179  .home-indicator {180    position: absolute; left: 50%; transform: translateX(-50%);181    width: 360px; height: 10px; background: #111; border-radius: 6px;182    bottom: 16px;183    opacity: 0.9;184  }185 186  /* Utility */187  .muted { color: #666; }188  .chev { vertical-align: middle; }189</style>190</head>191<body>192<div id="render-target">193  <!-- Mock status bar -->194  <div class="status-bar">195    <div>8:20</div>196    <div class="status-right">197      <span class="dot gray"></span>198      <span class="dot"></span>199      <span class="dot gray"></span>200      <div class="signal"></div>201      <div class="battery"></div>202    </div>203  </div>204 205  <!-- Header -->206  <div class="header">207    <div class="icon-btn icon-left" aria-label="Back">208      <svg width="48" height="48" viewBox="0 0 24 24">209        <path d="M15 4 L7 12 L15 20" stroke="#000" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210      </svg>211    </div>212    <div class="header-title">My Bag (1)</div>213    <div class="icon-btn icon-right" aria-label="Wishlist">214      <span class="heart">♡</span>215    </div>216  </div>217 218  <!-- Promo banner -->219  <div class="promo">Congratulations! Your order qualifies for our free shipping.</div>220 221  <!-- Cart item -->222  <div class="cart">223    <div class="cart-row">224      <div class="select-box" aria-label="Selected item">225        <svg width="56" height="56" viewBox="0 0 24 24">226          <rect x="1" y="1" width="22" height="22" rx="4" fill="#000"/>227          <path d="M6 12.5 L10 16.5 L18 8.5" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>228        </svg>229      </div>230 231      <div class="product-img">[IMG: Denim Jacket Product]</div>232 233      <div class="details">234        <div class="name">Denim Jacket With Raw Hem</div>235        <div class="variant">236          <span class="swatch"></span>237          <span>/ S</span>238          <svg class="chev" width="22" height="22" viewBox="0 0 24 24">239            <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240          </svg>241        </div>242        <div class="price">₹1,690</div>243      </div>244 245      <div class="qty">x1</div>246    </div>247  </div>248 249  <!-- Benefits -->250  <div class="benefits">251    <div class="benefit">252      <div class="benefit-icon">253        <!-- Truck icon -->254        <svg width="44" height="44" viewBox="0 0 24 24">255          <rect x="2" y="8" width="11" height="7" stroke="#111" fill="none" stroke-width="1.6" rx="1"/>256          <rect x="14" y="10" width="5" height="5" stroke="#111" fill="none" stroke-width="1.6" rx="1"/>257          <circle cx="7" cy="18" r="2" fill="#111"/>258          <circle cx="17" cy="18" r="2" fill="#111"/>259        </svg>260      </div>261      <div>Free Shipping for orders ₹990</div>262    </div>263    <div class="benefit">264      <div class="benefit-icon">265        <!-- Card icon -->266        <svg width="44" height="44" viewBox="0 0 24 24">267          <rect x="3" y="6" width="18" height="12" rx="2" stroke="#111" fill="none" stroke-width="1.6"/>268          <rect x="3" y="9" width="18" height="3" fill="#111"/>269        </svg>270      </div>271      <div>Secured Payment & Checkout</div>272    </div>273    <div class="benefit">274      <div class="benefit-icon">275        <!-- Return icon -->276        <svg width="44" height="44" viewBox="0 0 24 24">277          <rect x="4" y="7" width="16" height="10" rx="2" stroke="#111" fill="none" stroke-width="1.6"/>278          <path d="M8 5 L11 8 L8 11" stroke="#111" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279          <path d="M11 8 H7" stroke="#111" stroke-width="1.6" fill="none" stroke-linecap="round"/>280        </svg>281      </div>282      <div>Easy Return , Free Pick Up</div>283    </div>284  </div>285 286  <!-- Recommendations -->287  <div class="rec">288    <h2>You might also like</h2>289    <div class="rec-grid">290      <div class="rec-card">[IMG: Striped Pullover]</div>291      <div class="rec-card">[IMG: Brown Striped Sweater]</div>292    </div>293  </div>294 295  <!-- Bottom action bar -->296  <div class="bottom-bar">297    <div class="all-select">298      <svg width="46" height="46" viewBox="0 0 24 24">299        <rect x="1" y="1" width="22" height="22" rx="4" fill="#000"/>300        <path d="M6 12.5 L10 16.5 L18 8.5" stroke="#fff" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>301      </svg>302      <span>All</span>303    </div>304    <div class="total">₹1,690</div>305    <div class="checkout-btn">CHECKOUT (1)</div>306  </div>307 308  <!-- Home indicator -->309  <div class="home-indicator"></div>310</div>311</body>312</html>