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>Filter UI - Shoes</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  }12 13  /* Status bar */14  .status-bar{15    position:absolute;top:0;left:0;width:1080px;height:88px;16    background:#0d0d0d;color:#fff;display:flex;align-items:center;17    padding:0 36px;font-size:32px;18  }19  .status-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:28px;color:#cfcfcf}20  .dot{width:10px;height:10px;border-radius:50%;background:#cfcfcf;display:inline-block}21 22  /* Header */23  .header{24    position:absolute;top:88px;left:0;width:1080px;height:240px;25    background:#8f8f8f;color:#111;display:flex;align-items:flex-end;26    padding:0 48px 24px 48px;27  }28  .header-title{29    font-size:72px;font-weight:800;letter-spacing:2px;color:#101010;30  }31  .header-icons{position:absolute;top:98px;right:48px;display:flex;gap:44px}32  .icon-btn{width:56px;height:56px}33  .back-btn{34    position:absolute;top:104px;left:48px;width:56px;height:56px;35  }36 37  /* Main white sheet */38  .sheet{39    position:absolute;top:328px;left:0;width:1080px;height:2072px;background:#fff;40    border-top-left-radius:0;border-top-right-radius:0;41  }42  .close-x{43    position:absolute;top:60px;right:56px;width:60px;height:60px;opacity:0.9;44  }45  .tab-indicator{46    position:absolute;top:46px;left:50%;transform:translateX(-50%);47    width:160px;height:6px;background:#8f9399;border-radius:3px;48  }49  .filter-heading{50    position:absolute;top:140px;left:48px;font-size:64px;font-weight:800;letter-spacing:2px;color:#111;51  }52 53  .list{position:absolute;top:260px;left:0;width:100%;}54  .row{55    display:flex;align-items:center;justify-content:space-between;56    padding:40px 48px;height:150px;border-bottom:1px solid #e6e6e6;57  }58  .row span{font-size:52px;font-weight:800;letter-spacing:1px;color:#111;}59  .chev{width:42px;height:42px}60 61  .bottom-btn{62    position:absolute;bottom:150px;left:48px;width:984px;height:140px;63    background:#111;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;64    font-size:46px;font-weight:800;letter-spacing:3px;65  }66 67  .home-indicator{68    position:absolute;bottom:62px;left:50%;transform:translateX(-50%);69    width:360px;height:16px;background:#d0d0d0;border-radius:10px;70  }71</style>72</head>73<body>74<div id="render-target">75 76  <!-- Status Bar -->77  <div class="status-bar">78    <div>12:37</div>79    <div class="status-right">80      <span class="dot"></span>81      <span class="dot"></span>82      <span class="dot"></span>83      <!-- Simple wifi icon -->84      <svg width="44" height="44" viewBox="0 0 24 24">85        <path d="M2 8c5-4 15-4 20 0" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>86        <path d="M5 11c4-3 10-3 14 0" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>87        <path d="M8 14c3-2 5-2 8 0" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>88        <circle cx="12" cy="18" r="2" fill="#cfcfcf"/>89      </svg>90      <!-- Battery -->91      <svg width="46" height="46" viewBox="0 0 26 14">92        <rect x="1" y="1" width="20" height="12" rx="2" ry="2" fill="none" stroke="#cfcfcf" stroke-width="2"/>93        <rect x="3" y="3" width="16" height="8" fill="#cfcfcf"/>94        <rect x="22" y="4" width="3" height="6" fill="#cfcfcf"/>95      </svg>96    </div>97  </div>98 99  <!-- Header -->100  <div class="header">101    <svg class="back-btn" viewBox="0 0 24 24">102      <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>103    </svg>104 105    <div class="header-title">SHOES</div>106 107    <div class="header-icons">108      <!-- Filter icon (sliders) -->109      <svg class="icon-btn" viewBox="0 0 24 24">110        <circle cx="6" cy="6" r="2" fill="#111"/>111        <path d="M2 6h6" stroke="#111" stroke-width="2" stroke-linecap="round"/>112        <path d="M10 6h12" stroke="#111" stroke-width="2" stroke-linecap="round"/>113        <circle cx="12" cy="12" r="2" fill="#111"/>114        <path d="M2 12h8" stroke="#111" stroke-width="2" stroke-linecap="round"/>115        <path d="M14 12h10" stroke="#111" stroke-width="2" stroke-linecap="round"/>116        <circle cx="18" cy="18" r="2" fill="#111"/>117        <path d="M2 18h16" stroke="#111" stroke-width="2" stroke-linecap="round"/>118        <path d="M20 18h4" stroke="#111" stroke-width="2" stroke-linecap="round"/>119      </svg>120      <!-- Search -->121      <svg class="icon-btn" viewBox="0 0 24 24">122        <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>123        <path d="M20 20l-4-4" stroke="#111" stroke-width="2" stroke-linecap="round"/>124      </svg>125    </div>126  </div>127 128  <!-- White sheet content -->129  <div class="sheet">130    <div class="tab-indicator"></div>131    <svg class="close-x" viewBox="0 0 24 24">132      <path d="M6 6l12 12M18 6l-12 12" stroke="#111" stroke-width="2" stroke-linecap="round"/>133    </svg>134 135    <div class="filter-heading">FILTER</div>136 137    <div class="list">138      <div class="row">139        <span>STYLE</span>140        <svg class="chev" viewBox="0 0 24 24">141          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142        </svg>143      </div>144      <div class="row">145        <span>SIZE</span>146        <svg class="chev" viewBox="0 0 24 24">147          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148        </svg>149      </div>150      <div class="row">151        <span>SPORT</span>152        <svg class="chev" viewBox="0 0 24 24">153          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156      <div class="row">157        <span>COLOR</span>158        <svg class="chev" viewBox="0 0 24 24">159          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160        </svg>161      </div>162      <div class="row">163        <span>PRICE</span>164        <svg class="chev" viewBox="0 0 24 24">165          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166        </svg>167      </div>168      <div class="row">169        <span>TEAM</span>170        <svg class="chev" viewBox="0 0 24 24">171          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>172        </svg>173      </div>174      <div class="row">175        <span>TECHNOLOGY</span>176        <svg class="chev" viewBox="0 0 24 24">177          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178        </svg>179      </div>180      <div class="row" style="border-bottom:none;">181        <span>SUSTAINABILITY</span>182        <svg class="chev" viewBox="0 0 24 24">183          <path d="M9 6l6 6-6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184        </svg>185      </div>186    </div>187 188    <div class="bottom-btn">SHOW 542 PRODUCTS</div>189    <div class="home-indicator"></div>190  </div>191 192</div>193</body>194</html>