GD-ML/AndroidCode
13.4k
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 Learning UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: "Arial", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;16 color: #2D2D2D;17 }18 19 .safe-area { padding: 40px 48px 24px; }20 21 /* Top header */22 .top-row {23 display: flex;24 align-items: center;25 justify-content: space-between;26 margin-top: 10px;27 }28 .left-flag {29 display: flex;30 align-items: center;31 gap: 18px;32 }33 .flag-img {34 width: 78px; height: 78px;35 background: #E0E0E0; border: 1px solid #BDBDBD;36 border-radius: 50%;37 display: flex; align-items: center; justify-content: center;38 color: #757575; font-size: 20px;39 }40 .chev-down {41 width: 28px; height: 28px;42 }43 .right-actions { display: flex; align-items: center; gap: 22px; }44 .action-btn {45 width: 76px; height: 76px; border-radius: 18px;46 border: 2px solid #3F63FF; color: #3F63FF;47 display: flex; align-items: center; justify-content: center;48 background: #FFFFFF;49 position: relative;50 }51 .badge {52 position: absolute; top: -6px; right: -6px;53 background: #FF4D4F; color: #fff; font-weight: 700;54 font-size: 28px; line-height: 28px;55 border-radius: 20px; padding: 4px 12px;56 border: 3px solid #FFFFFF;57 }58 59 /* Title & progress */60 .title-row {61 display: flex; align-items: center; gap: 14px;62 margin-top: 24px;63 }64 .level-title {65 font-weight: 800; font-size: 58px; letter-spacing: -0.5px;66 }67 .progress-area { margin-top: 22px; }68 .progress-pill {69 display: inline-block;70 background: #23C16B; color: #fff;71 font-size: 30px; font-weight: 700;72 padding: 8px 20px; border-radius: 24px;73 margin-bottom: 14px;74 }75 .progress-bar {76 width: 960px; height: 24px; background: #EDEFF3;77 border-radius: 14px; overflow: hidden;78 }79 .progress-fill {80 width: 96px; height: 100%; background: #23C16B;81 }82 83 /* Promo banner */84 .promo {85 margin-top: 30px;86 width: 960px; height: 128px;87 background: #5A39F2; border-radius: 24px;88 display: flex; align-items: center; justify-content: space-between;89 padding: 0 28px 0 32px; color: #FFFFFF;90 }91 .promo-left { display: flex; align-items: center; gap: 22px; }92 .promo-text { font-size: 38px; font-weight: 700; }93 .promo-arrow svg { transform: rotate(-90deg); }94 95 /* Chapter header */96 .chapter { margin-top: 34px; }97 .chapter h2 { margin: 0; font-size: 64px; font-weight: 800; }98 .chapter p { margin: 10px 0 0; font-size: 30px; color: #6C6C6C; }99 100 /* Timeline */101 .timeline { margin-top: 36px; position: relative; }102 .connector {103 width: 8px; margin-left: 90px;104 border-radius: 4px;105 }106 .connector.green { background: #23C16B; height: 80px; }107 .connector.grey { background: #E6E8EE; height: 100px; }108 109 .lesson {110 display: flex; align-items: center;111 gap: 26px; margin: 14px 0;112 }113 .avatar-wrap {114 width: 108px; height: 108px; border-radius: 50%;115 display: grid; place-items: center; position: relative;116 }117 .avatar-ring.green { box-shadow: 0 0 0 8px #23C16B inset, 0 0 0 2px #23C16B; border-radius: 50%; }118 .avatar-ring.grey { box-shadow: 0 0 0 8px #DADDE5 inset, 0 0 0 2px #DADDE5; border-radius: 50%; }119 120 .avatar-img {121 width: 88px; height: 88px;122 background: #E0E0E0; border: 1px solid #BDBDBD;123 border-radius: 50%; display: flex; align-items: center; justify-content: center;124 color: #757575; font-size: 18px; text-align: center; padding: 8px;125 }126 .check-badge {127 position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);128 width: 42px; height: 42px; background: #23C16B; border-radius: 50%;129 display: flex; align-items: center; justify-content: center;130 border: 4px solid #FFFFFF;131 }132 133 .lesson-title {134 font-size: 40px; font-weight: 700;135 }136 .lesson-title.grey { color: #B7BDC9; font-weight: 800; }137 .cloud {138 margin-left: auto;139 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;140 }141 .lock-circle {142 width: 40px; height: 40px; border-radius: 50%;143 background: #FFFFFF; border: 2px solid #C8CDD8;144 display: flex; align-items: center; justify-content: center;145 position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);146 }147 148 /* Highlighted card lesson */149 .lesson-card {150 width: 960px; height: 160px; border-radius: 30px;151 background: #EEF5FF;152 display: flex; align-items: center;153 padding: 18px 24px;154 margin-left: 0;155 }156 .lesson-card .avatar-wrap { margin-left: 8px; }157 .lesson-card .lesson-title { font-size: 42px; font-weight: 700; }158 .lesson-card .cloud { margin-left: auto; }159 160 /* Bottom navigation */161 .bottom-nav {162 position: absolute; left: 0; right: 0; bottom: 90px;163 height: 140px; background: #FFFFFF;164 display: flex; align-items: center; justify-content: space-around;165 border-top: 1px solid #EFF1F6;166 padding: 0 28px;167 }168 .nav-item {169 display: flex; flex-direction: column; align-items: center; gap: 12px;170 color: #9CA3AF; font-size: 28px; font-weight: 700;171 }172 .nav-item.active { color: #3F63FF; }173 .nav-icon { width: 58px; height: 58px; }174 175 .gesture-pill {176 position: absolute; left: 50%; transform: translateX(-50%);177 bottom: 22px; width: 300px; height: 16px; border-radius: 16px;178 background: #CFCFCF;179 }180</style>181</head>182<body>183<div id="render-target">184 <div class="safe-area">185 <!-- Header -->186 <div class="top-row">187 <div class="left-flag">188 <div class="flag-img">[IMG: Brazil Flag]</div>189 <svg class="chev-down" viewBox="0 0 24 24">190 <path d="M5 9l7 7 7-7" fill="none" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 <div class="right-actions">194 <div class="action-btn" aria-label="Messages">195 <svg width="40" height="40" viewBox="0 0 24 24">196 <path d="M3 5h18v11H8l-5 5V5z" fill="none" stroke="#3F63FF" stroke-width="2" stroke-linejoin="round"/>197 </svg>198 </div>199 <div class="action-btn" aria-label="Calendar">200 <svg width="40" height="40" viewBox="0 0 24 24">201 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#3F63FF" stroke-width="2"/>202 <path d="M3 9h18M8 3v4M16 3v4M7 12h3M12 12h3M17 12h3M7 15h3" stroke="#3F63FF" stroke-width="2"/>203 </svg>204 </div>205 <div class="action-btn" aria-label="Notifications">206 <svg width="40" height="40" viewBox="0 0 24 24">207 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm7-6V11a7 7 0 1 0-14 0v5l-2 2h18l-2-2z" fill="none" stroke="#3F63FF" stroke-width="2" stroke-linejoin="round"/>208 </svg>209 <div class="badge">5</div>210 </div>211 </div>212 </div>213 214 <!-- Title and progress -->215 <div class="title-row">216 <div class="level-title">Beginner A1</div>217 <svg class="chev-down" viewBox="0 0 24 24">218 <path d="M5 9l7 7 7-7" fill="none" stroke="#6C6C6C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 <div class="progress-area">222 <span class="progress-pill">1%</span>223 <div class="progress-bar"><div class="progress-fill"></div></div>224 </div>225 226 <!-- Promo -->227 <div class="promo">228 <div class="promo-left">229 <svg width="44" height="44" viewBox="0 0 24 24">230 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>231 </svg>232 <div class="promo-text">30% off Premium</div>233 </div>234 <div class="promo-arrow">235 <svg width="28" height="28" viewBox="0 0 24 24">236 <path d="M9 18l6-6-6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 </div>239 </div>240 241 <!-- Chapter -->242 <div class="chapter">243 <h2>Chapter 1</h2>244 <p>1/6 lessons completed</p>245 </div>246 247 <!-- Timeline lessons -->248 <div class="timeline">249 250 <!-- Lesson 1 Completed -->251 <div class="lesson">252 <div class="avatar-wrap avatar-ring green">253 <div class="avatar-img">[IMG: Lesson Photo]</div>254 <div class="check-badge">255 <svg width="26" height="26" viewBox="0 0 24 24">256 <path d="M5 13l4 4L19 7" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 </div>260 <div class="lesson-title">Olá!</div>261 <div class="cloud">262 <svg width="44" height="44" viewBox="0 0 24 24">263 <path d="M7 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9.7 1" fill="none" stroke="#9BB4FF" stroke-width="2"/>264 <path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" fill="none" stroke="#9BB4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>265 </svg>266 </div>267 </div>268 269 <div class="connector green"></div>270 271 <!-- Lesson 2 Card -->272 <div class="lesson lesson-card">273 <div class="avatar-wrap avatar-ring grey">274 <div class="avatar-img">[IMG: Lesson Photo]</div>275 </div>276 <div class="lesson-title">Saying your name</div>277 <div class="cloud">278 <svg width="44" height="44" viewBox="0 0 24 24">279 <path d="M7 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9.7 1" fill="none" stroke="#9BB4FF" stroke-width="2"/>280 <path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" fill="none" stroke="#9BB4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>281 </svg>282 </div>283 </div>284 285 <div class="connector grey"></div>286 287 <!-- Lesson 3 Locked -->288 <div class="lesson">289 <div class="avatar-wrap avatar-ring grey" style="position: relative;">290 <div class="avatar-img">[IMG: Scenic Photo]</div>291 <div class="lock-circle">292 <svg width="20" height="20" viewBox="0 0 24 24">293 <path d="M7 11h10v8H7zM9 11V8a3 3 0 0 1 6 0v3" fill="none" stroke="#99A1B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>294 </svg>295 </div>296 </div>297 <div class="lesson-title grey">Asking how someone's doing</div>298 <div class="cloud">299 <svg width="44" height="44" viewBox="0 0 24 24">300 <path d="M7 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9.7 1" fill="none" stroke="#D1D7E6" stroke-width="2"/>301 <path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" fill="none" stroke="#D1D7E6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>302 </svg>303 </div>304 </div>305 306 <div class="connector grey"></div>307 308 <!-- Lesson 4 Upcoming -->309 <div class="lesson">310 <div class="avatar-wrap avatar-ring grey">311 <div class="avatar-img">[IMG: Lesson Photo]</div>312 </div>313 <div class="lesson-title grey">Practise your first words<br>in Portuguese</div>314 <div class="cloud">315 <svg width="44" height="44" viewBox="0 0 24 24">316 <path d="M7 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9.7 1" fill="none" stroke="#D1D7E6" stroke-width="2"/>317 <path d="M12 13v5M9.5 15.5L12 13l2.5 2.5" fill="none" stroke="#D1D7E6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>318 </svg>319 </div>320 </div>321 322 </div>323 </div>324 325 <!-- Bottom navigation -->326 <div class="bottom-nav">327 <div class="nav-item active">328 <svg class="nav-icon" viewBox="0 0 24 24">329 <path d="M4 5h16v14H4zM8 5v14" fill="none" stroke="#3F63FF" stroke-width="2"/>330 </svg>331 <div>Learn</div>332 </div>333 <div class="nav-item">334 <svg class="nav-icon" viewBox="0 0 24 24">335 <path d="M5 17h3V7H5zm6 10V7h3v20zm6-6V7h3v14z" transform="translate(-2,-6)" fill="#9CA3AF"/>336 </svg>337 <div>Stats</div>338 </div>339 <div class="nav-item">340 <svg class="nav-icon" viewBox="0 0 24 24">341 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linejoin="round"/>342 </svg>343 <div>Premium</div>344 </div>345 <div class="nav-item">346 <svg class="nav-icon" viewBox="0 0 24 24">347 <path d="M3 5h18v11H8l-5 5V5z" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linejoin="round"/>348 </svg>349 <div>Chat</div>350 </div>351 <div class="nav-item">352 <svg class="nav-icon" viewBox="0 0 24 24">353 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 10c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"/>354 </svg>355 <div>Profile</div>356 </div>357 </div>358 359 <!-- System gesture pill -->360 <div class="gesture-pill"></div>361</div>362</body>363</html>