GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Roboto, "Segoe UI", Arial, sans-serif;16    color: #212121;17  }18 19  /* Header */20  .header {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 260px;25    background: #1E88E5;26    box-sizing: border-box;27  }28  .status {29    height: 92px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    color: #FFFFFF;35    font-size: 36px;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 20px;41  }42  .status-icons {43    display: flex;44    align-items: center;45    gap: 18px;46    opacity: 0.95;47  }48  .status-right {49    display: flex;50    align-items: center;51    gap: 22px;52  }53  .titlebar {54    height: 168px;55    display: flex;56    align-items: center;57    padding: 0 24px 0 24px;58    gap: 24px;59  }60  .titlebar .title {61    font-size: 64px;62    font-weight: 500;63    color: #FFFFFF;64  }65 66  /* Content list */67  .content {68    position: absolute;69    top: 260px; left: 0; right: 0; bottom: 0;70    overflow: hidden;71  }72  .list {73    padding-top: 6px;74  }75  .list-item {76    display: flex;77    align-items: center;78    padding: 34px 40px;79  }80  .icon-wrap {81    width: 120px;82    display: flex; justify-content: center; align-items: center;83  }84  .texts { flex: 1; }85  .item-title {86    font-size: 50px;87    font-weight: 500;88    letter-spacing: 0.2px;89  }90  .item-sub {91    font-size: 36px;92    color: #757575;93    margin-top: 10px;94  }95  .divider {96    height: 1px;97    background: #E0E0E0;98    margin: 8px 0 12px;99  }100 101  /* Bottom home indicator */102  .home-indicator {103    position: absolute;104    bottom: 34px;105    left: 50%;106    transform: translateX(-50%);107    width: 420px;108    height: 16px;109    background: #8E8E8E;110    border-radius: 10px;111    opacity: 0.85;112  }113 114  /* Helper styles for icons */115  svg { display: block; }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Top App/Status Bar -->122  <div class="header">123    <div class="status">124      <div class="status-left">125        <div>1:43</div>126        <div class="status-icons">127          <!-- simple notification dots -->128          <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#FFFFFF" opacity="0.9"/></svg>129          <svg width="28" height="28"><rect x="7" y="7" width="14" height="14" fill="#FFFFFF" opacity="0.9"/></svg>130          <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#FFFFFF" opacity="0.75"/></svg>131          <!-- sun icon -->132          <svg width="28" height="28" viewBox="0 0 24 24">133            <circle cx="12" cy="12" r="4.5" fill="#FFFFFF"/>134            <g stroke="#FFFFFF" stroke-width="2">135              <line x1="12" y1="1" x2="12" y2="5"/>136              <line x1="12" y1="19" x2="12" y2="23"/>137              <line x1="1" y1="12" x2="5" y2="12"/>138              <line x1="19" y1="12" x2="23" y2="12"/>139              <line x1="4.2" y1="4.2" x2="6.8" y2="6.8"/>140              <line x1="17.2" y1="17.2" x2="19.8" y2="19.8"/>141              <line x1="17.2" y1="4.2" x2="19.8" y2="6.8"/>142              <line x1="4.2" y1="17.2" x2="6.8" y2="19.8"/>143            </g>144          </svg>145        </div>146      </div>147      <div class="status-right">148        <!-- wifi icon -->149        <svg width="38" height="28" viewBox="0 0 24 16">150          <path d="M2 6c5-4 15-4 20 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>151          <path d="M5 9c3-2 11-2 14 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>152          <path d="M9 12c2-1 4-1 6 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>153          <circle cx="12" cy="14" r="1.8" fill="#FFFFFF"/>154        </svg>155        <!-- battery icon -->156        <svg width="46" height="28" viewBox="0 0 30 16">157          <rect x="1" y="2" width="24" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>158          <rect x="26" y="6" width="3" height="4" fill="#FFFFFF"/>159          <rect x="4" y="4" width="16" height="8" fill="#FFFFFF"/>160        </svg>161      </div>162    </div>163    <div class="titlebar">164      <!-- Back arrow -->165      <svg width="64" height="64" viewBox="0 0 24 24">166        <path d="M15 18l-6-6 6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>167      </svg>168      <div class="title">Settings</div>169    </div>170  </div>171 172  <!-- Content -->173  <div class="content">174    <div class="list">175      <!-- Upgrade -->176      <div class="list-item">177        <div class="icon-wrap">178          <svg width="60" height="60" viewBox="0 0 24 24">179            <path d="M12 21s-7-4.35-7-9.5C5 8 6.9 6 9.1 6c1.4 0 2.7.7 3.4 1.8C13.8 6.7 15.1 6 16.5 6 18.7 6 20.6 8 20.6 11.5 20.6 16.65 12 21 12 21z" fill="#E53935"/>180          </svg>181        </div>182        <div class="texts">183          <div class="item-title">Upgrade</div>184          <div class="item-sub">See all the additional features</div>185        </div>186      </div>187 188      <!-- Mic preset -->189      <div class="list-item">190        <div class="icon-wrap">191          <!-- microphone simple icon -->192          <svg width="60" height="60" viewBox="0 0 24 24">193            <rect x="8" y="4" width="8" height="12" rx="4" fill="#424242"/>194            <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#424242" stroke-width="2"/>195            <rect x="11" y="17" width="2" height="4" fill="#424242"/>196            <rect x="9" y="21" width="6" height="2" fill="#424242"/>197          </svg>198        </div>199        <div class="texts">200          <div class="item-title">Mic preset</div>201          <div class="item-sub">Voice notes</div>202        </div>203      </div>204 205      <!-- Sound quality -->206      <div class="list-item">207        <div class="icon-wrap">208          <!-- wave icon -->209          <svg width="60" height="60" viewBox="0 0 24 24">210            <path d="M3 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round"/>211          </svg>212        </div>213        <div class="texts">214          <div class="item-title">Sound quality</div>215          <div class="item-sub">Medium</div>216        </div>217      </div>218 219      <div class="divider"></div>220 221      <!-- Tuning -->222      <div class="list-item">223        <div class="icon-wrap">224          <!-- sliders icon -->225          <svg width="60" height="60" viewBox="0 0 24 24">226            <g stroke="#212121" stroke-width="2" stroke-linecap="round">227              <line x1="4" y1="6" x2="20" y2="6"/><rect x="8" y="4" width="4" height="4" fill="#212121"/>228              <line x1="4" y1="12" x2="20" y2="12"/><rect x="14" y="10" width="4" height="4" fill="#212121"/>229              <line x1="4" y1="18" x2="20" y2="18"/><rect x="6" y="16" width="4" height="4" fill="#212121"/>230            </g>231          </svg>232        </div>233        <div class="texts">234          <div class="item-title">Tuning</div>235        </div>236      </div>237 238      <!-- Files -->239      <div class="list-item">240        <div class="icon-wrap">241          <!-- folder icon -->242          <svg width="60" height="60" viewBox="0 0 24 24">243            <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#212121" stroke-width="2"/>244          </svg>245        </div>246        <div class="texts">247          <div class="item-title">Files</div>248        </div>249      </div>250 251      <!-- Interface -->252      <div class="list-item">253        <div class="icon-wrap">254          <!-- device icon -->255          <svg width="60" height="60" viewBox="0 0 24 24">256            <rect x="5" y="3" width="14" height="18" rx="2" ry="2" fill="none" stroke="#212121" stroke-width="2"/>257            <rect x="11" y="19" width="2" height="1.8" fill="#212121"/>258          </svg>259        </div>260        <div class="texts">261          <div class="item-title">Interface</div>262        </div>263      </div>264 265      <!-- Advanced & troubleshooting -->266      <div class="list-item">267        <div class="icon-wrap">268          <!-- wrench icon -->269          <svg width="60" height="60" viewBox="0 0 24 24">270            <path d="M14 3a5 5 0 0 0-4 8l-6 6 3 3 6-6a5 5 0 0 0 8-4l-3 1-4-4 1-3z" fill="none" stroke="#212121" stroke-width="2" stroke-linejoin="round"/>271          </svg>272        </div>273        <div class="texts">274          <div class="item-title">Advanced & troubleshooting</div>275        </div>276      </div>277 278      <!-- About -->279      <div class="list-item">280        <div class="icon-wrap">281          <!-- info icon -->282          <svg width="60" height="60" viewBox="0 0 24 24">283            <circle cx="12" cy="12" r="9" fill="none" stroke="#212121" stroke-width="2"/>284            <circle cx="12" cy="8" r="1.6" fill="#212121"/>285            <rect x="11" y="10" width="2" height="7" fill="#212121"/>286          </svg>287        </div>288        <div class="texts">289          <div class="item-title">About</div>290        </div>291      </div>292    </div>293  </div>294 295  <!-- Home indicator -->296  <div class="home-indicator"></div>297 298</div>299</body>300</html>