GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #1f272c;14    color: #e8ecef;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ffffff;30    font-weight: 600;31    font-size: 42px;32    letter-spacing: 0.3px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-dot, .status-circle {40    width: 22px; height: 22px; border-radius: 50%; background: #cfd8dc;41  }42  .battery {43    display: flex; align-items: center; gap: 16px; font-size: 34px;44  }45  .battery-icon {46    width: 44px; height: 26px; border: 3px solid #cfd8dc; border-radius: 6px; position: relative;47  }48  .battery-icon::after {49    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 14px; background: #cfd8dc; border-radius: 2px;50  }51  .battery-level { position: absolute; left: 4px; top: 4px; width: 28px; height: 16px; background: #cfd8dc; }52 53  /* Header */54  .topbar {55    position: absolute;56    top: 120px;57    left: 0;58    width: 100%;59    height: 140px;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .back-btn {65    position: absolute;66    left: 28px;67    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;68  }69  .title { font-size: 60px; font-weight: 700; color: #e9eef2; }70 71  /* Content area */72  .content {73    position: absolute;74    top: 300px;75    left: 0;76    width: 100%;77    padding: 0 48px 120px;78    box-sizing: border-box;79  }80 81  .section {82    margin-top: 60px;83  }84  .section-title {85    color: #c3ccd2;86    font-size: 34px;87    font-weight: 700;88    letter-spacing: 4px;89    text-transform: uppercase;90    margin-bottom: 28px;91  }92 93  /* Segmented controls */94  .pill {95    border: 2px solid #4a555c;96    border-radius: 60px;97    overflow: hidden;98    display: grid;99    gap: 0;100    background: transparent;101  }102  .pill.three { grid-template-columns: 1fr 1fr 1fr; height: 200px; }103  .pill.two { grid-template-columns: 1fr 1fr; height: 180px; }104  .segment {105    display: flex; flex-direction: column; align-items: center; justify-content: center;106    background: #2a3238; color: #dfe6ea;107  }108  .segment + .segment { border-left: 2px solid #4a555c; }109  .segment .main { font-size: 52px; font-weight: 700; }110  .segment .sub  { font-size: 28px; color: #a3afb7; margin-top: 10px; }111  .segment.selected { background: #3a4248; }112 113  /* Toggle rows */114  .toggle-row {115    margin-top: 56px;116    padding: 10px 0;117    display: flex;118    align-items: flex-start;119    justify-content: space-between;120    gap: 24px;121  }122  .toggle-text {123    max-width: 760px;124  }125  .toggle-title {126    font-size: 46px; font-weight: 700; margin-bottom: 16px; color: #e8ecef;127  }128  .toggle-desc {129    font-size: 32px; line-height: 1.4; color: #8f9aa3;130  }131  .switch {132    width: 148px; height: 72px; border-radius: 36px; position: relative;133    background: #2f393f; border: 2px solid #48545b;134  }135  .switch.on { background: #2fd46e; border-color: #2fd46e; }136  .switch .thumb {137    position: absolute; top: 6px; left: 6px; width: 60px; height: 60px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.35);138    transition: left 0.2s ease;139  }140  .switch.on .thumb { left: 82px; }141 142  /* Separators */143  .divider {144    width: 100%;145    height: 2px;146    background: #394248;147    margin: 48px 0;148  }149 150  /* Footer list item */151  .list-item {152    display: flex; align-items: center; justify-content: space-between;153    padding: 36px 0;154    font-size: 46px; font-weight: 700; color: #e8ecef;155  }156  .chevron {157    width: 48px; height: 48px;158  }159 160  /* Bottom gesture bar */161  .gesture {162    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);163    width: 220px; height: 12px; border-radius: 8px; background: #cfd8dc; opacity: 0.75;164  }165</style>166</head>167<body>168<div id="render-target">169  <div class="status-bar">170    <div>10:57</div>171    <div class="status-icons">172      <div class="status-dot"></div>173      <div class="status-circle"></div>174      <div class="status-circle"></div>175      <div class="status-dot"></div>176      <div class="battery">177        <svg width="42" height="42" viewBox="0 0 42 42" fill="none">178          <circle cx="21" cy="21" r="20" stroke="#cfd8dc" stroke-width="3"></circle>179          <path d="M27 12 L18 24 L24 24 L15 34" stroke="#cfd8dc" stroke-width="3" fill="none"></path>180        </svg>181        <div class="battery-icon"><div class="battery-level"></div></div>182        <div>100%</div>183      </div>184    </div>185  </div>186 187  <div class="topbar">188    <div class="back-btn">189      <svg width="64" height="64" viewBox="0 0 64 64">190        <path d="M40 14 L22 32 L40 50" stroke="#e8ecef" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>191      </svg>192    </div>193    <div class="title">Settings</div>194  </div>195 196  <div class="content">197    <div class="section">198      <div class="section-title">UNITS</div>199      <div class="pill three">200        <div class="segment">201          <div class="main">Imperial</div>202          <div class="sub">°F, mph, in</div>203        </div>204        <div class="segment selected">205          <div class="main">Metric</div>206          <div class="sub">°C, km/h, mm</div>207        </div>208        <div class="segment">209          <div class="main">Hybrid</div>210          <div class="sub">°C, mph, mm</div>211        </div>212      </div>213    </div>214 215    <div class="section">216      <div class="section-title">WIND DIRECTION</div>217      <div class="pill two">218        <div class="segment">219          <div class="main">Cardinal</div>220          <div class="sub">N, S, W, E</div>221        </div>222        <div class="segment selected">223          <div class="main">Degrees</div>224          <div class="sub">0° - 360°</div>225        </div>226      </div>227    </div>228 229    <div class="section">230      <div class="section-title">DISPLAY MODE</div>231      <div class="pill three" style="height: 180px;">232        <div class="segment"><div class="main" style="font-weight:600;">Light</div></div>233        <div class="segment"><div class="main" style="font-weight:600;">Dark</div></div>234        <div class="segment"><div class="main" style="font-weight:600;">Black</div></div>235      </div>236    </div>237 238    <div class="toggle-row">239      <div class="toggle-text">240        <div class="toggle-title">Use Device Settings</div>241        <div class="toggle-desc">Enable the Light or Dark selection located in your device's Display & Brightness settings</div>242      </div>243      <div class="switch on"><div class="thumb"></div></div>244    </div>245 246    <div class="toggle-row">247      <div class="toggle-text">248        <div class="toggle-title">Current Conditions Background</div>249        <div class="toggle-desc">Enable/disable the background on your Today screen to visually reflect the weather in your selected location. That means if it’s raining outside, it’s raining in the app.</div>250      </div>251      <div class="switch on"><div class="thumb"></div></div>252    </div>253 254    <div class="divider"></div>255 256    <div class="list-item">257      <div>Manage Notifications</div>258      <svg class="chevron" viewBox="0 0 24 24">259        <path d="M8 4 L16 12 L8 20" stroke="#cfd8dc" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>260      </svg>261    </div>262  </div>263 264  <div class="gesture"></div>265</div>266</body>267</html>