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>Product Offer Page</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top gradient header */15 .topbar {16 position: relative; height: 300px;17 background: linear-gradient(180deg, #7fd5d0 0%, #a5e4df 100%);18 }19 .back-btn {20 position: absolute; left: 24px; top: 120px; width: 80px; height: 80px; border: none; background: transparent; cursor: pointer;21 }22 .back-btn svg { width: 56px; height: 56px; }23 .searchbar {24 position: absolute; left: 130px; right: 40px; top: 110px; height: 100px;25 background: #fff; border-radius: 30px; box-shadow: 0 6px 18px rgba(0,0,0,0.18);26 display: flex; align-items: center; padding: 0 28px; gap: 20px;27 }28 .searchbar .placeholder {29 color: #4a4a4a; font-size: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;30 }31 .searchbar .icon { width: 54px; height: 54px; flex: 0 0 auto; }32 .searchbar .camera { margin-left: auto; }33 34 .content { padding: 24px 40px 260px 40px; } /* leave room for bottom bars */35 .link { color: #0aa0a4; font-size: 38px; }36 .divider { height: 1px; background: #e0e0e0; margin: 32px 0; }37 38 /* Price block */39 .deal-badge {40 display: inline-block; background: #cf2231; color: #fff;41 border-radius: 14px; padding: 10px 18px; font-weight: 700; font-size: 34px; margin-bottom: 12px;42 }43 .price-row { display: flex; align-items: baseline; gap: 16px; }44 .discount { color: #cf2231; font-size: 140px; font-weight: 600; line-height: 1; }45 .price { font-size: 130px; font-weight: 700; }46 .mrp { color: #777; font-size: 40px; margin-top: 10px; }47 .mrp s { color: #777; }48 .tax-note { font-size: 44px; margin-top: 18px; }49 50 /* Offers */51 .offers-header { display: flex; align-items: center; gap: 16px; font-size: 46px; font-weight: 700; margin-top: 10px; }52 .offers-row { display: flex; gap: 22px; margin-top: 20px; }53 .offer-card {54 width: 320px; border: 1px solid #d9d9d9; border-radius: 18px; padding: 22px; background: #fff;55 }56 .offer-title { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 36px; color: #333; }57 .offer-desc { font-size: 32px; color: #555; margin-top: 16px; line-height: 1.35; }58 .offer-link { color: #0aa0a4; font-size: 34px; margin-top: 18px; }59 .tiny-icons { display: flex; align-items: center; gap: 10px; margin-top: 12px; }60 .tiny-icons .circle { width: 34px; height: 34px; border-radius: 50%; background: #e0e0e0; border: 1px solid #bdbdbd; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #757575; }61 62 /* Delivery */63 .delivery { font-size: 40px; margin-top: 32px; }64 .delivery .free { color: #0aa0a4; font-weight: 700; }65 .delivery .when { font-weight: 700; }66 .delivery .eta { color: #0cb25c; font-weight: 700; }67 .delivery .details { color: #0aa0a4; text-decoration: underline; }68 .location-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; font-size: 40px; color: #0aa0a4; }69 .location-row svg { width: 44px; height: 44px; }70 71 .stock { color: #1f9d34; font-size: 60px; font-weight: 700; margin-top: 38px; }72 73 .qty-pill {74 display: inline-flex; align-items: center; gap: 18px; margin-top: 24px;75 background: #e9f7f7; border: 1px solid #cfe6e6; border-radius: 22px; padding: 20px 26px; font-size: 40px; color: #333;76 box-shadow: 0 8px 24px rgba(0,0,0,0.08);77 }78 .qty-pill svg { width: 36px; height: 36px; }79 80 /* Add to Cart button */81 .add-to-cart {82 position: absolute; left: 60px; right: 60px; bottom: 210px;83 height: 120px; background: #ffd43b; border-radius: 80px;84 display: flex; align-items: center; justify-content: center;85 font-size: 52px; font-weight: 700; color: #222;86 box-shadow: 0 10px 24px rgba(0,0,0,0.18);87 }88 89 /* Bottom navigation */90 .bottom-nav {91 position: absolute; left: 0; right: 0; bottom: 0; height: 170px;92 background: #fff; border-top: 1px solid #e2e2e2; display: flex; justify-content: space-around; align-items: center;93 }94 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 20%; }95 .nav-item svg { width: 60px; height: 60px; }96 .nav-item .label { font-size: 32px; color: #606060; }97 .nav-item.active .label { color: #0aa0a4; }98 .cart-badge { font-size: 28px; color: #0aa0a4; margin-left: 4px; }99 100 /* Utility icon styles */101 .icon-stroke { stroke: #333; stroke-width: 6; fill: none; }102 .icon-fill { fill: #333; }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Top gradient bar with back and search -->109 <div class="topbar">110 <button class="back-btn" aria-label="Back">111 <svg viewBox="0 0 24 24">112 <path d="M15 19 L8 12 L15 5" class="icon-stroke" />113 </svg>114 </button>115 <div class="searchbar">116 <svg class="icon" viewBox="0 0 24 24">117 <circle cx="10" cy="10" r="7" class="icon-stroke"></circle>118 <path d="M21 21 L15.5 15.5" class="icon-stroke"></path>119 </svg>120 <div class="placeholder">Twelfth Night by William Shakespe...</div>121 <svg class="icon camera" viewBox="0 0 24 24">122 <rect x="3" y="6" width="18" height="14" rx="2" class="icon-stroke"></rect>123 <circle cx="12" cy="13" r="4" class="icon-stroke"></circle>124 </svg>125 </div>126 </div>127 128 <div class="content">129 <div class="link">Shop all formats</div>130 131 <div class="divider"></div>132 133 <div class="deal-badge">Deal</div>134 <div class="price-row">135 <div class="discount">-34%</div>136 <div class="price">₹99</div>137 </div>138 <div class="mrp">M.R.P.: <s>₹150</s></div>139 <div class="tax-note">Inclusive of all taxes</div>140 141 <div class="divider"></div>142 143 <!-- Save Extra with Offers -->144 <div class="offers-header">145 <svg viewBox="0 0 24 24" width="50" height="50">146 <circle cx="12" cy="12" r="10" fill="none" stroke="#ffb74d" stroke-width="3"></circle>147 <path d="M8 16 L16 8" stroke="#ffb74d" stroke-width="3"></path>148 <circle cx="9" cy="9" r="1.8" fill="#ffb74d"></circle>149 <circle cx="15" cy="15" r="1.8" fill="#ffb74d"></circle>150 </svg>151 <div>Save Extra with Offers</div>152 </div>153 154 <div class="offers-row">155 <div class="offer-card">156 <div class="offer-title">157 <svg viewBox="0 0 24 24">158 <rect x="3" y="4" width="18" height="16" rx="2" class="icon-stroke"></rect>159 <path d="M7 8 H17 M7 12 H17 M7 16 H12" class="icon-stroke"></path>160 </svg>161 <div>No Cost EMI</div>162 </div>163 <div class="offer-desc">On Bajaj Finserv EMI cards, if you checkout only with this item.</div>164 <div class="offer-link">See more</div>165 </div>166 167 <div class="offer-card">168 <div class="offer-title">169 <svg viewBox="0 0 24 24">170 <path d="M3 10 L12 4 L21 10" class="icon-stroke"></path>171 <rect x="5" y="10" width="14" height="9" class="icon-stroke"></rect>172 </svg>173 <div>Bank Offer</div>174 </div>175 <div class="offer-desc">7.5% Instant Discount up to INR 2000 on HSBC Credit Card EM...</div>176 <div class="tiny-icons">177 <div class="circle">Amex</div>178 <div class="circle">HSBC</div>179 <div class="circle">VISA</div>180 </div>181 <div class="offer-link">3 offers</div>182 </div>183 184 <div class="offer-card">185 <div class="offer-title">186 <svg viewBox="0 0 24 24">187 <path d="M4 14 L10 8 L14 12 L20 6" class="icon-stroke"></path>188 </svg>189 <div>Partner Offer</div>190 </div>191 <div class="offer-desc">Get GST invoice and save up to 28% for your business purchase.</div>192 <div class="offer-link">See more</div>193 </div>194 </div>195 196 <!-- Delivery information -->197 <div class="delivery">198 <span class="free">FREE delivery</span> <span class="when">Wednesday, 26 July</span> on your first order.<br>199 Order within <span class="eta">9 hrs 56 mins</span>. <span class="details">Details</span>200 </div>201 202 <div class="location-row">203 <svg viewBox="0 0 24 24">204 <path d="M12 22 C12 22 5 14 5 9 A7 7 0 0 1 19 9 C19 14 12 22 12 22 Z" class="icon-stroke"></path>205 <circle cx="12" cy="9" r="3" class="icon-stroke"></circle>206 </svg>207 <div>Select delivery location</div>208 </div>209 210 <div class="stock">In stock</div>211 212 <div class="qty-pill">213 <div>Qty: 2</div>214 <svg viewBox="0 0 24 24">215 <path d="M6 9 L12 15 L18 9" class="icon-stroke"></path>216 </svg>217 </div>218 </div>219 220 <!-- Add to Cart CTA -->221 <div class="add-to-cart">Add to Cart</div>222 223 <!-- Bottom navigation -->224 <div class="bottom-nav">225 <div class="nav-item active">226 <svg viewBox="0 0 24 24">227 <path d="M3 11 L12 4 L21 11 V20 H3 Z" class="icon-stroke"></path>228 </svg>229 <div class="label">Home</div>230 </div>231 <div class="nav-item">232 <svg viewBox="0 0 24 24">233 <circle cx="12" cy="8" r="4" class="icon-stroke"></circle>234 <path d="M4 20 C6 16 18 16 20 20" class="icon-stroke"></path>235 </svg>236 <div class="label">You</div>237 </div>238 <div class="nav-item">239 <svg viewBox="0 0 24 24">240 <path d="M6 12 A6 6 0 0 1 18 12" class="icon-stroke"></path>241 <path d="M8 8 L6 6 M16 16 L18 18" class="icon-stroke"></path>242 </svg>243 <div class="label">More</div>244 </div>245 <div class="nav-item">246 <svg viewBox="0 0 24 24">247 <path d="M3 6 H5 L7 16 H19 L21 10 H8" class="icon-stroke"></path>248 <circle cx="9" cy="20" r="2" class="icon-stroke"></circle>249 <circle cx="17" cy="20" r="2" class="icon-stroke"></circle>250 </svg>251 <div class="label">Cart <span class="cart-badge">0</span></div>252 </div>253 <div class="nav-item">254 <svg viewBox="0 0 24 24">255 <path d="M4 7 H20 M4 12 H20 M4 17 H20" class="icon-stroke"></path>256 </svg>257 <div class="label">Menu</div>258 </div>259 </div>260 261</div>262</body>263</html>