Echo Light initial Docker Space

.dockerignore

@@ -0,0 +1,20 @@
+# .dockerignore
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.env
+.venv/
+build/
+dist/
+node_modules/
+.DS_Store
+*.db
+*.sqlite3
+selenium/
+chromedriver*
+*.log
+*.swp
+.idea/
+.vscode/
+.git/

.env

@@ -0,0 +1 @@
+NVIDIA_API_KEY=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

Dockerfile

@@ -0,0 +1,25 @@
+# Use an official Python runtime as a parent image
+FROM python:3.11-slim
+
+# Create and switch to a new user
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Set work directory
+WORKDIR /app
+
+# Copy requirements
+COPY --chown=user ./requirements.txt requirements.txt
+
+# Install Python dependencies
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy application code
+COPY --chown=user . /app
+
+# Expose port for Flask
+EXPOSE 7860
+
+# Start the application
+CMD ["python", "ai_server.py"]

ai_server.py

@@ -0,0 +1,38 @@
+import os
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import openai
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY") or os.getenv("NVIDIA_API_KEY")
+openai.api_key = OPENAI_API_KEY
+
+@app.route("/chat", methods=["POST"])
+def chat():
+    data = request.get_json(force=True)
+    user_message = data.get("message", "")
+    if not user_message:
+        return jsonify({"reply": "Please say something!"})
+    try:
+        # Compatible with openai>=1.0.0
+        response = openai.chat.completions.create(
+            model="gpt-3.5-turbo",  # or your NVIDIA LLM if available
+            messages=[{"role": "user", "content": user_message}]
+        )
+        reply = response.choices[0].message.content
+        return jsonify({"reply": reply})
+    except Exception as e:
+        return jsonify({"reply": f"AI error: {str(e)}"})
+
+@app.route("/")
+def root():
+    return {"Hello": "World!", "status": "Echo Light API is running"}
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port)

app.js

