GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cart UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background: linear-gradient(180deg, #8dd7cf 0%, #cbe9c8 38%, #eef6ef 60%, #f6f7f9 100%);11  }12  .status-bar {13    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; color:#263238; font-weight:600;14    font-size:34px;15  }16  .status-left, .status-right { display:flex; align-items:center; gap:20px; }17  .dot { width:18px; height:18px; background:#2f3b41; border-radius:50%; opacity:.9; }18  .icon-small svg { width:42px; height:42px; fill:#2f3b41; }19  .search-bar {20    margin:18px 24px 24px; background:#fff; height:110px; border-radius:24px; box-shadow:0 3px 6px rgba(0,0,0,0.12);21    display:flex; align-items:center; padding:0 28px; gap:22px; color:#263238;22  }23  .search-input { flex:1; font-size:40px; color:#263238; }24  .search-placeholder { color:#546e7a; }25  .pill-icon {26    width:72px; height:72px; border-radius:16px; background:#f4f6f8; display:flex; align-items:center; justify-content:center; border:1px solid #d0d6db;27  }28  .subtotal-card {29    background:#fff; margin:0 0 0; padding:30px 32px 24px; box-shadow:0 2px 0 rgba(0,0,0,0.06);30  }31  .subtotal-row { display:flex; align-items:baseline; gap:12px; color:#212121; }32  .subtotal-row .label { font-size:44px; font-weight:600; }33  .subtotal-row .price { font-size:54px; font-weight:800; }34  .info-row { margin-top:18px; display:flex; align-items:flex-start; gap:18px; color:#455a64; font-size:34px; line-height:1.35; }35  .info-row .accent { color:#d32f2f; font-weight:700; }36  .info-row .link { color:#1a73e8; font-weight:600; margin-left:8px; }37  .cta {38    margin:22px 24px; height:120px; border-radius:24px; background:#ffd64d; display:flex; align-items:center; justify-content:center;39    color:#3b2f00; font-size:42px; font-weight:700; box-shadow:0 4px 0 rgba(0,0,0,0.08);40  }41  .divider { height:2px; background:#e0e0e0; margin:18px 24px; }42  .product-card {43    margin:14px 24px 24px; background:#fff; border-radius:26px; box-shadow:0 2px 6px rgba(0,0,0,0.06);44    display:flex; padding:24px;45  }46  .prod-img {47    width:260px; height:360px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;48    display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; text-align:center;49  }50  .prod-info { flex:1; padding-left:28px; }51  .prod-title { font-size:38px; color:#212121; font-weight:600; line-height:1.2; margin-bottom:16px; }52  .badge {53    display:inline-flex; align-items:center; padding:8px 14px; border-radius:10px; background:#f57c00; color:#fff; font-size:30px; font-weight:800;54    margin-bottom:12px;55  }56  .subtext { color:#607d8b; font-size:30px; margin-left:10px; }57  .price-line { margin-top:8px; font-size:48px; font-weight:800; color:#212121; }58  .shipping { font-size:32px; color:#607d8b; margin-top:6px; }59  .stock { font-size:34px; color:#2e7d32; font-weight:700; margin-top:8px; }60  .pattern { font-size:32px; color:#37474f; margin-top:6px; }61  .qty-row { margin-top:18px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }62  .qty {63    display:flex; overflow:hidden; border-radius:12px; border:1px solid #cdd4da; height:84px;64  }65  .qty button, .qty .num {66    width:120px; height:84px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#37474f; background:#edf1f5;67    border:none;68  }69  .qty .num { background:#f7f9fb; font-weight:700; border-left:1px solid #d3d9df; border-right:1px solid #d3d9df; }70  .btn {71    height:84px; padding:0 34px; border-radius:14px; border:1px solid #d0d6db; background:#fff; color:#37474f; font-size:34px; font-weight:700;72    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 0 rgba(0,0,0,0.04);73  }74  .btn.secondary { background:#f8fafc; }75  .more-like { margin-top:16px; height:88px; padding:0 36px; border-radius:16px; border:1px solid #d0d6db; background:#fff; color:#37474f; font-size:34px; font-weight:700; display:inline-flex; align-items:center; }76  .features { margin:18px 24px; display:flex; justify-content:space-around; padding:30px 0; border-top:2px solid #e0e0e0; border-bottom:2px solid #e0e0e0; }77  .feat { display:flex; flex-direction:column; align-items:center; gap:18px; color:#4f6b75; }78  .feat svg { width:110px; height:110px; fill:#cfd8dc; stroke:#455a64; stroke-width:2; }79  .feat-label { font-size:36px; color:#4f6b75; }80  .fbwi {81    margin:24px; background:#fff; border-radius:22px; box-shadow:0 2px 6px rgba(0,0,0,0.06);82    padding:24px;83  }84  .fbwi .title { font-size:40px; font-weight:800; color:#212121; margin-bottom:16px; }85  .img-grid { display:flex; gap:18px; }86  .img-ph {87    width:240px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:12px;88  }89  .bottom-nav {90    position:absolute; left:0; bottom:80px; width:100%; height:160px; background:#fff; border-top:2px solid #e0e0e0;91    display:flex; justify-content:space-around; align-items:center;92  }93  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#607d8b; font-size:30px; }94  .nav-item svg { width:72px; height:72px; fill:#607d8b; }95  .active svg { fill:#2fa5a0; }96  .active .label { color:#2fa5a0; font-weight:800; }97  .cart-count {98    position:absolute; margin-left:44px; margin-top:-8px; background:#2fa5a0; color:#fff; width:42px; height:42px; border-radius:50%;99    display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800;100  }101  .gesture-bar {102    position:absolute; left:50%; transform:translateX(-50%); bottom:20px; width:360px; height:14px; background:#cfd8dc; border-radius:12px;103  }104  /* Simple link styling mimic */105  .link { text-decoration:underline; }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div class="status-left">114      <div>2:46</div>115      <div class="dot"></div>116      <div class="dot" style="opacity:.6"></div>117      <div class="icon-small">118        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5"></circle><rect x="6" y="13" width="12" height="8" rx="4"></rect></svg>119      </div>120      <div class="icon-small">121        <svg viewBox="0 0 24 24"><path d="M3 11h18v2H3z"></path></svg>122      </div>123    </div>124    <div class="status-right">125      <div class="icon-small">126        <svg viewBox="0 0 24 24"><path d="M2 8l6 6 4-4 10 10" stroke="currentColor" fill="none"></path></svg>127      </div>128      <div class="icon-small">129        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3"></rect><rect x="20" y="10" width="2" height="4"></rect></svg>130      </div>131    </div>132  </div>133 134  <!-- Search bar -->135  <div class="search-bar">136    <svg width="54" height="54" viewBox="0 0 24 24" style="fill:#607d8b;">137      <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.5-4.5"></path>138    </svg>139    <div class="search-input"><span class="search-placeholder">Saffola Classic Masala oats</span></div>140    <div class="pill-icon">141      <svg viewBox="0 0 24 24">142        <rect x="3" y="5" width="18" height="14" rx="3" fill="#90a4ae"></rect>143        <circle cx="12" cy="12" r="4" fill="#eceff1"></circle>144      </svg>145    </div>146  </div>147 148  <!-- Subtotal and info -->149  <div class="subtotal-card">150    <div class="subtotal-row">151      <div class="label">Subtotal</div>152      <div class="price">₹334<span style="font-size:34px; font-weight:700;">00</span></div>153    </div>154    <div class="info-row">155      <svg width="44" height="44" viewBox="0 0 24 24" style="fill:#5db0ad;">156        <circle cx="12" cy="12" r="10"></circle><rect x="11" y="10" width="2" height="7" fill="#fff"></rect><circle cx="12" cy="7" r="1.5" fill="#fff"></circle>157      </svg>158      <div>159        Add <span class="accent">₹165.00</span> of eligible items to your order to qualify for FREE Delivery. <span class="link">Details</span>160      </div>161    </div>162  </div>163 164  <!-- Proceed to buy -->165  <div class="cta">Proceed to Buy (2 items)</div>166 167  <div class="divider"></div>168 169  <!-- Product card -->170  <div class="product-card">171    <div class="prod-img">[IMG: Saffola Masala Oats packet]</div>172    <div class="prod-info">173      <div class="prod-title">Saffola Masala Oats | Tasty Evening Snack | Healthy Snack | Classic Masala, 500g by Saffola</div>174      <div class="badge">#1 Best Seller</div><span class="subtext">in Whole Grains • 7K+ bought in past month</span>175      <div class="price-line">₹167<span style="font-size:30px; font-weight:700;">00</span></div>176      <div class="shipping">Eligible for FREE Shipping</div>177      <div class="stock">In stock</div>178      <div class="pattern">Pattern Name: ClassicMasalaOats, 500g</div>179 180      <div class="qty-row">181        <div class="qty">182          <button>-</button>183          <div class="num">2</div>184          <button>+</button>185        </div>186        <div class="btn">Delete</div>187        <div class="btn secondary">Save for later</div>188      </div>189 190      <div class="more-like">See more like this</div>191    </div>192  </div>193 194  <!-- Feature icons -->195  <div class="features">196    <div class="feat">197      <svg viewBox="0 0 24 24">198        <rect x="6" y="10" width="12" height="10" rx="2" fill="#eceff1"></rect>199        <path d="M9 10V8a3 3 0 0 1 6 0v2" fill="none"></path>200        <rect x="9" y="13" width="6" height="5" rx="1" fill="#b0bec5"></rect>201      </svg>202      <div class="feat-label">Secure Payment</div>203    </div>204    <div class="feat">205      <svg viewBox="0 0 24 24">206        <rect x="3" y="7" width="13" height="9" rx="2" fill="#eceff1"></rect>207        <path d="M16 12h3l2 2v2h-3" fill="none"></path>208        <circle cx="7" cy="18" r="2" fill="#b0bec5"></circle>209        <circle cx="18" cy="18" r="2" fill="#b0bec5"></circle>210      </svg>211      <div class="feat-label">Amazon Delivered</div>212    </div>213  </div>214 215  <!-- Frequently bought section -->216  <div class="fbwi">217    <div class="title">Frequently bought with items in your cart</div>218    <div class="img-grid">219      <div class="img-ph">[IMG: Complementary Snack 1]</div>220      <div class="img-ph">[IMG: Complementary Snack 2]</div>221      <div class="img-ph">[IMG: Complementary Snack 3]</div>222    </div>223  </div>224 225  <!-- Bottom navigation -->226  <div class="bottom-nav">227    <div class="nav-item">228      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"></path></svg>229      <div class="label">Home</div>230    </div>231    <div class="nav-item">232      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21a8 8 0 0 1 16 0" fill="currentColor"></path></svg>233      <div class="label">You</div>234    </div>235    <div class="nav-item">236      <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="5"></rect><rect x="4" y="10" width="16" height="5"></rect><rect x="2" y="16" width="20" height="4"></rect></svg>237      <div class="label">More</div>238    </div>239    <div class="nav-item active" style="position:relative;">240      <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 9H8L7 6z"></path><circle cx="9" cy="19" r="2"></circle><circle cx="17" cy="19" r="2"></circle></svg>241      <div class="cart-count">2</div>242      <div class="label">Cart</div>243    </div>244    <div class="nav-item">245      <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="2"></rect><rect x="4" y="11" width="16" height="2"></rect><rect x="4" y="16" width="16" height="2"></rect></svg>246      <div class="label">Menu</div>247    </div>248  </div>249 250  <div class="gesture-bar"></div>251 252</div>253</body>254</html>