GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Filter By - UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Helvetica Neue", Arial, sans-serif;13 color: #212121;14 }15 #render-target {16 width: 1440px;17 height: 3120px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Top teal status/app bar */24 .statusbar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1440px;29 height: 220px;30 background: #1697A6;31 color: #fff;32 box-sizing: border-box;33 padding: 40px 48px 0 48px;34 }35 .status-content {36 display: flex;37 align-items: center;38 justify-content: space-between;39 }40 .status-time {41 font-size: 54px;42 font-weight: 600;43 letter-spacing: 1px;44 }45 .status-icons {46 display: flex;47 align-items: center;48 gap: 28px;49 }50 .icon-dot {51 width: 18px;52 height: 18px;53 background: #ffffff;54 border-radius: 50%;55 opacity: 0.85;56 }57 .icon-pill {58 width: 56px;59 height: 36px;60 border-radius: 6px;61 border: 3px solid #fff;62 position: relative;63 }64 .icon-pill::after {65 content: "";66 position: absolute;67 right: -10px;68 top: 8px;69 width: 6px;70 height: 20px;71 background: #fff;72 border-radius: 2px;73 }74 75 /* White header sheet */76 .sheet-header {77 position: absolute;78 top: 170px;79 left: 0;80 width: 1440px;81 height: 250px;82 background: #ffffff;83 border-bottom: 1px solid #e0e0e0;84 box-sizing: border-box;85 padding: 40px 48px;86 display: flex;87 align-items: center;88 justify-content: space-between;89 }90 .sheet-title {91 font-size: 72px;92 font-weight: 700;93 color: #333;94 }95 .close-btn {96 width: 88px;97 height: 88px;98 cursor: default;99 }100 .close-btn svg path {101 stroke: #1ba7b5;102 stroke-width: 16;103 stroke-linecap: round;104 }105 106 /* Main content area */107 .content {108 position: absolute;109 top: 420px;110 left: 0;111 right: 0;112 bottom: 240px;113 display: flex;114 }115 .left-menu {116 width: 470px;117 background: #efefef;118 border-right: 1px solid #dedede;119 }120 .menu-item {121 height: 180px;122 display: flex;123 align-items: center;124 padding: 0 48px;125 font-size: 48px;126 color: #555;127 border-bottom: 1px solid #e1e1e1;128 box-sizing: border-box;129 position: relative;130 }131 .menu-item.active {132 background: #ffffff;133 color: #1a9aa8;134 font-weight: 600;135 }136 .menu-badge {137 position: absolute;138 right: 40px;139 top: 50%;140 transform: translateY(-50%);141 min-width: 54px;142 height: 54px;143 padding: 0 16px;144 border-radius: 27px;145 background: #14a5b3;146 color: #fff;147 font-size: 40px;148 line-height: 54px;149 text-align: center;150 font-weight: 700;151 }152 153 .right-panel {154 flex: 1;155 background: #fafafa;156 }157 .search-row {158 height: 130px;159 background: #ffffff;160 border-bottom: 1px solid #e6e6e6;161 display: flex;162 align-items: center;163 padding: 0 36px;164 box-sizing: border-box;165 gap: 20px;166 }167 .search-field {168 flex: 1;169 height: 88px;170 border: 1px solid #d9d9d9;171 background: #fff;172 border-radius: 8px;173 display: flex;174 align-items: center;175 padding: 0 24px;176 box-sizing: border-box;177 gap: 18px;178 }179 .search-field svg {180 width: 44px;181 height: 44px;182 }183 .search-placeholder {184 font-size: 44px;185 color: #9e9e9e;186 }187 .search-clear {188 width: 80px;189 height: 80px;190 display: flex;191 align-items: center;192 justify-content: center;193 }194 .search-clear svg path {195 stroke: #bdbdbd;196 stroke-width: 16;197 stroke-linecap: round;198 }199 200 .brand-list {201 height: calc(100% - 130px);202 overflow: hidden;203 background: #ffffff;204 }205 .brand-item {206 display: flex;207 align-items: center;208 justify-content: space-between;209 padding: 40px 48px;210 font-size: 52px;211 color: #6b6b6b;212 border-bottom: 1px solid #f0f0f0;213 box-sizing: border-box;214 }215 .brand-item strong {216 color: #222;217 }218 .brand-count {219 color: #9e9e9e;220 font-weight: 500;221 }222 .brand-selected-dot {223 width: 22px;224 height: 22px;225 background: #17a9c4;226 border-radius: 50%;227 margin-left: 16px;228 }229 .brand-right {230 display: flex;231 align-items: center;232 gap: 18px;233 }234 235 /* Bottom actions */236 .bottom-actions {237 position: absolute;238 left: 0;239 right: 0;240 bottom: 120px;241 height: 180px;242 display: flex;243 border-top: 1px solid #e0e0e0;244 overflow: hidden;245 }246 .action-clear {247 width: 50%;248 background: #f2f2f2;249 display: flex;250 align-items: center;251 justify-content: center;252 font-size: 56px;253 font-weight: 700;254 color: #ff7b18;255 letter-spacing: 1px;256 }257 .action-apply {258 width: 50%;259 background: linear-gradient(90deg, #ff8a3a 0%, #ff6b3d 55%, #ff6246 100%);260 color: #fff;261 display: flex;262 align-items: center;263 justify-content: center;264 font-size: 56px;265 font-weight: 800;266 letter-spacing: 1px;267 }268 269 /* Navigation pill (gesture bar) */270 .gesture-bar {271 position: absolute;272 bottom: 34px;273 left: 50%;274 transform: translateX(-50%);275 width: 300px;276 height: 18px;277 background: #1f1f1f;278 border-radius: 12px;279 opacity: 0.6;280 }281</style>282</head>283<body>284 <div id="render-target">285 <!-- Teal status bar -->286 <div class="statusbar">287 <div class="status-content">288 <div class="status-time">10:44</div>289 <div class="status-icons">290 <div class="icon-dot"></div>291 <div class="icon-dot"></div>292 <div class="icon-dot"></div>293 <div class="icon-dot"></div>294 <div class="icon-dot" style="opacity:0.5;"></div>295 <div class="icon-pill"></div>296 </div>297 </div>298 </div>299 300 <!-- White sheet header -->301 <div class="sheet-header">302 <div class="sheet-title">Filter By</div>303 <div class="close-btn" aria-label="Close">304 <svg viewBox="0 0 100 100">305 <path d="M20 20 L80 80"></path>306 <path d="M80 20 L20 80"></path>307 </svg>308 </div>309 </div>310 311 <!-- Main content -->312 <div class="content">313 <!-- Left menu -->314 <div class="left-menu">315 <div class="menu-item active">Brand</div>316 <div class="menu-item">Color</div>317 <div class="menu-item">Sole material<span class="menu-badge">1</span></div>318 <div class="menu-item">Upper Material</div>319 <div class="menu-item">Discount</div>320 <div class="menu-item">Product Rating</div>321 <div class="menu-item">Price</div>322 </div>323 324 <!-- Right panel -->325 <div class="right-panel">326 <div class="search-row">327 <div class="search-field">328 <svg viewBox="0 0 24 24">329 <circle cx="10" cy="10" r="7" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>330 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#bdbdbd" stroke-width="2"></line>331 </svg>332 <div class="search-placeholder">Search Brand</div>333 </div>334 <div class="search-clear" aria-label="Clear">335 <svg viewBox="0 0 100 100">336 <path d="M25 25 L75 75"></path>337 <path d="M75 25 L25 75"></path>338 </svg>339 </div>340 </div>341 342 <div class="brand-list">343 <div class="brand-item">344 <div>Oliver Walk</div>345 <div class="brand-right"><div class="brand-count">(352)</div></div>346 </div>347 <div class="brand-item">348 <div>Neha Fab Design</div>349 <div class="brand-right"><div class="brand-count">(303)</div></div>350 </div>351 <div class="brand-item">352 <div>Puma</div>353 <div class="brand-right"><div class="brand-count">(72)</div></div>354 </div>355 <div class="brand-item">356 <div>Skechers</div>357 <div class="brand-right"><div class="brand-count">(41)</div></div>358 </div>359 <div class="brand-item">360 <div>Crazy Bunny</div>361 <div class="brand-right"><div class="brand-count">(40)</div></div>362 </div>363 <div class="brand-item">364 <div>29K</div>365 <div class="brand-right"><div class="brand-count">(38)</div></div>366 </div>367 <div class="brand-item">368 <div>Mozafia</div>369 <div class="brand-right"><div class="brand-count">(36)</div></div>370 </div>371 <div class="brand-item">372 <div>Blackburn</div>373 <div class="brand-right"><div class="brand-count">(22)</div></div>374 </div>375 <div class="brand-item">376 <div>FOMO</div>377 <div class="brand-right"><div class="brand-count">(20)</div></div>378 </div>379 <div class="brand-item">380 <div>Relaxo</div>381 <div class="brand-right"><div class="brand-count">(17)</div></div>382 </div>383 <div class="brand-item">384 <div><strong>CROWN FASHIONS</strong></div>385 <div class="brand-right"><div class="brand-count">(14)</div></div>386 </div>387 <div class="brand-item">388 <div>Funku Fashion</div>389 <div class="brand-right"><div class="brand-count">(9)</div></div>390 </div>391 <div class="brand-item">392 <div>Keviv</div>393 <div class="brand-right"><div class="brand-count">(7)</div></div>394 </div>395 <div class="brand-item">396 <div>Sketchfab</div>397 <div class="brand-right"><div class="brand-count">(6)</div></div>398 </div>399 <div class="brand-item">400 <div><strong>Lotto</strong></div>401 <div class="brand-right">402 <div class="brand-count">(6)</div>403 <div class="brand-selected-dot"></div>404 </div>405 </div>406 <div class="brand-item">407 <div>No Brand</div>408 <div class="brand-right"><div class="brand-count">(6)</div></div>409 </div>410 <div class="brand-item">411 <div>Walkso</div>412 <div class="brand-right"><div class="brand-count">(4)</div></div>413 </div>414 <div class="brand-item">415 <div>Eastern Club</div>416 <div class="brand-right"><div class="brand-count">(3)</div></div>417 </div>418 <div class="brand-item">419 <div>Flite</div>420 <div class="brand-right"><div class="brand-count">(2)</div></div>421 </div>422 <div class="brand-item">423 <div>Other</div>424 <div class="brand-right"><div class="brand-count">(1)</div></div>425 </div>426 <div class="brand-item">427 <div>Other Manufacturer</div>428 <div class="brand-right"><div class="brand-count">(1)</div></div>429 </div>430 </div>431 </div>432 </div>433 434 <!-- Bottom actions -->435 <div class="bottom-actions">436 <div class="action-clear">CLEAR ALL</div>437 <div class="action-apply">APPLY FILTER</div>438 </div>439 440 <!-- Gesture bar -->441 <div class="gesture-bar"></div>442 </div>443</body>444</html>