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>Filters Panel Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13 color: #111;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Status bar */24 .status-bar {25 height: 110px;26 padding: 0 36px;27 background: linear-gradient(90deg, #9fd7d3 0%, #b9e4da 100%);28 display: flex;29 align-items: center;30 justify-content: space-between;31 box-sizing: border-box;32 }33 .sb-time {34 font-size: 38px;35 font-weight: 600;36 color: #0f2b2a;37 }38 .sb-icons {39 display: flex;40 align-items: center;41 gap: 22px;42 }43 .sb-icon {44 width: 40px;45 height: 40px;46 }47 48 /* Header */49 .header {50 height: 120px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 padding: 0 36px;55 border-bottom: 1px solid #e3e7ea;56 background: #fff;57 box-sizing: border-box;58 }59 .header h1 {60 margin: 0;61 font-size: 48px;62 font-weight: 700;63 }64 .close-link {65 font-size: 42px;66 color: #187b90;67 font-weight: 600;68 }69 70 /* Main content layout */71 .content {72 position: absolute;73 top: 230px; /* below status + header */74 bottom: 200px; /* leave space for bottom bar */75 left: 0;76 right: 0;77 display: flex;78 }79 .sidebar {80 width: 340px;81 border-right: 1px solid #e5e7ea;82 background: #f2f4f5;83 box-sizing: border-box;84 padding-top: 10px;85 }86 .side-item {87 padding: 36px 30px;88 font-size: 38px;89 line-height: 1.2;90 border-bottom: 1px solid #eef0f2;91 }92 .side-item.small {93 display: flex;94 align-items: center;95 justify-content: space-between;96 }97 .side-item .badge {98 background: #cfd6db;99 color: #2a2f33;100 border-radius: 18px;101 font-size: 28px;102 padding: 6px 18px;103 }104 .side-item.highlight {105 background: #d1d5d8;106 font-style: italic;107 font-weight: 700;108 color: #2c2f31;109 }110 111 .main {112 flex: 1;113 padding: 34px 40px;114 box-sizing: border-box;115 background: #ffffff;116 }117 118 /* Breadcrumbs */119 .breadcrumbs {120 display: flex;121 flex-wrap: wrap;122 gap: 12px;123 font-size: 36px;124 margin-bottom: 28px;125 }126 .breadcrumbs a {127 color: #0f777f;128 text-decoration: none;129 font-weight: 700;130 }131 .crumb-sep {132 color: #80959a;133 }134 135 .section-title {136 font-size: 46px;137 font-weight: 700;138 margin: 8px 0 28px 0;139 }140 .sub-title {141 font-size: 42px;142 font-weight: 700;143 margin: 28px 0 20px 0;144 }145 146 /* Pills */147 .pills {148 display: flex;149 gap: 26px;150 margin-top: 12px;151 }152 .pill {153 padding: 24px 36px;154 border-radius: 24px;155 font-size: 36px;156 font-weight: 600;157 background: #efefef;158 color: #333;159 border: 1px solid #e0e0e0;160 }161 .pill.teal {162 background: #e6f3f4;163 color: #0f7780;164 border-color: #b9dfe3;165 }166 167 /* Bottom action bar */168 .bottom-bar {169 position: absolute;170 left: 0;171 right: 0;172 bottom: 120px;173 height: 160px;174 background: #fff;175 border-top: 1px solid #dae0e3;176 box-shadow: 0 -6px 20px rgba(0,0,0,0.06);177 display: flex;178 align-items: center;179 justify-content: space-between;180 padding: 0 36px;181 box-sizing: border-box;182 }183 .btn {184 padding: 26px 40px;185 font-size: 40px;186 border-radius: 26px;187 font-weight: 700;188 }189 .btn.outline {190 border: 2px solid #dfe7eb;191 color: #0f7d86;192 background: #ffffff;193 }194 .btn.primary {195 background: #0c6f7a;196 color: #fff;197 border: 2px solid #0c6f7a;198 box-shadow: 0 6px 0 rgba(0,0,0,0.12);199 }200 201 /* Home indicator */202 .home-indicator {203 position: absolute;204 bottom: 36px;205 left: 50%;206 transform: translateX(-50%);207 width: 380px;208 height: 12px;209 background: #808080;210 border-radius: 8px;211 opacity: 0.9;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div class="sb-time">1:05</div>221 <div class="sb-icons">222 <!-- Simple lock icon -->223 <svg class="sb-icon" viewBox="0 0 24 24">224 <rect x="5" y="10" width="14" height="10" rx="2" fill="#2b4d4b"></rect>225 <path d="M7 10V8a5 5 0 0110 0v2" stroke="#2b4d4b" stroke-width="2" fill="none"></path>226 </svg>227 <!-- Wifi -->228 <svg class="sb-icon" viewBox="0 0 24 24">229 <path d="M2 8c5-5 15-5 20 0" stroke="#2b4d4b" stroke-width="2" fill="none"/>230 <path d="M5 11c4-4 10-4 14 0" stroke="#2b4d4b" stroke-width="2" fill="none"/>231 <path d="M8 14c3-3 5-3 8 0" stroke="#2b4d4b" stroke-width="2" fill="none"/>232 <circle cx="12" cy="18" r="2" fill="#2b4d4b"/>233 </svg>234 <!-- Battery -->235 <svg class="sb-icon" viewBox="0 0 28 24">236 <rect x="1" y="6" width="22" height="12" rx="2" fill="none" stroke="#2b4d4b" stroke-width="2"></rect>237 <rect x="3" y="8" width="14" height="8" rx="1" fill="#2b4d4b"></rect>238 <rect x="23" y="9" width="3" height="6" rx="1" fill="#2b4d4b"></rect>239 </svg>240 </div>241 </div>242 243 <!-- Header -->244 <div class="header">245 <h1>Filters (1)</h1>246 <div class="close-link">Close</div>247 </div>248 249 <!-- Content -->250 <div class="content">251 <!-- Sidebar -->252 <div class="sidebar">253 <div class="side-item">Prime & Delivery</div>254 <div class="side-item small">255 <span>Categories</span>256 <span class="badge">1</span>257 </div>258 <div class="side-item">Brands</div>259 <div class="side-item">Price and Deals</div>260 <div class="side-item">Customer Reviews</div>261 <div class="side-item">Sort by</div>262 <div class="side-item highlight">Lapdesks</div>263 <div class="side-item">Item Depth Front<br>To Back</div>264 <div class="side-item">Item Height Base<br>to Top</div>265 <div class="side-item">Item Width Side To<br>Side</div>266 <div class="side-item">Finish Type</div>267 <div class="side-item">Special Features</div>268 <div class="side-item">New Arrivals</div>269 <div class="side-item">Availability</div>270 </div>271 272 <!-- Main panel -->273 <div class="main">274 <div class="breadcrumbs">275 <a href="#">Any Category</a><span class="crumb-sep">></span>276 <a href="#">Computers & Accessories</a><span class="crumb-sep">></span>277 <a href="#">Computer Accessories & Peripherals</a><span class="crumb-sep">></span>278 </div>279 280 <div class="section-title">Laptop Accessories</div>281 282 <div class="sub-title">Laptop Accessories</div>283 <div class="pills">284 <div class="pill">All</div>285 <div class="pill teal">Lapdesks</div>286 </div>287 </div>288 </div>289 290 <!-- Bottom action bar -->291 <div class="bottom-bar">292 <button class="btn outline">Clear Filters</button>293 <button class="btn primary">Show 996 results</button>294 </div>295 296 <!-- Home indicator -->297 <div class="home-indicator"></div>298 299</div>300</body>301</html>