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 - Drill Machine</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 24px;16 }17 18 /* Header gradient area */19 .header {20 position: relative;21 height: 300px;22 background: linear-gradient(180deg, #bfe9e5 0%, #dff4f2 55%, #f3f7f8 100%);23 padding-top: 28px;24 }25 26 /* fake status bar */27 .status {28 height: 56px;29 display: flex;30 align-items: center;31 padding: 0 36px;32 color: #2b2b2b;33 font-size: 36px;34 justify-content: space-between;35 opacity: 0.95;36 }37 .status .icons {38 display: flex;39 gap: 22px;40 align-items: center;41 }42 .dot { width: 10px; height: 10px; background:#6b6b6b; border-radius: 50%; display:inline-block; }43 44 /* Search Row */45 .search-row {46 position: absolute;47 left: 24px;48 right: 24px;49 top: 104px;50 display: flex;51 align-items: center;52 }53 .back-btn {54 width: 88px;55 height: 88px;56 border-radius: 44px;57 display: flex;58 align-items: center;59 justify-content: center;60 margin-right: 18px;61 }62 .search-box {63 flex: 1;64 height: 110px;65 background: #ffffff;66 border-radius: 28px;67 box-shadow: 0 2px 0 rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.08);68 display: flex;69 align-items: center;70 padding: 0 28px;71 gap: 20px;72 }73 .search-icon { width: 42px; height: 42px; }74 .search-text {75 flex: 1;76 color: #222;77 font-size: 40px;78 }79 .scan-btn {80 width: 96px;81 height: 96px;82 border-radius: 22px;83 background: #f3f6f7;84 border: 1px solid #d7e1e3;85 display: flex;86 align-items: center;87 justify-content: center;88 }89 90 /* chips under search */91 .chips {92 position: absolute;93 left: 0;94 right: 0;95 bottom: -12px;96 padding: 16px 24px 0 24px;97 display: flex;98 gap: 16px;99 }100 .chip {101 background: #efefef;102 color: #222;103 padding: 22px 28px;104 border-radius: 26px;105 font-size: 34px;106 display: flex;107 align-items: center;108 gap: 16px;109 border: 1px solid #e2e2e2;110 white-space: nowrap;111 }112 .chip .star {113 width: 34px; height: 34px;114 }115 .chip.filters {116 margin-left: auto;117 background: #efefef;118 }119 120 .toggle {121 position: relative;122 width: 120px;123 height: 62px;124 background: #eaecee;125 border-radius: 31px;126 border: 1px solid #d7dadc;127 }128 .toggle::after {129 content: "";130 position: absolute;131 width: 54px; height: 54px; border-radius: 50%;132 left: 4px; top: 3px;133 background: #ffffff;134 box-shadow: 0 1px 2px rgba(0,0,0,0.2);135 }136 .prime-mark {137 color: #0f7784; font-weight: 700;138 }139 140 /* Section header "Filters" */141 .bar {142 position: relative;143 background: #ffffff;144 border-top-left-radius: 22px;145 border-top-right-radius: 22px;146 margin-top: 12px;147 box-shadow: 0 -1px 0 #e7ecef inset;148 }149 .bar-inner {150 height: 120px;151 display: flex;152 align-items: center;153 padding: 0 28px;154 font-size: 44px;155 font-weight: 700;156 color: #111;157 justify-content: space-between;158 }159 .close-link { color: #25818d; font-size: 36px; font-weight: 600; }160 161 /* Filters layout */162 .filters {163 position: absolute;164 top: 420px;165 left: 0;166 right: 0;167 bottom: 220px;168 display: flex;169 }170 .left-nav {171 width: 300px;172 background: #f5f9fa;173 border-right: 1px solid #e4eef0;174 }175 .nav-item {176 padding: 36px 24px;177 font-size: 36px;178 color: #222;179 border-bottom: 1px solid #eef3f5;180 }181 .nav-item.active {182 color: #1f6d79;183 font-weight: 700;184 background: #ffffff;185 border-left: 8px solid #1b7b86;186 padding-left: 16px;187 }188 189 .content {190 flex: 1;191 background: #ffffff;192 padding: 36px 44px;193 }194 .content h2 {195 margin: 0 0 32px 0;196 font-size: 56px;197 color: #111;198 }199 .section-title {200 font-size: 38px;201 color: #333;202 margin: 40px 0 18px 0;203 font-weight: 700;204 }205 .pill {206 display: inline-flex;207 align-items: center;208 background: #f0f1f2;209 border: 1px solid #e2e4e6;210 color: #222;211 padding: 22px 28px;212 border-radius: 26px;213 font-size: 34px;214 margin-right: 18px;215 margin-bottom: 18px;216 }217 .prime-badge {218 display: inline-flex;219 align-items: center;220 gap: 14px;221 background: #eef7f8;222 border: 1px solid #d8ecef;223 padding: 22px 28px;224 border-radius: 26px;225 font-size: 38px;226 color: #0e6c78;227 font-weight: 700;228 }229 .prime-tick {230 width: 34px; height: 34px;231 }232 233 /* bottom sticky CTA */234 .cta {235 position: absolute;236 left: 0; right: 0; bottom: 100px;237 padding: 0 40px;238 }239 .cta .btn {240 margin-left: auto;241 width: 540px;242 height: 120px;243 background: #2e7583;244 color: #ffffff;245 border-radius: 26px;246 display: flex;247 align-items: center;248 justify-content: center;249 font-size: 44px;250 font-weight: 700;251 box-shadow: 0 8px 16px rgba(19,68,83,0.3);252 }253 254 /* android home pill */255 .home-pill {256 position: absolute;257 left: 50%;258 transform: translateX(-50%);259 bottom: 24px;260 width: 360px;261 height: 14px;262 background: #9aa0a6;263 border-radius: 7px;264 opacity: 0.65;265 }266</style>267</head>268<body>269<div id="render-target">270 271 <div class="header">272 <div class="status">273 <div>8:24</div>274 <div class="icons">275 <span class="dot"></span>276 <span class="dot"></span>277 <span class="dot"></span>278 </div>279 </div>280 281 <div class="search-row">282 <div class="back-btn" aria-label="Back">283 <svg width="44" height="44" viewBox="0 0 24 24" fill="#1b1b1b">284 <path d="M15.6 3.6L7.2 12l8.4 8.4-1.6 1.6L4 12 14 2l1.6 1.6z"/>285 </svg>286 </div>287 288 <div class="search-box">289 <svg class="search-icon" viewBox="0 0 24 24" fill="#666">290 <path d="M10 2a8 8 0 105.3 14l4.4 4.4 1.3-1.3-4.4-4.4A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/>291 </svg>292 <div class="search-text">drill machine</div>293 <div class="scan-btn" title="Scan">294 <svg width="44" height="44" viewBox="0 0 24 24" fill="#4a5a60">295 <path d="M4 7V4h3v2H6v1H4zm14 0V6h-1V4h3v3h-2zM4 17h2v1h1v2H4v-3zm14 0h2v3h-3v-2h1v-1zM7 9h10v6H7z" />296 </svg>297 </div>298 </div>299 </div>300 301 <div class="chips">302 <div class="chip">303 <span class="prime-mark">prime</span>304 <div class="toggle"></div>305 </div>306 307 <div class="chip">308 <svg class="star" viewBox="0 0 24 24" fill="#F7A824">309 <path d="M12 2l2.9 6 6.6.9-4.8 4.5 1.2 6.6L12 17l-5.9 3 1.2-6.6L2.4 8.9 9 8z"/>310 </svg>311 <svg class="star" viewBox="0 0 24 24" fill="#F7A824"><path d="M12 2l2.9 6 6.6.9-4.8 4.5 1.2 6.6L12 17l-5.9 3 1.2-6.6L2.4 8.9 9 8z"/></svg>312 <svg class="star" viewBox="0 0 24 24" fill="#F7A824"><path d="M12 2l2.9 6 6.6.9-4.8 4.5 1.2 6.6L12 17l-5.9 3 1.2-6.6L2.4 8.9 9 8z"/></svg>313 <svg class="star" viewBox="0 0 24 24" fill="#F7A824"><path d="M12 2l2.9 6 6.6.9-4.8 4.5 1.2 6.6L12 17l-5.9 3 1.2-6.6L2.4 8.9 9 8z"/></svg>314 <span> & Up</span>315 </div>316 317 <div class="chip">Under ₹500</div>318 319 <div class="chip filters">320 <span>Filters</span>321 <svg width="28" height="28" viewBox="0 0 24 24" fill="#333">322 <path d="M7 10l5 5 5-5H7z"/>323 </svg>324 </div>325 </div>326 </div>327 328 <div class="bar">329 <div class="bar-inner">330 <div>Filters</div>331 <div class="close-link">Close</div>332 </div>333 </div>334 335 <div class="filters">336 <div class="left-nav">337 <div class="nav-item active">Prime & Delivery</div>338 <div class="nav-item">Categories</div>339 <div class="nav-item">Brands</div>340 <div class="nav-item">Price and Deals</div>341 <div class="nav-item">Customer Reviews</div>342 <div class="nav-item">Sort by</div>343 <div class="nav-item">New Arrivals</div>344 <div class="nav-item">Item Condition</div>345 <div class="nav-item">Availability</div>346 </div>347 348 <div class="content">349 <h2>Prime & Delivery</h2>350 351 <div class="section-title">Delivery</div>352 <div>353 <span class="pill">Get It by Tomorrow</span>354 <span class="pill">Get It in 2 Days</span>355 </div>356 357 <div class="section-title">Shipping Options</div>358 <div>359 <span class="pill">Eligible for Pay On Delivery</span>360 </div>361 362 <div class="section-title">Prime Programs</div>363 <div class="prime-badge">364 <svg class="prime-tick" viewBox="0 0 24 24" fill="#f4a02f">365 <path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6l-10 10z"/>366 </svg>367 prime368 </div>369 </div>370 </div>371 372 <div class="cta">373 <div class="btn">Show 5,470 results</div>374 </div>375 376 <div class="home-pill"></div>377</div>378</body>379</html>