GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock - Filters</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: #f6f7f8;13 border-radius: 0;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 26px;27 font-weight: bold;28 color: #333;29 }30 .status-icons {31 display: flex;32 gap: 18px;33 align-items: center;34 }35 .dot {36 width: 22px; height: 22px; background: #1a1a1a; border-radius: 5px;37 }38 39 /* Header with gradient */40 .header {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 330px;46 background: linear-gradient(180deg,#a7dfd6 0%, #b0e4d7 100%);47 padding: 24px 28px;48 box-sizing: border-box;49 }50 .search-row {51 display: flex;52 align-items: center;53 gap: 22px;54 margin-top: 8px;55 }56 .icon-btn {57 width: 72px; height: 72px; border-radius: 36px; background: rgba(255,255,255,0.35);58 display: flex; align-items: center; justify-content: center;59 }60 .search-bar {61 flex: 1;62 height: 100px;63 background: #fff;64 border-radius: 50px;65 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;66 display: flex; align-items: center; justify-content: space-between;67 padding: 0 30px;68 }69 .search-text {70 color: #222; font-size: 36px;71 }72 .camera-icon {73 width: 62px; height: 62px; border-radius: 31px; background: #eef2f3; display:flex; align-items:center; justify-content:center; border:1px solid #d0d6d8;74 }75 76 .chip-row {77 margin-top: 26px;78 display: flex;79 align-items: center;80 gap: 18px;81 }82 .chip {83 padding: 22px 30px;84 background: #eceff1;85 color: #333;86 border-radius: 40px;87 font-size: 32px;88 }89 .chip.filters {90 background: #e7f5f6;91 display: flex; align-items: center; gap: 12px;92 }93 .prime-toggle {94 display: inline-flex; align-items: center; gap: 12px;95 padding: 18px 26px; background: #fff; border-radius: 32px; font-size: 28px; color:#3a3a3a; border: 1px solid #e1e6e8;96 }97 .toggle {98 width: 64px; height: 34px; background: #cfd8dc; border-radius: 20px; position: relative;99 }100 .toggle::after {101 content:""; position:absolute; top:3px; left:3px; width:28px; height:28px; background:#fff; border-radius:50%;102 }103 104 /* Bottom sheet (Filters panel) */105 .sheet {106 position: absolute;107 top: 380px;108 left: 0;109 width: 1080px;110 height: 1800px;111 background: #fff;112 border-top-left-radius: 18px;113 border-top-right-radius: 18px;114 box-shadow: 0 -6px 24px rgba(0,0,0,0.12);115 }116 .sheet-header {117 display: flex; align-items: center; justify-content: space-between;118 padding: 30px 36px 18px 36px; border-bottom: 1px solid #eef0f2;119 font-size: 42px; color:#222; font-weight: 700;120 }121 .close-link { color:#4b4b4b; font-size: 36px; font-weight: 600; }122 123 .sheet-body {124 position: absolute;125 top: 120px;126 left: 0;127 right: 0;128 bottom: 0;129 display: grid;130 grid-template-columns: 320px 1fr;131 }132 133 /* Sidebar */134 .side {135 border-right: 1px solid #eef0f2;136 padding: 14px 0;137 overflow: hidden;138 }139 .side h4 {140 font-size: 30px; color:#6b6b6b; font-weight: 700; padding: 26px 28px 10px;141 }142 .side-item {143 padding: 26px 28px; font-size: 32px; color:#2f2f2f;144 border-bottom: 1px solid #f1f2f3;145 }146 .side-item.active {147 background: #f7fbfc;148 border-left: 6px solid #2fa2ad;149 padding-left: 22px;150 font-weight: 700;151 }152 153 /* Main content */154 .content {155 padding: 28px 40px;156 }157 .title {158 font-size: 44px; font-weight: 800; color:#1f1f1f; margin-bottom: 24px;159 }160 .subtitle {161 font-size: 36px; color:#404040; margin-bottom: 20px; font-weight: 700;162 }163 .pill-wrap { display: flex; flex-wrap: wrap; gap: 22px; }164 .pill {165 padding: 24px 30px; font-size: 34px; color:#333; background:#f3f4f6;166 border-radius: 20px; border: 1px solid #e1e5e8;167 }168 169 /* Sticky show results button */170 .show-results {171 position: absolute;172 bottom: 46px;173 right: 40px;174 background: #2b7f8f;175 color: #fff;176 font-size: 40px;177 font-weight: 700;178 padding: 26px 34px;179 border-radius: 28px;180 box-shadow: 0 8px 18px rgba(43,127,143,0.35);181 }182 183 /* Simple SVG styling */184 svg { display:block; }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status -->191 <div class="status-bar">192 <div style="font-size:40px;">4:11</div>193 <div class="status-icons">194 <div class="dot"></div>195 <div class="dot"></div>196 <div class="dot"></div>197 <div class="dot"></div>198 </div>199 </div>200 201 <!-- Gradient header with search -->202 <div class="header">203 <div class="search-row">204 <div class="icon-btn">205 <!-- Back arrow -->206 <svg width="34" height="34" viewBox="0 0 24 24">207 <path d="M15 18l-6-6 6-6" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="search-bar">211 <div class="search-text">asian shoes for men</div>212 <div class="camera-icon">213 <svg width="30" height="30" viewBox="0 0 24 24">214 <path d="M7 7h2l1-2h4l1 2h2a3 3 0 013 3v7a3 3 0 01-3 3H7a3 3 0 01-3-3v-7a3 3 0 013-3z" fill="#cdd5d8"/>215 <circle cx="12" cy="13" r="3.5" fill="#9fa7aa"/>216 </svg>217 </div>218 </div>219 </div>220 221 <!-- Filter chips row -->222 <div class="chip-row">223 <div class="prime-toggle">224 <span>prime</span>225 <div class="toggle"></div>226 </div>227 <div class="chip">Lace-Up</div>228 <div class="chip">Hook & Loop</div>229 <div class="chip">Buckle</div>230 <div class="chip filters">231 <span>Filters</span>232 <svg width="24" height="24" viewBox="0 0 24 24">233 <path d="M6 9l6 6 6-6" stroke="#3a6a72" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 </div>237 </div>238 239 <!-- Bottom sheet -->240 <div class="sheet">241 <div class="sheet-header">242 <div>Filters</div>243 <div class="close-link">Close</div>244 </div>245 246 <div class="sheet-body">247 <!-- Sidebar -->248 <div class="side">249 <div class="side-item">Customer Reviews</div>250 <div class="side-item">Sort by</div>251 <div class="side-item">Seasons</div>252 <div class="side-item">Shoes Special Features</div>253 <div class="side-item">Shoe Outer Material</div>254 <div class="side-item active">Shoes Closure Type</div>255 <div class="side-item">Sole Width</div>256 <div class="side-item">Height Map</div>257 <div class="side-item">Running Surface</div>258 <div class="side-item">Pronation</div>259 <div class="side-item">Arch Type</div>260 <div class="side-item">Pattern</div>261 </div>262 263 <!-- Main content -->264 <div class="content">265 <div class="title">Men's Sports & Outdoor Shoes</div>266 <div class="subtitle">Shoes Closure Type</div>267 <div class="pill-wrap">268 <div class="pill">Buckle</div>269 <div class="pill">Hook & Loop</div>270 <div class="pill">Lace-Up</div>271 <div class="pill">Pull On</div>272 </div>273 274 <!-- Large empty area mimicking white space -->275 <div style="height: 1080px;"></div>276 </div>277 </div>278 279 <div class="show-results">Show 1,217 results</div>280 </div>281 282</div>283</body>284</html>