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>FEG Digital Campus | Plateforme Académique Intelligente</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| fegdark: '#1A1A2E', | |
| fegprimary: '#16213E', | |
| fegsecondary: '#0F3460', | |
| fegaccent: '#E94560', | |
| feglight: '#F1F6F9', | |
| }, | |
| animation: { | |
| 'float': 'float 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite', | |
| 'fade-in': 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1)', | |
| 'slide-up': 'slideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1)', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'wave': 'wave 3s ease-in-out infinite' | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-15px)' } | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.95)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' } | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(30px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| }, | |
| wave: { | |
| '0%, 100%': { transform: 'rotate(0deg)' }, | |
| '25%': { transform: 'rotate(5deg)' }, | |
| '75%': { transform: 'rotate(-5deg)' } | |
| } | |
| }, | |
| transitionTimingFunction: { | |
| 'in-expo': 'cubic-bezier(0.7, 0, 0.84, 0)', | |
| 'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)', | |
| 'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Noto Naskh Arabic', serif; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| transition: transform 0.3s ease, color 0.3s ease; | |
| } | |
| h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover { | |
| transform: translateY(-2px); | |
| } | |
| p, a, span { | |
| font-weight: 400; | |
| line-height: 1.8; | |
| transition: color 0.3s ease, transform 0.3s ease; | |
| } | |
| a:hover { | |
| transform: translateX(-3px); | |
| } | |
| .lang-switch input:checked + span { | |
| background-color: #D62828; | |
| transition: background-color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| } | |
| .lang-switch input:checked + span:before { | |
| transform: translateX(24px); | |
| transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| } | |
| .module-card { | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| transform-style: preserve-3d; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Microsoft-style Header --> | |
| <header class="bg-white text-gray-800 border-b border-gray-200"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-8"> | |
| <img src="http://static.photos/education/200x200/45" alt="University Logo" class="h-12 w-12"> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-fegred transition">الرئيسية</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-fegred transition">المقررات</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-fegred transition">المكتبة</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-fegred transition">التقويم</a> | |
| <a href="#" class="text-sm font-medium text-gray-600 hover:text-fegred transition">النتائج</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-fegred"> | |
| <span class="text-sm font-medium">بحث</span> | |
| <i data-feather="search" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| <div class="w-px h-6 bg-gray-300"></div> | |
| <button class="text-gray-600 hover:text-fegred flex items-center"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| <span class="text-sm font-medium mr-2">تسجيل الدخول</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Header --> | |
| <header class="bg-fegdark/95 text-feglight shadow-xl backdrop-blur-sm" data-aos="fade-down" data-aos-duration="600" data-aos-easing="ease-out-expo"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="http://static.photos/education/200x200/42" alt="FEG Logo" class="h-12 w-12 rounded-full border-2 border-fegwhite transition-transform duration-300 hover:rotate-12"> | |
| <div> | |
| <h1 class="text-xl font-bold leading-tight">كلية الاقتصاد والتدبير | Faculté d'Economie et de Gestion</h1> | |
| <p class="text-sm text-gray-300 tracking-wide">Plateforme d'enseignement numérique | منصة التعليم الرقمية</p> | |
| <!-- New Module 8 --> | |
| <div class="module-card bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200" data-aos="flip-left" data-aos-delay="800"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/marketing/640x360/108" alt="Marketing" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-fegblack">Marketing Digital - التسويق الرقمي</h3> | |
| <p class="text-gray-600 text-sm mb-4">Stratégies de marketing à l'ère numérique</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="file-text" class="w-3 h-3 mr-1"></i> PDF | |
| </span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="video" class="w-3 h-3 mr-1"></i> فيديو | |
| </span> | |
| </div> | |
| <a href="/module/marketing" class="text-fegred hover:text-red-700 text-sm font-medium">عرض المادة</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Module 9 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="900"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/management/640x360/109" alt="Gestion" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Gestion des Projets - إدارة المشاريع</h3> | |
| <p class="text-gray-300 text-sm mb-4">Méthodologies et outils de gestion de projet</p> | |
| <div class="space-y-2"> | |
| <a href="/pdf/gestion-projets.pdf" class="text-fegwhite hover:text-gray-300 flex items-center" target="_blank"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> تحميل PDF | |
| </a> | |
| <a href="#" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> دروس فيديو | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Module 10 --> | |
| <div class="module-card bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200" data-aos="flip-left" data-aos-delay="1000"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/finance/640x360/110" alt="Finance" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-fegblack">Finance d'Entreprise - تمويل المؤسسات</h3> | |
| <p class="text-gray-600 text-sm mb-4">Analyse financière et décisions d'investissement</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="file-text" class="w-3 h-3 mr-1"></i> PDF | |
| </span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="video" class="w-3 h-3 mr-1"></i> فيديو | |
| </span> | |
| </div> | |
| <a href="/module/finance" class="text-fegred hover:text-red-700 text-sm font-medium">عرض المادة</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative group"> | |
| <button class="bg-fegred text-white p-2 rounded-full hover:bg-red-700 transition"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-50 hidden group-hover:block hover:block"> | |
| <div class="py-1"> | |
| <a href="/" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="home" class="w-4 h-4 mr-2"></i> الصفحة الرئيسية | |
| </a> | |
| <a href="/pdf" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-2"></i> المكتبة الرقمية | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2"></i> الجدول الدراسي | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="clipboard" class="w-4 h-4 mr-2"></i> النتائج الدراسية | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="mail" class="w-4 h-4 mr-2"></i> الرسائل | |
| </a> | |
| <div class="border-t border-gray-200 my-1"></div> | |
| <div class="lang-switch flex items-center px-4 py-2"> | |
| <label class="flex items-center cursor-pointer"> | |
| <div class="relative"> | |
| <input type="checkbox" class="sr-only" id="lang-toggle"> | |
| <span class="block bg-gray-300 w-12 h-6 rounded-full transition"></span> | |
| <span class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition flex items-center justify-center"> | |
| <span class="text-xs">AR</span> | |
| </span> | |
| </div> | |
| </label> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-fegblack hover:bg-gray-100 flex items-center"> | |
| <i data-feather="user" class="w-4 h-4 mr-2"></i> تسجيل الدخول | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Microsoft-style Hero --> | |
| <section class="bg-gray-50 py-16 border-b border-gray-200"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">منصة التعليم الرقمية لكلية الاقتصاد والتدبير</h1> | |
| <p class="text-lg text-gray-600 mb-6">توفر لك المنصة أحدث الأدوات والموارد التعليمية لدعم مسيرتك الأكاديمية</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-fegred text-white px-6 py-3 rounded-md font-medium hover:bg-red-700 transition">بدء الاستخدام</a> | |
| <a href="#" class="border border-gray-300 text-gray-700 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">تعرف على المزيد</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/education/640x360/150" alt="Digital Learning" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modules Section --> | |
| <section class="py-16 bg-feglight/80 backdrop-blur-sm" data-aos="fade-up" data-aos-delay="200" data-aos-easing="ease-out-expo"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold text-fegblack mb-8 text-right leading-relaxed border-b-2 border-fegred pb-2">المواد الدراسية - الفصل الأول | Matières - Semestre 1</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Module 1 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="100"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/finance/640x360/101" alt="Microéconomie" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2 leading-snug">Microéconomie - الاقتصاد الجزئي</h3> | |
| <p class="text-gray-300 text-sm mb-4 tracking-wide">Introduction à la microéconomie et ses concepts de base</p> | |
| <div class="mb-3 space-y-2"> | |
| <a href="https://youtube.com/playlist?list=PLdSOG2rLOioy2gKybkAPKEKF6xCwnINOB" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> سلسلة دروس Microéconomie | |
| </a> | |
| <a href="https://youtube.com/playlist?list=PLHv_18PNzsypUfqnQBBvI-P4MCXDut1ZH" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> سلسلة تمارين Microéconomie | |
| </a> | |
| <a href="/pdf/microeconomie.pdf" class="text-fegwhite hover:text-gray-300 flex items-center" target="_blank"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> تحميل PDF | |
| </a> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="file-text" class="w-3 h-3 mr-1"></i> PDF | |
| </span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="video" class="w-3 h-3 mr-1"></i> فيديو | |
| </span> | |
| </div> | |
| <a href="/module/microeconomie" class="text-fegred hover:text-red-700 text-sm font-medium">عرض المادة</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="200"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/finance/640x360/102" alt="Comptabilité" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Comptabilité Générale - المحاسبة العامة</h3> | |
| <p class="text-gray-300 text-sm mb-4">Principes fondamentaux de la comptabilité générale</p> | |
| <div class="space-y-2"> | |
| <a href="https://youtube.com/playlist?list=PLqmCAgxDgDfAiY_nvsxNnLbMR2I-eXqtP" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> أساسيات المحاسبة | |
| </a> | |
| <a href="https://youtube.com/playlist?list=PLTuuQN_bAwZ5yMmiQQc4dcbBH38ATDgVd" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> تطبيقات محاسبية | |
| </a> | |
| <a href="https://youtube.com/playlist?list=PLfYdT9Nw_EMsoNyE7nmLgjHOMncI-5Hov" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> تمارين محلولة | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="300"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/science/640x360/103" alt="Statistique" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Statistique Descriptive - الإحصاء الوصفي</h3> | |
| <p class="text-gray-300 text-sm mb-4">Méthodes statistiques pour l'analyse des données</p> | |
| <div class="space-y-2"> | |
| <a href="/pdf/statistique.pdf" class="text-fegwhite hover:text-gray-300 flex items-center" target="_blank"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> تحميل PDF | |
| </a> | |
| <a href="#" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> فيديو | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 4 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="400"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/education/640x360/104" alt="Mathématiques" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Mathématiques Appliquées - الرياضيات التطبيقية</h3> | |
| <p class="text-gray-300 text-sm mb-4">Outils mathématiques pour l'économie et la gestion</p> | |
| <div class="space-y-2"> | |
| <a href="https://youtube.com/playlist?list=PLACAjAPLo-gd4CBbW4B0gn3hfnbEUosVr" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> الرياضيات التطبيقية | |
| </a> | |
| <a href="/pdf/mathematiques.pdf" class="text-fegwhite hover:text-gray-300 flex items-center" target="_blank"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> تحميل PDF | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 5 --> | |
| <div class="module-card bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200" data-aos="flip-left" data-aos-delay="500"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/technology/640x360/105" alt="Informatique" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg text-fegblack mb-2">Informatique de Gestion - إعلاميات التدبير</h3> | |
| <p class="text-gray-600 text-sm mb-4">Bases de l'informatique appliquée à la gestion</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="file-text" class="w-3 h-3 mr-1"></i> PDF | |
| </span> | |
| <span class="bg-gray-100 px-2 py-1 rounded text-xs flex items-center"> | |
| <i data-feather="video" class="w-3 h-3 mr-1"></i> فيديو | |
| </span> | |
| </div> | |
| <a href="/module/informatique" class="text-fegred hover:text-red-700 text-sm font-medium">عرض المادة</a> | |
| </div> | |
| </div> | |
| </div>= | |
| <!-- Module 6 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="600"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/legal/640x360/106" alt="Droit" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Introduction au Droit - مدخل إلى القانون</h3> | |
| <p class="text-gray-300 text-sm mb-4">Notions fondamentales du droit des affaires</p> | |
| <div class="space-y-2"> | |
| <a href="https://youtube.com/playlist?list=PLdSOG2rLOiowc8hVymXW1qPd2rWGQK03X" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> مدخل إلى القانون | |
| </a> | |
| <a href="/pdf/droit.pdf" class="text-fegwhite hover:text-gray-300 flex items-center" target="_blank"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-1"></i> تحميل PDF | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 7 --> | |
| <div class="module-card bg-fegblack rounded-xl shadow-xl overflow-hidden border border-fegred" data-aos="flip-left" data-aos-delay="700"> | |
| <div class="h-48 bg-gray-100 flex items-center justify-center"> | |
| <img src="http://static.photos/workspace/640x360/107" alt="Méthodologie" class="h-full w-full object-cover transition-all duration-500 hover:scale-105"> | |
| </div> | |
| <div class="p-4 text-fegwhite"> | |
| <h3 class="font-bold text-lg mb-2">Méthodologie de Travail - منهجية العمل</h3> | |
| <p class="text-gray-300 text-sm mb-4">Techniques et méthodes pour réussir vos études</p> | |
| <div class="space-y-2"> | |
| <a href="https://youtube.com/playlist?list=PLadUi5zd4PzXUThez2AZz4PMA05S7Roy6" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> إدارة الوقت والدراسة | |
| </a> | |
| <a href="https://youtube.com/playlist?list=PLVrGyMNgo3FgiRd7oQKspKIzx2SvVlyxX" target="_blank" class="text-fegred hover:text-red-400 flex items-center"> | |
| <i data-feather="video" class="w-4 h-4 mr-1"></i> تقنيات المذاكرة | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| ></div> | |
| </div> | |
| </section> | |
| <!-- Microsoft-style Features --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">لماذا تختار منصتنا التعليمية؟</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition"> | |
| <div class="text-fegred mb-4"> | |
| <i data-feather="book-open" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">مواد دراسية شاملة</h3> | |
| <p class="text-gray-600">أحدث المحتويات التعليمية المطورة من قبل أساتذة متخصصين</p> | |
| <a href="#" class="inline-block mt-4 text-fegred font-medium flex items-center"> | |
| اكتشف المزيد <i data-feather="arrow-left" class="w-4 h-4 mr-1"></i> | |
| </a> | |
| </div> | |
| <div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition"> | |
| <div class="text-fegred mb-4"> | |
| <i data-feather="calendar" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">إدارة التعلم</h3> | |
| <p class="text-gray-600">أدوات متكاملة لمتابعة التقدم الدراسي والجدول الزمني</p> | |
| <a href="#" class="inline-block mt-4 text-fegred font-medium flex items-center"> | |
| اكتشف المزيد <i data-feather="arrow-left" class="w-4 h-4 mr-1"></i> | |
| </a> | |
| </div> | |
| <div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition"> | |
| <div class="text-fegred mb-4"> | |
| <i data-feather="users" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">تعاون أكاديمي</h3> | |
| <p class="text-gray-600">منصات تفاعلية للتواصل مع الزملاء والأساتذة</p> | |
| <a href="#" class="inline-block mt-4 text-fegred font-medium flex items-center"> | |
| اكتشف المزيد <i data-feather="arrow-left" class="w-4 h-4 mr-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16 bg-fegdark text-feglight" data-aos="fade-up" data-aos-easing="ease-out-expo"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-bold text-fegblack border-b-2 border-fegred pb-2 w-max mx-auto">تواصل معنا</h2> | |
| <p class="mt-2">Contactez-nous pour toute question ou problème</p> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-gray-100 p-6"> | |
| <h3 class="font-bold text-lg text-fegblack mb-4">معلومات الاتصال</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i data-feather="mail" class="text-fegred w-5 h-5 mt-1 mr-2"></i> | |
| <div> | |
| <p class="font-medium text-gray-800">البريد الإلكتروني</p> | |
| <p class="text-gray-600">imranesefriwi207@gmail.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i data-feather="map-pin" class="text-fegred w-5 h-5 mt-1 mr-2"></i> | |
| <div> | |
| <p class="font-medium text-gray-800">العنوان</p> | |
| <p class="text-gray-600">كلية الاقتصاد والتدبير، جامعة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-6"> | |
| <h3 class="font-bold text-lg text-fegblack mb-4">أرسل رسالة</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <input type="text" placeholder="الاسم الكامل" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fegred focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <input type="email" placeholder="البريد الإلكتروني" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fegred focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <textarea rows="3" placeholder="الرسالة" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fegred focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-fegwhite text-fegblack py-2 px-4 rounded-md hover:bg-gray-200 transition">إرسال | Envoyer</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Microsoft-style Footer --> | |
| <footer class="bg-gray-100 border-t border-gray-200 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900 mb-4">التعليم</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">المقررات الدراسية</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الدروس المصورة</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الامتحانات</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900 mb-4">الموارد</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">المكتبة الرقمية</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الأبحاث</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الأدلة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900 mb-4">الدعم</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الأسئلة الشائعة</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الدعم الفني</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900 mb-4">حول الكلية</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">عن الكلية</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الأخبار</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-fegred transition">الوظائف</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> | |
| <img src="http://static.photos/education/200x200/45" alt="University Logo" class="h-10 w-10"> | |
| <span class="text-gray-500">© 2023 FEG Digital Campus</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-fegred transition"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-fegred transition"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-fegred transition"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-fegred transition"> | |
| <i data-feather="youtube" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Toggle menu on mobile | |
| document.querySelector('.group button').addEventListener('click', function() { | |
| const menu = this.nextElementSibling; | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Close menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const menu = document.querySelector('.group .hidden'); | |
| const button = document.querySelector('.group button'); | |
| if (menu && !menu.contains(event.target) && !button.contains(event.target)) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 1000, | |
| once: true, | |
| easing: 'ease-out-expo', | |
| offset: 120, | |
| delay: 150 | |
| }); | |
| // Add hover animations to cards | |
| document.querySelectorAll('.module-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('animate-wave'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('animate-wave'); | |
| card.style.transform = ''; | |
| }); | |
| }); | |
| // Language toggle functionality | |
| document.getElementById('lang-toggle').addEventListener('change', function() { | |
| if(this.checked) { | |
| document.documentElement.lang = 'fr'; | |
| document.documentElement.dir = 'ltr'; | |
| document.title = "FEG - Faculté d'Economie et de Gestion"; | |
| } else { | |
| document.documentElement.lang = 'ar'; | |
| document.documentElement.dir = 'rtl'; | |
| document.title = "FEG - كلية الاقتصاد والتدبير"; | |
| } | |
| }); | |
| // Scroll reveal animations | |
| window.addEventListener('scroll', () => { | |
| const elements = document.querySelectorAll('[data-aos]'); | |
| elements.forEach(el => { | |
| const position = el.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if(position < windowHeight - 100) { | |
| el.style.opacity = '1'; | |
| el.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |