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 Screen</title>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: #FFFFFF;15  }16 17  /* Top app bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 240px;24    background: #1285d8;25    color: #fff;26  }27  .statusbar {28    height: 80px;29    display: flex;30    align-items: center;31    padding: 0 32px;32    font-size: 36px;33    letter-spacing: 0.5px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .toolbar {42    height: 160px;43    display: flex;44    align-items: center;45    padding: 0 24px 0 16px;46  }47  .toolbar-title {48    font-size: 56px;49    font-weight: 500;50    margin-left: 24px;51  }52 53  /* Content area */54  .content {55    position: absolute;56    top: 240px;57    left: 0;58    right: 0;59    bottom: 0;60    overflow: hidden;61  }62  .list {63    padding: 8px 0;64  }65  .list-item {66    display: flex;67    align-items: flex-start;68    padding: 36px 48px;69    border-bottom: 1px solid #E6E6E6;70  }71  .icon-box {72    width: 72px;73    height: 72px;74    display: flex;75    align-items: center;76    justify-content: center;77    margin-right: 36px;78  }79  .item-text {80    flex: 1;81  }82  .item-title {83    font-size: 44px;84    color: #222;85    line-height: 1.2;86    margin-bottom: 10px;87  }88  .item-sub {89    font-size: 34px;90    color: #7B7B7B;91  }92 93  .section-divider {94    height: 1px;95    background: #DCDCDC;96    margin: 16px 0 8px;97  }98 99  /* Bottom gesture bar */100  .gesture {101    position: absolute;102    bottom: 34px;103    left: 50%;104    transform: translateX(-50%);105    width: 280px;106    height: 12px;107    background: #8D8D8D;108    border-radius: 8px;109    opacity: 0.6;110  }111  /* Helper for monochrome icons */112  .icon-black svg { fill: #1F1F1F; }113  .icon-white svg { fill: #FFFFFF; }114  .icon-red svg { fill: #E53935; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- App bar -->121  <div class="appbar">122    <div class="statusbar">123      <div>2:30</div>124      <div class="status-right">125        <!-- Wi‑Fi icon -->126        <svg width="40" height="40" viewBox="0 0 24 24">127          <path fill="#FFFFFF" d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zm-4.8-3.3l1.2 1.2c1.9-1.9 5-1.9 6.9 0l1.2-1.2c-2.7-2.7-6.7-2.7-9.3 0zm-3.4-3.4l1.2 1.2c3.7-3.6 9.7-3.6 13.4 0l1.2-1.2c-4.4-4.3-11.4-4.3-15.8 0z"/>128        </svg>129        <!-- Battery icon -->130        <svg width="44" height="40" viewBox="0 0 24 24">131          <path fill="#FFFFFF" d="M18 7h1v10h-1v1H4V6h14v1zm-2 1H6v8h10V8zm4 3h2v4h-2v-4z"/>132        </svg>133      </div>134    </div>135    <div class="toolbar">136      <!-- Back arrow -->137      <svg width="56" height="56" viewBox="0 0 24 24" class="icon-white">138        <path d="M15 6L9 12l6 6" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>139      </svg>140      <div class="toolbar-title">Settings</div>141    </div>142  </div>143 144  <!-- Content -->145  <div class="content">146    <div class="list">147 148      <!-- Upgrade -->149      <div class="list-item">150        <div class="icon-box icon-red">151          <svg width="56" height="56" viewBox="0 0 24 24">152            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.46 4.46 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.54 3 22 5.46 22 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/>153          </svg>154        </div>155        <div class="item-text">156          <div class="item-title">Upgrade</div>157          <div class="item-sub">See all the additional features</div>158        </div>159      </div>160 161      <!-- Mic preset -->162      <div class="list-item">163        <div style="width:72px; margin-right:36px;"></div>164        <div class="item-text">165          <div class="item-title">Mic preset</div>166          <div class="item-sub">Voice notes</div>167        </div>168      </div>169 170      <!-- Sound quality -->171      <div class="list-item" style="border-bottom: 1px solid #DCDCDC;">172        <div style="width:72px; margin-right:36px;"></div>173        <div class="item-text">174          <div class="item-title">Sound quality</div>175          <div class="item-sub">High (larger files)</div>176        </div>177      </div>178 179      <div class="section-divider"></div>180 181      <!-- Tuning -->182      <div class="list-item">183        <div class="icon-box icon-black">184          <svg width="56" height="56" viewBox="0 0 24 24">185            <path d="M7 6h14v2H7v2H3V8h4V6zm10 6h4v2h-4v2H3v-2h14v-2zm-6 6h10v2H11v2H3v-2h8v-2z"/>186          </svg>187        </div>188        <div class="item-text">189          <div class="item-title">Tuning</div>190        </div>191      </div>192 193      <!-- Files -->194      <div class="list-item">195        <div class="icon-box icon-black">196          <svg width="56" height="56" viewBox="0 0 24 24">197            <path d="M10 4l2 2h8v12H4V4h6zm10 4H4v10h16V8z"/>198          </svg>199        </div>200        <div class="item-text">201          <div class="item-title">Files</div>202        </div>203      </div>204 205      <!-- Interface -->206      <div class="list-item">207        <div class="icon-box icon-black">208          <svg width="56" height="56" viewBox="0 0 24 24">209            <path d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 2v16h10V4H7zm4 17h2v1h-2v-1z"/>210          </svg>211        </div>212        <div class="item-text">213          <div class="item-title">Interface</div>214        </div>215      </div>216 217      <!-- Advanced & troubleshooting -->218      <div class="list-item">219        <div class="icon-box icon-black">220          <svg width="56" height="56" viewBox="0 0 24 24">221            <path d="M21 16.5l-3 3-3-3 1.5-1.5L15 14l-2 2-2-2 2-2-1.5-1.5 1.5-1.5 3 3L18 10l3 3-1.5 1.5L21 16.5zM7 2l3 3-6 6-3-3L7 2zm2 11l-5 5H2v-2l5-5 2 2z"/>222          </svg>223        </div>224        <div class="item-text">225          <div class="item-title">Advanced & troubleshooting</div>226        </div>227      </div>228 229      <!-- About -->230      <div class="list-item" style="border-bottom:none;">231        <div class="icon-box icon-black">232          <svg width="56" height="56" viewBox="0 0 24 24">233            <circle cx="12" cy="12" r="10"></circle>234            <rect x="11" y="10" width="2" height="6" fill="#FFFFFF"></rect>235            <rect x="11" y="6" width="2" height="2" fill="#FFFFFF"></rect>236          </svg>237        </div>238        <div class="item-text">239          <div class="item-title">About</div>240        </div>241      </div>242 243    </div>244  </div>245 246  <!-- Gesture bar -->247  <div class="gesture"></div>248</div>249</body>250</html>