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 Deal UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 19 /* Top gradient/status area */20 .status-gradient {21 width: 100%;22 height: 260px;23 background: linear-gradient(90deg, #79d1d1, #a6e3b8);24 position: relative;25 }26 .status-bar {27 position: absolute;28 top: 16px;29 left: 24px;30 right: 24px;31 height: 44px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #0e3d3b;36 font-weight: 600;37 font-size: 34px;38 opacity: 0.95;39 }40 .status-icons {41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .dot { width: 10px; height: 10px; background:#0e3d3b; border-radius: 50%; opacity:.6; }46 .tri { width: 22px; height: 22px; border: 3px solid #0e3d3b; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); opacity:.8; }47 .batt {48 width: 36px; height: 20px; border: 3px solid #0e3d3b; border-radius: 4px; position: relative;49 }50 .batt:after { content:""; position: absolute; right:-6px; top:6px; width:6px; height:8px; background:#0e3d3b; border-radius:1px; }51 .batt .lvl { position:absolute; left:3px; top:3px; right:6px; bottom:3px; background:#0e3d3b; }52 53 /* Search row */54 .search-row {55 position: absolute;56 top: 94px;57 left: 24px;58 right: 24px;59 display: flex;60 align-items: center;61 gap: 20px;62 }63 .back-btn {64 width: 64px; height: 64px; border-radius: 32px;65 display:flex; align-items:center; justify-content:center;66 background: transparent;67 }68 .search-box {69 flex: 1;70 background: #fff;71 border-radius: 24px;72 height: 88px;73 box-shadow: 0 6px 16px rgba(0,0,0,0.18);74 display: flex;75 align-items: center;76 padding: 0 24px;77 gap: 18px;78 font-size: 36px;79 color: #555;80 }81 .search-box .pill {82 margin-left: auto;83 width: 58px; height: 58px;84 border-radius: 16px;85 border: 2px solid #e0e0e0;86 display:flex; align-items:center; justify-content:center;87 color:#777;88 }89 90 /* Main content area */91 .content {92 position: absolute;93 top: 260px;94 left: 0; right: 0;95 bottom: 180px; /* leave space for bottom nav */96 overflow: hidden;97 background: #fff;98 }99 100 .strip-cards {101 display: flex;102 gap: 24px;103 padding: 18px 24px 0;104 }105 .strip-card {106 flex: 0 0 320px;107 height: 180px;108 border-radius: 22px;109 border: 2px solid #e6e2da;110 background: #fffdf9;111 display:flex; align-items:center; justify-content:center;112 color:#b53c2a; font-weight: 600; font-size: 34px;113 }114 115 .deal-section {116 padding: 28px 28px 12px;117 border-top: 2px solid #efefef;118 }119 .deal-badge {120 display: inline-block;121 background: #c2185b;122 color: #fff;123 border-radius: 12px;124 padding: 10px 18px;125 font-weight: 700;126 font-size: 32px;127 margin-bottom: 12px;128 }129 .price-rows { font-size: 36px; line-height: 1.5; }130 .muted { color:#8b8b8b; text-decoration: line-through; }131 .deal-price { color:#c62828; font-weight: 700; }132 .green { color: #1a9e1a; }133 .timer { color:#555; font-size: 30px; }134 .save { color: #c62828; }135 .subtle { color:#777; font-size: 30px; }136 137 .offers-divider {138 margin-top: 20px;139 border-top: 2px solid #e7e7e7;140 border-bottom: 2px solid #e7e7e7;141 padding: 20px 28px;142 display:flex; align-items:center; justify-content:space-between;143 background:#fafafa;144 }145 .offers-left { display:flex; align-items:center; gap:22px; }146 .offers-icon {147 width:56px; height:56px; border:2px dashed #bdbdbd; border-radius:50%;148 display:flex; align-items:center; justify-content:center; color:#bdbdbd; font-weight:700;149 }150 .offers-title { font-size: 36px; font-weight: 700; }151 .offers-sub { font-size: 30px; color:#777; }152 153 .purchase-card {154 margin: 28px;155 background: #fff;156 border: 2px solid #eaeaea;157 border-radius: 22px;158 padding: 28px;159 box-shadow: 0 6px 12px rgba(0,0,0,0.05);160 }161 .purchase-title { font-size: 38px; font-weight: 800; margin-bottom: 8px; }162 .purchase-price { font-size: 36px; color:#d02b2b; margin-bottom: 12px; }163 .fulfilled {164 display:inline-flex; align-items:center; gap:10px;165 background:#50555c; color:#fff; border-radius:8px; padding:6px 10px; font-weight:700; font-size:28px;166 }167 .delivery-line { margin-top: 14px; font-size: 32px; color:#2a7cbe; }168 .delivery-line .green { font-weight: 700; }169 .location-line { margin-top: 16px; font-size: 32px; color:#2a7cbe; display:flex; align-items:center; gap:12px; }170 .small-note { margin-top: 16px; font-size: 30px; color:#555; }171 .stock { margin-top: 16px; font-size: 40px; font-weight: 700; color:#1a9e1a; }172 173 /* Bottom navigation */174 .bottom-nav {175 position: absolute;176 left: 0; right: 0; bottom: 34px;177 height: 140px;178 border-top: 2px solid #e9e9e9;179 background: #ffffff;180 display:flex; align-items:center; justify-content: space-around;181 }182 .nav-item {183 width: 160px; height: 120px;184 display:flex; flex-direction:column; align-items:center; justify-content:center;185 color:#666; font-size: 28px; gap: 10px;186 }187 .nav-item.active { color:#1a9e1a; font-weight: 700; }188 .handle {189 position: absolute; left:50%; transform:translateX(-50%);190 bottom: 10px; width: 300px; height: 10px; background:#bdbdbd; border-radius: 6px;191 }192 193 /* Simple icon styling */194 .icon { width: 44px; height: 44px; stroke: currentColor; fill: none; }195 .icon-fill { width: 44px; height: 44px; fill: currentColor; }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Top gradient + status -->202 <div class="status-gradient">203 <div class="status-bar">204 <div>10:15</div>205 <div class="status-icons">206 <div class="dot"></div>207 <div class="dot"></div>208 <div class="dot"></div>209 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke-width="2"></circle><line x1="21" y1="21" x2="16.5" y2="16.5" stroke-width="2"></line></svg>210 <div class="tri"></div>211 <div class="batt"><div class="lvl"></div></div>212 </div>213 </div>214 215 <div class="search-row">216 <div class="back-btn" aria-label="Back">217 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" /></svg>218 </div>219 <div class="search-box">220 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke-width="2"></circle><line x1="21" y1="21" x2="16.5" y2="16.5" stroke-width="2"></line></svg>221 <div>quaker oats</div>222 <div class="pill" title="Scan">223 <svg class="icon" viewBox="0 0 24 24">224 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" stroke-width="2"></rect>225 </svg>226 </div>227 </div>228 </div>229 </div>230 231 <!-- Content -->232 <div class="content">233 <div class="strip-cards">234 <div class="strip-card">Currently unavailable.</div>235 <div class="strip-card" style="border-color:#f0b27a;">236 <div style="text-align:center;">237 <div style="font-size:48px; color:#000; font-weight:800;">₹179.00</div>238 <div class="green" style="font-size:30px;">In stock</div>239 </div>240 </div>241 <div class="strip-card">Currently unavailable.</div>242 </div>243 244 <div class="deal-section">245 <div class="deal-badge">Deal of the Day</div>246 <div class="price-rows">247 <div>M.R.P.: <span class="muted">₹199</span></div>248 <div>Deal of the Day: <span class="deal-price">₹179 (₹179 / kg)</span>249 <span class="fulfilled" style="margin-left:12px;">a <span style="opacity:.8;">Fulfilled</span></span>250 </div>251 <div class="timer">Ends in 12h 44m 03s</div>252 <div>You Save: <span class="save">₹20 (10%)</span></div>253 <div class="subtle">Inclusive of all taxes</div>254 </div>255 </div>256 257 <div class="offers-divider">258 <div class="offers-left">259 <div class="offers-icon">%</div>260 <div>261 <div class="offers-title">Save Extra with Offers</div>262 <div class="offers-sub">Partner Offers</div>263 </div>264 </div>265 <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-width="2"/></svg>266 </div>267 268 <div class="purchase-card">269 <div class="purchase-title">One-time purchase:</div>270 <div class="purchase-price">₹179.00 (₹179.00 / kg)</div>271 <div class="fulfilled">a <span style="opacity:.85;">Fulfilled</span></div>272 273 <div class="small-note" style="margin-top:12px;">274 <span style="color:#2a7cbe; font-weight:700;">FREE delivery Saturday, 9 December</span> on orders dispatched by Amazon over ₹499.275 <span style="color:#2a7cbe;">Details</span>276 </div>277 278 <div class="small-note">279 Or fastest delivery <strong>Tomorrow, 8 December</strong>. Order within280 <span class="green">13 hrs 15 mins</span>. <span style="color:#2a7cbe;">Details</span>281 </div>282 283 <div class="location-line">284 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>285 Delivering to Delhi 110001 - <span style="color:#2a7cbe;">Update location</span>286 </div>287 288 <div class="small-note">Use by: 18 JAN 2024</div>289 <div class="small-note">290 Available at a lower price from <span style="color:#2a7cbe;">other sellers</span> that may not offer free Prime shipping.291 </div>292 293 <div class="stock">In stock</div>294 </div>295 296 </div>297 298 <!-- Bottom navigation -->299 <div class="bottom-nav">300 <div class="nav-item active">301 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>302 <div>Home</div>303 </div>304 <div class="nav-item">305 <svg class="icon-fill" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /></svg>306 <div>You</div>307 </div>308 <div class="nav-item">309 <svg class="icon-fill" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7"></rect><rect x="13" y="4" width="7" height="7"></rect><rect x="4" y="13" width="7" height="7"></rect></svg>310 <div>More</div>311 </div>312 <div class="nav-item">313 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M7 4h13l-1.5 9h-11z"/><circle cx="10" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>314 <div>Cart</div>315 </div>316 <div class="nav-item">317 <svg class="icon-fill" viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>318 <div>Menu</div>319 </div>320 </div>321 <div class="handle"></div>322 323</div>324</body>325</html>