Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Language Tutor</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/css/styles.css"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- ============ ONBOARDING ============ --> | |
| <div id="onboarding" class="onboarding"> | |
| <div class="ob-container"> | |
| <header class="ob-header"> | |
| <div class="ob-logo"> | |
| <span class="ob-logo-icon"> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="8" fill="#6C63FF"/><path d="M9 22V10l7 4-7 4V22zm7-4l7-4v12l-7-4z" fill="#fff"/></svg> | |
| </span> | |
| <span>Language Tutor</span> | |
| </div> | |
| <p class="ob-subtitle">Learn any language with AI-powered personal teachers</p> | |
| </header> | |
| <!-- Progress Bar --> | |
| <div class="ob-progress"> | |
| <div class="ob-progress-bar" id="progressBar" style="width:20%"></div> | |
| </div> | |
| <div class="ob-step-labels"> | |
| <span class="ob-step-label active" data-step="1">Language</span> | |
| <span class="ob-step-label" data-step="2">I Know</span> | |
| <span class="ob-step-label" data-step="3">Level</span> | |
| <span class="ob-step-label" data-step="4">Teacher</span> | |
| <span class="ob-step-label" data-step="5">Topic</span> | |
| </div> | |
| <!-- Step 1: Target Language --> | |
| <section class="ob-step active" id="step1"> | |
| <h2 class="ob-title">What language do you want to learn?</h2> | |
| <div class="lang-grid" id="targetLangGrid"></div> | |
| </section> | |
| <!-- Step 2: Instruction Language --> | |
| <section class="ob-step" id="step2"> | |
| <h2 class="ob-title">What language do you already know?</h2> | |
| <p class="ob-desc">We'll explain everything in this language</p> | |
| <div class="lang-grid" id="instructionLangGrid"></div> | |
| </section> | |
| <!-- Step 3: Level --> | |
| <section class="ob-step" id="step3"> | |
| <h2 class="ob-title">What's your current level?</h2> | |
| <div class="level-grid" id="levelCards"></div> | |
| </section> | |
| <!-- Step 4: Teacher --> | |
| <section class="ob-step" id="step4"> | |
| <h2 class="ob-title">Choose your teacher</h2> | |
| <p class="ob-desc">Each teacher has a unique personality and teaching style</p> | |
| <div class="teacher-grid" id="teacherCards"></div> | |
| </section> | |
| <!-- Step 5: Topic --> | |
| <section class="ob-step" id="step5"> | |
| <h2 class="ob-title">Pick today's topic</h2> | |
| <div class="topic-grid" id="topicGrid"></div> | |
| <button class="btn-primary btn-start" id="btnStart" disabled> | |
| <span>Start Lesson</span> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3.75 9h10.5M9.75 4.5L14.25 9l-4.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| </button> | |
| </section> | |
| <!-- Back button for steps 2-5 --> | |
| <button class="btn-back" id="btnStepBack"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| Back | |
| </button> | |
| </div> | |
| </div> | |
| <!-- ============ LESSON ============ --> | |
| <div id="lesson" class="lesson hidden"> | |
| <!-- Header --> | |
| <header class="lesson-header" id="lessonHeader"> | |
| <div class="lh-left"> | |
| <button class="btn-icon" id="btnBack" title="End lesson"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14.25 9H3.75M8.25 4.5L3.75 9l4.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| </button> | |
| <div class="lh-info"> | |
| <span class="lh-lang" id="lessonLang"></span> | |
| <span class="lh-topic" id="lessonTopic"></span> | |
| </div> | |
| </div> | |
| <div class="lh-right"> | |
| <div class="xp-pill" id="xpBadge"> | |
| <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1l1.76 3.57L13 5.28l-3 2.92.71 4.13L7 10.35 3.29 12.33 4 8.2 1 5.28l4.24-.71L7 1z" fill="currentColor"/></svg> | |
| <span>0 XP</span> | |
| </div> | |
| <button class="btn-icon" id="btnMute" title="Toggle sound"> | |
| <svg id="iconSpeaker" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 3L5 6.5H2.5v5H5L9 15V3z" fill="currentColor"/><path d="M12.5 6.75s1.25.75 1.25 2.25-1.25 2.25-1.25 2.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M14.5 4.75s2 1.5 2 4.25-2 4.25-2 4.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| <svg id="iconMuted" class="hidden" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 3L5 6.5H2.5v5H5L9 15V3z" fill="currentColor"/><path d="M12.5 7l3.5 4M16 7l-3.5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Avatar --> | |
| <div class="avatar-strip" id="avatarArea"> | |
| <div class="avatar-box" id="avatarContainer"></div> | |
| <span class="avatar-label" id="avatarName"></span> | |
| </div> | |
| <!-- Chat --> | |
| <div class="chat-scroll" id="chatArea"> | |
| <div class="chat-inner" id="chatMessages"></div> | |
| </div> | |
| <!-- Input --> | |
| <div class="input-dock"> | |
| <div class="input-row"> | |
| <button class="btn-icon btn-mic" id="btnMic" title="Voice input"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="6" y="2" width="6" height="9" rx="3" fill="currentColor"/><path d="M4.5 8a4.5 4.5 0 009 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M9 14.5v1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| </button> | |
| <input type="text" id="inputMessage" placeholder="Type a message..." autocomplete="off" /> | |
| <button class="btn-icon btn-send" id="btnSend" title="Send"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M2.5 9l13-6.5-6.5 13V9H2.5z" fill="currentColor"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> | |