Spaces:
Configuration error
Configuration error
| <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> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen bg-gray-200"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 text-white flex flex-col"> | |
| <div class="px-8 py-6 border-b border-gray-700"> | |
| <h2 class="text-2xl font-semibold">متجري</h2> | |
| </div> | |
| <nav class="flex-1 px-4 py-4"> | |
| <a href="index.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md"> | |
| <i data-feather="home" class="ml-3"></i> | |
| لوحة التحكم | |
| </a> | |
| <a href="products.html" class="flex items-center px-4 py-2 mt-2 text-gray-100 bg-gray-700 rounded-md"> | |
| <i data-feather="box" class="ml-3"></i> | |
| المنتجات | |
| </a> | |
| <a href="invoices.html" class="flex items-center px-4 py-2 mt-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md"> | |
| <i data-feather="file-text" class="ml-3"></i> | |
| الفواتير | |
| </a> | |
| <a href="debts.html" class="flex items-center px-4 py-2 mt-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md"> | |
| <i data-feather="dollar-sign" class="ml-3"></i> | |
| الديون | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center p-6 bg-white border-b"> | |
| <h1 class="text-3xl font-bold text-gray-800">المنتجات</h1> | |
| <div class="flex items-center"> | |
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center"> | |
| <i data-feather="plus-circle" class="ml-2"></i> إضافة منتج جديد | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">قائمة المنتجات</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-right"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="py-2 px-4">المنتج</th> | |
| <th class="py-2 px-4">SKU</th> | |
| <th class="py-2 px-4">السعر</th> | |
| <th class="py-2 px-4">المخزون</th> | |
| <th class="py-2 px-4">الحالة</th> | |
| <th class="py-2 px-4">إجراءات</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 px-4 flex items-center"> | |
| <img src="http://static.photos/technology/200x200/1" alt="Product" class="w-10 h-10 rounded ml-3 object-cover"> | |
| <span>هاتف ذكي حديث</span> | |
| </td> | |
| <td class="py-2 px-4">SKU-001</td> | |
| <td class="py-2 px-4">SAR 1200.00</td> | |
| <td class="py-2 px-4">50</td> | |
| <td class="py-2 px-4"><span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-200 rounded-full">متوفر</span></td> | |
| <td class="py-2 px-4"> | |
| <button class="text-blue-500 hover:text-blue-700 ml-2"><i data-feather="edit-2"></i></button> | |
| <button class="text-red-500 hover:text-red-700"><i data-feather="trash-2"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-2 px-4 flex items-center"> | |
| <img src="http://static.photos/technology/200x200/2" alt="Product" class="w-10 h-10 rounded ml-3 object-cover"> | |
| <span>لابتوب محمول</span> | |
| </td> | |
| <td class="py-2 px-4">SKU-002</td> | |
| <td class="py-2 px-4">SAR 3500.00</td> | |
| <td class="py-2 px-4">15</td> | |
| <td class="py-2 px-4"><span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-200 rounded-full">متوفر</span></td> | |
| <td class="py-2 px-4"> | |
| <button class="text-blue-500 hover:text-blue-700 ml-2"><i data-feather="edit-2"></i></button> | |
| <button class="text-red-500 hover:text-red-700"><i data-feather="trash-2"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="py-2 px-4 flex items-center"> | |
| <img src="http://static.photos/technology/200x200/3" alt="Product" class="w-10 h-10 rounded ml-3 object-cover"> | |
| <span>سماعات لاسلكية</span> | |
| </td> | |
| <td class="py-2 px-4">SKU-003</td> | |
| <td class="py-2 px-4">SAR 450.00</td> | |
| <td class="py-2 px-4">0</td> | |
| <td class="py-2 px-4"><span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-200 rounded-full">غير متوفر</span></td> | |
| <td class="py-2 px-4"> | |
| <button class="text-blue-500 hover:text-blue-700 ml-2"><i data-feather="edit-2"></i></button> | |
| <button class="text-red-500 hover:text-red-700"><i data-feather="trash-2"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace() | |
| </script> | |
| </body> | |
| </html> |