@@ -0,0 +1,1373 @@
+// Application Data
+const appData = {
+    modes: [
+        {
+            id: "conversation",
+            name: "المحادثة الحرة",
+            icon: "💬",
+            description: "دردشة مفتوحة مع Echo Light لممارسة المهارات اللغوية"
+        },
+        {
+            id: "vocabulary",
+            name: "بناء المفردات",
+            icon: "📚",
+            description: "نظام بطاقات تعليمية ذكي مع تكرار مباعد"
+        },
+        {
+            id: "pronunciation",
+            name: "تدريب النطق",
+            icon: "🎤",
+            description: "تقييم النطق الفوري مع تعليقات مفصلة"
+        },
+        {
+            id: "grammar",
+            name: "ألعاب القواعد",
+            icon: "🎯",
+            description: "تمارين تفاعلية لتعلم القواعد بطريقة ممتعة"
+        },
+        {
+            id: "scenarios",
+            name: "سيناريوهات واقعية",
+            icon: "🌍",
+            description: "محاكاة مواقف حياتية مثل المطاعم والمقابلات"
+        },
+        {
+            id: "daily",
+            name: "التحدي اليومي",
+            icon: "⭐",
+            description: "تمارين يومية قصيرة للحفاظ على استمرارية التعلم"
+        }
+    ],
+    achievements: [
+        {
+            id: "first_conversation",
+            name: "المحادثة الأولى",
+            description: "أكمل أول محادثة مع Echo Light",
+            icon: "🎉"
+        },
+        {
+            id: "vocabulary_master",
+            name: "خبير المفردات",
+            description: "تعلم 50 كلمة جديدة",
+            icon: "🏆"
+        },
+        {
+            id: "pronunciation_expert",
+            name: "خبير النطق",
+            description: "احصل على تقييم ممتاز في النطق 10 مرات",
+            icon: "🎯"
+        },
+        {
+            id: "grammar_guru",
+            name: "معلم القواعد",
+            description: "أكمل جميع تمارين القواعد بنجاح",
+            icon: "📖"
+        },
+        {
+            id: "daily_streak",
+            name: "المواظبة",
+            description: "أكمل التحدي اليومي لمدة 7 أيام متتالية",
+            icon: "🔥"
+        }
+    ],
+    vocabulary_cards: [
+        {
+            word: "Hello",
+            translation: "مرحبا",
+            pronunciation: "/həˈloʊ/",
+            example: "Hello, how are you?"
+        },
+        {
+            word: "Thank you",
+            translation: "شكراً لك",
+            pronunciation: "/θæŋk juː/",
+            example: "Thank you for your help."
+        },
+        {
+            word: "Beautiful",
+            translation: "جميل",
+            pronunciation: "/ˈbjuːtɪfəl/",
+            example: "The sunset is beautiful."
+        },
+        {
+            word: "Important",
+            translation: "مهم",
+            pronunciation: "/ɪmˈpɔːrtənt/",
+            example: "This is very important."
+        },
+        {
+            word: "Learning",
+            translation: "تعلم",
+            pronunciation: "/ˈlɜːrnɪŋ/",
+            example: "Learning English is fun."
+        }
+    ],
+    grammar_exercises: [
+        {
+            question: "Choose the correct form: I ___ to school every day.",
+            options: ["go", "goes", "going", "went"],
+            correct: 0,
+            explanation: "نستخدم 'go' مع الضمير 'I' في المضارع البسيط"
+        },
+        {
+            question: "Complete: She ___ reading a book now.",
+            options: ["is", "are", "was", "were"],
+            correct: 0,
+            explanation: "نستخدم 'is' مع الضمير 'She' في المضارع المستمر"
+        }
+    ],
+    scenarios: [
+        {
+            title: "في المطعم",
+            description: "تعلم كيفية طلب الطعام في المطعم",
+            dialogue: [
+                {
+                    speaker: "waiter",
+                    text: "Good evening! Welcome to our restaurant. How can I help you?"
+                },
+                {
+                    speaker: "customer",
+                    text: "Good evening! I'd like to see the menu, please."
+                }
+            ]
+        },
+        {
+            title: "مقابلة عمل",
+            description: "تدرب على أسئلة مقابلة العمل الشائعة",
+            dialogue: [
+                {
+                    speaker: "interviewer",
+                    text: "Tell me about yourself."
+                },
+                {
+                    speaker: "candidate",
+                    text: "I'm a motivated professional with experience in..."
+                }
+            ]
+        }
+    ],
+    echoResponses: [
+        "That's wonderful! Your English is getting better every day.",
+        "Great job! Can you tell me more about that topic?",
+        "Excellent! I love how you expressed that idea.",
+        "Perfect! Let's try using some advanced vocabulary now.",
+        "Amazing progress! What would you like to talk about next?",
+        "Fantastic! Your grammar is really improving.",
+        "Well done! That was a complete and clear sentence.",
+        "Impressive! You're becoming more confident in English.",
+        "Brilliant! Let's explore this topic further.",
+        "Outstanding! Keep up the great work!"
+    ]
+};
+
+// Application State
+const appState = {
+    currentScreen: 'homeScreen',
+    userProgress: {
+        streak: 5,
+        totalPoints: 125,
+        wordsLearned: 12,
+        conversationsCompleted: 3,
+        pronunciationAccuracy: 78,
+        grammarScore: 85,
+        unlockedAchievements: ['first_conversation']
+    },
+    currentVocabIndex: 0,
+    currentGrammarIndex: 0,
+    currentScenario: null,
+    isRecording: false,
+    soundEnabled: true,
+    dailyProgress: 1,
+    selectedChallengeWords: [],
+    recordingTimer: null
+};
+
+// Character Animation Controller
+class CharacterController {
+    constructor() {
+        this.character = document.getElementById('echoCharacter');
+        this.mouth = document.getElementById('characterMouth');
+        this.soundWaves = document.getElementById('soundWaves');
+        this.isAnimating = false;
+        this.mouthStates = ['happy', 'speaking', 'surprised', 'neutral'];
+        this.currentMoodIndex = 0;
+        
+        this.startIdleAnimation();
+    }
+
+    startIdleAnimation() {
+        // Eye blinking animation
+        setInterval(() => {
+            this.blink();
+        }, 3000 + Math.random() * 2000);
+
+        // Mood changes
+        setInterval(() => {
+            this.changeMood();
+        }, 10000);
+    }
+
+    blink() {
+        const eyes = document.querySelectorAll('.eye');
+        eyes.forEach(eye => {
+            eye.style.transform = 'scaleY(0.1)';
+            setTimeout(() => {
+                eye.style.transform = 'scaleY(1)';
+            }, 150);
+        });
+    }
+
+    changeMood() {
+        if (this.isAnimating) return;
+        
+        const moods = ['happy', 'excited', 'thinking', 'encouraging'];
+        const randomMood = moods[Math.floor(Math.random() * moods.length)];
+        this.setMood(randomMood);
+    }
+
+    setMood(mood) {
+        const character = this.character;
+        const mouth = this.mouth;
+        
+        // Remove existing mood classes
+        character.classList.remove('happy', 'excited', 'thinking', 'encouraging');
+        character.classList.add(mood);
+
+        switch(mood) {
+            case 'happy':
+                mouth.style.borderRadius = '0 0 40px 40px';
+                mouth.style.width = '40px';
+                mouth.style.background = '#ff6b9d';
+                break;
+            case 'excited':
+                mouth.style.borderRadius = '50%';
+                mouth.style.width = '30px';
+                mouth.style.background = '#32b8c6';
+                break;
+            case 'thinking':
+                mouth.style.borderRadius = '40px 40px 0 0';
+                mouth.style.width = '20px';
+                mouth.style.background = '#8a2be2';
+                break;
+            case 'encouraging':
+                mouth.style.borderRadius = '0 0 50px 50px';
+                mouth.style.width = '50px';
+                mouth.style.background = '#ff6b9d';
+                break;
+        }
+    }
+
+    speak(text) {
+        this.isAnimating = true;
+        this.setMood('happy');
+        
+        // Animate sound waves
+        if (this.soundWaves) {
+            this.soundWaves.style.display = 'block';
+        }
+        
+        // Simulate mouth movement
+        let speakingInterval = setInterval(() => {
+            const randomWidth = 20 + Math.random() * 30;
+            if (this.mouth) {
+                this.mouth.style.width = randomWidth + 'px';
+            }
+        }, 150);
+
+        // Use Web Speech API if available and enabled
+        if ('speechSynthesis' in window && appState.soundEnabled) {
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang = 'en-US';
+            utterance.rate = 0.9;
+            utterance.pitch = 1.1;
+            
+            utterance.onend = () => {
+                clearInterval(speakingInterval);
+                this.stopSpeaking();
+            };
+            
+            utterance.onerror = () => {
+                clearInterval(speakingInterval);
+                this.stopSpeaking();
+            };
+            
+            speechSynthesis.speak(utterance);
+        } else {
+            // Fallback animation
+            setTimeout(() => {
+                clearInterval(speakingInterval);
+                this.stopSpeaking();
+            }, Math.min(text.length * 50, 3000));
+        }
+    }
+
+    stopSpeaking() {
+        this.isAnimating = false;
+        if (this.soundWaves) {
+            this.soundWaves.style.display = 'none';
+        }
+        if (this.mouth) {
+            this.mouth.style.width = '40px';
+        }
+        this.setMood('happy');
+    }
+
+    celebrate() {
+        this.setMood('excited');
+        if (this.character) {
+            this.character.style.animation = 'float 0.5s ease-in-out 3';
+            
+            setTimeout(() => {
+                this.character.style.animation = 'float 3s ease-in-out infinite';
+                this.setMood('happy');
+            }, 1500);
+        }
+    }
+
+    encourage() {
+        this.setMood('encouraging');
+        setTimeout(() => {
+            this.setMood('happy');
+        }, 2000);
+    }
+}
+
+// Initialize character controller
+let characterController;
+
+// Screen Management
+function showScreen(screenId) {
+    // Hide all screens
+    document.querySelectorAll('.screen').forEach(screen => {
+        screen.classList.remove('active');
+    });
+    
+    // Show target screen
+    const targetScreen = document.getElementById(screenId);
+    if (targetScreen) {
+        targetScreen.classList.add('active');
+        appState.currentScreen = screenId;
+        
+        // Update character mood based on screen
+        if (characterController) {
+            switch(screenId) {
+                case 'homeScreen':
+                    characterController.setMood('happy');
+                    break;
+                case 'conversationScreen':
+                    characterController.setMood('encouraging');
+                    break;
+                case 'vocabularyScreen':
+                case 'grammarScreen':
+                    characterController.setMood('thinking');
+                    break;
+                case 'pronunciationScreen':
+                    characterController.setMood('excited');
+                    break;
+                case 'progressScreen':
+                    initializeAchievements();
+                    break;
+            }
+        }
+    }
+}
+
+// Mode Management
+function initializeModes() {
+    const modesGrid = document.getElementById('modesGrid');
+    if (!modesGrid) return;
+    
+    modesGrid.innerHTML = '';
+    
+    appData.modes.forEach(mode => {
+        const modeCard = document.createElement('div');
+        modeCard.className = 'mode-card';
+        modeCard.onclick = () => openMode(mode.id);
+        
+        modeCard.innerHTML = `
+            <span class="mode-icon">${mode.icon}</span>
+            <h3 class="mode-title">${mode.name}</h3>
+            <p class="mode-description">${mode.description}</p>
+        `;
+        
+        modesGrid.appendChild(modeCard);
+    });
+}
+
+function openMode(modeId) {
+    const screenMap = {
+        'conversation': 'conversationScreen',
+        'vocabulary': 'vocabularyScreen',
+        'pronunciation': 'pronunciationScreen',
+        'grammar': 'grammarScreen',
+        'scenarios': 'scenariosScreen',
+        'daily': 'dailyScreen'
+    };
+    
+    const screenId = screenMap[modeId];
+    if (screenId) {
+        showScreen(screenId);
+        
+        // Initialize mode-specific content
+        switch(modeId) {
+            case 'vocabulary':
+                initializeVocabulary();
+                break;
+            case 'grammar':
+                initializeGrammar();
+                break;
+            case 'scenarios':
+                initializeScenarios();
+                break;
+            case 'daily':
+                initializeDailyChallenge();
+                break;
+            case 'pronunciation':
+                initializePronunciation();
+                break;
+        }
+    }
+}
+
+// Conversation Mode
+function sendMessage() {
+    const input = document.getElementById('messageInput');
+    if (!input) return;
+    const message = input.value.trim();
+    if (!message) return;
+    addMessage(message, 'user');
+    input.value = '';
+
+    // استدعاء الذكاء الاصطناعي عبر الخادم
+    fetch('http://localhost:5000/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({message})
+    })
+    .then(res => res.json())
+    .then(data => {
+        addMessage(data.reply, 'echo');
+        if (characterController) characterController.speak(data.reply);
+    })
+    .catch(() => {
+        addMessage("Sorry, I couldn't connect to the AI server.", 'echo');
+    });
+
+    // تحديث النقاط كما هو
+    appState.userProgress.conversationsCompleted++;
+    appState.userProgress.totalPoints += 25;
+    updateProgressDisplay();
+}
+
+function addMessage(text, sender) {
+    const messagesContainer = document.getElementById('chatMessages');
+    if (!messagesContainer) return;
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}`;
+    messageDiv.textContent = text;
+    
+    messagesContainer.appendChild(messageDiv);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+function startVoiceInput() {
+    if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const recognition = new SpeechRecognition();
+        
+        recognition.lang = 'en-US';
+        recognition.continuous = false;
+        recognition.interimResults = false;
+        
+        recognition.onresult = function(event) {
+            const transcript = event.results[0][0].transcript;
+            const input = document.getElementById('messageInput');
+            if (input) {
+                input.value = transcript;
+            }
+        };
+        
+        recognition.onerror = function(event) {
+            console.log('Speech recognition error:', event.error);
+            alert('حدث خطأ في التعرف على الصوت. تأكد من السماح بالوصول للميكروفون.');
+        };
+        
+        recognition.start();
+    } else {
+        alert('متصفحك لا يدعم تقنية التعرف على الصوت.');
+    }
+}
+
+// Vocabulary Mode
+function initializeVocabulary() {
+    appState.currentVocabIndex = 0;
+    updateVocabularyCard();
+    updateVocabularyProgress();
+}
+
+function updateVocabularyCard() {
+    const card = appData.vocabulary_cards[appState.currentVocabIndex];
+    
+    const elements = {
+        'cardWord': card.word,
+        'cardPronunciation': card.pronunciation,
+        'cardTranslation': card.translation,
+        'cardExample': card.example
+    };
+    
+    Object.entries(elements).forEach(([id, value]) => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = value;
+        }
+    });
+    
+    // Reset card flip
+    const flashcard = document.getElementById('flashcard');
+    if (flashcard) {
+        flashcard.classList.remove('flipped');
+    }
+}
+
+function updateVocabularyProgress() {
+    const progress = ((appState.currentVocabIndex + 1) / appData.vocabulary_cards.length) * 100;
+    const progressFill = document.getElementById('vocabProgress');
+    const progressText = document.getElementById('vocabProgressText');
+    
+    if (progressFill) {
+        progressFill.style.width = progress + '%';
+    }
+    if (progressText) {
+        progressText.textContent = `${appState.currentVocabIndex + 1}/${appData.vocabulary_cards.length}`;
+    }
+}
+
+function flipCard() {
+    const flashcard = document.getElementById('flashcard');
+    if (flashcard) {
+        flashcard.classList.toggle('flipped');
+    }
+}
+
+function nextCard() {
+    appState.currentVocabIndex = (appState.currentVocabIndex + 1) % appData.vocabulary_cards.length;
+    updateVocabularyCard();
+    updateVocabularyProgress();
+    
+    // Update progress
+    appState.userProgress.wordsLearned++;
+    appState.userProgress.totalPoints += 10;
+    updateProgressDisplay();
+    
+    if (characterController) {
+        characterController.encourage();
+    }
+}
+
+function playPronunciation() {
+    const card = appData.vocabulary_cards[appState.currentVocabIndex];
+    if (characterController && appState.soundEnabled) {
+        characterController.speak(card.word);
+    }
+}
+
+// Pronunciation Mode
+function initializePronunciation() {
+    const words = appData.vocabulary_cards;
+    const randomWord = words[Math.floor(Math.random() * words.length)];
+    
+    const practiceWord = document.getElementById('practiceWord');
+    const practicePronunciation = document.getElementById('practicePronunciation');
+    
+    if (practiceWord) practiceWord.textContent = randomWord.word;
+    if (practicePronunciation) practicePronunciation.textContent = randomWord.pronunciation;
+    
+    // Clear previous feedback
+    const feedback = document.getElementById('pronunciationFeedback');
+    if (feedback) {
+        feedback.innerHTML = '';
+    }
+}
+
+function playTargetPronunciation() {
+    const word = document.getElementById('practiceWord');
+    if (word && characterController && appState.soundEnabled) {
+        characterController.speak(word.textContent);
+    }
+}
+
+function toggleRecording() {
+    const recordBtn = document.getElementById('recordBtn');
+    const visualizer = document.getElementById('recordVisualizer');
+    
+    if (!recordBtn || !visualizer) return;
+    
+    if (!appState.isRecording) {
+        // Start recording
+        appState.isRecording = true;
+        recordBtn.textContent = '⏹️ إيقاف التسجيل';
+        recordBtn.classList.add('recording');
+        
+        // Clear previous content
+        visualizer.innerHTML = '';
+        
+        // Create recording visualization
+        const bars = [];
+        for (let i = 0; i < 10; i++) {
+            const bar = document.createElement('div');
+            bar.style.cssText = `
+                width: 15px;
+                background: #32b8c6;
+                margin: 2px;
+                border-radius: 2px;
+                display: inline-block;
+                height: 20px;
+                animation: record-bar 0.8s infinite alternate;
+                animation-delay: ${i * 0.1}s;
+            `;
+            bars.push(bar);
+            visualizer.appendChild(bar);
+        }
+        
+        // Add CSS for bars animation if not exists
+        if (!document.getElementById('recordBarStyles')) {
+            const style = document.createElement('style');
+            style.id = 'recordBarStyles';
+            style.textContent = `
+                @keyframes record-bar {
+                    0% { height: 10px; opacity: 0.5; }
+                    100% { height: 50px; opacity: 1; }
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        
+        // Auto-stop after 5 seconds
+        appState.recordingTimer = setTimeout(() => {
+            if (appState.isRecording) {
+                toggleRecording();
+            }
+        }, 5000);
+        
+    } else {
+        // Stop recording
+        appState.isRecording = false;
+        recordBtn.textContent = '🎤 ابدأ التسجيل';
+        recordBtn.classList.remove('recording');
+        
+        // Clear timer
+        if (appState.recordingTimer) {
+            clearTimeout(appState.recordingTimer);
+            appState.recordingTimer = null;
+        }
+        
+        // Clear visualizer
+        visualizer.innerHTML = '';
+        
+        // Show processing message then feedback
+        const feedback = document.getElementById('pronunciationFeedback');
+        if (feedback) {
+            feedback.innerHTML = '<p>جاري تحليل النطق...</p>';
+            
+            setTimeout(() => {
+                showPronunciationFeedback();
+            }, 1500);
+        }
+    }
+}
+
+function showPronunciationFeedback() {
+    const feedback = document.getElementById('pronunciationFeedback');
+    if (!feedback) return;
+    
+    const accuracy = 65 + Math.random() * 30; // Simulate accuracy between 65-95%
+    const roundedAccuracy = Math.round(accuracy);
+    
+    let message, color;
+    if (roundedAccuracy >= 85) {
+        message = 'ممتاز! نطقك رائع 🎉';
+        color = '#32b8c6';
+    } else if (roundedAccuracy >= 70) {
+        message = 'جيد جداً! يمكنك تحسينه أكثر 👍';
+        color = '#8a2be2';
+    } else {
+        message = 'يحتاج تحسين، استمع للنطق الصحيح 🎯';
+        color = '#ff6b9d';
+    }
+    
+    feedback.innerHTML = `
+        <h4>نتيجة النطق</h4>
+        <div style="font-size: 3em; color: ${color}; margin: 16px 0; text-shadow: 0 0 10px ${color}40;">
+            ${roundedAccuracy}%
+        </div>
+        <p style="color: ${color}; font-weight: bold;">${message}</p>
+        <button class="btn btn--primary" onclick="initializePronunciation()">كلمة جديدة</button>
+    `;
+    
+    // Update progress
+    appState.userProgress.pronunciationAccuracy = Math.round(
+        (appState.userProgress.pronunciationAccuracy + accuracy) / 2
+    );
+    appState.userProgress.totalPoints += Math.round(accuracy / 10);
+    updateProgressDisplay();
+    
+    if (characterController) {
+        if (roundedAccuracy >= 85) {
+            characterController.celebrate();
+        } else {
+            characterController.encourage();
+        }
+    }
+}
+
+// Grammar Mode
+function initializeGrammar() {
+    appState.currentGrammarIndex = 0;
+    showGrammarQuestion();
+}
+
+function showGrammarQuestion() {
+    const exercise = appData.grammar_exercises[appState.currentGrammarIndex];
+    
+    const questionElement = document.getElementById('grammarQuestion');
+    if (questionElement) {
+        questionElement.textContent = exercise.question;
+    }
+    
+    const optionsContainer = document.getElementById('grammarOptions');
+    if (optionsContainer) {
+        optionsContainer.innerHTML = '';
+        
+        exercise.options.forEach((option, index) => {
+            const optionBtn = document.createElement('button');
+            optionBtn.className = 'option-btn';
+            optionBtn.textContent = option;
+            optionBtn.onclick = () => selectGrammarOption(index);
+            
+            optionsContainer.appendChild(optionBtn);
+        });
+    }
+    
+    // Clear previous feedback
+    const feedback = document.getElementById('grammarFeedback');
+    if (feedback) {
+        feedback.innerHTML = '';
+    }
+}
+
+function selectGrammarOption(selectedIndex) {
+    const exercise = appData.grammar_exercises[appState.currentGrammarIndex];
+    const options = document.querySelectorAll('.option-btn');
+    const feedback = document.getElementById('grammarFeedback');
+    
+    if (!feedback) return;
+    
+    // Disable all options
+    options.forEach((btn, index) => {
+        btn.disabled = true;
+        if (index === exercise.correct) {
+            btn.classList.add('correct');
+        } else if (index === selectedIndex && index !== exercise.correct) {
+            btn.classList.add('incorrect');
+        }
+    });
+    
+    // Show feedback
+    const isCorrect = selectedIndex === exercise.correct;
+    feedback.innerHTML = `
+        <h4>${isCorrect ? '✅ إجابة صحيحة!' : '❌ إجابة خاطئة'}</h4>
+        <p>${exercise.explanation}</p>
+        <button class="btn btn--primary" onclick="nextGrammarQuestion()">السؤال التالي</button>
+    `;
+    
+    // Update progress
+    if (isCorrect) {
+        appState.userProgress.grammarScore += 10;
+        appState.userProgress.totalPoints += 15;
+        updateProgressDisplay();
+        
+        if (characterController) {
+            characterController.celebrate();
+        }
+    } else {
+        if (characterController) {
+            characterController.encourage();
+        }
+    }
+}
+
+function nextGrammarQuestion() {
+    appState.currentGrammarIndex = (appState.currentGrammarIndex + 1) % appData.grammar_exercises.length;
+    showGrammarQuestion();
+}
+
+// Scenarios Mode
+function initializeScenarios() {
+    const buttonsContainer = document.getElementById('scenarioButtons');
+    if (!buttonsContainer) return;
+    
+    buttonsContainer.innerHTML = '';
+    
+    appData.scenarios.forEach((scenario, index) => {
+        const btn = document.createElement('button');
+        btn.className = 'scenario-btn';
+        btn.textContent = scenario.title;
+        btn.onclick = () => showScenario(index);
+        
+        buttonsContainer.appendChild(btn);
+    });
+    
+    // Show first scenario by default
+    if (appData.scenarios.length > 0) {
+        showScenario(0);
+    }
+}
+
+function showScenario(scenarioIndex) {
+    const scenario = appData.scenarios[scenarioIndex];
+    appState.currentScenario = scenarioIndex;
+    
+    // Update button states
+    document.querySelectorAll('.scenario-btn').forEach((btn, index) => {
+        btn.classList.toggle('active', index === scenarioIndex);
+    });
+    
+    // Show dialogue
+    const dialogueContainer = document.getElementById('scenarioDialogue');
+    if (dialogueContainer) {
+        dialogueContainer.innerHTML = `
+            <h4>${scenario.title}</h4>
+            <p>${scenario.description}</p>
+            <div class="dialogue-content">
+                ${scenario.dialogue.map(line => `
+                    <div class="dialogue-line ${line.speaker}">
+                        <strong>${line.speaker === 'waiter' ? 'النادل:' : 
+                                   line.speaker === 'customer' ? 'الزبون:' :
+                                   line.speaker === 'interviewer' ? 'المحاور:' : 'المرشح:'}</strong>
+                        <p>${line.text}</p>
+                    </div>
+                `).join('')}
+            </div>
+            <button class="btn btn--primary" onclick="practiceScenario()">🎤 تدرب على هذا السيناريو</button>
+        `;
+    }
+}
+
+function practiceScenario() {
+    if (characterController && appState.currentScenario !== null) {
+        const scenario = appData.scenarios[appState.currentScenario];
+        const firstLine = scenario.dialogue[0].text;
+        characterController.speak(firstLine);
+    }
+    
+    // Show practice message
+    const dialogueContainer = document.getElementById('scenarioDialogue');
+    if (dialogueContainer) {
+        const practiceDiv = document.createElement('div');
+        practiceDiv.style.cssText = `
+            background: rgba(50, 184, 198, 0.1);
+            border: 1px solid #32b8c6;
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 16px;
+            text-align: center;
+        `;
+        practiceDiv.innerHTML = '<p>🎤 الآن دورك! تدرب على الرد باللغة الإنجليزية</p>';
+        dialogueContainer.appendChild(practiceDiv);
+    }
+}
+
+// Daily Challenge Mode
+function initializeDailyChallenge() {
+    appState.dailyProgress = 1;
+    appState.selectedChallengeWords = [];
+    updateDailyProgress();
+    startChallengeTimer();
+}
+
+function updateDailyProgress() {
+    const progress = (appState.dailyProgress / 3) * 100;
+    const progressFill = document.getElementById('dailyProgress');
+    const progressText = document.getElementById('dailyProgressText');
+    
+    if (progressFill) {
+        progressFill.style.width = progress + '%';
+    }
+    if (progressText) {
+        progressText.textContent = `${appState.dailyProgress}/3`;
+    }
+}
+
+function selectWord(wordElement) {
+    const word = wordElement.textContent;
+    
+    // Toggle selection
+    if (wordElement.classList.contains('selected')) {
+        wordElement.classList.remove('selected');
+        appState.selectedChallengeWords = appState.selectedChallengeWords.filter(w => w !== word);
+    } else {
+        // Limit to 2 selections
+        if (appState.selectedChallengeWords.length < 2) {
+            wordElement.classList.add('selected');
+            appState.selectedChallengeWords.push(word);
+        }
+    }
+    
+    // Check if challenge is complete
+    if (appState.selectedChallengeWords.length === 2) {
+        setTimeout(() => {
+            checkChallengeAnswer();
+        }, 500);
+    }
+}
+
+function checkChallengeAnswer() {
+    const correctWords = ['study', 'important'];
+    const isCorrect = correctWords.every(word => appState.selectedChallengeWords.includes(word));
+    
+    if (isCorrect) {
+        appState.dailyProgress++;
+        updateDailyProgress();
+        
+        if (characterController) {
+            characterController.celebrate();
+        }
+        
+        // Update streak and points
+        appState.userProgress.streak++;
+        appState.userProgress.totalPoints += 20;
+        updateProgressDisplay();
+        
+        if (appState.dailyProgress >= 3) {
+            setTimeout(() => {
+                alert('🎉 أكملت التحدي اليومي! أحسنت!');
+                checkAchievements();
+            }, 1000);
+        } else {
+            setTimeout(() => {
+                alert('✅ إجابة صحيحة! استمر...');
+            }, 500);
+        }
+    } else {
+        if (characterController) {
+            characterController.encourage();
+        }
+        setTimeout(() => {
+            alert('❌ حاول مرة أخرى!');
+        }, 500);
+    }
+    
+    // Reset selections
+    document.querySelectorAll('.word-option').forEach(option => {
+        option.classList.remove('selected');
+    });
+    appState.selectedChallengeWords = [];
+}
+
+function startChallengeTimer() {
+    let timeLeft = 300; // 5 minutes in seconds
+    const timerElement = document.getElementById('challengeTimer');
+    if (!timerElement) return;
+    
+    const timer = setInterval(() => {
+        const minutes = Math.floor(timeLeft / 60);
+        const seconds = timeLeft % 60;
+        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        
+        timeLeft--;
+        
+        if (timeLeft < 0) {
+            clearInterval(timer);
+            alert('⏰ انتهى الوقت! حاول مرة أخرى غداً.');
+        }
+    }, 1000);
+}
+
+// Progress Tracking
+function updateProgressDisplay() {
+    const elements = {
+        'streakCount': appState.userProgress.streak,
+        'totalPoints': appState.userProgress.totalPoints,
+        'wordsLearned': appState.userProgress.wordsLearned,
+        'conversationsCompleted': appState.userProgress.conversationsCompleted,
+        'pronunciationAccuracy': appState.userProgress.pronunciationAccuracy + '%',
+        'grammarScore': appState.userProgress.grammarScore
+    };
+    
+    Object.entries(elements).forEach(([id, value]) => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = value;
+        }
+    });
+}
+
+// Achievements System
+function checkAchievements() {
+    const progress = appState.userProgress;
+    const achievements = [
+        {
+            id: 'first_conversation',
+            condition: progress.conversationsCompleted >= 1
+        },
+        {
+            id: 'vocabulary_master',
+            condition: progress.wordsLearned >= 50
+        },
+        {
+            id: 'pronunciation_expert',
+            condition: progress.pronunciationAccuracy >= 85
+        },
+        {
+            id: 'grammar_guru',
+            condition: progress.grammarScore >= 100
+        },
+        {
+            id: 'daily_streak',
+            condition: progress.streak >= 7
+        }
+    ];
+    
+    achievements.forEach(achievement => {
+        if (achievement.condition && !progress.unlockedAchievements.includes(achievement.id)) {
+            unlockAchievement(achievement.id);
+        }
+    });
+}
+
+function unlockAchievement(achievementId) {
+    const achievement = appData.achievements.find(a => a.id === achievementId);
+    if (!achievement) return;
+    
+    appState.userProgress.unlockedAchievements.push(achievementId);
+    appState.userProgress.totalPoints += 50;
+    updateProgressDisplay();
+    
+    // Show achievement notification
+    showAchievementNotification(achievement);
+    
+    if (characterController) {
+        characterController.celebrate();
+    }
+}
+
+function showAchievementNotification(achievement) {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: linear-gradient(135deg, #32b8c6, #8a2be2);
+        color: white;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        z-index: 1000;
+        animation: slideIn 0.5s ease-out;
+        max-width: 300px;
+    `;
+    notification.innerHTML = `
+        <div style="font-size: 2em; margin-bottom: 8px; text-align: center;">${achievement.icon}</div>
+        <h4 style="margin: 0 0 8px 0; text-align: center;">إنجاز جديد!</h4>
+        <p style="margin: 0; font-size: 14px; text-align: center;">${achievement.name}</p>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}
+
+function initializeAchievements() {
+    const achievementsGrid = document.getElementById('achievementsGrid');
+    if (!achievementsGrid) return;
+    
+    achievementsGrid.innerHTML = '';
+    
+    appData.achievements.forEach(achievement => {
+        const isUnlocked = appState.userProgress.unlockedAchievements.includes(achievement.id);
+        
+        const achievementCard = document.createElement('div');
+        achievementCard.className = `achievement-card ${isUnlocked ? 'unlocked' : ''}`;
+        achievementCard.innerHTML = `
+            <span class="achievement-icon">${achievement.icon}</span>
+            <div class="achievement-name">${achievement.name}</div>
+            <div class="achievement-description">${achievement.description}</div>
+        `;
+        
+        achievementsGrid.appendChild(achievementCard);
+    });
+}
+
+// Sound Management
+function toggleSound() {
+    appState.soundEnabled = !appState.soundEnabled;
+    const soundToggle = document.getElementById('soundToggle');
+    
+    if (soundToggle) {
+        soundToggle.textContent = appState.soundEnabled ? '🔊' : '🔇';
+        soundToggle.title = appState.soundEnabled ? 'إيقاف الصوت' : 'تشغيل الصوت';
+        
+        // Visual feedback
+        soundToggle.style.color = appState.soundEnabled ? '#32b8c6' : '#ff6b9d';
+    }
+    
+    if (!appState.soundEnabled && 'speechSynthesis' in window) {
+        speechSynthesis.cancel();
+    }
+    
+    // Show feedback message
+    const message = appState.soundEnabled ? 'تم تشغيل الصوت' : 'تم إيقاف الصوت';
+    showTemporaryMessage(message);
+}
+
+function showTemporaryMessage(message) {
+    const messageDiv = document.createElement('div');
+    messageDiv.style.cssText = `
+        position: fixed;
+        bottom: 100px;
+        right: 20px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 12px 16px;
+        border-radius: 8px;
+        font-size: 14px;
+        z-index: 1000;
+        animation: slideIn 0.5s ease-out;
+    `;
+    messageDiv.textContent = message;
+    
+    document.body.appendChild(messageDiv);
+    
+    setTimeout(() => {
+        messageDiv.remove();
+    }, 2000);
+}
+
+// Add slide-in animation CSS
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes slideIn {
+        from { transform: translateX(100%); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+`;
+document.head.appendChild(style);
+
+// === Conversational Voice Loop & Avatar State ===
+let isMuted = false;
+let isConversationActive = false;
+let isAutoLoop = false;
+let recognition = null;
+let isSpeakingVoiceLoop = false; // حماية من التكرار
+
+function setVoiceControlButtonsState() {
+    const btnStart = document.querySelector('.voice-controls .btn--primary');
+    const btnMute = document.querySelector('.voice-controls .btn--secondary');
+    const btnEnd = document.querySelector('.voice-controls .btn--danger');
+    if (!btnStart || !btnMute || !btnEnd) return;
+    btnStart.disabled = isConversationActive || isSpeakingVoiceLoop;
+    btnEnd.disabled = !isConversationActive && !isSpeakingVoiceLoop;
+    btnMute.disabled = !isConversationActive && !isSpeakingVoiceLoop;
+    btnMute.textContent = isMuted ? '🔇 كتم' : '🔊 كتم';
+    btnMute.classList.toggle('muted', isMuted);
+}
+
+function setAvatarState(state) {
+    if (!characterController) return;
+    switch(state) {
+        case 'idle':
+            characterController.setMood('happy');
+            break;
+        case 'listening':
+            characterController.setMood('encouraging');
+            break;
+        case 'speaking':
+            characterController.setMood('excited');
+            break;
+    }
+}
+
+function startVoiceLoop() {
+    if (isMuted || isConversationActive || isSpeakingVoiceLoop) return;
+    isConversationActive = true;
+    isAutoLoop = true;
+    setAvatarState('listening');
+    setVoiceControlButtonsState();
+    startListening();
+}
+
+function stopVoiceLoop() {
+    isConversationActive = false;
+    isAutoLoop = false;
+    if (recognition) recognition.stop();
+    if ('speechSynthesis' in window) speechSynthesis.cancel();
+    isSpeakingVoiceLoop = false;
+    setAvatarState('idle');
+    setVoiceControlButtonsState();
+}
+
+function toggleMute() {
+    isMuted = !isMuted;
+    if (isMuted) {
+        if (recognition) recognition.stop();
+        if ('speechSynthesis' in window) speechSynthesis.cancel();
+        setAvatarState('idle');
+        isConversationActive = false;
+        isAutoLoop = false;
+        isSpeakingVoiceLoop = false;
+    } else if (!isConversationActive && !isSpeakingVoiceLoop) {
+        isConversationActive = true;
+        isAutoLoop = true;
+        setAvatarState('listening');
+        startListening();
+    }
+    setVoiceControlButtonsState();
+}
+
+function startListening() {
+    if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
+        alert('Speech recognition not supported.');
+        return;
+    }
+    if (isSpeakingVoiceLoop) return; // لا تستمع أثناء النطق
+    setAvatarState('listening');
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new SpeechRecognition();
+    recognition.lang = 'en-US';
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.onresult = function(event) {
+        const transcript = event.results[0][0].transcript;
+        addMessage(transcript, 'user');
+        handleAIResponse(transcript);
+    };
+    recognition.onerror = function(event) {
+        setAvatarState('idle');
+        if (isAutoLoop && !isMuted && isConversationActive) {
+            setTimeout(startListening, 1000);
+        }
+    };
+    recognition.onend = function() {
+        // Do nothing, will be restarted after AI response
+    };
+    recognition.start();
+}
+
+function handleAIResponse(userText) {
+    setAvatarState('thinking');
+    isSpeakingVoiceLoop = true;
+    setVoiceControlButtonsState();
+    fetch('http://127.0.0.1:5000/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({message: userText})
+    })
+    .then(res => res.json())
+    .then(data => {
+        addMessage(data.reply, 'echo');
+        setAvatarState('speaking');
+        if (characterController && appState.soundEnabled) {
+            // استخدم SpeechSynthesisUtterance مع حدث onend
+            const utterance = new SpeechSynthesisUtterance(data.reply);
+            utterance.lang = 'en-US';
+            utterance.onend = () => {
+                isSpeakingVoiceLoop = false;
+                setAvatarState('idle');
+                setVoiceControlButtonsState();
+                if (isAutoLoop && !isMuted && isConversationActive) {
+                    setTimeout(startListening, 500);
+                }
+            };
+            utterance.onerror = () => {
+                isSpeakingVoiceLoop = false;
+                setAvatarState('idle');
+                setVoiceControlButtonsState();
+                if (isAutoLoop && !isMuted && isConversationActive) {
+                    setTimeout(startListening, 500);
+                }
+            };
+            speechSynthesis.speak(utterance);
+            characterController.speak(data.reply); // لتحريك الفم
+        } else {
+            isSpeakingVoiceLoop = false;
+            setAvatarState('idle');
+            setVoiceControlButtonsState();
+            if (isAutoLoop && !isMuted && isConversationActive) {
+                setTimeout(startListening, 500);
+            }
+        }
+    })
+    .catch(() => {
+        addMessage("Sorry, I couldn't connect to the AI server.", 'echo');
+        isSpeakingVoiceLoop = false;
+        setAvatarState('idle');
+        setVoiceControlButtonsState();
+        if (isAutoLoop && !isMuted && isConversationActive) {
+            setTimeout(startListening, 1500);
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize character controller
+    characterController = new CharacterController();
+    
+    // Initialize modes
+    initializeModes();
+    
+    // Initialize achievements
+    initializeAchievements();
+    
+    // Update progress display
+    updateProgressDisplay();
+    
+    // Welcome message
+    setTimeout(() => {
+        if (characterController) {
+            characterController.speak("Welcome to Echo Light! I'm here to help you learn English in a fun and interactive way.");
+        }
+    }, 2000);
+    
+    // Set up Enter key for chat
+    const messageInput = document.getElementById('messageInput');
+    if (messageInput) {
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+    }
+    
+    // Check for achievements periodically
+    setInterval(() => {
+        checkAchievements();
+    }, 10000);
+    
+    // ربط الأزرار يدويًا بعد تحميل الصفحة
+    const btnStart = document.querySelector('.voice-controls .btn--primary');
+    const btnMute = document.querySelector('.voice-controls .btn--secondary');
+    const btnEnd = document.querySelector('.voice-controls .btn--danger');
+    if (btnStart) btnStart.onclick = startVoiceLoop;
+    if (btnMute) btnMute.onclick = toggleMute;
+    if (btnEnd) btnEnd.onclick = stopVoiceLoop;
+    setVoiceControlButtonsState();
+});
+
+// Export functions for global access
+window.showScreen = showScreen;
+window.sendMessage = sendMessage;
+window.startVoiceInput = startVoiceInput;
+window.flipCard = flipCard;
+window.nextCard = nextCard;
+window.playPronunciation = playPronunciation;
+window.playTargetPronunciation = playTargetPronunciation;
+window.toggleRecording = toggleRecording;
+window.selectGrammarOption = selectGrammarOption;
+window.nextGrammarQuestion = nextGrammarQuestion;
+window.showScenario = showScenario;
+window.practiceScenario = practiceScenario;
+window.selectWord = selectWord;
+window.toggleSound = toggleSound;

development_guide.md

@@ -0,0 +1,229 @@
+# دليل المطور لتطبيق Echo Light المتقدم
+
+## نظرة عامة على البنية التقنية
+
+### 1. شخصية Echo Light التفاعلية
+
+#### الحركة العائمة المنتظمة
+```css
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(2deg); }
+}
+
+.echo-character {
+    animation: float 4s ease-in-out infinite;
+    will-change: transform;
+}
+```
+
+#### نظام الحالات التفاعلية
+```javascript
+const characterStates = {
+    idle: { animation: 'float', expression: 'neutral' },
+    listening: { animation: 'float-focus', expression: 'attentive' },
+    speaking: { animation: 'float-talk', expression: 'animated' },
+    thinking: { animation: 'float-think', expression: 'thoughtful' }
+};
+```
+
+### 2. تقنيات تحسين الأداء للهواتف
+
+#### CSS Transforms للحركات السلسة
+- استخدام `transform` بدلاً من `left/top`
+- تفعيل `will-change` للعناصر المتحركة
+- استخدام `translate3d` لتفعيل تسريع GPU
+
+#### إدارة الذاكرة
+```javascript
+// تحسين استهلاك الذاكرة
+const performanceOptimizer = {
+    reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    lowPowerMode: navigator.hardwareConcurrency <= 2,
+    
+    adaptAnimations() {
+        if (this.reducedMotion || this.lowPowerMode) {
+            document.body.classList.add('reduced-motion');
+        }
+    }
+};
+```
+
+### 3. نظام التعرف على الصوت المتقدم
+
+#### تكامل Web Speech API
+```javascript
+class VoiceRecognition {
+    constructor() {
+        this.recognition = new webkitSpeechRecognition();
+        this.recognition.continuous = true;
+        this.recognition.interimResults = true;
+        this.recognition.lang = 'en-US';
+    }
+    
+    startListening() {
+        this.recognition.start();
+        this.updateCharacterState('listening');
+    }
+    
+    assessPronunciation(text, audio) {
+        // تقييم النطق باستخدام خوارزميات متقدمة
+        return this.calculateAccuracyScore(text, audio);
+    }
+}
+```
+
+### 4. خوارزمية التكرار المباعد
+
+#### تنفيذ نظام SM-2 المحسن
+```javascript
+class SpacedRepetition {
+    calculateNextReview(quality, interval, easeFactor) {
+        if (quality >= 3) {
+            if (interval === 0) {
+                interval = 1;
+            } else if (interval === 1) {
+                interval = 6;
+            } else {
+                interval = Math.round(interval * easeFactor);
+            }
+        } else {
+            interval = 1;
+        }
+        
+        easeFactor = easeFactor + (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
+        
+        return { interval, easeFactor };
+    }
+}
+```
+
+### 5. نظام التحليل والإحصائيات
+
+#### تتبع التقدم في الوقت الفعلي
+```javascript
+class ProgressTracker {
+    constructor() {
+        this.metrics = {
+            vocabularyLearned: 0,
+            pronunciationAccuracy: [],
+            grammarScores: [],
+            dailyStreaks: 0,
+            timeSpent: 0
+        };
+    }
+    
+    updateProgress(category, value) {
+        this.metrics[category] = value;
+        this.generateInsights();
+        this.updateCharacterFeedback();
+    }
+    
+    generateInsights() {
+        // تحليل البيانات وإنشاء رؤى تعليمية
+        const insights = this.analyzePerformance();
+        return insights;
+    }
+}
+```
+
+### 6. نظام الإنجازات والتحفيز
+
+#### آلية الشارات الذكية
+```javascript
+class AchievementSystem {
+    checkAchievements(userStats) {
+        const achievements = [];
+        
+        // فحص الإنجازات المختلفة
+        if (userStats.vocabularyLearned >= 50) {
+            achievements.push('vocabulary_master');
+        }
+        
+        if (userStats.dailyStreaks >= 7) {
+            achievements.push('daily_streak');
+        }
+        
+        return achievements;
+    }
+    
+    celebrateAchievement(achievementId) {
+        // تفعيل الاحتفال بالإنجاز
+        this.showAchievementAnimation(achievementId);
+        this.updateCharacterExpression('celebrating');
+    }
+}
+```
+
+### 7. التكيف مع مستوى المتعلم
+
+#### نظام التعلم المكيف
+```javascript
+class AdaptiveLearning {
+    assessLearnerLevel(userHistory) {
+        const level = this.calculateLevel(userHistory);
+        return {
+            vocabulary: level.vocabulary,
+            grammar: level.grammar,
+            pronunciation: level.pronunciation,
+            comprehension: level.comprehension
+        };
+    }
+    
+    adaptContent(currentLevel, performance) {
+        // تكييف المحتوى حسب مستوى المتعلم
+        if (performance.accuracy < 0.7) {
+            return this.getEasierContent(currentLevel);
+        } else if (performance.accuracy > 0.9) {
+            return this.getHarderContent(currentLevel);
+        }
+        return this.getCurrentLevelContent(currentLevel);
+    }
+}
+```
+
+### 8. التحسينات الأمنية
+
+#### حماية البيانات الشخصية
+```javascript
+class DataSecurity {
+    encryptUserData(data) {
+        // تشفير بيانات المستخدم
+        return CryptoJS.AES.encrypt(JSON.stringify(data), 'secret-key').toString();
+    }
+    
+    validateInput(userInput) {
+        // التحقق من صحة المدخلات
+        return this.sanitizeInput(userInput);
+    }
+}
+```
+
+### 9. إرشادات التطوير المستقبلي
+
+#### إضافة ميزات جديدة
+1. **تعلم الآلة المحلي**: استخدام TensorFlow.js للتحليل المحلي
+2. **الواقع المعزز**: دمج تقنيات AR للتعلم التفاعلي
+3. **التعلم الاجتماعي**: إضافة ميزات التعلم الجماعي
+4. **دعم لغات متعددة**: توسيع التطبيق ليشمل لغات أخرى
+
+#### أفضل الممارسات
+- استخدام مبدأ Progressive Web App
+- تنفيذ Service Workers للعمل دون اتصال
+- تحسين تجربة المستخدم على الشاشات المختلفة
+- إجراء اختبارات الأداء المنتظمة
+
+### 10. متطلبات النشر
+
+#### البيئة المطلوبة
+- Node.js 16+
+- متصفح يدعم Web Speech API
+- اتصال إنترنت للميزات المتقدمة
+- ذاكرة RAM: 2GB على الأقل للهواتف
+
+#### التوافق
+- iOS Safari 12+
+- Android Chrome 80+
+- Desktop Chrome/Firefox/Edge الأحدث
+
+هذا الدليل يوفر الأساس التقني لتطوير وتحسين تطبيق Echo Light المتقدم مع ضمان الأداء الأمثل والتجربة المتميزة للمستخدمين.

index.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Echo Light - تعلم الإنجليزية التفاعلي</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="space-background">
+        <div class="stars"></div>
+        <div class="moving-particles"></div>
+    </div>
+
+    <!-- Main Application Container -->
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="container flex items-center justify-between">
+                <div class="logo">
+                    <h1 class="glow-text">Echo Light</h1>
+                    <span class="tagline">معلمك الذكي لتعلم الإنجليزية</span>
+                </div>
+                <div class="user-stats">
+                    <div class="stat-item">
+                        <span class="stat-value" id="streakCount">0</span>
+                        <span class="stat-label">أيام متتالية</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-value" id="totalPoints">0</span>
+                        <span class="stat-label">نقاط</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <div class="container">
+                <!-- Home Screen -->
+                <section id="homeScreen" class="screen active">
+                    <div class="home-layout">
+                        <!-- Echo Light Character -->
+                        <div class="character-container">
+                            <div class="echo-character" id="echoCharacter">
+                                <div class="character-body">
+                                    <div class="character-head">
+                                        <div class="eyes">
+                                            <div class="eye left-eye">
+                                                <div class="pupil"></div>
+                                            </div>
+                                            <div class="eye right-eye">
+                                                <div class="pupil"></div>
+                                            </div>
+                                        </div>
+                                        <div class="mouth" id="characterMouth"></div>
+                                    </div>
+                                    <div class="character-glow"></div>
+                                </div>
+                                <div class="sound-waves" id="soundWaves"></div>
+                                <div class="light-particles"></div>
+                            </div>
+                            <div class="welcome-message">
+                                <p id="welcomeText">مرحباً! أنا Echo Light، معلمك الذكي لتعلم الإنجليزية</p>
+                            </div>
+                        </div>
+
+                        <!-- Learning Modes -->
+                        <div class="learning-modes">
+                            <h2 class="section-title glow-text">اختر طريقة التعلم</h2>
+                            <div class="modes-grid" id="modesGrid">
+                                <!-- Modes will be generated by JavaScript -->
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Conversation Mode -->
+                <section id="conversationScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">المحادثة الحرة</h2>
+                    </div>
+                    <div class="conversation-layout">
+                        <div class="character-side">
+                            <div class="echo-character mini">
+                                <div class="character-body">
+                                    <div class="character-head">
+                                        <div class="eyes">
+                                            <div class="eye left-eye"><div class="pupil"></div></div>
+                                            <div class="eye right-eye"><div class="pupil"></div></div>
+                                        </div>
+                                        <div class="mouth"></div>
+                                    </div>
+                                    <div class="character-glow"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chat-area">
+                            <div class="chat-messages" id="chatMessages"></div>
+                            <div class="chat-input">
+                                <input type="text" id="messageInput" placeholder="اكتب رسالتك هنا..." class="form-control">
+                                <button class="btn btn--primary" onclick="sendMessage()">إرسال</button>
+                                <button class="btn btn--outline voice-btn" onclick="startVoiceInput()">🎤</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Voice Conversation Controls -->
+                    <div class="voice-controls" style="display: flex; gap: 10px; justify-content: center; margin: 20px 0;">
+                        <button class="btn btn--primary" onclick="startVoiceLoop()" title="Start Voice Conversation">🎤 ابدأ المحادثة</button>
+                        <button class="btn btn--secondary" onclick="toggleMute()" title="Mute/Unmute">🔇 كتم/إلغاء كتم</button>
+                        <button class="btn btn--danger" onclick="stopVoiceLoop()" title="End Conversation">⏹️ إنهاء المحادثة</button>
+                    </div>
+                </section>
+
+                <!-- Vocabulary Mode -->
+                <section id="vocabularyScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">بناء المفردات</h2>
+                    </div>
+                    <div class="vocabulary-layout">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="vocabProgress"></div>
+                            <span class="progress-text" id="vocabProgressText">0/5</span>
+                        </div>
+                        <div class="flashcard" id="flashcard">
+                            <div class="card-inner">
+                                <div class="card-front">
+                                    <h3 id="cardWord">Hello</h3>
+                                    <p id="cardPronunciation">/həˈloʊ/</p>
+                                    <button class="btn btn--outline" onclick="playPronunciation()">🔊 استمع</button>
+                                </div>
+                                <div class="card-back">
+                                    <h3 id="cardTranslation">مرحبا</h3>
+                                    <p id="cardExample">Hello, how are you?</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-controls">
+                            <button class="btn btn--secondary" onclick="flipCard()">قلب البطاقة</button>
+                            <button class="btn btn--primary" onclick="nextCard()">التالي</button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Pronunciation Mode -->
+                <section id="pronunciationScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">تدريب النطق</h2>
+                    </div>
+                    <div class="pronunciation-layout">
+                        <div class="practice-word">
+                            <h3 id="practiceWord">Beautiful</h3>
+                            <p id="practicePronunciation">/ˈbjuːtɪfəl/</p>
+                            <button class="btn btn--outline" onclick="playTargetPronunciation()">🔊 النطق الصحيح</button>
+                        </div>
+                        <div class="recording-area">
+                            <div class="record-visualizer" id="recordVisualizer"></div>
+                            <button class="btn btn--primary record-btn" id="recordBtn" onclick="toggleRecording()">🎤 ابدأ التسجيل</button>
+                        </div>
+                        <div class="pronunciation-feedback" id="pronunciationFeedback"></div>
+                    </div>
+                </section>
+
+                <!-- Grammar Mode -->
+                <section id="grammarScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">ألعاب القواعد</h2>
+                    </div>
+                    <div class="grammar-layout">
+                        <div class="question-card">
+                            <h3 id="grammarQuestion">Choose the correct form: I ___ to school every day.</h3>
+                            <div class="options-grid" id="grammarOptions"></div>
+                        </div>
+                        <div class="grammar-feedback" id="grammarFeedback"></div>
+                    </div>
+                </section>
+
+                <!-- Scenarios Mode -->
+                <section id="scenariosScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">سيناريوهات واقعية</h2>
+                    </div>
+                    <div class="scenarios-layout">
+                        <div class="scenario-selector">
+                            <h3>اختر السيناريو:</h3>
+                            <div class="scenario-buttons" id="scenarioButtons"></div>
+                        </div>
+                        <div class="scenario-dialogue" id="scenarioDialogue"></div>
+                    </div>
+                </section>
+
+                <!-- Daily Challenge Mode -->
+                <section id="dailyScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">التحدي اليومي</h2>
+                    </div>
+                    <div class="daily-layout">
+                        <div class="challenge-header">
+                            <h3>تحدي اليوم</h3>
+                            <div class="challenge-timer" id="challengeTimer">05:00</div>
+                        </div>
+                        <div class="challenge-content" id="challengeContent">
+                            <p>أكمل الجملة التالية:</p>
+                            <p class="challenge-sentence">"I ____ English every day because it's ____."</p>
+                            <div class="word-bank">
+                                <span class="word-option" onclick="selectWord(this)">study</span>
+                                <span class="word-option" onclick="selectWord(this)">important</span>
+                                <span class="word-option" onclick="selectWord(this)">learn</span>
+                                <span class="word-option" onclick="selectWord(this)">interesting</span>
+                            </div>
+                        </div>
+                        <div class="daily-progress">
+                            <div class="progress-bar">
+                                <div class="progress-fill" id="dailyProgress"></div>
+                            </div>
+                            <p>التقدم: <span id="dailyProgressText">0/3</span></p>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Progress Screen -->
+                <section id="progressScreen" class="screen">
+                    <div class="mode-header">
+                        <button class="btn btn--secondary back-btn" onclick="showScreen('homeScreen')">← العودة</button>
+                        <h2 class="glow-text">تتبع التقدم</h2>
+                    </div>
+                    <div class="progress-layout">
+                        <div class="stats-grid">
+                            <div class="stat-card">
+                                <h3>الكلمات المتعلمة</h3>
+                                <div class="stat-number" id="wordsLearned">0</div>
+                            </div>
+                            <div class="stat-card">
+                                <h3>المحادثات المكتملة</h3>
+                                <div class="stat-number" id="conversationsCompleted">0</div>
+                            </div>
+                            <div class="stat-card">
+                                <h3>دقة النطق</h3>
+                                <div class="stat-number" id="pronunciationAccuracy">0%</div>
+                            </div>
+                            <div class="stat-card">
+                                <h3>نقاط القواعد</h3>
+                                <div class="stat-number" id="grammarScore">0</div>
+                            </div>
+                        </div>
+                        <div class="achievements-section">
+                            <h3>الإنجازات</h3>
+                            <div class="achievements-grid" id="achievementsGrid"></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+
+        <!-- Quick Actions -->
+        <div class="quick-actions">
+            <button class="quick-btn" onclick="showScreen('progressScreen')" title="تتبع التقدم">
+                📊
+            </button>
+            <button class="quick-btn" onclick="toggleSound()" title="الصوت" id="soundToggle">
+                🔊
+            </button>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,5 @@
+# requirements.txt for Docker/HuggingFace deployment
+Flask
+flask-cors
+openai
+python-dotenv

style.css

@@ -0,0 +1,1647 @@
+
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  --color-background: rgba(31, 33, 33, 1);
+  --color-surface: rgba(38, 40, 40, 1);
+  --color-text: rgba(245, 245, 245, 1);
+  --color-text-secondary: rgba(167, 169, 169, 0.7);
+  --color-primary: rgba(50, 184, 198, 1);
+  --color-primary-hover: rgba(45, 166, 178, 1);
+  --color-primary-active: rgba(41, 150, 161, 1);
+  --color-secondary: rgba(119, 124, 124, 0.15);
+  --color-secondary-hover: rgba(119, 124, 124, 0.25);
+  --color-secondary-active: rgba(119, 124, 124, 0.3);
+  --color-border: rgba(119, 124, 124, 0.3);
+  --color-error: rgba(255, 84, 89, 1);
+  --color-success: rgba(50, 184, 198, 1);
+  --color-warning: rgba(230, 129, 97, 1);
+  --color-info: rgba(167, 169, 169, 1);
+  --color-focus-ring: rgba(50, 184, 198, 0.4);
+  --color-btn-primary-text: rgba(19, 52, 59, 1);
+  --color-card-border: rgba(119, 124, 124, 0.15);
+  --color-card-border-inner: rgba(119, 124, 124, 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(119, 124, 124, 0.2);
+  --color-select-caret: rgba(245, 245, 245, 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: 50, 184, 198;
+  --color-error-rgb: 255, 84, 89;
+  --color-warning-rgb: 230, 129, 97;
+  --color-info-rgb: 167, 169, 169;
+}
+
+[data-color-scheme="light"] {
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* Space Background Animation */
+.space-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #16213e 100%);
+    z-index: -1;
+    overflow: hidden;
+}
+
+.stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
+        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
+        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
+        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.7), transparent),
+        radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.5), transparent);
+    background-repeat: repeat;
+    background-size: 200px 100px;
+    animation: twinkle 4s linear infinite;
+}
+
+.moving-particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.moving-particles::before,
+.moving-particles::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: rgba(50, 184, 198, 0.6);
+    border-radius: 50%;
+    animation: float-particle 8s linear infinite;
+}
+
+.moving-particles::before {
+    top: 20%;
+    left: 10%;
+    animation-delay: -2s;
+}
+
+.moving-particles::after {
+    top: 60%;
+    right: 15%;
+    animation-delay: -4s;
+    background: rgba(138, 43, 226, 0.6);
+}
+
+@keyframes twinkle {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+@keyframes float-particle {
+    0% { transform: translateY(100vh) scale(0); }
+    10% { transform: translateY(90vh) scale(1); }
+    90% { transform: translateY(-10vh) scale(1); }
+    100% { transform: translateY(-20vh) scale(0); }
+}
+
+/* App Layout */
+.app-container {
+    min-height: 100vh;
+    position: relative;
+    z-index: 1;
+}
+
+.app-header {
+    padding: var(--space-16) 0;
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(50, 184, 198, 0.3);
+}
+
+.logo h1 {
+    color: #32b8c6;
+    text-shadow: 0 0 20px rgba(50, 184, 198, 0.6);
+    margin: 0;
+    font-size: var(--font-size-3xl);
+}
+
+.tagline {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+    display: block;
+    margin-top: var(--space-4);
+}
+
+.user-stats {
+    display: flex;
+    gap: var(--space-24);
+}
+
+.stat-item {
+    text-align: center;
+    color: var(--color-text);
+}
+
+.stat-value {
+    display: block;
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-bold);
+    color: #32b8c6;
+    text-shadow: 0 0 10px rgba(50, 184, 198, 0.4);
+}
+
+.stat-label {
+    font-size: var(--font-size-xs);
+    opacity: 0.8;
+}
+
+/* Glow Text Effect */
+.glow-text {
+    color: #32b8c6;
+    text-shadow: 0 0 20px rgba(50, 184, 198, 0.6);
+}
+
+/* Screen Management */
+.screen {
+    display: none;
+    padding: var(--space-32) 0;
+    min-height: calc(100vh - 120px);
+}
+
+.screen.active {
+    display: block;
+}
+
+/* Home Screen Layout */
+.home-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-32);
+    align-items: center;
+    min-height: 70vh;
+}
+
+/* Echo Light Character */
+.character-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.echo-character {
+    width: 300px;
+    height: 300px;
+    position: relative;
+    animation: float 3s ease-in-out infinite;
+}
+
+.echo-character.mini {
+    width: 150px;
+    height: 150px;
+}
+
+.character-body {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: linear-gradient(135deg, #32b8c6 0%, #8a2be2 100%);
+    border-radius: 50%;
+    box-shadow: 
+        0 0 50px rgba(50, 184, 198, 0.4),
+        inset 0 0 50px rgba(138, 43, 226, 0.2);
+    animation: character-rotate 6s linear infinite;
+}
+
+.character-head {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 60%;
+}
+
+.eyes {
+    display: flex;
+    justify-content: space-between;
+    width: 60%;
+    margin: 0 auto;
+    padding-top: 20px;
+}
+
+.eye {
+    width: 30px;
+    height: 30px;
+    background: white;
+    border-radius: 50%;
+    position: relative;
+    animation: blink 4s infinite;
+}
+
+.pupil {
+    width: 15px;
+    height: 15px;
+    background: #1a0a2e;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: eye-movement 3s ease-in-out infinite;
+}
+
+.mouth {
+    width: 40px;
+    height: 20px;
+    background: #ff6b9d;
+    border-radius: 0 0 40px 40px;
+    position: absolute;
+    bottom: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: mouth-talk 2s ease-in-out infinite;
+}
+
+.character-glow {
+    position: absolute;
+    top: -20px;
+    left: -20px;
+    right: -20px;
+    bottom: -20px;
+    background: radial-gradient(circle, rgba(50, 184, 198, 0.3) 0%, transparent 70%);
+    border-radius: 50%;
+    animation: glow-pulse 2s ease-in-out infinite alternate;
+}
+
+.sound-waves {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.sound-waves::before,
+.sound-waves::after {
+    content: '';
+    position: absolute;
+    border: 2px solid rgba(50, 184, 198, 0.4);
+    border-radius: 50%;
+    animation: sound-wave 2s ease-out infinite;
+}
+
+.sound-waves::before {
+    width: 120%;
+    height: 120%;
+    top: -10%;
+    left: -10%;
+}
+
+.sound-waves::after {
+    width: 140%;
+    height: 140%;
+    top: -20%;
+    left: -20%;
+    animation-delay: 0.5s;
+}
+
+.light-particles {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.light-particles::before,
+.light-particles::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: rgba(255, 107, 157, 0.8);
+    border-radius: 50%;
+    animation: particle-orbit 4s linear infinite;
+}
+
+.light-particles::before {
+    top: 20%;
+    left: 20%;
+}
+
+.light-particles::after {
+    bottom: 20%;
+    right: 20%;
+    animation-delay: 2s;
+    background: rgba(138, 43, 226, 0.8);
+}
+
+/* Character Animations */
+@keyframes float {
+    0%, 100% { transform: translateY(0px) rotate(0deg); }
+    50% { transform: translateY(-20px) rotate(2deg); }
+}
+
+@keyframes character-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes blink {
+    0%, 90%, 100% { transform: scaleY(1); }
+    95% { transform: scaleY(0.1); }
+}
+
+@keyframes eye-movement {
+    0%, 100% { transform: translate(-50%, -50%); }
+    25% { transform: translate(-30%, -50%); }
+    75% { transform: translate(-70%, -50%); }
+}
+
+@keyframes mouth-talk {
+    0%, 100% { transform: translateX(-50%) scaleY(1); }
+    50% { transform: translateX(-50%) scaleY(0.5); }
+}
+
+@keyframes glow-pulse {
+    0% { opacity: 0.3; }
+    100% { opacity: 0.7; }
+}
+
+@keyframes sound-wave {
+    0% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(1.5); opacity: 0; }
+}
+
+@keyframes particle-orbit {
+    0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
+    100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
+}
+
+/* Welcome Message */
+.welcome-message {
+    margin-top: var(--space-32);
+    text-align: center;
+    max-width: 400px;
+}
+
+.welcome-message p {
+    color: var(--color-text);
+    font-size: var(--font-size-lg);
+    background: rgba(0, 0, 0, 0.3);
+    padding: var(--space-16);
+    border-radius: var(--radius-lg);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+}
+
+/* Learning Modes */
+.learning-modes {
+    text-align: center;
+}
+
+.section-title {
+    margin-bottom: var(--space-32);
+    font-size: var(--font-size-3xl);
+}
+
+.modes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-24);
+}
+
+.mode-card {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-24);
+    cursor: pointer;
+    transition: all var(--duration-normal) var(--ease-standard);
+    text-align: center;
+}
+
+.mode-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(50, 184, 198, 0.6);
+    box-shadow: 0 10px 30px rgba(50, 184, 198, 0.2);
+}
+
+.mode-icon {
+    font-size: var(--font-size-4xl);
+    margin-bottom: var(--space-16);
+    display: block;
+}
+
+.mode-title {
+    color: #32b8c6;
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-8);
+}
+
+.mode-description {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+    line-height: 1.6;
+}
+
+/* Mode Headers */
+.mode-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-16);
+    margin-bottom: var(--space-32);
+    padding-bottom: var(--space-16);
+    border-bottom: 1px solid rgba(50, 184, 198, 0.3);
+}
+
+.mode-header h2 {
+    flex: 1;
+    text-align: center;
+    margin: 0;
+}
+
+.back-btn {
+    background: rgba(0, 0, 0, 0.3) !important;
+    border: 1px solid rgba(50, 184, 198, 0.3) !important;
+    color: var(--color-text) !important;
+}
+
+/* Conversation Layout */
+.conversation-layout {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: var(--space-32);
+    height: 60vh;
+}
+
+.character-side {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: var(--space-32);
+}
+
+.chat-area {
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    overflow: hidden;
+}
+
+.chat-messages {
+    flex: 1;
+    padding: var(--space-16);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+}
+
+.message {
+    max-width: 80%;
+    padding: var(--space-12) var(--space-16);
+    border-radius: var(--radius-lg);
+    word-wrap: break-word;
+}
+
+.message.user {
+    align-self: flex-end;
+    background: linear-gradient(135deg, #32b8c6, #8a2be2);
+    color: white;
+}
+
+.message.echo {
+    align-self: flex-start;
+    background: rgba(50, 184, 198, 0.1);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    color: var(--color-text);
+}
+
+.chat-input {
+    display: flex;
+    gap: var(--space-8);
+    padding: var(--space-16);
+    border-top: 1px solid rgba(50, 184, 198, 0.3);
+}
+
+.chat-input .form-control {
+    flex: 1;
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(50, 184, 198, 0.3);
+    color: var(--color-text);
+}
+
+.voice-btn {
+    min-width: 50px;
+}
+
+/* Vocabulary Layout */
+.vocabulary-layout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-32);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 10px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #32b8c6, #8a2be2);
+    border-radius: var(--radius-full);
+    transition: width var(--duration-normal) var(--ease-standard);
+    width: 0%;
+}
+
+.progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+}
+
+.flashcard {
+    width: 400px;
+    height: 250px;
+    perspective: 1000px;
+    cursor: pointer;
+}
+
+.card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+}
+
+.flashcard.flipped .card-inner {
+    transform: rotateY(180deg);
+}
+
+.card-front, .card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-16);
+    padding: var(--space-24);
+}
+
+.card-back {
+    transform: rotateY(180deg);
+}
+
+.card-front h3, .card-back h3 {
+    color: #32b8c6;
+    font-size: var(--font-size-3xl);
+    margin: 0;
+}
+
+.card-controls {
+    display: flex;
+    gap: var(--space-16);
+}
+
+/* Pronunciation Layout */
+.pronunciation-layout {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-32);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.practice-word {
+    text-align: center;
+    background: rgba(0, 0, 0, 0.3);
+    padding: var(--space-32);
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+}
+
+.practice-word h3 {
+    color: #32b8c6;
+    font-size: var(--font-size-4xl);
+    margin-bottom: var(--space-16);
+}
+
+.recording-area {
+    text-align: center;
+}
+
+.record-visualizer {
+    width: 200px;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-16);
+    position: relative;
+    overflow: hidden;
+}
+
+.record-btn {
+    font-size: var(--font-size-lg);
+    padding: var(--space-16) var(--space-32);
+}
+
+.record-btn.recording {
+    background: #ff6b9d !important;
+    animation: pulse 1s infinite;
+}
+
+.pronunciation-feedback {
+    width: 100%;
+    padding: var(--space-16);
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-lg);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    text-align: center;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+/* Grammar Layout */
+.grammar-layout {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.question-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-32);
+    margin-bottom: var(--space-32);
+}
+
+.question-card h3 {
+    color: var(--color-text);
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-24);
+    text-align: center;
+}
+
+.options-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-16);
+}
+
+.option-btn {
+    padding: var(--space-16);
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    color: var(--color-text);
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.option-btn:hover {
+    background: rgba(50, 184, 198, 0.1);
+    border-color: rgba(50, 184, 198, 0.6);
+}
+
+.option-btn.correct {
+    background: rgba(46, 160, 67, 0.2);
+    border-color: #2ea043;
+    color: #2ea043;
+}
+
+.option-btn.incorrect {
+    background: rgba(218, 54, 51, 0.2);
+    border-color: #da3633;
+    color: #da3633;
+}
+
+.grammar-feedback {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-24);
+    text-align: center;
+}
+
+/* Quick Actions */
+.quick-actions {
+    position: fixed;
+    bottom: var(--space-24);
+    right: var(--space-24);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    z-index: 1000;
+}
+
+.quick-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    color: var(--color-text);
+    font-size: var(--font-size-xl);
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.quick-btn:hover {
+    background: rgba(50, 184, 198, 0.2);
+    border-color: rgba(50, 184, 198, 0.6);
+    transform: scale(1.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .home-layout {
+        grid-template-columns: 1fr;
+        gap: var(--space-24);
+        text-align: center;
+    }
+    
+    .echo-character {
+        width: 250px;
+        height: 250px;
+    }
+    
+    .modes-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .conversation-layout {
+        grid-template-columns: 1fr;
+        gap: var(--space-16);
+    }
+    
+    .character-side {
+        order: -1;
+        padding-top: 0;
+    }
+    
+    .flashcard {
+        width: 100%;
+        max-width: 350px;
+    }
+    
+    .user-stats {
+        gap: var(--space-16);
+    }
+    
+    .quick-actions {
+        bottom: var(--space-16);
+        right: var(--space-16);
+    }
+    
+    .quick-btn {
+        width: 50px;
+        height: 50px;
+        font-size: var(--font-size-lg);
+    }
+}
+
+/* Additional Styles for Scenarios */
+.scenarios-layout {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.scenario-selector {
+    margin-bottom: var(--space-32);
+}
+
+.scenario-buttons {
+    display: flex;
+    gap: var(--space-16);
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.scenario-btn {
+    padding: var(--space-12) var(--space-24);
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    color: var(--color-text);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.scenario-btn:hover, .scenario-btn.active {
+    background: rgba(50, 184, 198, 0.2);
+    border-color: rgba(50, 184, 198, 0.6);
+}
+
+.scenario-dialogue {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-24);
+}
+
+.dialogue-line {
+    margin-bottom: var(--space-16);
+    padding: var(--space-12);
+    border-radius: var(--radius-base);
+}
+
+.dialogue-line.waiter, .dialogue-line.interviewer {
+    background: rgba(50, 184, 198, 0.1);
+    border-left: 3px solid #32b8c6;
+}
+
+.dialogue-line.customer, .dialogue-line.candidate {
+    background: rgba(138, 43, 226, 0.1);
+    border-left: 3px solid #8a2be2;
+    margin-left: var(--space-24);
+}
+
+/* Daily Challenge Styles */
+.daily-layout {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.challenge-header {
+    text-align: center;
+    margin-bottom: var(--space-32);
+}
+
+.challenge-timer {
+    font-size: var(--font-size-3xl);
+    color: #ff6b9d;
+    font-weight: var(--font-weight-bold);
+    text-shadow: 0 0 10px rgba(255, 107, 157, 0.4);
+}
+
+.challenge-content {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-32);
+    margin-bottom: var(--space-32);
+    text-align: center;
+}
+
+.challenge-sentence {
+    font-size: var(--font-size-xl);
+    color: #32b8c6;
+    margin: var(--space-24) 0;
+}
+
+.word-bank {
+    display: flex;
+    gap: var(--space-12);
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.word-option {
+    padding: var(--space-8) var(--space-16);
+    background: rgba(138, 43, 226, 0.2);
+    border: 1px solid #8a2be2;
+    color: #8a2be2;
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.word-option:hover {
+    background: rgba(138, 43, 226, 0.3);
+    transform: translateY(-2px);
+}
+
+.word-option.selected {
+    background: #8a2be2;
+    color: white;
+}
+
+/* Progress Screen Styles */
+.progress-layout {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-24);
+    margin-bottom: var(--space-32);
+}
+
+.stat-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-24);
+    text-align: center;
+}
+
+.stat-card h3 {
+    color: var(--color-text);
+    margin-bottom: var(--space-16);
+    font-size: var(--font-size-lg);
+}
+
+.stat-number {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+    color: #32b8c6;
+    text-shadow: 0 0 10px rgba(50, 184, 198, 0.4);
+}
+
+.achievements-section h3 {
+    color: #32b8c6;
+    margin-bottom: var(--space-24);
+    text-align: center;
+}
+
+.achievements-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-16);
+}
+
+.achievement-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(50, 184, 198, 0.3);
+    border-radius: var(--radius-lg);
+    padding: var(--space-16);
+    text-align: center;
+    opacity: 0.5;
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.achievement-card.unlocked {
+    opacity: 1;
+    border-color: rgba(255, 215, 0, 0.6);
+    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
+}
+
+.achievement-icon {
+    font-size: var(--font-size-3xl);
+    margin-bottom: var(--space-8);
+    display: block;
+}
+
+.achievement-name {
+    color: #32b8c6;
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--space-4);
+}
+
+.achievement-description {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+}

test_echo_light_app.py

@@ -0,0 +1,89 @@
+import unittest
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+import time
+
+class EchoLightAppTest(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        # Adjust the path to your chromedriver if needed
+        cls.driver = webdriver.Chrome()
+        cls.driver.get('http://localhost:5500/index.html')  # Use your local server/port
+        cls.driver.maximize_window()
+        cls.wait = WebDriverWait(cls.driver, 10)
+
+    @classmethod
+    def tearDownClass(cls):
+        cls.driver.quit()
+
+    def test_1_text_chat(self):
+        driver = self.driver
+        wait = self.wait
+        # Find input and send a message
+        input_box = wait.until(EC.presence_of_element_located((By.ID, 'messageInput')))
+        input_box.clear()
+        input_box.send_keys('Hello, how are you?')
+        input_box.send_keys(Keys.ENTER)
+        # Wait for echo reply
+        wait.until(lambda d: len(d.find_elements(By.CSS_SELECTOR, '.message.echo')) > 0)
+        messages = driver.find_elements(By.CSS_SELECTOR, '.message.echo')
+        self.assertTrue(any('how are you' in m.text.lower() or m.text for m in messages))
+
+    def test_2_empty_message(self):
+        driver = self.driver
+        wait = self.wait
+        input_box = wait.until(EC.presence_of_element_located((By.ID, 'messageInput')))
+        input_box.clear()
+        input_box.send_keys('   ')
+        input_box.send_keys(Keys.ENTER)
+        # No new user message should be added
+        time.sleep(1)
+        user_msgs = driver.find_elements(By.CSS_SELECTOR, '.message.user')
+        self.assertFalse(user_msgs[-1].text.strip() == '')
+
+    def test_3_modes_navigation(self):
+        driver = self.driver
+        wait = self.wait
+        # Modes grid
+        modes = wait.until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, '.mode-card')))
+        for mode in modes:
+            mode.click()
+            time.sleep(0.5)
+            # Check that the screen is active
+            active = driver.find_elements(By.CSS_SELECTOR, '.screen.active')
+            self.assertTrue(len(active) > 0)
+
+    def test_4_vocabulary_card(self):
+        driver = self.driver
+        wait = self.wait
+        # Go to vocabulary mode
+        vocab_mode = wait.until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, '.mode-card')))[1]
+        vocab_mode.click()
+        time.sleep(0.5)
+        # Check card content
+        word = driver.find_element(By.ID, 'cardWord').text
+        self.assertTrue(len(word) > 0)
+        # Next card
+        next_btn = driver.find_element(By.ID, 'nextCardBtn') if driver.find_elements(By.ID, 'nextCardBtn') else None
+        if next_btn:
+            next_btn.click()
+            time.sleep(0.5)
+            new_word = driver.find_element(By.ID, 'cardWord').text
+            self.assertNotEqual(word, new_word)
+
+    def test_5_achievements(self):
+        driver = self.driver
+        wait = self.wait
+        # Go to achievements/progress screen
+        progress_btn = driver.find_element(By.ID, 'progressBtn') if driver.find_elements(By.ID, 'progressBtn') else None
+        if progress_btn:
+            progress_btn.click()
+            time.sleep(0.5)
+            achievements = driver.find_elements(By.CSS_SELECTOR, '.achievement-card')
+            self.assertTrue(len(achievements) > 0)
+
+if __name__ == '__main__':
+    unittest.main()