GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Colour Filter Modal - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F5F5F7;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 110px;23 background: #1E1B1C;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-weight: 600;30 letter-spacing: 0.5px;31 }32 .status-time { font-size: 40px; }33 .status-icons { margin-left: auto; display:flex; align-items:center; gap:28px; }34 35 /* Top app bar */36 .app-bar {37 position: absolute;38 top: 110px;39 left: 0; right: 0;40 height: 150px;41 background: #FFFFFF;42 border-bottom: 1px solid #E5E5E5;43 display: flex; align-items: center;44 padding: 0 28px;45 box-sizing: border-box;46 }47 .icon-btn { width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; }48 .title { font-size: 48px; font-weight: 600; margin-left: 8px; }49 .spacer { flex: 1; }50 .toolbar-icon { width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; margin-left: 10px; }51 52 /* Subheader */53 .subheader {54 position: absolute;55 top: 260px; left: 0; right: 0;56 height: 110px;57 background: #F3F3F5;58 border-bottom: 1px solid #E5E5E5;59 display:flex; align-items:center;60 padding: 0 34px;61 box-sizing: border-box;62 }63 .link-filters { margin-left:auto; color:#6F35D3; font-weight:700; font-size: 40px; }64 65 /* Content area behind sheet */66 .content {67 position: absolute;68 top: 370px; left: 0; right: 0; bottom: 0;69 padding: 34px;70 box-sizing: border-box;71 }72 .section-title { font-size: 44px; font-weight: 700; color:#2E2E2E; margin-bottom: 24px; }73 .chip-row { display:flex; gap: 22px; margin-bottom: 30px; }74 .filter-chip {75 padding: 26px 30px;76 border: 3px solid #2C2C2C;77 border-radius: 12px;78 background: #fff;79 font-size: 38px;80 }81 .items-row { display:flex; align-items:center; gap: 14px; color:#4A4A4A; font-size: 34px; margin-bottom: 30px; }82 83 .grid {84 display: grid;85 grid-template-columns: repeat(2, 1fr);86 gap: 26px;87 }88 .product {89 height: 360px;90 }91 92 /* Dim overlay */93 .scrim {94 position: absolute;95 left:0; right:0; top:0; bottom:0;96 background: rgba(0,0,0,0.25);97 }98 99 /* Bottom sheet */100 .bottom-sheet {101 position: absolute;102 left:0; right:0;103 top: 760px; /* approximate from screenshot */104 height: 1640px;105 background: #FFFFFF;106 border-top-left-radius: 18px;107 border-top-right-radius: 18px;108 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);109 }110 .sheet-notch {111 position:absolute; top:-28px; left:50%; transform:translateX(-50%);112 width: 90px; height: 60px; background: linear-gradient(#EDEDED,#FFFFFF);113 border-radius: 12px 12px 0 0;114 box-shadow: 0 2px 6px rgba(0,0,0,0.08);115 }116 .sheet-header {117 display:flex; align-items:center;118 padding: 34px;119 padding-bottom: 16px;120 box-sizing: border-box;121 }122 .sheet-title { font-size: 46px; font-weight: 800; color:#222; }123 .reset { margin-left:auto; color:#6F35D3; font-weight: 800; font-size: 42px; }124 125 .divider { height: 2px; background:#E7E7E7; }126 127 .sheet-content {128 position:absolute;129 top: 120px; bottom: 170px; left: 0; right: 0;130 padding: 34px;131 box-sizing: border-box;132 overflow-y: auto;133 }134 135 .colour-grid {136 display:grid;137 grid-template-columns: repeat(3, 1fr);138 gap: 28px 28px;139 }140 141 .colour-chip {142 position: relative;143 height: 150px;144 border: 4px solid #2E2E2E;145 border-radius: 12px;146 background:#fff;147 overflow: hidden;148 }149 .colour-chip .half {150 position:absolute; top:0; bottom:0; width: 50%;151 }152 .colour-chip .half.right { right:0; }153 .colour-chip .half.left { left:0; }154 155 .colour-chip .label {156 position:absolute;157 left: 24px;158 top: 50%;159 transform: translateY(-50%);160 font-size: 40px;161 color:#222;162 font-weight: 600;163 }164 .colour-chip.selected { border-width: 6px; }165 166 /* CTA inside sheet */167 .sheet-cta-wrap {168 position:absolute; left:0; right:0; bottom: 0;169 padding: 18px 28px 28px;170 box-sizing: border-box;171 border-top: 2px solid #E7E7E7;172 background:#FFFFFF;173 }174 .cta {175 background:#121212; color:#fff; text-align:center;176 border-radius: 10px;177 font-size: 46px; font-weight: 800;178 padding: 36px 24px;179 }180 181 /* Gesture indicator */182 .gesture {183 position: absolute;184 bottom: 20px; left: 50%;185 transform: translateX(-50%);186 width: 340px; height: 12px;187 background: #000;188 border-radius: 10px;189 opacity: 0.15;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div class="status-time">11:39</div>199 <div class="status-icons">200 <!-- WiFi icon -->201 <svg width="52" height="40" viewBox="0 0 24 24" fill="none">202 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>203 <circle cx="12" cy="18" r="1.4" fill="#fff"/>204 </svg>205 <!-- Battery icon -->206 <svg width="72" height="40" viewBox="0 0 28 14" fill="none">207 <rect x="1" y="2" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>208 <rect x="3" y="4" width="18" height="6" rx="1" fill="#fff"/>209 <rect x="24" y="5" width="3" height="4" rx="1" fill="#fff"/>210 </svg>211 </div>212 </div>213 214 <!-- App bar -->215 <div class="app-bar">216 <div class="icon-btn">217 <svg width="46" height="46" viewBox="0 0 24 24">218 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 <div class="title">man's shirt</div>222 <div class="spacer"></div>223 <div class="toolbar-icon">224 <!-- Search -->225 <svg width="46" height="46" viewBox="0 0 24 24">226 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>227 <path d="M20 20l-3.5-3.5" stroke="#222" stroke-width="2" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="toolbar-icon">231 <!-- Heart -->232 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">233 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.5A4 4 0 0120 10c0 5.6-8 10-8 10z" stroke="#222" stroke-width="2" fill="none"/>234 </svg>235 </div>236 <div class="toolbar-icon">237 <!-- Bag -->238 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">239 <rect x="4" y="7" width="16" height="13" rx="2" stroke="#222" stroke-width="2"/>240 <path d="M9 7a3 3 0 016 0" stroke="#222" stroke-width="2" fill="none"/>241 </svg>242 </div>243 </div>244 245 <!-- Subheader -->246 <div class="subheader">247 <div></div>248 <div class="link-filters">Filters</div>249 </div>250 251 <!-- Content behind sheet -->252 <div class="content">253 <div class="section-title">Top filters</div>254 <div class="chip-row">255 <div class="filter-chip">Size</div>256 <div class="filter-chip">Brand</div>257 <div class="filter-chip">Colour</div>258 <div class="filter-chip">Sustainability</div>259 <div class="filter-chip">Price</div>260 </div>261 <div class="items-row">262 <div>Showing 41.301 items</div>263 <svg width="44" height="44" viewBox="0 0 24 24">264 <circle cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none"/>265 <path d="M12 8v6M12 17.5h.01" stroke="#444" stroke-width="2" stroke-linecap="round"/>266 </svg>267 </div>268 <div class="grid">269 <div class="product">270 <div style="width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Product Image]</div>271 </div>272 <div class="product">273 <div style="width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Product Image]</div>274 </div>275 </div>276 </div>277 278 <!-- Dim overlay -->279 <div class="scrim"></div>280 281 <!-- Bottom sheet -->282 <div class="bottom-sheet">283 <div class="sheet-notch"></div>284 <div class="sheet-header">285 <div class="sheet-title">Colour (1)</div>286 <div class="reset">Reset</div>287 </div>288 <div class="divider"></div>289 290 <div class="sheet-content">291 <div class="colour-grid">292 <!-- Row 1 -->293 <div class="colour-chip selected">294 <div class="half left" style="background:#000;"></div>295 <div class="half right" style="background:#fff;"></div>296 <div class="label" style="color:#000; font-weight:800;">Black</div>297 </div>298 <div class="colour-chip">299 <div class="half left" style="background:#6B3E22;"></div>300 <div class="half right" style="background:#fff;"></div>301 <div class="label">Brown</div>302 </div>303 <div class="colour-chip">304 <div class="half left" style="background:#D8C59B;"></div>305 <div class="half right" style="background:#fff;"></div>306 <div class="label">Beige</div>307 </div>308 309 <!-- Row 2 -->310 <div class="colour-chip">311 <div class="half left" style="background:#8B8B8B;"></div>312 <div class="half right" style="background:#fff;"></div>313 <div class="label">Grey</div>314 </div>315 <div class="colour-chip">316 <div class="half left" style="background:#ffffff;"></div>317 <div class="half right" style="background:#fff;"></div>318 <div class="label">White</div>319 </div>320 <div class="colour-chip">321 <div class="half right" style="background:#2F73B6;"></div>322 <div class="half left" style="background:#fff;"></div>323 <div class="label">Blue</div>324 </div>325 326 <!-- Row 3 -->327 <div class="colour-chip">328 <div class="half left" style="background:#2E718B;"></div>329 <div class="half right" style="background:#fff;"></div>330 <div class="label">Petrol</div>331 </div>332 <div class="colour-chip">333 <div class="half left" style="background:#5ED0D1;"></div>334 <div class="half right" style="background:#fff;"></div>335 <div class="label">Turquoise</div>336 </div>337 <div class="colour-chip">338 <div class="half left" style="background:#6FD57B;"></div>339 <div class="half right" style="background:#fff;"></div>340 <div class="label">Green</div>341 </div>342 343 <!-- Row 4 -->344 <div class="colour-chip">345 <div class="half left" style="background:#5A8B2F;"></div>346 <div class="half right" style="background:#fff;"></div>347 <div class="label">Olive</div>348 </div>349 <div class="colour-chip">350 <div class="half right" style="background:#F2D33B;"></div>351 <div class="half left" style="background:#fff;"></div>352 <div class="label">Yellow</div>353 </div>354 <div class="colour-chip">355 <div class="half left" style="background:#F28843;"></div>356 <div class="half right" style="background:#fff;"></div>357 <div class="label">Orange</div>358 </div>359 360 <!-- Row 5 -->361 <div class="colour-chip">362 <div class="half left" style="background:#E3322A;"></div>363 <div class="half right" style="background:#fff;"></div>364 <div class="label">Red</div>365 </div>366 <div class="colour-chip">367 <div class="half left" style="background:#EA6BB0;"></div>368 <div class="half right" style="background:#fff;"></div>369 <div class="label">Pink</div>370 </div>371 <div class="colour-chip">372 <div class="half left" style="background:#7D43B5;"></div>373 <div class="half right" style="background:#fff;"></div>374 <div class="label">Lilac</div>375 </div>376 377 <!-- Row 6 -->378 <div class="colour-chip">379 <div class="half left" style="background:#F0D977;"></div>380 <div class="half right" style="background:#fff;"></div>381 <div class="label">Gold</div>382 </div>383 <div class="colour-chip">384 <div class="half left" style="background:#CFCFCF;"></div>385 <div class="half right" style="background:#fff;"></div>386 <div class="label">Silver</div>387 </div>388 <div class="colour-chip">389 <!-- Mosaic -->390 <div class="half left" style="background:transparent;">391 <div style="position:absolute; left:10px; top:10px; width:54px; height:54px; background:#F2D33B;"></div>392 <div style="position:absolute; left:70px; top:10px; width:54px; height:54px; background:#7D43B5;"></div>393 <div style="position:absolute; left:10px; top:70px; width:54px; height:54px; background:#52B7E3;"></div>394 <div style="position:absolute; left:70px; top:70px; width:54px; height:54px; background:#45C46B;"></div>395 </div>396 <div class="half right" style="background:#fff;"></div>397 <div class="label">Multi-coloured</div>398 </div>399 </div>400 </div>401 402 <div class="sheet-cta-wrap">403 <div class="cta">Show 5.650 results</div>404 </div>405 </div>406 407 <!-- Gesture bar -->408 <div class="gesture"></div>409 410</div>411</body>412</html>