GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Onboarding - Choose Starting Point</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #12181A;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EAEAEA;30    font-weight: 600;31    font-size: 40px;32    opacity: 0.95;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon-battery svg, .icon-wifi svg, .icon-dot svg {40    display: block;41  }42  .icon-wifi svg { opacity: 0.85; }43  .icon-battery svg { opacity: 0.95; }44 45  /* Top navigation + progress */46  .top-row {47    position: absolute;48    top: 132px;49    left: 36px;50    right: 36px;51    display: flex;52    align-items: center;53    gap: 24px;54  }55  .back-btn {56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .progress-track {63    flex: 1;64    height: 48px;65    background: #2A3235;66    border-radius: 28px;67    position: relative;68  }69  .progress-fill {70    position: absolute;71    top: 4px;72    left: 6px;73    height: 40px;74    width: 82%;75    background: #93D946;76    border-radius: 24px;77  }78 79  /* Owl + speech bubble */80  .intro-row {81    position: absolute;82    top: 260px;83    left: 60px;84    right: 60px;85    display: flex;86    align-items: flex-start;87    gap: 24px;88  }89  .avatar {90    width: 180px;91    height: 180px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    border-radius: 28px;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #757575;99    font-weight: 700;100    font-size: 28px;101  }102  .speech {103    flex: 1;104    background: #1A2224;105    border: 2px solid #354247;106    border-radius: 36px;107    padding: 36px;108    font-size: 44px;109    line-height: 1.25;110    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);111    position: relative;112  }113  .speech:before {114    content: "";115    position: absolute;116    left: -28px;117    top: 40px;118    width: 0;119    height: 0;120    border-top: 18px solid transparent;121    border-bottom: 18px solid transparent;122    border-right: 28px solid #1A2224;123  }124  .speech:after {125    content: "";126    position: absolute;127    left: -34px;128    top: 36px;129    width: 0;130    height: 0;131    border-top: 22px solid transparent;132    border-bottom: 22px solid transparent;133    border-right: 34px solid #354247;134  }135 136  /* Choice cards */137  .card {138    position: absolute;139    left: 48px;140    right: 48px;141    background: #1A2224;142    border: 3px solid #334046;143    border-radius: 44px;144    display: flex;145    align-items: center;146    gap: 36px;147    padding: 40px 48px;148    box-sizing: border-box;149    color: #FFFFFF;150  }151  .card .img {152    width: 140px;153    height: 140px;154    background: #E0E0E0;155    border: 1px solid #BDBDBD;156    border-radius: 50%;157    display: flex;158    align-items: center;159    justify-content: center;160    color: #757575;161    font-weight: 700;162    font-size: 26px;163  }164  .card .texts {165    flex: 1;166  }167  .card .title {168    font-size: 46px;169    font-weight: 800;170    letter-spacing: 0.2px;171    margin-bottom: 12px;172  }173  .card .subtitle {174    font-size: 34px;175    color: #C9D0D3;176  }177  .card.one { top: 640px; }178  .card.two { top: 970px; }179 180  /* Bottom button */181  .bottom-cta {182    position: absolute;183    left: 36px;184    right: 36px;185    bottom: 180px;186    height: 120px;187    background: #2F3A40;188    border-radius: 44px;189    display: flex;190    align-items: center;191    justify-content: center;192    color: #8F9BA0;193    font-weight: 800;194    font-size: 40px;195    letter-spacing: 4px;196    text-transform: uppercase;197  }198 199  /* Home indicator */200  .home-indicator {201    position: absolute;202    bottom: 84px;203    left: 50%;204    transform: translateX(-50%);205    width: 300px;206    height: 18px;207    background: #E6E7EA;208    border-radius: 12px;209    opacity: 0.9;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status-bar">218    <div class="status-left">8:16</div>219    <div class="status-right">220      <div class="icon-dot">221        <svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#C9D0D3"/></svg>222      </div>223      <div class="icon-wifi">224        <svg width="40" height="28" viewBox="0 0 40 28">225          <path d="M5 10c9-8 21-8 30 0" stroke="#EAEAEA" stroke-width="3" fill="none" stroke-linecap="round"/>226          <path d="M10 16c6-5 14-5 20 0" stroke="#EAEAEA" stroke-width="3" fill="none" stroke-linecap="round"/>227          <circle cx="20" cy="22" r="3" fill="#EAEAEA"/>228        </svg>229      </div>230      <div class="icon-battery">231        <svg width="54" height="28" viewBox="0 0 54 28">232          <rect x="2" y="4" width="44" height="20" rx="4" stroke="#EAEAEA" stroke-width="3" fill="none"/>233          <rect x="6" y="8" width="30" height="12" rx="2" fill="#EAEAEA"/>234          <rect x="48" y="10" width="4" height="8" rx="2" fill="#EAEAEA"/>235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Top row with back and progress -->241  <div class="top-row">242    <div class="back-btn" aria-label="Back">243      <svg width="60" height="60" viewBox="0 0 60 60">244        <path d="M36 12 L20 30 L36 48" stroke="#B9C3C7" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245      </svg>246    </div>247    <div class="progress-track">248      <div class="progress-fill"></div>249    </div>250  </div>251 252  <!-- Intro row -->253  <div class="intro-row">254    <div class="avatar">[IMG: Duolingo Owl]</div>255    <div class="speech">Now let’s find the best place to start!</div>256  </div>257 258  <!-- Cards -->259  <div class="card one">260    <div class="img">[IMG: Book]</div>261    <div class="texts">262      <div class="title">Learning Japanese for the first time?</div>263      <div class="subtitle">Start from scratch!</div>264    </div>265  </div>266 267  <div class="card two">268    <div class="img">[IMG: Compass]</div>269    <div class="texts">270      <div class="title">Already know some Japanese?</div>271      <div class="subtitle">Answer some questions to find your level!</div>272    </div>273  </div>274 275  <!-- Bottom CTA -->276  <div class="bottom-cta">CONTINUE</div>277 278  <!-- Home indicator -->279  <div class="home-indicator"></div>280 281</div>282</body>283</html>