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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #212121;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Top bars */20  .statusbar {21    height: 110px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E0E0E0;27    font-size: 34px;28    letter-spacing: 1px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 20px;34  }35  .toolbar {36    height: 160px;37    display: flex;38    align-items: center;39    padding: 0 24px;40  }41  .toolbar .left,42  .toolbar .right {43    width: 120px;44    display: flex;45    align-items: center;46    justify-content: center;47  }48  .toolbar .title {49    flex: 1;50    font-size: 56px;51    font-weight: 700;52    color: #ECECEC;53  }54 55  /* Settings list */56  .list { padding-top: 10px; }57  .row {58    position: relative;59    padding: 38px 36px;60  }61  .row.compact { padding: 30px 36px; }62  .row .primary {63    font-size: 44px;64    font-weight: 700;65    color: #FFFFFF;66  }67  .row .secondary {68    margin-top: 12px;69    font-size: 32px;70    color: #9E9E9E;71  }72  .divider {73    height: 1px;74    background: #2E2E2E;75    margin: 0 0 0 36px;76  }77 78  /* Toggles as checked boxes */79  .toggle {80    position: absolute;81    right: 36px;82    top: 50%;83    transform: translateY(-50%);84    width: 64px;85    height: 64px;86    background: #FF6E63;87    border-radius: 8px;88    display: flex;89    align-items: center;90    justify-content: center;91    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);92  }93  .toggle svg { width: 36px; height: 36px; }94  .helper {95    position: absolute;96    right: 130px;97    top: 50%;98    transform: translateY(-50%);99    width: 56px;100    height: 56px;101    border-radius: 50%;102    background: #3A3A3A;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #BDBDBD;107    font-weight: 700;108    font-size: 30px;109  }110 111  /* Section headers */112  .section {113    padding: 34px 36px 16px;114    color: #FF6E63;115    font-weight: 800;116    letter-spacing: 1.2px;117    font-size: 30px;118  }119 120  /* Bottom home indicator */121  .home-indicator {122    position: absolute;123    bottom: 28px;124    left: 50%;125    transform: translateX(-50%);126    width: 360px;127    height: 10px;128    border-radius: 999px;129    background: #E0E0E0;130    opacity: 0.75;131  }132 133  /* Simple icon colors */134  .icon { fill: #E0E0E0; }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status bar -->141  <div class="statusbar">142    <div>9:03</div>143    <div class="status-right">144      <!-- lightweight placeholders -->145      <svg width="34" height="34" viewBox="0 0 24 24" class="icon"><path d="M3 9l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/></svg>146      <svg width="34" height="34" viewBox="0 0 24 24" class="icon"><path d="M3 18h2a8 8 0 0 1 8-8V8a10 10 0 0 0-10 10zm0-5h2a13 13 0 0 1 13-13V0A15 15 0 0 0 3 13z"/></svg>147      <svg width="34" height="34" viewBox="0 0 24 24" class="icon"><path d="M16 4h-8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-3 16h-2v-1h2v1z"/></svg>148    </div>149  </div>150 151  <!-- Toolbar -->152  <div class="toolbar">153    <div class="left">154      <svg width="60" height="60" viewBox="0 0 24 24" class="icon"><path d="M15.5 19L8.5 12l7-7" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>155    </div>156    <div class="title">General</div>157    <div class="right">158      <svg width="44" height="44" viewBox="0 0 24 24" class="icon">159        <circle cx="12" cy="5" r="2"></circle>160        <circle cx="12" cy="12" r="2"></circle>161        <circle cx="12" cy="19" r="2"></circle>162      </svg>163    </div>164  </div>165 166  <div class="list">167    <!-- Home view -->168    <div class="row">169      <div class="primary">Home view</div>170      <div class="secondary">Today</div>171    </div>172    <div class="divider"></div>173 174    <!-- Sync home view -->175    <div class="row">176      <div class="primary">Sync home view</div>177      <div class="secondary">Make home view the same on all platforms</div>178      <div class="toggle">179        <svg viewBox="0 0 24 24">180          <path fill="#FFFFFF" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>181        </svg>182      </div>183    </div>184    <div class="divider"></div>185 186    <!-- Language -->187    <div class="row">188      <div class="primary">Language</div>189      <div class="secondary">Set automatically</div>190    </div>191    <div class="divider"></div>192 193    <!-- Smart date recognition -->194    <div class="row">195      <div class="primary">Smart date recognition</div>196      <div class="secondary">Automatically detect due dates in tasks</div>197      <div class="toggle">198        <svg viewBox="0 0 24 24">199          <path fill="#FFFFFF" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>200        </svg>201      </div>202    </div>203    <div class="divider"></div>204 205    <!-- Reset recurring sub-tasks -->206    <div class="row">207      <div class="primary">Reset recurring sub-tasks</div>208      <div class="secondary">Reset sub-tasks when you complete a recurring task</div>209      <div class="helper">?</div>210      <div class="toggle">211        <svg viewBox="0 0 24 24">212          <path fill="#FFFFFF" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>213        </svg>214      </div>215    </div>216    <div class="divider"></div>217 218    <!-- Auto accept invites -->219    <div class="row">220      <div class="primary">Auto accept invites</div>221      <div class="secondary">Automatically accept invites to shared projects</div>222      <div class="toggle">223        <svg viewBox="0 0 24 24">224          <path fill="#FFFFFF" d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/>225        </svg>226      </div>227    </div>228 229    <!-- Section: SOUND -->230    <div class="section">SOUND</div>231    <div class="row compact">232      <div class="primary">Task complete tone</div>233    </div>234    <div class="divider"></div>235 236    <!-- Section: DATE & TIME -->237    <div class="section">DATE & TIME</div>238    <div class="row">239      <div class="primary">Time zone</div>240      <div class="secondary">The web app and email reminders will use Asia/Kolkata</div>241    </div>242    <div class="divider"></div>243 244    <div class="row">245      <div class="primary">Start the week on</div>246      <div class="secondary">Monday</div>247    </div>248  </div>249 250  <div class="home-indicator"></div>251</div>252</body>253</html>