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>General settings - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EAEAEA;13    font-family: Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0;19    width: 100%; height: 100px;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px; box-sizing: border-box;22    color: #ffffff; font-size: 40px; letter-spacing: 0.5px;23  }24  .status-left { display: flex; align-items: center; gap: 18px; }25  .status-dots { display: flex; gap: 10px; }26  .status-dots span {27    width: 14px; height: 14px; background: #fff; border-radius: 50%; display: inline-block; opacity: 0.8;28  }29  .status-right { display: flex; align-items: center; gap: 22px; }30  .icon { display: inline-block; }31 32  /* App bar */33  .app-bar {34    position: absolute; top: 100px; left: 0; width: 100%; height: 140px;35    display: flex; align-items: center;36    padding: 0 36px; box-sizing: border-box;37    border-bottom: 1px solid #2a2a2a;38  }39  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }40  .app-title { font-size: 54px; font-weight: 500; color: #F5F5F5; flex: 1; }41  .kebab { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }42 43  /* List */44  .list {45    position: absolute; top: 240px; left: 0; width: 100%;46    padding: 0 36px 120px; box-sizing: border-box;47  }48  .item {49    border-bottom: 1px solid #2a2a2a;50    padding: 36px 0; display: flex; align-items: center; justify-content: space-between;51  }52  .text { max-width: 860px; }53  .title { font-size: 40px; color: #EDEDED; margin-bottom: 12px; }54  .subtitle { font-size: 30px; color: #9AA0A6; line-height: 1.35; }55 56  /* Checkbox */57  .checkbox {58    width: 56px; height: 56px; border-radius: 8px;59    background: #1a73e8; border: 2px solid #1a73e8;60    display: flex; align-items: center; justify-content: center;61    box-shadow: 0 0 0 1px rgba(26,115,232,0.3) inset;62  }63  .checkbox svg { width: 36px; height: 36px; }64  .divider { height: 24px; }65  /* Gesture bar */66  .gesture {67    position: absolute; bottom: 30px; left: 50%;68    transform: translateX(-50%);69    width: 300px; height: 12px; background: #ffffff; border-radius: 12px; opacity: 0.8;70  }71</style>72</head>73<body>74<div id="render-target">75 76  <!-- Status bar -->77  <div class="status-bar">78    <div class="status-left">79      <div class="time">9:08</div>80      <div class="status-dots">81        <span></span><span></span><span></span><span></span><span></span>82      </div>83    </div>84    <div class="status-right">85      <!-- Wi‑Fi icon -->86      <svg class="icon" width="48" height="32" viewBox="0 0 48 32" fill="none">87        <path d="M4 10c10-8 30-8 40 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>88        <path d="M10 16c7-6 21-6 28 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>89        <path d="M18 22c4-3 8-3 12 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>90        <circle cx="24" cy="27" r="3" fill="#fff"/>91      </svg>92      <!-- Battery icon -->93      <svg class="icon" width="60" height="28" viewBox="0 0 60 28" fill="none">94        <rect x="2" y="4" width="50" height="20" rx="4" stroke="#fff" stroke-width="3"/>95        <rect x="54" y="9" width="4" height="10" rx="2" fill="#fff"/>96        <rect x="6" y="8" width="34" height="12" rx="2" fill="#fff"/>97      </svg>98    </div>99  </div>100 101  <!-- App bar -->102  <div class="app-bar">103    <div class="back-btn">104      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">105        <path d="M15 19L8 12l7-7" stroke="#EDEDED" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>106      </svg>107    </div>108    <div class="app-title">General settings</div>109    <div class="kebab">110      <svg width="32" height="32" viewBox="0 0 24 24" fill="#EDEDED">111        <circle cx="12" cy="4.5" r="2.1"></circle>112        <circle cx="12" cy="12" r="2.1"></circle>113        <circle cx="12" cy="19.5" r="2.1"></circle>114      </svg>115    </div>116  </div>117 118  <!-- Settings list -->119  <div class="list">120    <div class="item">121      <div class="text">122        <div class="title">Theme</div>123        <div class="subtitle">System default</div>124      </div>125    </div>126 127    <div class="item">128      <div class="text">129        <div class="title">Default notification action</div>130        <div class="subtitle">Archive</div>131      </div>132    </div>133 134    <div class="item">135      <div class="text">136        <div class="title">Manage notifications</div>137      </div>138    </div>139 140    <div class="item">141      <div class="text">142        <div class="title">Conversation view</div>143        <div class="subtitle">Group emails in the same conversation together for IMAP, POP3, and Exchange accounts</div>144      </div>145      <div class="checkbox">146        <svg viewBox="0 0 24 24">147          <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148        </svg>149      </div>150    </div>151 152    <div class="item">153      <div class="text">154        <div class="title">Conversation list density</div>155        <div class="subtitle">Default</div>156      </div>157    </div>158 159    <div class="item">160      <div class="text">161        <div class="title">Hide bottom navigation on scroll</div>162      </div>163      <div class="checkbox">164        <svg viewBox="0 0 24 24">165          <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166        </svg>167      </div>168    </div>169 170    <div class="item">171      <div class="text">172        <div class="title">Swipe actions</div>173        <div class="subtitle">Configure swipe actions to quickly act on emails in the conversation list</div>174      </div>175    </div>176 177    <div class="item">178      <div class="text">179        <div class="title">Default reply action</div>180        <div class="subtitle">Choose your default reply action</div>181      </div>182    </div>183 184    <div class="item">185      <div class="text">186        <div class="title">Auto-fit messages</div>187        <div class="subtitle">Shrink messages to fit the screen</div>188      </div>189      <div class="checkbox">190        <svg viewBox="0 0 24 24">191          <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192        </svg>193      </div>194    </div>195 196    <div class="item">197      <div class="text">198        <div class="title">Auto-advance</div>199        <div class="subtitle">Show conversation list after you archive or delete</div>200      </div>201    </div>202  </div>203 204  <!-- Gesture bar -->205  <div class="gesture"></div>206</div>207</body>208</html>