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 Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f191a;20    color: #eaf3ef;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 48px;28    right: 48px;29    height: 72px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #cfe0dc;34    font-weight: 600;35    font-size: 42px;36    letter-spacing: 1px;37  }38  .status-icons {39    display: flex;40    gap: 26px;41    align-items: center;42  }43  .icon-dot {44    width: 12px;45    height: 12px;46    background: #cfe0dc;47    border-radius: 50%;48    opacity: 0.7;49  }50 51  /* Top controls */52  .top-wrap {53    position: absolute;54    top: 136px;55    left: 48px;56    right: 48px;57    display: flex;58    align-items: center;59    gap: 24px;60  }61  .back-btn {62    width: 72px;63    height: 72px;64    display: flex;65    align-items: center;66    justify-content: center;67    opacity: 0.9;68  }69  .progress-track {70    flex: 1;71    height: 44px;72    background: #2f3a3d;73    border-radius: 22px;74    position: relative;75    overflow: hidden;76  }77  .progress-fill {78    position: absolute;79    left: 0;80    top: 0;81    height: 100%;82    width: 62%;83    background: linear-gradient(0deg, #8fdb3a, #98e23f);84    border-radius: 22px;85  }86 87  /* Hero area */88  .hero {89    position: absolute;90    top: 260px;91    left: 48px;92    right: 48px;93    display: flex;94    align-items: center;95    gap: 40px;96  }97  .mascot-img {98    width: 260px;99    height: 260px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    border-radius: 26px;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-weight: 600;108    text-align: center;109    padding: 10px;110  }111  .bubble {112    position: relative;113    padding: 30px 36px;114    border: 3px solid #3c4a49;115    border-radius: 28px;116    max-width: 640px;117    color: #eaf3ef;118    font-size: 44px;119    font-weight: 700;120    line-height: 1.2;121  }122  .bubble:after {123    content: "";124    position: absolute;125    left: -34px;126    top: 64px;127    width: 0; height: 0;128    border-top: 16px solid transparent;129    border-bottom: 16px solid transparent;130    border-right: 34px solid #3c4a49;131  }132  .bubble:before {133    content: "";134    position: absolute;135    left: -28px;136    top: 66px;137    width: 0; height: 0;138    border-top: 14px solid transparent;139    border-bottom: 14px solid transparent;140    border-right: 28px solid #0f191a;141    z-index: 1;142  }143 144  /* Feature list */145  .features {146    position: absolute;147    top: 600px;148    left: 48px;149    right: 48px;150    display: flex;151    flex-direction: column;152    gap: 80px;153  }154  .feature {155    display: flex;156    align-items: flex-start;157    gap: 30px;158  }159  .feat-icon {160    width: 104px;161    height: 104px;162    border-radius: 20px;163    display: grid;164    place-items: center;165    flex-shrink: 0;166  }167  .feat-text h3 {168    margin: 0;169    font-size: 56px;170    font-weight: 800;171    color: #eaf3ef;172    letter-spacing: 0.2px;173  }174  .feat-text p {175    margin: 16px 0 0 0;176    font-size: 40px;177    color: #a8b4b2;178    line-height: 1.45;179    max-width: 860px;180  }181 182  /* Bottom CTA */183  .cta {184    position: absolute;185    bottom: 180px;186    left: 48px;187    right: 48px;188  }189  .cta button {190    width: 100%;191    height: 140px;192    background: #9EE63F;193    border: none;194    border-radius: 36px;195    color: #0e1a1a;196    font-size: 54px;197    font-weight: 900;198    letter-spacing: 2px;199    box-shadow: -10px 14px 0 #76b832;200    cursor: pointer;201  }202 203  .gesture-bar {204    position: absolute;205    bottom: 72px;206    left: 50%;207    transform: translateX(-50%);208    width: 300px;209    height: 12px;210    background: #e8e8e8;211    border-radius: 6px;212    opacity: 0.8;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="status-bar">221    <div>8:14</div>222    <div class="status-icons">223      <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfe0dc" aria-hidden="true">224        <path d="M12 3l9 9h-4v9H7v-9H3l9-9z"></path>225      </svg>226      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#cfe0dc" stroke-width="2" aria-hidden="true">227        <rect x="5" y="3" width="14" height="18" rx="2"></rect>228        <rect x="8" y="6" width="8" height="12" rx="1" fill="#cfe0dc"></rect>229      </svg>230    </div>231  </div>232 233  <!-- Top controls -->234  <div class="top-wrap">235    <div class="back-btn">236      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#cfe0dc" stroke-width="2.4">237        <path d="M15 5l-7 7 7 7"></path>238      </svg>239    </div>240    <div class="progress-track">241      <div class="progress-fill"></div>242    </div>243  </div>244 245  <!-- Hero -->246  <div class="hero">247    <div class="mascot-img">[IMG: Duolingo mascot]</div>248    <div class="bubble">Here’s what you can achieve!</div>249  </div>250 251  <!-- Features -->252  <div class="features">253    <div class="feature">254      <div class="feat-icon" style="background:#7f69ff30; border:2px solid #7e6aff;">255        <svg width="68" height="68" viewBox="0 0 24 24" fill="#b7a9ff">256          <path d="M4 4h10v8H6l-2 2V4z"></path>257          <path d="M14 8h6v8h-6l-2 2v-6h2V8z"></path>258        </svg>259      </div>260      <div class="feat-text">261        <h3>Converse with confidence</h3>262        <p>10,900+ stress-free interactive exercises</p>263      </div>264    </div>265 266    <div class="feature">267      <div class="feat-icon" style="background:#59a6ff30; border:2px solid #59a6ff;">268        <svg width="68" height="68" viewBox="0 0 24 24" fill="#9fd0ff">269          <path d="M12 3l7 18h-3l-1.5-4H9.5L8 21H5l7-18zM10.6 13h2.8L12 8.6 10.6 13z"></path>270        </svg>271      </div>272      <div class="feat-text">273        <h3>Build a large vocabulary</h3>274        <p>5,000+ practical words and phrases</p>275      </div>276    </div>277 278    <div class="feature">279      <div class="feat-icon" style="background:#ffb84a30; border:2px solid #ffb84a;">280        <svg width="68" height="68" viewBox="0 0 24 24" fill="#ffd27f">281          <circle cx="12" cy="12" r="8"></circle>282          <rect x="11" y="5" width="2" height="3" fill="#ffb84a"></rect>283          <rect x="11" y="12" width="2" height="5" fill="#ffb84a"></rect>284        </svg>285      </div>286      <div class="feat-text">287        <h3>Develop a learning habit</h3>288        <p>Smart reminders, fun challenges, and more</p>289      </div>290    </div>291  </div>292 293  <!-- CTA -->294  <div class="cta">295    <button>CONTINUE</button>296  </div>297 298  <!-- Gesture bar -->299  <div class="gesture-bar"></div>300</div>301</body>302</html>