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 Selection UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f191b;20    border-radius: 48px;21    box-shadow: 0 30px 80px rgba(0,0,0,0.45);22    color: #e9f1f3;23  }24 25  /* Status bar */26  .status {27    position: absolute;28    top: 0;29    left: 0;30    width: 100%;31    height: 120px;32    padding: 24px 40px;33    color: #c7d0d2;34    display: flex;35    justify-content: space-between;36    align-items: center;37    box-sizing: border-box;38  }39  .status .left {40    font-weight: 700;41    font-size: 36px;42    letter-spacing: 1px;43  }44  .status .right {45    display: flex;46    gap: 28px;47    align-items: center;48  }49  .status svg {50    width: 40px;51    height: 40px;52    fill: none;53    stroke: #c7d0d2;54    stroke-width: 3;55  }56 57  /* Top navigation */58  .back-btn {59    position: absolute;60    top: 140px;61    left: 32px;62    width: 72px;63    height: 72px;64    display: flex;65    align-items: center;66    justify-content: center;67    border-radius: 36px;68  }69  .back-btn svg {70    width: 48px;71    height: 48px;72    stroke: #9fb0b4;73    stroke-width: 6;74  }75 76  .progress-track {77    position: absolute;78    top: 160px;79    left: 140px;80    width: 900px;81    height: 36px;82    background: #283236;83    border-radius: 18px;84    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);85  }86  .progress-fill {87    width: 230px; /* progress amount */88    height: 100%;89    background: #a6e04e;90    border-radius: 18px;91  }92 93  /* Mascot and prompt bubble */94  .header {95    position: absolute;96    top: 250px;97    left: 60px;98    display: flex;99    align-items: center;100    gap: 40px;101  }102  .mascot {103    width: 220px;104    height: 220px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    border-radius: 24px;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-weight: 600;113    text-align: center;114    box-shadow: 0 8px 18px rgba(0,0,0,0.25);115  }116  .bubble {117    position: relative;118    width: 700px;119    min-height: 180px;120    border: 2px solid #344248;121    border-radius: 26px;122    padding: 26px 32px;123    color: #dce6e8;124    font-size: 44px;125    line-height: 1.25;126    box-sizing: border-box;127    background: rgba(17,28,30,0.3);128  }129  .bubble-pointer {130    position: absolute;131    left: -18px;132    top: 64px;133    width: 36px;134    height: 36px;135    transform: rotate(45deg);136    background: #0f191b;137    border-left: 2px solid #344248;138    border-top: 2px solid #344248;139  }140 141  /* Language list */142  .list {143    position: absolute;144    top: 520px;145    left: 0;146    width: 100%;147    padding-bottom: 380px; /* room for footer */148    box-sizing: border-box;149  }150  .lang-card {151    margin: 28px 40px;152    height: 160px;153    border: 2px solid #2b3a3f;154    border-radius: 34px;155    padding: 30px 36px;156    display: flex;157    align-items: center;158    gap: 36px;159    box-sizing: border-box;160    background: rgba(18,27,29,0.35);161    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);162  }163  .lang-card .flag {164    width: 120px;165    height: 92px;166    background: #E0E0E0;167    border: 1px solid #BDBDBD;168    border-radius: 12px;169    display: flex;170    align-items: center;171    justify-content: center;172    color: #757575;173    font-size: 28px;174    font-weight: 600;175    text-align: center;176  }177  .lang-card .name {178    font-size: 52px;179    font-weight: 800;180    color: #eaf2f4;181  }182  .lang-card.selected {183    border-color: #4f8fd8;184    box-shadow: 0 0 0 4px rgba(79,143,216,0.6);185    background: rgba(79,143,216,0.08);186  }187  .lang-card.selected .name {188    color: #86b8f0;189  }190 191  /* Footer */192  .footer {193    position: absolute;194    left: 0;195    bottom: 0;196    width: 100%;197    height: 260px;198    background: #0f1c1e;199    border-top: 2px solid rgba(255,255,255,0.05);200    box-shadow: 0 -12px 24px rgba(0,0,0,0.35);201  }202  .cta {203    position: absolute;204    left: 70px;205    right: 70px;206    bottom: 90px;207    height: 136px;208    background: #a6e04e;209    color: #0b1b1c;210    border-radius: 40px;211    display: flex;212    align-items: center;213    justify-content: center;214    font-weight: 900;215    font-size: 48px;216    letter-spacing: 2px;217    box-shadow: 0 18px 0 rgba(0,0,0,0.3), 0 22px 50px rgba(0,0,0,0.45);218  }219 220  .gesture {221    position: absolute;222    bottom: 24px;223    left: 50%;224    transform: translateX(-50%);225    width: 220px;226    height: 14px;227    background: #e6e6e6;228    border-radius: 8px;229    opacity: 0.9;230  }231 232  /* Divider lines to mimic subtle separators */233  .divider {234    position: absolute;235    left: 40px;236    right: 40px;237    height: 2px;238    background: rgba(255,255,255,0.05);239  }240</style>241</head>242<body>243<div id="render-target">244 245  <!-- Status bar -->246  <div class="status">247    <div class="left">8:07</div>248    <div class="right">249      <!-- simple calm/weather glyph -->250      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>251      <!-- dot -->252      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>253      <!-- Wi-Fi -->254      <svg viewBox="0 0 24 24">255        <path d="M2 9c5-5 15-5 20 0M6 13c3-3 9-3 12 0M10 17c2-2 4-2 6 0"/>256      </svg>257      <!-- Battery -->258      <svg viewBox="0 0 24 24">259        <rect x="2" y="6" width="18" height="12" rx="2"></rect>260        <rect x="21" y="9" width="2" height="6" rx="1"></rect>261      </svg>262    </div>263  </div>264 265  <!-- Back and progress -->266  <div class="back-btn">267    <svg viewBox="0 0 24 24">268      <path d="M15 4L7 12l8 8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>269    </svg>270  </div>271  <div class="progress-track">272    <div class="progress-fill"></div>273  </div>274 275  <!-- Mascot + prompt -->276  <div class="header">277    <div class="mascot">[IMG: Duolingo mascot]</div>278    <div class="bubble">279      <div class="bubble-pointer"></div>280      What would you like to learn?281    </div>282  </div>283 284  <!-- Language list -->285  <div class="list">286 287    <div class="lang-card">288      <div class="flag">[IMG: Flag - French]</div>289      <div class="name">French</div>290    </div>291 292    <div class="lang-card">293      <div class="flag">[IMG: Flag - German]</div>294      <div class="name">German</div>295    </div>296 297    <div class="lang-card">298      <div class="flag">[IMG: Flag - Italian]</div>299      <div class="name">Italian</div>300    </div>301 302    <div class="lang-card selected">303      <div class="flag">[IMG: Flag - Japanese]</div>304      <div class="name">Japanese</div>305    </div>306 307    <div class="lang-card">308      <div class="flag">[IMG: Flag - Chinese]</div>309      <div class="name">Chinese</div>310    </div>311 312    <div class="lang-card">313      <div class="flag">[IMG: Flag - Russian]</div>314      <div class="name">Russian</div>315    </div>316 317    <div class="lang-card">318      <div class="flag">[IMG: Flag - Korean]</div>319      <div class="name">Korean</div>320    </div>321 322    <div class="lang-card">323      <div class="flag">[IMG: Flag - Portuguese]</div>324      <div class="name">Portuguese</div>325    </div>326  </div>327 328  <!-- Footer and gesture -->329  <div class="footer">330    <div class="cta">CONTINUE</div>331    <div class="gesture"></div>332  </div>333</div>334</body>335</html>