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 Dialog</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: "Roboto", Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 100px;26    background: #0f2a4a; /* deep blue to match app bar */27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31    color: #fff;32    z-index: 1;33  }34  .status-left { font-size: 36px; font-weight: 500; }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icon { width: 36px; height: 36px; opacity: 0.95; }42  .battery-icon { width: 54px; height: 28px; }43  .battery-icon svg rect { fill: none; stroke: #ffffff; stroke-width: 3; }44 45  /* App bar */46  .appbar {47    position: absolute;48    top: 100px;49    left: 0;50    width: 1080px;51    height: 160px;52    background: #11365e;53    display: flex;54    align-items: center;55    padding: 0 36px;56    box-sizing: border-box;57    color: #fff;58    z-index: 2;59  }60  .back-icon {61    width: 60px;62    height: 60px;63    margin-right: 24px;64  }65  .appbar-title {66    font-size: 56px;67    font-weight: 600;68    letter-spacing: 0.3px;69  }70 71  /* Content area */72  .content {73    position: absolute;74    top: 260px; /* below status + app bar */75    left: 0;76    right: 0;77    bottom: 180px; /* above gesture area */78    background: #ffffff;79    overflow: hidden;80    z-index: 1;81  }82  .settings-inner {83    padding: 48px;84    box-sizing: border-box;85  }86  .headline-link {87    color: #2FA7B8; /* teal hyperlink style */88    font-size: 40px;89    font-weight: 500;90    margin-bottom: 40px;91  }92  .item {93    padding: 34px 0;94    border-bottom: 1px solid #e6e6e6;95  }96  .item-title {97    font-size: 48px;98    font-weight: 600;99    margin-bottom: 12px;100    color: #212121;101  }102  .item-sub {103    font-size: 36px;104    color: #757575;105    line-height: 1.4;106    max-width: 900px;107  }108 109  /* Modal overlay and dialog */110  .overlay {111    position: absolute;112    top: 0; left: 0;113    width: 100%; height: 100%;114    background: rgba(0,0,0,0.45);115    z-index: 4;116  }117  .dialog {118    position: absolute;119    left: 54px;120    right: 54px;121    top: 1120px;122    background: #ffffff;123    border-radius: 12px;124    box-shadow: 0 28px 60px rgba(0,0,0,0.35);125    z-index: 5;126    padding: 56px 60px 40px 60px;127    box-sizing: border-box;128  }129  .dialog-title {130    font-size: 56px;131    font-weight: 700;132    margin-bottom: 32px;133  }134  .dialog-text {135    font-size: 38px;136    color: #444;137    line-height: 1.45;138    margin-right: 140px;139    margin-bottom: 40px;140  }141  .dialog-actions {142    display: flex;143    justify-content: flex-end;144  }145  .btn-text {146    font-size: 44px;147    font-weight: 700;148    color: #2DAAE1; /* light blue OKAY */149    text-transform: uppercase;150    letter-spacing: 1px;151  }152 153  /* Bottom gesture area */154  .gesture-area {155    position: absolute;156    bottom: 0;157    left: 0;158    width: 1080px;159    height: 150px;160    background: #000000;161    z-index: 6;162  }163  .gesture-pill {164    position: absolute;165    bottom: 38px;166    left: 50%;167    transform: translateX(-50%);168    width: 210px;169    height: 12px;170    background: #f1f1f1;171    border-radius: 8px;172    opacity: 0.95;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <div class="statusbar">180    <div class="status-left">12:21</div>181    <div class="status-right">182      <!-- Simple square icons representing status toggles -->183      <svg class="status-icon" viewBox="0 0 24 24">184        <rect x="3" y="3" width="18" height="18" fill="none" stroke="#fff" stroke-width="2"></rect>185      </svg>186      <svg class="status-icon" viewBox="0 0 24 24">187        <path d="M4 6h16v12H4z" fill="none" stroke="#fff" stroke-width="2"></path>188      </svg>189      <svg class="status-icon" viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>191      </svg>192      <!-- Calendar icon -->193      <svg class="status-icon" viewBox="0 0 24 24">194        <rect x="3" y="5" width="18" height="16" fill="none" stroke="#fff" stroke-width="2"></rect>195        <line x1="3" y1="9" x2="21" y2="9" stroke="#fff" stroke-width="2"></line>196      </svg>197      <svg class="status-icon" viewBox="0 0 24 24">198        <circle cx="12" cy="12" r="2" fill="#fff"></circle>199      </svg>200      <!-- Wifi -->201      <svg class="status-icon" viewBox="0 0 24 24">202        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>203        <circle cx="12" cy="19" r="2" fill="#fff"></circle>204      </svg>205      <!-- Battery -->206      <div class="battery-icon">207        <svg viewBox="0 0 30 16">208          <rect x="1" y="2" width="24" height="12" rx="2"></rect>209          <rect x="26" y="5" width="3" height="6" rx="1"></rect>210          <rect x="4" y="4" width="16" height="8" fill="#fff"></rect>211        </svg>212      </div>213    </div>214  </div>215 216  <div class="appbar">217    <svg class="back-icon" viewBox="0 0 24 24">218      <path d="M15 6L9 12l6 6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>219    </svg>220    <div class="appbar-title">General</div>221  </div>222 223  <div class="content">224    <div class="settings-inner">225      <div class="headline-link">General</div>226 227      <div class="item">228        <div class="item-title">Language</div>229        <div class="item-sub">English (US)</div>230      </div>231 232      <div class="item">233        <div class="item-title">Default view</div>234        <div class="item-sub">Agenda</div>235      </div>236 237      <div class="item">238        <div class="item-title">Clicking on the widget opens</div>239        <div class="item-sub">240          This setting has moved to the widget configuration screen, click the settings button on the widget to241          adjust this behavior.242        </div>243      </div>244 245      <div class="item">246        <div class="item-title">Other settings</div>247        <div class="item-sub">Additional preferences and options for the app appear here.</div>248      </div>249    </div>250  </div>251 252  <!-- Dim overlay -->253  <div class="overlay"></div>254 255  <!-- Dialog -->256  <div class="dialog">257    <div class="dialog-title">Restart required</div>258    <div class="dialog-text">259      Please fully quit and restart the app to apply this setting. You can do this by pressing back repeatedly or260      stopping the application with the recents screen.261    </div>262    <div class="dialog-actions">263      <div class="btn-text">OKAY</div>264    </div>265  </div>266 267  <div class="gesture-area">268    <div class="gesture-pill"></div>269  </div>270 271</div>272</body>273</html>