GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Filter UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#F4F5F7;11    border-radius:24px;12    box-shadow: 0 10px 30px rgba(0,0,0,0.15);13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; width:100%; height:110px;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px;20    color:#222;21    font-size:40px; font-weight:600;22  }23  .status-icons { display:flex; align-items:center; gap:24px; color:#444; }24  .status-icons svg { width:46px; height:46px; }25 26  /* Underlying content (left peeking list) */27  .feed-left {28    position:absolute; top:140px; left:24px; width:260px; height:1900px;29  }30  .img-card {31    width:240px; height:240px; margin:24px 0;32    background:#E0E0E0; border:1px solid #BDBDBD;33    display:flex; align-items:center; justify-content:center;34    color:#757575; font-size:30px; text-align:center; border-radius:20px;35  }36 37  /* Back arrow behind overlay */38  .back-arrow {39    position:absolute; top:150px; left:24px; width:88px; height:88px;40    display:flex; align-items:center; justify-content:center;41  }42  .back-arrow svg { width:54px; height:54px; fill:none; stroke:#000; stroke-width:12; }43 44  /* Overlay sheet */45  .overlay {46    position:absolute; top:120px; left:120px;47    width:960px; height:2200px;48    background:#fff; border-radius:8px;49    box-shadow:0 12px 40px rgba(0,0,0,0.18);50    overflow:hidden;51  }52 53  .overlay-header {54    display:flex; align-items:center; justify-content:space-between;55    padding:40px;56    border-bottom:1px solid #eee;57  }58  .close-btn svg { width:56px; height:56px; }59  .title { font-size:56px; font-weight:800; color:#111; }60  .reset { font-size:40px; color:#3D6FE0; font-weight:600; }61 62  .list { padding:0 0 160px 0; }63  .row {64    height:120px; display:flex; align-items:center; justify-content:space-between;65    padding:0 40px; border-bottom:1px solid #eee;66  }67  .row .label { font-size:40px; color:#222; }68  .chev svg { width:40px; height:40px; }69  .chev svg path { fill:#111; }70  /* Toggle */71  .toggle {72    width:140px; height:68px; border-radius:34px;73    background:#E6E6E6; position:relative;74  }75  .toggle .knob {76    width:60px; height:60px; border-radius:30px; background:#fff;77    position:absolute; top:4px; left:6px;78    box-shadow:0 2px 6px rgba(0,0,0,0.2);79  }80  .toggle.on { background:#4A78FF; }81  .toggle.on .knob { left:auto; right:6px; }82 83  /* Bottom button */84  .cta {85    position:absolute; bottom:36px; left:60px; right:60px;86    height:140px; background:#3D6FE0; border-radius:80px;87    display:flex; align-items:center; justify-content:center;88    color:#fff; font-size:46px; font-weight:800;89    letter-spacing:0.5px;90    box-shadow:0 8px 16px rgba(61,111,224,0.35);91  }92 93  /* Bottom navigation (behind overlay) */94  .bottom-nav {95    position:absolute; bottom:0; left:0; width:100%; height:170px;96    background:#fff; border-top:1px solid #e6e6e6;97    display:flex; align-items:center; padding-left:50px; gap:24px;98  }99  .home-icon { width:90px; height:90px; border-radius:22px; border:2px solid #888; display:flex; align-items:center; justify-content:center; }100  .bottom-nav svg { width:56px; height:56px; fill:none; stroke:#555; stroke-width:8; }101  .home-label { font-size:40px; color:#333; }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>8:27</div>110    <div class="status-icons">111      <!-- weather icon -->112      <svg viewBox="0 0 24 24"><path d="M7 12a5 5 0 119.8-1.3A4 4 0 1115 20H7a5 5 0 010-8z" fill="#666"/></svg>113      <!-- wifi -->114      <svg viewBox="0 0 24 24"><path d="M2 8c8-6 12-6 20 0M5 12c6-4 8-4 14 0M9 16c3-2 4-2 6 0M12 20h0" stroke="#666" stroke-linecap="round"/></svg>115      <!-- battery -->116      <svg viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#666" stroke-width="2"/><rect x="3" y="5" width="18" height="6" rx="1" fill="#666"/><rect x="24" y="6" width="3" height="4" rx="1" fill="#666"/></svg>117    </div>118  </div>119 120  <!-- Left peeking feed images -->121  <div class="feed-left">122    <div class="img-card">[IMG: Sneaker close-up]</div>123    <div class="img-card">[IMG: Shoe side view]</div>124    <div class="img-card">[IMG: Product thumbnail]</div>125  </div>126 127  <!-- Back arrow behind overlay -->128  <div class="back-arrow">129    <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>130  </div>131 132  <!-- Overlay filter sheet -->133  <div class="overlay">134    <div class="overlay-header">135      <div class="close-btn">136        <svg viewBox="0 0 24 24">137          <path d="M5 5L19 19M19 5L5 19" stroke="#111" stroke-width="3" stroke-linecap="round"/>138        </svg>139      </div>140      <div class="title">Filter</div>141      <div class="reset">Reset</div>142    </div>143 144    <div class="list">145      <div class="row"><div class="label">Signed</div><div class="chev">146        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>147      <div class="row"><div class="label">Vintage</div><div class="chev">148        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>149      <div class="row"><div class="label">Accents</div><div class="chev">150        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>151      <div class="row"><div class="label">Cleat Type</div><div class="chev">152        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>153      <div class="row"><div class="label">Theme</div><div class="chev">154        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>155      <div class="row"><div class="label">Year Manufactured</div><div class="chev">156        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>157      <div class="row"><div class="label">Pattern</div><div class="chev">158        <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7"/></svg></div></div>159 160      <div class="row"><div class="label">Free Returns</div>161        <div class="toggle"><div class="knob"></div></div></div>162 163      <div class="row"><div class="label">Returns Accepted</div>164        <div class="toggle"><div class="knob"></div></div></div>165 166      <div class="row"><div class="label">Authorized Seller</div>167        <div class="toggle"><div class="knob"></div></div></div>168 169      <div class="row"><div class="label">Completed Items</div>170        <div class="toggle on"><div class="knob"></div></div></div>171 172      <div class="row"><div class="label">Sold Items</div>173        <div class="toggle"><div class="knob"></div></div></div>174 175      <div class="row"><div class="label">Deals &amp; Savings</div>176        <div class="toggle"><div class="knob"></div></div></div>177    </div>178 179    <div class="cta">Show 8 results</div>180  </div>181 182  <!-- Bottom nav (behind overlay) -->183  <div class="bottom-nav">184    <div class="home-icon">185      <svg viewBox="0 0 24 24"><path d="M4 11l8-6 8 6v9H4zM9 20v-6h6v6" stroke-linejoin="round"/></svg>186    </div>187    <div class="home-label">Home</div>188  </div>189 190</div>191</body>192</html>