GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, 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, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff;11 }12 13 /* Status bar */14 .status-bar {15 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;16 color:#222; font-size:30px;17 }18 .status-icons { display:flex; gap:18px; align-items:center; }19 .icon-battery, .icon-wifi, .icon-signal {20 width:36px; height:24px;21 }22 23 /* App bar */24 .app-bar {25 height:120px; display:flex; align-items:center;26 padding:0 24px 0 16px; border-bottom:1px solid #e6e6e6;27 }28 .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }29 .back-btn svg { width:34px; height:34px; fill:#000; }30 .title { font-size:48px; font-weight:600; margin-left:8px; color:#111; }31 .clear-link { margin-left:auto; font-size:36px; color:#111; opacity:.85; }32 33 /* Main content with sidebar */34 .main {35 position:absolute; left:0; right:0; top:210px; bottom:220px;36 display:flex;37 }38 .sidebar {39 width:260px; background:#f1f3f6; height:100%; overflow:hidden; padding-top:10px;40 border-right:1px solid #e5e5e5;41 }42 .side-item {43 padding:28px 22px;44 font-size:34px; line-height:42px; color:#111;45 border-radius:8px;46 }47 .side-item + .side-item { }48 .wrap { width:210px; }49 .category-row {50 position:absolute; left:0; bottom:210px; width:260px; background:#f1f3f6;51 padding:20px 22px; font-size:34px; border-top:1px solid #e5e5e5;52 display:flex; align-items:center; justify-content:space-between;53 }54 .category-row .check {55 width:36px; height:36px;56 }57 58 .content {59 flex:1; padding:28px 40px;60 }61 .crumb { color:#777; font-size:30px; display:flex; align-items:center; gap:8px; }62 .crumb svg { width:22px; height:22px; fill:#777; }63 .link-blue {64 color:#1976d2; font-size:40px; margin-top:40px; display:inline-block;65 }66 67 /* Bottom bar */68 .bottom-bar {69 position:absolute; left:0; right:0; bottom:72px; height:148px;70 display:flex; align-items:center; padding:0 30px;71 }72 .products-found {73 color:#111;74 }75 .products-found .count { font-size:44px; font-weight:700; }76 .products-found .label { font-size:30px; color:#7a7a7a; margin-top:8px; }77 .apply-btn {78 margin-left:auto; width:530px; height:118px; border-radius:12px;79 background:#e5662d; color:#fff; font-size:42px; font-weight:600;80 display:flex; align-items:center; justify-content:center;81 box-shadow:0 4px 0 rgba(0,0,0,0.06) inset;82 }83 84 /* Gesture bar */85 .gesture {86 position:absolute; left:50%; transform:translateX(-50%);87 bottom:20px; width:420px; height:10px; border-radius:6px; background:#cfcfcf;88 }89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status bar -->95 <div class="status-bar">96 <div>7:28</div>97 <div class="status-icons">98 <!-- Simple icons -->99 <svg class="icon-signal" viewBox="0 0 24 24">100 <rect x="2" y="14" width="3" height="8" fill="#222"/>101 <rect x="7" y="11" width="3" height="11" fill="#222"/>102 <rect x="12" y="8" width="3" height="14" fill="#222"/>103 <rect x="17" y="5" width="3" height="17" fill="#222"/>104 </svg>105 <svg class="icon-wifi" viewBox="0 0 24 24">106 <path d="M12 18a2 2 0 1 0 0.001 0z" fill="#222"/>107 <path d="M2 10c5-4 15-4 20 0" stroke="#222" stroke-width="2" fill="none"/>108 <path d="M5 13c3-3 11-3 14 0" stroke="#222" stroke-width="2" fill="none"/>109 <path d="M8 16c2-2 6-2 8 0" stroke="#222" stroke-width="2" fill="none"/>110 </svg>111 <svg class="icon-battery" viewBox="0 0 28 16">112 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>113 <rect x="3" y="5" width="18" height="6" fill="#222"/>114 <rect x="23" y="6" width="4" height="4" fill="#222"/>115 </svg>116 </div>117 </div>118 119 <!-- App bar -->120 <div class="app-bar">121 <div class="back-btn">122 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/></svg>123 </div>124 <div class="title">Filters</div>125 <div class="clear-link">Clear Filters</div>126 </div>127 128 <!-- Main -->129 <div class="main">130 <!-- Sidebar -->131 <div class="sidebar">132 <div class="side-item"><div class="wrap">Number of<br>Drawers</div></div>133 <div class="side-item"><div class="wrap">Number of<br>Shelves</div></div>134 <div class="side-item"><div class="wrap">Customer<br>Ratings</div></div>135 <div class="side-item"><div class="wrap">Offers</div></div>136 <div class="side-item"><div class="wrap">Configuration</div></div>137 <div class="side-item"><div class="wrap">Cpu<br>Compartment</div></div>138 <div class="side-item"><div class="wrap">Keyboard Tray</div></div>139 <div class="side-item"><div class="wrap">GST Invoice<br>Available</div></div>140 <div class="side-item"><div class="wrap">Durability<br>Certification & …</div></div>141 <div class="side-item"><div class="wrap">Width</div></div>142 <div class="side-item"><div class="wrap">Height</div></div>143 <div class="side-item"><div class="wrap">Depth</div></div>144 145 <div class="category-row">146 <span>Category</span>147 <svg class="check" viewBox="0 0 24 24">148 <path fill="#1976d2" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>149 </svg>150 </div>151 </div>152 153 <!-- Content area -->154 <div class="content">155 <div class="crumb">156 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>157 <span>Tables</span>158 </div>159 <div class="link-blue">Office Study Table</div>160 </div>161 </div>162 163 <!-- Bottom bar -->164 <div class="bottom-bar">165 <div class="products-found">166 <div class="count">890</div>167 <div class="label">products found</div>168 </div>169 <div class="apply-btn">Apply</div>170 </div>171 172 <!-- Gesture handle -->173 <div class="gesture"></div>174 175</div>176</body>177</html>