GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shopping List - Ergonomic Chair</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #222;25 font-size: 34px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 22px;31 color: #444;32 }33 .icon {34 width: 44px;35 height: 44px;36 }37 38 /* Search header */39 .search-row {40 padding: 10px 24px 14px 24px;41 display: flex;42 align-items: center;43 gap: 20px;44 }45 .back-btn {46 width: 64px;47 height: 64px;48 display: flex;49 align-items: center;50 justify-content: center;51 }52 .search-pill {53 flex: 1;54 height: 88px;55 background: #f2f3f5;56 border-radius: 44px;57 display: flex;58 align-items: center;59 padding: 0 26px;60 gap: 16px;61 }62 .search-text {63 display: flex;64 align-items: center;65 gap: 12px;66 background: #fff;67 border-radius: 38px;68 padding: 10px 18px;69 height: 64px;70 flex: 1;71 border: 1px solid #e2e2e2;72 }73 .search-text span.keyword {74 font-size: 34px;75 color: #222;76 white-space: nowrap;77 }78 .small-x {79 width: 34px;80 height: 34px;81 border-radius: 50%;82 background: #e9e9ea;83 color: #666;84 font-size: 26px;85 display: flex;86 align-items: center;87 justify-content: center;88 }89 .grid-btn {90 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;91 }92 93 /* Filter tabs */94 .tabs {95 display: flex;96 padding: 8px 24px 6px 24px;97 gap: 38px;98 align-items: center;99 font-size: 34px;100 }101 .tab {102 color: #ff5a34;103 font-weight: 700;104 }105 .tab.gray {106 color: #111;107 font-weight: 600;108 }109 .tab .caret {110 margin-left: 8px;111 vertical-align: middle;112 }113 .tab.filter {114 margin-left: auto;115 display: flex;116 align-items: center;117 gap: 12px;118 }119 120 /* Info strip */121 .info-strip {122 margin: 16px 0;123 background: #e8f7ea;124 color: #0a8f2f;125 margin-left: 24px;126 margin-right: 24px;127 border-radius: 14px;128 padding: 18px 20px;129 font-size: 32px;130 display: flex;131 align-items: center;132 gap: 16px;133 border: 1px solid #cde8d3;134 }135 .info-strip b { color: #1aa33a; }136 137 /* Product list */138 .list {139 padding: 0 24px 24px 24px;140 }141 .card {142 background: #fff;143 border-radius: 18px;144 border: 1px solid #ececec;145 box-shadow: 0 2px 6px rgba(0,0,0,0.04);146 padding: 22px;147 margin-bottom: 28px;148 position: relative;149 }150 .row {151 display: flex;152 gap: 22px;153 }154 .prod-img {155 width: 240px;156 height: 260px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 border-radius: 12px;160 display: flex;161 align-items: center;162 justify-content: center;163 color: #757575;164 font-size: 24px;165 text-align: center;166 padding: 8px;167 }168 .content {169 flex: 1;170 }171 .title {172 font-size: 36px;173 line-height: 44px;174 font-weight: 800;175 color: #222;176 margin-bottom: 10px;177 }178 .stars {179 display: flex;180 align-items: center;181 gap: 8px;182 margin: 8px 0 12px;183 }184 .stars svg {185 width: 28px; height: 28px;186 }187 .rating-number {188 font-size: 32px; color: #333; margin-left: 8px;189 }190 .rating-count {191 font-size: 28px; color: #777; margin-left: 6px;192 }193 194 .badge-row {195 display: flex;196 gap: 14px;197 margin: 10px 0;198 flex-wrap: wrap;199 }200 .badge {201 font-size: 26px;202 padding: 8px 14px;203 border-radius: 10px;204 background: #ffe9e9;205 color: #d13232;206 border: 1px solid #ffb1b1;207 font-weight: 700;208 }209 .badge.green {210 background: #e7fff0; color: #0a8f2f; border-color: #bfe8cc;211 }212 213 .prices {214 display: flex;215 align-items: baseline;216 gap: 20px;217 padding-right: 120px;218 }219 .old {220 font-size: 30px;221 color: #999;222 text-decoration: line-through;223 margin-top: 6px;224 }225 .price {226 font-size: 54px;227 color: #0b1b35;228 font-weight: 900;229 margin-top: 8px;230 }231 232 .circle-plus {233 position: absolute;234 right: 28px;235 bottom: 28px;236 width: 84px;237 height: 84px;238 border-radius: 50%;239 background: #0b1b35;240 display: flex;241 align-items: center;242 justify-content: center;243 }244 .circle-plus svg { width: 44px; height: 44px; fill: #fff; }245 246 /* Bottom safe area indicator */247 .home-indicator {248 position: absolute;249 bottom: 18px; left: 50%;250 width: 420px; height: 10px;251 border-radius: 8px;252 background: #000;253 opacity: 0.25;254 transform: translateX(-50%);255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status Bar -->262 <div class="status-bar">263 <div class="status-left">11:16</div>264 <div class="status-right">265 <span>$3</span>266 <svg class="icon" viewBox="0 0 24 24">267 <path d="M3 12a9 9 0 0 1 9-9v2a7 7 0 0 0-7 7H3zm4 0a5 5 0 0 1 5-5v2a3 3 0 0 0-3 3H7zm6-1h8v2h-8v-2z" fill="#444"/>268 </svg>269 <svg class="icon" viewBox="0 0 24 24">270 <path d="M7 20h10a2 2 0 0 0 2-2V9H5v9a2 2 0 0 0 2 2zm10-13V5a4 4 0 0 0-8 0v2h8z" fill="#444"/>271 </svg>272 </div>273 </div>274 275 <!-- Search Row -->276 <div class="search-row">277 <div class="back-btn">278 <svg class="icon" viewBox="0 0 24 24">279 <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z" fill="#222"/>280 </svg>281 </div>282 <div class="search-pill">283 <svg class="icon" viewBox="0 0 24 24">284 <path d="M10 18a8 8 0 1 1 5.3-14L22 10.7 20.6 12 14 5.4A6 6 0 1 0 10 18z" fill="#777"/>285 </svg>286 <div class="search-text">287 <span class="keyword">Ergonomic Chair</span>288 <div class="small-x">×</div>289 </div>290 </div>291 <div class="grid-btn">292 <svg class="icon" viewBox="0 0 24 24">293 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#333"/>294 </svg>295 </div>296 </div>297 298 <!-- Tabs -->299 <div class="tabs">300 <div class="tab">Relevance</div>301 <div class="tab gray">Bestsellers302 <svg class="caret" width="24" height="24" viewBox="0 0 24 24">303 <path d="M7 9l5 5 5-5H7z" fill="#666"/>304 </svg>305 </div>306 <div class="tab gray">Price307 <svg class="caret" width="24" height="24" viewBox="0 0 24 24">308 <path d="M7 10l5 5 5-5H7z" fill="#666"/>309 </svg>310 </div>311 <div class="tab filter">312 <svg width="30" height="30" viewBox="0 0 24 24">313 <path d="M3 5h18l-7 8v6l-4-2v-4L3 5z" fill="#111"/>314 </svg>315 Filter316 </div>317 </div>318 319 <!-- Info strip -->320 <div class="info-strip">321 <svg width="34" height="34" viewBox="0 0 24 24">322 <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="#1aa33a"/>323 </svg>324 Order before <b>23:59</b>, pick up earliest the next day <b>for free</b>325 </div>326 327 <!-- List -->328 <div class="list">329 330 <!-- Card 1 -->331 <div class="card">332 <div class="row">333 <div class="prod-img">[IMG: Black Office Chair]</div>334 <div class="content">335 <div class="title">SONGMICS Computer Chair Office Chair Ergonomic Home Chair with ...</div>336 <div class="stars">337 <!-- 4.5 stars -->338 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>339 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>340 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>341 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>342 <svg viewBox="0 0 24 24"><defs><linearGradient id="half"><stop offset="50%" stop-color="#F8C12B"/><stop offset="50%" stop-color="#ddd"/></linearGradient></defs><path fill="url(#half)" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>343 <span class="rating-number">4.5</span>344 <span class="rating-count">(8)</span>345 </div>346 <div class="badge-row">347 <div class="badge">Spend and Save</div>348 <div class="badge">€50.00 off</div>349 </div>350 <div class="prices">351 <div class="old">€129.99</div>352 <div class="price">€79.99</div>353 </div>354 </div>355 </div>356 <div class="circle-plus">357 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>358 </div>359 </div>360 361 <!-- Card 2 -->362 <div class="card">363 <div class="row">364 <div class="prod-img">[IMG: Electric Standing Desk - Wood Top]</div>365 <div class="content">366 <div class="title">【Free Gift Ergonomic Office Chair】 Electric Height Adjustable ...</div>367 <div class="stars">368 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>369 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>370 <svg viewBox="0 0 24 24"><path fill="#ddd" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>371 <span class="rating-number">2.7</span>372 <span class="rating-count">(3)</span>373 </div>374 <div class="badge-row">375 <div class="badge">Spend and Save</div>376 <div class="badge green">Free gift</div>377 <div class="badge">€90.00 off</div>378 </div>379 <div class="prices">380 <div class="old">€349.99</div>381 <div class="price">€259.99</div>382 </div>383 </div>384 </div>385 <div class="circle-plus">386 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>387 </div>388 </div>389 390 <!-- Card 3 -->391 <div class="card">392 <div class="row">393 <div class="prod-img">[IMG: Electric Standing Desk - White]</div>394 <div class="content">395 <div class="title">【Free Gift Ergonomic Office Chair】 Electric Height Adjustable ...</div>396 <div class="stars">397 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>398 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>399 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>400 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>401 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>402 <span class="rating-number">5.0</span>403 <span class="rating-count">(3)</span>404 </div>405 <div class="badge-row">406 <div class="badge">Spend and Save</div>407 <div class="badge green">Free gift</div>408 <div class="badge">€90.00 off</div>409 </div>410 <div class="prices">411 <div class="old">€349.99</div>412 <div class="price">€259.99</div>413 </div>414 </div>415 </div>416 <div class="circle-plus">417 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>418 </div>419 </div>420 421 <!-- Card 4 -->422 <div class="card">423 <div class="row">424 <div class="prod-img">[IMG: Compact Mesh Office Chair]</div>425 <div class="content">426 <div class="title">SONGMICS Ergonomic Office Chair with Adjustable Lumbar Support &...</div>427 <div class="stars">428 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>429 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>430 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>431 <svg viewBox="0 0 24 24"><path fill="#F8C12B" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>432 <svg viewBox="0 0 24 24"><defs><linearGradient id="half2"><stop offset="60%" stop-color="#F8C12B"/><stop offset="60%" stop-color="#ddd"/></linearGradient></defs><path fill="url(#half2)" d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6 3 6 7 1-5 4.8 1.2 6.9z"/></svg>433 <span class="rating-number">4.6</span>434 <span class="rating-count">(5)</span>435 </div>436 <div class="badge-row">437 <div class="badge">Spend and Save</div>438 <div class="badge">€23.00 off</div>439 </div>440 <div class="prices">441 <div class="old">€79.99</div>442 <div class="price">€56.99</div>443 </div>444 </div>445 </div>446 <div class="circle-plus">447 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>448 </div>449 </div>450 451 </div>452 453 <div class="home-indicator"></div>454</div>455</body>456</html>