Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>لغتي - تعلم اللغات بسهولة</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .language-flag { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid white; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-ring { | |
| position: relative; | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .progress-ring__circle { | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| transition: stroke-dashoffset 0.35s; | |
| } | |
| .lesson-card { | |
| transition: all 0.3s ease; | |
| } | |
| .lesson-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .streak-fire { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .tab-active { | |
| position: relative; | |
| } | |
| .tab-active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 30px; | |
| height: 3px; | |
| background-color: #4f46e5; | |
| border-radius: 3px; | |
| } | |
| .badge-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .badge-icon:hover { | |
| transform: scale(1.1) rotate(10deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <img src="https://via.placeholder.com/40" alt="Logo" class="rounded-full"> | |
| <h1 class="text-xl font-bold">لغتي</h1> | |
| </div> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <button id="notificationsBtn" class="relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button id="profileBtn"> | |
| <img src="https://via.placeholder.com/40" alt="Profile" class="rounded-full"> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Welcome Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-2xl font-bold mb-2">مرحباً بك، أحمد!</h2> | |
| <p class="text-gray-600 mb-4">استمر في التعلم لتحافظ على سلسلتك اليومية</p> | |
| <div class="flex items-center space-x-3 space-x-reverse"> | |
| <div class="flex items-center bg-indigo-100 px-3 py-1 rounded-full"> | |
| <div class="streak-fire text-yellow-500 mr-2"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <span class="font-bold text-indigo-800">7 أيام</span> | |
| </div> | |
| <div class="flex items-center bg-green-100 px-3 py-1 rounded-full"> | |
| <div class="text-green-600 mr-2"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <span class="font-bold text-green-800">450</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <svg class="w-32 h-32"> | |
| <circle cx="64" cy="64" r="60" fill="none" stroke="#e0e0e0" stroke-width="8"/> | |
| <circle cx="64" cy="64" r="60" fill="none" stroke="#4f46e5" stroke-width="8" stroke-dasharray="377" stroke-dashoffset="113" class="progress-ring__circle"/> | |
| </svg> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center"> | |
| <span class="text-3xl font-bold text-indigo-600">65%</span> | |
| <span class="text-sm text-gray-500">إنجاز اليوم</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Language Selection --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">اختر اللغة التي تريد تعلمها</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center"> | |
| <img src="https://flagcdn.com/w80/gb.png" alt="English" class="language-flag mb-3"> | |
| <h3 class="font-bold mb-2">الإنجليزية</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">45% مكتمل</span> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center"> | |
| <img src="https://flagcdn.com/w80/jp.png" alt="Japanese" class="language-flag mb-3"> | |
| <h3 class="font-bold mb-2">اليابانية</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 20%"></div> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">20% مكتمل</span> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center"> | |
| <img src="https://flagcdn.com/w80/in.png" alt="Hindi" class="language-flag mb-3"> | |
| <h3 class="font-bold mb-2">الهندية</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 10%"></div> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">10% مكتمل</span> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center"> | |
| <img src="https://flagcdn.com/w80/kr.png" alt="Korean" class="language-flag mb-3"> | |
| <h3 class="font-bold mb-2">الكورية</h3> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 5%"></div> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">5% مكتمل</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Daily Goal --> | |
| <section class="mb-8"> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6 text-white"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">الهدف اليومي</h2> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <i class="fas fa-trophy"></i> | |
| <span class="font-bold">150 XP</span> | |
| </div> | |
| </div> | |
| <div class="w-full bg-white bg-opacity-30 rounded-full h-4 mb-3"> | |
| <div class="bg-white h-4 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>100 XP مكتمل</span> | |
| <span>150 XP الهدف</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lessons Section --> | |
| <section class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">دروس الإنجليزية</h2> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-medium">A2</button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm font-medium">B1</button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm font-medium">B2</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Lesson Card 1 --> | |
| <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <h3 class="font-bold">المستوى 5</h3> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">جديد</span> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">الأفعال الشائعة</h4> | |
| <p class="text-gray-600 text-sm mb-4">تعلم 20 فعل شائع في المحادثات اليومية</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">15 دقيقة</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">20 كلمة</span> | |
| </div> | |
| <button class="bg-indigo-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson Card 2 --> | |
| <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3"> | |
| <i class="fas fa-headphones"></i> | |
| </div> | |
| <h3 class="font-bold">المستوى 4</h3> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">مراجعة</span> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">المحادثة الأساسية</h4> | |
| <p class="text-gray-600 text-sm mb-4">تدرب على المحادثات اليومية مع متحدثين أصليين</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">10 دقيقة</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">5 حوارات</span> | |
| </div> | |
| <button class="bg-indigo-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson Card 3 --> | |
| <div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3"> | |
| <i class="fas fa-pen"></i> | |
| </div> | |
| <h3 class="font-bold">المستوى 3</h3> | |
| </div> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">اختبار</span> | |
| </div> | |
| <h4 class="text-lg font-semibold mb-2">قواعد اللغة</h4> | |
| <p class="text-gray-600 text-sm mb-4">اختبار فهمك للأزمنة الأساسية في الإنجليزية</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">8 دقائق</span> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">12 سؤال</span> | |
| </div> | |
| <button class="bg-indigo-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button class="text-indigo-600 font-medium flex items-center justify-center mx-auto"> | |
| <span>عرض جميع الدروس</span> | |
| <i class="fas fa-chevron-left mr-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Story Mode --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">قصة تعليمية</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/800x300" alt="Story Cover" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-lg">رحلة أحمد في لندن</h3> | |
| <p class="text-white text-sm">تعلم الإنجليزية من خلال مغامرة أحمد في العاصمة البريطانية</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white mr-2"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-sm font-medium">الفصل 1 مكتمل</span> | |
| </div> | |
| <span class="text-sm text-gray-500">3/10 فصول</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-4"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-book-open mr-2"></i> | |
| <span>استمر في القراءة</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leaderboard --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-bold mb-4">تصنيف المتعلمين</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium">أنت</h4> | |
| <p class="text-sm text-gray-500">150 XP هذا الأسبوع</p> | |
| </div> | |
| </div> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">#24</span> | |
| </div> | |
| </div> | |
| <div class="divide-y"> | |
| <!-- Top 1 --> | |
| <div class="p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-400 flex items-center justify-center text-white font-bold mr-3">1</div> | |
| <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium">سارة</h4> | |
| <p class="text-sm text-gray-500">1250 XP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-yellow-500"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| </div> | |
| <!-- Top 2 --> | |
| <div class="p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-white font-bold mr-3">2</div> | |
| <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium">محمد</h4> | |
| <p class="text-sm text-gray-500">980 XP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-gray-400"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| </div> | |
| <!-- Top 3 --> | |
| <div class="p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center text-white font-bold mr-3">3</div> | |
| <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium">ليلى</h4> | |
| <p class="text-sm text-gray-500">850 XP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-amber-600"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 text-center"> | |
| <button class="text-indigo-600 font-medium">عرض الكل</button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-around"> | |
| <button class="py-3 px-6 flex flex-col items-center text-indigo-600 tab-active"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">الرئيسية</span> | |
| </button> | |
| <button class="py-3 px-6 flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-book text-lg"></i> | |
| <span class="text-xs mt-1">الدروس</span> | |
| </button> | |
| <button class="py-3 px-6 flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-trophy text-lg"></i> | |
| <span class="text-xs mt-1">الإنجازات</span> | |
| </button> | |
| <button class="py-3 px-6 flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">حسابي</span> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Achievement Popup --> | |
| <div id="achievementPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4 text-center"> | |
| <div class="bg-yellow-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-trophy text-yellow-500 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">تهانينا!</h3> | |
| <p class="text-gray-600 mb-4">لقد أكملت 7 أيام متتالية من التعلم</p> | |
| <div class="flex items-center justify-center space-x-2 space-x-reverse mb-4"> | |
| <i class="fas fa-gem text-green-500"></i> | |
| <span class="font-bold">+50</span> | |
| </div> | |
| <button id="closePopupBtn" class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium"> | |
| ممتاز! | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Show achievement popup after 2 seconds (simulating) | |
| setTimeout(() => { | |
| document.getElementById('achievementPopup').classList.remove('hidden'); | |
| }, 2000); | |
| // Close popup | |
| document.getElementById('closePopupBtn').addEventListener('click', () => { | |
| document.getElementById('achievementPopup').classList.add('hidden'); | |
| }); | |
| // Navigation buttons functionality | |
| const navButtons = document.querySelectorAll('nav button'); | |
| navButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| navButtons.forEach(btn => { | |
| btn.classList.remove('text-indigo-600', 'tab-active'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| button.classList.remove('text-gray-500'); | |
| button.classList.add('text-indigo-600', 'tab-active'); | |
| }); | |
| }); | |
| // Lesson card buttons | |
| const lessonButtons = document.querySelectorAll('.lesson-card button'); | |
| lessonButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| alert('سيتم تحويلك إلى صفحة الدرس الآن!'); | |
| }); | |
| }); | |
| // Profile and notification buttons | |
| document.getElementById('profileBtn').addEventListener('click', () => { | |
| alert('سيتم فتح صفحة الملف الشخصي'); | |
| }); | |
| document.getElementById('notificationsBtn').addEventListener('click', () => { | |
| alert('سيتم فتح صفحة الإشعارات'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mohammed6788/zoom" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |