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>Settings Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121815; /* deep dark greenish */15    color: #E9ECE8;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 44px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #E9ECE8;26    font-size: 40px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .icon-small svg { width: 40px; height: 40px; fill: none; stroke: #E9ECE8; stroke-width: 2.5; }35  .dot { width: 10px; height: 10px; background: #C9CDC8; border-radius: 50%; display: inline-block; }36 37  /* Top app bar */38  .app-bar {39    height: 160px;40    display: flex;41    align-items: center;42    padding: 0 28px 0 24px;43    border-bottom: 1px solid #1F2420;44  }45  .back-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }46  .title {47    font-size: 64px;48    font-weight: 500;49    margin-left: 8px;50    letter-spacing: 0.3px;51  }52  .more-btn { margin-left: auto; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }53 54  /* Content list */55  .content {56    padding: 24px 40px 0 40px;57  }58  .item {59    padding: 34px 0;60    position: relative;61  }62  .item .label {63    font-size: 44px;64    font-weight: 500;65    margin-bottom: 12px;66  }67  .item .sub {68    font-size: 32px;69    color: #B5BDB0;70  }71  .divider {72    height: 1px;73    background: #2A2F2B;74    margin: 24px 0;75  }76  .section-hint {77    color: #9BD29A;78    font-size: 34px;79    margin: 12px 0 8px 0;80  }81 82  /* Alarm volume row */83  .alarm-row {84    display: flex;85    align-items: center;86    gap: 28px;87    padding-top: 12px;88  }89  .clock-icon svg {90    width: 54px;91    height: 54px;92    stroke: #C6CEBF;93    fill: none;94    stroke-width: 2.5;95  }96  .slider {97    position: relative;98    width: 880px;99    height: 8px;100    background: #2D3A31;101    border-radius: 4px;102    margin: 26px 0 0 82px; /* indent to align under text */103  }104  .slider .progress {105    position: absolute;106    left: 0; top: 0; bottom: 0;107    width: 820px; /* progress value */108    background: #97CF97;109    border-radius: 4px;110  }111  .slider .thumb {112    position: absolute;113    left: 810px; top: -20px;114    width: 48px; height: 48px;115    background: #CFE6C9;116    border-radius: 50%;117    box-shadow: 0 0 0 6px rgba(151,207,151,0.25);118  }119 120  /* Right aligned controls */121  .right-control {122    position: absolute;123    right: 32px;124    top: 50%;125    transform: translateY(-50%);126  }127 128  /* Toggle switch */129  .switch {130    width: 180px;131    height: 92px;132    background: #2F3A33;133    border-radius: 46px;134    position: relative;135    box-shadow: inset 0 0 0 2px #3C4A40;136  }137  .switch.on {138    background: #5FA66A;139    box-shadow: inset 0 0 0 2px #79B97C;140  }141  .switch .knob {142    width: 72px; height: 72px; border-radius: 50%;143    background: #DDEADB;144    position: absolute; top: 10px; right: 12px; /* on state */145  }146 147  /* Gesture bar */148  .gesture-bar {149    position: absolute;150    bottom: 40px;151    left: 50%;152    transform: translateX(-50%);153    width: 380px;154    height: 12px;155    background: #EAEAEA;156    border-radius: 8px;157    opacity: 0.8;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="status-left">3:03</div>167    <div class="status-right">168      <div class="icon-small">169        <!-- N icon -->170        <svg viewBox="0 0 24 24"><path d="M5 18V6l14 12V6" /></svg>171      </div>172      <div class="icon-small">173        <!-- play icon -->174        <svg viewBox="0 0 24 24"><path d="M8 5l11 7-11 7z" /></svg>175      </div>176      <div class="icon-small">177        <!-- square icon -->178        <svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12"/></svg>179      </div>180      <div class="icon-small">181        <!-- circle letter c -->182        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M15 9a4 4 0 10.1 6"/></svg>183      </div>184      <span class="dot"></span>185      <div class="icon-small">186        <!-- DND icon -->187        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M7 12h10"/></svg>188      </div>189      <div class="icon-small">190        <!-- wifi -->191        <svg viewBox="0 0 24 24"><path d="M3 9c4-4 14-4 18 0"/><path d="M6 12c3-3 9-3 12 0"/><path d="M9 15c2-2 4-2 6 0"/><circle cx="12" cy="18" r="1.5"/></svg>192      </div>193      <div class="icon-small">194        <!-- battery -->195        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2" ry="2"/><rect x="4" y="8" width="16" height="8" fill="#E9ECE8"/></svg>196      </div>197    </div>198  </div>199 200  <!-- App bar -->201  <div class="app-bar">202    <div class="back-btn">203      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#E9ECE8" stroke-width="2.5"><path d="M15 6l-6 6 6 6"/></svg>204    </div>205    <div class="title">Settings</div>206    <div class="more-btn">207      <!-- vertical more icon -->208      <svg viewBox="0 0 24 24" width="48" height="48" fill="#E9ECE8">209        <circle cx="12" cy="5" r="2.5"></circle>210        <circle cx="12" cy="12" r="2.5"></circle>211        <circle cx="12" cy="19" r="2.5"></circle>212      </svg>213    </div>214  </div>215 216  <!-- Content -->217  <div class="content">218 219    <div class="item">220      <div class="label">Snooze length</div>221      <div class="sub">10 minutes</div>222    </div>223 224    <div class="item">225      <div class="label">Alarm volume</div>226      <div class="alarm-row">227        <div class="clock-icon">228          <svg viewBox="0 0 24 24">229            <circle cx="12" cy="13" r="8"></circle>230            <path d="M12 13l4 3M6 4l3 2M18 4l-3 2"></path>231          </svg>232        </div>233      </div>234      <div class="slider">235        <div class="progress"></div>236        <div class="thumb"></div>237      </div>238    </div>239 240    <div class="item">241      <div class="label">Gradually increase volume</div>242      <div class="sub">Never</div>243    </div>244 245    <div class="item">246      <div class="label">Volume buttons</div>247      <div class="sub">Control volume</div>248    </div>249 250    <div class="item">251      <div class="label">Start week on</div>252      <div class="sub">Sunday</div>253    </div>254 255    <div class="divider"></div>256 257    <div class="section-hint">Timers</div>258 259    <div class="item">260      <div class="label">Timer sound</div>261      <div class="sub">Icicles</div>262    </div>263 264    <div class="item">265      <div class="label">Gradually increase volume</div>266      <div class="sub">Never</div>267    </div>268 269    <div class="item">270      <div class="label">Timer vibrate</div>271      <div class="right-control">272        <div class="switch on">273          <div class="knob"></div>274        </div>275      </div>276    </div>277 278    <div class="divider"></div>279 280    <div class="section-hint">Screen saver</div>281 282    <div class="item">283      <div class="label">Style</div>284      <div class="sub">Digital</div>285    </div>286 287  </div>288 289  <!-- Gesture bar -->290  <div class="gesture-bar"></div>291</div>292</body>293</html>