GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Settings UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0d0d0d;24    color: #EDEDED;25  }26  .status-inner {27    position: absolute;28    top: 34px;29    left: 40px;30    right: 40px;31    height: 52px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-size: 36px;36    letter-spacing: 0.5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon-cellbars,44  .icon-wifi,45  .icon-battery {46    display: inline-flex;47    align-items: center;48    justify-content: center;49  }50  .icon-battery svg { width: 60px; height: 30px; }51  .icon-wifi svg { width: 46px; height: 34px; }52  .icon-cellbars svg { width: 44px; height: 34px; }53 54  /* Top app bar */55  .appbar {56    position: absolute;57    top: 120px;58    left: 0;59    width: 1080px;60    height: 160px;61    background: #1C1C1C;62    display: flex;63    align-items: center;64    padding: 0 36px;65    box-sizing: border-box;66  }67  .back-btn {68    width: 84px;69    height: 84px;70    display: flex;71    align-items: center;72    justify-content: center;73    margin-right: 16px;74  }75  .back-btn svg { width: 48px; height: 48px; fill: none; stroke: #EDEDED; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }76  .appbar-title {77    font-size: 64px;78    font-weight: 600;79  }80 81  /* Content list */82  .content {83    position: absolute;84    top: 280px;85    left: 0;86    width: 1080px;87    bottom: 120px;88    overflow-y: auto;89    padding: 24px 0 160px;90    box-sizing: border-box;91  }92  .item {93    position: relative;94    padding: 34px 48px;95    border-bottom: 1px solid #2a2a2a;96  }97  .item-title {98    font-size: 52px;99    line-height: 1.2;100    margin-bottom: 12px;101  }102  .item-sub {103    font-size: 36px;104    color: #B0B0B0;105    line-height: 1.3;106    max-width: 860px;107  }108 109  /* Toggle switch */110  .switch {111    position: absolute;112    right: 48px;113    top: 50%;114    transform: translateY(-50%);115    width: 160px;116    height: 80px;117    border-radius: 40px;118    background: #4b4b4b;119    box-shadow: inset 0 0 0 2px #3a3a3a;120  }121  .switch .knob {122    position: absolute;123    top: 4px;124    left: 6px;125    width: 72px;126    height: 72px;127    border-radius: 50%;128    background: #CFCFCF;129    box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 3px #8d8d8d;130  }131  .switch.on { background: #3a7f3a; }132  .switch.on .knob { left: 82px; background: #FAFAFA; }133 134  /* Gesture bar */135  .gesture-bar {136    position: absolute;137    bottom: 32px;138    left: 50%;139    transform: translateX(-50%);140    width: 240px;141    height: 18px;142    border-radius: 9px;143    background: #E0E0E0;144    opacity: 0.95;145  }146</style>147</head>148<body>149<div id="render-target">150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-inner">153      <div class="status-left">9:24</div>154      <div class="status-right">155        <div class="icon-cellbars">156          <svg viewBox="0 0 24 24">157            <rect x="2" y="14" width="3" height="8" fill="#EDEDED"></rect>158            <rect x="8" y="10" width="3" height="12" fill="#EDEDED"></rect>159            <rect x="14" y="6" width="3" height="16" fill="#EDEDED"></rect>160            <rect x="20" y="2" width="3" height="20" fill="#EDEDED"></rect>161          </svg>162        </div>163        <div class="icon-wifi">164          <svg viewBox="0 0 24 24">165            <path d="M2 8c5-5 15-5 20 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>166            <path d="M5 12c4-4 10-4 14 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>167            <circle cx="12" cy="17" r="2" fill="#EDEDED"/>168          </svg>169        </div>170        <div class="icon-battery">171          <svg viewBox="0 0 36 18">172            <rect x="1" y="3" width="30" height="12" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"/>173            <rect x="32" y="7" width="3" height="4" fill="#EDEDED"/>174            <rect x="4" y="5" width="22" height="8" fill="#EDEDED"/>175          </svg>176        </div>177      </div>178    </div>179  </div>180 181  <!-- App Bar -->182  <div class="appbar">183    <div class="back-btn">184      <svg viewBox="0 0 24 24">185        <path d="M15 3 L6 12 L15 21" />186      </svg>187    </div>188    <div class="appbar-title">Settings</div>189  </div>190 191  <!-- Content -->192  <div class="content">193    <div class="item">194      <div class="item-title">Sample rate (quality)</div>195      <div class="item-sub">Bigger rate means better quality but larger file size.</div>196    </div>197 198    <div class="item">199      <div class="item-title">Pause during phone calls</div>200      <div class="switch off"><div class="knob"></div></div>201    </div>202 203    <div class="item">204      <div class="item-title">Do not disturb</div>205      <div class="item-sub">Switches your phone to silent mode during recording process</div>206      <div class="switch off"><div class="knob"></div></div>207    </div>208 209    <div class="item">210      <div class="item-title">Keep screen on</div>211      <div class="item-sub">Screen will be kept on while recording running and main screen active.</div>212      <div class="switch off"><div class="knob"></div></div>213    </div>214 215    <div class="item">216      <div class="item-title">Files location</div>217    </div>218 219    <div class="item">220      <div class="item-title">Naming</div>221    </div>222 223    <div class="item">224      <div class="item-title">Microphone adjustment</div>225    </div>226 227    <div class="item">228      <div class="item-title">Crash reporting</div>229      <div class="item-sub">Help us fix it sooner by sending crash details automatically. Effective after app restart.</div>230      <div class="switch off"><div class="knob"></div></div>231    </div>232  </div>233 234  <!-- Gesture Bar -->235  <div class="gesture-bar"></div>236</div>237</body>238</html>