GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Filters - Drill Machine</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 border-radius: 24px;13 box-shadow: 0 6px 22px rgba(0,0,0,0.08);14 }15 16 /* Header */17 .header {18 position: relative;19 height: 270px;20 background: linear-gradient(180deg, #97dfd3 0%, #c9eef6 100%);21 }22 .back-btn {23 position: absolute; left: 24px; top: 92px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;24 }25 .back-btn svg { width: 36px; height: 36px; fill: none; stroke: #2d2d2d; stroke-width: 6; }26 .search-bar {27 position: absolute; left: 84px; right: 84px; top: 80px; height: 110px;28 background: #fff; border-radius: 26px; box-shadow: 0 3px 8px rgba(0,0,0,0.12);29 display: flex; align-items: center; padding: 0 28px; gap: 22px;30 }31 .search-icon svg { width: 42px; height: 42px; stroke: #5f5f5f; stroke-width: 6; fill: none; }32 .search-text { flex: 1; font-size: 42px; color: #222; }33 .scan-icon {34 width: 64px; height: 64px; border: 3px solid #cfd8dc; border-radius: 16px; display: flex; align-items: center; justify-content: center;35 }36 .scan-icon svg { width: 36px; height: 36px; fill: #90a4ae; }37 38 .chip-row {39 position: absolute; left: 0; right: 0; top: 200px; padding: 0 20px; display: flex; gap: 16px; align-items: center;40 }41 .chip {42 background: #e9ecef; color: #333; border-radius: 28px; padding: 16px 26px; font-size: 32px; display: inline-flex; align-items: center; gap: 14px;43 }44 .chip .prime { color: #2c9cf0; font-weight: 600; }45 .toggle {46 width: 70px; height: 38px; border-radius: 19px; background: #dfe4ea; position: relative;47 }48 .toggle::after {49 content: ""; position: absolute; left: 6px; top: 6px; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15);50 }51 .stars { color: #ff9900; letter-spacing: 2px; }52 .chip-right { margin-left: auto; }53 54 /* Content area */55 .filters-header {56 position: absolute; top: 270px; left: 0; right: 0; height: 90px; background: #fff;57 border-top-left-radius: 22px; border-top-right-radius: 22px; box-shadow: 0 -2px 0 rgba(0,0,0,0.03);58 display: flex; align-items: center; justify-content: space-between; padding: 0 36px; font-size: 40px; font-weight: 600;59 }60 .filters-header .close { font-size: 36px; color: #387b8f; font-weight: 500; }61 62 .content {63 position: absolute; top: 360px; left: 0; right: 0; bottom: 210px; background: #fff; display: flex;64 }65 .sidebar {66 width: 320px; background: #f6f8f9; border-right: 1px solid #e5e7ea; padding-top: 12px;67 }68 .side-item {69 height: 140px; display: flex; align-items: center; padding: 0 28px; font-size: 36px; color: #333; border-bottom: 1px solid #eef1f3;70 }71 .side-item.active {72 background: #eef6f7; font-weight: 600; position: relative; color: #1f6e7e;73 }74 .side-item.active::before {75 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: #1f6e7e; border-radius: 0 6px 6px 0;76 }77 78 .main {79 flex: 1; padding: 40px 40px;80 }81 .section-title {82 font-size: 52px; font-weight: 700; margin-bottom: 26px;83 }84 .group-title {85 font-size: 42px; font-weight: 600; margin: 28px 0 18px;86 }87 .tag {88 display: inline-block; background: #efefef; border: 1px solid #e0e0e0; border-radius: 24px; padding: 16px 24px; font-size: 34px; color: #333; margin: 10px 12px 10px 0;89 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);90 }91 92 /* Bottom bar */93 .bottom-bar {94 position: absolute; left: 0; right: 0; bottom: 0; height: 210px; background: #fff; border-top: 1px solid #dfe4ea;95 display: flex; align-items: center; justify-content: flex-end; padding: 0 40px;96 }97 .cta {98 background: #2f6f7e; color: #fff; font-size: 40px; font-weight: 600; padding: 28px 46px; border-radius: 26px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);99 }100 101 /* Simple chevron icon for Filters chip */102 .chev-up {103 width: 24px; height: 24px; margin-left: 6px;104 }105 .chev-up svg { width: 24px; height: 24px; fill: none; stroke: #333; stroke-width: 6; }106</style>107</head>108<body>109<div id="render-target">110 <div class="header">111 <div class="back-btn" aria-label="Back">112 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" /></svg>113 </div>114 <div class="search-bar">115 <div class="search-icon">116 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><path d="M15 15 L22 22"></path></svg>117 </div>118 <div class="search-text">drill machine</div>119 <div class="scan-icon" aria-label="Scan">120 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect></svg>121 </div>122 </div>123 <div class="chip-row">124 <div class="chip">125 <span class="prime">prime</span>126 <div class="toggle"></div>127 </div>128 <div class="chip">129 <span class="stars">★★★★★</span>130 <span> & Up</span>131 </div>132 <div class="chip">Under ₹500</div>133 <div class="chip chip-right">Filters134 <span class="chev-up">135 <svg viewBox="0 0 24 24"><path d="M4 15 L12 7 L20 15"></path></svg>136 </span>137 </div>138 </div>139 </div>140 141 <div class="filters-header">142 <div>Filters</div>143 <div class="close">Close</div>144 </div>145 146 <div class="content">147 <div class="sidebar">148 <div class="side-item">Prime & Delivery</div>149 <div class="side-item active">Categories</div>150 <div class="side-item">Brands</div>151 <div class="side-item">Price and Deals</div>152 <div class="side-item">Customer Reviews</div>153 <div class="side-item">Sort by</div>154 <div class="side-item">New Arrivals</div>155 <div class="side-item">Item Condition</div>156 <div class="side-item">Availability</div>157 </div>158 159 <div class="main">160 <div class="section-title">Categories</div>161 162 <div class="group-title">Power Drills</div>163 <div class="tag">All</div>164 <div class="tag">Drill Sets</div>165 <div class="tag">Impact Drivers</div>166 <div class="tag">Combi Drills</div>167 <div class="tag">Power Core Drills</div>168 <div class="tag">Drill Drivers</div>169 170 <div class="group-title" style="margin-top:48px;">Drill Tool Kits</div>171 <div class="tag">All</div>172 173 <div class="group-title" style="margin-top:48px;">Power Rotary Hammers</div>174 <div class="tag">All</div>175 </div>176 </div>177 178 <div class="bottom-bar">179 <div class="cta">Show 5,470 results</div>180 </div>181</div>182</body>183</html>