tesstr / index.html
81fr's picture
Add 2 files
5b5a216 verified
Raw History Blame Contribute Delete
79.6 kB
<!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: #f8f9fa; } .sidebar { transition: all 0.3s ease; } .sidebar-link:hover { background-color: rgba(217, 119, 6, 0.1); } .active-link { background-color: rgba(217, 119, 6, 0.2); border-right: 3px solid #d97706; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .chart-container { height: 300px; } .order-badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .mode-switch { transition: all 0.3s ease; } .mode-switch.active { background-color: #d97706; color: white; } /* Modal Styles */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; } .modal-content { background-color: white; width: 90%; max-width: 500px; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); } /* Image Upload Preview */ .image-preview { width: 150px; height: 150px; border: 2px dashed #d1d5db; border-radius: 0.5rem; display: flex; justify-content: center; align-items: center; overflow: hidden; margin-bottom: 1rem; } .image-preview img { max-width: 100%; max-height: 100%; } </style> </head> <body class="text-gray-800"> <div class="flex h-screen overflow-hidden"> <!-- Sidebar --> <div class="sidebar w-64 bg-amber-900 text-white flex-shrink-0 hidden md:block"> <div class="p-4 border-b border-amber-800"> <div class="flex items-center space-x-2 space-x-reverse"> <div class="w-10 h-10 bg-amber-700 rounded-full flex items-center justify-center"> <i class="fas fa-cookie-bite text-xl"></i> </div> <h1 class="text-xl font-bold">لوحة التحكم</h1> </div> </div> <div class="p-4"> <div class="flex bg-amber-800 rounded-lg overflow-hidden mb-6"> <button id="admin-mode" class="mode-switch active flex-1 py-2 text-center font-medium">لوحة التحكم</button> <button id="store-mode" class="mode-switch flex-1 py-2 text-center font-medium">المتجر</button> </div> <ul class="space-y-2 admin-menu"> <li> <a href="#" class="sidebar-link active-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-tachometer-alt ml-2"></i> <span>الرئيسية</span> </a> </li> <li> <a href="#" id="products-link" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-shopping-bag ml-2"></i> <span>المنتجات</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-receipt ml-2"></i> <span>الطلبات</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">5 جديد</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-users ml-2"></i> <span>العملاء</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-chart-line ml-2"></i> <span>التقارير</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-comments ml-2"></i> <span>التقييمات</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3 جديد</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-cog ml-2"></i> <span>الإعدادات</span> </a> </li> </ul> <ul class="space-y-2 store-menu hidden"> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-home ml-2"></i> <span>الرئيسية</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-utensils ml-2"></i> <span>قائمة المنتجات</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-shopping-cart ml-2"></i> <span>سلة التسوق</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-heart ml-2"></i> <span>المفضلة</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-history ml-2"></i> <span>طلباتي</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-user ml-2"></i> <span>حسابي</span> </a> </li> </ul> <div class="mt-8 pt-4 border-t border-amber-800"> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-sign-out-alt ml-2"></i> <span>تسجيل الخروج</span> </a> </div> </div> </div> <!-- Mobile Sidebar --> <div id="mobile-sidebar" class="sidebar fixed inset-y-0 right-0 w-64 bg-amber-900 text-white z-50 transform translate-x-full md:hidden"> <div class="p-4 border-b border-amber-800 flex justify-between items-center"> <div class="flex items-center space-x-2 space-x-reverse"> <div class="w-10 h-10 bg-amber-700 rounded-full flex items-center justify-center"> <i class="fas fa-cookie-bite text-xl"></i> </div> <h1 class="text-xl font-bold">لوحة التحكم</h1> </div> <button id="close-mobile-sidebar" class="text-white"> <i class="fas fa-times"></i> </button> </div> <div class="p-4"> <div class="flex bg-amber-800 rounded-lg overflow-hidden mb-6"> <button id="mobile-admin-mode" class="mode-switch active flex-1 py-2 text-center font-medium">لوحة التحكم</button> <button id="mobile-store-mode" class="mode-switch flex-1 py-2 text-center font-medium">المتجر</button> </div> <ul class="space-y-2 admin-menu"> <li> <a href="#" class="sidebar-link active-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-tachometer-alt ml-2"></i> <span>الرئيسية</span> </a> </li> <li> <a href="#" id="mobile-products-link" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-shopping-bag ml-2"></i> <span>المنتجات</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-receipt ml-2"></i> <span>الطلبات</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">5 جديد</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-users ml-2"></i> <span>العملاء</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-chart-line ml-2"></i> <span>التقارير</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-comments ml-2"></i> <span>التقييمات</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3 جديد</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-cog ml-2"></i> <span>الإعدادات</span> </a> </li> </ul> <ul class="space-y-2 store-menu hidden"> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-home ml-2"></i> <span>الرئيسية</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-utensils ml-2"></i> <span>قائمة المنتجات</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-shopping-cart ml-2"></i> <span>سلة التسوق</span> <span class="mr-auto bg-amber-600 text-white order-badge rounded-full">3</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-heart ml-2"></i> <span>المفضلة</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-history ml-2"></i> <span>طلباتي</span> </a> </li> <li> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-user ml-2"></i> <span>حسابي</span> </a> </li> </ul> <div class="mt-8 pt-4 border-t border-amber-800"> <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition"> <i class="fas fa-sign-out-alt ml-2"></i> <span>تسجيل الخروج</span> </a> </div> </div> </div> <!-- Main Content --> <div class="flex-1 overflow-auto"> <!-- Top Navigation --> <header class="bg-white shadow-sm sticky top-0 z-40"> <div class="px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <button id="mobile-menu-btn" class="md:hidden text-gray-600 mr-2"> <i class="fas fa-bars text-xl"></i> </button> <h2 id="page-title" class="text-xl font-bold text-amber-900">لوحة التحكم</h2> </div> <div class="flex items-center space-x-4 space-x-reverse"> <div class="relative"> <button id="notifications-btn" class="text-gray-600 hover:text-gray-900"> <i class="fas fa-bell text-xl"></i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> </button> </div> <div class="flex items-center space-x-2 space-x-reverse"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة المدير" class="w-8 h-8 rounded-full"> <span class="font-medium">أحمد محمد</span> </div> </div> </div> </header> <!-- Admin Dashboard Content --> <div id="admin-content"> <!-- Stats Cards --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition"> <div class="flex justify-between items-start"> <div> <p class="text-gray-500">إجمالي المبيعات</p> <h3 class="text-2xl font-bold text-amber-700">2,450,000 د.ع</h3> <p class="text-green-500 text-sm mt-1"> <i class="fas fa-arrow-up mr-1"></i> 12% عن الشهر الماضي </p> </div> <div class="bg-amber-100 p-3 rounded-full text-amber-700"> <i class="fas fa-wallet text-xl"></i> </div> </div> </div> <div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition"> <div class="flex justify-between items-start"> <div> <p class="text-gray-500">عدد الطلبات</p> <h3 class="text-2xl font-bold text-amber-700">184</h3> <p class="text-green-500 text-sm mt-1"> <i class="fas fa-arrow-up mr-1"></i> 8% عن الشهر الماضي </p> </div> <div class="bg-amber-100 p-3 rounded-full text-amber-700"> <i class="fas fa-shopping-bag text-xl"></i> </div> </div> </div> <div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition"> <div class="flex justify-between items-start"> <div> <p class="text-gray-500">عدد العملاء</p> <h3 class="text-2xl font-bold text-amber-700">127</h3> <p class="text-green-500 text-sm mt-1"> <i class="fas fa-arrow-up mr-1"></i> 5% عن الشهر الماضي </p> </div> <div class="bg-amber-100 p-3 rounded-full text-amber-700"> <i class="fas fa-users text-xl"></i> </div> </div> </div> <div class="stat-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition"> <div class="flex justify-between items-start"> <div> <p class="text-gray-500">متوسط قيمة الطلب</p> <h3 class="text-2xl font-bold text-amber-700">13,315 д.ع</h3> <p class="text-red-500 text-sm mt-1"> <i class="fas fa-arrow-down mr-1"></i> 3% عن الشهر الماضي </p> </div> <div class="bg-amber-100 p-3 rounded-full text-amber-700"> <i class="fas fa-chart-pie text-xl"></i> </div> </div> </div> </div> <!-- Products Management Section --> <div id="products-management" class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">إدارة المنتجات</h3> <button id="add-product-btn" class="bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 transition"> <i class="fas fa-plus ml-2"></i> إضافة منتج جديد </button> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الصورة</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم المنتج</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">السعر</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الكمية</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="products-table-body"> <!-- Products will be added here dynamically --> </tbody> </table> </div> </div> <!-- Charts Row --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6"> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">مبيعات الشهر</h3> <select class="bg-gray-100 border border-gray-200 rounded px-3 py-1 text-sm"> <option>هذا الشهر</option> <option>الشهر الماضي</option> <option>3 أشهر</option> <option>6 أشهر</option> <option>هذه السنة</option> </select> </div> <div class="chart-container"> <canvas id="salesChart"></canvas> </div> </div> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">أكثر المنتجات مبيعاً</h3> <select class="bg-gray-100 border border-gray-200 rounded px-3 py-1 text-sm"> <option>هذا الشهر</option> <option>الشهر الماضي</option> <option>هذه السنة</option> </select> </div> <div class="chart-container"> <canvas id="productsChart"></canvas> </div> </div> </div> <!-- Recent Orders --> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">أحدث الطلبات</h3> <a href="#" class="text-amber-700 hover:text-amber-900 text-sm">عرض الكل</a> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th> <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-001</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">علي حسين</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-15</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">45,000 د.ع</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">مكتمل</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a> <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-print"></i></a> </td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-002</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">سارة محمد</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-14</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">25,000 د.ع</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">قيد التجهيز</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a> <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-edit"></i></a> </td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-003</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">كريم عبدالله</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-13</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">18,000 د.ع</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">تم الشحن</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a> <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-truck"></i></a> </td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-004</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">حسن علي</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-12</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">32,000 د.ع</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">مكتمل</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a> <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-print"></i></a> </td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2023-005</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">نورا خالد</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">2023-10-11</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">15,000 د.ع</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">ملغي</span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <a href="#" class="text-amber-700 hover:text-amber-900 mr-2"><i class="fas fa-eye"></i></a> <a href="#" class="text-amber-700 hover:text-amber-900"><i class="fas fa-trash"></i></a> </td> </tr> </tbody> </table> </div> </div> <!-- Recent Reviews --> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> <div class="flex justify-between items-center mb-4"> <h3 class="font-bold">أحدث التقييمات</h3> <a href="#" class="text-amber-700 hover:text-amber-900 text-sm">عرض الكل</a> </div> <div class="space-y-4"> <div class="flex items-start border-b border-gray-100 pb-4"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3"> <div class="flex-1"> <div class="flex justify-between items-start"> <div> <h4 class="font-medium">سعاد عبدالرحمن</h4> <div class="flex text-amber-500 text-sm mt-1"> <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> <span class="text-xs text-gray-500">منذ يومين</span> </div> <p class="text-gray-600 mt-2">الكليجة عندكم أطيب ما أكلت في حياتي! الطعم يذكرني بزمن الطفولة.</p> <div class="mt-2 text-sm"> <span class="text-gray-500">على منتج:</span> <a href="#" class="text-amber-700 hover:text-amber-900">كليجة التمر العراقية</a> </div> </div> </div> <div class="flex items-start border-b border-gray-100 pb-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة العميل" class="w-10 h-10 rounded-full mr-3"> <div class="flex-1"> <div class="flex justify-between items-start"> <div> <h4 class="font-medium">مصطفى أحمد</h4> <div class="flex text-amber-500 text-sm mt-1"> <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="far fa-star"></i> </div> </div> <span class="text-xs text-gray-500">منذ 4 أيام</span> </div> <p class="text-gray-600 mt-2">الطلبة وصلت في الوقت المحدد والطعم لذيذ، لكن أتمنى لو كانت الكمية أكبر.</p> <div class="mt-2 text-sm"> <span class="text-gray-500">على منتج:</span> <a href="#" class="text-amber-700 hover:text-amber-900">كليجة الجوز الفاخرة</a> </div> </div> </div> <div class="flex items-start"> <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3"> <div class="flex-1"> <div class="flex justify-between items-start"> <div> <h4 class="font-medium">هدى كريم</h4> <div class="flex text-amber-500 text-sm mt-1"> <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> <span class="text-xs text-gray-500">منذ أسبوع</span> </div> <p class="text-gray-600 mt-2">اشتريت صندوق الهدايا لأهلي في الخارج، كانوا سعداء جداً بالطعم والتغليف الجميل.</p> <div class="mt-2 text-sm"> <span class="text-gray-500">على منتج:</span> <a href="#" class="text-amber-700 hover:text-amber-900">صندوق هدايا الكليجة</a> </div> </div> </div> </div> </div> </div> <!-- Store Content --> <div id="store-content" class="hidden"> <!-- Store Header --> <div class="bg-amber-700 text-white p-6 rounded-lg mb-6"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> <div class="mb-4 md:mb-0"> <h1 class="text-2xl font-bold">مرحباً بك في متجر الكليجة</h1> <p class="mt-2">أطيب أنواع الكليجة العراقية بأجود المكونات</p> </div> <div class="relative w-full md:w-64"> <input type="text" placeholder="ابحث عن منتج..." class="w-full py-2 px-4 pr-10 rounded-full bg-white text-gray-800 focus:outline-none focus:ring-2 focus:ring-amber-500"> <button class="absolute left-3 top-2 text-gray-500"> <i class="fas fa-search"></i> </button> </div> </div> </div> <!-- Categories --> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6"> <h3 class="font-bold mb-4">فئات المنتجات</h3> <div class="flex flex-wrap gap-2"> <button class="px-4 py-2 bg-amber-100 text-amber-800 rounded-full hover:bg-amber-200 transition">الكل</button> <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة التمر</button> <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة الجوز</button> <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">كليجة اللوز</button> <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">صندوق هدايا</button> <button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full hover:bg-gray-200 transition">عروض خاصة</button> </div> </div> <!-- Products Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-6" id="store-products-grid"> <!-- Products will be added here dynamically --> </div> <!-- Special Offer --> <div class="bg-gradient-to-r from-amber-600 to-amber-800 text-white p-6 rounded-lg mb-6"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-4 md:mb-0"> <h2 class="text-2xl font-bold mb-2">عرض خاص!</h2> <p class="mb-4">احصل على خصم 25% عند شرائك صندوقين أو أكثر من صناديق الهدايا</p> <button class="bg-white text-amber-700 px-4 py-2 rounded-full font-bold hover:bg-gray-100 transition"> استفد من العرض الآن </button> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://via.placeholder.com/400x200/ffffff/64748b?text=عرض+خاص" alt="عرض خاص" class="w-full max-w-md rounded-lg"> </div> </div> </div> <!-- Customer Reviews --> <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> <h3 class="font-bold mb-4">آراء العملاء</h3> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="border border-gray-200 rounded-lg p-4"> <div class="flex items-center mb-3"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">سعاد عبدالرحمن</h4> <div class="flex text-amber-500 text-sm"> <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="border border-gray-200 rounded-lg p-4"> <div class="flex items-center mb-3"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="صورة العميل" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">مصطفى أحمد</h4> <div class="flex text-amber-500 text-sm"> <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="far fa-star"></i> </div> </div> </div> <p class="text-gray-600">"الطلبة وصلت في الوقت المحدد والطعم لذيذ، لكن أتمنى لو كانت الكمية أكبر."</p> </div> <div class="border border-gray-200 rounded-lg p-4"> <div class="flex items-center mb-3"> <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="صورة العميلة" class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-medium">هدى كريم</h4> <div class="flex text-amber-500 text-sm"> <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> </div> </div> </div> </div> <!-- Mobile Sidebar Overlay --> <div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> <!-- Add/Edit Product Modal --> <div id="product-modal" class="modal"> <div class="modal-content"> <div class="bg-amber-700 text-white p-4 flex justify-between items-center"> <h3 class="text-lg font-bold" id="modal-title">إضافة منتج جديد</h3> <button id="close-modal" class="text-white"> <i class="fas fa-times"></i> </button> </div> <div class="p-4"> <form id="product-form"> <input type="hidden" id="product-id"> <div class="mb-4"> <label for="product-name" class="block text-gray-700 mb-2">اسم المنتج</label> <input type="text" id="product-name" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required> </div> <div class="mb-4"> <label for="product-price" class="block text-gray-700 mb-2">السعر (د.ع)</label> <input type="number" id="product-price" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required> </div> <div class="mb-4"> <label for="product-quantity" class="block text-gray-700 mb-2">الكمية المتاحة</label> <input type="number" id="product-quantity" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500" required> </div> <div class="mb-4"> <label for="product-category" class="block text-gray-700 mb-2">الفئة</label> <select id="product-category" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500"> <option value="كليجة التمر">كليجة التمر</option> <option value="كليجة الجوز">كليجة الجوز</option> <option value="كليجة اللوز">كليجة اللوز</option> <option value="صندوق هدايا">صندوق هدايا</option> <option value="عروض خاصة">عروض خاصة</option> </select> </div> <div class="mb-4"> <label for="product-description" class="block text-gray-700 mb-2">وصف المنتج</label> <textarea id="product-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">صورة المنتج</label> <div class="image-preview" id="image-preview"> <span class="text-gray-500">لا توجد صورة</span> </div> <input type="file" id="product-image" accept="image/*" class="hidden"> <button type="button" id="upload-image-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition"> <i class="fas fa-upload ml-2"></i> رفع صورة </button> </div> <div class="flex justify-end space-x-3 space-x-reverse"> <button type="button" id="cancel-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 transition"> إلغاء </button> <button type="submit" id="save-product-btn" class="bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700 transition"> حفظ المنتج </button> </div> </form> </div> </div> </div> <!-- Notifications Modal --> <div id="notifications-modal" class="modal"> <div class="modal-content" style="max-width: 400px;"> <div class="bg-amber-700 text-white p-4 flex justify-between items-center"> <h3 class="text-lg font-bold">الإشعارات</h3> <button class="close-notifications-modal text-white"> <i class="fas fa-times"></i> </button> </div> <div class="p-4 max-h-96 overflow-y-auto"> <div class="space-y-4"> <div class="border-b border-gray-200 pb-3"> <div class="flex items-start"> <div class="bg-amber-100 text-amber-700 p-2 rounded-full mr-3"> <i class="fas fa-shopping-bag"></i> </div> <div> <h4 class="font-medium">طلب جديد</h4> <p class="text-gray-600 text-sm">تم استلام طلب جديد من العميل علي حسين</p> <span class="text-xs text-gray-500">منذ 10 دقائق</span> </div> </div> </div> <div class="border-b border-gray-200 pb-3"> <div class="flex items-start"> <div class="bg-green-100 text-green-700 p-2 rounded-full mr-3"> <i class="fas fa-check-circle"></i> </div> <div> <h4 class="font-medium">دفعة مستلمة</h4> <p class="text-gray-600 text-sm">تم استلام دفعة بقيمة 45,000 د.ع للطلب #ORD-2023-001</p> <span class="text-xs text-gray-500">منذ ساعة</span> </div> </div> </div> <div class="border-b border-gray-200 pb-3"> <div class="flex items-start"> <div class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3"> <i class="fas fa-comment"></i> </div> <div> <h4 class="font-medium">تقييم جديد</h4> <p class="text-gray-600 text-sm">أضاف العميل سعاد عبدالرحمن تقييماً لمنتج كليجة التمر العراقية</p> <span class="text-xs text-gray-500">منذ يومين</span> </div> </div> </div> </div> </div> </div> </div> <!-- Chart.js --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Sample Products Data let products = [ { id: 1, name: "كليجة التمر العراقية", price: 15000, quantity: 50, category: "كليجة التمر", description: "كليجة التمر التقليدية بطعم العراق الأصيل", image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+التمر", featured: true }, { id: 2, name: "كليجة الجوز الفاخرة", price: 18000, quantity: 35, category: "كليجة الجوز", description: "كليجة الجوز بجودة عالية ومكونات فاخرة", image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+الجوز", featured: false }, { id: 3, name: "كليجة اللوز المميزة", price: 16000, quantity: 25, category: "كليجة اللوز", description: "كليجة اللوز بلمسة عصرية وطعم لا يقاوم", image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=كليجة+اللوز", featured: true, discount: 20, oldPrice: 20000 }, { id: 4, name: "صندوق هدايا الكليجة", price: 35000, quantity: 15, category: "صندوق هدايا", description: "مجموعة متنوعة من الكليجة بتغليف هدايا فاخر", image: "https://via.placeholder.com/300x200/e2e8f0/64748b?text=صندوق+هدايا", featured: false } ]; // DOM Elements const productsTableBody = document.getElementById('products-table-body'); const storeProductsGrid = document.getElementById('store-products-grid'); const productForm = document.getElementById('product-form'); const productModal = document.getElementById('product-modal'); const modalTitle = document.getElementById('modal-title'); const productIdInput = document.getElementById('product-id'); const productNameInput = document.getElementById('product-name'); const productPriceInput = document.getElementById('product-price'); const productQuantityInput = document.getElementById('product-quantity'); const productCategoryInput = document.getElementById('product-category'); const productDescriptionInput = document.getElementById('product-description'); const productImageInput = document.getElementById('product-image'); const imagePreview = document.getElementById('image-preview'); const uploadImageBtn = document.getElementById('upload-image-btn'); const addProductBtn = document.getElementById('add-product-btn'); const closeModalBtn = document.getElementById('close-modal'); const cancelBtn = document.getElementById('cancel-btn'); const saveProductBtn = document.getElementById('save-product-btn'); const notificationsBtn = document.getElementById('notifications-btn'); const notificationsModal = document.getElementById('notifications-modal'); const closeNotificationsModal = document.querySelector('.close-notifications-modal'); // Initialize the app function init() { renderProductsTable(); renderStoreProducts(); setupEventListeners(); setupCharts(); } // Render products table in admin panel function renderProductsTable() { productsTableBody.innerHTML = ''; products.forEach(product => { const row = document.createElement('tr'); row.innerHTML = ` <td class="px-4 py-3 whitespace-nowrap"> <img src="${product.image}" alt="${product.name}" class="w-10 h-10 rounded-full object-cover"> </td> <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${product.name}</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.price.toLocaleString()} د.ع</td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">${product.quantity}</td> <td class="px-4 py-3 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full ${product.quantity > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"> ${product.quantity > 0 ? 'متوفر' : 'غير متوفر'} </span> </td> <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500"> <button class="edit-product-btn text-amber-700 hover:text-amber-900 mr-2" data-id="${product.id}"> <i class="fas fa-edit"></i> </button> <button class="delete-product-btn text-red-600 hover:text-red-800" data-id="${product.id}"> <i class="fas fa-trash"></i> </button> </td> `; productsTableBody.appendChild(row); }); // Add event listeners to edit and delete buttons document.querySelectorAll('.edit-product-btn').forEach(btn => { btn.addEventListener('click', () => editProduct(parseInt(btn.dataset.id))); }); document.querySelectorAll('.delete-product-btn').forEach(btn => { btn.addEventListener('click', () => deleteProduct(parseInt(btn.dataset.id))); }); } // Render products in store function renderStoreProducts() { storeProductsGrid.innerHTML = ''; products.forEach(product => { const productCard = document.createElement('div'); productCard.className = 'product-card bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition'; productCard.innerHTML = ` <div class="relative"> <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover rounded-lg"> <button class="favorite-btn absolute top-2 left-2 bg-white p-2 rounded-full text-amber-700 hover:text-amber-900" data-id="${product.id}"> <i class="${isProductFavorite(product.id) ? 'fas fa-heart text-red-500' : 'far fa-heart'}"></i> </button> ${product.featured ? '<span class="absolute top-2 right-2 bg-amber-600 text-white px-2 py-1 text-xs rounded-full">الأكثر مبيعاً</span>' : ''} ${product.discount ? `<span class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 text-xs rounded-full">خصم ${product.discount}%</span>` : ''} </div> <div class="mt-4"> <h3 class="font-bold text-lg">${product.name}</h3> <p class="text-gray-600 text-sm mt-1">${product.description}</p> <div class="flex justify-between items-center mt-3"> <div> ${product.discount ? ` <span class="font-bold text-amber-700">${(product.price * (1 - product.discount/100)).toLocaleString()} د.ع</span> <span class="text-gray-400 text-sm line-through mr-2">${product.price.toLocaleString()} د.ع</span> ` : ` <span class="font-bold text-amber-700">${product.price.toLocaleString()} د.ع</span> `} </div> <button class="add-to-cart-btn bg-amber-600 text-white px-3 py-1 rounded-full hover:bg-amber-700 transition" data-id="${product.id}"> <i class="fas fa-shopping-cart"></i> أضف للسلة </button> </div> </div> `; storeProductsGrid.appendChild(productCard); }); // Add event listeners to favorite and add to cart buttons document.querySelectorAll('.favorite-btn').forEach(btn => { btn.addEventListener('click', () => toggleFavorite(parseInt(btn.dataset.id))); }); document.querySelectorAll('.add-to-cart-btn').forEach(btn => { btn.addEventListener('click', () => addToCart(parseInt(btn.dataset.id))); }); } // Check if product is favorite function isProductFavorite(productId) { const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); return favorites.includes(productId); } // Toggle product favorite status function toggleFavorite(productId) { let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); const index = favorites.indexOf(productId); if (index === -1) { favorites.push(productId); showToast('تم إضافة المنتج إلى المفضلة', 'success'); } else { favorites.splice(index, 1); showToast('تم إزالة المنتج من المفضلة', 'info'); } localStorage.setItem('favorites', JSON.stringify(favorites)); renderStoreProducts(); } // Add product to cart function addToCart(productId) { let cart = JSON.parse(localStorage.getItem('cart') || '[]'); const product = products.find(p => p.id === productId); const existingItem = cart.find(item => item.id === productId); if (existingItem) { existingItem.quantity += 1; } else { cart.push({ id: product.id, name: product.name, price: product.discount ? product.price * (1 - product.discount/100) : product.price, quantity: 1, image: product.image }); } localStorage.setItem('cart', JSON.stringify(cart)); updateCartCount(); showToast('تم إضافة المنتج إلى سلة التسوق', 'success'); } // Update cart count in UI function updateCartCount() { const cart = JSON.parse(localStorage.getItem('cart') || '[]'); const cartCount = cart.reduce((total, item) => total + item.quantity, 0); document.querySelectorAll('.order-badge').forEach(badge => { if (badge.textContent.includes('سلة التسوق')) { badge.textContent = cartCount; } }); } // Show toast notification function showToast(message, type) { const toast = document.createElement('div'); toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${ type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : type === 'info' ? 'bg-blue-500' : 'bg-gray-500' }`; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { toast.remove(); }, 3000); } // Open modal for adding new product function openAddProductModal() { productForm.reset(); productIdInput.value = ''; modalTitle.textContent = 'إضافة منتج جديد'; imagePreview.innerHTML = '<span class="text-gray-500">لا توجد صورة</span>'; productModal.style.display = 'flex'; } // Open modal for editing product function editProduct(id) { const product = products.find(p => p.id === id); if (product) { productIdInput.value = product.id; productNameInput.value = product.name; productPriceInput.value = product.price; productQuantityInput.value = product.quantity; productCategoryInput.value = product.category; productDescriptionInput.value = product.description; if (product.image) { imagePreview.innerHTML = `<img src="${product.image}" alt="Preview" class="max-w-full max-h-full">`; } else { imagePreview.innerHTML = '<span class="text-gray-500">لا توجد صورة</span>'; } modalTitle.textContent = 'تعديل المنتج'; productModal.style.display = 'flex'; } } // Delete product function deleteProduct(id) { if (confirm('هل أنت متأكد من حذف هذا المنتج؟')) { products = products.filter(p => p.id !== id); renderProductsTable(); renderStoreProducts(); showToast('تم حذف المنتج بنجاح', 'success'); } } // Save product (add new or update existing) function saveProduct(e) { e.preventDefault(); const id = productIdInput.value ? parseInt(productIdInput.value) : Date.now(); const name = productNameInput.value; const price = parseInt(productPriceInput.value); const quantity = parseInt(productQuantityInput.value); const category = productCategoryInput.value; const description = productDescriptionInput.value; // Get image (for simplicity, we'll just keep the placeholder) let image = 'https://via.placeholder.com/300x200/e2e8f0/64748b?text=' + encodeURIComponent(name); // If there's an image preview with an actual image if (imagePreview.querySelector('img') && !imagePreview.querySelector('img').src.includes('placeholder')) { image = imagePreview.querySelector('img').src; } const product = { id, name, price, quantity, category, description, image }; if (productIdInput.value) { // Update existing product const index = products.findIndex(p => p.id === id); products[index] = product; showToast('تم تحديث المنتج بنجاح', 'success'); } else { // Add new product products.push(product); showToast('تم إضافة المنتج بنجاح', 'success'); } renderProductsTable(); renderStoreProducts(); closeModal(); } // Close modal function closeModal() { productModal.style.display = 'none'; } // Setup event listeners function setupEventListeners() { // Mobile sidebar toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileSidebar = document.getElementById('mobile-sidebar'); const closeMobileSidebar = document.getElementById('close-mobile-sidebar'); const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay'); mobileMenuBtn.addEventListener('click', () => { mobileSidebar.classList.remove('translate-x-full'); mobileSidebarOverlay.classList.remove('hidden'); }); closeMobileSidebar.addEventListener('click', () => { mobileSidebar.classList.add('translate-x-full'); mobileSidebarOverlay.classList.add('hidden'); }); mobileSidebarOverlay.addEventListener('click', () => { mobileSidebar.classList.add('translate-x-full'); mobileSidebarOverlay.classList.add('hidden'); }); // Mode Switching const adminModeBtn = document.getElementById('admin-mode'); const storeModeBtn = document.getElementById('store-mode'); const mobileAdminModeBtn = document.getElementById('mobile-admin-mode'); const mobileStoreModeBtn = document.getElementById('mobile-store-mode'); const adminContent = document.getElementById('admin-content'); const storeContent = document.getElementById('store-content'); const adminMenu = document.querySelectorAll('.admin-menu'); const storeMenu = document.querySelectorAll('.store-menu'); const pageTitle = document.getElementById('page-title'); function switchToAdminMode() { adminModeBtn.classList.add('active'); storeModeBtn.classList.remove('active'); mobileAdminModeBtn.classList.add('active'); mobileStoreModeBtn.classList.remove('active'); adminContent.classList.remove('hidden'); storeContent.classList.add('hidden'); adminMenu.forEach(menu => menu.classList.remove('hidden')); storeMenu.forEach(menu => menu.classList.add('hidden')); pageTitle.textContent = 'لوحة التحكم'; } function switchToStoreMode() { adminModeBtn.classList.remove('active'); storeModeBtn.classList.add('active'); mobileAdminModeBtn.classList.remove('active'); mobileStoreModeBtn.classList.add('active'); adminContent.classList.add('hidden'); storeContent.classList.remove('hidden'); adminMenu.forEach(menu => menu.classList.add('hidden')); storeMenu.forEach(menu => menu.classList.remove('hidden')); pageTitle.textContent = 'متجر الكليجة'; } adminModeBtn.addEventListener('click', switchToAdminMode); storeModeBtn.addEventListener('click', switchToStoreMode); mobileAdminModeBtn.addEventListener('click', switchToAdminMode); mobileStoreModeBtn.addEventListener('click', switchToStoreMode); // Products link document.getElementById('products-link').addEventListener('click', (e) => { e.preventDefault(); document.getElementById('products-management').scrollIntoView({ behavior: 'smooth' }); }); document.getElementById('mobile-products-link').addEventListener('click', (e) => { e.preventDefault(); switchToAdminMode(); document.getElementById('products-management').scrollIntoView({ behavior: 'smooth' }); mobileSidebar.classList.add('translate-x-full'); mobileSidebarOverlay.classList.add('hidden'); }); // Product modal addProductBtn.addEventListener('click', openAddProductModal); closeModalBtn.addEventListener('click', closeModal); cancelBtn.addEventListener('click', closeModal); productForm.addEventListener('submit', saveProduct); // Image upload uploadImageBtn.addEventListener('click', () => productImageInput.click()); productImageInput.addEventListener('change', (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { imagePreview.innerHTML = `<img src="${event.target.result}" alt="Preview" class="max-w-full max-h-full">`; }; reader.readAsDataURL(file); } }); // Notifications notificationsBtn.addEventListener('click', () => { notificationsModal.style.display = 'flex'; }); closeNotificationsModal.addEventListener('click', () => { notificationsModal.style.display = 'none'; }); window.addEventListener('click', (e) => { if (e.target === notificationsModal) { notificationsModal.style.display = 'none'; } }); } // Setup charts function setupCharts() { // Sales Chart const salesCtx = document.getElementById('salesChart').getContext('2d'); const salesChart = new Chart(salesCtx, { type: 'line', data: { labels: ['1', '5', '10', '15', '20', '25', '30'], datasets: [{ label: 'المبيعات اليومية', data: [120000, 190000, 150000, 200000, 180000, 220000, 250000], backgroundColor: 'rgba(217, 119, 6, 0.1)', borderColor: 'rgba(217, 119, 6, 1)', borderWidth: 2, tension: 0.3, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } } } }); // Products Chart const productsCtx = document.getElementById('productsChart').getContext('2d'); const productsChart = new Chart(productsCtx, { type: 'bar', data: { labels: ['كليجة التمر', 'كليجة الجوز', 'كليجة اللوز', 'صندوق هدايا', 'كليجة الشوكولاتة'], datasets: [{ label: 'عدد المبيعات', data: [85, 62, 45, 38, 28], backgroundColor: [ 'rgba(217, 119, 6, 0.7)', 'rgba(217, 119, 6, 0.6)', 'rgba(217, 119, 6, 0.5)', 'rgba(217, 119, 6, 0.4)', 'rgba(217, 119, 6, 0.3)' ], borderColor: [ 'rgba(217, 119, 6, 1)', 'rgba(217, 119, 6, 1)', 'rgba(217, 119, 6, 1)', 'rgba(217, 119, 6, 1)', 'rgba(217, 119, 6, 1)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } } } }); } // Initialize the app when DOM is loaded document.addEventListener('DOMContentLoaded', init); </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=81fr/tesstr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!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: #f8f9fa;
}
.sidebar {
transition: all 0.3s ease;
}
.sidebar-link:hover {
background-color: rgba(217, 119, 6, 0.1);
}
.active-link {
background-color: rgba(217, 119, 6, 0.2);
border-right: 3px solid #d97706;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.chart-container {
height: 300px;
}
.order-badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.mode-switch {
transition: all 0.3s ease;
}
.mode-switch.active {
background-color: #d97706;
color: white;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
width: 90%;
max-width: 500px;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* Image Upload Preview */
.image-preview {
width: 150px;
height: 150px;
border: 2px dashed #d1d5db;
border-radius: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-bottom: 1rem;
}
.image-preview img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body class="text-gray-800">