GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Settings UI Mock</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: #121212;14    color: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 96px;25    padding: 0 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #eaeaea;31    font-size: 36px;32    letter-spacing: 0.2px;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .icon-wifi svg,45  .icon-battery svg {46    display: block;47  }48 49  /* Ad banner placeholder */50  .ad-banner {51    position: absolute;52    top: 96px;53    left: 36px;54    width: 1008px;55    height: 160px;56    background: #E0E0E0;57    border: 1px solid #BDBDBD;58    box-sizing: border-box;59    border-radius: 6px;60    display: flex;61    align-items: center;62    justify-content: center;63    color: #757575;64    font-size: 34px;65    font-weight: 600;66  }67  .ad-close {68    position: absolute;69    right: 48px;70    top: 156px;71    width: 44px;72    height: 44px;73    border-radius: 22px;74    background: #F5F5F5;75    color: #4b4b4b;76    display: flex;77    align-items: center;78    justify-content: center;79    font-size: 30px;80    border: 1px solid #cfcfcf;81  }82 83  /* Header */84  .header {85    position: absolute;86    top: 288px;87    left: 0;88    width: 100%;89    height: 120px;90    display: flex;91    align-items: center;92    padding: 0 24px 0 12px;93    box-sizing: border-box;94    gap: 14px;95  }96  .back-btn {97    width: 92px;98    height: 92px;99    display: flex;100    align-items: center;101    justify-content: center;102  }103  .header-title {104    font-size: 56px;105    font-weight: 600;106    letter-spacing: 0.3px;107  }108 109  /* Sections and rows */110  .section {111    position: absolute;112    left: 0;113    width: 100%;114    padding: 0 36px;115    box-sizing: border-box;116  }117  .section-title {118    color: #b3b3b3;119    font-size: 28px;120    font-weight: 700;121    letter-spacing: 1.6px;122    margin: 24px 0 12px;123  }124  .list {125    background: #121212;126    border-top: 1px solid #222;127  }128  .row {129    display: flex;130    align-items: center;131    justify-content: space-between;132    min-height: 140px;133    border-bottom: 1px solid #222;134    padding: 24px 8px 24px 0;135    box-sizing: border-box;136  }137  .row-left {138    display: flex;139    flex-direction: column;140    gap: 10px;141  }142  .row-title {143    font-size: 44px;144    font-weight: 600;145    color: #FFFFFF;146  }147  .row-subtitle {148    font-size: 30px;149    color: #9e9e9e;150  }151  .chevron {152    width: 60px;153    height: 60px;154    margin-right: 8px;155    opacity: 0.9;156  }157 158  /* Switch */159  .switch {160    width: 128px;161    height: 72px;162    border-radius: 36px;163    background: #2A2A2A;164    position: relative;165    box-shadow: inset 0 0 0 1px #3a3a3a;166  }167  .switch .knob {168    position: absolute;169    top: 8px;170    left: 8px;171    width: 56px;172    height: 56px;173    border-radius: 50%;174    background: #CFCFCF;175    transition: all 0.2s ease;176  }177  .switch.on {178    background: #5a4038;179  }180  .switch.on .knob {181    left: 64px;182    background: #ff8a65;183  }184  /* disabled look */185  .switch.off {186    background: #3a3a3a;187  }188  .switch.off .knob {189    background: #bdbdbd;190  }191 192  /* Gesture bar */193  .gesture-bar {194    position: absolute;195    bottom: 36px;196    left: 50%;197    transform: translateX(-50%);198    width: 300px;199    height: 10px;200    background: #eaeaea;201    border-radius: 6px;202    opacity: 0.85;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="statusbar">211    <div class="status-left">212      <div>1:29</div>213      <div style="font-weight:600;">M</div>214      <div style="font-weight:600;">DH</div>215    </div>216    <div class="status-right">217      <div class="icon-wifi">218        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">219          <path d="M2 9c5-5 15-5 20 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>220          <path d="M5 12c4-4 10-4 14 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>221          <path d="M8 15c3-3 5-3 8 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>222          <circle cx="12" cy="18" r="1.6" fill="#eaeaea"/>223        </svg>224      </div>225      <div class="icon-battery">226        <svg width="46" height="38" viewBox="0 0 28 16" fill="none">227          <rect x="1" y="2" width="22" height="12" rx="2" stroke="#eaeaea" stroke-width="2"/>228          <rect x="3" y="4" width="16" height="8" rx="1" fill="#eaeaea"/>229          <rect x="23" y="6" width="4" height="4" rx="1" fill="#eaeaea"/>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Ad banner placeholder -->236  <div class="ad-banner">[IMG: Spotify Ad Banner]</div>237  <div class="ad-close">×</div>238 239  <!-- Header -->240  <div class="header">241    <div class="back-btn">242      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">243        <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>244      </svg>245    </div>246    <div class="header-title">Settings</div>247  </div>248 249  <!-- OTHER section -->250  <div class="section" style="top: 420px;">251    <div class="section-title">OTHER</div>252    <div class="list">253      <div class="row">254        <div class="row-left">255          <div class="row-title">Recording format</div>256          <div class="row-subtitle">AAC</div>257        </div>258        <div class="chevron">259          <svg width="60" height="60" viewBox="0 0 24 24" fill="none">260            <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>261          </svg>262        </div>263      </div>264 265      <div class="row">266        <div class="row-left">267          <div class="row-title">Recording quality</div>268          <div class="row-subtitle">256 kbps, 48kHz</div>269        </div>270        <div class="chevron">271          <svg width="60" height="60" viewBox="0 0 24 24" fill="none">272            <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>273          </svg>274        </div>275      </div>276 277      <div class="row">278        <div class="row-left">279          <div class="row-title">Noise suppression</div>280        </div>281        <div class="switch on">282          <div class="knob"></div>283        </div>284      </div>285    </div>286  </div>287 288  <!-- GENERAL section -->289  <div class="section" style="top: 930px;">290    <div class="section-title">GENERAL</div>291    <div class="list">292      <div class="row">293        <div class="row-left">294          <div class="row-title">File location</div>295          <div class="row-subtitle">Change save folder</div>296        </div>297        <div class="chevron">298          <svg width="60" height="60" viewBox="0 0 24 24" fill="none">299            <path d="M9 6l6 6-6 6" stroke="#bdbdbd" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>300          </svg>301        </div>302      </div>303 304      <div class="row">305        <div class="row-left">306          <div class="row-title">Keep display on while recording</div>307        </div>308        <div class="switch on">309          <div class="knob"></div>310        </div>311      </div>312 313      <div class="row">314        <div class="row-left">315          <div class="row-title">Pause recording during the call</div>316        </div>317        <div class="switch off">318          <div class="knob"></div>319        </div>320      </div>321    </div>322  </div>323 324  <!-- Bottom spacer area -->325  <div class="gesture-bar"></div>326</div>327</body>328</html>