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; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #eaeaea;16  }17 18  /* Top bars */19  .status-bar {20    height: 80px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #fff;26    font-size: 34px;27    letter-spacing: 1px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 20px;33  }34  .app-bar {35    height: 130px;36    display: flex;37    align-items: center;38    padding: 0 24px;39    border-bottom: 1px solid #242424;40  }41  .app-bar .email {42    font-size: 48px;43    font-weight: 500;44    color: #eaeaea;45    margin-left: 18px;46    flex: 1;47    white-space: nowrap;48    overflow: hidden;49    text-overflow: ellipsis;50  }51  .icon-btn {52    width: 96px;53    height: 96px;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #eaeaea;58  }59  /* Content */60  .content {61    position: absolute;62    top: 210px;63    bottom: 120px;64    left: 0;65    right: 0;66    overflow: hidden;67  }68  .list {69    height: 100%;70    overflow-y: auto;71    padding-bottom: 140px;72  }73  .section-label {74    color: #8ab4f8;75    font-size: 32px;76    font-weight: 600;77    padding: 34px 36px 14px;78  }79  .item {80    padding: 26px 36px 26px;81    border-bottom: 1px solid #1f1f1f;82  }83  .item.no-divider { border-bottom: none; }84  .title {85    font-size: 42px;86    font-weight: 600;87    color: #f5f5f5;88    margin-bottom: 8px;89  }90  .subtitle {91    font-size: 30px;92    color: #9aa0a6;93  }94  .disabled .title { color: #6e6e6e; }95  .disabled .subtitle { color: #5c5c5c; }96  .row {97    display: flex;98    align-items: center;99  }100  .row .title { flex: 1; margin: 0; }101  .checkbox {102    width: 52px;103    height: 52px;104    border: 3px solid #bdbdbd;105    border-radius: 8px;106  }107 108  /* Bottom gesture pill */109  .gesture-pill {110    position: absolute;111    left: 50%;112    transform: translateX(-50%);113    bottom: 28px;114    width: 360px;115    height: 14px;116    background: #e6e6e6;117    border-radius: 12px;118    opacity: 0.85;119  }120 121  /* Simple icons (SVG sizing helper) */122  svg { display: block; }123</style>124</head>125<body>126<div id="render-target">127  <!-- Status Bar -->128  <div class="status-bar">129    <div>11:08</div>130    <div class="status-right">131      <!-- simple dot icons to mimic notifications -->132      <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#fff"/></svg>133      <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#fff"/></svg>134      <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#fff"/></svg>135      <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="3" fill="#fff"/></svg>136      <!-- WiFi -->137      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">138        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6.6-5.5a10 10 0 0 0-13.2 0l1.4 1.4a8 8 0 0 1 10.4 0l1.4-1.4zm3.2-3.2a14 14 0 0 0-20.8 0l1.4 1.4a12 12 0 0 1 18 0l1.4-1.4z"/>139      </svg>140      <!-- Battery -->141      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">142        <path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v1h-2v-1H8a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8zM8 17h8V9H8v8z"/>143      </svg>144    </div>145  </div>146 147  <!-- App Bar -->148  <div class="app-bar">149    <div class="icon-btn">150      <!-- back arrow -->151      <svg width="56" height="56" viewBox="0 0 24 24" fill="#eaeaea">152        <path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/>153      </svg>154    </div>155    <div class="email">dbwscratch.test.id2@gmail.com</div>156    <div class="icon-btn">157      <!-- vertical dots -->158      <svg width="44" height="44" viewBox="0 0 24 24" fill="#eaeaea">159        <circle cx="12" cy="5" r="2.2"></circle>160        <circle cx="12" cy="12" r="2.2"></circle>161        <circle cx="12" cy="19" r="2.2"></circle>162      </svg>163    </div>164  </div>165 166  <!-- Content -->167  <div class="content">168    <div class="list">169      <div class="section-label">Account</div>170      <div class="item">171        <div class="title">Manage your Google Account</div>172      </div>173 174      <div class="section-label">Inbox</div>175      <div class="item">176        <div class="title">Inbox type</div>177        <div class="subtitle">Default Inbox</div>178      </div>179      <div class="item">180        <div class="title">Inbox categories</div>181        <div class="subtitle">Primary, Promotions, Social</div>182      </div>183 184      <div class="section-label">Notifications</div>185      <div class="item">186        <div class="title">Notifications</div>187        <div class="subtitle">High priority only</div>188      </div>189      <div class="item disabled">190        <div class="title">Inbox notifications</div>191        <div class="subtitle">Notify once</div>192      </div>193 194      <div class="item">195        <div class="title">Manage labels</div>196      </div>197      <div class="item">198        <div class="title">Notification sounds</div>199      </div>200      <div class="item">201        <div class="title">Manage notifications</div>202      </div>203 204      <div class="section-label">General</div>205      <div class="item no-divider">206        <div class="row">207          <div class="title">Chat</div>208          <div class="checkbox"></div>209        </div>210        <div class="subtitle">Show the chat and spaces tabs</div>211      </div>212    </div>213  </div>214 215  <!-- Bottom gesture pill -->216  <div class="gesture-pill"></div>217</div>218</body>219</html>