GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>General Settings UI</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#121212; color:#EDEDED;12    font-family: Arial, Helvetica, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    height:90px;18    padding:0 32px;19    display:flex; align-items:center; justify-content:space-between;20    color:#DADADA; font-size:40px;21  }22  .status-left {display:flex; align-items:center; gap:22px;}23  .status-right {display:flex; align-items:center; gap:26px;}24  .icon-dot {width:14px; height:14px; background:#DADADA; border-radius:50%;}25  .wifi {26    width:46px; height:32px; position:relative;27  }28  .wifi:before, .wifi:after {29    content:""; position:absolute; border:3px solid #DADADA; border-radius:50%;30    left:0; right:0; margin:auto;31  }32  .wifi:before { width:42px; height:42px; top:-6px; border-top-color:transparent; border-left-color:transparent; border-right-color:transparent;}33  .wifi:after { width:24px; height:24px; top:6px; border-top-color:transparent; border-left-color:transparent; border-right-color:transparent;}34  .battery {35    width:60px; height:26px; border:3px solid #DADADA; border-radius:6px; position:relative;36  }37  .battery:after {38    content:""; position:absolute; right:-10px; top:6px; width:10px; height:14px; background:#DADADA; border-radius:2px;39  }40  .battery .level {position:absolute; left:4px; top:4px; height:16px; width:36px; background:#DADADA; border-radius:3px;}41 42  /* App bar */43  .app-bar {44    height:120px; padding:0 24px;45    display:flex; align-items:center; justify-content:flex-start;46    border-bottom:1px solid #1f1f1f;47  }48  .back-btn {width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-right:8px;}49  .back-btn svg {width:48px; height:48px; fill:#EDEDED;}50  .title {font-size:64px; font-weight:600; margin-left:12px;}51  .kebab {margin-left:auto; width:72px; height:72px; display:flex; align-items:center; justify-content:center;}52  .kebab svg {width:40px; height:40px; fill:#DADADA;}53 54  /* List items */55  .list {padding-bottom:60px;}56  .item {57    padding:40px 36px;58    border-bottom:1px solid #1f1f1f;59    display:flex; align-items:center; justify-content:space-between;60  }61  .texts {max-width:760px;}62  .item .label {font-size:48px; line-height:1.2; color:#EDEDED;}63  .item .sub {font-size:38px; color:#A7A7A7; margin-top:12px;}64  .long-sub {font-size:42px; color:#A7A7A7; margin-top:18px;}65 66  /* Toggle */67  .toggle {68    width:180px; height:92px; border-radius:46px;69    position:relative; background:#3a3a3a;70    box-shadow: inset 0 0 0 2px #2b2b2b;71  }72  .toggle .thumb {73    position:absolute; top:10px; left:10px; width:72px; height:72px;74    background:#BEBEBE; border-radius:50%;75    box-shadow:0 2px 6px rgba(0,0,0,0.4);76    transition:left 0.2s ease;77  }78  .toggle.on {background:#7f86ff;}79  .toggle.on .thumb {left:98px; background:#FFFFFF;}80 81  /* Section titles */82  .section-title {padding:32px 36px 12px; font-size:44px; color:#AFAFAF;}83 84  /* Footer shadow hint */85  .fade-bottom {86    position:absolute; left:0; right:0; bottom:0; height:140px;87    background:linear-gradient(to bottom, rgba(18,18,18,0), rgba(18,18,18,1));88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div class="status-left">97      <div style="font-weight:600;">6:57</div>98      <div class="icon-dot"></div>99      <div class="icon-dot"></div>100      <div class="icon-dot"></div>101      <div class="icon-dot"></div>102    </div>103    <div class="status-right">104      <div class="wifi"></div>105      <div class="battery"><div class="level"></div></div>106    </div>107  </div>108 109  <!-- App Bar -->110  <div class="app-bar">111    <div class="back-btn">112      <svg viewBox="0 0 24 24"><path d="M15.5 6l-6 6 6 6-1.5 1.5L6.5 12 14 4.5z"/></svg>113    </div>114    <div class="title">General</div>115    <div class="kebab">116      <svg viewBox="0 0 24 24">117        <circle cx="12" cy="5" r="2"></circle>118        <circle cx="12" cy="12" r="2"></circle>119        <circle cx="12" cy="19" r="2"></circle>120      </svg>121    </div>122  </div>123 124  <!-- Settings List -->125  <div class="list">126 127    <div class="item">128      <div class="texts">129        <div class="label">Start of the week</div>130        <div class="sub">Monday</div>131      </div>132    </div>133 134    <div class="item">135      <div class="texts">136        <div class="label">Use device time zone</div>137      </div>138      <div class="toggle off"><div class="thumb"></div></div>139    </div>140 141    <div class="item">142      <div class="texts">143        <div class="label">Time zone</div>144        <div class="sub">Eastern Daylight Time  GMT-4 ☀️</div>145      </div>146    </div>147 148    <div class="item">149      <div class="texts">150        <div class="label">Alternate calendar</div>151        <div class="sub">No alternate calendar</div>152      </div>153    </div>154 155    <div class="item">156      <div class="texts">157        <div class="label">Show week number</div>158      </div>159      <div class="toggle off"><div class="thumb"></div></div>160    </div>161 162    <div class="item">163      <div class="texts">164        <div class="label">Show declined events</div>165      </div>166      <div class="toggle on"><div class="thumb"></div></div>167    </div>168 169    <div class="item">170      <div class="texts">171        <div class="label">Display shorter entries the same size as 30-minute entries</div>172      </div>173      <div class="toggle off"><div class="thumb"></div></div>174    </div>175 176    <div class="item">177      <div class="texts">178        <div class="label">Default event duration</div>179      </div>180    </div>181 182    <div class="item">183      <div class="texts">184        <div class="label">Adding invitations</div>185      </div>186    </div>187 188    <div class="item">189      <div class="texts">190        <div class="label">Add video conferencing</div>191      </div>192    </div>193 194    <div class="item">195      <div class="texts">196        <div class="label">Theme</div>197        <div class="sub">System default</div>198      </div>199    </div>200 201    <div class="section-title">Notifications</div>202 203    <div class="item">204      <div class="texts">205        <div class="label">Notify on this device</div>206      </div>207      <div class="toggle on"><div class="thumb"></div></div>208    </div>209 210  </div>211 212  <div class="fade-bottom"></div>213</div>214</body>215</html>