| <!DOCTYPE html> |
| <html lang="fa" 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=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Naskh Arabic', serif; |
| background-color: #f8f5f2; |
| } |
| |
| .poet-card { |
| transition: transform 0.3s ease; |
| } |
| |
| .poet-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .century-tab.active { |
| background-color: #ed8936; |
| color: white; |
| } |
| |
| .login-modal { |
| display: none; |
| animation: fadeIn 0.3s; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| |
| <header class="bg-amber-700 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://ganjoor.net/image/gdap.png" alt="لوگوی گنجور" class="h-12"> |
| <h1 class="text-xl font-bold">گنجور</h1> |
| </div> |
| |
| <div class="hidden md:flex items-center space-x-4 space-x-reverse"> |
| <div class="relative"> |
| <input type="text" placeholder="جستجو در گنجور..." class="bg-amber-600 px-4 py-2 rounded-full text-white placeholder-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-400 w-64"> |
| <button class="absolute left-3 top-2 text-amber-200"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| <button id="loginBtn" class="bg-white text-amber-700 px-4 py-2 rounded-full hover:bg-amber-100 transition duration-200"> |
| <i class="fas fa-user ml-1"></i> ورود کاربر |
| </button> |
| </div> |
| |
| <button class="md:hidden text-xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="bg-gradient-to-b from-amber-700 to-amber-500 text-white py-12"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">گنجینهٔ اشعار فارسی</h2> |
| <p class="text-lg md:text-xl mb-8 max-w-3xl mx-auto">بزرگترین مجموعهٔ دیجیتال شعر فارسی با بیش از ۳۰۰ شاعر از قرن سوم تا چهاردهم هجری</p> |
| <div class="flex justify-center space-x-4 space-x-reverse"> |
| <button class="bg-white text-amber-700 px-6 py-3 rounded-full hover:bg-amber-100 transition duration-200 font-medium"> |
| <i class="fas fa-random ml-2"></i> بیت تصادفی |
| </button> |
| <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-amber-700 transition duration-200 font-medium"> |
| <i class="fas fa-book ml-2"></i> کتابخانه گنجور |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold mb-8 text-gray-800 border-b-2 border-amber-200 pb-2 inline-block">سخنوران پرمخاطب</h2> |
| |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6 mt-8"> |
| |
| <a href="https://ganjoor.net/hafez" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/hafez.gif" alt="حافظ شیرازی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">حافظ</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/saadi" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/saadi.gif" alt="سعدی شیرازی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">سعدی</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/moulavi" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/moulavi.gif" alt="مولوی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">مولانا</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/ferdousi" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/ferdousi.gif" alt="فردوسی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">فردوسی</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/khayyam" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/khayyam.gif" alt="خیام" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">خیام</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/saeb" class="poet-card bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/saeb.gif" alt="صائب" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">صائب</h3> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold mb-8 text-gray-800 border-b-2 border-amber-200 pb-2 inline-block">دسته‌بندی بر اساس قرن</h2> |
| |
| |
| <div class="flex overflow-x-auto pb-2 mb-8 space-x-2 space-x-reverse"> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100 active" data-century="3">قرن سوم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="4">قرن چهارم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="5">قرن پنجم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="6">قرن ششم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="7">قرن هفتم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="8">قرن هشتم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="9">قرن نهم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="10">قرن دهم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="11">قرن یازدهم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="12">قرن دوازدهم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="13">قرن سیزدهم</button> |
| <button class="century-tab px-4 py-2 rounded-full bg-white shadow-sm hover:bg-amber-100" data-century="14">قرن چهاردهم</button> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="poetsContainer"> |
| |
| |
| |
| <a href="https://ganjoor.net/roodaki" class="poet-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/roodaki.gif" alt="رودکی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">رودکی</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/babataher" class="poet-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/babataher.gif" alt="باباطاهر" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">باباطاهر</h3> |
| </div> |
| </a> |
| |
| |
| <a href="https://ganjoor.net/parvin" class="poet-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg text-center"> |
| <img src="https://api.ganjoor.net/api/ganjoor/poet/image/parvin.gif" alt="پروین اعتصامی" class="w-full h-40 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-gray-800">پروین اعتصامی</h3> |
| </div> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0"> |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">نقشهٔ خاستگاه سخنوران</h2> |
| <p class="text-gray-600 mb-4">گنجور در برگیرنده اشعار شاعران از سراسر ایران بزرگ فرهنگی است. بر روی نقشه کلیک کنید تا شاعران هر منطقه را ببینید.</p> |
| <a href="https://ganjoor.net/map" class="text-amber-600 hover:text-amber-700 font-medium"> |
| مشاهده نقشه کامل <i class="fas fa-arrow-left mr-1"></i> |
| </a> |
| </div> |
| <div class="md:w-1/2"> |
| <a href="https://ganjoor.net/map" class="block rounded-lg overflow-hidden shadow-lg"> |
| <img src="https://ganjoor.net/image/map.gif" alt="نقشه خاستگاه شاعران" class="w-full h-auto"> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-2xl font-bold mb-8 text-center text-gray-800">امکانات ویژه گنجور</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-200"> |
| <div class="text-amber-600 text-3xl mb-4"> |
| <i class="fas fa-random"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">فال حافظ</h3> |
| <p class="text-gray-600">فال حافظ با تفأل به دیوان خواجه شیراز و تفسیر ابیات به صورت آنلاین</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-200"> |
| <div class="text-amber-600 text-3xl mb-4"> |
| <i class="fas fa-book-open"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">کتابخانه گنجور</h3> |
| <p class="text-gray-600">مجموعه کامل دیوان شاعران به صورت کتاب الکترونیکی قابل دانلود</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-200"> |
| <div class="text-amber-600 text-3xl mb-4"> |
| <i class="fas fa-music"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800">آوای گنجور</h3> |
| <p class="text-gray-600">اشعار خوانده شده توسط بهترین هنرمندان و خوشخوانان ایران</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4 border-b border-amber-600 pb-2 inline-block">درباره گنجور</h3> |
| <p class="text-gray-300 mb-4">گنجور بزرگترین مجموعه دیجیتال شعر فارسی است که با هدف حفظ و گسترش زبان و ادبیات فارسی ایجاد شده است.</p> |
| <div class="flex space-x-4 space-x-reverse"> |
| <a href="#" class="text-gray-300 hover:text-amber-400"><i class="fab fa-telegram text-xl"></i></a> |
| <a href="#" class="text-gray-300 hover:text-amber-400"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="text-gray-300 hover:text-amber-400"><i class="fab fa-instagram text-xl"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4 border-b border-amber-600 pb-2 inline-block">لینک‌های مفید</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-300 hover:text-amber-400 transition duration-200">بیت تصادفی</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-amber-400 transition duration-200">جدول شعر</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-amber-400 transition duration-200">فال حافظ</a></li> |
| <li><a href="#" class="text-gray-300 hover:text-amber-400 transition duration-200">نمایه موسیقی</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-bold mb-4 border-b border-amber-600 pb-2 inline-block">تماس با ما</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-300"><i class="fas fa-envelope ml-2 text-amber-400"></i> info@ganjoor.net</li> |
| <li class="flex items-center text-gray-300"><i class="fas fa-globe ml-2 text-amber-400"></i> https://ganjoor.net</li> |
| <li class="flex items-center text-gray-300"><i class="fas fa-map-marker-alt ml-2 text-amber-400"></i> ایران، تهران</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 pt-6 text-center text-gray-400"> |
| <p>© ۱۴۰۲ گنجور - تمامی حقوق محفوظ است</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="loginModal" class="login-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-lg p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-gray-800">ورود به گنجور</h3> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form class="space-y-4"> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">پست الکترونیکی</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"> |
| </div> |
| |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">گذرواژه</label> |
| <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"> |
| </div> |
| |
| <div class="text-sm text-gray-600"> |
| اگر پیش‌تر در <a href="#" class="text-amber-600 hover:text-amber-700">گنجینه</a> یا <a href="#" class="text-amber-600 hover:text-amber-700">پیشخان خوانشگران</a> گنجور نام‌نویسی کرده‌اید می‌توانید با همان اطلاعات کاربری به گنجور وارد شوید. |
| </div> |
| |
| <div class="pt-2"> |
| <button type="submit" class="w-full bg-amber-600 text-white py-2 rounded-md hover:bg-amber-700 transition duration-200"> |
| ورود به حساب کاربری |
| </button> |
| </div> |
| |
| <div class="text-center text-sm text-gray-600"> |
| <span>حساب کاربری ندارید؟ </span> |
| <a href="#" class="text-amber-600 hover:text-amber-700 font-medium">نام‌نویسی کنید</a> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const loginBtn = document.getElementById('loginBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const closeModal = document.getElementById('closeModal'); |
| |
| loginBtn.addEventListener('click', () => { |
| loginModal.style.display = 'flex'; |
| }); |
| |
| closeModal.addEventListener('click', () => { |
| loginModal.style.display = 'none'; |
| }); |
| |
| |
| window.addEventListener('click', (e) => { |
| if (e.target === loginModal) { |
| loginModal.style.display = 'none'; |
| } |
| }); |
| |
| |
| const centuryTabs = document.querySelectorAll('.century-tab'); |
| |
| centuryTabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| centuryTabs.forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| |
| |
| |
| alert(`Loading poets for ${tab.textContent}`); |
| }); |
| }); |
| |
| |
| const mobileMenuBtn = document.querySelector('.md\\:hidden'); |
| |
| </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=CabirPoya/mycode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
