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>Settings Dialog UI</title>6<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">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: #121212;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #0d0d0d;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30    color: #fff;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-left { display: flex; align-items: center; gap: 18px; }35  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }36 37  /* Header */38  .header {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 150px;44    display: flex;45    align-items: center;46    padding: 0 36px;47    box-sizing: border-box;48    color: #FFFFFF;49  }50  .back-btn {51    width: 72px;52    height: 72px;53    margin-right: 24px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58  .header-title {59    font-size: 64px;60    font-weight: 700;61  }62 63  /* Settings content (dimmed behind dialog) */64  .content {65    position: absolute;66    top: 270px;67    left: 0;68    width: 1080px;69    padding: 24px 36px;70    box-sizing: border-box;71    color: #bdbdbd;72    line-height: 1.6;73  }74  .section {75    margin-bottom: 42px;76  }77  .section-title { font-size: 48px; color: #e0e0e0; margin-bottom: 8px; }78  .section-sub { font-size: 34px; color: #9e9e9e; }79  .toggle {80    height: 96px; width: 180px; border-radius: 48px; background: #2a2a2a;81    margin-left: auto;82  }83 84  /* Scrim overlay */85  .scrim {86    position: absolute;87    inset: 0;88    background: rgba(0,0,0,0.55);89  }90 91  /* Modal dialog */92  .dialog {93    position: absolute;94    left: 60px;95    top: 700px;96    width: 960px;97    background: #3a3a3a;98    border-radius: 26px;99    box-shadow: 0 20px 60px rgba(0,0,0,0.6);100    padding: 40px 40px 32px 40px;101    box-sizing: border-box;102  }103  .dialog-title {104    font-size: 58px;105    font-weight: 700;106    margin-bottom: 30px;107  }108  .option {109    display: flex;110    align-items: center;111    height: 120px;112    border-radius: 12px;113    color: #fff;114    font-size: 46px;115  }116  .option .radio {117    width: 56px; height: 56px; margin-right: 32px;118  }119  .divider {120    height: 1px;121    background: #555;122    margin: 0 0 6px 88px;123    opacity: 0.3;124  }125  .option-text { display: flex; align-items: baseline; gap: 10px; }126  .option small { font-size: 42px; color: #cfcfcf; }127  .cancel-row {128    display: flex;129    justify-content: flex-end;130    padding-top: 10px;131  }132  .cancel {133    font-size: 48px;134    color: #e53935;135    font-weight: 700;136    letter-spacing: 0.4px;137  }138 139  /* Bottom gesture bar */140  .gesture-bar {141    position: absolute;142    bottom: 28px;143    left: 50%;144    transform: translateX(-50%);145    width: 220px;146    height: 12px;147    border-radius: 12px;148    background: #bdbdbd;149    opacity: 0.7;150  }151</style>152</head>153<body>154<div id="render-target">155  <!-- Status bar -->156  <div class="status-bar">157    <div class="status-left">9:24</div>158    <div class="status-right">159      <!-- Cellular icon -->160      <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff">161        <rect x="2" y="18" width="3" height="3"></rect>162        <rect x="6" y="14" width="3" height="7"></rect>163        <rect x="10" y="10" width="3" height="11"></rect>164        <rect x="14" y="6" width="3" height="15"></rect>165      </svg>166      <!-- WiFi icon -->167      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">168        <path d="M2 8c5-4 15-4 20 0"></path>169        <path d="M5 12c3-3 11-3 14 0"></path>170        <path d="M8 16c2-2 6-2 8 0"></path>171        <circle cx="12" cy="19" r="1.6" fill="#ffffff"></circle>172      </svg>173      <!-- Battery icon -->174      <svg width="50" height="50" viewBox="0 0 26 24" fill="none" stroke="#ffffff" stroke-width="2">175        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#ffffff" fill="none"></rect>176        <rect x="4" y="8" width="14" height="8" fill="#ffffff"></rect>177        <rect x="20.5" y="9" width="3" height="6" fill="#ffffff"></rect>178      </svg>179    </div>180  </div>181 182  <!-- Header -->183  <div class="header">184    <div class="back-btn">185      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">186        <path d="M15.5 19l-7-7 7-7" />187      </svg>188    </div>189    <div class="header-title">Settings</div>190  </div>191 192  <!-- Content behind dialog (dim) -->193  <div class="content">194    <div class="section">195      <div class="section-title">Sample rate (quality)</div>196      <div class="section-sub">Bigger rate means better quality but larger file size.</div>197    </div>198    <div class="section" style="display:flex; align-items:center; gap: 20px;">199      <div class="section-title" style="flex:1;">Pause during phone calls</div>200      <div class="toggle"></div>201    </div>202    <div class="section">203      <div class="section-title">Do not disturb</div>204      <div class="section-sub">Silence notifications while recording.</div>205    </div>206    <div class="section">207      <div class="section-title">Keep awake</div>208      <div class="section-sub">Stop screen from turning off when recording.</div>209    </div>210    <div class="section">211      <div class="section-title">File format</div>212      <div class="section-sub">Select output audio format options.</div>213    </div>214  </div>215 216  <!-- Scrim overlay -->217  <div class="scrim"></div>218 219  <!-- Dialog -->220  <div class="dialog">221    <div class="dialog-title">Sample rate (quality)</div>222 223    <div class="option">224      <svg class="radio" viewBox="0 0 24 24">225        <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>226      </svg>227      <div class="option-text">8 kHz <small>(phone)</small></div>228    </div>229    <div class="option">230      <svg class="radio" viewBox="0 0 24 24">231        <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>232      </svg>233      <div>11 kHz</div>234    </div>235    <div class="option">236      <svg class="radio" viewBox="0 0 24 24">237        <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>238      </svg>239      <div>16 kHz</div>240    </div>241    <div class="option">242      <svg class="radio" viewBox="0 0 24 24">243        <circle cx="12" cy="12" r="9" fill="none" stroke="#e53935" stroke-width="2"></circle>244        <circle cx="12" cy="12" r="5" fill="#e53935"></circle>245      </svg>246      <div class="option-text">22 kHz <small>(FM radio)</small></div>247    </div>248    <div class="option">249      <svg class="radio" viewBox="0 0 24 24">250        <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>251      </svg>252      <div>32 kHz</div>253    </div>254    <div class="option">255      <svg class="radio" viewBox="0 0 24 24">256        <circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="2"></circle>257      </svg>258      <div class="option-text">44.1 kHz <small>(CD)</small></div>259    </div>260 261    <div class="cancel-row">262      <div class="cancel">CANCEL</div>263    </div>264  </div>265 266  <!-- Bottom gesture bar -->267  <div class="gesture-bar"></div>268</div>269</body>270</html>