| <!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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| secondary: { |
| 50: '#faf5ff', |
| 100: '#f3e8ff', |
| 200: '#e9d5ff', |
| 300: '#d8b4fe', |
| 400: '#c084fc', |
| 500: '#a855f7', |
| 600: '#9333ea', |
| 700: '#7e22ce', |
| 800: '#6b21a8', |
| 900: '#581c87', |
| }, |
| gold: { |
| 100: '#fef3c7', |
| 200: '#fde68a', |
| 300: '#fcd34d', |
| 400: '#fbbf24', |
| 500: '#f59e0b', |
| 600: '#d97706', |
| 700: '#b45309', |
| 800: '#92400e', |
| 900: '#78350f', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| transition: background-color 0.3s ease; |
| } |
| |
| .dark-mode { |
| background-color: #1a202c; |
| color: #f7fafc; |
| } |
| |
| .dark-mode .card { |
| background-color: #2d3748; |
| border-color: #4a5568; |
| } |
| |
| .dark-mode .sidebar { |
| background-color: #1a202c; |
| border-color: #4a5568; |
| } |
| |
| .dark-mode .table-container { |
| background-color: #2d3748; |
| color: #f7fafc; |
| } |
| |
| .dark-mode input, .dark-mode textarea, .dark-mode select { |
| background-color: #2d3748; |
| border-color: #4a5568; |
| color: #f7fafc; |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .btn-gold { |
| background: linear-gradient(135deg, #fcd34d, #f59e0b); |
| color: #78350f; |
| font-weight: bold; |
| } |
| |
| .btn-gold:hover { |
| background: linear-gradient(135deg, #fbbf24, #d97706); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #7dd3fc, #0ea5e9); |
| color: white; |
| font-weight: bold; |
| } |
| |
| .btn-primary:hover { |
| background: linear-gradient(135deg, #38bdf8, #0284c7); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .btn-secondary { |
| background: linear-gradient(135deg, #d8b4fe, #9333ea); |
| color: white; |
| font-weight: bold; |
| } |
| |
| .btn-secondary:hover { |
| background: linear-gradient(135deg, #c084fc, #7e22ce); |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .sidebar-item:hover { |
| background-color: rgba(124, 58, 237, 0.1); |
| border-right: 4px solid #7c3aed; |
| } |
| |
| .sidebar-item.active { |
| background-color: rgba(124, 58, 237, 0.2); |
| border-right: 4px solid #7c3aed; |
| font-weight: bold; |
| } |
| |
| .highlight { |
| background-color: rgba(251, 191, 36, 0.2); |
| border-left: 3px solid #fbbf24; |
| padding: 2px 5px; |
| border-radius: 0 4px 4px 0; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div class="fixed top-4 left-4 z-50"> |
| <button id="darkModeToggle" class="p-2 rounded-full bg-white shadow-lg text-gray-800 dark:bg-gray-800 dark:text-yellow-300"> |
| <i class="fas fa-moon dark:hidden"></i> |
| <i class="fas fa-sun hidden dark:block"></i> |
| </button> |
| </div> |
|
|
| |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar w-64 bg-white shadow-lg border-r border-gray-200 dark:border-gray-700 dark:bg-gray-800 transition-all duration-300"> |
| <div class="p-4 flex items-center justify-center border-b border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 flex items-center justify-center text-white font-bold text-xl">ع</div> |
| <h1 class="mr-3 text-xl font-bold text-gray-800 dark:text-white">أبو العز</h1> |
| </div> |
| </div> |
| |
| <nav class="mt-6"> |
| <div class="px-4"> |
| <div class="relative"> |
| <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white" placeholder="بحث..."> |
| <i class="fas fa-search absolute left-4 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <a href="#" class="sidebar-item active flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-home ml-3 text-primary-500"></i> |
| <span>الرئيسية</span> |
| </a> |
| |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-paste ml-3 text-secondary-500"></i> |
| <span>معالجة الطلبات</span> |
| </a> |
| |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-chart-bar ml-3 text-gold-500"></i> |
| <span>التقارير</span> |
| </a> |
| |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-file-excel ml-3 text-green-500"></i> |
| <span>استيراد من Excel</span> |
| </a> |
| |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-users ml-3 text-blue-500"></i> |
| <span>العملاء</span> |
| </a> |
| |
| <a href="#" class="sidebar-item flex items-center px-6 py-3 text-gray-700 dark:text-gray-200"> |
| <i class="fas fa-cog ml-3 text-gray-500"></i> |
| <span>الإعدادات</span> |
| </a> |
| </div> |
| </nav> |
| |
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700"> |
| <div class="flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="User" class="w-10 h-10 rounded-full"> |
| <div class="mr-3"> |
| <p class="font-medium text-gray-800 dark:text-white">المسؤول</p> |
| <p class="text-sm text-gray-500 dark:text-gray-400">admin@abualaz.com</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto"> |
| |
| <header class="bg-white shadow-sm dark:bg-gray-800"> |
| <div class="px-6 py-4 flex items-center justify-between"> |
| <h2 class="text-xl font-semibold text-gray-800 dark:text-white">معالجة طلبات العملاء</h2> |
| |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <div class="relative"> |
| <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"> |
| <i class="fas fa-bell"></i> |
| </button> |
| <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span> |
| </div> |
| |
| <div class="relative"> |
| <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"> |
| <i class="fas fa-envelope"></i> |
| </button> |
| <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-blue-500"></span> |
| </div> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 dark:text-gray-400">إجمالي الطلبات</p> |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">1,248</h3> |
| </div> |
| <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-300"> |
| <i class="fas fa-file-alt text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+12% عن الشهر الماضي</span> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 dark:text-gray-400">العملاء النشطين</p> |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">86</h3> |
| </div> |
| <div class="p-3 rounded-full bg-secondary-100 dark:bg-secondary-900 text-secondary-600 dark:text-secondary-300"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+5 عملاء جدد</span> |
| </div> |
| </div> |
| |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 dark:text-gray-400">إجمالي الكميات</p> |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">5,842 كيلو</h3> |
| </div> |
| <div class="p-3 rounded-full bg-gold-100 dark:bg-gold-900 text-gold-600 dark:text-gold-300"> |
| <i class="fas fa-weight text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-red-500 text-sm font-medium">-3% عن الشهر الماضي</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">معالجة الطلبات</h3> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 dark:text-gray-300 mb-2">الصق نص الطلب هنا</label> |
| <textarea id="orderText" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white" rows="10" placeholder="مثال: |
| swift نسخ تحرير طلب هاشم الاكوع الجوبة اليوم والتاريخ 2025/8/9م |
| |
| من 10 الى 12 // 20 كيلو باذانجان 20 كيلو بسباس 20 كيلو بصل ابيض |
| 56 كيلو بصل احمر 312 كيلو بطاط زهر بيضاء 120 كيلو بطاط زهرة حمراء |
| 22 كيلو بيبار 21 كيلو ثوم 20 كيلو جزر"></textarea> |
| </div> |
| |
| <div class="flex justify-end space-x-3 space-x-reverse"> |
| <button id="clearBtn" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition"> |
| مسح |
| </button> |
| <button id="processBtn" class="btn-primary px-6 py-2 rounded-lg transition"> |
| معالجة الطلب |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">نتائج المعالجة</h3> |
| |
| <div id="resultsContainer" class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 min-h-[300px]"> |
| <div class="text-center text-gray-500 dark:text-gray-400 py-10" id="defaultResultsMessage"> |
| <i class="fas fa-file-alt text-4xl mb-3 text-gray-300 dark:text-gray-500"></i> |
| <p>سيتم عرض تفاصيل الطلب هنا بعد المعالجة</p> |
| </div> |
| |
| <div id="processedResults" class="hidden"> |
| <div class="mb-4"> |
| <h4 class="font-medium text-gray-800 dark:text-white mb-2">معلومات العميل</h4> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-gray-600 dark:text-gray-400 text-sm mb-1">اسم العميل</label> |
| <input type="text" id="customerName" class="w-full px-3 py-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" value="هاشم الاكوع"> |
| </div> |
| <div> |
| <label class="block text-gray-600 dark:text-gray-400 text-sm mb-1">التاريخ</label> |
| <input type="date" id="orderDate" class="w-full px-3 py-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" value="2025-08-09"> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-800 dark:text-white mb-2">تفاصيل الطلب</h4> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
| <thead class="bg-gray-100 dark:bg-gray-700"> |
| <tr> |
| <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الصنف</th> |
| <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الكمية</th> |
| <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الوحدة</th> |
| </tr> |
| </thead> |
| <tbody id="orderItems" class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| <div class="mt-4 flex justify-end"> |
| <button id="saveBtn" class="btn-secondary px-6 py-2 rounded-lg transition"> |
| حفظ الطلب |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card bg-white rounded-lg shadow dark:bg-gray-800 p-6 fade-in mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">أحدث الطلبات</h3> |
| <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">عرض الكل</a> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
| <thead class="bg-gray-100 dark:bg-gray-700"> |
| <tr> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">رقم الطلب</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">العميل</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">التاريخ</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">عدد الأصناف</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الإجمالي</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الحالة</th> |
| <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">الإجراءات</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-1256</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">هاشم الاكوع</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2025/08/09</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">8</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">591 كيلو</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 dark:bg-green-900 dark:text-green-200">مكتمل</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
| <button class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-2"><i class="fas fa-eye"></i></button> |
| <button class="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-300"><i class="fas fa-print"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-1255</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">أحمد السقاف</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2025/08/08</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">5</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">320 كيلو</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">قيد المعالجة</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
| <button class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-2"><i class="fas fa-eye"></i></button> |
| <button class="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-300"><i class="fas fa-print"></i></button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-1254</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">محمد الغامدي</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2025/08/07</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">12</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">780 كيلو</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 dark:bg-green-900 dark:text-green-200">مكتمل</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
| <button class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300 mr-2"><i class="fas fa-eye"></i></button> |
| <button class="text-secondary-600 dark:text-secondary-400 hover:text-secondary-900 dark:hover:text-secondary-300"><i class="fas fa-print"></i></button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const darkModeToggle = document.getElementById('darkModeToggle'); |
| const html = document.documentElement; |
| |
| |
| const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; |
| const savedMode = localStorage.getItem('darkMode'); |
| |
| if (savedMode === 'dark' || (!savedMode && userPrefersDark)) { |
| html.classList.add('dark-mode'); |
| } |
| |
| darkModeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark-mode'); |
| |
| |
| const isDark = html.classList.contains('dark-mode'); |
| localStorage.setItem('darkMode', isDark ? 'dark' : 'light'); |
| }); |
| |
| |
| const orderText = document.getElementById('orderText'); |
| const processBtn = document.getElementById('processBtn'); |
| const clearBtn = document.getElementById('clearBtn'); |
| const saveBtn = document.getElementById('saveBtn'); |
| const defaultResultsMessage = document.getElementById('defaultResultsMessage'); |
| const processedResults = document.getElementById('processedResults'); |
| const customerName = document.getElementById('customerName'); |
| const orderDate = document.getElementById('orderDate'); |
| const orderItems = document.getElementById('orderItems'); |
| |
| processBtn.addEventListener('click', processOrder); |
| clearBtn.addEventListener('click', clearForm); |
| saveBtn.addEventListener('click', saveOrder); |
| |
| function processOrder() { |
| const text = orderText.value.trim(); |
| |
| if (!text) { |
| alert('الرجاء إدخال نص الطلب'); |
| return; |
| } |
| |
| |
| const customerMatch = text.match(/طلب\s+(.+?)\s+الجوبة/); |
| const dateMatch = text.match(/التاريخ\s+(\d{4}\/\d{1,2}\/\d{1,2})/); |
| const itemsMatches = text.matchAll(/(\d+)\s*(كيلو|طن|علبة|صندوق)\s+([^\d\n]+)/g); |
| |
| |
| if (customerMatch && customerMatch[1]) { |
| customerName.value = customerMatch[1].trim(); |
| } else { |
| customerName.value = "غير معروف"; |
| } |
| |
| |
| if (dateMatch && dateMatch[1]) { |
| |
| const formattedDate = dateMatch[1].replace(/\//g, '-'); |
| orderDate.value = formattedDate; |
| } else { |
| orderDate.value = new Date().toISOString().split('T')[0]; |
| } |
| |
| |
| orderItems.innerHTML = ''; |
| let totalQuantity = 0; |
| |
| for (const match of itemsMatches) { |
| const quantity = match[1]; |
| const unit = match[2]; |
| const itemName = match[3].trim(); |
| |
| totalQuantity += parseInt(quantity); |
| |
| const row = document.createElement('tr'); |
| row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700'; |
| row.innerHTML = ` |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">${itemName}</td> |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">${quantity}</td> |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">${unit}</td> |
| `; |
| |
| orderItems.appendChild(row); |
| } |
| |
| |
| const totalRow = document.createElement('tr'); |
| totalRow.className = 'bg-gray-100 dark:bg-gray-700 font-semibold'; |
| totalRow.innerHTML = ` |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">الإجمالي</td> |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">${totalQuantity}</td> |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">كيلو</td> |
| `; |
| |
| orderItems.appendChild(totalRow); |
| |
| |
| defaultResultsMessage.classList.add('hidden'); |
| processedResults.classList.remove('hidden'); |
| } |
| |
| function clearForm() { |
| orderText.value = ''; |
| defaultResultsMessage.classList.remove('hidden'); |
| processedResults.classList.add('hidden'); |
| } |
| |
| function saveOrder() { |
| |
| alert('تم حفظ الطلب بنجاح!'); |
| clearForm(); |
| } |
| |
| |
| document.querySelectorAll('.fade-in').forEach((el, index) => { |
| el.style.animationDelay = `${index * 0.1}s`; |
| }); |
| </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=we125/nawaf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
