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>Settings UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #EDEDED;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #121212;21  }22 23  /* Top status bar */24  .status-bar {25    height: 90px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-weight: 600;32    font-size: 36px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon {40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* App bar */46  .app-bar {47    height: 120px;48    padding: 0 24px;49    display: flex;50    align-items: center;51    gap: 24px;52  }53  .title {54    font-size: 44px;55    font-weight: 600;56    color: #EDEDED;57    letter-spacing: 0.2px;58    flex: 1;59    white-space: nowrap;60    overflow: hidden;61    text-overflow: ellipsis;62  }63  .menu-button {64    width: 72px;65    height: 72px;66    display: flex;67    align-items: center;68    justify-content: center;69  }70 71  /* Content */72  .content {73    padding: 12px 24px 140px 24px;74  }75 76  .section-title {77    color: #8BC34A;78    font-size: 34px;79    font-weight: 700;80    margin: 28px 0 18px 0;81  }82 83  .setting-item {84    padding: 24px 0;85    border-top: 1px solid rgba(255,255,255,0.06);86  }87  .setting-item:first-child {88    border-top: none;89  }90  .setting-title {91    font-size: 38px;92    font-weight: 600;93    color: #FAFAFA;94    margin-bottom: 8px;95  }96  .setting-sub {97    font-size: 30px;98    color: #BDBDBD;99  }100 101  .divider {102    height: 1px;103    background: rgba(255,255,255,0.06);104    margin: 10px -24px 10px -24px;105  }106 107  /* Checkbox */108  .setting-row {109    display: flex;110    align-items: center;111    justify-content: space-between;112  }113  .checkbox {114    width: 52px;115    height: 52px;116    border: 3px solid #BDBDBD;117    border-radius: 8px;118    background: transparent;119  }120 121  /* Gesture bar */122  .gesture-bar {123    position: absolute;124    bottom: 34px;125    left: 50%;126    transform: translateX(-50%);127    width: 320px;128    height: 16px;129    background: #EDEDED;130    border-radius: 16px;131    opacity: 0.85;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status Bar -->139  <div class="status-bar">140    <div>11:27</div>141    <div class="status-right">142      <!-- Do not disturb icon -->143      <svg class="icon" width="38" height="38" viewBox="0 0 24 24">144        <circle cx="12" cy="12" r="10" fill="none" stroke="#EDEDED" stroke-width="2"/>145        <rect x="6" y="11" width="12" height="2" fill="#EDEDED"/>146      </svg>147      <!-- Battery icon -->148      <svg class="icon" width="48" height="48" viewBox="0 0 32 32">149        <rect x="2" y="6" width="24" height="20" rx="4" ry="4" fill="none" stroke="#EDEDED" stroke-width="2"/>150        <rect x="26" y="12" width="4" height="8" fill="#EDEDED"/>151        <rect x="4" y="8" width="18" height="16" fill="#EDEDED"/>152      </svg>153      <div style="font-size: 30px; color:#EDEDED;">100%</div>154    </div>155  </div>156 157  <!-- App Bar -->158  <div class="app-bar">159    <!-- Back arrow -->160    <svg class="icon" width="64" height="64" viewBox="0 0 24 24">161      <path d="M15 6l-6 6 6 6" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>162    </svg>163    <div class="title">kariniversen641@gmail.com</div>164    <!-- Kebab menu -->165    <div class="menu-button">166      <svg width="32" height="32" viewBox="0 0 24 24">167        <circle cx="12" cy="5" r="2.2" fill="#EDEDED"/>168        <circle cx="12" cy="12" r="2.2" fill="#EDEDED"/>169        <circle cx="12" cy="19" r="2.2" fill="#EDEDED"/>170      </svg>171    </div>172  </div>173 174  <!-- Content -->175  <div class="content">176 177    <div class="section-title">Account</div>178    <div class="setting-item">179      <div class="setting-title">Manage your Google Account</div>180    </div>181 182    <div class="section-title">Inbox</div>183 184    <div class="setting-item">185      <div class="setting-title">Inbox type</div>186      <div class="setting-sub">Default Inbox</div>187    </div>188 189    <div class="divider"></div>190 191    <div class="setting-item">192      <div class="setting-title">Inbox categories</div>193      <div class="setting-sub">Primary, Promotions, Social</div>194    </div>195 196    <div class="section-title">Notifications</div>197 198    <div class="setting-item">199      <div class="setting-title">Notifications</div>200      <div class="setting-sub">All</div>201    </div>202 203    <div class="setting-item">204      <div class="setting-title">Inbox notifications</div>205      <div class="setting-sub">Notify once</div>206    </div>207 208    <div class="setting-item">209      <div class="setting-title">Manage labels</div>210    </div>211 212    <div class="setting-item">213      <div class="setting-title">Notification sounds</div>214    </div>215 216    <div class="setting-item">217      <div class="setting-title">Manage notifications</div>218    </div>219 220    <div class="section-title">General</div>221 222    <div class="setting-item setting-row">223      <div>224        <div class="setting-title">Chat</div>225        <div class="setting-sub">Show the chat and spaces tabs</div>226      </div>227      <div class="checkbox"></div>228    </div>229 230  </div>231 232  <!-- Gesture Bar -->233  <div class="gesture-bar"></div>234</div>235</body>236</html>