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>Mondly Language Select</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #2f79ff 0%, #356df7 35%, #3a63f0 60%, #5a39c8 100%);15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 96px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30    color: #eaf2ff;31    font-size: 38px;32    letter-spacing: 0.5px;33    opacity: 0.9;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .icon {41    width: 44px;42    height: 44px;43    display: inline-block;44  }45 46  /* Logo area */47  .logo-wrap {48    position: absolute;49    top: 150px;50    left: 0;51    width: 100%;52    text-align: center;53  }54  .brand {55    font-size: 128px;56    font-weight: 300;57    letter-spacing: 2px;58    line-height: 1;59  }60  .brand .globe {61    display: inline-flex;62    width: 96px;63    height: 96px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    border-radius: 50%;67    color: #757575;68    align-items: center;69    justify-content: center;70    font-size: 22px;71    margin: 0 12px;72    vertical-align: middle;73  }74  .byline {75    font-size: 40px;76    opacity: 0.95;77    margin-top: 10px;78  }79 80  /* Section titles */81  .section-title {82    position: relative;83    margin: 500px 48px 24px 48px;84    font-size: 56px;85    font-weight: 700;86  }87  .section-title.learn {88    margin-top: 760px;89  }90 91  /* Cards */92  .card {93    margin: 0 36px;94    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);95    border-radius: 44px;96    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);97    overflow: hidden;98  }99  .card-header {100    display: flex;101    align-items: center;102    padding: 32px 36px;103    gap: 28px;104    font-size: 52px;105    font-weight: 700;106  }107  .card-header .chevron {108    margin-left: auto;109    width: 60px;110    height: 60px;111  }112  .flag {113    width: 96px;114    height: 96px;115    min-width: 96px;116    border-radius: 50%;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #757575;123    font-size: 22px;124  }125 126  /* Select list (expanded card) */127  .select-header {128    padding: 32px 36px;129    font-size: 52px;130    font-weight: 700;131    display: flex;132    align-items: center;133  }134  .select-header .chevron {135    margin-left: auto;136    width: 60px;137    height: 60px;138  }139  .list {140    height: 1250px;141    overflow-y: auto;142    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.06) 100%);143    padding: 20px 0 24px 0;144  }145  .list-item {146    display: flex;147    align-items: center;148    padding: 28px 40px;149    gap: 28px;150    color: #ffffff;151    font-size: 54px;152    font-weight: 700;153  }154  .divider {155    height: 1px;156    background: rgba(255,255,255,0.08);157    margin: 0 40px;158  }159 160  /* Bottom handle */161  .home-indicator {162    position: absolute;163    bottom: 42px;164    left: 50%;165    transform: translateX(-50%);166    width: 360px;167    height: 14px;168    background: rgba(255,255,255,0.85);169    border-radius: 12px;170  }171</style>172</head>173<body>174<div id="render-target">175  <!-- Status bar -->176  <div class="status-bar">177    <div>6:40</div>178    <div class="status-right">179      <!-- Wi-Fi icon -->180      <svg class="icon" viewBox="0 0 24 24">181        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>182        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>183        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>184        <circle cx="12" cy="20" r="1.5" fill="#fff"/>185      </svg>186      <!-- Battery icon -->187      <svg class="icon" viewBox="0 0 30 24">188        <rect x="2" y="5" width="22" height="14" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>189        <rect x="4" y="7" width="16" height="10" rx="2" fill="#fff"/>190        <rect x="24" y="9" width="4" height="6" rx="1" fill="#fff"/>191      </svg>192      <div style="font-size:32px;">100%</div>193    </div>194  </div>195 196  <!-- Logo -->197  <div class="logo-wrap">198    <div class="brand">199      m<span class="globe">[IMG: Globe]</span>ndly200    </div>201    <div class="byline">by Pearson</div>202  </div>203 204  <!-- I speak card -->205  <div class="section-title">I speak</div>206  <div class="card" style="margin-top: 12px;">207    <div class="card-header">208      <div class="flag">[IMG: UK Flag]</div>209      <div>English</div>210      <svg class="chevron" viewBox="0 0 24 24">211        <path d="M3 8l9 9 9-9" stroke="#ffffff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212      </svg>213    </div>214  </div>215 216  <!-- I want to learn card (expanded) -->217  <div class="section-title learn">I want to learn</div>218  <div class="card" style="margin-top: 12px;">219    <div class="select-header">220      <div>Select</div>221      <svg class="chevron" viewBox="0 0 24 24">222        <path d="M3 16l9-9 9 9" stroke="#ffffff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224    </div>225    <div class="list">226      <div class="list-item">227        <div class="flag">[IMG: Japanese Flag]</div>228        <div>Japanese</div>229      </div>230      <div class="divider"></div>231      <div class="list-item">232        <div class="flag">[IMG: Korean Flag]</div>233        <div>Korean</div>234      </div>235      <div class="divider"></div>236      <div class="list-item">237        <div class="flag">[IMG: Chinese Flag]</div>238        <div>Chinese</div>239      </div>240      <div class="divider"></div>241      <div class="list-item">242        <div class="flag">[IMG: Turkish Flag]</div>243        <div>Turkish</div>244      </div>245      <div class="divider"></div>246      <div class="list-item">247        <div class="flag">[IMG: Romanian Flag]</div>248        <div>Romanian</div>249      </div>250      <div class="divider"></div>251      <div class="list-item">252        <div class="flag">[IMG: Arabic Emblem]</div>253        <div>Arabic</div>254      </div>255      <div class="divider"></div>256      <div class="list-item">257        <div class="flag">[IMG: Iranian Flag]</div>258        <div>Persian</div>259      </div>260      <div class="divider"></div>261      <div class="list-item">262        <div class="flag">[IMG: Israeli Flag]</div>263        <div>Hebrew</div>264      </div>265      <div class="divider"></div>266      <div class="list-item">267        <div class="flag">[IMG: Portugal Flag]</div>268        <div>Portuguese</div>269      </div>270      <div class="divider"></div>271      <div class="list-item">272        <div class="flag">[IMG: Brazil Flag]</div>273        <div>Portuguese</div>274      </div>275      <div class="divider"></div>276      <div class="list-item">277        <div class="flag">[IMG: Spanish Flag]</div>278        <div>Spanish</div>279      </div>280      <div class="divider"></div>281      <div class="list-item">282        <div class="flag">[IMG: French Flag]</div>283        <div>French</div>284      </div>285      <div class="divider"></div>286      <div class="list-item">287        <div class="flag">[IMG: German Flag]</div>288        <div>German</div>289      </div>290    </div>291  </div>292 293  <!-- Home indicator -->294  <div class="home-indicator"></div>295</div>296</body>297</html>