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>المعهد RT - منصة التعليم الإلكتروني</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%); | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .secret-code-input { | |
| letter-spacing: 0.5em; | |
| font-family: monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-2xl" data-aos="fade-down"> | |
| <nav class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i data-feather="book-open" class="w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold">المعهد RT</h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#courses" class="hover:text-blue-200 transition">الدورات</a> | |
| <a href="#about" class="hover:text-blue-200 transition">عن المعهد</a> | |
| <a href="#contact" class="hover:text-blue-200 transition">اتصل بنا</a> | |
| </div> | |
| <button class="md:hidden" id="mobile-menu-btn"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div id="vanta-bg" class="w-full h-full"></div> | |
| </div> | |
| <div class="relative z-10 text-center text-white px-6" data-aos="fade-up"> | |
| <h2 class="text-5xl md:text-7xl font-bold mb-6">مرحباً بك في المعهد الرقمي</h2> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">منصة تعليمية متكاملة لتطوير مهاراتك الرقمية</p> | |
| <button id="secret-btn" class="bg-white text-blue-800 px-8 py-4 rounded-full font-bold text-lg hover-lift pulse-animation"> | |
| ابدأ رحلتك التعليمية | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Secret Code Modal --> | |
| <div id="secret-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center"> | |
| <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all" data-aos="zoom-in"> | |
| <div class="text-center mb-6"> | |
| <i data-feather="lock" class="w-16 h-16 text-purple-600 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-800">أدخل الرقم السري</h3> | |
| <p class="text-gray-600 mt-2">للوصول إلى الدروس الخاصة</p> | |
| </div> | |
| <input type="password" id="secret-code" class="secret-code-input w-full text-center text-2xl py-4 px-6 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none mb-6" placeholder="••••" maxlength="4"> | |
| <button id="verify-btn" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 rounded-lg font-bold hover:from-purple-700 hover:to-blue-700 transition"> | |
| تحقق | |
| </button> | |
| <p id="error-msg" class="text-red-500 text-sm mt-4 text-center hidden">الرقم السري غير صحيح</p> | |
| </div> | |
| </div> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-12 text-gray-800" data-aos="fade-up">دوراتنا التعليمية</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- Empty grid to maintain layout --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0" data-aos="fade-right"> | |
| <img src="http://static.photos/office/640x360/4" alt="عن المعهد" class="rounded-xl shadow-2xl"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-12" data-aos="fade-left"> | |
| <h2 class="text-4xl font-bold mb-6 text-gray-800">عن المعهد الرقمي</h2> | |
| <p class="text-lg text-gray-600 mb-6"> | |
| نحن منصة تعليمية رائدة متخصصة في تقديم دورات تدريبية عالية الجودة في مجالات التكنولوجيا المختلفة. | |
| نسعى لتمكين الأفراد من تطوير مهاراتهم الرقمية والوصول إلى فرص عمل أفضل. | |
| </p> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">500+</div> | |
| <div class="text-gray-600">طالب ناجح</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">50+</div> | |
| <div class="text-gray-600">دورة تدريبية</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download Section (Hidden by default) --> | |
| <section id="download-section" class="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white hidden"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">تحميل الدرس</h2> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl p-8 text-gray-800" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="download-cloud" class="w-16 h-16 text-purple-600 mx-auto mb-4"></i> | |
| <h3 class="text-2xl font-bold mb-4">الدرس الأول: مقدمة في البرمجة</h3> | |
| <p class="text-gray-600 mb-6">حجم الملف: 45 ميجابايت | المدة: 2 ساعة</p> | |
| <button id="download-btn" class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-4 rounded-full font-bold text-lg hover-lift"> | |
| <i data-feather="download" class="inline w-5 h-5 ml-2"></i> | |
| تحميل الآن | |
| </button> | |
| <div id="download-progress" class="mt-6 hidden"> | |
| <div class="bg-gray-200 rounded-full h-4 overflow-hidden"> | |
| <div id="progress-bar" class="bg-gradient-to-r from-purple-600 to-blue-600 h-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| <p id="progress-text" class="mt-2 text-sm">0%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">المعهد RT</h3> | |
| <p class="text-gray-400">منصتك الأولى للتعليم الرقمي والتطوير المهني</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#courses" class="hover:text-white transition">الدورات</a></li> | |
| <li><a href="#about" class="hover:text-white transition">عن المعهد</a></li> | |
| <li><a href="#contact" class="hover:text-white transition">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تواصل معنا</h4> | |
| <div class="flex items-center space-x-4 space-x-reverse mb-2"> | |
| <i data-feather="phone" class="w-5 h-5"></i> | |
| <span class="text-gray-400">9200 12345</span> | |
| </div> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تابعنا</h4> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 المعهد RT. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| color2: 0x1e3a8a, | |
| size: 1.00, | |
| backgroundColor: 0x1e3a8a | |
| }); | |
| // Secret code functionality | |
| const secretBtn = document.getElementById('secret-btn'); | |
| const secretModal = document.getElementById('secret-modal'); | |
| const verifyBtn = document.getElementById('verify-btn'); | |
| const secretCodeInput = document.getElementById('secret-code'); | |
| const errorMsg = document.getElementById('error-msg'); | |
| const downloadSection = document.getElementById('download-section'); | |
| secretBtn.addEventListener('click', () => { | |
| secretModal.classList.remove('hidden'); | |
| anime({ | |
| targets: '#secret-modal > div', | |
| scale: [0.8, 1], | |
| opacity: [0, 1], | |
| duration: 500, | |
| easing: 'easeOutElastic' | |
| }); | |
| }); | |
| verifyBtn.addEventListener('click', () => { | |
| if (secretCodeInput.value === '4321') { | |
| secretModal.classList.add('hidden'); | |
| downloadSection.classList.remove('hidden'); | |
| errorMsg.classList.add('hidden'); | |
| // Scroll to download section | |
| document.getElementById('download-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Animate download section | |
| anime({ | |
| targets: '#download-section', | |
| translateY: [50, 0], | |
| opacity: [0, 1], | |
| duration: 1000, | |
| easing: 'easeOutQuad' | |
| }); | |
| } else { | |
| errorMsg.classList.remove('hidden'); | |
| anime({ | |
| targets: '#secret-code', | |
| translateX: [-10, 10, -10, 10, 0], | |
| duration: 500, | |
| easing: 'easeInOutQuad' | |
| }); | |
| } | |
| }); | |
| // Download functionality | |
| const downloadBtn = document.getElementById('download-btn'); | |
| const downloadProgress = document.getElementById('download-progress'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressText = document.getElementById('progress-text'); | |
| downloadBtn.addEventListener('click', () => { | |
| downloadBtn.disabled = true; | |
| downloadBtn.innerHTML = '<i data-feather="loader" class="inline w-5 h-5 ml-2 animate-spin"></i> جاري التحميل...'; | |
| feather.replace(); | |
| downloadProgress.classList.remove('hidden'); | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 15; | |
| if (progress >= 100) { | |
| progress = 100; | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| downloadBtn.innerHTML = '<i data-feather="check" class="inline w-5 h-5 ml-2"></i> تم التحميل بنجاح'; | |
| downloadBtn.classList.remove('from-purple-600', 'to-blue-600'); | |
| downloadBtn.classList.add('from-green-600', 'to-green-700'); | |
| feather.replace(); | |
| // Create download link (simulation) | |
| const link = document.createElement('a'); | |
| link.href = 'data:text/plain;charset=utf-8,محتوى الدرس الأول'; | |
| link.download = 'الدرس_الاول_مقدمة_في_البرمجة.txt'; | |
| link.click(); | |
| }, 500); | |
| } | |
| progressBar.style.width = progress + '%'; | |
| progressText.textContent = Math.round(progress) + '%'; | |
| }, 200); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.className = 'md:hidden fixed inset-0 bg-purple-900 bg-opacity-95 z-40 hidden'; | |
| mobileMenu.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center h-full space-y-8 text-xl"> | |
| <a href="#courses" class="text-white hover:text-blue-200 transition" onclick="mobileMenu.classList.add('hidden')">الدورات</a> | |
| <a href="#about" class="text-white hover:text-blue-200 transition" onclick="mobileMenu.classList.add('hidden')">عن المعهد</a> | |
| <a href="#contact" class="text-white hover:text-blue-200 transition" onclick="mobileMenu.classList.add('hidden')">اتصل بنا</a> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| }); | |
| // Replace feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |