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 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 70px;22 color: #111;23 display: flex;24 align-items: center;25 padding: 0 28px;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-left { flex: 1; }30 .status-right {31 display: flex;32 gap: 22px;33 align-items: center;34 font-size: 26px;35 color: #666;36 }37 38 /* Header */39 .header {40 position: absolute;41 top: 70px;42 left: 0;43 width: 1080px;44 height: 110px;45 display: flex;46 align-items: center;47 padding: 0 24px;48 }49 .back-btn {50 width: 70px;51 height: 70px;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .header-title {57 font-size: 54px;58 font-weight: 600;59 color: #1a1a1a;60 margin-left: 16px;61 }62 .clear-filters {63 margin-left: auto;64 font-size: 38px;65 color: #111;66 }67 68 /* Main content */69 .content {70 position: absolute;71 top: 180px;72 left: 0;73 width: 1080px;74 height: 1940px;75 display: flex;76 }77 78 /* Left navigation */79 .left-nav {80 width: 310px;81 background: #EEF1F5;82 height: 100%;83 padding-top: 20px;84 box-sizing: border-box;85 }86 .nav-item {87 position: relative;88 padding: 28px 26px;89 font-size: 40px;90 color: #222;91 line-height: 1.2;92 }93 .nav-item + .nav-item { margin-top: 18px; }94 .nav-item .check {95 position: absolute;96 right: 22px;97 top: 50%;98 transform: translateY(-50%);99 }100 101 /* Right panel */102 .right-panel {103 flex: 1;104 background: #fff;105 padding: 12px 40px;106 }107 .section-title {108 color: #8e8e8e;109 font-size: 36px;110 margin-top: 8px;111 margin-bottom: 28px;112 }113 .category-item {114 font-size: 44px;115 color: #222;116 padding: 26px 0;117 }118 .category-item.selected {119 color: #2563ff;120 font-weight: 600;121 }122 123 /* Placeholder box seen on the right bottom-left */124 .placeholder {125 width: 340px;126 height: 340px;127 background: #E0E0E0;128 border: 1px solid #BDBDBD;129 margin-top: 36px;130 display: flex;131 justify-content: center;132 align-items: center;133 color: #757575;134 font-size: 28px;135 }136 137 /* Bottom bar */138 .bottom-info {139 position: absolute;140 left: 24px;141 bottom: 150px;142 color: #1a1a1a;143 }144 .bottom-info .count {145 font-size: 50px;146 font-weight: 700;147 letter-spacing: 1px;148 }149 .bottom-info .label {150 font-size: 34px;151 color: #666;152 margin-top: 8px;153 }154 .apply-btn {155 position: absolute;156 right: 40px;157 bottom: 120px;158 width: 600px;159 height: 120px;160 background: #e7642b;161 color: white;162 font-size: 48px;163 font-weight: 700;164 border-radius: 16px;165 display: flex;166 align-items: center;167 justify-content: center;168 }169 170 /* Simple icons */171 .icon-check svg { width: 40px; height: 40px; }172 .icon-back svg { width: 40px; height: 40px; }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="status-bar">180 <div class="status-left">10:57</div>181 <div class="status-right">182 <span>◔</span>183 <span>ib</span>184 <span>TEMU</span>185 <span>LR</span>186 <span>•</span>187 <span>📶</span>188 <span>🔋</span>189 </div>190 </div>191 192 <!-- Header -->193 <div class="header">194 <div class="back-btn icon-back">195 <svg viewBox="0 0 24 24">196 <path d="M15.5 4l-8 8 8 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>197 </svg>198 </div>199 <div class="header-title">Filters</div>200 <div class="clear-filters">Clear Filters</div>201 </div>202 203 <!-- Main content -->204 <div class="content">205 <!-- Left navigation list -->206 <div class="left-nav">207 <div class="nav-item">Price</div>208 <div class="nav-item">Plus (FAssured)</div>209 <div class="nav-item">Deliver At210 <span class="check icon-check">211 <svg viewBox="0 0 24 24">212 <circle cx="12" cy="12" r="11" fill="#2f6fff"></circle>213 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>214 </svg>215 </span>216 </div>217 <div class="nav-item">Brand</div>218 <div class="nav-item">Customer<br/>Ratings</div>219 <div class="nav-item">Offers</div>220 <div class="nav-item">Discount</div>221 <div class="nav-item">GST Invoice<br/>Available</div>222 <div class="nav-item">Availability</div>223 <div class="nav-item">Category224 <span class="check icon-check">225 <svg viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="11" fill="#2f6fff"></circle>227 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>228 </svg>229 </span>230 </div>231 </div>232 233 <!-- Right panel -->234 <div class="right-panel">235 <div class="section-title">Select Category</div>236 <div class="category-item selected">Computers</div>237 <div class="category-item">Laptop Accessories</div>238 <div class="category-item">Network Components</div>239 <div class="category-item">Computer Peripherals</div>240 <div class="category-item">Computer Components</div>241 <div class="category-item">Tablet Accessories</div>242 <div class="category-item">Desktop PCs</div>243 <div class="category-item">Audio Players</div>244 <div class="category-item">TV & Video Accessories</div>245 246 <div class="placeholder">[IMG: Filter preview / blank area]</div>247 </div>248 </div>249 250 <!-- Bottom info and Apply button -->251 <div class="bottom-info">252 <div class="count">10,611</div>253 <div class="label">products found</div>254 </div>255 <div class="apply-btn">Apply</div>256 257</div>258</body>259</html>