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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#FFFFFF; border-radius:0;10 }11 12 /* Header / status gradient */13 .header {14 position:absolute; left:0; top:0; width:100%; height:240px;15 background: linear-gradient(180deg, #b9e5d9 0%, #c4e7dc 100%);16 box-sizing:border-box; padding:20px 32px;17 }18 .status-row {19 height:40px; display:flex; align-items:center; justify-content:space-between; color:#1a1a1a;20 font-size:32px; opacity:0.9;21 }22 .status-icons { display:flex; gap:28px; align-items:center; }23 .icon {24 width:34px; height:34px;25 display:inline-flex; align-items:center; justify-content:center;26 color:#333;27 }28 .title-row {29 margin-top:24px; height:100px; display:flex; align-items:center; justify-content:space-between;30 color:#0d0d0d;31 }32 .title-row .title { font-size:64px; font-weight:600; }33 .title-row .close { font-size:48px; color:#0d4b63; }34 35 /* Main area */36 .content {37 position:absolute; left:0; top:240px; width:100%; height:2060px; background:#fff;38 display:flex;39 }40 .left-nav {41 width:360px; background:#eef1f2; height:100%; border-right:1px solid #e0e0e0;42 box-sizing:border-box; padding-top:20px;43 }44 .nav-item {45 padding:28px 28px; font-size:42px; color:#111; border-bottom:1px solid #e7e7e7;46 }47 .nav-item.section { font-weight:600; }48 .nav-item.selected {49 background:#6f7479; color:#fff; font-weight:600;50 }51 52 .right-panel {53 width:720px; padding:32px; box-sizing:border-box; overflow:hidden;54 }55 .panel-title {56 font-size:48px; font-weight:700; color:#1c1c1c; margin:18px 0 12px 0;57 }58 .pill {59 display:inline-flex; align-items:center; gap:16px;60 background:#f5f5f5; border:1px solid #dddddd; color:#1c1c1c;61 padding:28px 32px; border-radius:22px; font-size:40px; margin:14px 0;62 }63 .pill + .pill { margin-top:22px; }64 .prime-badge {65 display:inline-flex; align-items:center; gap:16px; padding:24px 32px;66 background:#f6fbff; border:1px solid #d6e9ff; border-radius:18px; font-size:40px; color:#2e79c7;67 }68 .check-icon {69 width:40px; height:40px;70 }71 72 /* Bottom sticky button */73 .bottom-bar {74 position:absolute; left:0; bottom:60px; width:100%; display:flex; justify-content:center;75 }76 .cta {77 background:#1f6a78; color:#fff; font-size:46px; padding:28px 36px; border-radius:26px;78 box-shadow:0 6px 12px rgba(0,0,0,0.12);79 }80 81 /* Simple SVG buttons/icons */82 .svg-icon { width:40px; height:40px; }83</style>84</head>85<body>86<div id="render-target">87 88 <div class="header">89 <div class="status-row">90 <div>11:04</div>91 <div class="status-icons">92 <div class="icon">93 <!-- WiFi -->94 <svg class="svg-icon" viewBox="0 0 24 24">95 <path d="M2 8c5-5 15-5 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>96 <path d="M5 12c3-3 11-3 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>97 <circle cx="12" cy="16" r="2" fill="#333"/>98 </svg>99 </div>100 <div class="icon">101 <!-- Mail -->102 <svg class="svg-icon" viewBox="0 0 24 24">103 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#333" stroke-width="2"/>104 <path d="M3 7l9 6 9-6" fill="none" stroke="#333" stroke-width="2"/>105 </svg>106 </div>107 <div class="icon">108 <!-- Cloud -->109 <svg class="svg-icon" viewBox="0 0 24 24">110 <path d="M6 16h10a4 4 0 0 0 0-8 5 5 0 0 0-9 2H6a4 4 0 0 0 0 6z" fill="#333"/>111 </svg>112 </div>113 <div class="icon">114 <!-- Location -->115 <svg class="svg-icon" viewBox="0 0 24 24">116 <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#333"/>117 </svg>118 </div>119 <div class="icon">120 <!-- Battery -->121 <svg class="svg-icon" viewBox="0 0 28 24">122 <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#333" stroke-width="2"/>123 <rect x="4" y="8" width="16" height="8" fill="#333"/>124 <rect x="22" y="10" width="4" height="4" fill="#333"/>125 </svg>126 </div>127 </div>128 </div>129 130 <div class="title-row">131 <div class="title">Filters</div>132 <div class="close">Close</div>133 </div>134 </div>135 136 <div class="content">137 <!-- Left navigation -->138 <div class="left-nav">139 <div class="nav-item section">Prime & Delivery</div>140 <div class="nav-item">Categories</div>141 <div class="nav-item">Brands</div>142 <div class="nav-item">Colours</div>143 <div class="nav-item">Sizes</div>144 <div class="nav-item">Price and Deals</div>145 <div class="nav-item">Customer Reviews</div>146 <div class="nav-item">Sort by</div>147 <div class="nav-item selected">Men's Formal Shoes</div>148 <div class="nav-item">Shoes Special Features</div>149 <div class="nav-item">Shoe Outer Material</div>150 <div class="nav-item">Shoes Closure Type</div>151 <div class="nav-item">Sole Width</div>152 <div class="nav-item">Shoes Lifestyle</div>153 <div class="nav-item">Lace-Up Flat Style</div>154 <div class="nav-item">Shoe Toe Style</div>155 <div class="nav-item">Height Map</div>156 </div>157 158 <!-- Right panel -->159 <div class="right-panel">160 <div class="panel-title">Delivery</div>161 <div class="pill">Get It Today</div>162 <div class="pill">Get It by Tomorrow</div>163 <div class="pill">Get It in 2 Days</div>164 165 <div class="panel-title" style="margin-top:36px;">Shipping Options</div>166 <div class="pill">Eligible for Pay On Delivery</div>167 168 <div class="panel-title" style="margin-top:36px;">Prime Programs</div>169 <div class="prime-badge">170 <svg class="check-icon" viewBox="0 0 24 24">171 <path d="M5 13l4 4 10-10" stroke="#2e79c7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 prime174 </div>175 </div>176 </div>177 178 <div class="bottom-bar">179 <div class="cta">Show 10,000+ results</div>180 </div>181 182</div>183</body>184</html>