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>General Settings - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EDEDED;16  }17 18  .status-bar {19    height: 96px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 22px;32  }33  /* simple tiny icons */34  .dot { width: 10px; height: 10px; background:#EDEDED; border-radius:50%; display:inline-block; opacity:.9; }35  .signal { width: 36px; height: 28px; border-right: 6px solid #EDEDED; border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity:.9; }36  .battery {37    width: 48px; height: 26px; border: 4px solid #EDEDED; border-radius: 4px; position: relative;38  }39  .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#EDEDED; border-radius:2px; }40  .battery .level { width: 60%; height: 100%; background:#EDEDED; }41 42  .appbar {43    height: 128px;44    display: flex;45    align-items: center;46    padding: 0 24px;47    border-bottom: 1px solid #2A2A2A;48  }49  .nav-left, .nav-right { width: 120px; display:flex; align-items:center; justify-content:center; }50  .appbar h1 {51    margin: 0;52    flex: 1;53    font-size: 56px;54    font-weight: 600;55    letter-spacing: 0.2px;56  }57  .icon {58    width: 56px; height: 56px; fill:#EDEDED;59  }60 61  .content { padding: 24px 0; }62 63  .divider { height: 1px; background:#2A2A2A; margin: 36px 0; }64 65  .section-label {66    color:#FF6E67;67    font-size: 34px;68    letter-spacing: 1.5px;69    font-weight: 700;70    padding: 0 36px;71    margin: 18px 0 12px;72  }73 74  .list-item {75    padding: 26px 36px;76    display: flex;77    align-items: center;78    gap: 24px;79  }80  .list-item .text {81    flex: 1;82    min-width: 0;83  }84  .title {85    font-size: 44px;86    line-height: 1.25;87    font-weight: 600;88    color: #F5F5F5;89    margin-bottom: 8px;90  }91  .subtitle {92    font-size: 34px;93    color: #A9A9A9;94  }95 96  .end-actions {97    display: flex;98    align-items: center;99    gap: 22px;100  }101 102  .checkbox {103    width: 56px; height: 56px;104    border-radius: 8px;105    border: 4px solid #6E6E6E;106    box-sizing: border-box;107  }108  .checkbox.checked {109    background: #FF6F3D;110    border: none;111    display: flex; align-items: center; justify-content: center;112  }113  .checkbox.checked svg { width: 36px; height: 36px; fill: none; stroke: #FFFFFF; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; }114 115  .help-circle {116    width: 52px; height: 52px; border-radius: 50%;117    border: 3px solid #8C8C8C;118    color: #BDBDBD;119    display:flex; align-items:center; justify-content:center;120    font-size: 30px; font-weight: 700;121  }122 123  /* bottom home indicator */124  .home-pill {125    position: absolute;126    bottom: 32px; left: 50%;127    transform: translateX(-50%);128    width: 340px; height: 12px;129    background: #D9D9D9;130    opacity: .85;131    border-radius: 8px;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status Bar -->139  <div class="status-bar">140    <div style="display:flex; align-items:center; gap:18px;">141      <span>9:02</span>142      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>143      <span style="font-size:44px; line-height:1;">•</span>144    </div>145    <div class="status-icons">146      <div class="signal"></div>147      <div style="width:36px; height:28px; border:4px solid #EDEDED; border-radius:6px;"></div>148      <div class="battery"><div class="level"></div></div>149    </div>150  </div>151 152  <!-- App Bar -->153  <div class="appbar">154    <div class="nav-left">155      <svg class="icon" viewBox="0 0 24 24">156        <path d="M15.5 19L8.5 12l7-7" stroke="#EDEDED" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157      </svg>158    </div>159    <h1>General</h1>160    <div class="nav-right">161      <svg class="icon" viewBox="0 0 24 24">162        <circle cx="12" cy="5" r="2.2"></circle>163        <circle cx="12" cy="12" r="2.2"></circle>164        <circle cx="12" cy="19" r="2.2"></circle>165      </svg>166    </div>167  </div>168 169  <div class="content">170 171    <!-- Home view -->172    <div class="list-item">173      <div class="text">174        <div class="title">Home view</div>175        <div class="subtitle">Today</div>176      </div>177    </div>178 179    <!-- Sync home view (unchecked) -->180    <div class="list-item">181      <div class="text">182        <div class="title">Sync home view</div>183        <div class="subtitle">Only use this home view on Android</div>184      </div>185      <div class="end-actions">186        <div class="checkbox"></div>187      </div>188    </div>189 190    <div class="divider"></div>191 192    <!-- Language -->193    <div class="list-item">194      <div class="text">195        <div class="title">Language</div>196        <div class="subtitle">Set automatically</div>197      </div>198    </div>199 200    <!-- Smart date recognition (checked) -->201    <div class="list-item">202      <div class="text">203        <div class="title">Smart date recognition</div>204        <div class="subtitle">Automatically detect due dates in tasks</div>205      </div>206      <div class="end-actions">207        <div class="checkbox checked">208          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>209        </div>210      </div>211    </div>212 213    <div class="divider"></div>214 215    <!-- Reset recurring sub-tasks (help + checked) -->216    <div class="list-item">217      <div class="text">218        <div class="title">Reset recurring sub-tasks</div>219        <div class="subtitle">Reset sub-tasks when you complete a recurring task</div>220      </div>221      <div class="end-actions">222        <div class="help-circle">?</div>223        <div class="checkbox checked">224          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>225        </div>226      </div>227    </div>228 229    <!-- Auto accept invites (checked) -->230    <div class="list-item">231      <div class="text">232        <div class="title">Auto accept invites</div>233        <div class="subtitle">Automatically accept invites to shared projects</div>234      </div>235      <div class="end-actions">236        <div class="checkbox checked">237          <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>238        </div>239      </div>240    </div>241 242    <div class="divider"></div>243 244    <!-- SOUND section -->245    <div class="section-label">SOUND</div>246 247    <div class="list-item">248      <div class="text">249        <div class="title">Task complete tone</div>250      </div>251    </div>252 253    <div class="divider"></div>254 255    <!-- DATE & TIME -->256    <div class="section-label">DATE & TIME</div>257 258    <div class="list-item">259      <div class="text">260        <div class="title">Time zone</div>261        <div class="subtitle">The web app and email reminders will use Asia/Kolkata</div>262      </div>263    </div>264 265    <div class="divider"></div>266 267    <div class="list-item">268      <div class="text">269        <div class="title">Start the week on</div>270        <div class="subtitle">Monday</div>271      </div>272    </div>273 274  </div>275 276  <div class="home-pill"></div>277</div>278</body>279</html>