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>Product List - Man's Shirt</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .statusbar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 120px;26 background: #8b8b8b;27 color: #fff;28 display: flex;29 align-items: center;30 padding: 0 40px;31 box-sizing: border-box;32 font-size: 36px;33 }34 .statusbar .time { letter-spacing: 1px; }35 .statusbar .right-icons {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .statusbar svg { width: 42px; height: 42px; fill: #fff; }42 43 /* App bar */44 .appbar {45 position: absolute;46 top: 120px;47 left: 0;48 width: 100%;49 height: 128px;50 background: #fff;51 border-bottom: 1px solid #e7e7e7;52 display: flex;53 align-items: center;54 padding: 0 24px;55 box-sizing: border-box;56 }57 .nav-btn {58 width: 120px;59 height: 100%;60 display: flex;61 align-items: center;62 justify-content: center;63 }64 .title {65 font-size: 44px;66 font-weight: 700;67 }68 .spacer { flex: 1; }69 .actions {70 display: flex;71 align-items: center;72 gap: 30px;73 padding-right: 12px;74 }75 .actions svg { width: 48px; height: 48px; stroke: #111; }76 77 /* Content */78 .content {79 position: absolute;80 top: 248px;81 left: 0;82 right: 0;83 bottom: 0;84 overflow: hidden;85 }86 .scroll {87 height: 100%;88 overflow-y: auto;89 box-sizing: border-box;90 padding-bottom: 120px;91 }92 .section {93 padding: 32px 36px 0 36px;94 }95 96 /* Filters header */97 .filters-header {98 display: flex;99 align-items: center;100 margin-top: 8px;101 }102 .filters-title {103 font-size: 40px;104 font-weight: 800;105 color: #222;106 }107 .filters-link {108 margin-left: auto;109 font-size: 36px;110 color: #6f49ff;111 font-weight: 700;112 }113 114 /* Filter chips */115 .chips {116 display: flex;117 gap: 22px;118 flex-wrap: nowrap;119 overflow: hidden;120 padding-top: 22px;121 padding-bottom: 10px;122 }123 .chip {124 padding: 18px 28px;125 border: 2px solid #cfcfcf;126 border-radius: 10px;127 font-size: 34px;128 color: #333;129 background: #fff;130 }131 132 /* Showing count */133 .count-row {134 display: flex;135 align-items: center;136 gap: 14px;137 color: #555;138 font-size: 34px;139 padding: 28px 0 10px 0;140 }141 .info-dot {142 width: 44px;143 height: 44px;144 border-radius: 50%;145 border: 2px solid #bdbdbd;146 color: #777;147 display: flex;148 align-items: center;149 justify-content: center;150 font-weight: 700;151 font-size: 30px;152 }153 154 /* Product grid */155 .grid {156 display: grid;157 grid-template-columns: 1fr 1fr;158 gap: 36px;159 padding-top: 10px;160 }161 .card {162 background: #fff;163 }164 .img {165 width: 100%;166 height: 640px;167 background: #E0E0E0;168 border: 1px solid #BDBDBD;169 display: flex;170 align-items: center;171 justify-content: center;172 color: #757575;173 font-size: 34px;174 position: relative;175 }176 .fav-badge {177 position: absolute;178 top: 22px;179 right: 22px;180 width: 110px;181 height: 110px;182 background: #fff;183 border-radius: 6px;184 box-shadow: 0 2px 6px rgba(0,0,0,0.15);185 display: flex;186 align-items: center;187 justify-content: center;188 }189 .deal-badge {190 position: absolute;191 left: 18px;192 bottom: 18px;193 background: #e53935;194 color: #fff;195 font-weight: 800;196 font-size: 34px;197 padding: 6px 16px;198 border-radius: 6px;199 }200 201 .meta {202 padding-top: 18px;203 }204 .sponsored {205 color: #888;206 font-size: 30px;207 display: flex;208 align-items: center;209 gap: 10px;210 padding-bottom: 6px;211 }212 .brand {213 font-size: 36px;214 font-weight: 700;215 color: #222;216 line-height: 1.2;217 padding-top: 6px;218 }219 .title-line {220 font-size: 34px;221 color: #333;222 line-height: 1.25;223 padding: 4px 0 10px 0;224 }225 .price {226 font-size: 40px;227 font-weight: 700;228 color: #111;229 padding: 6px 0 8px 0;230 }231 .price.red { color: #e53935; }232 .strike {233 font-size: 32px;234 color: #8b8b8b;235 text-decoration: line-through;236 margin-right: 10px;237 }238 .discount {239 font-size: 32px;240 color: #e53935;241 font-weight: 700;242 }243 .delivery {244 display: flex;245 align-items: center;246 gap: 14px;247 font-size: 32px;248 color: #444;249 padding-top: 12px;250 }251 .pill {252 background: #111;253 color: #fff;254 padding: 6px 16px;255 border-radius: 14px;256 font-weight: 800;257 font-size: 28px;258 letter-spacing: .5px;259 }260 261 /* Bottom gesture bar */262 .home-indicator {263 position: absolute;264 bottom: 26px;265 left: 50%;266 transform: translateX(-50%);267 width: 420px;268 height: 18px;269 background: #000;270 border-radius: 12px;271 opacity: 0.9;272 }273 274 /* SVG icon defaults */275 .icon-stroke { fill: none; stroke: #111; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }276 .icon-heart { fill: none; stroke: #000; stroke-width: 3; }277</style>278</head>279<body>280<div id="render-target">281 <!-- Status bar -->282 <div class="statusbar">283 <div class="time">11:38</div>284 <div class="right-icons">285 <!-- WiFi -->286 <svg viewBox="0 0 24 24" aria-hidden="true">287 <path d="M12 18.5l2 2-2 2-2-2 2-2zM3 9c5.9-5 12.1-5 18 0l-2 2c-4.9-4.2-9.1-4.2-14 0L3 9zm4 4c3.6-3 7.4-3 11 0l-2 2c-2.6-2.2-4.4-2.2-7 0l-2-2z" fill="#fff"/>288 </svg>289 <!-- Battery -->290 <svg viewBox="0 0 24 24" aria-hidden="true">291 <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>292 <rect x="3" y="8" width="14" height="8" fill="#fff"/>293 <rect x="19" y="10" width="3" height="8" fill="#fff"/>294 </svg>295 </div>296 </div>297 298 <!-- App bar -->299 <div class="appbar">300 <div class="nav-btn" aria-label="Back">301 <svg viewBox="0 0 24 24">302 <path class="icon-stroke" d="M15 19l-7-7 7-7"/>303 </svg>304 </div>305 <div class="title">man's shirt</div>306 <div class="spacer"></div>307 <div class="actions">308 <!-- Search -->309 <svg viewBox="0 0 24 24">310 <circle cx="11" cy="11" r="7" class="icon-stroke"></circle>311 <path d="M20 20l-3.5-3.5" class="icon-stroke"></path>312 </svg>313 <!-- Heart -->314 <svg viewBox="0 0 24 24">315 <path class="icon-heart" d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"/>316 </svg>317 <!-- Bag -->318 <svg viewBox="0 0 24 24">319 <path class="icon-stroke" d="M6 8h12l-1 12H7L6 8zM9 8V6a3 3 0 0 1 6 0v2"/>320 </svg>321 </div>322 </div>323 324 <!-- Content -->325 <div class="content">326 <div class="scroll">327 <div class="section">328 <div class="filters-header">329 <div class="filters-title">Top filters</div>330 <div class="filters-link">Filters</div>331 </div>332 333 <div class="chips">334 <div class="chip">Size</div>335 <div class="chip">Brand</div>336 <div class="chip">Colour</div>337 <div class="chip">Sustainability</div>338 <div class="chip">Price</div>339 </div>340 341 <div class="count-row">342 <div>Showing 41.301 items</div>343 <div class="info-dot">i</div>344 </div>345 346 <div class="grid">347 <!-- Card 1 -->348 <div class="card">349 <div class="img">[IMG: Model wearing plaid shirt]350 <div class="fav-badge">351 <svg viewBox="0 0 24 24" width="56" height="56">352 <path class="icon-heart" d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"/>353 </svg>354 </div>355 </div>356 <div class="meta">357 <div class="sponsored">358 <span>Sponsored</span>359 <div class="info-dot" style="width:36px;height:36px;font-size:24px;">i</div>360 </div>361 <div class="brand">Lee</div>362 <div class="title-line">BUTTON DOWN - Shirt - ...</div>363 <div class="price">64,95 €</div>364 <div class="delivery">365 <span class="pill">PLUS</span>366 <span>Premium Delivery</span>367 </div>368 </div>369 </div>370 371 <!-- Card 2 -->372 <div class="card">373 <div class="img">[IMG: Olive green button-down shirt]374 <div class="fav-badge">375 <svg viewBox="0 0 24 24" width="56" height="56">376 <path class="icon-heart" d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"/>377 </svg>378 </div>379 <div class="deal-badge">Deal</div>380 </div>381 <div class="meta">382 <div class="sponsored">383 <span>Sponsored</span>384 <div class="info-dot" style="width:36px;height:36px;font-size:24px;">i</div>385 </div>386 <div class="brand">Williot</div>387 <div class="title-line">REGULAR FIT - Shirt - ...</div>388 <div class="price red">47,99 €</div>389 <div style="font-size: 32px; color: #666;">390 Originally: <span class="strike">59,95 €</span>391 <span class="discount">-20%</span>392 </div>393 <div class="delivery">394 <span class="pill">PLUS</span>395 <span>Premium Delivery</span>396 </div>397 </div>398 </div>399 400 <!-- Card 3 -->401 <div class="card">402 <div class="img">[IMG: Navy long sleeve shirt]403 <div class="fav-badge">404 <svg viewBox="0 0 24 24" width="56" height="56">405 <path class="icon-heart" d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"/>406 </svg>407 </div>408 </div>409 <div class="meta">410 <div class="sponsored">411 <span>Sponsored</span>412 <div class="info-dot" style="width:36px;height:36px;font-size:24px;">i</div>413 </div>414 <div class="brand">Brandname</div>415 <div class="title-line">Classic Shirt - navy</div>416 <div class="price">69,95 €</div>417 <div class="delivery">418 <span class="pill">PLUS</span>419 <span>Premium Delivery</span>420 </div>421 </div>422 </div>423 424 <!-- Card 4 -->425 <div class="card">426 <div class="img">[IMG: Model wearing sage green shirt]427 <div class="fav-badge">428 <svg viewBox="0 0 24 24" width="56" height="56">429 <path class="icon-heart" d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.7-7 10-7 10z"/>430 </svg>431 </div>432 </div>433 <div class="meta">434 <div class="sponsored">435 <span>Sponsored</span>436 <div class="info-dot" style="width:36px;height:36px;font-size:24px;">i</div>437 </div>438 <div class="brand">Another</div>439 <div class="title-line">Oxford Shirt - green</div>440 <div class="price">54,99 €</div>441 <div class="delivery">442 <span class="pill">PLUS</span>443 <span>Premium Delivery</span>444 </div>445 </div>446 </div>447 </div>448 </div>449 </div>450 </div>451 452 <!-- Bottom gesture bar -->453 <div class="home-indicator"></div>454</div>455</body>456</html>