GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1440px; height:3120px; position:relative; overflow:hidden;9    background:#ffffff; border-radius:32px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);10  }11 12  /* Top status bar */13  .status-bar {14    height:120px; padding:0 48px; display:flex; align-items:center; justify-content:flex-start;15    color:#111; font-size:42px; box-sizing:border-box;16  }17  .status-bar .dot { width:28px; height:28px; background:#000; border-radius:50%; margin-left:28px; }18  .status-icons { margin-left:auto; display:flex; align-items:center; gap:26px; }19  .status-icon {20    width:36px; height:36px; border-radius:6px; background:#D9D9D9;21  }22 23  /* App bar */24  .app-bar {25    height:160px; border-bottom:1px solid #E6E8EB; display:flex; align-items:center; padding:0 48px; box-sizing:border-box;26  }27  .back-btn {28    width:96px; height:96px; display:flex; align-items:center; justify-content:center; margin-right:18px;29  }30  .back-btn svg { width:56px; height:56px; }31  .title { font-size:56px; font-weight:700; color:#1a1a1a; }32 33  /* Content layout */34  .content { display:flex; height:2450px; }35  .sidebar {36    width:420px; background:#F2F5F8; border-right:1px solid #E6E8EB; padding:40px 30px; box-sizing:border-box;37  }38  .side-item {39    height:120px; display:flex; align-items:center; justify-content:space-between;40    font-size:44px; color:#2a2a2a; padding:0 20px; border-radius:14px;41  }42  .side-item + .side-item { margin-top:6px; }43  .badge {44    background:#E9EDF2; color:#4B5563; font-size:38px; padding:6px 18px; border-radius:24px;45    border:1px solid #D2D6DB;46  }47 48  .right-panel { flex:1; padding:40px 56px; box-sizing:border-box; }49  .hint {50    font-size:44px; color:#6B7280; margin-bottom:30px;51  }52  .hint .link { color:#1C64F2; font-weight:700; }53 54  .checklist { margin-top:20px; }55  .check-item {56    height:120px; display:flex; align-items:center; font-size:48px; color:#222; margin-bottom:18px;57  }58  .box {59    width:72px; height:72px; border:3px solid #C9CDD2; border-radius:14px; margin-right:24px; background:#fff;60  }61  .count { color:#6B7280; font-size:44px; margin-left:14px; }62  .selected .box { background:#111; border-color:#111; position:relative; }63  .selected .box::after {64    content:"";65    position:absolute; left:18px; top:18px; width:36px; height:18px;66    border-left:6px solid #fff; border-bottom:6px solid #fff; transform:rotate(-45deg);67  }68 69  /* Bottom actions */70  .bottom-actions {71    position:absolute; left:0; right:0; bottom:80px; padding:48px; box-sizing:border-box;72    display:flex; gap:40px; justify-content:flex-start;73  }74  .btn {75    height:150px; border-radius:26px; font-size:52px; font-weight:700; display:flex; align-items:center; justify-content:center;76    padding:0 70px; box-sizing:border-box;77  }78  .btn-reset {79    border:2px solid #C9CDD2; background:#fff; color:#1F2937; width:480px;80    box-shadow:0 2px 4px rgba(0,0,0,0.04);81  }82  .btn-apply {83    background:#111; color:#fff; flex:1; min-width:700px;84    box-shadow:0 8px 16px rgba(0,0,0,0.15);85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="status-bar">93    <div style="font-weight:700;">1:31</div>94    <div class="dot"></div>95    <div class="status-icons">96      <div class="status-icon"></div>97      <div class="status-icon"></div>98      <div class="status-icon"></div>99    </div>100  </div>101 102  <!-- App bar -->103  <div class="app-bar">104    <div class="back-btn">105      <svg viewBox="0 0 24 24" fill="none">106        <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>107      </svg>108    </div>109    <div class="title">Filters (848 products)</div>110  </div>111 112  <!-- Main content -->113  <div class="content">114    <!-- Sidebar -->115    <div class="sidebar">116      <div class="side-item">Gender</div>117      <div class="side-item">Category</div>118      <div class="side-item">Price</div>119      <div class="side-item">Brands <span class="badge">1</span></div>120      <div class="side-item">Occasion <span class="badge">1</span></div>121      <div class="side-item">Discount</div>122      <div class="side-item">Colors</div>123      <div class="side-item">Size &amp; Fit <span class="badge">1</span></div>124    </div>125 126    <!-- Right panel -->127    <div class="right-panel">128      <div class="hint">For better results, <span class="link">Select Category</span></div>129 130      <div class="checklist">131        <div class="check-item"><div class="box"></div>UK 7 <span class="count">(748)</span></div>132        <div class="check-item"><div class="box"></div>UK 6 <span class="count">(697)</span></div>133        <div class="check-item"><div class="box"></div>UK 8 <span class="count">(636)</span></div>134        <div class="check-item selected"><div class="box"></div>UK 9 <span class="count">(529)</span></div>135        <div class="check-item"><div class="box"></div>UK 10 <span class="count">(350)</span></div>136      </div>137 138      <!-- Empty grey area to mimic large whitespace -->139      <div style="margin-top:40px; height:1900px; background:#F3F6FA; border:1px solid #E6E8EB; border-radius:16px;"></div>140    </div>141  </div>142 143  <!-- Bottom actions -->144  <div class="bottom-actions">145    <div class="btn btn-reset">Reset</div>146    <div class="btn btn-apply">Apply Filter</div>147  </div>148 149</div>150</body>151</html>