GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Dark Settings Dialog Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    font-family: Roboto, Arial, Helvetica, sans-serif;16    color: #e8eaed;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 96px;25    width: 100%;26    padding: 0 24px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32    font-size: 34px;33    letter-spacing: 1px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 16px;39  }40  .dot {41    width: 12px; height: 12px; background: #fff; border-radius: 50%;42    opacity: 0.9;43  }44  .battery {45    width: 34px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative;46  }47  .battery::after {48    content: "";49    position: absolute; right: -6px; top: 4px;50    width: 4px; height: 10px; background: #fff; border-radius: 1px;51  }52  .battery .level {53    position: absolute; left: 2px; top: 2px;54    width: 22px; height: 12px; background: #fff;55  }56  .wifi {57    width: 24px; height: 24px;58  }59 60  /* Top app bar */61  .app-bar {62    position: absolute;63    top: 96px;64    left: 0;65    right: 0;66    height: 120px;67    display: flex;68    align-items: center;69    padding: 0 24px;70    box-sizing: border-box;71    color: #e8eaed;72  }73  .app-bar .back {74    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 16px;75  }76  .app-bar .title {77    font-size: 44px;78    color: #9aa0a6;79  }80  .app-bar .menu {81    margin-left: auto;82    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;83  }84 85  /* Content list */86  .content {87    position: absolute;88    top: 216px;89    left: 0;90    right: 0;91    bottom: 0;92    padding: 24px;93    box-sizing: border-box;94    color: #e8eaed;95  }96  .section-title {97    color: #8ab4f8;98    font-size: 34px;99    margin: 28px 0 10px 16px;100  }101  .item {102    padding: 24px 16px;103    border-bottom: 1px solid #1f1f1f;104  }105  .item .label {106    font-size: 36px;107    color: #e8eaed;108  }109  .item .sublabel {110    font-size: 28px;111    color: #9aa0a6;112    margin-top: 6px;113  }114 115  /* Modal overlay */116  .overlay {117    position: absolute;118    inset: 0;119    background: rgba(0,0,0,0.55);120  }121  .dialog {122    position: absolute;123    width: 920px;124    left: 50%;125    transform: translateX(-50%);126    top: 820px;127    background: #3f474f;128    border-radius: 24px;129    box-shadow: 0 24px 48px rgba(0,0,0,0.6);130    padding: 36px 40px 28px 40px;131    box-sizing: border-box;132    color: #e8eaed;133  }134  .dialog .dialog-title {135    font-size: 44px;136    margin-bottom: 20px;137  }138  .radio-row {139    display: flex;140    align-items: center;141    gap: 24px;142    padding: 24px 0;143  }144  .radio {145    width: 40px; height: 40px; border-radius: 50%;146    border: 3px solid #9aa0a6;147    position: relative;148    box-sizing: border-box;149  }150  .radio.checked {151    border-color: #8ab4f8;152  }153  .radio.checked::after {154    content: "";155    position: absolute;156    width: 18px; height: 18px; border-radius: 50%;157    background: #8ab4f8;158    top: 50%; left: 50%;159    transform: translate(-50%, -50%);160  }161  .radio-label {162    font-size: 38px;163    color: #e8eaed;164  }165  .dialog-actions {166    display: flex;167    justify-content: flex-end;168    margin-top: 12px;169  }170  .action-link {171    color: #8ab4f8;172    font-size: 34px;173  }174 175  /* Bottom gesture bar */176  .gesture {177    position: absolute;178    left: 50%;179    transform: translateX(-50%);180    bottom: 22px;181    width: 220px; height: 10px; background: #e6e6e6; border-radius: 8px; opacity: 0.9;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status bar -->189  <div class="status-bar">190    <div class="time">11:07</div>191    <div class="status-icons">192      <div class="dot"></div>193      <div class="dot"></div>194      <div class="dot"></div>195      <div class="dot"></div>196      <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">197        <path d="M2 8c5-4 15-4 20 0"></path>198        <path d="M5 12c3-3 11-3 14 0"></path>199        <path d="M8 16c2-2 6-2 8 0"></path>200        <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>201      </svg>202      <div class="battery"><div class="level"></div></div>203    </div>204  </div>205 206  <!-- App bar -->207  <div class="app-bar">208    <div class="back">209      <svg width="36" height="36" viewBox="0 0 24 24" fill="#e8eaed">210        <path d="M15.5 19l-7-7 7-7" />211      </svg>212    </div>213    <div class="title">dbwscratch.test.id2@gmail.com</div>214    <div class="menu">215      <svg width="28" height="28" viewBox="0 0 24 24" fill="#e8eaed">216        <circle cx="12" cy="5" r="2"></circle>217        <circle cx="12" cy="12" r="2"></circle>218        <circle cx="12" cy="19" r="2"></circle>219      </svg>220    </div>221  </div>222 223  <!-- Content list (background) -->224  <div class="content">225    <div class="section-title">Account</div>226    <div class="item">227      <div class="label">Manage your Google Account</div>228    </div>229 230    <div class="section-title">Inbox</div>231    <div class="item">232      <div class="label">Inbox type</div>233      <div class="sublabel">Default Inbox</div>234    </div>235    <div class="item">236      <div class="label">Inbox categories</div>237      <div class="sublabel">Primary, Social, Promotions</div>238    </div>239 240    <div class="section-title">Notifications</div>241    <div class="item">242      <div class="label">Manage labels</div>243    </div>244    <div class="item">245      <div class="label">Notification sounds</div>246    </div>247    <div class="item">248      <div class="label">Manage notifications</div>249    </div>250 251    <div class="section-title">General</div>252    <div class="item">253      <div class="label">Chat</div>254      <div class="sublabel">Show the chat and spaces tabs</div>255    </div>256  </div>257 258  <!-- Modal -->259  <div class="overlay"></div>260  <div class="dialog">261    <div class="dialog-title">Notifications</div>262 263    <div class="radio-row">264      <div class="radio checked"></div>265      <div class="radio-label">All</div>266    </div>267    <div class="radio-row">268      <div class="radio"></div>269      <div class="radio-label">High priority only</div>270    </div>271    <div class="radio-row">272      <div class="radio"></div>273      <div class="radio-label">None</div>274    </div>275 276    <div class="dialog-actions">277      <div class="action-link">Cancel</div>278    </div>279  </div>280 281  <!-- Bottom gesture bar -->282  <div class="gesture"></div>283</div>284</body>285</html>