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>Style Filter</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F5F5;15  }16 17  /* Status bar */18  .status-bar {19    height: 170px;20    background: #CFCFCF;21    color: #fff;22    position: relative;23    padding: 0 48px;24    box-sizing: border-box;25  }26  .status-time {27    position: absolute;28    top: 58px;29    left: 48px;30    font-size: 46px;31    font-weight: 600;32    color: #FFFFFF;33    letter-spacing: 1px;34  }35  .status-icons {36    position: absolute;37    top: 58px;38    right: 48px;39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .icon-wifi svg,44  .icon-battery svg {45    width: 44px; height: 44px;46    display: block;47  }48 49  /* Header */50  .header {51    background: #FFFFFF;52    padding: 48px 48px 28px 48px;53    border-bottom: 1px solid #E6E6E6;54  }55  .header-row {56    display: flex;57    align-items: center;58    gap: 28px;59  }60  .back-icon svg { width: 56px; height: 56px; }61  .title {62    font-size: 68px;63    font-weight: 700;64    color: #111;65  }66 67  /* Content */68  .content {69    background: #FFFFFF;70    padding: 36px 48px;71    min-height: 1420px;72    box-sizing: border-box;73  }74  .filter-row {75    display: flex;76    align-items: center;77    justify-content: space-between;78    padding: 34px 8px;79    border-radius: 12px;80  }81  .filter-left {82    display: flex;83    align-items: center;84    gap: 28px;85  }86  .checkbox {87    width: 64px;88    height: 64px;89    border: 4px solid #1E1E1E;90    border-radius: 14px;91    box-sizing: border-box;92    background: #FFF;93  }94  .label {95    font-size: 46px;96    color: #222;97  }98  .count {99    font-size: 44px;100    color: #222;101  }102 103  /* Bottom area */104  .bottom-area {105    position: absolute;106    left: 0;107    right: 0;108    bottom: 140px;109    padding: 24px 0 0;110    border-top: 1px solid #E5E5E5;111  }112  .cta {113    width: calc(100% - 144px);114    margin: 0 auto;115    background: #111111;116    color: #FFFFFF;117    text-align: center;118    padding: 40px 20px;119    font-size: 50px;120    font-weight: 700;121    border-radius: 6px;122    box-sizing: border-box;123  }124 125  /* Gesture bar */126  .gesture-bar {127    position: absolute;128    bottom: 36px;129    left: 50%;130    transform: translateX(-50%);131    width: 320px;132    height: 14px;133    background: #CFCFCF;134    border-radius: 14px;135  }136</style>137</head>138<body>139  <div id="render-target">140    <!-- Status Bar -->141    <div class="status-bar">142      <div class="status-time">12:54</div>143      <div class="status-icons">144        <div class="icon-wifi" aria-hidden="true">145          <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">146            <path d="M2 8c5-4 15-4 20 0"/>147            <path d="M5 12c3-3 11-3 14 0"/>148            <path d="M9 16c2-2 4-2 6 0"/>149            <circle cx="12" cy="20" r="1.5" fill="#FFFFFF" stroke="none"/>150          </svg>151        </div>152        <div class="icon-battery" aria-hidden="true">153          <svg viewBox="0 0 26 14" fill="none" stroke="#FFFFFF" stroke-width="2">154            <rect x="1" y="2" width="20" height="10" rx="2" ry="2" />155            <rect x="22" y="5" width="3" height="4" rx="1" ry="1" />156            <rect x="3" y="4" width="12" height="6" fill="#FFFFFF" stroke="none"/>157          </svg>158        </div>159      </div>160    </div>161 162    <!-- Header -->163    <div class="header">164      <div class="header-row">165        <div class="back-icon" aria-hidden="true">166          <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">167            <path d="M15 6l-6 6 6 6" />168          </svg>169        </div>170        <div class="title">Style</div>171      </div>172    </div>173 174    <!-- Content -->175    <div class="content">176      <div class="filter-row">177        <div class="filter-left">178          <div class="checkbox"></div>179          <div class="label">Sneaker socks</div>180        </div>181        <div class="count">12</div>182      </div>183    </div>184 185    <!-- Bottom CTA -->186    <div class="bottom-area">187      <div class="cta">Show 15 Items</div>188    </div>189 190    <!-- Gesture bar -->191    <div class="gesture-bar"></div>192  </div>193</body>194</html>