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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 /* Top status bar */17 .status-bar {18 height: 110px;19 background: #3f51b5;20 color: #fff;21 padding: 22px 32px 12px 32px;22 box-sizing: border-box;23 }24 .status-top {25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-size: 34px;29 opacity: 0.95;30 }31 .status-icons {32 display: flex;33 gap: 26px;34 align-items: center;35 }36 .dot {37 width: 16px; height: 16px; background: #cfd8dc; border-radius: 50%;38 display: inline-block;39 }40 /* Tabs / chips bar */41 .tabs-bar {42 background: #3f51b5;43 padding: 14px 20px 22px 20px;44 box-sizing: border-box;45 }46 .chips {47 display: flex;48 gap: 14px;49 white-space: nowrap;50 }51 .chip {52 display: inline-block;53 padding: 18px 28px;54 font-size: 32px;55 color: #ffffff;56 background: #5c6bc0;57 border-radius: 28px;58 }59 .chip.dark { background: #202124; }60 /* Content area */61 .content {62 padding: 24px 32px 140px 32px;63 box-sizing: border-box;64 }65 /* Product gallery */66 .gallery {67 display: flex;68 gap: 26px;69 margin-top: 8px;70 margin-bottom: 28px;71 }72 .product-card {73 width: 330px;74 background: #fff;75 border: 2px solid #ddd;76 border-radius: 18px;77 overflow: hidden;78 }79 .img-placeholder {80 width: 100%;81 height: 250px;82 background: #E0E0E0;83 border-bottom: 1px solid #BDBDBD;84 display: flex; align-items: center; justify-content: center;85 color: #757575; font-size: 28px; text-align: center;86 }87 .caption {88 padding: 16px 18px;89 font-size: 34px;90 color: #333;91 border-top: 3px solid #f0f0f0;92 }93 .caption.orange {94 border: 2px solid #f5a623;95 border-radius: 0 0 18px 18px;96 }97 /* Size row */98 .size-row {99 display: flex;100 align-items: center;101 justify-content: space-between;102 font-size: 36px;103 margin-top: 8px;104 margin-bottom: 16px;105 border-top: 1px solid #e5e5e5;106 padding-top: 18px;107 }108 .size-row .bold { font-weight: bold; }109 /* Pack options */110 .options {111 display: flex;112 gap: 22px;113 margin-bottom: 34px;114 }115 .option-card {116 width: 330px;117 border: 2px solid #d9d9d9;118 border-radius: 20px;119 background: #fff;120 padding: 18px 22px;121 box-sizing: border-box;122 }123 .option-card.active { border-color: #f5a623; background: #fff7f0; }124 .option-title { font-size: 34px; font-weight: bold; margin-bottom: 10px; }125 .option-price { font-size: 40px; margin-bottom: 10px; }126 .stock { color: #1faa00; font-size: 32px; }127 /* Deal section */128 .deal-pill {129 display: inline-block;130 padding: 18px 24px;131 background: #d81b60;132 color: #fff;133 border-radius: 14px;134 font-weight: bold;135 font-size: 32px;136 margin-bottom: 16px;137 }138 .deal-row {139 display: flex; align-items: baseline; gap: 18px;140 }141 .discount { color: #d32f2f; font-size: 80px; font-weight: bold; }142 .deal-price { font-size: 90px; font-weight: bold; color: #111; }143 .mrp { color: #777; font-size: 34px; margin-top: 10px; }144 .mrp .strike { text-decoration: line-through; }145 .badge {146 display: inline-flex; align-items: center; gap: 10px;147 background: #455a64; color: #fff; padding: 10px 16px;148 border-radius: 10px; font-size: 30px; margin-top: 14px;149 }150 .tax-note { font-size: 34px; color: #333; margin-top: 14px; }151 /* Offers */152 .offers-row {153 margin-top: 26px;154 border-top: 1px solid #e5e5e5;155 border-bottom: 1px solid #e5e5e5;156 padding: 22px 0;157 display: flex; align-items: center; justify-content: space-between;158 }159 .offers-left {160 display: flex; align-items: center; gap: 18px;161 }162 .offers-text {163 display: flex; flex-direction: column;164 }165 .offers-text .title { font-size: 36px; font-weight: bold; color: #333; }166 .offers-text .sub { font-size: 32px; color: #777; }167 /* Total */168 .total {169 font-size: 42px;170 font-weight: bold;171 margin: 26px 0;172 }173 .delivery {174 font-size: 34px; color: #333;175 line-height: 1.5;176 }177 .link { color: #1a73e8; }178 .green { color: #1faa00; }179 /* Floating action button */180 .fab {181 position: absolute;182 right: 40px;183 bottom: 240px;184 width: 120px;185 height: 120px;186 border-radius: 50%;187 background: #3f51b5;188 box-shadow: 0 8px 20px rgba(0,0,0,0.25);189 display: flex; align-items: center; justify-content: center;190 }191 .fab svg { width: 60px; height: 60px; }192 /* Bottom ad bar */193 .ad-bar {194 position: absolute;195 left: 0; right: 0; bottom: 120px;196 height: 120px;197 background: #f5f5f5;198 border-top: 1px solid #e0e0e0;199 display: flex; align-items: center; justify-content: space-between;200 padding: 0 24px; box-sizing: border-box;201 }202 .ad-info { display: flex; align-items: center; gap: 18px; }203 .ad-icon {204 width: 80px; height: 80px;205 background: #E0E0E0; border: 1px solid #BDBDBD;206 display: flex; align-items: center; justify-content: center;207 color: #757575; font-size: 22px;208 border-radius: 12px;209 }210 .ad-text { font-size: 30px; }211 .install-btn {212 background: #1976d2; color: #fff;213 padding: 16px 28px; border-radius: 12px; font-size: 32px; font-weight: bold;214 }215 /* Gesture bar */216 .gesture {217 position: absolute;218 bottom: 40px;219 left: 50%;220 transform: translateX(-50%);221 width: 300px; height: 14px;222 background: #111; border-radius: 10px;223 opacity: 0.9;224 }225 /* Simple SVG icon styles */226 .chevron {227 width: 40px; height: 40px;228 }229</style>230</head>231<body>232<div id="render-target">233 <div class="status-bar">234 <div class="status-top">235 <div>9:24</div>236 <div class="status-icons">237 <span>🔔</span>238 <span>👻</span>239 <span>🔔</span>240 <span class="dot"></span>241 <span>📶</span>242 <span>🔋</span>243 </div>244 </div>245 <div class="tabs-bar">246 <div class="chips">247 <span class="chip dark">× Amazon.</span>248 <span class="chip">Flipkar</span>249 <span class="chip">2gud.co</span>250 <span class="chip">Google.</span>251 <span class="chip">Relianc</span>252 <span class="chip">Store</span>253 </div>254 </div>255 </div>256 257 <div class="content">258 <div class="gallery">259 <div class="product-card">260 <div class="img-placeholder">[IMG: Door Stopper - Rose Gold]</div>261 <div class="caption orange">Rose Gold</div>262 </div>263 <div class="product-card">264 <div class="img-placeholder">[IMG: Door Stopper - Black]</div>265 <div class="caption">Black</div>266 </div>267 <div class="product-card">268 <div class="img-placeholder">[IMG: Door Stopper - Brass Antique]</div>269 <div class="caption">Brass Antique</div>270 </div>271 </div>272 273 <div class="size-row">274 <div>Size: <span class="bold">Pack of 1</span></div>275 <svg class="chevron" viewBox="0 0 24 24">276 <path d="M6 15l6-6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>277 </svg>278 </div>279 280 <div class="options">281 <div class="option-card active">282 <div class="option-title">Pack of 1</div>283 <div class="option-price">₹379.00</div>284 <div class="stock">In stock</div>285 </div>286 <div class="option-card">287 <div class="option-title">Pack of 2</div>288 <div class="option-price">₹664.00</div>289 <div class="stock">In stock</div>290 </div>291 <div class="option-card">292 <div class="option-title">Pack of 3</div>293 <div class="option-price">₹949.00</div>294 <div class="stock">In stock</div>295 </div>296 </div>297 298 <span class="deal-pill">Deal of the Day</span>299 <div class="deal-row">300 <div class="discount">-72%</div>301 <div class="deal-price">₹379</div>302 </div>303 <div class="mrp">M.R.P.: <span class="strike">₹1,373</span></div>304 <div class="badge">305 <span style="background:#ffd54f;color:#333;border-radius:6px;padding:2px 8px;">a</span>306 Fulfilled307 </div>308 <div class="tax-note">Inclusive of all taxes</div>309 310 <div class="offers-row">311 <div class="offers-left">312 <svg width="48" height="48" viewBox="0 0 48 48">313 <circle cx="24" cy="24" r="22" fill="#f5f5f5" stroke="#cfcfcf" stroke-width="2"></circle>314 <circle cx="18" cy="18" r="3" fill="#ffa726"></circle>315 <circle cx="30" cy="30" r="3" fill="#ffa726"></circle>316 <path d="M18 30 L30 18" stroke="#ffa726" stroke-width="3" stroke-linecap="round"></path>317 </svg>318 <div class="offers-text">319 <div class="title">Save Extra with Offers</div>320 <div class="sub">Bank Offers and Partner Offers</div>321 </div>322 </div>323 <svg class="chevron" viewBox="0 0 24 24">324 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>325 </svg>326 </div>327 328 <div style="height:1px;background:#e5e5e5;margin:0;"></div>329 330 <div class="total">Total: ₹379</div>331 332 <div class="delivery">333 <span class="link">FREE delivery Friday, 8 December</span> on orders dispatched by Amazon over ₹499. <span class="link">Details</span><br>334 Or fastest delivery <b>Today</b>. Order within <span class="green">1 hr 15 min</span>. <span class="link">Details</span><br>335 <span>Delivering to Delhi 110001 • Update location</span>336 </div>337 </div>338 339 <div class="fab">340 <svg viewBox="0 0 24 24">341 <circle cx="12" cy="12" r="11" fill="none"></circle>342 <path d="M12 6v12M6 12h12" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>343 </svg>344 </div>345 346 <div class="ad-bar">347 <div class="ad-info">348 <div class="ad-icon">[IMG]</div>349 <div class="ad-text">350 <div><strong>Ubuy: International Shopping</strong></div>351 <div style="color:#777;">FREE · Lifestyle</div>352 </div>353 </div>354 <div class="install-btn">Install</div>355 </div>356 357 <div class="gesture"></div>358</div>359</body>360</html>