Spaces:
Sleeping
Sleeping
| <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> |