Spaces:
Running
Running
| <html lang="ar"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeloPay - نظام الدفع</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=Roboto:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .delo-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .btn-primary { | |
| background-color: #4f46e5; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #4338ca; | |
| transform: translateY(-2px); | |
| } | |
| .scale-up { | |
| animation: scaleUp 0.3s ease-in-out; | |
| } | |
| @keyframes scaleUp { | |
| from { transform: scale(0.9); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| .input-focus { | |
| transition: all 0.3s ease; | |
| } | |
| .input-focus:focus { | |
| border-color: #4f46e5; | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4f46e5; | |
| font-weight: 500; | |
| color: #4f46e5; | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Top Navigation --> | |
| <nav class="bg-white shadow-lg border-b border-gray-200"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-tooth text-2xl text-indigo-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">DentoCare</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-search text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-6"> | |
| <!-- Patient Info Card --> | |
| <div class="delo-gradient rounded-xl text-white shadow-lg p-6 mb-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-90">معلومات المريض</p> | |
| <h2 class="text-3xl font-bold mt-1">أحمد السعدي</h2> | |
| <p class="text-sm opacity-90 mt-2">رقم الملف: DC-2024-001</p> | |
| </div> | |
| <button class="bg-white/20 p-2 rounded-lg"> | |
| <i class="fas fa-user-md"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-white/20"> | |
| <div class="flex justify-between"> | |
| <button class="flex items-center space-x-2 px-4 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition"> | |
| <i class="fas fa-calendar-check"></i> | |
| <span>حجز موعد</span> | |
| </button> | |
| <button class="flex items-center space-x-2 px-4 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition"> | |
| <i class="fas fa-file-medical"></i> | |
| <span>السجل الطبي</span> | |
| </button> | |
| <button class="flex items-center space-x-2 px-4 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| <span>الدفع</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services Tabs --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6"> | |
| <div class="flex border-b"> | |
| <button class="tab-control flex-1 py-4 text-center font-medium text-gray-600" data-tab="payments"> | |
| المدفوعات | |
| </button> | |
| <button class="tab-control flex-1 py-4 text-center font-medium text-gray-600" data-tab="mobile"> | |
| الجوال | |
| </button> | |
| <button class="tab-control flex-1 py-4 text-center font-medium text-gray-600" data-tab="utilities"> | |
| المرافق | |
| </button> | |
| </div> | |
| <!-- Payments Tab Content --> | |
| <div id="payments" class="tab-content p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800">خدمات طب الأسنان</h3> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="cleaning"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-tooth text-purple-600"></i> | |
| </div> | |
| <span class="text-xs text-center">تنظيف الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="whitening"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-sparkles text-blue-600"></i> | |
| </div> | |
| <span class="text-xs text-center">تبييض الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="braces"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-teeth text-green-600"></i> | |
| </div> | |
| <span class="text-xs text-center">تقويم الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="filling"> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-syringe text-yellow-600"></i> | |
| </div> | |
| <span class="text-xs text-center">حشو الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="extraction"> | |
| <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-tooth text-red-600"></i> | |
| </div> | |
| <span class="text-xs text-center">خلع الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="implant"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-implant text-indigo-600"></i> | |
| </div> | |
| <span class="text-xs text-center">زراعة الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="xray"> | |
| <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-x-ray text-pink-600"></i> | |
| </div> | |
| <span class="text-xs text-center">أشعة الأسنان</span> | |
| </button> | |
| <button class="service-btn flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition" data-service="consultation"> | |
| <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-user-md text-gray-600"></i> | |
| </div> | |
| <span class="text-xs text-center">استشارة طبية</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Tab Content (Hidden by default) --> | |
| <div id="mobile" class="tab-content hidden p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800">مشغلو الجوال</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Ucell_logo.svg/1200px-Ucell_logo.svg.png" alt="Ucell" class="h-10 mb-2"> | |
| <span class="text-xs">Ucell</span> | |
| </button> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Beeline_logo.svg/1200px-Beeline_logo.svg.png" alt="Beeline" class="h-10 mb-2"> | |
| <span class="text-xs">Beeline</span> | |
| </button> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Uzmobile_logo_2019.svg/1200px-Uzmobile_logo_2019.svg.png" alt="Uzmobile" class="h-10 mb-2"> | |
| <span class="text-xs">Uzmobile</span> | |
| </button> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Mobiuz_logo_2020.svg/1200px-Mobiuz_logo_2020.svg.png" alt="Mobiuz" class="h-10 mb-2"> | |
| <span class="text-xs">Mobiuz</span> | |
| </button> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Perevod_uz_Logo_%282021%29.png/800px-Perevod_uz_Logo_%282021%29.png" alt="Perfectum" class="h-10 mb-2"> | |
| <span class="text-xs">Perfectum</span> | |
| </button> | |
| <button class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-ellipsis-h text-gray-600"></i> | |
| </div> | |
| <span class="text-xs">أخرى</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Utilities Tab Content (Hidden by default) --> | |
| <div id="utilities" class="tab-content hidden p-4"> | |
| <h3 class="text-lg font-semibold mb-4 text-gray-800">مدفوعات المرافق</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full flex items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb text-purple-600"></i> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-medium text-gray-800">Elektron energiya</h4> | |
| <p class="text-xs text-gray-500">"O'zbekenergo" AJ</p> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-tint text-blue-600"></i> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-medium text-gray-800">Suv ta'minoti</h4> | |
| <p class="text-xs text-gray-500">"Toshkent suv ta'minoti"</p> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-fire text-green-600"></i> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-medium text-gray-800">Gaz ta'minoti</h4> | |
| <p class="text-xs text-gray-500">"O'ztransgaz" AJ</p> | |
| </div> | |
| </button> | |
| <button class="w-full flex items-center p-3 rounded-lg hover:bg-gray-50 transition"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-trash text-yellow-600"></i> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-medium text-gray-800">Chiqqi chiqindilar</h4> | |
| <p class="text-xs text-gray-500">"Toza shaharcha"</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">آخر العمليات</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">عرض الكل</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-wifi text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Internet to'lovi</h4> | |
| <p class="text-xs text-gray-500">O'zbektelekom • Bugun 14:23</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-600">+95,000 UZS</p> | |
| <p class="text-xs text-gray-500">ناجح</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-mobile-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Mobil aloqa</h4> | |
| <p class="text-xs text-gray-500">Ucell • 12.03.2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">-50,000 UZS</p> | |
| <p class="text-xs text-gray-500">ناجح</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lightbulb text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Elektron energiya</h4> | |
| <p class="text-xs text-gray-500">O'zbekenergo • 05.03.2023</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">-120,000 UZS</p> | |
| <p class="text-xs text-gray-500">ناجح</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Form Modal (Hidden by default) --> | |
| <div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4 scale-up"> | |
| <div class="delo-gradient text-white rounded-t-lg p-4 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold">دفع خدمات الإنترنت</h3> | |
| <button id="closeModal" class="p-1 rounded-full hover:bg-white/20"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="paymentForm"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">المزود</label> | |
| <div class="flex items-center bg-gray-100 p-3 rounded-lg"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-wifi text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">O'zbektelekom</h4> | |
| <p class="text-xs text-gray-500">خدمات الإنترنت</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="accountNumber" class="block text-sm font-medium text-gray-700 mb-1">رقم المشترك</label> | |
| <input type="text" id="accountNumber" class="input-focus w-full p-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="987654321"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">مبلغ الدفع (UZS)</label> | |
| <input type="text" id="amount" class="input-focus w-full p-3 border border-gray-300 rounded-lg focus:outline-none" placeholder="95,000"> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-3 px-4 rounded-lg text-white font-medium shadow-md mt-4 flex items-center justify-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> إجراء الدفع | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal (Hidden by default) --> | |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4 slide-in"> | |
| <div class="p-6 text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-check text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">تم إجراء الدفع بنجاح!</h3> | |
| <p class="text-gray-600 mb-6">مبلغ الدفع: <span class="font-bold text-indigo-600">95,000 UZS</span></p> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-6 text-left"> | |
| <div class="flex justify-between py-2 border-b border-gray-200"> | |
| <span class="text-gray-600">Yetkazib beruvchi:</span> | |
| <span class="font-medium">O'zbektelekom</span> | |
| </div> | |
| <div class="flex justify-between py-2 border-b border-gray-200"> | |
| <span class="text-gray-600">Abonent raqami:</span> | |
| <span class="font-medium">987654321</span> | |
| </div> | |
| <div class="flex justify-between py-2"> | |
| <span class="text-gray-600">Tranzaksiya ID:</span> | |
| <span class="font-medium">DELO23456789</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button id="printReceipt" class="flex-1 py-2 px-4 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition"> | |
| <i class="fas fa-print mr-2"></i> طباعة الإيصال | |
| </button> | |
| <button id="closeSuccessModal" class="flex-1 py-2 px-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-check mr-2"></i> جاهز | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-indigo-600"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">الرئيسية</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-exchange-alt text-xl mb-1"></i> | |
| <span class="text-xs">التحويلات</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-qrcode text-xl mb-1"></i> | |
| <span class="text-xs">رمز QR</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-history text-xl mb-1"></i> | |
| <span class="text-xs">التاريخ</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-user text-xl mb-1"></i> | |
| <span class="text-xs">الملف الشخصي</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab switching functionality | |
| const tabControls = document.querySelectorAll('.tab-control'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabControls.forEach(control => { | |
| control.addEventListener('click', function() { | |
| // Remove active class from all controls | |
| tabControls.forEach(c => { | |
| c.classList.remove('tab-active'); | |
| c.classList.add('text-gray-600'); | |
| }); | |
| // Add active class to clicked control | |
| this.classList.add('tab-active'); | |
| this.classList.remove('text-gray-600'); | |
| // Hide all tab contents | |
| tabContents.forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Show selected tab content | |
| const tabId = this.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Activate first tab by default | |
| tabControls[0].click(); | |
| // Service button click handler | |
| const serviceButtons = document.querySelectorAll('.service-btn'); | |
| const appointmentModal = document.getElementById('appointmentModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| serviceButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const service = this.getAttribute('data-service'); | |
| appointmentModal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| closeModal.addEventListener('click', function() { | |
| appointmentModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Appointment form submission | |
| const appointmentForm = document.getElementById('appointmentForm'); | |
| const confirmationModal = document.getElementById('confirmationModal'); | |
| const closeConfirmationModal = document.getElementById('closeConfirmationModal'); | |
| const addToCalendar = document.getElementById('addToCalendar'); | |
| appointmentForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const appointmentDate = document.getElementById('appointmentDate').value; | |
| const appointmentTime = document.getElementById('appointmentTime').value; | |
| const doctor = document.getElementById('doctor').value; | |
| // Simple validation | |
| if (!appointmentDate || !appointmentTime || !doctor) { | |
| alert("يرجى ملء جميع الحقول!"); | |
| return; | |
| } | |
| // Show loading | |
| const submitBtn = appointmentForm.querySelector('button[type="submit"]'); | |
| submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> جاري المعالجة...'; | |
| submitBtn.disabled = true; | |
| // Simulate API call | |
| setTimeout(function() { | |
| appointmentModal.classList.add('hidden'); | |
| confirmationModal.classList.remove('hidden'); | |
| // Reset form | |
| appointmentForm.reset(); | |
| submitBtn.innerHTML = '<i class="fas fa-calendar-check mr-2"></i> تأكيد الحجز'; | |
| submitBtn.disabled = false; | |
| }, 2000); | |
| }); | |
| closeConfirmationModal.addEventListener('click', function() { | |
| confirmationModal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| addToCalendar.addEventListener('click', function() { | |
| alert("تم الضغط على زر إضافة إلى التقويم. هذه الميزة لا تعمل في النسخة التجريبية."); | |
| }); | |
| // Close modals when clicking outside | |
| [appointmentModal, confirmationModal].forEach(modal => { | |
| modal.addEventListener('click', function(e) { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=delogamesoft/delopay" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |