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>Deal Detail - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #2d1b2f;22 color: #fff;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-weight: 600;28 font-size: 40px;29 letter-spacing: 0.5px;30 }31 .status-left { display: flex; align-items: center; gap: 24px; }32 .status-right { display: flex; align-items: center; gap: 28px; font-weight: 500; }33 .icon-w { width: 40px; height: 40px; }34 .dot { width: 10px; height: 10px; background:#c2b7c7; border-radius: 50%; display: inline-block; margin: 0 12px; }35 36 /* Content */37 .content { padding: 36px 48px 0 48px; }38 .muted { color: #8e8e8e; }39 .line-dash { border-top: 4px dashed #a5d6a7; margin: 28px 0; }40 .price-small { font-size: 38px; color: #777; text-decoration: line-through; }41 .offer-row { display: flex; align-items: baseline; gap: 16px; }42 .offer-price { font-size: 54px; font-weight: 800; }43 .offer-note { color: #4a4a4a; font-size: 40px; }44 .today { color: #2e7d32; font-weight: 700; }45 .big-price { font-size: 76px; font-weight: 900; margin-top: 8px; }46 .coupon-note { font-size: 40px; color: #4a4a4a; }47 .emi { font-size: 36px; color: #5c5c5c; margin-top: 10px; }48 .apply-coupon { margin-top: 10px; font-size: 40px; color: #2e7d32; }49 .apply-coupon b { font-weight: 800; }50 .timer { margin-top: 18px; display: flex; align-items: center; gap: 14px; color: #e53935; font-size: 40px; }51 52 .banner {53 margin: 28px 0;54 height: 170px;55 background: #E0E0E0;56 border: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center;58 color: #757575; font-size: 40px; font-weight: 600;59 }60 61 .save-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px 0; }62 .save-amt { font-size: 56px; font-weight: 900; }63 .save-sub { color: #5b5b5b; font-size: 36px; }64 .link { color: #1976d2; font-weight: 700; text-decoration: none; font-size: 38px; }65 66 /* Delivery section */67 .section-title {68 font-size: 44px; font-weight: 800; margin-top: 36px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between;69 }70 .deliv-label { color: #8e8e8e; font-size: 38px; margin-bottom: 12px; }71 .address-row {72 display: flex; align-items: center; gap: 22px;73 }74 .addr-input {75 flex: 1;76 background: #fff;77 border: 2px solid #e0e0e0;78 border-radius: 14px;79 height: 110px;80 display: flex; align-items: center;81 padding: 0 28px;82 font-size: 44px;83 color: #1c1c1c;84 }85 .change { color: #ff6d2e; font-weight: 700; font-size: 40px; cursor: default; }86 .locate {87 display: flex; align-items: center; gap: 10px; color: #ff6d2e; font-weight: 700; font-size: 38px;88 }89 .help-row { margin-top: 16px; font-size: 36px; color: #4e4e4e; }90 .help-row .green { color: #2e7d32; font-weight: 700; }91 92 .qty-row { display: flex; align-items: center; gap: 28px; margin: 28px 0; }93 .qty-box {94 width: 220px; height: 110px; border: 2px solid #e0e0e0; border-radius: 12px;95 padding: 0 24px; display: flex; align-items: center; justify-content: space-between; font-size: 40px; color: #333;96 background: #fff;97 }98 .only-left { color: #e53935; font-weight: 700; font-size: 40px; }99 100 .divider { height: 22px; background: #f3f3f3; margin: 22px -48px; }101 102 /* CTA area */103 .cta-area { padding: 24px 0 16px 0; }104 .cta-title { font-size: 46px; font-weight: 800; margin-bottom: 10px; }105 .cta-sub { color: #8e8e8e; font-size: 36px; margin-bottom: 26px; }106 .btn-row { display: flex; gap: 24px; }107 .btn {108 flex: 1;109 height: 120px;110 border-radius: 14px;111 font-size: 44px;112 font-weight: 800;113 display: flex; align-items: center; justify-content: center;114 cursor: default;115 }116 .btn-outline { background: #fff; color: #ff6d2e; border: 4px solid #ff6d2e; }117 .btn-solid { background: #ff6d2e; color: #fff; border: 4px solid #ff6d2e; }118 119 /* Floating chat */120 .chat-float {121 position: absolute;122 right: 36px;123 top: 1340px;124 display: flex; align-items: center; gap: 10px;125 }126 .chat-tag {127 background: #ff6d2e; color: #fff; font-weight: 800; font-size: 36px;128 padding: 18px 22px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);129 }130 .chat-ear {131 width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid #dcdcdc;132 }133 134 /* Bottom nav */135 .bottom-nav {136 position: absolute; left: 0; right: 0; bottom: 80px;137 height: 180px; background: #ffffff; border-top: 2px solid #ededed; display: flex; align-items: center; justify-content: space-around;138 }139 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 32px; color: #6b6b6b; }140 .nav-item.active { color: #ff6d2e; }141 .nav-icon { width: 56px; height: 56px; }142 .active-bar {143 position: absolute; left: 0; bottom: 178px; height: 10px; width: 216px; background: #ff6d2e;144 }145 146 /* Home indicator */147 .home-indicator {148 position: absolute; left: 50%; transform: translateX(-50%);149 bottom: 24px; width: 360px; height: 12px; background: #0f0f0f; border-radius: 12px; opacity: .2;150 }151</style>152</head>153<body>154<div id="render-target">155 <!-- Status bar -->156 <div class="status-bar">157 <div class="status-left">158 <div>9:15</div>159 <span class="dot"></span>160 </div>161 <div class="status-right">162 <!-- simple icons -->163 <svg class="icon-w" viewBox="0 0 24 24" fill="#fff"><path d="M12 6a8 8 0 100 16 8 8 0 000-16zm.8 4h-1.6v5.2l4.2 2.4.8-1.4-3.4-1.9V10z"/></svg>164 <svg class="icon-w" viewBox="0 0 24 24" fill="#fff"><path d="M21 8l-6 6-4-4-8 8h20V8z"/></svg>165 <svg class="icon-w" viewBox="0 0 24 24" fill="#fff"><path d="M12 4a8 8 0 018 8h-2a6 6 0 10-6 6v2A8 8 0 1112 4z"/></svg>166 <svg class="icon-w" viewBox="0 0 24 24" stroke="#fff" fill="none" stroke-width="2"><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 9v6"/></svg>167 <div>94%</div>168 </div>169 </div>170 171 <!-- Content -->172 <div class="content">173 <div class="muted" style="font-size:40px;">MRP <span class="price-small" style="margin-left:24px;">₹25,999</span></div>174 175 <div class="offer-row" style="margin-top:18px;">176 <div class="offer-price">Offer Price ₹13,683</div>177 <div class="offer-note">[Retail Discount ₹12,316]</div>178 </div>179 180 <div class="line-dash"></div>181 182 <div class="offer-row">183 <div class="today" style="font-size:44px;">Today’s Deal</div>184 </div>185 <div class="big-price">₹12,999 <span class="coupon-note">[Coupon Discount ₹684]</span></div>186 <div class="emi">EMI From ₹657/mo →</div>187 <div class="apply-coupon">Apply Coupon <b>WINTER</b> To Avail Today’s Deal</div>188 <div class="timer">189 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e53935"><path d="M15 1H9v2h6V1z"/><path d="M19.03 7.39l1.42-1.42A10 10 0 1022 12h-2a8 8 0 11-2.97-6.15z"/><path d="M11 7h2v6h-2z"/></svg>190 Ending in 14h : 44m : 46s191 </div>192 193 <div class="banner">[IMG: Coupon Promo Banner]</div>194 195 <div class="save-row">196 <div style="font-size:42px;">You Save</div>197 <div class="save-amt">₹13,000 (50% off)</div>198 </div>199 <div class="save-sub">[₹12,316 Retail Discount + ₹684 Today's Deal]</div>200 <div style="margin-top:10px;">201 <a href="#" class="link">Earn 3,250 Extra Pepperfry Credits (Worth ₹3,250)</a>202 <svg width="26" height="26" viewBox="0 0 24 24" fill="#9e9e9e" style="margin-left:8px;vertical-align:middle;"><circle cx="12" cy="12" r="10"/><path d="M12 10h2v6h-2zM12 6h2v2h-2z" fill="#fff"/></svg>203 </div>204 205 <div class="line-dash" style="margin-top:28px;"></div>206 207 <div class="section-title">208 <span>Delivery and Assembly</span>209 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>210 </div>211 212 <div class="deliv-label">Delivering To</div>213 <div class="address-row">214 <div class="addr-input">560001, Bengaluru</div>215 <div class="change">Change</div>216 <div class="locate">217 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ff6d2e"><path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>218 Locate219 </div>220 </div>221 222 <div class="help-row">223 Delivery by Tue, 12 Dec 2023 | <span class="green">Free Today</span><br/>224 Assembly by Offered By Pepperfry | ₹679225 <svg width="24" height="24" viewBox="0 0 24 24" fill="#9e9e9e" style="vertical-align:middle;margin-left:8px;"><circle cx="12" cy="12" r="10"/><path d="M12 10h2v6h-2zM12 6h2v2h-2z" fill="#fff"/></svg>226 </div>227 228 <div class="divider"></div>229 230 <div class="qty-row">231 <div class="qty-box">232 <span>QTY 1</span>233 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>234 </div>235 <div class="only-left">Hurry! Only 1 Left</div>236 </div>237 238 <div class="divider"></div>239 240 <div class="cta-area">241 <div class="cta-title">Save More With These Great Deals!</div>242 <div class="cta-sub">Use the Coupon during Checkout</div>243 <div class="btn-row">244 <div class="btn btn-outline">ADD TO CART</div>245 <div class="btn btn-solid">BUY NOW</div>246 </div>247 </div>248 </div>249 250 <!-- Floating chat sticker -->251 <div class="chat-float">252 <div class="chat-ear"></div>253 <div class="chat-tag">Let's Chat</div>254 </div>255 256 <!-- Bottom navigation -->257 <div class="active-bar"></div>258 <div class="bottom-nav">259 <div class="nav-item active">260 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#ff6d2e" stroke-width="2"><path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4V12H9v10H5a2 2 0 0 1-2-2z"/></svg>261 <div>Home</div>262 </div>263 <div class="nav-item">264 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 22a8 8 0 0116 0"/></svg>265 <div>My Account</div>266 </div>267 <div class="nav-item">268 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2"><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 8l3-5h12l3 5"/></svg>269 <div>Gift Cards</div>270 </div>271 <div class="nav-item">272 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M6 10V6h12v4"/></svg>273 <div>Stores</div>274 </div>275 <div class="nav-item">276 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>277 <div>Categories</div>278 </div>279 </div>280 281 <div class="home-indicator"></div>282</div>283</body>284</html>