GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Filter UI - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: linear-gradient(180deg, #b9e3df 0%, #c7e7e1 40%, #ffffff 40%);13 }14 15 /* Top status and search */16 .status-bar {17 height: 80px;18 padding: 0 28px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #1b1b1b;23 font-size: 30px;24 }25 .search-row {26 padding: 12px 24px 6px 24px;27 display: flex;28 align-items: center;29 gap: 18px;30 }31 .back-btn {32 width: 72px; height: 72px; border-radius: 40px; display: flex; align-items: center; justify-content: center;33 }34 .search-bar {35 flex: 1;36 height: 110px;37 background: #fff;38 border-radius: 24px;39 box-shadow: 0 2px 6px rgba(0,0,0,0.12);40 display: flex;41 align-items: center;42 padding: 0 22px;43 gap: 20px;44 border: 1px solid #e3e3e3;45 }46 .search-input {47 flex: 1;48 color: #1f1f1f;49 font-size: 38px;50 }51 .icon-btn {52 width: 70px; height: 70px; border-radius: 16px;53 display: flex; align-items: center; justify-content: center;54 background: #f3f6f7;55 border: 1px solid #e0e0e0;56 }57 58 /* Chips row below search */59 .chips-row {60 display: flex;61 align-items: center;62 gap: 16px;63 padding: 12px 24px 18px 24px;64 }65 .prime-chip {66 display: flex; align-items: center; gap: 12px;67 color: #0a6a70; font-weight: 700; font-size: 30px;68 }69 .switch {70 width: 84px; height: 44px; background: #dfeeee; border-radius: 22px; position: relative; border: 1px solid #bcdede;71 }72 .switch::after {73 content: ""; width: 36px; height: 36px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.25);74 }75 .chip {76 padding: 18px 26px;77 background: #edf6f8;78 color: #1e6b74;79 border-radius: 40px;80 border: 1px solid #cfe6e9;81 font-size: 32px;82 }83 .chip.filters {84 margin-left: auto;85 display: flex; align-items: center; gap: 10px;86 background: #eaf3f5;87 }88 89 /* Filter sheet */90 .sheet {91 position: absolute;92 left: 0;93 top: 420px;94 width: 1080px;95 height: 1850px;96 background: #ffffff;97 border-top-left-radius: 18px;98 border-top-right-radius: 18px;99 box-shadow: 0 -2px 10px rgba(0,0,0,0.08) inset;100 }101 .sheet-header {102 padding: 26px 28px;103 display: flex; align-items: center; justify-content: space-between;104 border-bottom: 1px solid #ebf0f2;105 font-size: 38px; color: #1d2a2c;106 }107 .sheet-body {108 display: flex;109 height: calc(100% - 200px);110 }111 .left-panel {112 width: 300px;113 background: #f6fbfc;114 border-right: 1px solid #ecf0f1;115 padding-top: 10px;116 }117 .left-item {118 padding: 28px 24px;119 font-size: 32px;120 color: #2c3a3d;121 border-bottom: 1px solid #eef3f4;122 }123 .left-item.small {124 font-size: 28px;125 color: #50696e;126 }127 .left-item.active {128 background: #ffffff;129 border-left: 8px solid #2f7b84;130 font-weight: 700;131 display: flex; align-items: center; justify-content: space-between;132 }133 .left-count {134 color: #2f7b84; font-weight: 700;135 }136 137 .right-panel {138 flex: 1;139 padding: 28px 36px;140 }141 .section-title {142 font-size: 46px; font-weight: 800; color: #193a3f; margin: 6px 0 24px 0;143 }144 .sub-title {145 font-size: 34px; color: #405b60; margin: 8px 0 18px 0;146 }147 .option-chips {148 display: flex; gap: 22px; flex-wrap: wrap;149 }150 .option-chip {151 padding: 20px 28px; border: 1px solid #d6e8ea; border-radius: 18px; font-size: 34px; color: #274c51; background: #f4fafb;152 }153 .option-chip.selected {154 background: #dff1f4; border-color: #2f7b84; color: #1b4e53; position: relative; padding-right: 64px;155 }156 .option-chip.selected .x {157 position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 50%;158 background: #2f7b84; color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center;159 }160 161 /* Bottom bar */162 .sheet-footer {163 position: absolute; left: 0; right: 0; bottom: 0;164 padding: 24px 28px 32px 28px;165 background: #ffffff;166 display: flex; align-items: center; gap: 20px;167 border-top: 1px solid #ecf0f1;168 }169 .btn {170 height: 110px; border-radius: 22px; font-size: 38px; display: flex; align-items: center; justify-content: center; padding: 0 30px; cursor: default;171 }172 .btn.clear {173 background: #ffffff; border: 2px solid #d7e6e8; color: #2e555b; width: 320px;174 }175 .btn.apply {176 background: #2b6b78; color: #ffffff; flex: 1; box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;177 }178 179 /* Helpers */180 .muted { color: #62797d; }181 .spacer-8 { height: 8px; }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Top status bar -->188 <div class="status-bar">189 <div>4:12</div>190 <div class="muted">•••</div>191 </div>192 193 <!-- Search area -->194 <div class="search-row">195 <div class="back-btn">196 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">197 <path d="M15 18l-6-6 6-6" stroke="#1f3336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>198 </svg>199 </div>200 <div class="search-bar">201 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">202 <circle cx="11" cy="11" r="7" stroke="#6c8b90" stroke-width="2"></circle>203 <path d="M20 20l-4-4" stroke="#6c8b90" stroke-width="2" stroke-linecap="round"></path>204 </svg>205 <div class="search-input">asian shoes for men</div>206 <div class="icon-btn">207 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">208 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#607d80" stroke-width="2"></rect>209 <path d="M9 6l1-2h4l1 2" stroke="#607d80" stroke-width="2" stroke-linecap="round"/>210 </svg>211 </div>212 </div>213 </div>214 215 <!-- Chips row -->216 <div class="chips-row">217 <div class="prime-chip">218 <span>prime</span>219 <div class="switch"></div>220 </div>221 <div class="chip">Lace-Up</div>222 <div class="chip">Men's Running ...</div>223 <div class="chip filters">Filters (2)224 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">225 <path d="M7 14l5-5 5 5" stroke="#2f6f76" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>226 </svg>227 </div>228 </div>229 230 <!-- Filter sheet -->231 <div class="sheet">232 <div class="sheet-header">233 <div>Filters (2)</div>234 <div class="muted">Close</div>235 </div>236 237 <div class="sheet-body">238 <!-- Left categories -->239 <div class="left-panel">240 <div class="left-item">Customer Reviews</div>241 <div class="left-item">Sort by</div>242 <div class="left-item">Seasons</div>243 <div class="left-item">Special Features</div>244 <div class="left-item">Shoe Material</div>245 <div class="left-item active">Closure Type <span class="left-count">1</span></div>246 <div class="left-item">Sole Width</div>247 <div class="left-item">Height Map</div>248 <div class="left-item">Running Surface</div>249 <div class="left-item">Pronation</div>250 <div class="left-item">Arch Type</div>251 <div class="left-item">Pattern</div>252 </div>253 254 <!-- Right content -->255 <div class="right-panel">256 <div class="section-title">Men's Running Shoes</div>257 <div class="sub-title">Closure Type</div>258 259 <div class="option-chips">260 <div class="option-chip">Hook & Loop</div>261 <div class="option-chip selected">262 Lace-Up263 <div class="x">×</div>264 </div>265 <div class="option-chip">Pull On</div>266 </div>267 268 <!-- big white space to mimic layout -->269 <div class="spacer-8"></div>270 </div>271 </div>272 273 <div class="sheet-footer">274 <div class="btn clear">Clear Filters</div>275 <div class="btn apply">Show 708 results</div>276 </div>277 </div>278 279</div>280</body>281</html>