GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Filter Modal UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 color: #FFFFFF;24 display: flex;25 align-items: center;26 padding: 0 24px;27 box-sizing: border-box;28 font-weight: 600;29 font-size: 34px;30 letter-spacing: 0.2px;31 }32 .status-icons {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #E0E0E0; opacity: 0.9; }39 .battery {40 width: 44px; height: 22px; border: 2px solid #E0E0E0; border-radius: 5px; position: relative;41 }42 .battery::after {43 content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 10px; background: #E0E0E0; border-radius: 1px;44 }45 .battery-fill { position: absolute; left: 3px; top: 3px; height: 14px; width: 30px; background: #E0E0E0; border-radius: 3px; }46 47 /* Background content (faded) */48 .bg-content {49 position: absolute;50 top: 120px;51 left: 24px;52 right: 24px;53 bottom: 170px;54 opacity: 0.28;55 }56 .bg-row {57 display: flex;58 gap: 24px;59 margin-bottom: 28px;60 }61 .thumb {62 width: 300px;63 height: 250px;64 background: #E0E0E0;65 border: 1px solid #BDBDBD;66 display: flex; justify-content: center; align-items: center;67 color: #757575; font-size: 28px;68 border-radius: 22px;69 }70 71 /* Filter modal sheet */72 .modal {73 position: absolute;74 top: 160px;75 left: 80px;76 width: 920px;77 height: 1800px;78 background: #1E1E1E;79 border: 1px solid #2C2C2C;80 border-radius: 26px;81 box-shadow: 0 28px 60px rgba(0,0,0,0.6);82 color: #FFFFFF;83 overflow: hidden;84 }85 .modal-header {86 display: flex;87 align-items: center;88 height: 120px;89 padding: 0 32px;90 box-sizing: border-box;91 border-bottom: 1px solid #333333;92 }93 .modal-title {94 font-size: 44px;95 font-weight: 700;96 margin-left: 20px;97 }98 .reset {99 margin-left: auto;100 color: #5AA1FF;101 font-size: 32px;102 font-weight: 600;103 }104 .icon-btn {105 width: 56px; height: 56px; border-radius: 28px;106 display: flex; align-items: center; justify-content: center;107 }108 109 .section {110 padding: 8px 0;111 }112 .divider {113 height: 1px; background: #333333; margin: 16px 32px;114 }115 .row {116 display: flex;117 align-items: center;118 justify-content: space-between;119 padding: 24px 32px;120 font-size: 32px;121 }122 .row .label { color: #FFFFFF; }123 .row .value { color: #CFCFCF; }124 .chevron {125 width: 28px; height: 28px; margin-left: 12px;126 }127 128 /* Buying format chips */129 .chips {130 display: flex;131 gap: 18px;132 padding: 12px 32px 26px 32px;133 flex-wrap: wrap;134 }135 .chip {136 padding: 16px 26px;137 border: 2px solid #6A6A6A;138 border-radius: 999px;139 color: #DDDDDD;140 font-size: 30px;141 font-weight: 600;142 }143 .chip.active {144 border-color: #FFFFFF;145 color: #FFFFFF;146 }147 148 /* Show more */149 .show-more {150 display: flex; align-items: center; justify-content: center;151 color: #9BC0FF; font-size: 30px; font-weight: 600;152 padding: 20px 0 32px 0;153 }154 .show-more svg { margin-left: 10px; }155 156 /* Bottom CTA button */157 .cta {158 position: absolute;159 left: 120px;160 bottom: 180px;161 width: 840px;162 height: 120px;163 background: #6EA9FF;164 border-radius: 60px;165 display: flex; align-items: center; justify-content: center;166 color: #0B0B0B;167 font-size: 38px;168 font-weight: 800;169 box-shadow: 0 10px 30px rgba(0,0,0,0.4);170 }171 172 /* Bottom navigation (faint, behind modal) */173 .bottom-nav {174 position: absolute;175 left: 0;176 bottom: 0;177 width: 1080px;178 height: 130px;179 background: rgba(18,18,18,0.9);180 display: flex;181 align-items: center;182 padding: 0 40px;183 box-sizing: border-box;184 color: #BEBEBE;185 font-size: 28px;186 }187 .nav-item {188 display: flex; flex-direction: column; align-items: center; justify-content: center;189 width: 140px;190 }191 192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status bar -->198 <div class="status-bar">199 <div>1:35</div>200 <div class="status-icons">201 <!-- simple search icon -->202 <svg width="30" height="30" viewBox="0 0 24 24">203 <circle cx="10" cy="10" r="7" stroke="#E0E0E0" stroke-width="2" fill="none"></circle>204 <line x1="15" y1="15" x2="22" y2="22" stroke="#E0E0E0" stroke-width="2"></line>205 </svg>206 <!-- bell -->207 <svg width="28" height="28" viewBox="0 0 24 24">208 <path d="M12 3c-3 0-5 2-5 5v4l-2 2v2h14v-2l-2-2V8c0-3-2-5-5-5z" fill="#E0E0E0"></path>209 </svg>210 <!-- dot -->211 <div class="status-dot"></div>212 <!-- wifi -->213 <svg width="30" height="30" viewBox="0 0 24 24">214 <path d="M2 8c5-5 15-5 20 0" stroke="#E0E0E0" stroke-width="2" fill="none"></path>215 <path d="M5 11c4-4 10-4 14 0" stroke="#E0E0E0" stroke-width="2" fill="none"></path>216 <circle cx="12" cy="16" r="2" fill="#E0E0E0"></circle>217 </svg>218 <!-- battery -->219 <div class="battery"><div class="battery-fill"></div></div>220 <div style="font-size:28px;">100%</div>221 </div>222 </div>223 224 <!-- Faded background shopping thumbnails -->225 <div class="bg-content">226 <div class="bg-row">227 <div class="thumb">[IMG: Tool Kit]</div>228 <div class="thumb">[IMG: Drill Bits Case]</div>229 </div>230 <div class="bg-row">231 <div class="thumb">[IMG: Wrench Set]</div>232 <div class="thumb">[IMG: Screwdriver Set]</div>233 </div>234 </div>235 236 <!-- Filter modal -->237 <div class="modal">238 <div class="modal-header">239 <div class="icon-btn">240 <!-- Close (X) -->241 <svg width="36" height="36" viewBox="0 0 24 24">242 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>243 </svg>244 </div>245 <div class="modal-title">Filter</div>246 <div class="reset">Reset</div>247 </div>248 249 <div class="section">250 <div class="row">251 <div class="label">Sort</div>252 <div style="display:flex; align-items:center;">253 <div class="value" style="margin-right:8px;">Best Match</div>254 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>255 </div>256 </div>257 <div class="divider"></div>258 259 <div class="row">260 <div class="label">Buying Format</div>261 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>262 </div>263 <div class="chips">264 <div class="chip active">All Listings</div>265 <div class="chip">Auction</div>266 <div class="chip">Buy It Now</div>267 </div>268 269 <div class="divider"></div>270 <div class="row">271 <div class="label">Condition</div>272 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>273 </div>274 275 <div class="divider"></div>276 <div class="row">277 <div class="label">Price</div>278 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>279 </div>280 281 <div class="divider"></div>282 <div class="row">283 <div class="label">Category</div>284 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>285 </div>286 287 <div class="divider"></div>288 <div class="row">289 <div class="label">Brand</div>290 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>291 </div>292 293 <div class="divider"></div>294 <div class="row">295 <div class="label">Country/Region of Manuf...</div>296 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>297 </div>298 299 <div class="divider"></div>300 <div class="row">301 <div class="label">Type</div>302 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>303 </div>304 305 <div class="divider"></div>306 <div class="row">307 <div class="label">Item Location</div>308 <div style="display:flex; align-items:center;">309 <div class="value" style="margin-right:8px;">Default</div>310 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>311 </div>312 </div>313 314 <div class="divider"></div>315 <div class="row">316 <div class="label">Shipping Options</div>317 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>318 </div>319 320 <div class="show-more">321 Show more322 <svg width="24" height="24" viewBox="0 0 24 24">323 <path d="M6 10l6 6 6-6" stroke="#9BC0FF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>324 </svg>325 </div>326 </div>327 </div>328 329 <!-- Bottom CTA -->330 <div class="cta">Show 13,000+ results</div>331 332 <!-- Bottom navigation (behind the modal) -->333 <div class="bottom-nav">334 <div class="nav-item">335 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z" fill="#BEBEBE"></path></svg>336 <div>Home</div>337 </div>338 </div>339 340</div>341</body>342</html>