Download index.html from methodya/test: direct link, hf CLI and curl.
- Browser
- Download file 39.6 kB
-
https://huggingface.co/spaces/methodya/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/methodya/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/methodya/test/resolve/main/index.html
39.6 kB
| <html lang="ar" 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=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f5f5f5; | |
| } | |
| .book-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .book-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .auction-timer { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .bid-btn { | |
| background: linear-gradient(to right, #8e2de2, #4a00e0); | |
| } | |
| .arabic-input { | |
| text-align: right; | |
| direction: rtl; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .flickity-prev-next-button { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-indigo-900 to-purple-800 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-book-open text-3xl"></i> | |
| <h1 class="text-2xl font-bold">مزاد الكتب التراثية</h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-home"></i> الرئيسية</a> | |
| <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-gavel"></i> المزادات</a> | |
| <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-info-circle"></i> عن الموقع</a> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-4 py-2 rounded-full transition"> | |
| <i class="fas fa-user mr-2"></i>تسجيل الدخول | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-900 to-indigo-800 text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl font-bold mb-4">اكتشف كنوز المعرفة التراثية</h2> | |
| <p class="text-xl mb-6">شارك في المزادات الحصرية لأندر الكتب والمخطوطات التراثية من مختلف العصور والحضارات</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-6 py-3 rounded-full transition"> | |
| <i class="fas fa-gavel mr-2"></i>المزادات الحالية | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 font-bold px-6 py-3 rounded-full transition"> | |
| <i class="fas fa-book mr-2"></i>تصفح الكتالوج | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-80 bg-white bg-opacity-20 rounded-lg shadow-2xl flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-transparent via-white to-transparent opacity-20"></div> | |
| <i class="fas fa-book-quran text-8xl text-white opacity-70"></i> | |
| <div class="absolute -bottom-4 -right-4 bg-yellow-500 text-gray-900 font-bold px-4 py-2 rounded-full"> | |
| مخطوطة نادرة | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Auctions --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800">المزادات المميزة</h2> | |
| <a href="#" class="text-indigo-700 hover:text-indigo-900 font-medium flex items-center"> | |
| عرض الكل <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Auction Item 1 --> | |
| <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1544947950-2a1eec1b6a3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="كتاب تراثي" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold"> | |
| <i class="fas fa-fire mr-1"></i> ساخن | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">مخطوطة الأزهرية في النحو</h3> | |
| <p class="text-gray-600 mb-4">مخطوطة نادرة تعود للقرن 12 الهجري بخط اليد، بحالة ممتازة</p> | |
| <div class="auction-timer p-4 rounded-lg mb-4"> | |
| <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">02</div> | |
| <div class="text-xs text-gray-600">أيام</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">14</div> | |
| <div class="text-xs text-gray-600">ساعات</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">32</div> | |
| <div class="text-xs text-gray-600">دقائق</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">15</div> | |
| <div class="text-xs text-gray-600">ثواني</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-600 text-sm">السعر الحالي</p> | |
| <p class="text-2xl font-bold text-indigo-800">1,250 ر.س</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 text-sm">عدد المزايدات</p> | |
| <p class="text-xl font-bold text-center">14</p> | |
| </div> | |
| </div> | |
| <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition"> | |
| <i class="fas fa-gavel mr-2"></i>قدم مزايدة | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Auction Item 2 --> | |
| <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1589998059171-988d322b03dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="كتاب تراثي" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold"> | |
| <i class="fas fa-star mr-1"></i> مميز | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">ديوان المتنبي بخط اليد</h3> | |
| <p class="text-gray-600 mb-4">نسخة أصلية نادرة من ديوان المتنبي تعود للقرن 10 الهجري</p> | |
| <div class="auction-timer p-4 rounded-lg mb-4"> | |
| <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">05</div> | |
| <div class="text-xs text-gray-600">أيام</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">08</div> | |
| <div class="text-xs text-gray-600">ساعات</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">45</div> | |
| <div class="text-xs text-gray-600">دقائق</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">22</div> | |
| <div class="text-xs text-gray-600">ثواني</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-600 text-sm">السعر الحالي</p> | |
| <p class="text-2xl font-bold text-indigo-800">3,750 ر.س</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 text-sm">عدد المزايدات</p> | |
| <p class="text-xl font-bold text-center">27</p> | |
| </div> | |
| </div> | |
| <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition"> | |
| <i class="fas fa-gavel mr-2"></i>قدم مزايدة | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Auction Item 3 --> | |
| <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" | |
| alt="كتاب تراثي" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold"> | |
| <i class="fas fa-certificate mr-1"></i> جديد | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">كتاب كليلة ودمنة</h3> | |
| <p class="text-gray-600 mb-4">طبعة نادرة من كتاب كليلة ودمنة تعود لعام 1893م مع رسوم أصلية</p> | |
| <div class="auction-timer p-4 rounded-lg mb-4"> | |
| <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">01</div> | |
| <div class="text-xs text-gray-600">يوم</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">06</div> | |
| <div class="text-xs text-gray-600">ساعات</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">12</div> | |
| <div class="text-xs text-gray-600">دقائق</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-indigo-800">45</div> | |
| <div class="text-xs text-gray-600">ثواني</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-600 text-sm">السعر الحالي</p> | |
| <p class="text-2xl font-bold text-indigo-800">2,150 ر.س</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600 text-sm">عدد المزايدات</p> | |
| <p class="text-xl font-bold text-center">19</p> | |
| </div> | |
| </div> | |
| <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition"> | |
| <i class="fas fa-gavel mr-2"></i>قدم مزايدة | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">تصفح حسب التصنيفات</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-quran text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">القرآن وعلومه</h3> | |
| <p class="text-sm text-gray-600 mt-1">(42 كتاب)</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-book-open text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">اللغة العربية</h3> | |
| <p class="text-sm text-gray-600 mt-1">(76 كتاب)</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-scroll text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">المخطوطات</h3> | |
| <p class="text-sm text-gray-600 mt-1">(28 مخطوطة)</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-yellow-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-history text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">التاريخ</h3> | |
| <p class="text-sm text-gray-600 mt-1">(53 كتاب)</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-red-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-heart text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">الأدب والشعر</h3> | |
| <p class="text-sm text-gray-600 mt-1">(89 كتاب)</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition"> | |
| <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-atom text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-bold text-gray-800">العلوم</h3> | |
| <p class="text-sm text-gray-600 mt-1">(31 كتاب)</p> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">كيف يعمل المزاد؟</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="flex flex-col items-center text-center p-6"> | |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-blue-600 text-3xl font-bold">1</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">سجل حسابك</h3> | |
| <p class="text-gray-600">قم بإنشاء حسابك في الموقع بخطوات بسيطة لتتمكن من المشاركة في المزادات</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center p-6"> | |
| <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-purple-600 text-3xl font-bold">2</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">قدم مزايدتك</h3> | |
| <p class="text-gray-600">اختر الكتاب الذي يعجبك وقدم مزايدة أعلى من السعر الحالي</p> | |
| </div> | |
| <div class="flex flex-col items-center text-center p-6"> | |
| <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-green-600 text-3xl font-bold">3</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">احصل على الكتاب</h3> | |
| <p class="text-gray-600">إذا كنت الفائز بالمزاد، سيتم التواصل معك لإتمام عملية الشراء والشحن</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">آراء عملائنا</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">أحمد السيد</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"حصلت على مخطوطة نادرة من القرن التاسع الهجري بحالة ممتازة، شكرًا لكم على هذا الموقع الرائع!"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">فاطمة محمد</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"تجربة رائعة، الموقع سهل الاستخدام والكتب المقدمة أصلية ونادرة كما هو موصوف"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">خالد عبدالله</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"أضفت إلى مكتبتي عدة كتب نادرة لم أكن أظن أني سأجدها، شكرًا لفريق العمل على الاحترافية"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-gradient-to-r from-indigo-900 to-purple-800 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">اشترك في نشرتنا البريدية</h2> | |
| <p class="text-xl mb-8 opacity-90">احصل على آخر المزادات والعروض مباشرة إلى بريدك الإلكتروني</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="بريدك الإلكتروني" class="arabic-input flex-grow px-4 py-3 rounded-r-lg focus:outline-none text-gray-900"> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-6 py-3 rounded-l-lg transition"> | |
| اشترك الآن | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-book-open text-2xl mr-2"></i> | |
| <h3 class="text-xl font-bold">مزاد الكتب التراثية</h3> | |
| </div> | |
| <p class="text-gray-400">منصة متخصصة في بيع الكتب والمخطوطات التراثية النادرة عبر المزادات الإلكترونية</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات الحالية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات القادمة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات المنتهية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">كيفية المشاركة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">الشروط والأحكام</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تصنيفات</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">القرآن وعلومه</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">اللغة العربية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">المخطوطات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">التاريخ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">الأدب والشعر</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">تواصل معنا</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">الرياض، المملكة العربية السعودية</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">+966 12 345 6789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">info@heritage-auction.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 مزاد الكتب التراثية. جميع الحقوق محفوظة.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">الشروط والأحكام</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">الأسئلة الشائعة</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Bid Modal --> | |
| <div id="bidModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-6"> | |
| <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> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-gray-800 mb-2">مخطوطة الأزهرية في النحو</h4> | |
| <p class="text-gray-600 mb-4">السعر الحالي: <span class="font-bold text-indigo-800">1,250 ر.س</span></p> | |
| <div class="mb-4"> | |
| <label for="bidAmount" class="block text-gray-700 mb-2">المبلغ (ر.س)</label> | |
| <input type="number" id="bidAmount" class="arabic-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="أدخل المبلغ"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="bidIncrement" class="block text-gray-700 mb-2">زيادة المزاد</label> | |
| <select id="bidIncrement" class="arabic-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="50">50 ر.س</option> | |
| <option value="100">100 ر.س</option> | |
| <option value="250">250 ر.س</option> | |
| <option value="500">500 ر.س</option> | |
| <option value="custom">مخصص</option> | |
| </select> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="text-gray-700">المبلغ الإجمالي: <span id="totalBid" class="font-bold text-indigo-800">1,300 ر.س</span></p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="submitBid" class="bid-btn flex-grow text-white font-bold py-3 rounded-lg hover:opacity-90 transition"> | |
| <i class="fas fa-gavel mr-2"></i>تأكيد المزايدة | |
| </button> | |
| <button id="cancelBid" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg transition"> | |
| إلغاء | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Toast --> | |
| <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center hidden"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>تم تقديم مزايدتك بنجاح!</span> | |
| </div> | |
| <script> | |
| // Bid Modal Functionality | |
| const bidButtons = document.querySelectorAll('.bid-btn'); | |
| const bidModal = document.getElementById('bidModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelBid = document.getElementById('cancelBid'); | |
| const submitBid = document.getElementById('submitBid'); | |
| const bidAmount = document.getElementById('bidAmount'); | |
| const bidIncrement = document.getElementById('bidIncrement'); | |
| const totalBid = document.getElementById('totalBid'); | |
| const successToast = document.getElementById('successToast'); | |
| // Current bid amount (for demo purposes) | |
| let currentBid = 1250; | |
| // Open modal when any bid button is clicked | |
| bidButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| bidModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Set initial bid amount | |
| bidAmount.value = currentBid + 50; | |
| updateTotalBid(); | |
| }); | |
| }); | |
| // Close modal | |
| function closeBidModal() { | |
| bidModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| closeModal.addEventListener('click', closeBidModal); | |
| cancelBid.addEventListener('click', closeBidModal); | |
| // Update total bid when amount or increment changes | |
| function updateTotalBid() { | |
| const amount = parseInt(bidAmount.value) || 0; | |
| totalBid.textContent = amount.toLocaleString() + ' ر.س'; | |
| } | |
| bidAmount.addEventListener('input', updateTotalBid); | |
| bidIncrement.addEventListener('change', function() { | |
| if (this.value !== 'custom') { | |
| bidAmount.value = currentBid + parseInt(this.value); | |
| updateTotalBid(); | |
| } | |
| }); | |
| // Submit bid | |
| submitBid.addEventListener('click', function() { | |
| const amount = parseInt(bidAmount.value); | |
| if (isNaN(amount) || amount <= currentBid) { | |
| alert('يجب أن يكون المبلغ أكبر من السعر الحالي'); | |
| return; | |
| } | |
| // In a real app, you would send this to your backend | |
| console.log('New bid submitted:', amount); | |
| // Show success message | |
| closeBidModal(); | |
| successToast.classList.remove('hidden'); | |
| // Hide success message after 3 seconds | |
| setTimeout(() => { | |
| successToast.classList.add('hidden'); | |
| }, 3000); | |
| }); | |
| // Countdown timer for auctions (demo) | |
| function updateCountdowns() { | |
| const countdowns = document.querySelectorAll('.auction-timer'); | |
| countdowns.forEach(timer => { | |
| const daysElement = timer.querySelector('div:nth-child(1) div:first-child'); | |
| const hoursElement = timer.querySelector('div:nth-child(2) div:first-child'); | |
| const minutesElement = timer.querySelector('div:nth-child(3) div:first-child'); | |
| const secondsElement = timer.querySelector('div:nth-child(4) div:first-child'); | |
| let days = parseInt(daysElement.textContent); | |
| let hours = parseInt(hoursElement.textContent); | |
| let minutes = parseInt(minutesElement.textContent); | |
| let seconds = parseInt(secondsElement.textContent); | |
| // Decrease seconds | |
| seconds--; | |
| if (seconds < 0) { | |
| seconds = 59; | |
| minutes--; | |
| if (minutes < 0) { | |
| minutes = 59; | |
| hours--; | |
| if (hours < 0) { | |
| hours = 23; | |
| days--; | |
| } | |
| } | |
| } | |
| // Update elements | |
| daysElement.textContent = days.toString().padStart(2, '0'); | |
| hoursElement.textContent = hours.toString().padStart(2, '0'); | |
| minutesElement.textContent = minutes.toString().padStart(2, '0'); | |
| secondsElement.textContent = seconds.toString().padStart(2, '0'); | |
| }); | |
| } | |
| // Update countdown every second | |
| setInterval(updateCountdowns, 1000); | |
| // Pulse animation for featured items | |
| const featuredItems = document.querySelectorAll('.book-card'); | |
| featuredItems.forEach((item, index) => { | |
| // Add delay to each item | |
| setTimeout(() => { | |
| item.classList.add('pulse-animation'); | |
| // Remove animation after first pulse | |
| setTimeout(() => { | |
| item.classList.remove('pulse-animation'); | |
| }, 2000); | |
| }, index * 300); | |
| }); | |
| </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=methodya/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |