GD-ML/AndroidCode

1<html>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: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11    color:#1f1f1f;12  }13 14  /* Top status bar */15  .statusbar {16    position:absolute; left:0; top:0; width:100%; height:120px;17    background:#e6e6e6; color:#2e2e2e;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px;20    box-sizing:border-box;21    font-size:38px; letter-spacing:1px;22  }23  .status-icons {24    display:flex; align-items:center; gap:24px;25  }26  .icon-dot { width:32px; height:32px; background:#3a3a3a; border-radius:6px; }27  .icon-loc { width:30px; height:30px; border:3px solid #3a3a3a; border-radius:50%; }28  .icon-battery {29    width:60px; height:30px; border:3px solid #3a3a3a; border-radius:6px; position:relative;30  }31  .icon-battery::after{32    content:""; position:absolute; right:-10px; top:8px; width:6px; height:14px; background:#3a3a3a; border-radius:2px;33  }34 35  /* Header */36  .header {37    position:absolute; left:0; top:120px; width:100%; height:140px;38    display:flex; align-items:center; justify-content:center;39    border-bottom:1px solid #eeeeee;40  }41  .header h1 {42    font-size:56px; margin:0; font-weight:600;43  }44  .close-btn {45    position:absolute; left:36px; top:50%; transform:translateY(-50%);46    width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;47  }48  .close-btn svg { width:46px; height:46px; }49 50  /* Content area */51  .content {52    position:absolute; left:0; top:260px; right:0; bottom:240px;53    padding:40px 40px 0 40px; box-sizing:border-box; overflow-y:auto;54  }55  .section-title {56    font-size:44px; font-weight:700; margin:40px 0 28px 0;57  }58 59  /* Segmented controls */60  .segments {61    width:100%; border:1px solid #e0e0e0; border-radius:28px; overflow:hidden;62    display:flex;63  }64  .segments .option {65    flex:1; height:120px; display:flex; align-items:center; justify-content:center;66    font-size:40px; color:#4b4b4b; background:#ffffff; border-right:1px solid #e9e9e9;67  }68  .segments .option:last-child { border-right:none; }69  .segments .option .star { color:#f4b400; margin-left:10px; font-weight:700; }70  .segments .selected {71    background:#eaf2ff; color:#1a73e8; font-weight:700;72  }73  .option .check {74    display:flex; align-items:center; gap:18px;75  }76  .check svg { width:38px; height:38px; }77  .muted { color:#6b6b6b; }78 79  /* Pills */80  .pill {81    display:inline-flex; align-items:center; justify-content:center;82    padding:28px 40px; border:2px solid #dcdcdc; border-radius:60px;83    font-size:40px; color:#3a3a3a; background:#fff;84  }85 86  /* Bottom bar */87  .bottom-bar {88    position:absolute; left:0; bottom:0; width:100%; height:240px;89    border-top:1px solid #e9e9e9; background:#ffffff;90    display:flex; align-items:center; justify-content:space-between;91    padding:30px 40px; box-sizing:border-box;92  }93  .btn {94    height:120px; border-radius:60px; font-size:44px; padding:0 70px; cursor:pointer;95    display:flex; align-items:center; justify-content:center;96  }97  .btn-outlined {98    border:2px solid #d2d7e2; color:#1a73e8; background:#ffffff; width:450px;99  }100  .btn-primary {101    background:#2f6fed; color:#ffffff; border:none; width:560px; box-shadow:0 6px 0 rgba(0,0,0,0.04) inset;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status Bar -->109  <div class="statusbar">110    <div>10:38</div>111    <div class="status-icons">112      <div class="icon-loc"></div>113      <div class="icon-dot"></div>114      <div class="icon-battery"></div>115    </div>116  </div>117 118  <!-- Header -->119  <div class="header">120    <div class="close-btn" aria-label="Close">121      <svg viewBox="0 0 24 24" fill="#3c4043">122        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>123      </svg>124    </div>125    <h1>Filters</h1>126  </div>127 128  <!-- Content -->129  <div class="content">130 131    <!-- Rating -->132    <div class="section-title">Rating</div>133    <div class="segments">134      <div class="option selected">135        <div class="check">136          <svg viewBox="0 0 24 24" fill="#1a73e8"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/></svg>137          <span>Any</span>138        </div>139      </div>140      <div class="option">3.5 <span class="star">★</span></div>141      <div class="option">4.0 <span class="star">★</span></div>142      <div class="option">4.5 <span class="star">★</span></div>143    </div>144 145    <!-- Hours -->146    <div class="section-title" style="margin-top:56px;">Hours</div>147    <div class="segments">148      <div class="option selected">149        <div class="check">150          <svg viewBox="0 0 24 24" fill="#1a73e8"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/></svg>151          <span>Any</span>152        </div>153      </div>154      <div class="option">Open now</div>155      <div class="option">Custom</div>156    </div>157 158    <!-- More filters -->159    <div class="section-title" style="margin-top:56px;">More filters</div>160    <div class="pill">Wheelchair-accessible entrance</div>161 162  </div>163 164  <!-- Bottom buttons -->165  <div class="bottom-bar">166    <div class="btn btn-outlined">Clear</div>167    <div class="btn btn-primary">Apply</div>168  </div>169 170</div>171</body>172</html>