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 * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }9 body { margin: 0; padding: 0; background: transparent; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #FFFFFF;16 border-radius: 0;17 }18 19 /* Top bars */20 .status-bar {21 height: 140px;22 background: #1AA7AD; /* teal */23 color: #fff;24 padding: 0 36px;25 display: flex;26 align-items: center;27 font-weight: 600;28 letter-spacing: 1px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 gap: 26px;34 align-items: center;35 }36 .app-bar {37 height: 120px;38 background: #fff;39 padding: 0 36px;40 display: flex;41 align-items: center;42 box-shadow: 0 2px 0 rgba(0,0,0,0.08);43 }44 .icon-btn {45 width: 72px; height: 72px;46 display: flex; align-items: center; justify-content: center;47 border-radius: 36px;48 }49 .app-bar .title { font-size: 40px; font-weight: 600; color: #333; margin-left: 16px; }50 .app-actions { margin-left: auto; display: flex; gap: 22px; }51 52 /* Content */53 .content { padding: 24px 36px 200px 36px; }54 .price-card {55 border: 3px solid #1AA7AD;56 border-radius: 8px;57 overflow: hidden;58 background: #fff;59 }60 .price-header {61 text-align: center;62 font-size: 32px;63 font-weight: 600;64 color: #1AA7AD;65 padding: 18px 0;66 border-bottom: 2px solid #1AA7AD;67 }68 .price-grid {69 display: grid;70 grid-template-columns: 1.6fr 120px 1.2fr 120px 1.2fr 120px 1.4fr;71 align-items: center;72 border-top: 2px solid #1AA7AD;73 }74 .cell {75 padding: 28px 22px;76 border-right: 2px solid #1AA7AD;77 min-height: 140px;78 }79 .cell:last-child { border-right: none; }80 .cell .label { color: #757575; font-size: 28px; margin-bottom: 8px; }81 .cell .value { font-size: 46px; font-weight: 700; color: #333; }82 .op {83 display: flex; align-items: center; justify-content: center;84 color: #1AA7AD;85 }86 .op .circle {87 width: 56px; height: 56px; border-radius: 50%;88 border: 3px solid #1AA7AD;89 display: flex; align-items: center; justify-content: center;90 font-size: 34px; font-weight: 700;91 }92 .note-row {93 padding: 18px 6px;94 font-size: 30px;95 color: #8c8c8c;96 }97 .note-row a { color: #1AA7AD; text-decoration: none; font-weight: 600; }98 99 /* Offers section */100 .offers {101 margin-top: 24px;102 background: #fff;103 border-top: 1px solid #E0E0E0;104 border-bottom: 1px solid #E0E0E0;105 padding: 36px 8px 28px 8px;106 }107 .offers-header {108 display: flex; align-items: center; gap: 18px;109 font-weight: 700; color: #222; font-size: 44px;110 margin-bottom: 22px;111 }112 .tag-icon {113 width: 56px; height: 56px; color: #1AA7AD;114 }115 .offer-line { font-size: 34px; color: #333; margin-bottom: 8px; }116 .offer-sub { font-size: 28px; color: #9E9E9E; margin-bottom: 16px; }117 .offer-right { float: right; color: #1AA7AD; font-weight: 700; font-size: 30px; margin-top: -64px; }118 .code-row {119 display: flex; align-items: center; gap: 20px;120 margin-top: 18px;121 }122 .coupon {123 padding: 22px 30px;124 border: 2px dashed #1AA7AD;125 border-radius: 12px;126 font-weight: 700;127 color: #1AA7AD;128 font-size: 34px;129 width: max-content;130 background: #F8FFFF;131 }132 .tap-copy { color: #BDBDBD; font-size: 30px; }133 134 /* Replacement info */135 .replace-card {136 margin-top: 26px;137 background: #F8F9FA;138 border-top: 1px solid #DFDFDF;139 border-bottom: 1px solid #DFDFDF;140 padding: 28px;141 display: flex; gap: 24px; align-items: center;142 }143 .replace-icon {144 width: 68px; height: 68px; color: #2BB673;145 }146 .replace-text { font-size: 32px; color: #444; line-height: 1.4; }147 148 /* Key Feature */149 .card {150 background: #fff;151 border-top: 1px solid #E0E0E0;152 border-bottom: 1px solid #E0E0E0;153 padding: 28px;154 margin-top: 10px;155 }156 .card h3 { margin: 0 0 16px 0; font-size: 44px; color: #222; }157 .detail-line { color: #9E9E9E; font-size: 32px; margin: 12px 0; }158 .link-row {159 margin-top: 22px;160 display: flex; align-items: center; justify-content: space-between;161 color: #1AA7AD; font-weight: 700; font-size: 34px;162 padding-right: 10px;163 }164 .chevron {165 width: 36px; height: 36px; color: #9E9E9E;166 }167 168 /* Check Delivery */169 .check-card {170 margin-top: 10px;171 background: #fff;172 border-top: 1px solid #E0E0E0;173 border-bottom: 1px solid #E0E0E0;174 padding: 28px;175 }176 .check-card h3 { margin: 0 0 18px 0; font-size: 44px; color: #222; }177 .pincode-row {178 display: flex; align-items: center; gap: 24px;179 margin: 18px 0 10px 0;180 }181 .input {182 flex: 1;183 height: 96px;184 border: none;185 border-bottom: 3px solid #E0E0E0;186 font-size: 34px;187 color: #BDBDBD;188 padding: 0 8px;189 outline: none;190 background: #FAFAFA;191 }192 .btn-check {193 width: 220px; height: 88px;194 border: 2px solid #B2DFDB;195 color: #1AA7AD;196 border-radius: 10px;197 background: #F6FEFE;198 font-size: 34px; font-weight: 700;199 display: flex; align-items: center; justify-content: center;200 }201 .bullet { color: #9E9E9E; font-size: 30px; margin: 12px 0; }202 203 /* Bottom action bar */204 .bottom-bar {205 position: absolute;206 bottom: 0; left: 0; right: 0;207 height: 160px;208 display: flex;209 box-shadow: 0 -2px 8px rgba(0,0,0,0.08);210 z-index: 5;211 }212 .btn-cart, .btn-buy {213 flex: 1; display: flex; align-items: center; justify-content: center;214 font-size: 44px; font-weight: 800; letter-spacing: 1px;215 color: #fff;216 }217 .btn-cart { background: #FF8F00; }218 .btn-buy {219 background: linear-gradient(90deg, #FF8F00 0%, #FF5C7A 100%);220 }221 222 /* Simple divider mimicking segments */223 .divider { height: 16px; background: #F2F2F2; margin: 0 -36px; }224 225 /* Utility SVG styling */226 svg { display: block; }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Top teal status bar -->233 <div class="status-bar">234 <div style="font-size:36px;">9:09</div>235 <div class="status-icons">236 <!-- simple lock icon -->237 <svg width="32" height="32" viewBox="0 0 24 24">238 <path fill="#fff" d="M12 1a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9zm3 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>239 </svg>240 <!-- wifi icon -->241 <svg width="34" height="34" viewBox="0 0 24 24">242 <path fill="#fff" d="M2 8.5C6.9 4.8 13.1 4.8 18 8.5l-1.5 1.5C12.9 7.1 7.1 7.1 3.5 10l-1.5-1.5zm3 4c3.5-2.7 8.5-2.7 12 0l-1.5 1.5c-2.8-2.1-6.2-2.1-9 0L5 12.5zm3.5 4.5c1.9-1.4 4.1-1.4 6 0L13 18.5c-1.2-.9-2.8-.9-4 0l-1.5-1.5zm3.5 3l2 2-2 0-2 0 2-2z"/>243 </svg>244 </div>245 </div>246 247 <!-- White app bar with back/search/cart -->248 <div class="app-bar">249 <div class="icon-btn">250 <svg width="40" height="40" viewBox="0 0 24 24">251 <path fill="#1AA7AD" d="M15.5 19l-7-7 7-7 1.5 1.5-5.5 5.5 5.5 5.5z"/>252 </svg>253 </div>254 <div class="title"></div>255 <div class="app-actions">256 <div class="icon-btn">257 <!-- search icon -->258 <svg width="44" height="44" viewBox="0 0 24 24">259 <path fill="#1AA7AD" d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm11 17-5-5 1.5-1.5 5 5L21 21z"/>260 </svg>261 </div>262 <div class="icon-btn">263 <!-- cart icon -->264 <svg width="44" height="44" viewBox="0 0 24 24">265 <path fill="#1AA7AD" d="M7 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 7 18zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18zM6 4h14l-2 9H8L6 4zm-2-2h3l1.5 6H20l-2 9H8l-2-9H3V2z"/>266 </svg>267 </div>268 </div>269 </div>270 271 <div class="content">272 273 <!-- Price breakdown card -->274 <div class="price-card">275 <div class="price-header">Applicable for All Users</div>276 <div class="price-grid">277 <div class="cell">278 <div class="label">Original Price</div>279 <div class="value">₹1,499</div>280 </div>281 <div class="op"><div class="circle">−</div></div>282 <div class="cell">283 <div class="label">Discount by CB+</div>284 <div class="value">( ₹26 )</div>285 </div>286 <div class="op"><div class="circle">+</div></div>287 <div class="cell">288 <div class="label">Use Coupon</div>289 <div class="value">₹150</div>290 </div>291 <div class="op"><div class="circle">=</div></div>292 <div class="cell">293 <div class="label">Deal Price</div>294 <div class="value" style="color:#1AA7AD;">₹1,323</div>295 </div>296 </div>297 </div>298 <div class="note-row">299 *All discounts can avail in cart page | <a href="#">Earn CluesBucks+</a>300 </div>301 302 <div class="offers">303 <div class="offers-header">304 <svg class="tag-icon" viewBox="0 0 24 24">305 <path fill="currentColor" d="M20 10l-8 8-7-7V4h7l8 6zM7 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>306 </svg>307 <div>1 Offers available for you</div>308 </div>309 <div class="offer-line">Get Extra 10 percent off on Prepaid Orders</div>310 <div class="offer-right">T&C</div>311 <div class="offer-sub">Use code "MYSHOPCLUES"</div>312 <div class="code-row">313 <div class="coupon">MYSHOPCLUES</div>314 <div class="tap-copy">Tap to copy</div>315 </div>316 </div>317 318 <div class="replace-card">319 <svg class="replace-icon" viewBox="0 0 24 24">320 <path fill="currentColor" d="M12 5V2l5 4-5 4V7a5 5 0 0 0-5 5h2a3 3 0 0 1 3-3zm0 14v3l-5-4 5-4v3a5 5 0 0 0 5-5h-2a3 3 0 0 1-3 3z"/>321 </svg>322 <div class="replace-text">323 Free Replacement for size-related issues: You can replace the product for free within 10 days of order delivery, if it does not fit your size324 </div>325 </div>326 327 <div class="card">328 <h3>Key Feature</h3>329 <div class="detail-line">Product id: 153321582</div>330 <div class="detail-line">• Color : Gray</div>331 <div class="detail-line">• Upper Material : Mesh</div>332 <div class="link-row">333 <span>View all details</span>334 <svg class="chevron" viewBox="0 0 24 24">335 <path fill="currentColor" d="M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5z"/>336 </svg>337 </div>338 </div>339 340 <div class="check-card">341 <h3>Check Delivery</h3>342 <div class="pincode-row">343 <input class="input" type="text" placeholder="Enter pincode to check delivery" />344 <div class="btn-check">Check</div>345 </div>346 <div class="bullet">• Cash on Delivery Maybe Available</div>347 <div class="bullet">• Delivery in 2-5 business days</div>348 </div>349 350 </div>351 352 <!-- Bottom actions -->353 <div class="bottom-bar">354 <div class="btn-cart">ADD TO CART</div>355 <div class="btn-buy">BUY NOW</div>356 </div>357 358</div>359</body>360</html>