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 UI</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: #FFFFFF;15    color: #212121;16  }17 18  /* Top bars */19  .top-area { position: absolute; top: 0; left: 0; width: 100%; }20  .status-bar {21    height: 90px;22    background: #1E5AA8;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    font-size: 36px;28    letter-spacing: 0.5px;29  }30  .status-left { flex: 0 0 auto; }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-icon { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; }38 39  .app-bar {40    height: 180px;41    background: #1E5AA8;42    color: #fff;43    display: flex;44    align-items: center;45    padding: 0 32px;46    box-sizing: border-box;47  }48  .back-btn {49    width: 72px;50    height: 72px;51    margin-right: 16px;52  }53  .app-title {54    font-size: 56px;55    font-weight: 600;56  }57 58  /* Content area */59  .content {60    position: absolute;61    top: 270px; /* status-bar + app-bar */62    left: 0;63    right: 0;64    bottom: 140px; /* navigation bar space */65    overflow: hidden;66    background: #FAFAFA;67  }68  .section {69    background: #FFFFFF;70    padding: 40px 48px 24px 48px;71    box-sizing: border-box;72  }73  .section + .section { margin-top: 18px; }74  .section-label {75    color: #4FC3F7;76    font-size: 40px;77    font-weight: 600;78    margin-bottom: 28px;79  }80 81  .item { margin: 22px 0 36px 0; }82  .item-title {83    font-size: 48px;84    font-weight: 500;85    margin-bottom: 12px;86    color: #212121;87  }88  .item-sub {89    font-size: 36px;90    color: #777;91    line-height: 1.35;92  }93 94  .divider {95    height: 2px;96    background: #E0E0E0;97    margin: 16px 0 8px 0;98  }99 100  .row {101    display: flex;102    align-items: center;103    justify-content: space-between;104  }105  .color-swatch {106    width: 54px;107    height: 54px;108    border-radius: 8px;109    background: #2F69B3;110    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);111  }112 113  /* Bottom gesture bar */114  .nav-bar {115    position: absolute;116    bottom: 0;117    left: 0;118    width: 100%;119    height: 140px;120    background: #000;121    display: flex;122    align-items: center;123    justify-content: center;124  }125  .gesture {126    width: 420px;127    height: 14px;128    background: #D9D9D9;129    border-radius: 10px;130  }131</style>132</head>133<body>134<div id="render-target">135  <div class="top-area">136    <div class="status-bar">137      <div class="status-left">12:19</div>138      <div class="status-right">139        <!-- simple status icons -->140        <svg class="status-icon" viewBox="0 0 24 24" aria-label="signal">141          <path d="M2 20h3v-3H2v3zm5 0h3v-6H7v6zm5 0h3v-9h-3v9zm5 0h3V4h-3v16z" fill="#fff" stroke="none"></path>142        </svg>143        <svg class="status-icon" viewBox="0 0 24 24" aria-label="wifi">144          <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 19l2 2-2-2-2 2 2-2" stroke="#fff" fill="none" stroke-linecap="round"></path>145        </svg>146        <svg class="status-icon" viewBox="0 0 24 24" aria-label="battery">147          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff"></rect>148          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>149          <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>150        </svg>151      </div>152    </div>153    <div class="app-bar">154      <svg class="back-btn" viewBox="0 0 24 24" aria-label="Back">155        <path d="M15 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>156      </svg>157      <div class="app-title">General</div>158    </div>159  </div>160 161  <div class="content">162    <div class="section">163      <div class="section-label">General</div>164 165      <div class="item">166        <div class="item-title">Language</div>167        <div class="item-sub">System default</div>168      </div>169 170      <div class="item">171        <div class="item-title">Default view</div>172        <div class="item-sub">Month</div>173      </div>174 175      <div class="item">176        <div class="item-title">Clicking on the widget opens</div>177        <div class="item-sub">This setting has moved to the widget configuration screen, click the settings button on the widget to open it.</div>178      </div>179    </div>180 181    <div class="divider"></div>182 183    <div class="section">184      <div class="section-label">Theme</div>185 186      <div class="item">187        <div class="item-title">Theme</div>188        <div class="item-sub">Light</div>189      </div>190 191      <div class="item row">192        <div class="item-title" style="margin:0;">Primary color</div>193        <div class="color-swatch" aria-label="Primary color swatch"></div>194      </div>195    </div>196  </div>197 198  <div class="nav-bar">199    <div class="gesture"></div>200  </div>201</div>202</body>203</html>