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>Sort & Filter - Shoes</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; font-family: Arial, Helvetica, sans-serif;13    color:#111;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; right:0;19    height:110px; background:#000; color:#fff;20    display:flex; align-items:center; justify-content:space-between;21    padding:0 36px; box-sizing:border-box;22    font-size:42px; font-weight:600;23  }24  .status-icons { display:flex; align-items:center; gap:22px; }25  .dot { width:10px; height:10px; background:#fff; opacity:0.9; border-radius:50%; }26 27  /* Header */28  .header {29    position:absolute; top:110px; left:0; right:0; height:160px;30    display:flex; align-items:center; padding:0 40px; box-sizing:border-box;31    background:#fff;32  }33  .header .back {34    width:64px; height:64px; margin-right:24px;35  }36  .header-title { font-size:48px; font-weight:700; flex:1; }37  .header-actions { display:flex; align-items:center; gap:36px; }38  .icon-btn { width:64px; height:64px; }39 40  /* Close circle */41  .close-circle {42    position:absolute; right:48px; top:340px;43    width:108px; height:108px; border-radius:54px;44    background:#111; display:flex; align-items:center; justify-content:center;45  }46  .close-circle svg { width:54px; height:54px; }47  .close-circle line { stroke:#fff; stroke-width:10; stroke-linecap:round; }48 49  /* Content */50  .content { position:absolute; left:0; right:0; top:270px; bottom:360px; padding:0 60px; box-sizing:border-box; overflow:hidden; }51  .page-title { font-size:54px; font-weight:700; margin:60px 0 24px 0; }52  .divider { height:2px; background:#e6e6e6; margin:24px 0 48px; }53 54  .section-title { font-size:44px; font-weight:700; margin:0 0 24px 0; }55 56  .option { display:flex; align-items:center; margin:28px 0; font-size:42px; }57  .radio {58    width:54px; height:54px; border-radius:27px; border:6px solid #cfcfcf; margin-right:28px; position:relative;59    box-sizing:border-box;60  }61  .radio.checked { border-color:#111; }62  .radio.checked::after {63    content:""; position:absolute; width:26px; height:26px; background:#111; border-radius:50%;64    top:50%; left:50%; transform:translate(-50%,-50%);65  }66 67  .checkbox {68    width:54px; height:54px; border-radius:12px; border:6px solid #d3d3d3; background:#fff; margin-right:28px; position:relative; box-sizing:border-box;69  }70  .checkbox.checked { background:#111; border-color:#111; }71  .checkbox.checked::after {72    content:""; position:absolute; left:14px; top:16px; width:18px; height:10px;73    border-left:6px solid #fff; border-bottom:6px solid #fff; transform:rotate(-45deg);74  }75 76  /* Actions */77  .actions {78    position:absolute; left:0; right:0; bottom:110px;79    padding:30px 60px; box-sizing:border-box;80    display:flex; align-items:center; justify-content:space-between;81  }82  .btn {83    height:140px; border-radius:80px; font-size:44px; font-weight:700;84    display:flex; align-items:center; justify-content:center; padding:0 48px; box-sizing:border-box;85  }86  .btn-outline {87    width:450px; border:3px solid #d9d9d9; background:#f6f6f6; color:#111;88    box-shadow:0 0 0 1px #eaeaea inset;89  }90  .btn-solid {91    width:450px; background:#111; color:#fff;92  }93 94  /* Bottom safe area */95  .home-indicator {96    position:absolute; bottom:0; left:0; right:0; height:110px; background:#000;97    display:flex; align-items:center; justify-content:center;98  }99  .home-indicator .bar {100    width:280px; height:12px; background:#fff; border-radius:8px; opacity:0.9;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>9:16</div>110    <div class="status-icons">111      <div class="dot"></div>112      <div class="dot"></div>113      <div class="dot"></div>114      <div class="dot"></div>115      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">116        <path d="M3 8l9-6 9 6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8z" stroke="#fff" stroke-width="2"/>117      </svg>118      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">119        <path d="M12 3a6 6 0 0 1 6 6v7H6V9a6 6 0 0 1 6-6z" stroke="#fff" stroke-width="2"/>120        <rect x="7" y="10" width="10" height="10" stroke="#fff" stroke-width="2"/>121      </svg>122    </div>123  </div>124 125  <!-- Header -->126  <div class="header">127    <svg class="back" viewBox="0 0 24 24">128      <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>129    </svg>130    <div class="header-title">All Shoes</div>131    <div class="header-actions">132      <!-- Search -->133      <svg class="icon-btn" viewBox="0 0 24 24">134        <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"/>135        <line x1="16" y1="16" x2="22" y2="22" stroke="#111" stroke-width="2" stroke-linecap="round"/>136      </svg>137      <!-- Bag -->138      <svg class="icon-btn" viewBox="0 0 24 24">139        <path d="M6 8h12l-1 11H7L6 8z" stroke="#111" stroke-width="2" fill="none"/>140        <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#111" stroke-width="2" fill="none"/>141      </svg>142    </div>143  </div>144 145  <!-- Close circle -->146  <div class="close-circle">147    <svg viewBox="0 0 24 24">148      <line x1="5" y1="5" x2="19" y2="19"></line>149      <line x1="19" y1="5" x2="5" y2="19"></line>150    </svg>151  </div>152 153  <!-- Content -->154  <div class="content">155    <div class="page-title">Sort & Filter</div>156    <div class="divider"></div>157 158    <div class="section-title">Sort By</div>159    <div class="option">160      <div class="radio checked"></div>161      <div>Featured</div>162    </div>163    <div class="option">164      <div class="radio"></div>165      <div>Newest</div>166    </div>167    <div class="option">168      <div class="radio"></div>169      <div>Price: Low-High</div>170    </div>171    <div class="option">172      <div class="radio"></div>173      <div>Price: High-Low</div>174    </div>175 176    <div class="divider"></div>177 178    <div class="section-title">Gender (1)</div>179    <div class="option">180      <div class="checkbox"></div>181      <div>Men</div>182    </div>183    <div class="option">184      <div class="checkbox checked"></div>185      <div>Women</div>186    </div>187    <div class="option">188      <div class="checkbox"></div>189      <div>Unisex</div>190    </div>191 192    <div class="divider"></div>193 194    <div class="section-title">Shop By Price</div>195    <div class="option">196      <div class="checkbox"></div>197      <div>Under ₹ 2 500.00</div>198    </div>199    <div class="option">200      <div class="checkbox"></div>201      <div>₹ 2 501.00 - ₹ 7 500.00</div>202    </div>203    <div class="option">204      <div class="checkbox"></div>205      <div>₹ 7 501.00 - ₹ 12 999.00</div>206    </div>207    <div class="option">208      <div class="checkbox"></div>209      <div>Over ₹ 13 000.00</div>210    </div>211  </div>212 213  <!-- Actions -->214  <div class="actions">215    <div class="btn btn-outline">Reset (1)</div>216    <div class="btn btn-solid">Apply</div>217  </div>218 219  <!-- Bottom home indicator -->220  <div class="home-indicator">221    <div class="bar"></div>222  </div>223 224</div>225</body>226</html>