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>Filter & Sort</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16 color: #111111;17 }18 19 /* Status bar */20 .status-bar {21 height: 130px;22 background: #CFCFCF;23 position: relative;24 color: #ffffff;25 font-weight: 600;26 font-size: 42px;27 letter-spacing: 0.5px;28 }29 .status-time {30 position: absolute;31 left: 44px;32 top: 42px;33 }34 .status-icons {35 position: absolute;36 right: 34px;37 top: 36px;38 display: flex;39 align-items: center;40 gap: 24px;41 }42 .icon-wifi, .icon-battery { width: 48px; height: 48px; display: inline-block; }43 44 /* Header */45 .header {46 height: 150px;47 display: flex;48 align-items: center;49 padding: 0 40px 0 40px;50 box-sizing: border-box;51 }52 .back-x {53 width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center;54 }55 .header-title {56 font-size: 64px;57 font-weight: 700;58 margin-left: 20px;59 }60 61 /* Content */62 .content {63 padding: 10px 54px 220px 54px;64 box-sizing: border-box;65 }66 .row {67 display: flex;68 justify-content: space-between;69 align-items: center;70 padding: 24px 0;71 font-size: 40px;72 color: #444444;73 }74 .row .label { color: #333333; }75 .row .value { color: #777777; }76 77 .divider-space { height: 18px; }78 79 .price-range-labels {80 display: flex;81 justify-content: space-between;82 padding: 10px 0 10px 0;83 font-size: 36px;84 color: #333333;85 }86 87 .slider {88 position: relative;89 height: 80px;90 margin-top: 10px;91 margin-bottom: 30px;92 }93 .slider-line {94 position: absolute;95 top: 36px;96 left: 10px;97 right: 10px;98 height: 6px;99 background: #111111;100 border-radius: 3px;101 }102 .slider-knob {103 position: absolute;104 top: 8px;105 width: 64px; height: 64px;106 background: #111111;107 border-radius: 50%;108 }109 .knob-left { left: 0; }110 .knob-right { right: 0; }111 112 .filter-item {113 padding: 34px 0;114 font-size: 44px;115 color: #444444;116 }117 118 /* Sticky footer button */119 .footer {120 position: absolute;121 left: 0; right: 0; bottom: 0;122 height: 220px;123 background: #F2F2F2;124 border-top: 1px solid #E0E0E0;125 display: flex;126 align-items: center;127 justify-content: center;128 padding: 0 54px;129 box-sizing: border-box;130 }131 .primary-btn {132 width: 100%;133 height: 140px;134 background: #111111;135 color: #ffffff;136 border-radius: 6px;137 display: flex;138 align-items: center;139 justify-content: center;140 font-size: 48px;141 font-weight: 700;142 letter-spacing: 0.5px;143 }144</style>145</head>146<body>147<div id="render-target">148 <!-- Status Bar -->149 <div class="status-bar">150 <div class="status-time">12:53</div>151 <div class="status-icons">152 <!-- Simple Wi-Fi icon -->153 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">154 <path d="M2 8c5-4 15-4 20 0"></path>155 <path d="M5 12c3-3 11-3 14 0"></path>156 <path d="M8 16c2-2 6-2 8 0"></path>157 <circle cx="12" cy="19" r="1.5" fill="#ffffff" stroke="none"></circle>158 </svg>159 <!-- Simple Battery icon -->160 <svg class="icon-battery" viewBox="0 0 26 16" fill="none" stroke="#ffffff" stroke-width="2">161 <rect x="1" y="3" width="20" height="10" rx="2"></rect>162 <rect x="3" y="5" width="16" height="6" fill="#ffffff" stroke="none"></rect>163 <rect x="22" y="6" width="3" height="4" fill="#ffffff" stroke="none"></rect>164 </svg>165 </div>166 </div>167 168 <!-- Header -->169 <div class="header">170 <div class="back-x">171 <svg width="48" height="48" viewBox="0 0 24 24" stroke="#111111" stroke-width="2" fill="none" stroke-linecap="round">172 <path d="M5 5l14 14"></path>173 <path d="M19 5L5 19"></path>174 </svg>175 </div>176 <div class="header-title">Filter & Sort</div>177 </div>178 179 <!-- Content -->180 <div class="content">181 <div class="row">182 <div class="label">Sort By</div>183 <div class="value">Recommended</div>184 </div>185 186 <div class="divider-space"></div>187 188 <div class="row">189 <div class="label">Price (MRP)</div>190 <div class="value">191 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#111111" stroke-width="2">192 <path d="M4 12h16"></path>193 </svg>194 </div>195 </div>196 197 <div class="price-range-labels">198 <div>499.00 Rs.</div>199 <div>5499.00 Rs.</div>200 </div>201 202 <div class="slider">203 <div class="slider-line"></div>204 <div class="slider-knob knob-left"></div>205 <div class="slider-knob knob-right"></div>206 </div>207 208 <div class="filter-item">Size</div>209 <div class="filter-item">Colour</div>210 <div class="filter-item">Pattern</div>211 <div class="filter-item">Product type</div>212 <div class="filter-item">Style</div>213 <div class="filter-item">Heel height</div>214 <div class="filter-item">Footwear style</div>215 <div class="filter-item">Quality</div>216 <div class="filter-item">Material</div>217 </div>218 219 <!-- Sticky Footer -->220 <div class="footer">221 <div class="primary-btn">Show 15 Items</div>222 </div>223</div>224</body>225</html>