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>Onboarding - Find Starting Point</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: #0f1a1c; /* deep dark teal like Duolingo */15    color: #EAF3F6;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #d9e6ea;30    font-size: 36px;31    letter-spacing: 0.5px;32    opacity: 0.9;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon-dot { width: 14px; height: 14px; background: #cfe1e6; border-radius: 50%; opacity: 0.7; }40 41  /* Progress + back */42  .progress-area {43    margin-top: 132px;44    padding: 0 120px 0 120px;45    position: relative;46  }47  .back-btn {48    position: absolute;49    left: 32px;50    top: -12px;51    width: 72px;52    height: 72px;53    display: flex;54    align-items: center;55    justify-content: center;56    opacity: 0.9;57  }58  .progress-track {59    width: 840px;60    height: 52px;61    border-radius: 26px;62    background: #2f3a3f;63    overflow: hidden;64  }65  .progress-fill {66    height: 100%;67    width: 720px; /* ~85% */68    background: #a9e34b;69    border-radius: 26px;70  }71 72  /* Owl + speech bubble */73  .intro-row {74    margin-top: 36px;75    padding: 0 60px;76    display: flex;77    align-items: center;78    gap: 30px;79  }80  .img-placeholder {81    width: 220px;82    height: 220px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    border-radius: 24px;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #757575;90    font-size: 30px;91    text-align: center;92  }93  .speech-bubble {94    flex: 1;95    background: #182227;96    border: 4px solid #2b3940;97    border-radius: 28px;98    padding: 38px 40px;99    position: relative;100    color: #dfe8ec;101    font-size: 44px;102    line-height: 1.25;103  }104  .speech-bubble:before {105    content: "";106    position: absolute;107    left: -34px;108    top: 52px;109    width: 36px;110    height: 36px;111    background: #182227;112    border-left: 4px solid #2b3940;113    border-bottom: 4px solid #2b3940;114    transform: rotate(45deg);115    border-radius: 6px;116  }117 118  /* Choice cards */119  .cards {120    margin-top: 36px;121    padding: 0 40px;122  }123  .card {124    background: #172229;125    border-radius: 32px;126    padding: 36px 40px;127    display: flex;128    align-items: center;129    gap: 40px;130    margin-bottom: 36px;131    border: 6px solid #2b3a41;132    box-shadow: 0 2px 0 rgba(0,0,0,0.4) inset;133  }134  .card.primary { border-color: #4f89b8; }135  .card .icon {136    width: 150px;137    height: 150px;138    background: #E0E0E0;139    border: 1px solid #BDBDBD;140    border-radius: 20px;141    display: flex; align-items: center; justify-content: center;142    color: #757575; font-size: 28px; text-align: center;143  }144  .card .text-area { flex: 1; }145  .card .title {146    font-size: 46px;147    font-weight: 800;148    margin-bottom: 14px;149    color: #eaf3f6;150  }151  .card.primary .title { color: #79b8f2; }152  .card .subtitle {153    font-size: 34px;154    color: #a4bdc7;155  }156 157  /* Continue button */158  .continue {159    position: absolute;160    left: 60px;161    right: 60px;162    bottom: 180px;163    height: 132px;164    background: #a6e042;165    border-radius: 34px;166    display: flex;167    align-items: center;168    justify-content: center;169    font-size: 42px;170    font-weight: 900;171    color: #0c1214;172    letter-spacing: 2px;173    box-shadow: -10px 16px 0 #86c63a; /* subtle green shadow like pill */174  }175 176  /* Home indicator */177  .home-indicator {178    position: absolute;179    bottom: 96px;180    left: 50%;181    transform: translateX(-50%);182    width: 260px;183    height: 12px;184    background: #e6e6e6;185    border-radius: 8px;186    opacity: 0.8;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status bar -->194  <div class="status-bar">195    <div>8:17</div>196    <div class="status-icons">197      <!-- simple status glyphs -->198      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">199        <circle cx="12" cy="12" r="9" stroke="#cfe1e6" stroke-width="2"/>200        <path d="M12 6v6l4 2" stroke="#cfe1e6" stroke-width="2" stroke-linecap="round"/>201      </svg>202      <svg width="42" height="42" viewBox="0 0 24 24">203        <path d="M4 16h16c-2-4-5-6-8-6S6 12 4 16z" fill="#cfe1e6"/>204      </svg>205      <div class="icon-dot"></div>206      <svg width="42" height="42" viewBox="0 0 24 24">207        <path d="M3 17h18c-1.5-3-4.5-5-9-5s-7.5 2-9 5z" fill="#e8f2f6"/>208      </svg>209      <svg width="42" height="42" viewBox="0 0 24 24">210        <rect x="3" y="6" width="18" height="12" rx="3" stroke="#e8f2f6" stroke-width="2"/>211        <rect x="5" y="8" width="10" height="8" fill="#e8f2f6"/>212      </svg>213    </div>214  </div>215 216  <!-- Progress + back -->217  <div class="progress-area">218    <div class="back-btn">219      <svg width="64" height="64" viewBox="0 0 24 24">220        <path d="M15 6l-6 6 6 6" stroke="#a5b6bd" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222    </div>223    <div class="progress-track">224      <div class="progress-fill"></div>225    </div>226  </div>227 228  <!-- Owl + speech -->229  <div class="intro-row">230    <div class="img-placeholder">[IMG: Duo Owl]</div>231    <div class="speech-bubble">232      Now let’s find the best place to start!233    </div>234  </div>235 236  <!-- Choice cards -->237  <div class="cards">238    <div class="card primary">239      <div class="icon">[IMG: Book Icon]</div>240      <div class="text-area">241        <div class="title">Learning Japanese for the first time?</div>242        <div class="subtitle">Start from scratch!</div>243      </div>244    </div>245 246    <div class="card">247      <div class="icon">[IMG: Compass Icon]</div>248      <div class="text-area">249        <div class="title">Already know some Japanese?</div>250        <div class="subtitle">Answer some questions to find your level!</div>251      </div>252    </div>253  </div>254 255  <!-- Continue button -->256  <div class="continue">CONTINUE</div>257 258  <!-- Home indicator -->259  <div class="home-indicator"></div>260 261</div>262</body>263</html>