GD-ML/AndroidCode

1<html lang="en">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: Roboto, Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; color:#212121;11  }12 13  /* Top bars */14  .statusbar{15    height:120px;16    background:#E7E7E7;17    padding:0 40px;18    display:flex; align-items:center; justify-content:space-between;19    box-sizing:border-box;20    color:#707070; font-size:28px;21  }22  .toolbar{23    height:120px; display:flex; align-items:center; position:relative;24    padding:0 32px;25    box-sizing:border-box;26    border-bottom:1px solid #EEEEEE;27  }28  .toolbar .title{29    position:absolute; left:0; right:0; text-align:center;30    font-size:56px; font-weight:700; color:#222;31  }32  .icon-btn{33    width:96px; height:96px; display:flex; align-items:center; justify-content:center;34    border-radius:24px; color:#5f6368;35  }36  .icon-btn svg{ width:48px; height:48px; }37 38  /* Content */39  .content{ padding:36px 48px 240px 48px; }40  .section-title{41    font-size:44px; font-weight:700; margin:36px 0 24px 0; color:#202124;42  }43  .segment{44    display:flex; gap:18px;45  }46  .seg-btn{47    flex:1; height:124px; border:2px solid #E0E6F7; border-radius:24px;48    background:#fff; display:flex; align-items:center; justify-content:center;49    font-size:40px; color:#3C4043; box-sizing:border-box;50  }51  .seg-btn .star{ color:#f4b400; margin-left:10px; }52  .seg-btn.active-outline{53    border-color:#7AA6FF; background:#F2F6FF;54  }55  .seg-btn.active-fill{56    border-color:#D2E3FC; background:#E8F0FE; color:#1a73e8; font-weight:600;57  }58  .seg-btn .check{59    display:inline-flex; align-items:center; justify-content:center;60    width:44px; height:44px; margin-right:12px;61  }62  .seg-btn .check svg{ width:36px; height:36px; fill:#1a73e8; }63 64  /* Pill for more filters */65  .pill{66    display:inline-flex; align-items:center; justify-content:center;67    border:2px solid #D6D6D6; border-radius:64px; padding:26px 36px;68    font-size:40px; color:#3C4043; background:#fff;69    margin-top:12px;70  }71 72  /* Bottom actions */73  .bottom-actions{74    position:absolute; left:0; right:0; bottom:0;75    padding:24px 40px 40px 40px; background:#ffffff;76    box-shadow:0 -2px 8px rgba(0,0,0,0.05);77  }78  .bottom-row{79    display:flex; gap:36px; justify-content:space-between;80  }81  .btn{82    height:132px; border-radius:72px; font-size:44px; font-weight:600;83    display:flex; align-items:center; justify-content:center; flex:1;84    box-sizing:border-box;85  }86  .btn.secondary{87    background:#fff; color:#1a73e8; border:2px solid #D6D6D6;88  }89  .btn.primary{90    background:#3973F4; color:#fff; border:2px solid #3973F4;91  }92 93  /* Helper spacing to resemble screenshot */94  .spacer-8{ height:8px; }95  .spacer-16{ height:16px; }96  .spacer-24{ height:24px; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Simulated Android status bar -->103  <div class="statusbar">104    <div>[Status icons]</div>105    <div>10:39</div>106  </div>107 108  <!-- Toolbar -->109  <div class="toolbar">110    <div class="icon-btn" aria-label="Close">111      <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 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"/></svg>112    </div>113    <div class="title">Filters</div>114  </div>115 116  <!-- Content -->117  <div class="content">118    <div class="section-title">Rating</div>119    <div class="segment">120      <div class="seg-btn">Any</div>121      <div class="seg-btn">3.5 <span class="star">★</span></div>122      <div class="seg-btn">4.0 <span class="star">★</span></div>123      <div class="seg-btn active-outline">124        <span class="check">125          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>126        </span>127        4.5 <span class="star">★</span>128      </div>129    </div>130 131    <div class="section-title">Hours</div>132    <div class="segment">133      <div class="seg-btn active-fill">134        <span class="check">135          <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>136        </span>137        Any138      </div>139      <div class="seg-btn">Open now</div>140      <div class="seg-btn">Custom</div>141    </div>142 143    <div class="section-title">More filters</div>144    <div class="pill">Wheelchair-accessible entrance</div>145  </div>146 147  <!-- Bottom actions -->148  <div class="bottom-actions">149    <div class="bottom-row">150      <div class="btn secondary" style="max-width:470px;">Clear</div>151      <div class="btn primary">Apply</div>152    </div>153  </div>154 155</div>156</body>157</html>