GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>General Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: Arial, Helvetica, sans-serif;15    color: #000;16  }17 18  /* Top bars */19  .status-bar {20    height: 120px;21    background: #143F79;22    color: #fff;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .status-left {30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .status-icon svg { display: block; }39  .app-bar {40    height: 168px;41    background: #2763A8;42    color: #fff;43    display: flex;44    align-items: center;45    padding: 0 30px;46    box-sizing: border-box;47  }48  .back-btn {49    width: 96px;50    height: 96px;51    display: flex;52    align-items: center;53    justify-content: center;54    margin-right: 16px;55  }56  .app-title {57    font-size: 52px;58    font-weight: 600;59    letter-spacing: 0.2px;60  }61 62  /* Content */63  .content {64    position: absolute;65    top: 288px; /* 120 + 168 */66    left: 0;67    right: 0;68    bottom: 140px; /* leave room for gesture bar */69    overflow: hidden;70    background: #FAFAFA;71  }72  .content-inner {73    padding: 40px 60px 60px 60px;74    box-sizing: border-box;75  }76  .section-title {77    color: #5ECAD7;78    font-size: 38px;79    font-weight: 600;80    margin: 18px 0 34px 0;81  }82  .item {83    margin: 36px 0 14px 0;84  }85  .label {86    font-size: 44px;87    font-weight: 600;88    color: #111;89  }90  .subtext {91    font-size: 32px;92    color: #7A7A7A;93    margin-top: 12px;94    line-height: 1.45;95    max-width: 900px;96  }97  .divider {98    height: 1px;99    background: #E0E0E0;100    margin: 40px 0;101  }102 103  .row {104    display: flex;105    align-items: center;106    justify-content: space-between;107    padding-right: 40px;108    box-sizing: border-box;109  }110  .color-swatch {111    width: 60px;112    height: 60px;113    background: #2E68B3;114    border-radius: 8px;115    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);116  }117 118  /* Bottom gesture bar */119  .gesture-bar {120    position: absolute;121    left: 0;122    right: 0;123    bottom: 0;124    height: 140px;125    background: #000000;126  }127  .gesture-pill {128    position: absolute;129    left: 50%;130    bottom: 44px;131    transform: translateX(-50%);132    width: 220px;133    height: 20px;134    background: #E8E8E8;135    border-radius: 12px;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status Bar -->143  <div class="status-bar">144    <div class="status-left">12:20</div>145    <div class="status-right">146      <!-- simple status icons -->147      <div class="status-icon">148        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">149          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#FFFFFF" stroke-width="2"/>150          <rect x="6" y="7" width="12" height="3" fill="#FFFFFF"/>151        </svg>152      </div>153      <div class="status-icon">154        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">155          <path d="M2 18C5 12 9 8 12 8C15 8 19 12 22 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>156          <circle cx="12" cy="18" r="2" fill="#FFFFFF"/>157        </svg>158      </div>159      <div class="status-icon">160        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">161          <rect x="3" y="6" width="16" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>162          <rect x="20" y="9" width="2" height="6" rx="1" fill="#FFFFFF"/>163          <rect x="5" y="8" width="12" height="8" fill="#FFFFFF"/>164        </svg>165      </div>166    </div>167  </div>168 169  <!-- App Bar -->170  <div class="app-bar">171    <div class="back-btn">172      <svg width="64" height="64" viewBox="0 0 24 24">173        <path d="M15 18L9 12L15 6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>174      </svg>175    </div>176    <div class="app-title">General</div>177  </div>178 179  <!-- Content Area -->180  <div class="content">181    <div class="content-inner">182      <div class="section-title">General</div>183 184      <div class="item">185        <div class="label">Language</div>186        <div class="subtext">English (US)</div>187      </div>188 189      <div class="item">190        <div class="label">Default view</div>191        <div class="subtext">Month</div>192      </div>193 194      <div class="item">195        <div class="label">Clicking on the widget opens</div>196        <div class="subtext">197          This setting has moved to the widget configuration screen, click the settings button on the widget to open it.198        </div>199      </div>200 201      <div class="divider"></div>202 203      <div class="section-title">Theme</div>204 205      <div class="item">206        <div class="label">Theme</div>207        <div class="subtext">Light</div>208      </div>209 210      <div class="item row">211        <div class="label">Primary color</div>212        <div class="color-swatch"></div>213      </div>214    </div>215  </div>216 217  <!-- Gesture Bar -->218  <div class="gesture-bar">219    <div class="gesture-pill"></div>220  </div>221 222</div>223</body>224</html>