GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 32px;27 color: #3a3a3a;28 font-size: 34px;29 letter-spacing: 0.5px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 20px;35 }36 .icon-wifi, .icon-battery {37 width: 36px; height: 24px;38 }39 .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }40 41 /* Header */42 .header {43 position: absolute;44 top: 96px;45 left: 0;46 width: 1080px;47 height: 140px;48 display: flex;49 align-items: center;50 border-bottom: 1px solid #e6e6e6;51 padding: 0 28px;52 }53 .back-btn {54 width: 80px; height: 80px;55 display: flex; align-items: center; justify-content: center;56 margin-right: 10px;57 }58 .title {59 font-size: 58px;60 color: #1f1f1f;61 font-weight: 600;62 }63 .clear-link {64 margin-left: auto;65 font-size: 40px;66 color: #4b4b4b;67 }68 69 /* Layout */70 .sidebar {71 position: absolute;72 top: 236px;73 left: 0;74 width: 258px;75 bottom: 0;76 background: #f2f3f6;77 padding: 24px 22px;78 overflow-y: auto;79 border-right: 1px solid #e6e6e6;80 }81 .side-item {82 font-size: 36px;83 color: #2d2d2d;84 line-height: 1.25;85 padding: 28px 10px;86 border-radius: 8px;87 }88 89 .content {90 position: absolute;91 top: 236px;92 left: 258px;93 right: 0;94 bottom: 0;95 background: #ffffff;96 padding: 24px 40px;97 }98 .price-group {99 margin-top: 6px;100 }101 .checkbox-row {102 display: flex;103 align-items: center;104 gap: 28px;105 padding: 32px 8px;106 }107 .checkbox-square {108 width: 56px;109 height: 56px;110 border: 3px solid #8d8d8d;111 border-radius: 10px;112 background: #fff;113 }114 .checkbox-label {115 font-size: 40px;116 color: #2a2a2a;117 }118 119 /* Bottom elements */120 .products-found {121 position: absolute;122 left: 24px;123 bottom: 180px;124 color: #5b5b5b;125 font-size: 40px;126 }127 .products-found .count {128 font-weight: 700;129 margin-right: 10px;130 }131 132 .apply-btn {133 position: absolute;134 right: 40px;135 bottom: 120px;136 width: 600px;137 height: 120px;138 background: #e66b2e;139 color: white;140 font-size: 46px;141 font-weight: 700;142 border-radius: 12px;143 display: flex;144 align-items: center;145 justify-content: center;146 box-shadow: 0 4px 0 rgba(0,0,0,0.1);147 }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status Bar -->154 <div class="status-bar">155 <div class="time">7:28</div>156 <div class="status-right">157 <!-- Minimalistic icons -->158 <div class="icon-wifi">159 <svg viewBox="0 0 24 24">160 <path d="M2 8c6-6 14-6 20 0" stroke="#3a3a3a" stroke-width="2" fill="none" stroke-linecap="round"/>161 <path d="M6 12c4-4 8-4 12 0" stroke="#3a3a3a" stroke-width="2" fill="none" stroke-linecap="round"/>162 <circle cx="12" cy="16" r="2" fill="#3a3a3a"/>163 </svg>164 </div>165 <div class="icon-battery">166 <svg viewBox="0 0 28 18">167 <rect x="1" y="2" width="22" height="14" rx="2" ry="2" stroke="#3a3a3a" fill="none" stroke-width="2"/>168 <rect x="3" y="4" width="16" height="10" fill="#3a3a3a"/>169 <rect x="24" y="6" width="3" height="6" fill="#3a3a3a"/>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- Header -->176 <div class="header">177 <div class="back-btn">178 <svg viewBox="0 0 24 24" width="48" height="48">179 <path d="M15 6l-6 6 6 6" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>180 </svg>181 </div>182 <div class="title">Filters</div>183 <div class="clear-link">Clear Filters</div>184 </div>185 186 <!-- Sidebar -->187 <div class="sidebar">188 <div class="side-item">Number of<br>Drawers</div>189 <div class="side-item">Number of<br>Shelves</div>190 <div class="side-item">Customer<br>Ratings</div>191 <div class="side-item">Offers</div>192 <div class="side-item">Configuration</div>193 <div class="side-item">Cpu<br>Compartment</div>194 <div class="side-item">Keyboard Tray</div>195 <div class="side-item">GST Invoice<br>Available</div>196 <div class="side-item">Durability<br>Certification & …</div>197 <div class="side-item">Width</div>198 <div class="side-item">Height</div>199 <div class="side-item">Depth</div>200 <div class="side-item">Category</div>201 </div>202 203 <!-- Content area -->204 <div class="content">205 <div class="price-group">206 <div class="checkbox-row">207 <div class="checkbox-square"></div>208 <div class="checkbox-label">Rs. 1999 and Below</div>209 </div>210 <div class="checkbox-row">211 <div class="checkbox-square"></div>212 <div class="checkbox-label">Rs. 2000 - Rs. 4999</div>213 </div>214 <div class="checkbox-row">215 <div class="checkbox-square"></div>216 <div class="checkbox-label">Rs. 5000 - Rs. 9999</div>217 </div>218 <div class="checkbox-row">219 <div class="checkbox-square"></div>220 <div class="checkbox-label">Rs. 10000 - Rs. 14999</div>221 </div>222 <div class="checkbox-row">223 <div class="checkbox-square"></div>224 <div class="checkbox-label">Rs. 15000 and above</div>225 </div>226 </div>227 </div>228 229 <!-- Bottom label and button -->230 <div class="products-found"><span class="count">890</span>products found</div>231 <div class="apply-btn">Apply</div>232 233</div>234</body>235</html>