Hugging Face's logo

Spaces:
CabirPoya
/
mycode
Running

App Files Community
mycode / index.html
CabirPoya's picture
CabirPoya
undefined - Initial Deployment
e51722e verified
Raw History Blame Contribute Delete
21.7 kB
<!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 -->
 <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>
<!-- Hero Section -->
 <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>
<!-- Popular Poets -->
 <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">
 <!-- Poet 1 -->
 <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>
<!-- Poet 2 -->
 <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>
<!-- Poet 3 -->
 <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>
<!-- Poet 4 -->
 <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>
<!-- Poet 5 -->
 <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>
<!-- Poet 6 -->
 <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>
<!-- Poets by Century -->
 <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>
<!-- Century Tabs -->
 <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>
<!-- Poets Grid -->
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="poetsContainer">
 <!-- Poets will be loaded here dynamically -->
<!-- Example for 3rd century -->
 <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>
<!-- Example for 4th century -->
 <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>
<!-- Example for 14th century -->
 <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>
<!-- Map 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>
<!-- Features -->
 <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 -->
 <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>
<!-- Login Modal -->
 <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>
 // Login Modal
 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';
 });
// Close modal when clicking outside
 window.addEventListener('click', (e) => {
 if (e.target === loginModal) {
 loginModal.style.display = 'none';
 }
 });
// Century Tabs
 const centuryTabs = document.querySelectorAll('.century-tab');
centuryTabs.forEach(tab => {
 tab.addEventListener('click', () => {
 centuryTabs.forEach(t => t.classList.remove('active'));
 tab.classList.add('active');
// This is where you would load poets for the selected century
 // For demo purposes we're just showing an alert
 alert(`Loading poets for ${tab.textContent}`);
 });
 });
// Mobile Menu
 const mobileMenuBtn = document.querySelector('.md\\:hidden');
 // Would implement mobile menu functionality here
 </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>