Download index.html from alkobr/4project: direct link, hf CLI and curl.
- Browser
- Download file 38.4 kB
-
https://huggingface.co/spaces/alkobr/4project/resolve/main/index.html
- Command line
-
hf download hf://spaces/alkobr/4project/index.html
-
curl -L -o index.html https://huggingface.co/spaces/alkobr/4project/resolve/main/index.html
38.4 kB
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>إدارة المنتجات - Conversena</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&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .rtl-input { | |
| direction: rtl; | |
| text-align: right; | |
| } | |
| .product-image { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| } | |
| .grid-product-image { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| } | |
| .status-badge { | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .stock-high { | |
| background-color: #ecfdf5; | |
| color: #065f46; | |
| } | |
| .stock-medium { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .stock-low { | |
| background-color: #fee2e2; | |
| color: #991b1b; | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #3b82f6; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #3b82f6; | |
| } | |
| .toggle-label { | |
| transition: all 0.3s ease; | |
| } | |
| .pagination .active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .quick-actions { | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .product-card:hover .quick-actions { | |
| opacity: 1; | |
| } | |
| @media (max-width: 768px) { | |
| .product-image { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| .grid-product-image { | |
| height: 120px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Page Header --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">إدارة المنتجات</h1> | |
| <p class="text-gray-500 mt-1">إجمالي المنتجات: ١٢٤</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="البحث عن منتج..." | |
| class="rtl-input pr-10 pl-4 py-2 border border-gray-300 rounded-lg w-full md:w-80 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>إضافة منتج جديد</span> | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i class="fas fa-file-import"></i> | |
| <span>استيراد منتجات</span> | |
| </button> | |
| <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i class="fas fa-file-export"></i> | |
| <span>تصدير</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Filter & Sort Bar --> | |
| <div class="bg-gray-50 rounded-lg shadow-sm p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex flex-wrap gap-3"> | |
| <select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>جميع الفئات</option> | |
| <option>أجهزة إلكترونية</option> | |
| <option>ملابس</option> | |
| <option>أثاث</option> | |
| </select> | |
| <select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>حالة المخزون</option> | |
| <option>متوفر</option> | |
| <option>منخفض</option> | |
| <option>نفد المخزون</option> | |
| </select> | |
| <div class="flex items-center gap-2"> | |
| <input type="number" placeholder="الحد الأدنى" class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <span>إلى</span> | |
| <input type="number" placeholder="الحد الأقصى" class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm w-24 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>ترتيب حسب</option> | |
| <option>الأحدث</option> | |
| <option>الأقدم</option> | |
| <option>السعر (الأقل أولاً)</option> | |
| <option>السعر (الأعلى أولاً)</option> | |
| <option>الأكثر مبيعاً</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-sm text-gray-500">تصفية سريعة:</span> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">منتجات نشطة</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">تحتاج تحديث</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">تحذيرات مخزون</span> | |
| </div> | |
| <a href="#" class="text-sm text-blue-600 hover:underline">مسح الكل</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Statistics Cards --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">إجمالي المنتجات</p> | |
| <h3 class="text-2xl font-bold mt-1">١٢٤</h3> | |
| <p class="text-green-500 text-sm mt-1">+٨ هذا الشهر</p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-box text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">المنتجات النشطة</p> | |
| <h3 class="text-2xl font-bold mt-1">١١٧</h3> | |
| <p class="text-gray-500 text-sm mt-1">٩٤.٤٪ من الإجمالي</p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">تحذيرات المخزون</p> | |
| <h3 class="text-2xl font-bold mt-1">١٢</h3> | |
| <p class="text-orange-500 text-sm mt-1">تحتاج إعادة تموين</p> | |
| </div> | |
| <div class="bg-orange-100 p-3 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-orange-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">نفد المخزون</p> | |
| <h3 class="text-2xl font-bold mt-1">٧</h3> | |
| <p class="text-gray-500 text-sm mt-1">٥.٦٪ من الإجمالي</p> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-times-circle text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Low Stock Alert Banner --> | |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600"></i> | |
| <p class="text-yellow-800">لديك ١٢ منتجاً بمخزون منخفض</p> | |
| <a href="#" class="text-yellow-700 hover:underline font-medium">عرض المنتجات</a> | |
| </div> | |
| <button class="text-yellow-600 hover:text-yellow-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- View Toggle --> | |
| <div class="flex justify-end mb-4"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-r-lg hover:bg-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-table mr-2"></i> جدول | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-th-large mr-2"></i> شبكة | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-list mr-2"></i> قائمة | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Table View --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| صورة المنتج | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| اسم المنتج | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| الفئة | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| السعر | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| المخزون | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| الحالة | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| آخر تحديث | |
| </th> | |
| <th scope="col" class="px-6 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"> | |
| <!-- Product Row 1 --> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">حذاء رياضي نايكي</div> | |
| <div class="text-sm text-gray-500">SKU: NK-2023-01</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> | |
| أحذية رياضية | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| ٣٤٩ ريال | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge stock-high">متوفر (٤٥)</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| منذ يومين | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">عرض</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تحرير</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تكرار</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Product Row 2 --> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">ساعة ذكية من سامسونج</div> | |
| <div class="text-sm text-gray-500">SKU: SS-2023-02</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800"> | |
| إلكترونيات | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| ٨٩٩ ريال | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge stock-medium">منخفض (٥)</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| منذ أسبوع | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">عرض</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تحرير</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تكرار</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Product Row 3 --> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <img src="https://images.unsplash.com/photo-1491553895911-0055e52d5d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="product-image"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">حقيبة ظهر للسفر</div> | |
| <div class="text-sm text-gray-500">SKU: BG-2023-03</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| حقائب | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| ١٩٩ ريال | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="status-badge stock-low">نفد المخزون (٠)</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| منذ شهر | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">عرض</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تحرير</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">تكرار</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">حذف</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| السابق | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| التالي | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| عرض | |
| <span class="font-medium">١</span> | |
| إلى | |
| <span class="font-medium">١٠</span> | |
| من | |
| <span class="font-medium">١٢٤</span> | |
| نتائج | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">السابق</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> | |
| ... | |
| </span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 8 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">التالي</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Grid View (Hidden by default) --> | |
| <div class="hidden"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-6"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image"> | |
| <div class="quick-actions absolute top-3 right-3 flex gap-2"> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600"> | |
| <i class="fas fa-eye text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">حذاء رياضي نايكي</h3> | |
| <p class="text-gray-500 text-sm mb-2">SKU: NK-2023-01</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-800">٣٤٩ ريال</span> | |
| <span class="status-badge stock-high">متوفر</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image"> | |
| <div class="quick-actions absolute top-3 right-3 flex gap-2"> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600"> | |
| <i class="fas fa-eye text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">ساعة ذكية من سامسونج</h3> | |
| <p class="text-gray-500 text-sm mb-2">SKU: SS-2023-02</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-800">٨٩٩ ريال</span> | |
| <span class="status-badge stock-medium">منخفض</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1491553895911-0055e52d5d00?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Product" class="grid-product-image"> | |
| <div class="quick-actions absolute top-3 right-3 flex gap-2"> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-blue-600"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </button> | |
| <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-green-600"> | |
| <i class="fas fa-eye text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-gray-800 mb-1">حقيبة ظهر للسفر</h3> | |
| <p class="text-gray-500 text-sm mb-2">SKU: BG-2023-03</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-gray-800">١٩٩ ريال</span> | |
| <span class="status-badge stock-low">نفد</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bulk Actions Panel (Hidden by default) --> | |
| <div class="hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4"> | |
| <div class="container mx-auto flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <span class="font-medium">تم تحديد ٣ منتجات</span> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex gap-3"> | |
| <select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>تحديث الحالة</option> | |
| <option>تفعيل</option> | |
| <option>تعطيل</option> | |
| </select> | |
| <select class="bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>تطبيق خصم</option> | |
| <option>١٠٪ خصم</option> | |
| <option>٢٠٪ خصم</option> | |
| </select> | |
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i class="fas fa-file-export"></i> | |
| <span>تصدير المحددة</span> | |
| </button> | |
| <button class="bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i class="fas fa-trash"></i> | |
| <span>حذف المحددة</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle dropdown menus | |
| document.querySelectorAll('.dropdown button').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const dropdown = button.parentElement; | |
| const menu = dropdown.querySelector('.dropdown-menu'); | |
| // Close all other open dropdowns | |
| document.querySelectorAll('.dropdown-menu').forEach(m => { | |
| if (m !== menu) m.classList.add('hidden'); | |
| }); | |
| // Toggle current dropdown | |
| menu.classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', () => { | |
| document.querySelectorAll('.dropdown-menu').forEach(menu => { | |
| menu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Toggle between table and grid view | |
| const viewToggleButtons = document.querySelectorAll('.inline-flex button'); | |
| const tableView = document.querySelector('.overflow-x-auto'); | |
| const gridView = document.querySelector('.grid'); | |
| viewToggleButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| viewToggleButtons.forEach(btn => { | |
| btn.classList.remove('bg-blue-600', 'text-white'); | |
| btn.classList.add('bg-white', 'text-gray-700'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('bg-blue-600', 'text-white'); | |
| button.classList.remove('bg-white', 'text-gray-700'); | |
| // Toggle views | |
| if (button.textContent.includes('جدول')) { | |
| tableView.classList.remove('hidden'); | |
| gridView.classList.add('hidden'); | |
| } else if (button.textContent.includes('شبكة')) { | |
| tableView.classList.add('hidden'); | |
| gridView.classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| // Simulate selecting products to show bulk actions panel | |
| setTimeout(() => { | |
| // Uncomment to show bulk actions panel by default for demo | |
| // document.querySelector('.fixed.bottom-0').classList.remove('hidden'); | |
| }, 1000); | |
| </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=alkobr/4project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |