GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Filter Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F2F2F2;12  }13 14  /* Top teal status area */15  .top-strip {16    position: absolute; left: 0; top: 0; width: 1080px; height: 120px;17    background: #1AA0A8;18  }19 20  /* Header */21  .header {22    position: absolute; left: 0; top: 120px; width: 1080px; height: 180px;23    background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.1);24    display: flex; align-items: center; padding: 0 40px;25  }26  .header-title {27    font-size: 56px; font-weight: 700; color: #333;28  }29  .close-btn {30    margin-left: auto; width: 72px; height: 72px; cursor: pointer;31  }32  .close-btn svg { width: 100%; height: 100%; }33  .close-btn line { stroke: #1AA0A8; stroke-width: 8; stroke-linecap: round; }34 35  /* Content area */36  .content {37    position: absolute; left: 0; top: 300px; width: 1080px; bottom: 320px;38    padding-left: 40px; padding-right: 40px;39  }40 41  /* Left filter list */42  .filter-list {43    width: 520px; padding-top: 20px;44  }45  .filter-item {46    height: 120px; display: flex; align-items: center; justify-content: space-between;47    border-bottom: 1px solid #E0E0E0; color: #222; font-size: 40px;48  }49  .filter-item.primary { color: #0EA5E9; font-weight: 600; }50  .badge {51    background: #D5EFFB; color: #0EA5E9; border: 1px solid #BBDDEE;52    border-radius: 24px; padding: 6px 18px; font-size: 34px;53  }54 55  /* Price panel on the right */56  .price-panel {57    position: absolute; left: 520px; top: 360px; width: 520px;58    background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 8px;59    box-shadow: 0 8px 24px rgba(0,0,0,0.15);60  }61  .price-row {62    height: 140px; display: flex; align-items: center; justify-content: space-between;63    padding: 0 36px; border-bottom: 1px solid #F0F0F0;64    font-size: 40px; color: #777;65  }66  .price-row:last-child { border-bottom: none; }67  .count { color: #9E9E9E; }68 69  /* Bottom action bar */70  .action-bar {71    position: absolute; left: 0; bottom: 120px; width: 1080px; height: 180px;72    display: flex; box-shadow: 0 -2px 8px rgba(0,0,0,0.08);73  }74  .btn-clear {75    width: 540px; background: #FFFFFF; color: #FF7A00; font-weight: 700;76    display: flex; align-items: center; justify-content: center; font-size: 44px;77    border-right: 1px solid #EEEEEE;78  }79  .btn-apply {80    width: 540px; background: linear-gradient(90deg, #FF8A3D, #FF5E6A);81    color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center;82    font-size: 44px;83  }84 85  /* Device navigation bar (pill) */86  .nav-bar {87    position: absolute; left: 0; bottom: 0; width: 1080px; height: 120px;88    background: #000000;89  }90  .nav-pill {91    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);92    width: 240px; height: 16px; background: #C6C6C6; border-radius: 12px;93  }94 95  /* Minimal status content */96  .status-content {97    position: absolute; top: 22px; left: 32px; color: #FFFFFF; display: flex; align-items: center;98    font-size: 36px; font-weight: 600;99  }100  .status-icons { margin-left: 24px; display: flex; align-items: center; gap: 18px; }101  .dot {102    width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.85);103  }104  .wifi {105    width: 28px; height: 28px; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%;106  }107  .battery {108    width: 26px; height: 16px; border: 2px solid rgba(255,255,255,0.85); border-radius: 3px;109    position: relative;110  }111  .battery::after {112    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px;113    background: rgba(255,255,255,0.85); border-radius: 1px;114  }115</style>116</head>117<body>118<div id="render-target">119  <!-- Status bar -->120  <div class="top-strip"></div>121  <div class="status-content">122    10:40123    <div class="status-icons">124      <div class="dot"></div>125      <div class="dot"></div>126      <div class="dot"></div>127      <div class="wifi"></div>128      <div class="battery"></div>129    </div>130  </div>131 132  <!-- Header -->133  <div class="header">134    <div class="header-title">Filter By</div>135    <div class="close-btn" aria-label="Close">136      <svg viewBox="0 0 100 100">137        <line x1="20" y1="20" x2="80" y2="80"></line>138        <line x1="80" y1="20" x2="20" y2="80"></line>139      </svg>140    </div>141  </div>142 143  <!-- Content -->144  <div class="content">145    <div class="filter-list">146      <div class="filter-item primary">Price</div>147      <div class="filter-item">Brand <span class="badge">1</span></div>148      <div class="filter-item">Color</div>149      <div class="filter-item">Sole material</div>150      <div class="filter-item">Upper Material</div>151      <div class="filter-item">Size - EUR or IND</div>152      <div class="filter-item">Discount</div>153      <div class="filter-item">Product Rating</div>154    </div>155 156    <!-- Price dropdown panel -->157    <div class="price-panel">158      <div class="price-row">159        <span>251 - 500</span>160        <span class="count">(4)</span>161      </div>162      <div class="price-row">163        <span>501 - 1,000</span>164        <span class="count">(150)</span>165      </div>166      <div class="price-row">167        <span>1,001 - 2,500</span>168        <span class="count">(266)</span>169      </div>170    </div>171  </div>172 173  <!-- Bottom actions -->174  <div class="action-bar">175    <div class="btn-clear">CLEAR ALL</div>176    <div class="btn-apply">APPLY FILTER</div>177  </div>178 179  <!-- Device navigation bar -->180  <div class="nav-bar">181    <div class="nav-pill"></div>182  </div>183</div>184</body>185</html>