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>Learning Reasons UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121c1f; /* dark teal/black */15    color: #e9f4f6;16  }17 18  /* Status bar (simulated) */19  .status-bar {20    position: absolute;21    top: 24px;22    left: 40px;23    right: 40px;24    height: 72px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #eaf2f3;29    font-weight: 600;30    letter-spacing: 1px;31    opacity: 0.9;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .status-dot {39    width: 10px;40    height: 10px;41    background: #eaf2f3;42    border-radius: 50%;43    opacity: 0.8;44  }45  .wifi {46    width: 30px; height: 22px;47  }48  .battery {49    width: 26px; height: 28px;50  }51  .wifi path, .battery path { fill: #eaf2f3; }52 53  /* Top nav with back arrow and progress */54  .top-bar {55    position: absolute;56    top: 140px;57    left: 40px;58    right: 40px;59    height: 80px;60    display: flex;61    align-items: center;62    gap: 28px;63  }64  .back-btn {65    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;66  }67  .back-btn svg path { stroke: #a7b9be; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }68  .progress-track {69    flex: 1;70    height: 40px;71    background: #3a474d;72    border-radius: 20px;73    position: relative;74    overflow: hidden;75  }76  .progress-fill {77    position: absolute;78    left: 0; top: 0; bottom: 0;79    width: 60%;80    background: #96e85a;81    border-radius: 20px;82  }83 84  /* Conversation header */85  .prompt {86    position: absolute;87    top: 270px;88    left: 60px;89    right: 60px;90    display: flex;91    align-items: flex-start;92    gap: 28px;93  }94  .mascot {95    width: 220px;96    height: 220px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 32px;100    display: flex;101    justify-content: center;102    align-items: center;103    color: #757575;104    font-weight: 700;105    text-align: center;106    padding: 10px;107  }108  .speech {109    flex: 1;110    background: #162327;111    border: 3px solid #2b3a40;112    color: #dfe9ea;113    border-radius: 36px;114    padding: 36px;115    font-size: 48px;116    line-height: 1.3;117  }118 119  /* Options list */120  .options {121    position: absolute;122    top: 560px;123    left: 40px;124    right: 40px;125  }126  .option {127    display: flex;128    align-items: center;129    justify-content: space-between;130    background: #18262a;131    border: 3px solid #2b3c41;132    border-radius: 44px;133    padding: 34px 40px;134    margin-bottom: 34px;135    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);136  }137  .option-content {138    display: flex;139    align-items: center;140    gap: 28px;141  }142  .opt-icon {143    width: 110px;144    height: 110px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    border-radius: 22px;148    display: flex;149    justify-content: center;150    align-items: center;151    color: #757575;152    font-weight: 700;153    font-size: 24px;154    text-align: center;155    padding: 8px;156  }157  .opt-label {158    font-size: 52px;159    font-weight: 800;160    color: #e6f2f5;161    letter-spacing: 0.2px;162  }163  .opt-check {164    width: 86px;165    height: 86px;166    border: 3px solid #3a4a50;167    border-radius: 20px;168    opacity: 0.9;169  }170 171  .option.selected {172    border-color: #5aa8d9;173    box-shadow: 0 0 0 4px rgba(88,160,219,0.15);174    background: #1a2f35;175  }176  .option.selected .opt-label { color: #69b6f1; }177  .option.selected .opt-check {178    border: none;179    background: #5aa8d9;180    border-radius: 24px;181    display: flex;182    justify-content: center;183    align-items: center;184  }185  .option.selected .opt-check svg { width: 46px; height: 46px; }186  .option.selected .opt-check svg path { fill: none; stroke: #ffffff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }187 188  /* Bottom button */189  .footer {190    position: absolute;191    left: 40px;192    right: 40px;193    bottom: 220px;194    display: flex;195    justify-content: center;196  }197  .continue-btn {198    width: 100%;199    height: 150px;200    border-radius: 36px;201    background: #9be35a;202    color: #0b1517;203    font-size: 54px;204    font-weight: 900;205    letter-spacing: 3px;206    display: flex;207    justify-content: center;208    align-items: center;209    box-shadow: 0 12px 0 rgba(0,0,0,0.25);210  }211 212  /* Home indicator (simulated) */213  .home-indicator {214    position: absolute;215    bottom: 120px;216    left: 50%;217    transform: translateX(-50%);218    width: 300px;219    height: 16px;220    background: #cfd8dc;221    opacity: 0.6;222    border-radius: 10px;223  }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Simulated status bar -->230  <div class="status-bar">231    <div>8:13</div>232    <div class="status-icons">233      <span style="font-size: 26px; opacity: 0.85;">Calm</span>234      <div class="status-dot"></div>235      <svg class="wifi" viewBox="0 0 24 24">236        <path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c2-1 4-1 6 0M12 20a2 2 0 1 0 0.001 0Z"/>237      </svg>238      <svg class="battery" viewBox="0 0 24 24">239        <path d="M2 7h16v10H2zM20 10v4" />240      </svg>241    </div>242  </div>243 244  <!-- Back and progress -->245  <div class="top-bar">246    <div class="back-btn">247      <svg viewBox="0 0 64 64">248        <path d="M42 12 L22 32 L42 52" />249      </svg>250    </div>251    <div class="progress-track">252      <div class="progress-fill"></div>253    </div>254  </div>255 256  <!-- Prompt area -->257  <div class="prompt">258    <div class="mascot">[IMG: Duolingo mascot]</div>259    <div class="speech">Why are you learning Japanese?</div>260  </div>261 262  <!-- Option list -->263  <div class="options">264    <div class="option">265      <div class="option-content">266        <div class="opt-icon">[ICON: Briefcase]</div>267        <div class="opt-label">Boost my career</div>268      </div>269      <div class="opt-check"></div>270    </div>271 272    <div class="option selected">273      <div class="option-content">274        <div class="opt-icon">[ICON: Airplane]</div>275        <div class="opt-label">Prepare for travel</div>276      </div>277      <div class="opt-check">278        <svg viewBox="0 0 48 48">279          <path d="M10 26 L20 36 L38 14" />280        </svg>281      </div>282    </div>283 284    <div class="option">285      <div class="option-content">286        <div class="opt-icon">[ICON: Book]</div>287        <div class="opt-label">Support my education</div>288      </div>289      <div class="opt-check"></div>290    </div>291 292    <div class="option">293      <div class="option-content">294        <div class="opt-icon">[ICON: Confetti]</div>295        <div class="opt-label">Just for fun</div>296      </div>297      <div class="opt-check"></div>298    </div>299 300    <div class="option">301      <div class="option-content">302        <div class="opt-icon">[ICON: People]</div>303        <div class="opt-label">Connect with people</div>304      </div>305      <div class="opt-check"></div>306    </div>307 308    <div class="option">309      <div class="option-content">310        <div class="opt-icon">[ICON: Brain]</div>311        <div class="opt-label">Spend time productively</div>312      </div>313      <div class="opt-check"></div>314    </div>315 316    <div class="option">317      <div class="option-content">318        <div class="opt-icon">[ICON: Dots]</div>319        <div class="opt-label">Other</div>320      </div>321      <div class="opt-check"></div>322    </div>323  </div>324 325  <!-- Footer action -->326  <div class="footer">327    <div class="continue-btn">CONTINUE</div>328  </div>329 330  <div class="home-indicator"></div>331</div>332</body>333</html>