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 Flash Deal - Mobile UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F7F7F7;15 }16 17 /* Header / status area */18 .topbar {19 background: #2C2F3A;20 color: #fff;21 width: 100%;22 height: 240px;23 box-sizing: border-box;24 padding: 22px 36px 0;25 }26 .status-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-size: 34px;31 opacity: 0.9;32 }33 .status-icons {34 display: flex; align-items: center; gap: 22px;35 }36 .status-dot { width: 10px; height: 10px; background: #B0B5C3; border-radius: 50%; display: inline-block; }37 .nav-row {38 margin-top: 36px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 padding: 0 6px;43 }44 .nav-left, .nav-right { display: flex; align-items: center; gap: 36px; }45 .icon {46 width: 56px; height: 56px;47 display: inline-flex; align-items: center; justify-content: center;48 }49 .icon svg { width: 56px; height: 56px; }50 51 /* Hero image placeholder */52 .hero {53 width: 100%;54 height: 900px;55 background: #E0E0E0;56 border-top: 1px solid #BDBDBD;57 border-bottom: 1px solid #BDBDBD;58 display: flex; align-items: center; justify-content: center;59 color: #757575;60 font-size: 32px;61 position: relative;62 }63 .image-count {64 position: absolute;65 left: 28px;66 bottom: 24px;67 background: rgba(0,0,0,0.7);68 color: #fff;69 font-size: 28px;70 padding: 8px 18px;71 border-radius: 18px;72 }73 74 /* Flash deal banner */75 .flash-banner {76 width: 100%;77 height: 180px;78 display: flex;79 align-items: stretch;80 color: #fff;81 overflow: hidden;82 }83 .flash-left {84 flex: 1.2;85 background: linear-gradient(90deg, #FF4D00, #FF7A00);86 display: flex; align-items: center; padding: 0 36px; gap: 18px;87 font-weight: 700; font-size: 50px;88 }89 .flash-right {90 flex: 1;91 background: #FF9800;92 display: flex; align-items: center; justify-content: center;93 gap: 14px;94 padding: 0 20px;95 font-size: 30px;96 }97 .countdown {98 display: flex; align-items: center; gap: 10px;99 font-weight: 700;100 }101 .cd-box {102 background: #fff;103 color: #FF6A00;104 padding: 10px 16px;105 border-radius: 8px;106 font-size: 34px;107 min-width: 70px;108 text-align: center;109 }110 .cd-colon { padding: 0 6px; }111 112 /* Price & actions */113 .content {114 background: #fff;115 padding: 28px 36px 24px;116 }117 .price-row {118 display: flex;119 align-items: flex-start;120 justify-content: space-between;121 gap: 24px;122 }123 .price-info .amount {124 font-size: 78px; font-weight: 800; color: #1D1D1D;125 }126 .price-info .old {127 font-size: 36px; color: #8A8A8A; text-decoration: line-through; margin-left: 18px;128 }129 .price-info .disc {130 font-size: 36px; color: #FF6A00; font-weight: 700; margin-left: 14px;131 }132 .lowest {133 margin-top: 10px;134 color: #FF7A00;135 font-size: 34px;136 display: flex; align-items: center; gap: 10px;137 }138 .action-col {139 display: flex; flex-direction: column; gap: 20px; align-items: center; margin-top: 6px;140 }141 .action-item {142 display: flex; flex-direction: column; align-items: center; gap: 6px; color: #646464; font-size: 28px;143 }144 145 .title {146 margin-top: 22px;147 font-size: 42px;148 line-height: 56px;149 color: #222;150 }151 152 .rating-row {153 margin-top: 16px;154 display: flex; align-items: center; gap: 12px;155 color: #6B6B6B; font-size: 32px;156 }157 .stars { display: inline-flex; gap: 6px; }158 .stars svg { width: 34px; height: 34px; }159 .divider { color: #BDBDBD; margin: 0 8px; }160 161 /* Shipping card */162 .shipping-card {163 margin: 28px 24px 260px;164 border: 1px solid #E6E6E6;165 border-radius: 22px;166 background: #fff;167 padding: 28px 28px;168 }169 .ship-row {170 display: flex; align-items: center; justify-content: space-between;171 height: 120px;172 }173 .ship-left .label { color: #777; font-size: 34px; }174 .ship-left .country { font-size: 46px; font-weight: 800; color: #1f1f1f; margin-top: 6px; }175 .chev {176 width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;177 }178 179 /* Bottom sticky bar */180 .bottom-bar {181 position: absolute; left: 0; right: 0; bottom: 120px;182 background: #fff;183 padding: 22px 28px;184 display: flex; gap: 24px;185 box-shadow: 0 -4px 14px rgba(0,0,0,0.05);186 }187 .btn {188 flex: 1; height: 120px; border-radius: 16px; border: none; font-weight: 800;189 color: #fff; font-size: 40px; letter-spacing: 0.2px;190 }191 .btn-buy { background: #FFA000; }192 .btn-cart { background: linear-gradient(90deg, #FF5C00, #FF7E2E); }193 194 /* Gesture pill */195 .gesture {196 position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);197 width: 300px; height: 12px; background: #CFCFCF; border-radius: 8px;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Top bar -->205 <div class="topbar">206 <div class="status-row">207 <div>2:59</div>208 <div class="status-icons">209 <span class="status-dot"></span>210 <span class="status-dot" style="width:14px;height:14px;"></span>211 <span class="status-dot" style="width:14px;height:14px;"></span>212 <span class="status-dot"></span>213 <span class="status-dot" style="background:#fff;width:10px;height:10px;opacity:.7;"></span>214 </div>215 </div>216 <div class="nav-row">217 <div class="nav-left">218 <span class="icon">219 <svg viewBox="0 0 48 48" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">220 <path d="M30 8 L14 24 L30 40"/>221 </svg>222 </span>223 </div>224 <div class="nav-right">225 <span class="icon" title="Cart">226 <svg viewBox="0 0 48 48" fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">227 <circle cx="18" cy="40" r="3"></circle>228 <circle cx="34" cy="40" r="3"></circle>229 <path d="M6 10h6l4 22h20l4-16H14"></path>230 </svg>231 </span>232 <span class="icon" title="Share">233 <svg viewBox="0 0 48 48" fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">234 <circle cx="12" cy="26" r="4"></circle>235 <circle cx="36" cy="12" r="4"></circle>236 <circle cx="36" cy="36" r="4"></circle>237 <path d="M15 24l18-10M15 28l18 8"></path>238 </svg>239 </span>240 <span class="icon" title="More">241 <svg viewBox="0 0 48 48" fill="#FFFFFF">242 <circle cx="10" cy="24" r="4"></circle>243 <circle cx="24" cy="24" r="4"></circle>244 <circle cx="38" cy="24" r="4"></circle>245 </svg>246 </span>247 </div>248 </div>249 </div>250 251 <!-- Product image placeholder -->252 <div class="hero">253 [IMG: Portable Juicer on tabletop]254 <div class="image-count">4/8</div>255 </div>256 257 <!-- Flash deals strip -->258 <div class="flash-banner">259 <div class="flash-left">260 <span>261 <svg width="56" height="56" viewBox="0 0 24 24" fill="#FFFFFF">262 <path d="M13 2L3 14h7l-1 8 11-14h-7l0-6z"></path>263 </svg>264 </span>265 <span>Flash Deals</span>266 </div>267 <div class="flash-right">268 <span>Ends in</span>269 <div class="countdown">270 <div class="cd-box">86</div><span>d</span>271 <div class="cd-box">06</div><span class="cd-colon">:</span>272 <div class="cd-box">30</div><span class="cd-colon">:</span>273 <div class="cd-box">18</div>274 </div>275 </div>276 </div>277 278 <!-- Content -->279 <div class="content">280 <div class="price-row">281 <div class="price-info">282 <div>283 <span class="amount">₹2,502.74</span>284 <span class="old">₹4,205.44</span>285 <span class="disc">-41%</span>286 </div>287 <div class="lowest">288 <svg width="28" height="28" viewBox="0 0 24 24" fill="#FF7A00">289 <path d="M12 2v4M12 18v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M2 12h4M18 12h4M4.2 19.8L7 17M17 7l2.8-2.8"></path>290 </svg>291 Lowest price in 175 days292 </div>293 </div>294 <div class="action-col">295 <div class="action-item">296 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">297 <path d="M12 22c4 0 7-2 7-6 0-3-2-4-2-8 0-2.8-2.2-5-5-5S7 5.2 7 8c0 4-2 5-2 8 0 4 3 6 7 6z"></path>298 </svg>299 <div>Price Alert</div>300 </div>301 <div class="action-item">302 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">303 <path d="M12 21s-6-4.4-8.5-7.2C1.2 11.2 2 7.5 5.2 6.6 7.1 6 8.8 7 9.6 8.5c.8-1.5 2.5-2.5 4.4-1.9 3.2.9 4 4.6 1.7 7.2C18 16.6 12 21 12 21z"/>304 </svg>305 <div>133</div>306 </div>307 </div>308 </div>309 310 <div class="title">311 XIAOMI Mijia Portable Juicer Mixer Electric Mini Blender Fruit Vegetables Quick Juicing Kitchen Food Processor Fitness Travel312 </div>313 314 <div class="rating-row">315 <div class="stars">316 <svg viewBox="0 0 24 24" fill="#FFA726"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>317 <svg viewBox="0 0 24 24" fill="#FFA726"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>318 <svg viewBox="0 0 24 24" fill="#FFA726"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>319 <svg viewBox="0 0 24 24" fill="#FFA726"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>320 <svg viewBox="0 0 24 24" fill="#FFD180"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z"/></svg>321 </div>322 <span>(14)</span>323 <span class="divider">|</span>324 <span>106 Sold</span>325 </div>326 </div>327 328 <!-- Shipping selection -->329 <div class="shipping-card">330 <div class="ship-row">331 <div class="ship-left">332 <div class="label">Ship From</div>333 <div class="country">CN</div>334 </div>335 <div class="chev">336 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">337 <path d="M9 6l6 6-6 6"></path>338 </svg>339 </div>340 </div>341 </div>342 343 <!-- Bottom purchase bar -->344 <div class="bottom-bar">345 <button class="btn btn-buy">Buy Now</button>346 <button class="btn btn-cart">Add to Cart</button>347 </div>348 349 <div class="gesture"></div>350</div>351</body>352</html>