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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Top gradient header */19 .header-gradient {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 360px;25 background: linear-gradient(135deg, #87d9d6 0%, #b5e9c8 100%);26 }27 28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 10px;32 left: 24px;33 right: 24px;34 height: 44px;35 color: #1b1b1b;36 font-size: 28px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 opacity: 0.9;41 }42 .status-icons {43 display: flex; gap: 18px; align-items: center;44 }45 .dot { width: 8px; height: 8px; background:#1b1b1b; border-radius: 50%; opacity: .7; }46 .battery {47 width: 34px; height: 18px; border: 2px solid #1b1b1b; position: relative; border-radius: 3px;48 }49 .battery::after {50 content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background:#1b1b1b; border-radius:1px;51 }52 .battery .level { position:absolute; top:2px; left:2px; height:12px; width:22px; background:#1b1b1b; }53 54 /* Search header */55 .search-row {56 position: absolute;57 top: 70px;58 left: 20px;59 right: 20px;60 height: 80px;61 display: flex;62 align-items: center;63 gap: 20px;64 }65 .back-btn {66 width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center;67 background: rgba(255,255,255,0.95); box-shadow: 0 1px 0 rgba(0,0,0,0.06);68 }69 .search-box {70 flex: 1;71 height: 72px;72 background: #ffffff;73 border-radius: 36px;74 display: flex; align-items: center;75 padding: 0 26px;76 box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 1px 6px rgba(0,0,0,0.06) inset;77 border: 1px solid #e6e6e6;78 gap: 18px;79 }80 .search-box input {81 border: none; outline: none; font-size: 32px; flex: 1; color:#333;82 }83 .search-right {84 width: 48px; height: 48px; border-radius: 12px; background:#f2f2f2; display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0;85 }86 87 /* Location row */88 .location-row {89 position: absolute;90 top: 160px;91 left: 24px;92 right: 24px;93 display: flex; align-items: center; gap: 18px;94 color: #0f1111;95 font-size: 30px;96 }97 .location-row .sub { color:#0f1111; opacity:.85; }98 .location-row .arrow { transform: translateY(2px); }99 100 /* Chips */101 .chips {102 position: absolute;103 top: 220px;104 left: 20px;105 right: 20px;106 display: flex; gap: 18px; align-items: center;107 overflow: hidden;108 }109 .chip {110 padding: 14px 22px;111 border-radius: 26px;112 background: #ffffff;113 border: 1px solid #dfe7ea;114 color: #0f1111;115 font-size: 28px;116 white-space: nowrap;117 box-shadow: 0 1px 0 rgba(0,0,0,0.04);118 }119 .chip.filter {120 border-color: #dfe7ea;121 }122 123 .content {124 position: absolute;125 top: 300px;126 left: 0;127 right: 0;128 bottom: 180px; /* leave for bottom nav */129 overflow: hidden;130 }131 132 .info-text {133 padding: 10px 28px 0 28px;134 font-size: 26px;135 color: #6b6f73;136 }137 138 /* Product list */139 .list {140 padding: 16px 24px 200px 24px;141 overflow-y: auto;142 height: calc(100% - 40px);143 }144 145 .product-card {146 background: #ffffff;147 border-radius: 26px;148 border: 1px solid #ededed;149 box-shadow: 0 2px 0 rgba(0,0,0,0.03);150 padding: 24px;151 display: flex;152 gap: 26px;153 margin: 18px 0;154 }155 .prod-img {156 width: 330px; height: 230px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 border-radius: 18px;160 display:flex; align-items:center; justify-content:center;161 color:#757575; font-size: 26px; text-align:center; padding:10px;162 }163 .prod-info { flex: 1; min-width: 0; }164 .title {165 font-size: 32px; line-height: 1.25; color: #0f1111; max-height: 86px; overflow: hidden;166 }167 .rating {168 display: flex; align-items: center; gap: 10px; margin: 10px 0 6px 0; font-size: 28px; color:#0f1111;169 }170 .stars { color: #ff9900; display:flex; gap:3px; }171 .price-row { display:flex; align-items: baseline; gap: 18px; margin-top: 6px; flex-wrap: wrap; }172 .price { font-size: 40px; font-weight: 700; color:#0f1111; }173 .mrp { font-size: 26px; color:#6b6f73; }174 .emi { font-size: 26px; color:#6b6f73; margin-top: 4px; }175 .delivery { font-size: 26px; color:#0f1111; margin-top: 6px; }176 177 /* Bottom nav */178 .bottom-nav {179 position: absolute;180 left: 0; right: 0; bottom: 0;181 height: 160px;182 background: #ffffff;183 border-top: 1px solid #e6e6e6;184 display: flex;185 align-items: center;186 justify-content: space-around;187 }188 .nav-item { display:flex; flex-direction: column; align-items: center; gap: 8px; color:#444; font-size: 24px; }189 .nav-item.active { color: #10a3a6; }190 .active-indicator {191 position: absolute; top: -2px; left: 90px; width: 120px; height: 6px; background:#10a3a6; border-radius: 3px;192 }193 194 .gesture {195 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);196 width: 220px; height: 10px; background:#c9c9c9; border-radius: 8px;197 }198 199 /* Simple helper SVG styling */200 svg { display:block; }201</style>202</head>203<body>204<div id="render-target">205 206 <div class="header-gradient"></div>207 208 <!-- Status Bar -->209 <div class="status-bar">210 <div>1:06</div>211 <div class="status-icons">212 <div class="dot"></div>213 <div class="dot"></div>214 <div class="dot"></div>215 <svg width="28" height="20" viewBox="0 0 24 24"><path fill="#1b1b1b" d="M2 18h20L12 3 2 18z"/></svg>216 <svg width="26" height="22" viewBox="0 0 24 24"><path fill="#1b1b1b" d="M21 8a5 5 0 0 0-5-5H8a5 5 0 0 0-5 5v8a5 5 0 0 0 5 5h8a5 5 0 0 0 5-5V8z"/></svg>217 <svg width="26" height="22" viewBox="0 0 24 24"><path fill="#1b1b1b" d="M3 9l9-6 9 6v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z"/></svg>218 <div class="battery"><div class="level"></div></div>219 </div>220 </div>221 222 <!-- Search row -->223 <div class="search-row">224 <div class="back-btn">225 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#0f1111" d="M15.5 19l-7-7 7-7" stroke="#0f1111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>226 </div>227 <div class="search-box">228 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#6b6f73" d="M21 20l-5.2-5.2a7 7 0 1 0-1 1L20 21l1-1zM5 10a5 5 0 1 1 10 0A5 5 0 0 1 5 10z"/></svg>229 <input value="standing desk" />230 <div class="search-right">231 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#6b6f73" d="M4 4h5v2H6v3H4V4zm15 0v5h-2V6h-3V4h5zM4 15h2v3h3v2H4v-5zm15 0h2v5h-5v-2h3v-3z"/></svg>232 </div>233 </div>234 </div>235 236 <!-- Location row -->237 <div class="location-row">238 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#0f1111" 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 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>239 <span class="sub">Delivering to Delhi 110001 - Update location</span>240 <svg class="arrow" width="26" height="26" viewBox="0 0 24 24"><path fill="#0f1111" d="M7 10l5 5 5-5z"/></svg>241 </div>242 243 <!-- Chips -->244 <div class="chips">245 <div class="chip">EUREKA ERGO… <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left:8px;"><path fill="#6b6f73" d="M18 6L6 18M6 6l12 12" stroke="#6b6f73" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>246 <div class="chip">Lapdesks <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left:8px;"><path fill="#6b6f73" d="M18 6L6 18M6 6l12 12" stroke="#6b6f73" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>247 <div class="chip">Isom…</div>248 <div class="chip filter">Filters (2) <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left:6px;"><path fill="#0f1111" d="M3 5h18l-7 8v5l-4 3v-8L3 5z"/></svg></div>249 </div>250 251 <div class="content">252 <div class="info-text">Price and other details may vary based on product size and colour.</div>253 254 <div class="list">255 256 <!-- Product 1 -->257 <div class="product-card">258 <div class="prod-img">[IMG: L-shaped gaming standing desk]</div>259 <div class="prod-info">260 <div class="title">EUREKA ERGONOMIC Standing Desk L Shaped, 60 Inch Gaming Desk, Electric Height Adjustable...</div>261 <div class="rating">262 <span style="color:#1693c7;font-weight:600">4.6</span>263 <div class="stars">264 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>265 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>266 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>267 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>268 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>269 </div>270 <span style="color:#6b6f73">(194)</span>271 </div>272 <div class="price-row">273 <div class="price">₹42,999</div>274 <div class="mrp">M.R.P: <s>₹49,999</s> (14% off)</div>275 </div>276 <div class="emi">Save extra with No Cost EMI</div>277 <div class="delivery">Get it by <b>Saturday, 11 November</b></div>278 </div>279 </div>280 281 <!-- Product 2 -->282 <div class="product-card">283 <div class="prod-img">[IMG: 60" desk with monitor stand]</div>284 <div class="prod-info">285 <div class="title">EUREKA ERGONOMIC 60 Inch Computer Desk with Monitor Stand, Sturdy Curved Edge Home...</div>286 <div class="rating">287 <span style="color:#1693c7;font-weight:600">4.1</span>288 <div class="stars">289 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>290 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>291 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>292 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>293 </div>294 <span style="color:#6b6f73">(7)</span>295 </div>296 <div class="price-row">297 <div class="price">₹19,999</div>298 <div class="mrp">M.R.P: <s>₹25,000</s> (20% off)</div>299 </div>300 <div class="emi">Save extra with No Cost EMI</div>301 <div class="delivery">Get it by <b>Saturday, 11 November</b></div>302 </div>303 </div>304 305 <!-- Product 3 -->306 <div class="product-card">307 <div class="prod-img">[IMG: Wide black gaming desk]</div>308 <div class="prod-info">309 <div class="title">EUREKA ERGONOMIC Wood Multi-Functional L Shaped Study, Writing, Gaming Computer Righ...</div>310 <div class="rating">311 <span style="color:#1693c7;font-weight:600">4.7</span>312 <div class="stars">313 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>314 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>315 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>316 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>317 <svg width="22" height="22" viewBox="0 0 24 24"><path fill="#ff9900" d="M12 17.3l-6.2 3.6 1.7-7.1L2 8.9l7.2-.6L12 2l2.8 6.3 7.2.6-5.5 4.9 1.7 7.1z"/></svg>318 </div>319 <span style="color:#6b6f73">(144)</span>320 </div>321 <div class="price-row">322 <div class="price">₹18,999</div>323 <div class="mrp">M.R.P: <s>₹22,999</s> (17% off)</div>324 </div>325 <div class="emi">Save extra with No Cost EMI</div>326 <div class="delivery">Get it by <b>Saturday, 11 November</b></div>327 </div>328 </div>329 330 <!-- Video like block -->331 <div class="product-card" style="padding:0; overflow:hidden;">332 <div style="width:100%; height:300px; background:#E0E0E0; border-top-left-radius:26px; border-top-right-radius:26px; border:1px solid #BDBDBD; border-bottom:none; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;">[IMG: Video preview of standing desk setup]</div>333 </div>334 335 </div>336 </div>337 338 <!-- Bottom Navigation -->339 <div class="bottom-nav">340 <div class="active-indicator"></div>341 <div class="nav-item active">342 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#10a3a6" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>343 <div>Home</div>344 </div>345 <div class="nav-item">346 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#444" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-8 3-8 6v1h16v-1c0-3-3-6-8-6z"/></svg>347 <div>You</div>348 </div>349 <div class="nav-item">350 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#444" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>351 <div>More</div>352 </div>353 <div class="nav-item">354 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#444" d="M7 6h15l-2 9H8L7 6zM7 6l-1-3H3v3h4zM8 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>355 <div>Cart</div>356 </div>357 <div class="nav-item">358 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#444" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>359 <div>Menu</div>360 </div>361 <div class="gesture"></div>362 </div>363 364</div>365</body>366</html>