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 Level Selection</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f191c;20    color: #e9f2f5;21  }22 23  /* Status bar */24  .statusbar {25    height: 120px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #cfe2e8;31    font-weight: 600;32    letter-spacing: 0.5px;33    font-size: 40px;34  }35  .sb-icons {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .sb-icon {41    width: 44px; height: 44px;42    opacity: 0.85;43  }44 45  /* Back + progress */46  .top-controls {47    display: flex;48    align-items: center;49    padding: 12px 36px 0 24px;50    gap: 24px;51  }52  .back-btn {53    width: 72px;54    height: 72px;55    border: none;56    background: transparent;57    border-radius: 36px;58    display: flex;59    align-items: center;60    justify-content: center;61    cursor: default;62  }63  .back-btn svg { width: 48px; height: 48px; }64  .progress-track {65    flex: 1;66    height: 40px;67    background: #2a363a;68    border-radius: 22px;69    position: relative;70    overflow: hidden;71  }72  .progress-fill {73    position: absolute;74    top: 0; left: 0;75    height: 100%;76    width: 28%;77    background: #a6d93e;78    border-radius: 22px;79  }80 81  /* Conversation row */82  .conversation {83    display: flex;84    align-items: flex-start;85    gap: 28px;86    padding: 36px 40px 24px 40px;87  }88  .avatar {89    width: 180px;90    height: 180px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    border-radius: 28px;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-weight: 600;99    text-align: center;100    line-height: 1.2;101    padding: 12px;102  }103  .bubble {104    max-width: 740px;105    background: #162428;106    border: 4px solid #39484c;107    border-radius: 28px;108    padding: 36px 40px;109    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);110    font-size: 46px;111    line-height: 1.3;112    color: #e6eef1;113    position: relative;114  }115  .bubble:before {116    content: "";117    position: absolute;118    left: -34px;119    top: 40px;120    width: 28px;121    height: 28px;122    border-top: 4px solid #39484c;123    border-left: 4px solid #39484c;124    background: #162428;125    transform: rotate(-45deg);126    border-radius: 4px;127  }128 129  /* Options list */130  .options {131    padding: 12px 28px 0 28px;132  }133  .option {134    display: flex;135    align-items: center;136    gap: 28px;137    background: #141f22;138    border: 5px solid #39484c;139    color: #dfe8ec;140    padding: 36px 36px;141    border-radius: 36px;142    margin: 24px 12px;143    box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;144  }145  .option .label {146    font-size: 44px;147    line-height: 1.25;148    letter-spacing: 0.3px;149    font-weight: 700;150  }151  .option.active {152    border-color: #5aa6d9;153    background: #1a3140;154    color: #cfe7fb;155    box-shadow: 0 0 0 3px rgba(90,166,217,0.25) inset;156  }157 158  /* Bars icon */159  .bars-icon {160    width: 88px;161    height: 72px;162    display: grid;163    grid-template-columns: repeat(3, 1fr);164    align-items: end;165    column-gap: 8px;166  }167  .bars-icon span {168    display: block;169    background: #33586b;170    border-radius: 8px;171  }172  .bars-icon span:nth-child(1){ height: 22px; }173  .bars-icon span:nth-child(2){ height: 40px; }174  .bars-icon span:nth-child(3){ height: 58px; }175  .option.active .bars-icon span {176    background: #65b2e2;177  }178 179  /* Bottom CTA */180  .bottom-cta {181    position: absolute;182    left: 0; right: 0; bottom: 140px;183    padding: 0 36px;184  }185  .cta {186    width: 100%;187    height: 140px;188    background: #a8e63f;189    border: none;190    border-radius: 36px;191    font-size: 52px;192    font-weight: 800;193    color: #0f191c;194    letter-spacing: 3px;195    box-shadow: 0 16px 0 #7cc03a;196  }197 198  .home-indicator {199    position: absolute;200    bottom: 48px;201    left: 50%;202    transform: translateX(-50%);203    width: 360px;204    height: 14px;205    background: #e5e5e5;206    border-radius: 10px;207    opacity: 0.9;208  }209</style>210</head>211<body>212<div id="render-target">213  <div class="statusbar">214    <div class="time">8:11</div>215    <div class="sb-icons">216      <svg class="sb-icon" viewBox="0 0 24 24">217        <circle cx="3" cy="12" r="2" fill="#cfe2e8"></circle>218        <circle cx="12" cy="12" r="2" fill="#cfe2e8"></circle>219        <circle cx="21" cy="12" r="2" fill="#cfe2e8"></circle>220      </svg>221      <svg class="sb-icon" viewBox="0 0 24 24">222        <path d="M4 18h16M6 12h12M8 6h8" stroke="#cfe2e8" stroke-width="2" fill="none" stroke-linecap="round"/>223      </svg>224      <svg class="sb-icon" viewBox="0 0 24 24">225        <path d="M2 8c5-5 15-5 20 0" stroke="#cfe2e8" stroke-width="2" fill="none" stroke-linecap="round"/>226        <path d="M5 11c3-3 11-3 14 0" stroke="#cfe2e8" stroke-width="2" fill="none" stroke-linecap="round"/>227        <path d="M8 14c1.5-1.5 6.5-1.5 8 0" stroke="#cfe2e8" stroke-width="2" fill="none" stroke-linecap="round"/>228        <circle cx="12" cy="18" r="2" fill="#cfe2e8"/>229      </svg>230      <svg class="sb-icon" viewBox="0 0 24 24">231        <path d="M18 6H6a2 2 0 0 0-2 2v10l4-2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" fill="#cfe2e8"/>232      </svg>233    </div>234  </div>235 236  <div class="top-controls">237    <button class="back-btn" aria-label="Back">238      <svg viewBox="0 0 24 24">239        <path d="M15 6L9 12l6 6" stroke="#cfe2e8" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240      </svg>241    </button>242    <div class="progress-track">243      <div class="progress-fill"></div>244    </div>245  </div>246 247  <div class="conversation">248    <div class="avatar">[IMG: Duolingo Owl]</div>249    <div class="bubble">How much Japanese do you know?</div>250  </div>251 252  <div class="options">253    <div class="option active">254      <div class="bars-icon">255        <span></span><span></span><span></span>256      </div>257      <div class="label">I'm new to Japanese</div>258    </div>259 260    <div class="option">261      <div class="bars-icon">262        <span></span><span></span><span></span>263      </div>264      <div class="label">I know some words and phrases</div>265    </div>266 267    <div class="option">268      <div class="bars-icon">269        <span></span><span></span><span></span>270      </div>271      <div class="label">I can have simple conversations</div>272    </div>273 274    <div class="option">275      <div class="bars-icon">276        <span></span><span></span><span></span>277      </div>278      <div class="label">I am intermediate or higher</div>279    </div>280  </div>281 282  <div class="bottom-cta">283    <button class="cta">CONTINUE</button>284  </div>285 286  <div class="home-indicator"></div>287</div>288</body>289</html>