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>Gmail Settings - Dark</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: #121212;15    color: #FFFFFF;16    font-family: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Top bars */20  .status-bar {21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 18px;34  }35  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.9; }36  .app-bar {37    height: 132px;38    display: flex;39    align-items: center;40    padding: 0 24px 0 18px;41    border-bottom: 1px solid #2a2a2a;42  }43  .back-btn {44    width: 84px;45    height: 84px;46    display: flex;47    align-items: center;48    justify-content: center;49    margin-right: 12px;50  }51  .app-title {52    font-size: 42px;53    font-weight: 500;54    letter-spacing: 0.2px;55    flex: 1;56  }57  .menu-btn {58    width: 84px;59    height: 84px;60    display: flex;61    align-items: center;62    justify-content: center;63  }64  .icon { fill: none; stroke: #fff; stroke-width: 6; }65 66  /* Content */67  .content {68    position: absolute;69    left: 0;70    right: 0;71    top: 228px; /* status + app bars */72    bottom: 0;73    overflow: hidden;74    padding: 0 24px;75  }76  .section {77    padding: 24px 24px 0 24px;78  }79  .section-title {80    color: #8AB4F8;81    font-size: 32px;82    margin-bottom: 18px;83    font-weight: 500;84  }85  .item {86    padding: 28px 0;87    border-bottom: 1px solid #2a2a2a;88  }89  .item:last-child { border-bottom: none; }90  .item-title {91    font-size: 40px;92    font-weight: 500;93    margin-bottom: 8px;94  }95  .item-sub {96    font-size: 28px;97    color: #B0B0B0;98  }99  .spacer-xxl { height: 12px; border-bottom: 1px solid #2a2a2a; opacity: 0.6; } /* faint divider between big groups */100 101  /* Rows with trailing control */102  .item-row {103    display: flex;104    align-items: center;105    justify-content: space-between;106  }107  .checkbox {108    width: 54px;109    height: 54px;110    border: 3px solid #8A8A8A;111    border-radius: 8px;112    box-sizing: border-box;113  }114 115  /* Gesture bar */116  .gesture {117    position: absolute;118    bottom: 32px;119    left: 50%;120    transform: translateX(-50%);121    width: 320px;122    height: 12px;123    background: #D9D9D9;124    border-radius: 10px;125    opacity: 0.9;126  }127</style>128</head>129<body>130<div id="render-target">131  <!-- Status bar -->132  <div class="status-bar">133    <div>11:07</div>134    <div class="status-right">135      <span class="dot"></span>136      <span class="dot"></span>137      <span class="dot"></span>138      <span class="dot"></span>139      <!-- simple signal/wifi/battery placeholders -->140      <svg width="36" height="36" viewBox="0 0 36 36">141        <path class="icon" d="M4 26l8-8 8 8" />142      </svg>143      <svg width="36" height="36" viewBox="0 0 36 36">144        <rect x="6" y="8" width="22" height="16" stroke="#fff" fill="none" stroke-width="3"/>145      </svg>146    </div>147  </div>148 149  <!-- App bar -->150  <div class="app-bar">151    <div class="back-btn">152      <svg width="56" height="56" viewBox="0 0 56 56">153        <path d="M34 12 L18 28 L34 44" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>154      </svg>155    </div>156    <div class="app-title">dbwscratch.test.id2@gmail.com</div>157    <div class="menu-btn">158      <svg width="48" height="48" viewBox="0 0 48 48">159        <circle cx="24" cy="10" r="4" fill="#fff"></circle>160        <circle cx="24" cy="24" r="4" fill="#fff"></circle>161        <circle cx="24" cy="38" r="4" fill="#fff"></circle>162      </svg>163    </div>164  </div>165 166  <!-- Content -->167  <div class="content">168    <!-- Account -->169    <div class="section">170      <div class="section-title">Account</div>171      <div class="item">172        <div class="item-title">Manage your Google Account</div>173      </div>174    </div>175 176    <div class="spacer-xxl"></div>177 178    <!-- Inbox -->179    <div class="section">180      <div class="section-title">Inbox</div>181 182      <div class="item">183        <div class="item-title">Inbox type</div>184        <div class="item-sub">Default Inbox</div>185      </div>186 187      <div class="item">188        <div class="item-title">Inbox categories</div>189        <div class="item-sub">Primary, Promotions, Social</div>190      </div>191    </div>192 193    <div class="spacer-xxl"></div>194 195    <!-- Notifications -->196    <div class="section">197      <div class="section-title">Notifications</div>198 199      <div class="item">200        <div class="item-title">Notifications</div>201        <div class="item-sub">All</div>202      </div>203 204      <div class="item">205        <div class="item-title">Inbox notifications</div>206        <div class="item-sub">Notify once</div>207      </div>208 209      <div class="item">210        <div class="item-title">Manage labels</div>211      </div>212 213      <div class="item">214        <div class="item-title">Notification sounds</div>215      </div>216 217      <div class="item">218        <div class="item-title">Manage notifications</div>219      </div>220    </div>221 222    <div class="spacer-xxl"></div>223 224    <!-- General -->225    <div class="section">226      <div class="section-title">General</div>227 228      <div class="item item-row">229        <div>230          <div class="item-title">Chat</div>231          <div class="item-sub">Show the chat and spaces tabs</div>232        </div>233        <div class="checkbox"></div>234      </div>235    </div>236  </div>237 238  <!-- Gesture bar -->239  <div class="gesture"></div>240</div>241</body>242</html>