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>Filters UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Header / status gradient */15 .header {16 position: relative;17 width: 100%;18 height: 210px;19 background: linear-gradient(180deg, #89d7d3 0%, #b6e6e3 60%, #ffffff 100%);20 box-sizing: border-box;21 padding: 24px 36px;22 }23 .status-bar {24 display: flex; align-items: center; justify-content: space-between;25 color: #1b1b1b; font-weight: 600; font-size: 36px;26 margin-bottom: 32px;27 }28 .status-left { display: flex; align-items: center; gap: 14px; }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .status-icon { width: 40px; height: 40px; display: inline-block; }31 32 .top-row {33 display: flex; align-items: center; justify-content: space-between;34 padding: 0 6px;35 }36 .title { font-size: 54px; font-weight: 700; color: #222; }37 .link-close { font-size: 48px; color: #0a6a77; text-decoration: none; font-weight: 600; }38 39 /* Main two-column layout */40 .main {41 position: absolute;42 top: 210px; left: 0; right: 0; bottom: 190px;43 display: flex;44 }45 .sidebar {46 width: 360px; background: #f1f2f3; border-right: 1px solid #e3e4e6;47 padding-top: 24px; box-sizing: border-box;48 }49 .side-item {50 padding: 32px 28px;51 font-size: 40px; color: #222;52 border-bottom: 1px solid #ececec;53 }54 .side-item.active {55 background: #6f7275; color: #ffffff; font-style: italic;56 }57 58 .content {59 flex: 1; background: #fff; padding: 32px 38px; box-sizing: border-box;60 }61 .section-title {62 font-size: 44px; font-weight: 700; color: #222; margin: 18px 0 18px;63 }64 .chips {65 display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px;66 }67 .chip {68 background: #efefef; color: #333; border-radius: 28px;69 padding: 18px 26px; font-size: 38px; line-height: 1; border: 1px solid #e0e0e0;70 }71 72 /* Bottom action bar */73 .bottom-bar {74 position: absolute; left: 0; right: 0; bottom: 0; height: 190px;75 border-top: 1px solid #d7dadd;76 background: #ffffff;77 box-shadow: 0 -2px 4px rgba(0,0,0,0.06);78 padding: 22px 32px; box-sizing: border-box;79 display: flex; align-items: center; justify-content: space-between;80 }81 .btn {82 padding: 28px 40px; border-radius: 28px; font-size: 44px; font-weight: 600; cursor: pointer;83 }84 .btn-outline {85 color: #0a6a77; background: #ffffff; border: 2px solid #e3e9ea;86 box-shadow: 0 1px 0 rgba(0,0,0,0.03);87 }88 .btn-primary {89 color: #ffffff; background: #0a6a77; border: 0; box-shadow: 0 6px 10px rgba(10,106,119,0.25);90 }91 92 /* Gesture bar */93 .gesture {94 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);95 width: 420px; height: 12px; background: #7b7b7b; border-radius: 10px;96 opacity: 0.75;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <div class="header">104 <div class="status-bar">105 <div class="status-left">106 <span>1:05</span>107 <!-- simple lock icon -->108 <svg class="status-icon" viewBox="0 0 24 24">109 <rect x="6" y="10" width="12" height="10" rx="2" fill="#1b1b1b"></rect>110 <path d="M8 10V7a4 4 0 118 0v3" stroke="#1b1b1b" stroke-width="2" fill="none"></path>111 </svg>112 <!-- small badge -->113 <svg class="status-icon" viewBox="0 0 24 24">114 <circle cx="12" cy="12" r="10" fill="#3f3f3f"></circle>115 <text x="12" y="16" font-size="12" fill="#fff" text-anchor="middle">LR</text>116 </svg>117 <svg class="status-icon" viewBox="0 0 24 24">118 <path d="M3 17h18" stroke="#3f3f3f" stroke-width="2"></path>119 <path d="M5 14h14" stroke="#3f3f3f" stroke-width="2"></path>120 <path d="M8 11h8" stroke="#3f3f3f" stroke-width="2"></path>121 </svg>122 <svg class="status-icon" viewBox="0 0 24 24">123 <circle cx="12" cy="12" r="2" fill="#3f3f3f"></circle>124 </svg>125 </div>126 <div class="status-right">127 <!-- wifi -->128 <svg class="status-icon" viewBox="0 0 24 24">129 <path d="M2 8c5-5 15-5 20 0" stroke="#1b1b1b" stroke-width="2" fill="none"></path>130 <path d="M5 11c3-3 11-3 14 0" stroke="#1b1b1b" stroke-width="2" fill="none"></path>131 <path d="M8 14c2-2 6-2 8 0" stroke="#1b1b1b" stroke-width="2" fill="none"></path>132 <circle cx="12" cy="17" r="1.8" fill="#1b1b1b"></circle>133 </svg>134 <!-- battery -->135 <svg class="status-icon" viewBox="0 0 24 24">136 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#1b1b1b" stroke-width="2" fill="none"></rect>137 <rect x="21" y="9" width="2" height="6" fill="#1b1b1b"></rect>138 <rect x="4" y="8" width="12" height="8" fill="#1b1b1b"></rect>139 </svg>140 </div>141 </div>142 143 <div class="top-row">144 <div class="title">Filters (1)</div>145 <a class="link-close" href="#">Close</a>146 </div>147 </div>148 149 <div class="main">150 <div class="sidebar">151 <div class="side-item">Prime & Delivery</div>152 <div class="side-item">Categories <span style="background:#dedede; border-radius:12px; padding:6px 10px; font-size:28px; margin-left:8px;">1</span></div>153 <div class="side-item">Brands</div>154 <div class="side-item">Price and Deals</div>155 <div class="side-item">Customer Reviews</div>156 <div class="side-item">Sort by</div>157 <div class="side-item active">Lapdesks</div>158 <div class="side-item">Item Depth Front To Back</div>159 <div class="side-item">Item Height Base to Top</div>160 <div class="side-item">Item Width Side To Side</div>161 <div class="side-item">Finish Type</div>162 <div class="side-item">Special Features</div>163 <div class="side-item">New Arrivals</div>164 <div class="side-item">Availability</div>165 </div>166 167 <div class="content">168 <div class="section-title">Computers & Accessories Brands</div>169 <div class="chips">170 <div class="chip">Made for Amazon</div>171 <div class="chip">Top Brands</div>172 </div>173 174 <div class="section-title">Brands</div>175 <div class="chips">176 <div class="chip">Portronics</div>177 <div class="chip">Rife</div>178 <div class="chip">Isomars</div>179 <div class="chip">EUREKA ERGONOMIC</div>180 <div class="chip">MemeHo</div>181 <div class="chip">ABOUT SPACE</div>182 </div>183 </div>184 </div>185 186 <div class="bottom-bar">187 <button class="btn btn-outline">Clear Filters</button>188 <button class="btn btn-primary">Show 996 results</button>189 </div>190 191 <div class="gesture"></div>192</div>193</body>194</html>