GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, 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: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 padding: 0 48px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-weight: 600;25 font-size: 46px;26 color: #1e1e1e;27 }28 .status-left {29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .status-left .dot {34 width: 18px; height: 18px; background: #111; border-radius: 50%;35 display: inline-block;36 }37 .status-left .circle {38 width: 32px; height: 32px; border-radius: 50%; border: 4px solid #111; display: inline-block;39 }40 .status-icons {41 display: flex; align-items: center; gap: 26px;42 }43 .icon-wifi svg, .icon-battery svg { display: block; }44 .icon-wifi { width: 48px; height: 48px; }45 .icon-battery { width: 70px; height: 36px; }46 47 /* Header */48 .header {49 height: 160px;50 border-bottom: 1px solid #e6e6e6;51 display: flex;52 align-items: center;53 gap: 36px;54 padding: 0 40px;55 }56 .back-icon {57 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;58 }59 .title {60 font-size: 56px;61 font-weight: 700;62 color: #2a2a2a;63 }64 65 /* Content area */66 .content {67 position: absolute;68 left: 0;69 right: 0;70 top: 280px; /* status (120) + header (160) */71 bottom: 360px; /* space for bottom bar */72 display: grid;73 grid-template-columns: 420px 1fr;74 }75 .sidebar {76 background: #f1f5f8;77 height: 100%;78 padding-top: 40px;79 border-right: 1px solid #e3e6ea;80 }81 .sidebar-item {82 padding: 34px 40px;83 font-size: 44px;84 color: #333;85 border-bottom: 1px solid #e8eaee;86 }87 .sidebar-item.active { font-weight: 700; }88 .badge {89 display: inline-flex;90 align-items: center;91 justify-content: center;92 width: 54px;93 height: 54px;94 border-radius: 28px;95 background: #111;96 color: #fff;97 font-size: 32px;98 margin-left: 16px;99 }100 101 .panel {102 padding: 60px 70px;103 }104 .section-title {105 font-size: 48px;106 font-weight: 700;107 margin-bottom: 24px;108 }109 .checkbox-row {110 display: flex;111 align-items: center;112 gap: 24px;113 margin-top: 10px;114 }115 .checkbox {116 width: 66px; height: 66px;117 border: 4px solid #2c2c2c; border-radius: 16px;118 box-sizing: border-box;119 background: #fff;120 }121 .checkbox-row .label {122 font-size: 48px;123 color: #333;124 }125 126 /* Bottom bar */127 .bottom-bar {128 position: absolute;129 left: 0; right: 0; bottom: 120px;130 height: 240px;131 display: flex;132 align-items: center;133 justify-content: space-between;134 padding: 0 60px;135 background: #ffffff;136 }137 .btn {138 height: 140px;139 border-radius: 28px;140 font-size: 50px;141 font-weight: 700;142 padding: 0 60px;143 box-sizing: border-box;144 cursor: pointer;145 }146 .btn.reset {147 width: 520px;148 background: #fff;149 border: 2px solid #dcdcdc;150 color: #222;151 box-shadow: 0 2px 0 rgba(0,0,0,0.02);152 }153 .btn.apply {154 width: 860px;155 background: #111;156 color: #fff;157 border: none;158 }159 160 /* System bottom pill */161 .system-pill {162 position: absolute;163 left: 50%;164 transform: translateX(-50%);165 bottom: 30px;166 width: 340px;167 height: 16px;168 background: #d3d3d3;169 border-radius: 12px;170 }171</style>172</head>173<body>174<div id="render-target">175 <!-- Status bar -->176 <div class="status-bar">177 <div class="status-left">178 <div>1:30</div>179 <span class="dot"></span>180 <span class="circle"></span>181 <!-- simple search icon -->182 <div class="icon-search">183 <svg width="48" height="48" viewBox="0 0 24 24">184 <circle cx="10" cy="10" r="6" stroke="#111" stroke-width="2" fill="none"></circle>185 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#111" stroke-width="2"></line>186 </svg>187 </div>188 </div>189 <div class="status-icons">190 <div class="icon-wifi">191 <svg viewBox="0 0 24 24" width="48" height="48">192 <path d="M2 8c5-4 15-4 20 0" stroke="#111" stroke-width="2" fill="none"/>193 <path d="M5 12c4-3 10-3 14 0" stroke="#111" stroke-width="2" fill="none"/>194 <path d="M9 16c3-2 5-2 6 0" stroke="#111" stroke-width="2" fill="none"/>195 <circle cx="12" cy="19" r="1.8" fill="#111"></circle>196 </svg>197 </div>198 <div class="icon-battery">199 <svg viewBox="0 0 30 16" width="70" height="36">200 <rect x="1" y="2" width="24" height="12" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>201 <rect x="4" y="4" width="18" height="8" fill="#111"></rect>202 <rect x="26" y="6" width="3" height="4" fill="#111"></rect>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- Header -->209 <div class="header">210 <div class="back-icon">211 <svg width="64" height="64" viewBox="0 0 24 24">212 <path d="M15 4 L7 12 L15 20" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 <div class="title">Filters (848 products)</div>216 </div>217 218 <!-- Content -->219 <div class="content">220 <div class="sidebar">221 <div class="sidebar-item active">Gender</div>222 <div class="sidebar-item">Category</div>223 <div class="sidebar-item">Price</div>224 <div class="sidebar-item">Brands <span class="badge">1</span></div>225 <div class="sidebar-item">Occasion <span class="badge">1</span></div>226 <div class="sidebar-item">Discount</div>227 <div class="sidebar-item">Colors</div>228 <div class="sidebar-item">Size & Fit</div>229 </div>230 <div class="panel">231 <div class="checkbox-row">232 <span class="checkbox"></span>233 <span class="label">Men (848)</span>234 </div>235 </div>236 </div>237 238 <!-- Bottom bar -->239 <div class="bottom-bar">240 <button class="btn reset">Reset</button>241 <button class="btn apply">Apply Filter</button>242 </div>243 244 <div class="system-pill"></div>245</div>246</body>247</html>