GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Filters UI - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#1f2b2e;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#ffffff;border-radius:0;11 }12 /* Top gradient header */13 .topbar{14 width:100%;height:260px;15 background:linear-gradient(180deg,#a8e1dc 0%, #b5e6df 40%, #d1efe9 100%);16 position:relative;padding:0 24px;17 }18 .status{19 height:54px;display:flex;align-items:center;justify-content:space-between;20 color:#202020;font-size:32px;padding-top:6px;21 }22 .status .icons{display:flex;gap:24px;align-items:center;}23 .icon-dot{width:16px;height:16px;background:#1f2b2e;border-radius:50%;}24 .icon-signal{width:26px;height:18px;border:2px solid #1f2b2e;border-top:none;}25 /* Search row */26 .search-row{margin-top:18px;display:flex;align-items:center;gap:24px;}27 .back-btn{28 width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;29 }30 .back-btn svg{width:36px;height:36px;fill:#1f2b2e;}31 .search-input{32 flex:1;height:110px;background:#fff;border-radius:26px;33 box-shadow:0 2px 0 rgba(0,0,0,0.08);34 border:1px solid #e6e6e6;display:flex;align-items:center;padding:0 26px;gap:20px;35 }36 .search-input .sicon svg{width:40px;height:40px;fill:#2d2d2d;}37 .search-input .text{flex:1;color:#1c1c1c;font-size:42px;}38 .camera{39 width:78px;height:78px;border-radius:20px;background:#f5f5f5;border:1px solid #d8d8d8;40 display:flex;align-items:center;justify-content:center;41 }42 .camera svg{width:38px;height:38px;fill:#2d2d2d;}43 /* Prime toggle strip and Filters dropdown */44 .strip{45 display:flex;align-items:center;gap:18px;margin-top:18px;padding-left:6px;46 }47 .prime-badge{48 display:flex;align-items:center;gap:10px;color:#3c77a8;font-weight:700;font-size:34px;49 }50 .toggle{51 width:88px;height:46px;border-radius:26px;background:#e8eaec;position:relative;border:1px solid #d0d4d6;52 }53 .toggle:after{54 content:'';position:absolute;left:6px;top:6px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #c6c6c6;55 }56 .filters-pill{57 margin-left:auto;margin-right:8px;background:#f1f4f6;border:1px solid #d9e1e4;color:#285a62;58 padding:18px 26px;border-radius:18px;font-weight:600;font-size:36px;display:flex;align-items:center;gap:10px;59 }60 .filters-pill svg{width:18px;height:18px;fill:#285a62;}61 /* Filter panel */62 .panel{63 position:absolute;left:0;right:0;top:260px;bottom:0;background:#fff;64 border-top:1px solid #e6e6e6;display:flex;flex-direction:column;65 }66 .panel-header{67 height:110px;display:flex;align-items:center;justify-content:space-between;68 padding:0 28px;border-bottom:1px solid #e9ecef;font-size:48px;font-weight:700;color:#22343c;69 }70 .panel-header .close{font-size:42px;color:#4c6b74;font-weight:600;}71 .panel-body{display:flex;flex:1;min-height:0;}72 /* Left nav */73 .left-nav{74 width:330px;background:#f4f8fa;border-right:1px solid #e5ecef;height:100%;overflow:hidden;75 }76 .nav-item{77 padding:34px 26px;height:120px;display:flex;align-items:center;border-bottom:1px solid #eef2f4;78 color:#374a52;font-size:36px;font-weight:600;79 }80 .nav-item.active{81 background:#ffffff;border-left:8px solid #2f6e7f;color:#1f2f34;82 }83 /* Right content */84 .content{flex:1;padding:34px 28px;overflow:auto;}85 .content h2{margin:10px 0 18px 0;font-size:48px;color:#22343c;}86 .section-title{font-size:40px;color:#2a3d43;margin-top:10px;margin-bottom:16px;}87 .chips{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:26px;}88 .chip{89 padding:22px 32px;background:#f3f4f5;border-radius:22px;border:1px solid #e0e2e4;90 font-size:40px;color:#2b3a3f;font-weight:700;91 }92 .chip.small{font-size:38px;font-weight:600;}93 /* Sticky bottom results button */94 .results-btn{95 position:absolute;right:36px;bottom:46px;96 background:#2f6e7f;color:#fff;border-radius:26px;padding:26px 40px;font-size:44px;font-weight:700;97 box-shadow:0 6px 14px rgba(47,110,127,0.35);98 }99 /* Placeholder image box utility */100 .img{background:#E0E0E0;border:1px solid #BDBDBD;color:#757575;display:flex;align-items:center;justify-content:center;}101</style>102</head>103<body>104<div id="render-target">105 <div class="topbar">106 <div class="status">107 <div>11:03</div>108 <div class="icons">109 <div class="icon-dot"></div>110 <div class="icon-dot"></div>111 <div class="icon-dot"></div>112 <div class="icon-signal"></div>113 </div>114 </div>115 116 <div class="search-row">117 <div class="back-btn">118 <svg viewBox="0 0 24 24"><path d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12l10-10 1.9 1.9z"/></svg>119 </div>120 <div class="search-input">121 <div class="sicon">122 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.6 6.6 0 1 0-.8.8l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/></svg>123 </div>124 <div class="text">sofa gray colour</div>125 <div class="camera">126 <svg viewBox="0 0 24 24"><path d="M9 3 7 6H4c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-3l-2-3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.2a2.8 2.8 0 1 0 0-5.6 2.8 2.8 0 0 0 0 5.6z"/></svg>127 </div>128 </div>129 </div>130 131 <div class="strip">132 <div class="prime-badge">133 <span>prime</span>134 </div>135 <div class="toggle"></div>136 <div class="filters-pill">137 <span>Filters</span>138 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>139 </div>140 </div>141 </div>142 143 <div class="panel">144 <div class="panel-header">145 <div>Filters</div>146 <div class="close">Close</div>147 </div>148 <div class="panel-body">149 <div class="left-nav">150 <div class="nav-item">Prime & Delivery</div>151 <div class="nav-item active">Categories</div>152 <div class="nav-item">Brands</div>153 <div class="nav-item">Price and Deals</div>154 <div class="nav-item">Customer Reviews</div>155 <div class="nav-item">Sort by</div>156 <div class="nav-item">Quality Certification</div>157 <div class="nav-item">Furniture Assembly</div>158 <div class="nav-item">Sofa Type</div>159 <div class="nav-item">Material</div>160 <div class="nav-item">Sofa Size</div>161 </div>162 <div class="content">163 <h2>Categories</h2>164 165 <div class="section-title">Living Room Furniture</div>166 <div class="chips">167 <div class="chip">All</div>168 <div class="chip">Sofas & Couches</div>169 <div class="chip">Sofa Sets</div>170 </div>171 <div class="chips">172 <div class="chip">Living Room Sets</div>173 </div>174 175 <div class="section-title" style="margin-top:30px;">Home Furnishing</div>176 <div class="chips">177 <div class="chip small">All</div>178 </div>179 180 <!-- Extra vertical space to mimic scrolling area -->181 <div style="height:620px;"></div>182 </div>183 </div>184 </div>185 186 <div class="results-btn">Show 253 results</div>187</div>188</body>189</html>