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>Shopping Filters - Colour</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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 140px;24 background: #2A2525;25 color: #ffffff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 font-weight: 600;31 font-size: 40px;32 letter-spacing: 0.5px;33 }34 .sb-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .sb-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 140px;46 left: 0;47 width: 1080px;48 height: 160px;49 background: #ffffff;50 border-bottom: 1px solid #E5E5E5;51 display: flex;52 align-items: center;53 padding: 0 36px;54 box-sizing: border-box;55 }56 .app-left {57 display: flex;58 align-items: center;59 gap: 28px;60 }61 .title {62 font-size: 48px;63 font-weight: 600;64 color: #222;65 }66 .actions {67 margin-left: auto;68 display: flex;69 align-items: center;70 gap: 42px;71 }72 .icon svg { width: 50px; height: 50px; stroke: #222; stroke-width: 6; fill: none; }73 74 /* Content area (behind sheet) */75 .content {76 position: absolute;77 top: 300px;78 left: 0;79 width: 1080px;80 height: 1440px;81 background: #F5F5F5;82 }83 .filters-top {84 padding: 40px 36px 24px 36px;85 box-sizing: border-box;86 }87 .filters-link {88 position: absolute;89 right: 36px;90 top: 330px;91 color: #6F2BD8;92 font-weight: 700;93 font-size: 40px;94 }95 .top-filters-title {96 font-size: 44px;97 font-weight: 700;98 color: #222;99 margin-bottom: 24px;100 }101 .chip-row {102 display: flex;103 flex-wrap: wrap;104 gap: 24px;105 margin-bottom: 28px;106 }107 .chip {108 padding: 18px 28px;109 border: 2px solid #3A3A3A;110 background: #fff;111 border-radius: 12px;112 font-size: 40px;113 color: #222;114 }115 .count-line {116 display: flex;117 align-items: center;118 gap: 18px;119 color: #555;120 font-size: 36px;121 }122 .count-line .info-icon {123 width: 46px;124 height: 46px;125 border: 2px solid #777;126 border-radius: 50%;127 display: inline-flex;128 align-items: center;129 justify-content: center;130 font-weight: 700;131 color: #777;132 font-size: 28px;133 }134 .product-grid {135 display: grid;136 grid-template-columns: 1fr 1fr;137 gap: 24px;138 padding: 24px 36px;139 }140 .product-card {141 position: relative;142 height: 360px;143 border-radius: 12px;144 overflow: hidden;145 }146 .img-ph {147 width: 100%;148 height: 100%;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 display: flex;152 align-items: center;153 justify-content: center;154 color: #757575;155 font-size: 36px;156 }157 .card-heart {158 position: absolute;159 right: 16px;160 top: 16px;161 width: 60px;162 height: 60px;163 background: #fff;164 border-radius: 50%;165 box-shadow: 0 2px 6px rgba(0,0,0,0.2);166 display: flex;167 align-items: center;168 justify-content: center;169 }170 .card-heart svg { width: 34px; height: 34px; stroke: #222; stroke-width: 5; fill: none; }171 172 /* Bottom sheet */173 .bottom-sheet {174 position: absolute;175 left: 0;176 bottom: 140px;177 width: 1080px;178 height: 1460px;179 background: #ffffff;180 border-top-left-radius: 18px;181 border-top-right-radius: 18px;182 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);183 border-top: 1px solid #E5E5E5;184 }185 .handle {186 position: absolute;187 top: -18px;188 left: 50%;189 transform: translateX(-50%);190 width: 80px;191 height: 36px;192 background: linear-gradient(#EDEDED, #D9D9D9);193 border-radius: 8px;194 box-shadow: 0 4px 6px rgba(0,0,0,0.15);195 }196 .sheet-header {197 display: flex;198 align-items: center;199 justify-content: space-between;200 padding: 28px 36px;201 border-bottom: 1px solid #E5E5E5;202 }203 .sheet-title {204 font-size: 48px;205 font-weight: 700;206 color: #222;207 }208 .reset {209 font-size: 44px;210 font-weight: 700;211 color: #6F2BD8;212 }213 214 .color-grid {215 padding: 24px 36px 0 36px;216 display: grid;217 grid-template-columns: repeat(3, 1fr);218 gap: 30px;219 }220 .color-box {221 display: grid;222 grid-template-columns: 42% 58%;223 align-items: center;224 border: 2px solid #222;225 height: 160px;226 border-radius: 8px;227 overflow: hidden;228 background: #fff;229 }230 .swatch { height: 100%; }231 .label {232 padding-left: 24px;233 font-size: 42px;234 color: #222;235 font-weight: 600;236 }237 238 /* Color swatch presets */239 .black { background: #000; }240 .brown { background: #6B3F1F; }241 .beige { background: #D8C79D; }242 .grey { background: #7A7A7A; }243 .white { background: #FFFFFF; box-shadow: inset 0 0 0 1px #D0D0D0; }244 .blue { background: #2F72B8; }245 .petrol { background: #2E6A83; }246 .turquoise { background: #67D1CF; }247 .green { background: #76D679; }248 .olive { background: #6A8E34; }249 .yellow { background: #F2D34C; }250 .orange { background: #F68A42; }251 .red { background: #E33D2E; }252 .pink { background: #E368A6; }253 .lilac { background: #8756C7; }254 .gold { background: #E8C86A; }255 .silver { background: #BFBFBF; }256 257 /* Multi-coloured swatch */258 .multi-swatch {259 display: grid;260 grid-template-columns: 1fr 1fr;261 grid-template-rows: 1fr 1fr;262 height: 100%;263 }264 .m1 { background: #F2D34C; }265 .m2 { background: #73D579; }266 .m3 { background: #5EA5D9; }267 .m4 { background: #E368A6; }268 269 .sheet-footer {270 position: absolute;271 left: 0;272 bottom: 24px;273 width: 100%;274 padding: 0 36px;275 box-sizing: border-box;276 }277 .cta {278 width: 100%;279 height: 120px;280 border: 3px solid #222;281 border-radius: 16px;282 background: #fff;283 font-size: 44px;284 font-weight: 800;285 color: #222;286 display: flex;287 align-items: center;288 justify-content: center;289 }290 291 /* Home indicator area */292 .home-indicator {293 position: absolute;294 left: 0;295 bottom: 0;296 width: 1080px;297 height: 140px;298 background: #000000;299 display: flex;300 align-items: center;301 justify-content: center;302 }303 .home-indicator .bar {304 width: 240px;305 height: 12px;306 background: #ffffff;307 border-radius: 12px;308 opacity: 0.85;309 }310</style>311</head>312<body>313<div id="render-target">314 <!-- Status Bar -->315 <div class="status-bar">316 <div>11:38</div>317 <div class="sb-right">318 <div class="sb-icon">319 <!-- Wi-Fi Icon -->320 <svg viewBox="0 0 24 24">321 <path d="M2 8c5.5-5.3 14.5-5.3 20 0M5 11c4-3.8 10-3.8 14 0M8 14c2.5-2.4 6.5-2.4 9 0"/>322 <circle cx="12" cy="18" r="2" fill="#fff" stroke="none"></circle>323 </svg>324 </div>325 <div class="sb-icon">326 <!-- Battery Icon -->327 <svg viewBox="0 0 28 16">328 <rect x="1" y="2" width="22" height="12" rx="2"></rect>329 <rect x="24" y="6" width="3" height="4" rx="1"></rect>330 <rect x="3" y="4" width="16" height="8" fill="#fff" stroke="none"></rect>331 </svg>332 </div>333 </div>334 </div>335 336 <!-- App Bar -->337 <div class="app-bar">338 <div class="app-left">339 <div class="icon">340 <!-- Back Arrow -->341 <svg viewBox="0 0 24 24"><path d="M15 4L6 12l9 8"/></svg>342 </div>343 <div class="title">man's shirt</div>344 </div>345 <div class="actions">346 <div class="icon">347 <!-- Search -->348 <svg viewBox="0 0 24 24">349 <circle cx="10" cy="10" r="6"></circle>350 <path d="M15 15l6 6"></path>351 </svg>352 </div>353 <div class="icon">354 <!-- Heart -->355 <svg viewBox="0 0 24 24">356 <path d="M12 21s-8-5.2-8-11a5 5 0 019-3 5 5 0 019 3c0 5.8-8 11-8 11"></path>357 </svg>358 </div>359 <div class="icon">360 <!-- Bag -->361 <svg viewBox="0 0 24 24">362 <path d="M5 8h14l-1 12H6L5 8z"></path>363 <path d="M9 8V6a3 3 0 016 0v2"></path>364 </svg>365 </div>366 </div>367 </div>368 369 <!-- Content -->370 <div class="content">371 <div class="filters-link">Filters</div>372 <div class="filters-top">373 <div class="top-filters-title">Top filters</div>374 <div class="chip-row">375 <div class="chip">Size</div>376 <div class="chip">Brand</div>377 <div class="chip">Colour</div>378 <div class="chip">Sustainability</div>379 <div class="chip">Price</div>380 </div>381 <div class="count-line">382 <div>Showing 41.301 items</div>383 <div class="info-icon">i</div>384 </div>385 </div>386 387 <div class="product-grid">388 <div class="product-card">389 <div class="img-ph">[IMG: Product]</div>390 <div class="card-heart">391 <svg viewBox="0 0 24 24">392 <path d="M12 21s-8-5.2-8-11a5 5 0 019-3 5 5 0 019 3c0 5.8-8 11-8 11"></path>393 </svg>394 </div>395 </div>396 <div class="product-card">397 <div class="img-ph">[IMG: Product]</div>398 <div class="card-heart">399 <svg viewBox="0 0 24 24">400 <path d="M12 21s-8-5.2-8-11a5 5 0 019-3 5 5 0 019 3c0 5.8-8 11-8 11"></path>401 </svg>402 </div>403 </div>404 </div>405 </div>406 407 <!-- Bottom Sheet -->408 <div class="bottom-sheet">409 <div class="handle"></div>410 <div class="sheet-header">411 <div class="sheet-title">Colour</div>412 <div class="reset">Reset</div>413 </div>414 415 <div class="color-grid">416 <div class="color-box">417 <div class="swatch black"></div><div class="label">Black</div>418 </div>419 <div class="color-box">420 <div class="swatch brown"></div><div class="label">Brown</div>421 </div>422 <div class="color-box">423 <div class="swatch beige"></div><div class="label">Beige</div>424 </div>425 426 <div class="color-box">427 <div class="swatch grey"></div><div class="label">Grey</div>428 </div>429 <div class="color-box">430 <div class="swatch white"></div><div class="label">White</div>431 </div>432 <div class="color-box">433 <div class="swatch blue"></div><div class="label">Blue</div>434 </div>435 436 <div class="color-box">437 <div class="swatch petrol"></div><div class="label">Petrol</div>438 </div>439 <div class="color-box">440 <div class="swatch turquoise"></div><div class="label">Turquoise</div>441 </div>442 <div class="color-box">443 <div class="swatch green"></div><div class="label">Green</div>444 </div>445 446 <div class="color-box">447 <div class="swatch olive"></div><div class="label">Olive</div>448 </div>449 <div class="color-box">450 <div class="swatch yellow"></div><div class="label">Yellow</div>451 </div>452 <div class="color-box">453 <div class="swatch orange"></div><div class="label">Orange</div>454 </div>455 456 <div class="color-box">457 <div class="swatch red"></div><div class="label">Red</div>458 </div>459 <div class="color-box">460 <div class="swatch pink"></div><div class="label">Pink</div>461 </div>462 <div class="color-box">463 <div class="swatch lilac"></div><div class="label">Lilac</div>464 </div>465 466 <div class="color-box">467 <div class="swatch gold"></div><div class="label">Gold</div>468 </div>469 <div class="color-box">470 <div class="swatch silver"></div><div class="label">Silver</div>471 </div>472 <div class="color-box">473 <div class="multi-swatch">474 <div class="m1"></div><div class="m2"></div>475 <div class="m3"></div><div class="m4"></div>476 </div>477 <div class="label">Multi-coloured</div>478 </div>479 </div>480 481 <div class="sheet-footer">482 <div class="cta">Show all results</div>483 </div>484 </div>485 486 <!-- Home Indicator -->487 <div class="home-indicator">488 <div class="bar"></div>489 </div>490</div>491</body>492</html>