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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 150px;26    background: #CFCFCF;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 48px;31    box-sizing: border-box;32    color: #FFFFFF;33    letter-spacing: 1px;34  }35  .status-time {36    font-size: 42px;37    font-weight: 600;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .status-icons svg {45    fill: none;46    stroke: #FFFFFF;47    stroke-width: 4;48  }49 50  /* Header */51  .header {52    background: #FFFFFF;53    padding: 36px 48px 24px 48px;54    display: flex;55    align-items: center;56    justify-content: space-between;57    box-sizing: border-box;58    border-bottom: 1px solid #F1F1F1;59  }60  .header-left {61    display: flex;62    align-items: center;63    gap: 28px;64  }65  .header-title {66    font-size: 60px;67    font-weight: 800;68    letter-spacing: 0.5px;69  }70  .icon-btn svg {71    stroke: #111;72    fill: none;73    stroke-width: 8;74  }75 76  /* List */77  .list {78    padding-top: 28px;79  }80  .list-item {81    background: #F3EBD8;82    padding: 34px 48px;83    display: flex;84    align-items: center;85    justify-content: space-between;86    font-size: 44px;87    box-sizing: border-box;88  }89  .li-left {90    display: flex;91    align-items: center;92    gap: 28px;93  }94  .checkbox {95    width: 64px;96    height: 64px;97    border: 5px solid #2C2C2C;98    border-radius: 10px;99    position: relative;100    box-sizing: border-box;101  }102  .checkbox svg {103    position: absolute;104    left: 10px;105    top: 12px;106    width: 42px;107    height: 42px;108    stroke: #2C2C2C;109    stroke-width: 10;110    fill: none;111  }112  .count {113    font-size: 42px;114    color: #111;115  }116 117  /* Bottom CTA */118  .bottom-bar {119    position: absolute;120    left: 0;121    right: 0;122    bottom: 0;123    background: #FFFFFF;124    border-top: 1px solid #E8E8E8;125    height: 260px;126    box-sizing: border-box;127    padding: 40px 48px 36px 48px;128    display: flex;129    align-items: center;130  }131  .cta {132    width: 100%;133    height: 150px;134    background: #111111;135    color: #FFFFFF;136    border-radius: 12px;137    display: flex;138    align-items: center;139    justify-content: center;140    font-size: 44px;141    font-weight: 800;142    letter-spacing: 0.3px;143    box-shadow: 0 8px 18px rgba(0,0,0,0.08);144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status bar -->151  <div class="status-bar">152    <div class="status-time">12:55</div>153    <div class="status-icons">154      <!-- WiFi -->155      <svg width="58" height="40" viewBox="0 0 58 40">156        <path d="M4 12c11-8 39-8 50 0"/>157        <path d="M10 20c8-6 30-6 38 0"/>158        <path d="M18 28c5-4 17-4 22 0"/>159        <circle cx="29" cy="34" r="2.5" fill="#FFFFFF" stroke="none"></circle>160      </svg>161      <!-- Battery -->162      <svg width="70" height="34" viewBox="0 0 70 34">163        <rect x="2" y="4" width="56" height="26" rx="4"></rect>164        <rect x="60" y="10" width="8" height="14" rx="2"></rect>165        <rect x="6" y="8" width="48" height="18" rx="2" fill="#FFFFFF" stroke="none"></rect>166      </svg>167    </div>168  </div>169 170  <!-- Header -->171  <div class="header">172    <div class="header-left">173      <!-- Back arrow -->174      <div class="icon-btn" aria-label="Back">175        <svg width="56" height="56" viewBox="0 0 56 56">176          <path d="M34 8 L18 28 L34 48"></path>177        </svg>178      </div>179      <div class="header-title">Style</div>180    </div>181    <!-- Filter/tune icon -->182    <div class="icon-btn" aria-label="Filter">183      <svg width="64" height="64" viewBox="0 0 64 64">184        <line x1="10" y1="18" x2="42" y2="18"></line>185        <circle cx="50" cy="18" r="4" fill="#111" stroke="none"></circle>186        <line x1="10" y1="32" x2="42" y2="32"></line>187        <circle cx="50" cy="32" r="4" fill="#111" stroke="none"></circle>188        <line x1="10" y1="46" x2="42" y2="46"></line>189        <circle cx="50" cy="46" r="4" fill="#111" stroke="none"></circle>190      </svg>191    </div>192  </div>193 194  <!-- List -->195  <div class="list">196    <div class="list-item">197      <div class="li-left">198        <div class="checkbox">199          <svg viewBox="0 0 48 48">200            <path d="M8 24l8 10 20-22"></path>201          </svg>202        </div>203        <div>Sneaker socks</div>204      </div>205      <div class="count">12</div>206    </div>207  </div>208 209  <!-- bottom action -->210  <div class="bottom-bar">211    <div class="cta">Show 12 Items</div>212  </div>213 214</div>215</body>216</html>