GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>General Settings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 96px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-size: 34px;25    letter-spacing: 0.2px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .signal-dot {33    width: 18px; height: 18px; background: #EDEDED; border-radius: 50%;34  }35  .wifi {36    width: 34px; height: 24px; border: 3px solid #EDEDED; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: none;37  }38  .battery {39    width: 46px; height: 22px; border: 3px solid #EDEDED; border-radius: 4px; position: relative;40  }41  .battery::after {42    content: "";43    position: absolute; right: -8px; top: 6px;44    width: 6px; height: 10px; background: #EDEDED; border-radius: 2px;45  }46 47  /* App bar */48  .app-bar {49    height: 140px;50    display: flex;51    align-items: center;52    padding: 0 24px;53    border-bottom: 1px solid #272727;54  }55  .app-bar .title {56    font-size: 54px;57    margin-left: 16px;58    flex: 1;59  }60  .icon-btn {61    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;62  }63  .icon svg { width: 48px; height: 48px; fill: #EDEDED; }64 65  /* List container */66  .content {67    padding-bottom: 120px;68  }69  .item {70    padding: 36px 36px;71    border-bottom: 1px solid #272727;72    display: flex;73    align-items: flex-start;74    gap: 24px;75  }76  .item .texts { flex: 1; }77  .title-text { font-size: 40px; line-height: 56px; color: #FFFFFF; }78  .sub-text { font-size: 32px; line-height: 44px; color: #BDBDBD; }79 80  /* Link style for "device settings" */81  .link { color: #8AB4F8; text-decoration: none; }82 83  /* Checkbox */84  .checkbox {85    width: 60px; height: 60px; border-radius: 8px; border: 3px solid #4A8BFF; background: #1E40AF;86    display: flex; align-items: center; justify-content: center; margin-top: 16px;87  }88  .checkbox.unchecked {89    border-color: #5E5E5E; background: transparent;90  }91  .checkmark {92    width: 34px; height: 18px; border-left: 6px solid #FFFFFF; border-bottom: 6px solid #FFFFFF;93    transform: rotate(-45deg);94  }95 96  /* Info pill */97  .info-pill {98    display: flex; align-items: center; gap: 16px;99    background: #1F1F1F;100    border: 1px solid #2E2E2E; border-radius: 16px;101    padding: 18px 20px;102    color: #CFCFCF;103    margin-top: 8px;104    max-width: 960px;105  }106  .info-icon {107    width: 40px; height: 40px; border-radius: 50%;108    background: #3A3A3A; color: #BBBBBB; display: flex; align-items: center; justify-content: center;109    font-weight: bold;110    font-size: 28px;111  }112 113  /* Small label to the right (like value text) */114  .right-value {115    font-size: 34px; color: #BDBDBD; margin-top: 6px;116  }117 118  /* Bottom home indicator */119  .home-indicator {120    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);121    width: 360px; height: 14px; background: #E6E6E6; border-radius: 8px; opacity: 0.85;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="status-bar">130    <div>8:21</div>131    <div class="status-right">132      <div class="signal-dot"></div>133      <div class="signal-dot"></div>134      <div class="signal-dot"></div>135      <div class="signal-dot"></div>136      <div class="wifi"></div>137      <div class="battery"></div>138    </div>139  </div>140 141  <!-- App bar -->142  <div class="app-bar">143    <div class="icon-btn icon">144      <svg viewBox="0 0 24 24"><path d="M15.5 19.5L7 12l8.5-7.5v15z"/></svg>145    </div>146    <div class="title">General settings</div>147    <div class="icon-btn icon">148      <!-- Kebab (vertical dots) -->149      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="19" r="2.5"/></svg>150    </div>151  </div>152 153  <!-- Content list -->154  <div class="content">155    <!-- Theme -->156    <div class="item">157      <div class="texts">158        <div class="title-text">Theme</div>159        <div class="sub-text">System default</div>160      </div>161    </div>162 163    <!-- Default notification action -->164    <div class="item">165      <div class="texts">166        <div class="title-text">Default notification action</div>167        <div class="sub-text">Archive</div>168      </div>169    </div>170 171    <!-- Manage notifications with info pill -->172    <div class="item">173      <div class="texts">174        <div class="title-text">Manage notifications</div>175        <div class="info-pill">176          <div class="info-icon">i</div>177          <div class="sub-text" style="color:#CFCFCF;">178            Notifications are disabled. Turn them on in <a class="link" href="#">device settings</a>179          </div>180        </div>181      </div>182    </div>183 184    <!-- Conversation view (checked) -->185    <div class="item">186      <div class="texts">187        <div class="title-text">Conversation view</div>188        <div class="sub-text">Group emails in the same conversation together for IMAP, POP3, and Exchange accounts</div>189      </div>190      <div class="checkbox"><div class="checkmark"></div></div>191    </div>192 193    <!-- Conversation list density -->194    <div class="item">195      <div class="texts">196        <div class="title-text">Conversation list density</div>197        <div class="sub-text">Default</div>198      </div>199    </div>200 201    <!-- Hide bottom navigation on scroll (checked) -->202    <div class="item">203      <div class="texts">204        <div class="title-text">Hide bottom navigation on scroll</div>205      </div>206      <div class="checkbox"><div class="checkmark"></div></div>207    </div>208 209    <!-- Swipe actions -->210    <div class="item">211      <div class="texts">212        <div class="title-text">Swipe actions</div>213        <div class="sub-text">Configure swipe actions to quickly act on emails in the conversation list</div>214      </div>215    </div>216 217    <!-- Default reply action -->218    <div class="item">219      <div class="texts">220        <div class="title-text">Default reply action</div>221        <div class="sub-text">Choose your default reply action</div>222      </div>223    </div>224 225    <!-- Auto-fit messages (checked) -->226    <div class="item">227      <div class="texts">228        <div class="title-text">Auto-fit messages</div>229        <div class="sub-text">Shrink messages to fit the screen</div>230      </div>231      <div class="checkbox"><div class="checkmark"></div></div>232    </div>233 234    <!-- Auto-advance (next item partially visible) -->235    <div class="item" style="border-bottom:none;">236      <div class="texts">237        <div class="title-text">Auto-advance</div>238      </div>239    </div>240  </div>241 242  <!-- Home indicator -->243  <div class="home-indicator"></div>244</div>245</body>246</html>