GD-ML/AndroidCode

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; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111;12  }13 14  /* Top gradient header */15  .header {16    position:absolute; left:0; top:0; width:100%; height:300px;17    background: linear-gradient(180deg,#9fdfe0 0%, #c6ecd3 100%);18  }19  .status {20    height:70px; padding:18px 28px 0 28px; color:#1a1a1a;21    display:flex; align-items:center; justify-content:space-between; font-size:34px;22  }23  .status .right { opacity:.9; font-size:30px; }24 25  .searchbar { position:absolute; top:96px; left:24px; right:24px; height:100px; display:flex; align-items:center; gap:12px; }26  .back {27    width:76px; height:76px; border-radius:38px; display:flex; align-items:center; justify-content:center;28  }29  .back svg { width:44px; height:44px; }30  .back svg path { stroke:#2f2f2f; stroke-width:6; fill:none; stroke-linecap:round; stroke-linejoin:round; }31 32  .input {33    flex:1; height:100%; background:#fff; border-radius:52px;34    display:flex; align-items:center; padding:0 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.04);35  }36  .input .icon { width:42px; height:42px; margin-right:12px; }37  .input .icon path, .input .icon circle { stroke:#5f6a6e; stroke-width:5; fill:none; }38  .input span { flex:1; font-size:40px; color:#2a2a2a; }39  .scan { width:56px; height:56px; border-radius:12px; background:#f2f4f6; display:flex; align-items:center; justify-content:center; }40  .scan svg { width:36px; height:36px; }41  .scan rect { stroke:#5f6a6e; stroke-width:4; fill:none; rx:4; }42 43  .chips { position:absolute; left:0; right:0; top:210px; height:80px; padding:0 24px; display:flex; align-items:center; gap:16px; }44  .chip { padding:16px 26px; border-radius:28px; background:#e7eff2; color:#1f5c70; font-size:32px; white-space:nowrap; }45  .chip .star { color:#f5a623; letter-spacing:2px; }46  .toggle { display:flex; align-items:center; gap:12px; color:#0e6fe0; font-weight:600; }47  .toggle .switch {48    width:96px; height:50px; background:#e4e7ea; border-radius:26px; border:1px solid #d6dadd; position:relative;49  }50  .toggle .switch:after {51    content:""; position:absolute; left:4px; top:4px; width:42px; height:42px; border-radius:50%; background:#fff;52    box-shadow:0 1px 2px rgba(0,0,0,0.2);53  }54 55  /* Filter sheet */56  .filtersheet {57    position:absolute; top:270px; left:0; right:0; bottom:180px; background:#fff;58    border-top-left-radius:28px; border-top-right-radius:28px; box-shadow: 0 -2px 4px rgba(0,0,0,0.04) inset;59  }60  .sheet-header { position:absolute; top:10px; left:24px; right:24px; height:76px; display:flex; align-items:center; justify-content:space-between; font-size:34px; }61  .sheet-header .close { color:#2a7ca8; }62 63  .sidebar { position:absolute; top:86px; bottom:0; width:300px; background:#f6fafb; border-right:1px solid #e6eef2; overflow:auto; }64  .side-item {65    padding:34px 24px; font-size:34px; color:#3e3e3e;66    border-bottom:1px solid #edf2f4; display:flex; align-items:center; justify-content:space-between;67  }68  .side-item.active { background:#eff7fb; border-left:8px solid #1f6f93; padding-left:16px; color:#1f6f93; font-weight:600; }69 70  .main { position:absolute; left:300px; right:0; top:86px; bottom:0; padding:34px 40px; overflow:auto; }71  .main h2 { margin:8px 0 10px 0; font-size:46px; }72  .breadcrumb { color:#2a7ca8; font-size:32px; margin-bottom:10px; }73  .breadcrumb .sep { color:#9fb3bf; margin:0 10px; }74  .subtitle { font-size:32px; color:#333; margin:16px 0 8px 0; }75  .filter-chips { display:flex; gap:20px; margin-top:16px; }76  .gray-chip { background:#f1f1f1; color:#666; }77  .blue-chip { background:#dcebef; color:#2b6b7b; }78 79  .actionbar {80    position:absolute; left:0; right:0; bottom:0; height:160px; background:#fff;81    border-top:1px solid #e5e5e5; display:flex; align-items:center; justify-content:space-between; padding:0 24px;82  }83  .btn-outline {84    border:1px solid #d8e0e4; color:#2b6b7b; background:#f9fbfc; padding:24px 28px; border-radius:18px; font-size:36px;85  }86  .btn-primary { background:#2e6e83; color:#fff; padding:30px 42px; border-radius:28px; font-size:40px; }87 88  /* OS navigation indicator */89  .navbar-indicator { position:absolute; left:430px; bottom:12px; width:220px; height:12px; background:#8a8a8a; border-radius:6px; opacity:.85; }90</style>91</head>92<body>93<div id="render-target">94 95  <div class="header">96    <div class="status">97      <div>8:25</div>98      <div class="right">83%</div>99    </div>100 101    <div class="searchbar">102      <div class="back">103        <svg viewBox="0 0 24 24">104          <path d="M15 4 L7 12 L15 20"></path>105        </svg>106      </div>107      <div class="input">108        <svg class="icon" viewBox="0 0 24 24">109          <circle cx="11" cy="11" r="7"></circle>110          <path d="M16 16 L21 21"></path>111        </svg>112        <span>drill machine</span>113        <div class="scan">114          <svg viewBox="0 0 24 24">115            <rect x="3" y="3" width="6" height="6"></rect>116            <rect x="15" y="3" width="6" height="6"></rect>117            <rect x="3" y="15" width="6" height="6"></rect>118            <rect x="15" y="15" width="6" height="6"></rect>119          </svg>120        </div>121      </div>122    </div>123 124    <div class="chips">125      <div class="toggle">126        <span>prime</span>127        <div class="switch"></div>128      </div>129      <div class="chip blue-chip">Impact Drivers</div>130      <div class="chip"><span class="star">★ ★ ★ ★ ★</span> &amp;</div>131      <div class="chip">Filters (1) ▲</div>132    </div>133  </div>134 135  <div class="filtersheet">136    <div class="sheet-header">137      <strong>Filters (1)</strong>138      <span class="close">Close</span>139    </div>140 141    <div class="sidebar">142      <div class="side-item">Prime &amp; Delivery</div>143      <div class="side-item active"><span>Categories</span><span>1</span></div>144      <div class="side-item">Brands</div>145      <div class="side-item">Price and Deals</div>146      <div class="side-item">Customer Reviews</div>147      <div class="side-item">Sort by</div>148      <div class="side-item">Material</div>149      <div class="side-item">Power Source</div>150      <div class="side-item">Special Features</div>151      <div class="side-item">Height base to top</div>152      <div class="side-item">Width shorter horizontal edge</div>153    </div>154 155    <div class="main">156      <h2>Categories</h2>157      <div class="breadcrumb">158        <span style="text-decoration:underline;">Any Category</span>159        <span class="sep">&gt;</span>160        <span style="text-decoration:underline;">Home Improvement</span>161        <span class="sep">&gt;</span>162        <span style="text-decoration:underline;">Power &amp; Hand Tools</span>163        <span class="sep">&gt;</span>164        <span style="text-decoration:underline;">Power Tools</span>165        <span class="sep">&gt;</span>166      </div>167 168      <div class="subtitle">Power Drills</div>169      <div class="subtitle">Power Drills</div>170 171      <div class="filter-chips">172        <div class="chip gray-chip">All</div>173        <div class="chip blue-chip">Impact Drivers</div>174      </div>175    </div>176 177    <div class="actionbar">178      <button class="btn-outline">Clear Filters</button>179      <button class="btn-primary">Show 124 results</button>180    </div>181  </div>182 183  <div class="navbar-indicator"></div>184</div>185</body>186</html>