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>Standing Desk - Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #fff;15 }16 17 /* Top gradient header */18 .top-gradient {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 340px;24 background: linear-gradient(180deg, #8ed9d4 0%, #bfeee6 100%);25 }26 27 /* Status bar */28 .status-bar {29 position: absolute;30 top: 14px;31 left: 24px;32 right: 24px;33 height: 44px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #1b1b1b;38 font-weight: 600;39 font-size: 36px;40 opacity: 0.9;41 }42 .status-icons {43 display: flex;44 gap: 18px;45 align-items: center;46 }47 .status-dot { width: 10px; height: 10px; background:#1b1b1b; border-radius:50%; opacity:0.7; }48 49 /* App bar */50 .app-bar {51 position: absolute;52 top: 84px;53 left: 18px;54 right: 18px;55 display: flex;56 align-items: center;57 gap: 18px;58 }59 .back-btn {60 width: 72px;61 height: 72px;62 border-radius: 36px;63 display: grid;64 place-items: center;65 color: #1f2a2a;66 }67 .search-box {68 flex: 1;69 background: #fff;70 border-radius: 24px;71 box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 6px 18px rgba(0,0,0,0.08);72 height: 92px;73 display: flex;74 align-items: center;75 padding: 0 28px;76 gap: 16px;77 }78 .search-input {79 flex: 1;80 font-size: 38px;81 color: #222;82 }83 .search-input span { color: #606060; }84 .scan-btn {85 width: 64px; height: 64px; border-radius: 16px; background: #f4f7f8; display: grid; place-items: center;86 }87 88 /* Location strip */89 .location-strip {90 position: absolute;91 top: 196px;92 left: 0;93 right: 0;94 padding: 18px 28px 24px;95 color: #0b3c3a;96 }97 .location-pill {98 display: inline-flex;99 align-items: center;100 gap: 16px;101 background: rgba(255,255,255,0.75);102 border-radius: 22px;103 padding: 18px 22px;104 font-size: 30px;105 color: #0f403e;106 }107 108 /* Scrollable content */109 .content {110 position: absolute;111 top: 340px;112 left: 0;113 right: 0;114 bottom: 150px; /* leave space for nav bar */115 overflow-y: auto;116 background: #fff;117 }118 119 /* Chips row */120 .chips {121 display: flex;122 align-items: center;123 gap: 16px;124 padding: 18px 22px;125 border-bottom: 1px solid #e9eef0;126 }127 .chip {128 display: inline-flex;129 align-items: center;130 gap: 12px;131 background: #eef6f7;132 color: #0c4b4a;133 padding: 18px 22px;134 border-radius: 16px;135 font-size: 28px;136 border: 1px solid #d9e8ea;137 }138 .chip.outline {139 background: #fff;140 border-color: #e2e7ea;141 color: #222;142 }143 .toggle {144 width: 78px; height: 42px; background: #e9ecef; border-radius: 21px; position: relative; }145 .toggle::after {146 content: ""; position: absolute; width: 38px; height: 38px; top: 2px; left: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2);147 }148 .chip .x { color:#3c7e80; background:#d7eef0; border-radius: 10px; padding: 0 8px; }149 150 /* Section heading */151 .section {152 padding: 24px 28px 10px;153 }154 .section h2 {155 margin: 0 0 8px;156 font-size: 40px;157 font-weight: 700;158 }159 .muted { color: #6e7478; font-size: 26px; }160 161 /* Horizontal product teasers */162 .teasers {163 display: grid;164 grid-template-columns: 1fr 1fr 1fr;165 gap: 22px;166 padding: 12px 22px 24px;167 }168 .teaser {169 background: #fff;170 border: 1px solid #e6eaed;171 border-radius: 14px;172 padding: 14px;173 }174 .img-ph {175 width: 100%;176 height: 220px;177 background: #E0E0E0;178 border: 1px solid #BDBDBD;179 display: flex;180 align-items: center;181 justify-content: center;182 color: #757575;183 font-size: 28px;184 border-radius: 10px;185 }186 .deal-badge {187 display: inline-block;188 background: #a63a15;189 color: #fff;190 padding: 8px 12px;191 border-radius: 8px;192 font-size: 26px;193 margin-top: 12px;194 }195 .price {196 font-size: 46px;197 font-weight: 700;198 margin: 6px 0 0;199 }200 .strike { color:#7b8b8f; text-decoration: line-through; margin-left: 8px; font-size: 28px; }201 .save { color:#607d89; font-size: 26px; }202 203 /* Divider text */204 .divider-note {205 padding: 18px 28px;206 color: #6e7478;207 font-size: 26px;208 border-top: 10px solid #f1f3f4;209 }210 211 /* Large product card */212 .product-card {213 margin: 16px 22px 0;214 background: #fff;215 border: 1px solid #e6eaed;216 border-radius: 18px;217 box-shadow: 0 4px 10px rgba(0,0,0,0.03);218 padding: 18px;219 display: grid;220 grid-template-columns: 320px 1fr;221 gap: 22px;222 }223 .product-card .img-square {224 width: 320px; height: 320px;225 }226 .sponsored { color:#6e7478; font-size: 26px; margin-bottom: 6px; }227 .title {228 font-size: 34px;229 line-height: 1.25;230 margin: 0 0 8px;231 font-weight: 600;232 }233 .rating-row { display:flex; align-items:center; gap: 10px; margin: 6px 0; }234 .stars { color:#f59f00; display:flex; gap: 4px; }235 .badge {236 display:inline-block;237 background:#f7e7bf;238 color:#8a5e00;239 padding: 6px 10px;240 border-radius: 8px;241 font-size: 26px;242 margin: 6px 0 12px;243 }244 .price-row { display:flex; align-items:flex-end; gap: 16px; margin: 4px 0; }245 .coupon {246 display:inline-block;247 background:#d9f2d1;248 color:#0a6d1f;249 padding: 6px 12px;250 border-radius: 8px;251 font-size: 26px;252 margin-top: 8px;253 }254 .prime-row { display:flex; align-items:center; gap: 10px; color:#0c4b4a; font-size: 28px; margin-top: 10px; }255 256 /* Bottom navigation */257 .bottom-nav {258 position: absolute;259 left: 0; right: 0; bottom: 40px;260 height: 140px;261 background: #fff;262 border-top: 1px solid #e6eaed;263 display: grid;264 grid-template-columns: repeat(5, 1fr);265 align-items: center;266 text-align: center;267 font-size: 26px;268 }269 .nav-item { color:#283133; }270 .nav-item.active { color:#0a736c; font-weight: 700; }271 .nav-icon {272 width: 48px; height: 48px; margin: 0 auto 6px; display:block;273 }274 .home-indicator {275 position: absolute;276 left: 50%;277 transform: translateX(-50%);278 bottom: 16px;279 width: 360px;280 height: 12px;281 background: #c7c9cc;282 border-radius: 8px;283 }284 285 /* Utilities */286 .row { display:flex; align-items:center; gap: 12px; }287</style>288</head>289<body>290<div id="render-target">291 <div class="top-gradient"></div>292 293 <!-- Status bar -->294 <div class="status-bar">295 <div>1:04</div>296 <div class="status-icons">297 <div class="status-dot"></div>298 <div class="status-dot"></div>299 <div class="status-dot"></div>300 <div class="status-dot"></div>301 <div class="status-dot"></div>302 </div>303 </div>304 305 <!-- App bar with back and search -->306 <div class="app-bar">307 <div class="back-btn" aria-label="Back">308 <svg width="36" height="36" viewBox="0 0 24 24" fill="#0b3c3a" xmlns="http://www.w3.org/2000/svg">309 <path d="M14.7 4.3a1 1 0 0 1 0 1.4L9.4 11l5.3 5.3a1 1 0 1 1-1.4 1.4L7 11.7a1 1 0 0 1 0-1.4l6.9-6a1 1 0 0 1 .8-.3z"/>310 </svg>311 </div>312 <div class="search-box">313 <div class="search-input"><span>standing desk</span></div>314 <div class="scan-btn">315 <svg width="28" height="28" viewBox="0 0 24 24" fill="#0b3c3a"><path d="M3 7V5h4V3H1v6h2zm14-4v2h4v2h2V3h-6zM1 17v4h6v-2H3v-2H1zm22 0h-2v2h-2v2h4v-4z"/></svg>316 </div>317 </div>318 </div>319 320 <!-- Location -->321 <div class="location-strip">322 <div class="location-pill">323 <svg width="28" height="28" viewBox="0 0 24 24" fill="#0a5d5a"><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>324 Delivering to Delhi 110001 - Update location325 <svg width="18" height="18" viewBox="0 0 24 24" fill="#0a5d5a"><path d="M7 10l5 5 5-5H7z"/></svg>326 </div>327 </div>328 329 <!-- Scrollable content -->330 <div class="content">331 <!-- Filter chips -->332 <div class="chips">333 <div class="chip">334 <span style="color:#ff9900;font-weight:700;">prime</span>335 <div class="toggle"></div>336 </div>337 <div class="chip">338 Lapdesks <span class="x">×</span>339 </div>340 <div class="chip outline">341 <div class="row">342 <div class="stars">343 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>344 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>345 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>346 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>347 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ffcc66"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>348 </div>349 and350 </div>351 </div>352 <div class="chip outline">Filters (1)353 <svg width="18" height="18" viewBox="0 0 24 24" fill="#222" style="margin-left:8px;"><path d="M7 10l5 5 5-5H7z"/></svg>354 </div>355 </div>356 357 <!-- For your workspace -->358 <div class="section">359 <h2>For your workspace</h2>360 <div class="muted">Sponsored</div>361 </div>362 <div class="teasers">363 <div class="teaser">364 <div class="img-ph">[IMG: JIN OFFICE Logo]</div>365 <div style="font-size:30px; margin-top: 12px;">Save up to 61% on JIN OFFICE</div>366 </div>367 <div class="teaser">368 <div class="img-ph">[IMG: Standing Desk with Dual Monitors]</div>369 <div class="deal-badge">Limited time Deal</div>370 <div class="price">₹21,990 <span class="strike">₹38,500</span></div>371 <div class="save">(43% off)</div>372 </div>373 <div class="teaser">374 <div class="img-ph">[IMG: Standing Desk]</div>375 <div class="deal-badge">Limited time Deal</div>376 <div class="price">₹25,990</div>377 </div>378 </div>379 380 <div class="divider-note">Price and other details may vary based on product size and colour.</div>381 382 <!-- Large sponsored product card -->383 <div class="product-card">384 <div class="img-ph img-square">[IMG: Laptop table against blue wall]</div>385 <div>386 <div class="sponsored">Sponsored</div>387 <div class="title">eStand Height Adjustable Laptop Table to be Used in Sitting & Standing Posture (Black HAT ...)</div>388 <div class="rating-row">389 <span style="color:#2a7bd3; font-weight:700;">4.4</span>390 <div class="stars">391 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>392 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>393 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>394 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>395 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ffcc66"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>396 </div>397 <span class="muted">(24)</span>398 </div>399 <div class="badge">Great Indian Festival</div>400 <div class="price-row">401 <div class="price">₹5,999</div>402 <div class="muted">M.R.P.: <span class="strike">₹11,999</span> <span style="color:#3d7b3d;">(50% off)</span></div>403 </div>404 <div class="coupon">Save ₹100 with coupon</div>405 <div class="prime-row">406 <span style="color:#ff9900; font-weight:700;">prime</span>407 Get it by Wednesday, 15 November408 </div>409 </div>410 </div>411 412 <!-- Another small card preview -->413 <div class="product-card" style="grid-template-columns: 320px 1fr; margin-bottom: 160px;">414 <div class="img-ph img-square">[IMG: Adjustable Table Angled]</div>415 <div>416 <div class="sponsored">Sponsored</div>417 <div class="title">eStand Multi Purpose Height Adjustable Table for Reading, Writing, Typing etc. Best to use in...</div>418 <div class="rating-row">419 <div class="stars">420 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>421 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>422 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>423 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ff9900"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>424 <svg width="22" height="22" viewBox="0 0 24 24" fill="#ffcc66"><path d="M12 17.3l-6.2 3.7 1.8-7.1L2 9.8l7.3-.6L12 2l2.7 7.2 7.3.6-5.6 4.1 1.8 7.1z"/></svg>425 </div>426 <span class="muted">(112)</span>427 </div>428 <div class="price-row">429 <div class="price">₹4,299</div>430 <div class="muted">M.R.P.: <span class="strike">₹7,499</span></div>431 </div>432 <div class="coupon">Save with coupon</div>433 </div>434 </div>435 </div>436 437 <!-- Bottom Navigation -->438 <div class="bottom-nav">439 <div class="nav-item active">440 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>441 Home442 </div>443 <div class="nav-item">444 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z"/></svg>445 You446 </div>447 <div class="nav-item">448 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16v4H4zm0 6h16v4H4zm0 6h16v4H4z"/></svg>449 More450 </div>451 <div class="nav-item">452 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4h10l1 3H6l1-3zm-1 5h12l-1 10H7L6 9zm3 2v6h2v-6H9zm4 0v6h2v-6h-2z"/></svg>453 Cart454 </div>455 <div class="nav-item">456 <svg class="nav-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>457 Menu458 </div>459 </div>460 <div class="home-indicator"></div>461</div>462</body>463</html>