GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Settings UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#171717; color:#fff;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:110px; background:#0d0d0d; color:#eaeaea;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 40px; font-size:38px;18    letter-spacing:0.3px;19  }20  .status-right { display:flex; align-items:center; gap:28px; }21  .icon-label { font-weight:600; opacity:0.9; }22  /* Simple icons */23  .icon-wifi, .icon-battery { display:inline-block; }24  .icon-wifi svg, .icon-battery svg { height:52px; width:52px; }25  .icon-battery svg { width:80px; }26  .icon-signal {27    width:34px; height:34px; border-radius:50%; background:#eaeaea1a; border:2px solid #eaeaea88;28  }29 30  /* App bar */31  .app-bar {32    position:absolute; top:110px; left:0; right:0;33    height:150px; background:#121212; display:flex; align-items:center;34    padding:0 30px;35    box-shadow: 0 2px 0 rgba(255,255,255,0.04);36  }37  .back-btn {38    width:84px; height:84px; display:flex; align-items:center; justify-content:center;39  }40  .back-btn svg { width:54px; height:54px; fill:#e4e4e4; }41  .title { font-size:64px; font-weight:700; margin-left:10px; }42 43  /* Content list */44  .content {45    position:absolute; top:260px; left:0; right:0; bottom:0;46    padding:20px 40px 120px 40px;47    overflow:hidden;48  }49  .list { display:flex; flex-direction:column; gap:30px; }50  .item {51    padding:28px 10px;52    border-radius:12px;53    display:flex; align-items:flex-start; justify-content:space-between;54  }55  .texts { max-width:820px; }56  .label { font-size:50px; line-height:1.15; font-weight:600; color:#f3f3f3; }57  .sub { font-size:36px; color:#bdbdbd; margin-top:16px; line-height:1.35; }58  .divider { height:2px; background:#2a2a2a; margin:10px 0 14px 0; }59 60  /* Switch */61  .switch {62    position:relative; width:140px; height:74px;63    border-radius:40px; background:#4a4a4a; margin-top:6px;64    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);65  }66  .switch .knob {67    position:absolute; top:9px; width:56px; height:56px; border-radius:50%;68    background:#cfcfcf; box-shadow:0 2px 6px rgba(0,0,0,0.35);69  }70  .switch.off .knob { right:9px; }71  .switch.on { background:#3aa76d; }72  .switch.on .knob { left:9px; background:#fff; }73 74  /* Arrow/chevron placeholder for non-switch items (optional visual spacing) */75  .chevron {76    width:40px; height:70px; margin-top:14px; opacity:0.4;77  }78  .chevron svg { width:100%; height:100%; fill:#bbbbbb; }79 80  /* Bottom home indicator */81  .home-indicator {82    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);83    width:360px; height:12px; background:#e7e7e7; border-radius:8px; opacity:0.75;84  }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status Bar -->91  <div class="status-bar">92    <div class="status-left">9:23</div>93    <div class="status-right">94      <div class="icon-label">GE</div>95      <div class="icon-signal"></div>96      <div class="icon-wifi">97        <svg viewBox="0 0 24 24">98          <path fill="#eaeaea" d="M12 20c.8 0 1.5-.7 1.5-1.5S12.8 17 12 17s-1.5.7-1.5 1.5S11.2 20 12 20z"/>99          <path fill="#eaeaea" d="M2 9c2.8-2.4 6.2-3.8 10-3.8S19.2 6.6 22 9l-2 2c-2.4-2-5.5-3.2-8-3.2S6.4 9 4 11L2 9z"/>100          <path fill="#eaeaea" d="M6 13c1.8-1.5 4.1-2.3 6-2.3s4.2.8 6 2.3l-2 2c-1.2-1-2.9-1.6-4-1.6s-2.8.6-4 1.6l-2-2z"/>101        </svg>102      </div>103      <div class="icon-battery">104        <svg viewBox="0 0 32 18">105          <rect x="1" y="3" width="26" height="12" rx="2" fill="#eaeaea"></rect>106          <rect x="28" y="6" width="3" height="6" rx="1" fill="#eaeaea"></rect>107          <rect x="3" y="5" width="20" height="8" fill="#171717"></rect>108        </svg>109      </div>110    </div>111  </div>112 113  <!-- App Bar -->114  <div class="app-bar">115    <div class="back-btn">116      <svg viewBox="0 0 24 24">117        <path d="M15.5 19l-7-7 7-7 1.5 1.5L10.5 12l6.5 6.5z"/>118      </svg>119    </div>120    <div class="title">Settings</div>121  </div>122 123  <!-- Content -->124  <div class="content">125    <div class="list">126 127      <div class="item">128        <div class="texts">129          <div class="label">Sample rate (quality)</div>130          <div class="sub">Bigger rate means better quality but larger file size.</div>131        </div>132        <!-- No switch visible for this item -->133      </div>134      <div class="divider"></div>135 136      <div class="item">137        <div class="texts">138          <div class="label">Pause during phone calls</div>139        </div>140        <div class="switch off"><div class="knob"></div></div>141      </div>142      <div class="divider"></div>143 144      <div class="item">145        <div class="texts">146          <div class="label">Do not disturb</div>147          <div class="sub">Switches your phone to silent mode during recording process</div>148        </div>149        <div class="switch off"><div class="knob"></div></div>150      </div>151      <div class="divider"></div>152 153      <div class="item">154        <div class="texts">155          <div class="label">Keep screen on</div>156          <div class="sub">Screen will be kept on while recording running and main screen active.</div>157        </div>158        <div class="switch off"><div class="knob"></div></div>159      </div>160      <div class="divider"></div>161 162      <div class="item">163        <div class="texts">164          <div class="label">Files location</div>165        </div>166        <div class="chevron">167          <svg viewBox="0 0 24 24">168            <path d="M9 6l6 6-6 6" />169          </svg>170        </div>171      </div>172      <div class="divider"></div>173 174      <div class="item">175        <div class="texts">176          <div class="label">Naming</div>177        </div>178        <div class="chevron">179          <svg viewBox="0 0 24 24">180            <path d="M9 6l6 6-6 6" />181          </svg>182        </div>183      </div>184      <div class="divider"></div>185 186      <div class="item">187        <div class="texts">188          <div class="label">Microphone adjustment</div>189        </div>190        <div class="chevron">191          <svg viewBox="0 0 24 24">192            <path d="M9 6l6 6-6 6" />193          </svg>194        </div>195      </div>196      <div class="divider"></div>197 198      <div class="item">199        <div class="texts">200          <div class="label">Crash reporting</div>201          <div class="sub">Help us fix it sooner by sending crash details automatically. Effective after app restart.</div>202        </div>203        <div class="switch off"><div class="knob"></div></div>204      </div>205 206    </div>207  </div>208 209  <div class="home-indicator"></div>210</div>211</body>212</html>