GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Language Dialog UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #e9ecef;15    font-family: Roboto, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar (top) */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    background: #0e2a45;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 24px;31    box-sizing: border-box;32  }33  .status-time { font-size: 40px; font-weight: 500; }34  .spacer { flex: 1; }35  .icon-row { display: flex; align-items: center; gap: 24px; }36  .status-icon svg { display: block; }37 38  /* App bar behind dialog */39  .app-bar {40    position: absolute;41    top: 120px;42    left: 0;43    width: 100%;44    height: 150px;45    background: #153a5b;46  }47 48  /* Content background (placeholder) */49  .content-area {50    position: absolute;51    top: 270px;52    left: 0;53    right: 0;54    bottom: 120px;55    background: #f3f3f3;56  }57 58  /* Dim overlay (scrim) */59  .scrim {60    position: absolute;61    top: 120px;62    left: 0;63    right: 0;64    bottom: 120px;65    background: rgba(0,0,0,0.28);66  }67 68  /* Dialog */69  .dialog {70    position: absolute;71    left: 60px;72    top: 200px;73    width: 960px;74    height: 1850px;75    background: #fff;76    border-radius: 20px;77    box-shadow: 0 24px 80px rgba(0,0,0,0.35);78    overflow: hidden;79  }80  .dialog-title {81    font-size: 56px;82    font-weight: 600;83    padding: 48px 48px 24px 48px;84  }85  .options {86    padding: 0 32px 0 48px;87    box-sizing: border-box;88  }89  .option {90    height: 108px;91    display: flex;92    align-items: center;93    gap: 32px;94  }95  .option .label {96    font-size: 38px;97    line-height: 1;98    color: #222;99  }100  .option.muted .label { color: #4c4c4c; }101  .radio {102    width: 54px;103    height: 54px;104    border-radius: 50%;105    border: 6px solid #9e9e9e;106    box-sizing: border-box;107    display: flex;108    align-items: center;109    justify-content: center;110  }111  .radio.selected {112    border-color: #2c8e99;113  }114  .radio.selected::after {115    content: '';116    width: 26px;117    height: 26px;118    background: #2c8e99;119    border-radius: 50%;120  }121 122  .dialog-footer {123    position: absolute;124    bottom: 24px;125    right: 36px;126    height: 100px;127    display: flex;128    align-items: center;129    justify-content: flex-end;130    width: calc(100% - 72px);131    box-sizing: border-box;132  }133  .cancel-btn {134    font-size: 40px;135    letter-spacing: 1px;136    color: #2c8e99;137  }138 139  /* Bottom navigation / gesture bar */140  .nav-bar {141    position: absolute;142    bottom: 0;143    left: 0;144    width: 100%;145    height: 120px;146    background: #000;147  }148  .gesture-pill {149    position: absolute;150    bottom: 36px;151    left: 50%;152    transform: translateX(-50%);153    width: 300px;154    height: 18px;155    background: #fff;156    border-radius: 12px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="status-time">12:19</div>167    <div class="icon-row" style="margin-left: 28px;">168      <!-- Rotation icon -->169      <div class="status-icon">170        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">171          <circle cx="22" cy="22" r="16" stroke="#ffffff" stroke-width="3"/>172          <path d="M30 14l0 8-8 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>173        </svg>174      </div>175      <!-- Cast icon -->176      <div class="status-icon">177        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">178          <rect x="9" y="12" width="26" height="18" rx="2" stroke="#ffffff" stroke-width="3"/>179          <path d="M11 30c6 0 9 3 11 6" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>180          <path d="M11 26c4 0 7 2 9 5" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>181        </svg>182      </div>183      <!-- Calendar icon -->184      <div class="status-icon">185        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">186          <rect x="9" y="12" width="26" height="20" rx="2" stroke="#ffffff" stroke-width="3"/>187          <line x1="9" y1="18" x2="35" y2="18" stroke="#ffffff" stroke-width="3"/>188        </svg>189      </div>190      <!-- Dot -->191      <div class="status-icon">192        <svg width="16" height="16" viewBox="0 0 16 16">193          <circle cx="8" cy="8" r="6" fill="#ffffff"/>194        </svg>195      </div>196    </div>197    <div class="spacer"></div>198    <div class="icon-row">199      <!-- Wi-Fi icon -->200      <div class="status-icon">201        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">202          <path d="M8 18c8-8 20-8 28 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>203          <path d="M12 22c6-6 14-6 20 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>204          <path d="M18 28c4-4 8-4 12 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>205          <circle cx="22" cy="32" r="2.5" fill="#ffffff"/>206        </svg>207      </div>208      <!-- Battery icon -->209      <div class="status-icon">210        <svg width="50" height="44" viewBox="0 0 50 44" fill="none">211          <rect x="6" y="12" width="34" height="20" rx="3" stroke="#ffffff" stroke-width="3"/>212          <rect x="42" y="17" width="4" height="10" fill="#ffffff"/>213          <rect x="10" y="16" width="26" height="12" fill="#ffffff"/>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- App bar and content behind dialog -->220  <div class="app-bar"></div>221  <div class="content-area"></div>222 223  <!-- Scrim -->224  <div class="scrim"></div>225 226  <!-- Dialog -->227  <div class="dialog">228    <div class="dialog-title">Language</div>229    <div class="options">230      <div class="option">231        <div class="radio selected"></div>232        <div class="label">System default</div>233      </div>234 235      <div class="option muted">236        <div class="radio"></div>237        <div class="label">Bahasa Melayu</div>238      </div>239 240      <div class="option muted">241        <div class="radio"></div>242        <div class="label">Català</div>243      </div>244 245      <div class="option muted">246        <div class="radio"></div>247        <div class="label">Český</div>248      </div>249 250      <div class="option muted">251        <div class="radio"></div>252        <div class="label">Dansk</div>253      </div>254 255      <div class="option muted">256        <div class="radio"></div>257        <div class="label">Deutsch</div>258      </div>259 260      <div class="option muted">261        <div class="radio"></div>262        <div class="label">Eesti</div>263      </div>264 265      <div class="option muted">266        <div class="radio"></div>267        <div class="label">English (Intl)</div>268      </div>269 270      <div class="option muted">271        <div class="radio"></div>272        <div class="label">English (US)</div>273      </div>274 275      <div class="option muted">276        <div class="radio"></div>277        <div class="label">Español</div>278      </div>279 280      <div class="option muted">281        <div class="radio"></div>282        <div class="label">Euskara</div>283      </div>284 285      <div class="option muted">286        <div class="radio"></div>287        <div class="label">Français</div>288      </div>289 290      <div class="option muted">291        <div class="radio"></div>292        <div class="label">Galego</div>293      </div>294 295      <div class="option muted">296        <div class="radio"></div>297        <div class="label">Italiano</div>298      </div>299 300      <div class="option muted">301        <div class="radio"></div>302        <div class="label">Magyar</div>303      </div>304    </div>305 306    <div class="dialog-footer">307      <div class="cancel-btn">CANCEL</div>308    </div>309  </div>310 311  <!-- Bottom navigation / gesture area -->312  <div class="nav-bar"></div>313  <div class="gesture-pill"></div>314 315</div>316</body>317</html>