GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Filters UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar (simplified) */18 .status-bar {19 height: 90px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #555;25 font-size: 34px;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 24px;31 }32 .dot {33 width: 10px; height: 10px; background: #777; border-radius: 50%;34 }35 36 /* Header */37 .header {38 height: 140px;39 padding: 0 40px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 border-bottom: 1px solid #eee;44 }45 .header-left {46 display: flex;47 align-items: center;48 gap: 24px;49 }50 .title {51 font-size: 48px;52 color: #111;53 }54 .clear-link {55 font-size: 38px;56 color: #111;57 }58 59 /* Main content */60 .content {61 position: absolute;62 top: 230px; /* below status + header */63 left: 0;64 right: 0;65 bottom: 180px; /* leave space for bottom gesture bar */66 display: flex;67 }68 69 /* Left sidebar */70 .sidebar {71 width: 360px;72 border-right: 1px solid #eee;73 background: #ffffff;74 }75 .sidebar .section-label {76 padding: 24px 32px;77 font-size: 38px;78 color: #1a73e8; /* blue */79 border-bottom: 1px solid #f0f0f0;80 }81 .sidebar-list {82 background: #edf0f3;83 height: calc(100% - 88px);84 overflow: hidden;85 padding-top: 10px;86 }87 .sidebar-item {88 padding: 36px 32px;89 font-size: 36px;90 color: #333;91 display: flex;92 align-items: center;93 justify-content: space-between;94 border-bottom: 1px solid rgba(0,0,0,0.06);95 }96 .sidebar-item:last-child { border-bottom: none; }97 98 /* Right panel */99 .panel {100 flex: 1;101 background: #ffffff;102 padding: 40px 48px;103 }104 .filter-row {105 display: flex;106 align-items: center;107 gap: 28px;108 margin-top: 16px;109 }110 .filter-row .label {111 font-size: 40px;112 color: #222;113 }114 115 /* Bottom info and button */116 .bottom-ui {117 position: absolute;118 left: 40px;119 right: 40px;120 bottom: 240px;121 display: flex;122 align-items: center;123 justify-content: space-between;124 }125 .count {126 font-size: 44px;127 color: #111;128 }129 .count-sub {130 font-size: 34px;131 color: #999;132 }133 .apply-btn {134 background: #ff6200;135 color: #fff;136 font-size: 42px;137 padding: 28px 120px;138 border-radius: 12px;139 box-shadow: 0 2px 0 rgba(0,0,0,0.1);140 }141 142 /* Gesture bar */143 .gesture-bar {144 position: absolute;145 bottom: 0;146 left: 0;147 right: 0;148 height: 180px;149 background: #000;150 display: flex;151 align-items: center;152 justify-content: center;153 }154 .gesture-pill {155 width: 280px;156 height: 16px;157 background: #bfbfbf;158 border-radius: 12px;159 }160 161 /* Simple icon styles */162 .icon {163 display: inline-block;164 vertical-align: middle;165 }166 .tick {167 color: #1a73e8;168 }169</style>170</head>171<body>172<div id="render-target">173 174 <!-- Simplified status bar -->175 <div class="status-bar">176 <div>7:00</div>177 <div class="status-icons">178 <div class="dot"></div>179 <div class="dot"></div>180 <div class="dot"></div>181 <div class="dot"></div>182 <div class="dot"></div>183 </div>184 </div>185 186 <!-- Header -->187 <div class="header">188 <div class="header-left">189 <!-- Back arrow icon -->190 <svg class="icon" width="48" height="48" viewBox="0 0 24 24">191 <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192 </svg>193 <div class="title">Filters</div>194 </div>195 <div class="clear-link">Clear Filters</div>196 </div>197 198 <!-- Main Content -->199 <div class="content">200 <!-- Left sidebar -->201 <div class="sidebar">202 <div class="section-label">Gender</div>203 <div class="sidebar-list">204 <div class="sidebar-item">Plus (FAssured)</div>205 <div class="sidebar-item">206 <span>Deliver At</span>207 <!-- blue tick icon -->208 <svg class="icon tick" width="36" height="36" viewBox="0 0 24 24">209 <path d="M5 13l5 5 9-11" stroke="#1a73e8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 </div>212 <div class="sidebar-item">Discount</div>213 <div class="sidebar-item">Brand</div>214 <div class="sidebar-item">Size - UK/India</div>215 <div class="sidebar-item">Customer Ratings</div>216 <div class="sidebar-item">Price</div>217 <div class="sidebar-item">Occasion</div>218 <div class="sidebar-item">Color</div>219 <div class="sidebar-item">Offers</div>220 <div class="sidebar-item">Theme</div>221 <div class="sidebar-item">Outer Material</div>222 </div>223 </div>224 225 <!-- Right panel -->226 <div class="panel">227 <div class="filter-row">228 <!-- Empty checkbox icon -->229 <svg class="icon" width="48" height="48" viewBox="0 0 24 24">230 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>231 </svg>232 <div class="label">Women</div>233 </div>234 </div>235 </div>236 237 <!-- Bottom count and apply button -->238 <div class="bottom-ui">239 <div>240 <div class="count">522</div>241 <div class="count-sub">products found</div>242 </div>243 <div class="apply-btn">Apply</div>244 </div>245 246 <!-- Gesture bar -->247 <div class="gesture-bar">248 <div class="gesture-pill"></div>249 </div>250 251</div>252</body>253</html>