ProfMerlin/golden-science-knowledge-platform
0
1<!DOCTYPE html>2<html lang="ar" dir="rtl">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>منصة العلوم والمعرفة | Science & Knowledge Platform</title>7 <link rel="icon" type="image/x-icon" href="https://i.imgur.com/8mE4G9i.png">8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">13</head>14<body class="bg-gray-50 text-gray-900 font-['Cairo'] transition-colors duration-300">15 <!-- Header -->16 <header class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-900 dark:text-white transition-colors duration-300">17 <div class="container mx-auto px-4 py-4 flex items-center justify-between">18 <div class="flex items-center gap-3">19 <img src="https://i.imgur.com/8mE4G9i.png" alt="شعار المنصة" class="w-10 h-10 rounded-full">20 <h1 class="text-xl font-bold text-gray-800 dark:text-white">منصة العلوم والمعرفة</h1>21 </div>22 <nav class="hidden md:flex items-center gap-6 text-sm font-semibold">23 <a href="index.html" class="hover:text-yellow-600 transition">الرئيسية</a>24 <a href="magazine.html" class="hover:text-yellow-600 transition">المجلة</a>25 <a href="library.html" class="hover:text-yellow-600 transition">المكتبة</a>26 <a href="authors.html" class="hover:text-yellow-600 transition">أبرز الكُتّاب</a>27 <a href="about.html" class="hover:text-yellow-600 transition">من نحن</a>28 <a href="contact.html" class="hover:text-yellow-600 transition">اتصل بنا</a>29 <a href="submit.html" class="bg-yellow-500 text-white px-3 py-2 rounded-lg hover:bg-yellow-600 transition">نشر مقالة</a>30 </nav>31 <div class="flex items-center gap-3">32 <button id="darkToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">33 <i data-feather="moon"></i>34 </button>35 <button id="langToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">36 <i data-feather="globe"></i>37 </button>38 <button id="menuToggle" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">39 <i data-feather="menu"></i>40 </button>41 </div>42 </div>43 <!-- Mobile Menu -->44 <div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-gray-900 px-4 pb-4 space-y-2 text-sm font-semibold">45 <a href="index.html" class="block py-2">الرئيسية</a>46 <a href="magazine.html" class="block py-2">المجلة</a>47 <a href="library.html" class="block py-2">المكتبة</a>48 <a href="authors.html" class="block py-2">أبرز الكُتّاب</a>49 <a href="about.html" class="block py-2">من نحن</a>50 <a href="contact.html" class="block py-2">اتصل بنا</a>51 <a href="submit.html" class="block py-2">نشر مقالة</a>52 </div>53 </header>54 55 <!-- Hero Section -->56 <section class="py-16 bg-gradient-to-b from-yellow-50 to-white dark:from-gray-800 dark:to-gray-900">57 <div class="container mx-auto px-4 text-center">58 <h2 class="text-4xl font-bold mb-4 text-gray-800 dark:text-white">مرحباً بك في منصة العلوم والمعرفة</h2>59 <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-6">60 اكتشف مقالات وبحوثًا علمية في المالية، الإدارة، الموارد البشرية، والتنمية.61 </p>62 <a href="magazine.html" class="inline-block bg-yellow-500 text-white px-6 py-3 rounded-lg hover:bg-yellow-600 transition">63 ابدأ التصفح64 </a>65 </div>66 </section>67 68 <!-- Latest Articles -->69 <section class="py-12">70 <div class="container mx-auto px-4">71 <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">أحدث المقالات</h3>72 <div id="articles" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">73 <!-- Dynamic content -->74 </div>75 </div>76 </section>77 78 <!-- Featured Authors -->79 <section class="py-12 bg-gray-100 dark:bg-gray-800">80 <div class="container mx-auto px-4">81 <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">أبرز الكُتّاب</h3>82 <div id="authors" class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">83 <!-- Dynamic content -->84 </div>85 </div>86 </section>87 88 <!-- Reader Reviews -->89 <section class="py-12">90 <div class="container mx-auto px-4">91 <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">آراء القراء</h3>92 <div id="reviews" class="space-y-4 max-w-3xl mx-auto">93 <!-- Dynamic content -->94 </div>95 </div>96 </section>97 98 <!-- Footer -->99 <footer class="bg-gray-900 text-white py-8">100 <div class="container mx-auto px-4 text-center">101 <p class="mb-2">© 2024 منصة العلوم والمعرفة</p>102 <div class="flex justify-center gap-4">103 <a href="#" class="hover:text-yellow-400 transition"><i data-feather="facebook"></i></a>104 <a href="#" class="hover:text-yellow-400 transition"><i data-feather="twitter"></i></a>105 <a href="#" class="hover:text-yellow-400 transition"><i data-feather="linkedin"></i></a>106 </div>107 </div>108 </footer>109 110 <script src="script.js"></script>111 <script>feather.replace();</script>112</body>113</html>