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>E-commerce Listing - Men's Big & Tall</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 color: #222;16 }17 18 /* Scrollable content area inside fixed canvas */19 .page {20 position: absolute;21 inset: 0;22 overflow-y: auto;23 -webkit-overflow-scrolling: touch;24 }25 26 /* Status bar */27 .status-bar {28 height: 90px;29 padding: 0 32px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #111;34 font-weight: 600;35 font-size: 34px;36 }37 .status-icons {38 display: flex;39 gap: 22px;40 align-items: center;41 }42 .ic-mini {43 width: 36px; height: 22px; border: 3px solid #111; border-radius: 4px; position: relative;44 }45 .ic-mini:after {46 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #111; border-radius: 1px;47 }48 .signal {49 display: inline-flex; gap: 3px; align-items: flex-end; height: 24px;50 }51 .signal span { width: 5px; background: #111; border-radius: 2px; display: inline-block; }52 .signal span:nth-child(1){ height: 8px; opacity: .6; }53 .signal span:nth-child(2){ height: 12px; opacity: .7; }54 .signal span:nth-child(3){ height: 16px; opacity: .85; }55 .signal span:nth-child(4){ height: 20px; }56 57 /* Top search section */58 .top {59 padding: 10px 28px 18px;60 }61 .search-row {62 display: grid;63 grid-template-columns: 80px 1fr;64 align-items: center;65 gap: 16px;66 margin-bottom: 18px;67 }68 .back-btn {69 width: 80px; height: 80px; border-radius: 50%;70 display: flex; align-items: center; justify-content: center;71 }72 .searchbar {73 height: 96px;74 background: #fff;75 border: 2px solid #E0E0E0;76 border-radius: 52px;77 display: grid;78 grid-template-columns: 1fr 96px 96px;79 align-items: center;80 padding: 0 10px 0 30px;81 box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;82 }83 .searchbar .placeholder {84 color: #666; font-size: 34px;85 }86 .icon-pill {87 width: 76px; height: 76px; border-radius: 38px;88 display: flex; align-items: center; justify-content: center;89 border: 2px solid #E0E0E0; background: #fff;90 }91 .icon-search {92 background: #000; border: none; color: #fff;93 }94 95 /* Category scroller */96 .cat-strip {97 padding: 10px 0 8px 18px;98 overflow-x: auto; white-space: nowrap;99 }100 .cat-item {101 width: 180px; display: inline-flex; flex-direction: column; align-items: center; margin: 0 10px;102 }103 .cat-img {104 width: 140px; height: 140px; border-radius: 50%;105 background: #E0E0E0; border: 1px solid #BDBDBD;106 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 8px;107 }108 .cat-label {109 margin-top: 12px; font-size: 26px; text-align: center; color: #444; line-height: 1.2;110 }111 112 /* Filter chips row */113 .chip-row-wrap {114 padding: 12px 18px;115 }116 .chip-row {117 display: flex; gap: 18px; flex-wrap: nowrap; overflow-x: auto;118 padding: 8px 8px;119 }120 .chip {121 display: inline-flex; align-items: center; gap: 10px;122 background: #F2F2F2; color: #333; border-radius: 36px; padding: 18px 26px; font-size: 28px; border: 1px solid #E6E6E6;123 white-space: nowrap;124 }125 .chip .down {126 margin-left: 4px; width: 18px; height: 18px; border: solid #555; border-width: 0 3px 3px 0; transform: rotate(45deg);127 display: inline-block;128 }129 130 /* Free shipping banner */131 .banner {132 margin: 8px 18px 16px; background: #FFEBD7; border-radius: 16px; border: 1px solid #F3C9A1;133 display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 22px 24px; font-size: 30px;134 }135 .banner .left { display: flex; align-items: center; gap: 14px; color: #2E7D32; font-weight: 700; }136 .timer { display: flex; gap: 8px; align-items: center; color: #333; }137 .timer .box {138 background: #000; color: #fff; padding: 8px 10px; border-radius: 8px; font-weight: 700; min-width: 54px; text-align: center;139 }140 .timer small { color: #555; margin-right: 10px; }141 142 /* Product grid */143 .grid {144 padding: 8px 18px 180px;145 display: grid;146 grid-template-columns: 1fr 1fr;147 gap: 18px;148 }149 .card {150 background: #fff; border: 1px solid #EAEAEA; border-radius: 18px; overflow: hidden;151 }152 .card-img {153 height: 720px; background: #E0E0E0; border-bottom: 1px solid #D8D8D8; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; position: relative;154 }155 .ribbon {156 position: absolute; left: 0; bottom: 0; width: 100%; display: flex; font-size: 26px; color: #fff;157 }158 .ribbon .blk { background: #111; padding: 12px 16px; }159 .ribbon .red { background: #E53935; padding: 12px 16px; flex: 1; text-align: right; }160 .info { padding: 18px 18px 22px; }161 .title { font-size: 30px; line-height: 1.2; color: #222; height: 74px; overflow: hidden; }162 .subline { margin-top: 8px; font-size: 26px; color: #E67E22; display: flex; gap: 12px; align-items: center; }163 .subline .muted { color: #999; }164 .stars { margin-top: 8px; display: flex; align-items: center; gap: 10px; color: #666; }165 .stars svg { width: 28px; height: 28px; }166 .price-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }167 .price { font-weight: 800; font-size: 36px; color: #111; }168 .sold { color: #888; font-size: 26px; }169 .cart-btn {170 width: 84px; height: 84px; border-radius: 42px; border: 2px solid #222; display: flex; align-items: center; justify-content: center;171 }172 173 /* Floating right promo badge */174 .float-badge {175 position: absolute; right: 24px; top: 1380px;176 background: #27C468; color: #fff; border-radius: 100px; padding: 12px 22px; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 14px rgba(0,0,0,0.15);177 font-size: 26px; border: 2px solid #1EAD59;178 }179 .float-badge .circle {180 width: 60px; height: 60px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;181 }182 .float-badge .circle svg { color: #27C468; }183 184 /* Bottom home indicator */185 .home-indicator {186 position: absolute; left: 50%; transform: translateX(-50%);187 bottom: 18px; width: 320px; height: 12px; background: #1a1a1a; border-radius: 12px; opacity: .2;188 }189</style>190</head>191<body>192<div id="render-target">193 <div class="page">194 <!-- Faux status bar -->195 <div class="status-bar">196 <div>1:11</div>197 <div class="status-icons">198 <div class="signal" aria-hidden="true"><span></span><span></span><span></span><span></span></div>199 <div class="ic-mini" title="Battery"></div>200 </div>201 </div>202 203 <!-- Search and category -->204 <div class="top">205 <div class="search-row">206 <div class="back-btn" aria-label="Back">207 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">208 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>209 </svg>210 </div>211 <div class="searchbar">212 <div class="placeholder">Men's Big & Tall</div>213 <div class="icon-pill" aria-label="Camera">214 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">215 <path d="M5 7h3l1-2h6l1 2h3a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2z" stroke="#111" stroke-width="2"/>216 <circle cx="12" cy="13" r="3.5" stroke="#111" stroke-width="2"/>217 </svg>218 </div>219 <div class="icon-pill icon-search" aria-label="Search">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">221 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>222 <path d="M16.5 16.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>223 </svg>224 </div>225 </div>226 </div>227 </div>228 229 <!-- Category quick row -->230 <div class="cat-strip">231 <div class="cat-item">232 <div class="cat-img">[IMG: Pants]</div>233 <div class="cat-label">Men's Plus Size Pants</div>234 </div>235 <div class="cat-item">236 <div class="cat-img">[IMG: Hoodie]</div>237 <div class="cat-label">Men's Plus Size Hoodies</div>238 </div>239 <div class="cat-item">240 <div class="cat-img">[IMG: Jacket]</div>241 <div class="cat-label">Men's Plus Size Tops</div>242 </div>243 <div class="cat-item">244 <div class="cat-img">[IMG: Tracksuit]</div>245 <div class="cat-label">Men's Plus Size Tracksuits</div>246 </div>247 <div class="cat-item">248 <div class="cat-img">[IMG: T-Shirt]</div>249 <div class="cat-label">Men's Plus Size T‑Shirts</div>250 </div>251 </div>252 253 <!-- Chips -->254 <div class="chip-row-wrap">255 <div class="chip-row">256 <div class="chip">257 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">258 <path d="M3 6h18M6 6v12a3 3 0 003 3h6a3 3 0 003-3V6" stroke="#555" stroke-width="2" stroke-linecap="round"/>259 </svg>260 Filters261 </div>262 <div class="chip">Sort by <span class="down"></span></div>263 <div class="chip">Category <span class="down"></span></div>264 <div class="chip">Size <span class="down"></span></div>265 <div class="chip">Color <span class="down"></span></div>266 </div>267 </div>268 269 <!-- Free shipping banner -->270 <div class="banner">271 <div class="left">272 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">273 <path d="M4 12l4 4 12-12" stroke="#2E7D32" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>274 </svg>275 Free shipping for you276 </div>277 <div class="timer">278 <small>Time left today</small>279 <div class="box">00</div>:280 <div class="box">18</div>:281 <div class="box">12</div>282 </div>283 </div>284 285 <!-- Products grid -->286 <div class="grid">287 <!-- Card 1 -->288 <div class="card">289 <div class="card-img">[IMG: Color-block Sweatsuit]290 <div class="ribbon">291 <div class="blk">Black Friday</div>292 <div class="red">50% off discount</div>293 </div>294 </div>295 <div class="info">296 <div class="title">Plus Size Men's "Simple" Print Sweatshirt & Pants Set</div>297 <div class="subline"><span>Only 6 Left</span></div>298 <div class="stars">299 <div>300 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>301 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>302 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>303 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>304 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>305 </div>306 <div>(5,850)</div>307 </div>308 <div class="price-row">309 <div>310 <div class="price">$23.79</div>311 <div class="sold">2.1K+ sold</div>312 </div>313 <div class="cart-btn" aria-label="Add to cart">314 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">315 <path d="M6 6h15l-2 8H8L6 3H3" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>316 <circle cx="9" cy="20" r="1.6" fill="#111"/><circle cx="18" cy="20" r="1.6" fill="#111"/>317 </svg>318 </div>319 </div>320 </div>321 </div>322 323 <!-- Card 2 -->324 <div class="card">325 <div class="card-img">[IMG: Brown Cargo Pants]326 <div class="ribbon">327 <div class="blk">Lightning Deal</div>328 <div class="red">Ends in 00:18:12</div>329 </div>330 </div>331 <div class="info">332 <div class="title">Plus Size Men's Drawstring Cargo Joggers</div>333 <div class="subline">334 <span>Almost sold out</span>335 <span class="muted">just bought</span>336 </div>337 <div class="stars">338 <div>339 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>340 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>341 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>342 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>343 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>344 </div>345 <div>(6,412)</div>346 </div>347 <div class="price-row">348 <div>349 <div class="price" style="color:#E67E22;">$17.47</div>350 <div class="sold">8.3K+ sold</div>351 </div>352 <div class="cart-btn" aria-label="Add to cart">353 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">354 <path d="M6 6h15l-2 8H8L6 3H3" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>355 <circle cx="9" cy="20" r="1.6" fill="#111"/><circle cx="18" cy="20" r="1.6" fill="#111"/>356 </svg>357 </div>358 </div>359 </div>360 </div>361 362 <!-- Card 3 -->363 <div class="card">364 <div class="card-img">[IMG: Plaid Patchwork Shirt]</div>365 <div class="info">366 <div class="title">Men's Plaid Patchwork Button Down Shirt</div>367 <div class="subline"><span>Free returns</span></div>368 <div class="stars">369 <div>370 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>371 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>372 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>373 <svg viewBox="0 0 24 24"><path fill="#111" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>374 <svg viewBox="0 0 24 24"><path fill="#bbb" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>375 </div>376 <div>(1,203)</div>377 </div>378 <div class="price-row">379 <div>380 <div class="price">$19.99</div>381 <div class="sold">1.4K+ sold</div>382 </div>383 <div class="cart-btn" aria-label="Add to cart">384 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">385 <path d="M6 6h15l-2 8H8L6 3H3" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>386 <circle cx="9" cy="20" r="1.6" fill="#111"/><circle cx="18" cy="20" r="1.6" fill="#111"/>387 </svg>388 </div>389 </div>390 </div>391 </div>392 393 <!-- Placeholder for symmetry -->394 <div class="card" style="display:flex; align-items:center; justify-content:center; color:#999; font-size:28px;">395 More items loading...396 </div>397 </div>398 399 <!-- Floating cart/free shipping badge -->400 <div class="float-badge">401 <div class="circle">402 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">403 <path d="M6 6h15l-2 8H8L6 3H3" stroke="#27C468" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>404 </svg>405 </div>406 Cart • Free Shipping407 </div>408 409 <!-- Home indicator -->410 <div class="home-indicator"></div>411 </div>412</div>413</body>414</html>