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>Filter Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #98e0dc 0%, #b5e6e2 35%, #ffffff 36%, #ffffff 100%);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 16px;21 left: 24px;22 right: 24px;23 height: 56px;24 display: flex;25 align-items: center;26 color: #1b1b1b;27 font-size: 32px;28 justify-content: space-between;29 opacity: 0.9;30 }31 .status-icons {32 display: flex; align-items: center; gap: 18px;33 }34 .icon-dot { width: 10px; height: 10px; background: #333; border-radius: 50%; opacity: 0.7; }35 .icon-tri { width: 26px; height: 18px; border: 2px solid #333; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); opacity: 0.7; }36 .icon-battery { width: 38px; height: 20px; border: 2px solid #333; border-radius: 4px; position: relative; }37 .icon-battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 8px; background: #333; border-radius: 1px; }38 39 /* Header with search */40 .header {41 position: absolute;42 top: 84px;43 left: 0;44 right: 0;45 height: 160px;46 padding: 0 24px;47 display: flex;48 align-items: center;49 gap: 16px;50 }51 .back-btn {52 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;53 }54 .back-btn svg { width: 44px; height: 44px; fill: none; stroke: #1b1b1b; stroke-width: 8; }55 .search-bar {56 flex: 1;57 height: 92px;58 background: #ffffff;59 border-radius: 24px;60 box-shadow: 0 2px 6px rgba(0,0,0,0.12);61 display: flex;62 align-items: center;63 padding: 0 24px;64 gap: 18px;65 }66 .search-bar .magnify svg { width: 40px; height: 40px; fill: none; stroke: #5e6a71; stroke-width: 6; }67 .search-input { flex: 1; color: #2a2a2a; font-size: 34px; }68 .qr-btn {69 width: 64px; height: 64px; border-radius: 14px; background: #edf3f3; display: flex; align-items: center; justify-content: center;70 border: 1px solid #d7e1e1;71 }72 .qr-btn svg { width: 36px; height: 36px; fill: #345; opacity: 0.9; }73 74 /* Chips row under header */75 .chip-row {76 position: absolute;77 top: 260px;78 left: 0;79 right: 0;80 height: 92px;81 padding: 0 24px;82 display: flex;83 align-items: center;84 gap: 16px;85 border-top: 1px solid #c9d7d7;86 background: #e9f3f2;87 }88 .chip {89 padding: 18px 26px;90 border-radius: 26px;91 background: #e6eef0;92 color: #345;93 font-size: 30px;94 border: 1px solid #d5dfe1;95 white-space: nowrap;96 }97 .chip.teal {98 background: #dff3f1;99 border-color: #8ccac5;100 color: #0e7680;101 }102 .chip .count {103 color: #0e7680; margin-left: 6px;104 }105 .chip.prime {106 display: inline-flex; align-items: center; gap: 14px;107 padding-right: 18px;108 }109 .toggle {110 width: 66px; height: 36px; background: #e8ecee; border-radius: 18px; position: relative; border: 1px solid #cad5d8;111 }112 .toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; background: #ffffff; border-radius: 50%; border: 1px solid #cbd5d9; }113 114 /* Main area */115 .main {116 position: absolute;117 top: 352px;118 bottom: 140px;119 left: 0;120 right: 0;121 overflow: hidden;122 }123 .filters-container {124 position: absolute;125 top: 0; left: 0; right: 0; bottom: 0;126 display: grid;127 grid-template-columns: 320px 1fr;128 }129 130 /* Left navigation */131 .left-nav {132 background: #f4f9f9;133 border-right: 1px solid #e2ebee;134 height: 100%;135 overflow: hidden;136 }137 .left-nav .title {138 padding: 20px 24px;139 font-size: 40px; font-weight: 700;140 }141 .nav-item {142 padding: 28px 24px;143 font-size: 30px;144 color: #3a4a50;145 border-top: 1px solid #e8eff2;146 display: flex; justify-content: space-between; align-items: center;147 }148 .nav-item.active {149 border-left: 6px solid #0e7680;150 background: #edf6f7;151 font-weight: 700;152 }153 .badge {154 background: #0e7680; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 24px;155 }156 157 /* Right content */158 .content {159 background: #fff;160 padding: 24px 36px 120px 36px;161 overflow-y: auto;162 }163 .content .close-link {164 text-align: right; font-size: 30px; color: #0e7680; margin-top: 8px; margin-bottom: 8px; cursor: default;165 }166 .section-title {167 font-size: 44px; font-weight: 800; color: #222; margin: 18px 0 14px 0;168 }169 .subhead {170 color: #333; font-size: 32px; margin: 24px 0 10px 0;171 }172 .pill {173 display: inline-block;174 padding: 18px 26px;175 background: #efefef;176 border-radius: 24px;177 font-size: 30px;178 color: #333;179 border: 1px solid #e0e0e0;180 margin: 10px 12px 10px 0;181 }182 .pill.selected {183 background: #dff3f1; border-color: #8ccac5; color: #0e7680;184 display: inline-flex; align-items: center; gap: 12px;185 }186 .pill .x {187 width: 28px; height: 28px; border-radius: 50%; background: #0e7680; color: #fff;188 font-size: 22px; line-height: 28px; text-align: center;189 }190 191 /* Bottom action bar */192 .bottom-bar {193 position: absolute;194 left: 0; right: 0; bottom: 72px;195 padding: 16px 24px;196 display: flex; justify-content: space-between; align-items: center;197 border-top: 1px solid #dfe6ea;198 background: rgba(255,255,255,0.9);199 }200 .btn-outline {201 border: 2px solid #cfd8dc; color: #0e7680;202 background: #ffffff; border-radius: 20px; padding: 22px 28px; font-size: 34px; box-shadow: 0 2px 0 rgba(0,0,0,0.03) inset;203 }204 .btn-primary {205 background: #0b6f77; color: #fff; border: none; border-radius: 24px; padding: 28px 34px; font-size: 36px; box-shadow: 0 6px 14px rgba(0,0,0,0.15);206 }207 208 /* Home indicator */209 .home-indicator {210 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);211 width: 360px; height: 12px; background: #8f8f8f; border-radius: 8px; opacity: 0.6;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div>2:19</div>221 <div class="status-icons">222 <div class="icon-dot"></div>223 <div class="icon-dot"></div>224 <div class="icon-dot"></div>225 <div class="icon-dot"></div>226 <div class="icon-tri"></div>227 <div class="icon-battery"></div>228 </div>229 </div>230 231 <!-- Header with search -->232 <div class="header">233 <div class="back-btn" aria-label="Back">234 <svg viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" /></svg>235 </div>236 <div class="search-bar">237 <div class="magnify">238 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="15" y1="15" x2="21" y2="21" stroke="#5e6a71" stroke-width="6"/></svg>239 </div>240 <div class="search-input">women's running shoes campus</div>241 <div class="qr-btn" aria-label="Scan">242 <svg viewBox="0 0 24 24">243 <rect x="3" y="3" width="6" height="6"></rect>244 <rect x="15" y="3" width="6" height="6"></rect>245 <rect x="3" y="15" width="6" height="6"></rect>246 <rect x="15" y="15" width="3" height="3"></rect>247 </svg>248 </div>249 </div>250 </div>251 252 <!-- Chips row -->253 <div class="chip-row">254 <div class="chip prime">255 <span style="color:#0e7b84; font-weight:700">prime</span>256 <div class="toggle"></div>257 </div>258 <div class="chip teal">Adidas</div>259 <div class="chip">Shoes & Handb...</div>260 <div class="chip">Filters <span class="count">(2)</span></div>261 </div>262 263 <!-- Main filters area -->264 <div class="main">265 <div class="filters-container">266 267 <!-- Left navigation -->268 <div class="left-nav">269 <div class="title">Filters (2)</div>270 <div class="nav-item">Prime & Delivery</div>271 <div class="nav-item">Categories <span class="badge">1</span></div>272 <div class="nav-item active">Brands <span class="badge">1</span></div>273 <div class="nav-item">Colours</div>274 <div class="nav-item">Sizes</div>275 <div class="nav-item">Price and Deals</div>276 <div class="nav-item">Customer Reviews</div>277 <div class="nav-item">Sort by</div>278 <div class="nav-item">Special Features</div>279 <div class="nav-item">Closure Type</div>280 <div class="nav-item">Sole Width</div>281 <div class="nav-item">Heel-to-Toe Drop</div>282 </div>283 284 <!-- Right content -->285 <div class="content">286 <div class="close-link">Close</div>287 288 <div class="section-title">Brands</div>289 290 <div class="subhead">Amazon Fashion</div>291 <div class="pill">Top Brands</div>292 293 <div class="subhead" style="margin-top:26px;">Brands</div>294 <div class="pill selected">Adidas <span class="x">×</span></div>295 <div class="pill">Campus</div>296 <div class="pill">ASIAN</div>297 <div class="pill">Sparx</div>298 <div class="pill">Bourge</div>299 <div class="pill">Puma</div>300 <div class="pill">Nike</div>301 <div class="pill">Flavia</div>302 </div>303 </div>304 </div>305 306 <!-- Bottom action bar -->307 <div class="bottom-bar">308 <button class="btn-outline">Clear Filters</button>309 <button class="btn-primary">Show 9 results</button>310 </div>311 312 <!-- Home indicator -->313 <div class="home-indicator"></div>314 315</div>316</body>317</html>