GD-ML/AndroidCode
13.4k
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>Samsung Product Checkout UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 0; box-shadow: none;12 color: #111;13 }14 .status-bar {15 height: 120px; background: #cfcfcf; color: #111; display: flex; align-items: center; justify-content: space-between;16 padding: 0 40px; font-size: 34px;17 }18 .status-icons { display: flex; gap: 24px; align-items: center; }19 .app-header {20 height: 180px; display: flex; align-items: center; justify-content: space-between;21 padding: 0 48px;22 }23 .brand {24 font-weight: 800; font-size: 58px; letter-spacing: 2px;25 }26 .header-left { display: flex; align-items: center; gap: 28px; }27 .header-right { display: flex; align-items: center; gap: 36px; }28 .icon { width: 56px; height: 56px; }29 .content {30 padding: 0 60px;31 }32 .product-image-wrap { position: relative; height: 700px; display: flex; justify-content: center; align-items: center; }33 .img-placeholder {34 width: 320px; height: 620px; background: #E0E0E0; border: 1px solid #BDBDBD;35 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px; text-align: center;36 }37 .floating-trash { position: absolute; right: 60px; top: 70px; }38 .title {39 text-align: center; font-size: 46px; font-weight: 800; line-height: 1.25; margin-top: 20px;40 }41 .price {42 text-align: center; font-size: 44px; font-weight: 700; margin-top: 16px;43 }44 .save-line {45 text-align: center; margin-top: 12px; font-size: 32px; color: #1976d2;46 }47 .strike { color: #444; text-decoration: line-through; margin-left: 12px; }48 .priority {49 display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px;50 color: #1976d2; font-size: 32px; font-weight: 600;51 }52 .install {53 margin-top: 22px; font-size: 30px; color: #333; text-align: left;54 }55 .install .note { color: #777; font-weight: 400; font-size: 26px; margin-left: 10px; }56 .divider { height: 1px; background: #e0e0e0; margin: 28px 0; }57 .section-header {58 display: flex; justify-content: space-between; align-items: center; font-size: 34px; font-weight: 700;59 }60 .price-row {61 display: flex; justify-content: space-between; align-items: center; font-size: 30px; margin: 18px 0;62 }63 .subtext { color: #777; font-size: 26px; }64 .card {65 background: #eef3ff; border-radius: 24px; padding: 30px; margin-top: 24px;66 display: flex; align-items: center; justify-content: space-between;67 }68 .card .left { display: flex; align-items: center; gap: 24px; }69 .card .title { font-size: 34px; font-weight: 700; text-align: left; margin: 0; }70 .card .desc { font-size: 28px; color: #555; max-width: 640px; }71 .add-link { color: #111; font-size: 32px; font-weight: 700; display: flex; align-items: center; gap: 8px; }72 .badge {73 width: 72px; height: 72px; border-radius: 50%; border: 2px dashed #777; display: flex; align-items: center; justify-content: center; font-weight: 700;74 }75 .small-img {76 width: 140px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 24px;78 }79 .order-summary {80 position: absolute; left: 0; bottom: 0; width: 1080px; height: 720px; background: #fff;81 box-shadow: 0 -8px 24px rgba(0,0,0,0.08); border-top-left-radius: 24px; border-top-right-radius: 24px;82 padding: 30px 48px 40px 48px;83 }84 .summary-top {85 display: flex; justify-content: space-between; align-items: center; font-size: 32px; color: #333; margin-bottom: 14px;86 }87 .total-row {88 display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px;89 }90 .total-left { font-size: 56px; font-weight: 800; }91 .gst { font-size: 26px; color: #777; margin-top: 6px; }92 .total-right { text-align: right; }93 .total-amount { font-size: 54px; font-weight: 800; }94 .original { font-size: 28px; text-decoration: line-through; color: #777; }95 .save { font-size: 28px; color: #1976d2; margin-left: 12px; }96 .checkout-btn {97 margin: 28px auto 20px auto; width: 960px; height: 120px; border-radius: 60px;98 background: #000; color: #fff; font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center;99 }100 .terms { text-align: center; font-size: 26px; color: #666; line-height: 1.5; }101 .terms a { color: #1976d2; text-decoration: none; }102 .home-indicator {103 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);104 width: 240px; height: 12px; background: #000; opacity: 0.2; border-radius: 6px;105 }106</style>107</head>108<body>109<div id="render-target">110 <!-- Status bar -->111 <div class="status-bar">112 <div>8:38</div>113 <div class="status-icons">114 <span>●</span><span>●</span><span>●</span>115 <span>⋯</span>116 <span>▮▮</span>117 </div>118 </div>119 120 <!-- App header -->121 <div class="app-header">122 <div class="header-left">123 <svg class="icon" viewBox="0 0 24 24"><path d="M15 5 L7 12 L15 19" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>124 <div class="brand">SAMSUNG</div>125 </div>126 <div class="header-right">127 <!-- Search icon -->128 <svg class="icon" viewBox="0 0 24 24">129 <circle cx="11" cy="11" r="8" stroke="#111" stroke-width="2.5" fill="none"/>130 <path d="M20 20 L16 16" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>131 </svg>132 <!-- Chat icon -->133 <svg class="icon" viewBox="0 0 24 24">134 <path d="M4 5 H20 V16 H8 L5 19 V16 H4 Z" stroke="#111" stroke-width="2.5" fill="none" stroke-linejoin="round"/>135 <circle cx="9" cy="10" r="1.5" fill="#111"/>136 <circle cx="13" cy="10" r="1.5" fill="#111"/>137 <circle cx="17" cy="10" r="1.5" fill="#111"/>138 </svg>139 </div>140 </div>141 142 <!-- Product image -->143 <div class="content">144 <div class="product-image-wrap">145 <div class="img-placeholder">[IMG: Luxe Black Refrigerator]</div>146 <div class="floating-trash">147 <svg class="icon" viewBox="0 0 24 24">148 <path d="M5 7 H19" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round"/>149 <path d="M9 7 V5 H15 V7" stroke="#111" stroke-width="2.5" fill="none"/>150 <rect x="6" y="8" width="12" height="12" rx="2" ry="2" stroke="#111" stroke-width="2.5" fill="none"/>151 </svg>152 </div>153 </div>154 155 <!-- Title and pricing -->156 <div class="title">157 385L Twin Cooling Plus™ Double Door<br>158 Refrigerator RT42C553EBX (Luxe Black)159 </div>160 <div class="price">₹57190.00</div>161 <div class="save-line">Save ₹14800.00 <span class="strike">₹71990.00</span></div>162 163 <div class="priority">164 <svg width="36" height="36" viewBox="0 0 24 24">165 <circle cx="12" cy="12" r="9" stroke="#1976d2" stroke-width="2.5" fill="none"/>166 <path d="M12 7 V12 L16 14" stroke="#1976d2" stroke-width="2.5" fill="none" stroke-linecap="round"/>167 </svg>168 Priority Delivery: By Tomorrow169 </div>170 171 <div class="install">172 Installation & Demo: By Wed, Dec 20th <span class="note">*Standard installation charges may apply.</span>173 </div>174 175 <div class="divider"></div>176 177 <!-- Price breakdown -->178 <div class="section-header">179 <div>Price Breakdown</div>180 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 14 L12 8 L18 14" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>181 </div>182 183 <div class="price-row">184 <div>Price <span class="subtext">(Inclusive of all taxes)</span></div>185 <div>₹71990.00</div>186 </div>187 <div class="price-row">188 <div>Promotional Discount(s)</div>189 <div>-₹14800.00</div>190 </div>191 192 <div class="divider"></div>193 194 <!-- Cards -->195 <div class="card">196 <div class="left">197 <div class="badge">%</div>198 <div>199 <div class="title">Buy More Save More</div>200 <div class="desc">Get 5% off* on cart value for 2 or more eligible products purchased together</div>201 </div>202 </div>203 <div class="add-link">204 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2.5" stroke-linecap="round"/></svg>205 Add206 </div>207 </div>208 209 <div class="card" style="background:#f7f8fc;">210 <div class="left">211 <div class="small-img">[IMG: Samsung CarePack]</div>212 <div>213 <div class="title">Samsung CarePack</div>214 <div class="desc">Earn your peace of mind by availing our extended warranty coverage.</div>215 </div>216 </div>217 <div class="add-link">218 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 5 V19 M5 12 H19" stroke="#111" stroke-width="2.5" stroke-linecap="round"/></svg>219 Add220 </div>221 </div>222 </div>223 224 <!-- Order Summary Bottom Sheet -->225 <div class="order-summary">226 <div class="summary-top">227 <div>Order summary</div>228 <div>(1 item)229 <svg width="32" height="32" viewBox="0 0 24 24" style="vertical-align: middle; margin-left:8px;">230 <path d="M6 14 L12 8 L18 14" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 </div>234 235 <div class="total-row">236 <div>237 <div class="total-left">Total</div>238 <div class="gst">Includes GST*</div>239 </div>240 <div class="total-right">241 <div class="total-amount">₹57190.00</div>242 <div><span class="original">₹71990.00</span><span class="save">save ₹14800.00</span></div>243 </div>244 </div>245 246 <div class="checkout-btn">Checkout</div>247 248 <div class="terms">249 By submitting your order, you agree to the <a href="#">Terms of Service</a>, <a href="#">Terms of Use</a> and we will use your personal data in accordance with our <a href="#">Privacy policy</a>.250 </div>251 </div>252 253 <div class="home-indicator"></div>254</div>255</body>256</html>