|
|
<!DOCTYPE html> |
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
let currentBid = 1250; |
|
|
|
|
|
|
|
|
bidButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
bidModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
|
|
|
|
|
|
bidAmount.value = currentBid + 50; |
|
|
updateTotalBid(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function closeBidModal() { |
|
|
bidModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
|
|
|
closeModal.addEventListener('click', closeBidModal); |
|
|
cancelBid.addEventListener('click', closeBidModal); |
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
submitBid.addEventListener('click', function() { |
|
|
const amount = parseInt(bidAmount.value); |
|
|
|
|
|
if (isNaN(amount) || amount <= currentBid) { |
|
|
alert('يجب أن يكون المبلغ أكبر من السعر الحالي'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
console.log('New bid submitted:', amount); |
|
|
|
|
|
|
|
|
closeBidModal(); |
|
|
successToast.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
successToast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
seconds--; |
|
|
|
|
|
if (seconds < 0) { |
|
|
seconds = 59; |
|
|
minutes--; |
|
|
|
|
|
if (minutes < 0) { |
|
|
minutes = 59; |
|
|
hours--; |
|
|
|
|
|
if (hours < 0) { |
|
|
hours = 23; |
|
|
days--; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(updateCountdowns, 1000); |
|
|
|
|
|
|
|
|
const featuredItems = document.querySelectorAll('.book-card'); |
|
|
|
|
|
featuredItems.forEach((item, index) => { |
|
|
|
|
|
setTimeout(() => { |
|
|
item.classList.add('pulse-animation'); |
|
|
|
|
|
|
|
|
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> |
