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 { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f191b; /* deep charcoal */15    color: #e8f1f2;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e8f1f2;26    font-weight: 600;27    letter-spacing: 0.2px;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 22px;33    font-size: 42px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .status-icon {41    width: 42px; height: 42px;42  }43 44  /* Top nav & progress */45  .top-row {46    padding: 10px 36px 0 36px;47    display: flex;48    align-items: center;49    gap: 24px;50  }51  .back-btn {52    width: 72px; height: 72px; border-radius: 36px;53    display: flex; align-items: center; justify-content: center;54    color: #b0c1c7;55  }56  .progress-track {57    flex: 1;58    height: 44px;59    background: #2b363b;60    border-radius: 26px;61    position: relative;62  }63  .progress-fill {64    position: absolute; left: 6px; top: 6px; bottom: 6px;65    width: 260px; /* ~25% */66    background: #9be15b;67    border-radius: 22px;68  }69 70  /* Header prompt */71  .prompt-row {72    margin-top: 28px;73    padding: 0 36px;74    display: flex;75    align-items: flex-start;76    gap: 24px;77  }78  .avatar {79    width: 180px; height: 180px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    border-radius: 28px;83    display: flex; align-items: center; justify-content: center;84    color: #757575; font-weight: 600;85  }86  .bubble {87    position: relative;88    padding: 40px 48px;89    background: #1d272c;90    border: 3px solid #334047;91    border-radius: 32px;92    color: #d9e6e8;93    font-size: 44px;94    line-height: 1.3;95    max-width: 760px;96  }97  .bubble::before {98    content: "";99    position: absolute;100    left: -28px; top: 48px;101    width: 0; height: 0;102    border-top: 22px solid transparent;103    border-bottom: 22px solid transparent;104    border-right: 28px solid #1d272c;105  }106  .bubble::after {107    content: "";108    position: absolute;109    left: -34px; top: 44px;110    width: 0; height: 0;111    border-top: 26px solid transparent;112    border-bottom: 26px solid transparent;113    border-right: 34px solid #334047;114  }115 116  /* Option cards */117  .options {118    margin-top: 24px;119    padding: 0 32px;120    display: flex;121    flex-direction: column;122    gap: 24px;123  }124  .card {125    background: #202a2f;126    border: 4px solid #334047;127    border-radius: 36px;128    padding: 34px 40px;129    display: flex;130    align-items: center;131    gap: 28px;132  }133  .bars-icon {134    width: 60px; height: 60px;135  }136  .card-text {137    font-size: 42px;138    color: #e2eaed;139    letter-spacing: 0.2px;140  }141 142  /* Bottom CTA */143  .bottom-cta {144    position: absolute;145    left: 36px;146    right: 36px;147    bottom: 160px;148    height: 128px;149    background: #364149;150    border-radius: 44px;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #7f8b92;155    font-size: 44px;156    font-weight: 800;157    letter-spacing: 4px;158  }159 160  /* Home indicator */161  .home-indicator {162    position: absolute;163    bottom: 64px;164    left: 50%;165    transform: translateX(-50%);166    width: 220px;167    height: 10px;168    background: #e6e6e6;169    border-radius: 8px;170    opacity: 0.85;171  }172</style>173</head>174<body>175<div id="render-target">176  <!-- Status bar -->177  <div class="status-bar">178    <div class="status-left">179      <span>8:10</span>180      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f1f2" aria-hidden="true">181        <circle cx="12" cy="12" r="8"></circle>182      </svg>183      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#e8f1f2" stroke-width="2" aria-hidden="true">184        <circle cx="12" cy="12" r="9"></circle>185        <path d="M12 3v6M12 12l4 4"></path>186      </svg>187      <span style="font-size:36px; opacity:.8;">Calm</span>188      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f1f2" aria-hidden="true">189        <circle cx="12" cy="12" r="2"></circle>190      </svg>191    </div>192    <div class="status-right">193      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f1f2" aria-hidden="true">194        <path d="M2 17h20v2H2zM4 13h16v2H4zM7 9h10v2H7zM9 5h6v2H9z"></path>195      </svg>196      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#e8f1f2" stroke-width="2" aria-hidden="true">197        <rect x="3" y="6" width="18" height="12" rx="3"></rect>198        <rect x="20.5" y="9" width="2" height="6" rx="1" fill="#e8f1f2" stroke="none"></rect>199      </svg>200    </div>201  </div>202 203  <!-- Back and progress -->204  <div class="top-row">205    <div class="back-btn">206      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#a9b9bf" stroke-width="2" aria-hidden="true">207        <path d="M15 6l-6 6 6 6"></path>208      </svg>209    </div>210    <div class="progress-track">211      <div class="progress-fill"></div>212    </div>213  </div>214 215  <!-- Prompt with avatar -->216  <div class="prompt-row">217    <div class="avatar">[IMG: Owl mascot]</div>218    <div class="bubble">How much Japanese do you know?</div>219  </div>220 221  <!-- Options list -->222  <div class="options">223    <div class="card">224      <svg class="bars-icon" viewBox="0 0 24 24" aria-hidden="true">225        <rect x="2" y="11" width="4" height="9" rx="1" fill="#386ea8"></rect>226        <rect x="9" y="8" width="4" height="12" rx="1" fill="#4a86c5"></rect>227        <rect x="16" y="5" width="4" height="15" rx="1" fill="#79b6e9"></rect>228      </svg>229      <div class="card-text">I’m new to Japanese</div>230    </div>231 232    <div class="card">233      <svg class="bars-icon" viewBox="0 0 24 24" aria-hidden="true">234        <rect x="2" y="11" width="4" height="9" rx="1" fill="#386ea8"></rect>235        <rect x="9" y="8" width="4" height="12" rx="1" fill="#4a86c5"></rect>236        <rect x="16" y="5" width="4" height="15" rx="1" fill="#79b6e9"></rect>237      </svg>238      <div class="card-text">I know some words and phrases</div>239    </div>240 241    <div class="card">242      <svg class="bars-icon" viewBox="0 0 24 24" aria-hidden="true">243        <rect x="2" y="11" width="4" height="9" rx="1" fill="#386ea8"></rect>244        <rect x="9" y="8" width="4" height="12" rx="1" fill="#4a86c5"></rect>245        <rect x="16" y="5" width="4" height="15" rx="1" fill="#79b6e9"></rect>246      </svg>247      <div class="card-text">I can have simple conversations</div>248    </div>249 250    <div class="card">251      <svg class="bars-icon" viewBox="0 0 24 24" aria-hidden="true">252        <rect x="2" y="11" width="4" height="9" rx="1" fill="#386ea8"></rect>253        <rect x="9" y="8" width="4" height="12" rx="1" fill="#4a86c5"></rect>254        <rect x="16" y="5" width="4" height="15" rx="1" fill="#79b6e9"></rect>255      </svg>256      <div class="card-text">I am intermediate or higher</div>257    </div>258  </div>259 260  <!-- Bottom button -->261  <div class="bottom-cta">CONTINUE</div>262 263  <!-- Home indicator -->264  <div class="home-indicator"></div>265</div>266</body>267</html>