GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #9fd6cf 0%, #cfece6 50%, #e8f5f2 100%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 80px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 24px;26 color: #2f3c3a;27 font-size: 28px;28 opacity: 0.9;29 }30 .status-icons { display: flex; gap: 18px; align-items: center; }31 .dot { width: 10px; height: 10px; background: #2f3c3a; border-radius: 50%; display: inline-block; }32 33 /* Search bar */34 .search-area {35 position: absolute;36 top: 90px;37 left: 24px;38 right: 24px;39 height: 120px;40 display: flex;41 align-items: center;42 gap: 18px;43 }44 .back-btn {45 width: 72px;46 height: 72px;47 border-radius: 36px;48 background: rgba(0,0,0,0.08);49 display: flex;50 align-items: center;51 justify-content: center;52 }53 .search-box {54 flex: 1;55 height: 96px;56 background: #ffffff;57 border-radius: 48px;58 box-shadow: 0 2px 6px rgba(0,0,0,0.08);59 display: flex;60 align-items: center;61 padding: 0 24px;62 gap: 16px;63 }64 .search-input {65 flex: 1;66 font-size: 34px;67 color: #222;68 }69 .camera-btn {70 width: 90px;71 height: 90px;72 border-radius: 24px;73 background: #ffffff;74 box-shadow: 0 2px 6px rgba(0,0,0,0.12);75 display: flex;76 align-items: center;77 justify-content: center;78 }79 80 /* Chips row */81 .chip-row {82 position: absolute;83 top: 220px;84 left: 0;85 width: 1080px;86 padding: 0 24px;87 display: flex;88 gap: 16px;89 align-items: center;90 }91 .chip {92 background: #f2f5f7;93 border: 1px solid #d5dfe3;94 color: #333;95 font-size: 30px;96 padding: 18px 26px;97 border-radius: 28px;98 white-space: nowrap;99 }100 .chip.prime {101 display: flex;102 align-items: center;103 gap: 10px;104 }105 .toggle-slot {106 width: 68px;107 height: 36px;108 background: #e8eef1;109 border-radius: 18px;110 position: relative;111 }112 .toggle-dot {113 width: 32px;114 height: 32px;115 background: #ffffff;116 border: 1px solid #cfd6da;117 border-radius: 50%;118 position: absolute;119 left: 4px;120 top: 2px;121 }122 .filters-pill {123 margin-left: auto;124 display: flex;125 align-items: center;126 gap: 14px;127 }128 129 /* Overlay panel */130 .panel {131 position: absolute;132 top: 300px;133 left: 0;134 width: 1080px;135 height: 1600px;136 background: #ffffff;137 box-shadow: 0 -2px 10px rgba(0,0,0,0.12);138 }139 .panel-header {140 position: absolute;141 top: 20px;142 right: 24px;143 color: #2f6aa0;144 font-size: 34px;145 }146 .panel-body {147 position: absolute;148 top: 100px;149 left: 0;150 right: 0;151 bottom: 0;152 display: flex;153 }154 .side-menu {155 width: 280px;156 background: #f6fafb;157 border-right: 1px solid #e3eaee;158 padding: 24px;159 }160 .menu-item {161 font-size: 28px;162 color: #2f3c3a;163 padding: 26px 8px;164 border-radius: 10px;165 }166 .menu-item + .menu-item { border-top: 1px solid #eef3f6; }167 .content {168 flex: 1;169 padding: 24px 32px;170 }171 .section-title {172 font-size: 44px;173 font-weight: 700;174 color: #111;175 margin-bottom: 24px;176 }177 .sub-title {178 font-size: 34px;179 color: #333;180 margin: 22px 0 10px 0;181 }182 .pill {183 display: inline-flex;184 align-items: center;185 gap: 14px;186 padding: 18px 24px;187 border-radius: 20px;188 background: #f2f6f8;189 border: 1px solid #d5dde2;190 font-size: 30px;191 color: #222;192 }193 .prime-promo {194 display: inline-flex;195 align-items: center;196 gap: 14px;197 padding: 18px 24px;198 border-radius: 16px;199 background: #eef7ff;200 border: 1px solid #cfe3ff;201 color: #1976d2;202 font-size: 30px;203 }204 .check-badge {205 width: 36px;206 height: 36px;207 border-radius: 8px;208 background: #ffcc66;209 display: inline-flex;210 align-items: center;211 justify-content: center;212 color: #1a1a1a;213 font-weight: 700;214 font-size: 24px;215 }216 217 /* Bottom sticky button */218 .bottom-btn {219 position: absolute;220 left: 80px;221 right: 80px;222 bottom: 160px;223 height: 120px;224 background: #2d7fa6;225 color: #ffffff;226 border-radius: 28px;227 display: flex;228 align-items: center;229 justify-content: center;230 font-size: 40px;231 font-weight: 700;232 box-shadow: 0 8px 20px rgba(0,0,0,0.15);233 }234 235 .handle {236 position: absolute;237 bottom: 64px;238 left: 50%;239 transform: translateX(-50%);240 width: 520px;241 height: 14px;242 background: #bdbdbd;243 border-radius: 8px;244 opacity: 0.6;245 }246 247 /* Simple SVG icons styling */248 svg { display: block; }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status bar -->255 <div class="status-bar">256 <div>4:10</div>257 <div class="status-icons">258 <span class="dot"></span>259 <span class="dot" style="width:18px;height:18px;"></span>260 <span class="dot" style="background:#1a73e8;"></span>261 <span class="dot" style="background:#2f3c3a;"></span>262 </div>263 </div>264 265 <!-- Search bar -->266 <div class="search-area">267 <div class="back-btn">268 <svg width="36" height="36" viewBox="0 0 24 24">269 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>270 </svg>271 </div>272 <div class="search-box">273 <svg width="40" height="40" viewBox="0 0 24 24">274 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>275 <path d="M20 20l-4.5-4.5" stroke="#555" stroke-width="2" stroke-linecap="round"/>276 </svg>277 <div class="search-input">asian shoes for men</div>278 <svg width="32" height="32" viewBox="0 0 24 24">279 <path d="M5 7h14v10H5z" stroke="#777" fill="none" stroke-width="2"/>280 <circle cx="12" cy="12" r="3" stroke="#777" fill="none" stroke-width="2"/>281 </svg>282 </div>283 <div class="camera-btn">284 <svg width="38" height="38" viewBox="0 0 24 24">285 <path d="M4 7h4l2-2h4l2 2h4v12H4z" stroke="#333" stroke-width="2" fill="none"/>286 <circle cx="12" cy="13" r="4" stroke="#333" stroke-width="2" fill="none"/>287 </svg>288 </div>289 </div>290 291 <!-- Chips -->292 <div class="chip-row">293 <div class="chip prime">294 <div class="toggle-slot"><div class="toggle-dot"></div></div>295 <span style="color:#ffb300;font-weight:700;">prime</span>296 </div>297 <div class="chip">Lace-Up</div>298 <div class="chip">Hook & Loop</div>299 <div class="chip">Buck</div>300 <div class="chip filters-pill">Filters301 <svg width="22" height="22" viewBox="0 0 24 24">302 <path d="M6 15l6-6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>303 </svg>304 </div>305 </div>306 307 <!-- Overlay Panel -->308 <div class="panel">309 <div class="panel-header">Close</div>310 <div class="panel-body">311 <div class="side-menu">312 <div class="menu-item">Customer Reviews</div>313 <div class="menu-item">Sort by</div>314 <div class="menu-item">Seasons</div>315 <div class="menu-item">Shoes Special Features</div>316 <div class="menu-item">Shoe Outer Material</div>317 <div class="menu-item">Shoes Closure Type</div>318 <div class="menu-item">Sole Width</div>319 <div class="menu-item">Height Map</div>320 <div class="menu-item">Running Surface</div>321 <div class="menu-item">Pronation</div>322 <div class="menu-item">Arch Type</div>323 <div class="menu-item">Pattern</div>324 </div>325 <div class="content">326 <div class="section-title">Prime & Delivery</div>327 328 <div class="sub-title">Delivery</div>329 <div class="pill">Get It in 2 Days</div>330 331 <div class="sub-title" style="margin-top:36px;">Shipping Options</div>332 <div class="pill">Eligible for Pay On Delivery</div>333 334 <div class="sub-title" style="margin-top:40px;">Prime Programs</div>335 <div class="prime-promo">336 <div class="check-badge">✓</div>337 prime338 </div>339 </div>340 </div>341 </div>342 343 <!-- Bottom Button -->344 <div class="bottom-btn">Show 1,217 results</div>345 346 <!-- Handle -->347 <div class="handle"></div>348</div>349</body>350</html>