GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Bag - Checkout</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:32px; box-shadow:0 6px 24px rgba(0,0,0,0.2);12 }13 .status-bar {14 height:120px; background:#2b2b2b; color:#fff; display:flex; align-items:center; padding:0 36px; font-weight:600; font-size:42px;15 }16 .status-icons { margin-left:auto; display:flex; gap:28px; align-items:center; }17 .pill { width:24px; height:24px; background:#fff; border-radius:50%; opacity:.8; }18 .promo {19 height:150px; background:#86d7f0; display:flex; align-items:center; justify-content:center; color:#0b3b4c; font-size:40px; font-weight:600; position:relative;20 }21 .promo .shop { color:#d61b2d; margin-left:14px; text-decoration:underline; font-weight:700; }22 .header {23 height:150px; background:#d52532; color:#fff; display:flex; align-items:center; padding:0 36px; position:relative;24 }25 .header-title { font-size:56px; font-weight:700; margin-left:24px; }26 .header-actions { margin-left:auto; display:flex; align-items:center; gap:40px; position:relative; }27 .badge {28 position:absolute; right:36px; top:26px; width:64px; height:64px; background:#fff; border-radius:50%; border:6px solid #f5f5f5;29 display:flex; align-items:center; justify-content:center; color:#d52532; font-weight:700; font-size:34px;30 }31 .steps {32 height:120px; display:flex; align-items:center; gap:30px; padding:0 36px; color:#8d8d8d; font-size:36px; background:#ffffff;33 border-bottom:2px solid #e5e5e5;34 }35 .step { display:flex; align-items:center; gap:24px; flex:1; }36 .line { height:6px; background:#cfcfcf; flex:1; border-radius:3px; }37 .dot { width:26px; height:26px; border-radius:50%; background:#e64a19; margin-right:8px; }38 .step.active { color:#d52532; font-weight:700; }39 .content { padding:24px 24px 220px 24px; }40 .card {41 background:#fff; border:1px solid #e5e5e5; border-radius:24px; padding:26px; display:flex; gap:28px; align-items:flex-start;42 box-shadow:0 2px 0 #e0e0e0; margin-bottom:24px;43 }44 .thumb {45 width:160px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px;46 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600; text-align:center; padding:10px;47 }48 .card-body { flex:1; }49 .brand { color:#a0853c; font-size:34px; font-weight:700; margin-bottom:8px; }50 .title { font-size:54px; font-weight:800; color:#111; line-height:1.15; margin-bottom:20px; }51 .price { font-size:44px; color:#555; margin:6px 0; }52 .sub { font-size:32px; color:#9b9b9b; }53 .qty-row { display:flex; align-items:center; gap:28px; margin-top:24px; }54 .qty-btn {55 width:130px; height:130px; border-radius:50%;56 background:#ffe8db; box-shadow:0 14px 0 #f6c6aa inset;57 display:flex; align-items:center; justify-content:center; font-size:58px; color:#2b2b2b; font-weight:700;58 }59 .qty-center {60 width:130px; height:130px; border-radius:50%; background:#fff; border:8px solid #000; display:flex; align-items:center; justify-content:center;61 font-size:52px; font-weight:800;62 }63 .trash { width:72px; height:72px; border-radius:16px; color:#9b9b9b; }64 .divider { height:14px; background:#e9e9e9; margin:24px -24px; }65 .section {66 background:#fff; border:1px solid #e5e5e5; border-radius:24px; padding:28px; margin-bottom:24px; box-shadow:0 2px 0 #e0e0e0;67 }68 .section-title { font-size:52px; font-weight:800; color:#111; margin-bottom:12px; }69 .coupon-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }70 .coupon-hint { color:#9b9b9b; font-size:36px; line-height:1.35; }71 .link-red { color:#d52532; font-size:44px; font-weight:800; }72 .cart-row { display:flex; justify-content:space-between; align-items:center; font-size:44px; color:#333; padding:22px 0; }73 .cart-row small { color:#21a354; font-weight:700; font-size:44px; }74 .hr { height:2px; background:#e5e5e5; margin:16px 0; }75 .total-row { display:flex; justify-content:space-between; align-items:center; font-size:50px; font-weight:800; padding:26px 0; }76 .accept-logos { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:18px; }77 .logo {78 width:140px; height:70px; border:1px solid #BDBDBD; background:#E0E0E0; display:flex; align-items:center; justify-content:center;79 color:#666; font-weight:700; border-radius:12px; font-size:30px;80 }81 .bottom-bar {82 position:absolute; left:0; right:0; bottom:70px; height:160px; background:#fff; border-top:2px solid #e5e5e5;83 display:flex; align-items:center; justify-content:space-between; padding:0 36px;84 }85 .bottom-text { font-size:44px; color:#111; }86 .btn-outline {87 padding:24px 44px; border:6px solid #d52532; color:#d52532; border-radius:88px; font-size:48px; font-weight:800; background:#fff;88 box-shadow:0 8px 0 #ffe1e5 inset;89 }90 .gesture {91 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);92 width:320px; height:18px; border-radius:18px; background:#0a0a0a; opacity:.9;93 }94 /* SVG basics */95 .icon { width:72px; height:72px; }96 .icon path, .icon circle, .icon rect { stroke:#fff; stroke-width:6; fill:none; }97 .icon-dark path { stroke:#9b9b9b; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 2:00106 <div class="status-icons">107 <div class="pill"></div>108 <div class="pill"></div>109 <div class="pill"></div>110 <div style="color:#9ad1ff; font-size:42px;">•</div>111 <div class="pill"></div>112 <div class="pill"></div>113 <div class="pill"></div>114 </div>115 </div>116 117 <!-- Promo banner -->118 <div class="promo">119 Use code NEW10 and get addn. 10% off on cart value Rs. 2099 and above!!120 <span class="shop">SHOP NOW</span>121 </div>122 123 <!-- Header -->124 <div class="header">125 <!-- Back icon -->126 <svg class="icon" viewBox="0 0 24 24">127 <path d="M15 5 L7 12 L15 19" />128 </svg>129 <div class="header-title">Bag</div>130 131 <div class="header-actions">132 <!-- Search -->133 <svg class="icon" viewBox="0 0 24 24">134 <circle cx="10" cy="10" r="6"></circle>135 <path d="M14 14 L20 20"></path>136 </svg>137 <!-- Heart -->138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M12 19 L5 12 C3 9 5 6 8 6 C10 6 12 8 12 8 C12 8 14 6 16 6 C19 6 21 9 19 12 Z"></path>140 </svg>141 <!-- Bag icon -->142 <svg class="icon" viewBox="0 0 24 24">143 <rect x="5" y="8" width="14" height="12" rx="2"></rect>144 <path d="M9 8 C9 5 15 5 15 8"></path>145 </svg>146 <div class="badge">1</div>147 </div>148 </div>149 150 <!-- Steps -->151 <div class="steps">152 <div class="step active">153 <div class="dot"></div>154 Bag155 <div class="line"></div>156 </div>157 <div class="step">158 Address159 <div class="line"></div>160 </div>161 <div class="step">162 Payment163 </div>164 </div>165 166 <div class="content">167 <!-- Product card -->168 <div class="card">169 <div class="thumb">[IMG: Captain America Toy Bag]</div>170 <div class="card-body">171 <div class="brand">Disney</div>172 <div class="title">Marvel Captain America Toy On Bag Plush Accessories for Kids age 3Y+ ...</div>173 <div class="price">MRP ₹1499</div>174 <div class="sub">Price inclusive of all taxes</div>175 176 <div class="qty-row">177 <div class="qty-btn">-</div>178 <div class="qty-center">1</div>179 <div class="qty-btn">+</div>180 </div>181 </div>182 <!-- Delete icon -->183 <svg class="trash icon-dark" viewBox="0 0 24 24">184 <path d="M9 3 L15 3"></path>185 <path d="M4 6 L20 6"></path>186 <path d="M6 6 L6 21 L18 21 L18 6"></path>187 </svg>188 </div>189 190 <div class="divider"></div>191 192 <!-- Coupons section -->193 <div class="section">194 <div class="coupon-row">195 <div class="section-title">Apply Coupons</div>196 <div class="link-red">View Coupons</div>197 </div>198 <div class="coupon-hint">Check out exciting offers on cashbacks, banks credits and much more</div>199 </div>200 201 <!-- Cart details -->202 <div class="section">203 <div class="section-title">Cart Details</div>204 205 <div class="cart-row">206 <div>Total MRP</div>207 <div>₹1499</div>208 </div>209 <div class="cart-row">210 <div>Discount</div>211 <small>-₹0</small>212 </div>213 <div class="cart-row">214 <div>Delivery Fee</div>215 <div>₹0 <span style="color:#21a354; font-weight:800;">free</span></div>216 </div>217 218 <div class="hr"></div>219 220 <div class="total-row">221 <div>Total Amount</div>222 <div>₹1499</div>223 </div>224 </div>225 226 <!-- Payment methods -->227 <div class="section">228 <div class="section-title">We Accept</div>229 <div class="accept-logos">230 <div class="logo">MasterCard</div>231 <div class="logo">VISA</div>232 <div class="logo">RuPay</div>233 <div class="logo">JioMoney</div>234 <div class="logo">Google Pay</div>235 <div class="logo">Paytm</div>236 <div class="logo">UPI</div>237 <div class="logo">American Exp.</div>238 <div class="logo">PhonePe</div>239 <div class="logo">Zest Money</div>240 </div>241 </div>242 </div>243 244 <!-- Bottom summary bar -->245 <div class="bottom-bar">246 <div class="bottom-text">247 1 item<br>248 <strong>Total : ₹1499</strong>249 </div>250 <button class="btn-outline">Add Address</button>251 </div>252 253 <div class="gesture"></div>254</div>255</body>256</html>