| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>حجز خدمة - Shine & Go</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
| body { |
| font-family: 'Tajawal', sans-serif; |
| } |
| .flatpickr-calendar { |
| font-family: 'Tajawal', sans-serif; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <nav class="bg-white shadow-lg"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="flex justify-between items-center h-20"> |
| <div class="flex items-center"> |
| <a href="index.html"> |
| <i data-feather="droplet" class="text-blue-600 w-8 h-8"></i> |
| <span class="text-xl font-bold text-blue-600 mr-2">Shine & Go</span> |
| </a> |
| </div> |
| <div class="hidden md:flex space-x-1 space-x-reverse"> |
| <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الرئيسية</a> |
| <a href="index.html#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">خدماتنا</a> |
| <a href="index.html#pricing" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الأسعار</a> |
| <a href="booking.html" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 bg-blue-50">حجز خدمة</a> |
| </div> |
| <div class="md:hidden"> |
| <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-blue-50"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="container mx-auto px-4 py-12 max-w-4xl"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="bg-blue-600 text-white p-6"> |
| <h1 class="text-2xl font-bold">حجز خدمة غسيل السيارات</h1> |
| <p class="mt-2 opacity-90">املأ النموذج أدناه لحجز موعدك</p> |
| </div> |
|
|
| <div class="p-6 md:p-8"> |
| <form id="bookingForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="md:col-span-2"> |
| <h2 class="text-xl font-semibold mb-4 border-b pb-2">المعلومات الشخصية</h2> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">الاسم الكامل</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">رقم الجوال</label> |
| <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">البريد الإلكتروني</label> |
| <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> |
| </div> |
|
|
| |
| <div class="md:col-span-2 mt-6"> |
| <h2 class="text-xl font-semibold mb-4 border-b pb-2">معلومات المركبة</h2> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">نوع المركبة</label> |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| <option value="">اختر نوع المركبة</option> |
| <option value="sedan">سيارة صغيرة</option> |
| <option value="suv">سيارة دفع رباعي</option> |
| <option value="truck">شاحنة</option> |
| <option value="luxury">سيارة فاخرة</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">طراز المركبة</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">رقم اللوحة</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">لون المركبة</label> |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| </div> |
|
|
| |
| <div class="md:col-span-2 mt-6"> |
| <h2 class="text-xl font-semibold mb-4 border-b pb-2">اختر الخدمة</h2> |
| </div> |
| <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors"> |
| <div class="flex items-center"> |
| <input type="radio" name="service" id="basic" value="basic" class="mr-2" checked> |
| <label for="basic" class="font-medium">غسيل أساسي</label> |
| </div> |
| <p class="text-gray-600 text-sm mt-2">غسيل خارجي وتنظيف العجلات والزجاج</p> |
| <p class="text-blue-600 font-bold mt-2">30 ريال</p> |
| </div> |
| <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors"> |
| <div class="flex items-center"> |
| <input type="radio" name="service" id="premium" value="premium" class="mr-2"> |
| <label for="premium" class="font-medium">غسيل مميز</label> |
| </div> |
| <p class="text-gray-600 text-sm mt-2">يشمل الأساسي مع شفط الداخلية</p> |
| <p class="text-blue-600 font-bold mt-2">60 ريال</p> |
| </div> |
| <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors"> |
| <div class="flex items-center"> |
| <input type="radio" name="service" id="full" value="full" class="mr-2"> |
| <label for="full" class="font-medium">تفصيل كامل</label> |
| </div> |
| <p class="text-gray-600 text-sm mt-2">تنظيف كامل مع شمع وتلميع</p> |
| <p class="text-blue-600 font-bold mt-2">150 ريال</p> |
| </div> |
| </div> |
|
|
| |
| <div class="md:col-span-2 mt-6"> |
| <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموعد</h2> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">التاريخ</label> |
| <input type="text" id="datePicker" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="اختر التاريخ" required> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">الوقت</label> |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| <option value="">اختر الوقت</option> |
| <option value="08:00">8:00 ص</option> |
| <option value="09:00">9:00 ص</option> |
| <option value="10:00">10:00 ص</option> |
| <option value="11:00">11:00 ص</option> |
| <option value="12:00">12:00 م</option> |
| <option value="13:00">1:00 م</option> |
| <option value="14:00">2:00 م</option> |
| <option value="15:00">3:00 م</option> |
| <option value="16:00">4:00 م</option> |
| <option value="17:00">5:00 م</option> |
| </select> |
| </div> |
|
|
| |
| <div class="md:col-span-2 mt-6"> |
| <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموقع</h2> |
| </div> |
| <div class="md:col-span-2"> |
| <label class="block text-gray-700 mb-2">اختر الفرع</label> |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required> |
| <option value="">اختر الفرع</option> |
| <option value="north">الفرع الشمالي - الرياض</option> |
| <option value="south">الفرع الجنوبي - الرياض</option> |
| <option value="east">الفرع الشرقي - الرياض</option> |
| <option value="west">الفرع الغربي - الرياض</option> |
| </select> |
| </div> |
| <div class="md:col-span-2"> |
| <label class="block text-gray-700 mb-2">ملاحظات إضافية (اختياري)</label> |
| <textarea rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea> |
| </div> |
| </div> |
|
|
| <div class="mt-8"> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium text-lg"> |
| تأكيد الحجز |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="bg-gray-800 text-white py-8 mt-12"> |
| <div class="max-w-7xl mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i data-feather="droplet" class="text-blue-400 w-6 h-6"></i> |
| <span class="text-xl font-bold text-blue-400 mr-2">Shine & Go</span> |
| </div> |
| <div class="text-gray-400 text-sm"> |
| © 2023 جميع الحقوق محفوظة |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| flatpickr("#datePicker", { |
| minDate: "today", |
| dateFormat: "Y-m-d", |
| locale: "ar" |
| }); |
| |
| |
| document.querySelectorAll('.service-option').forEach(option => { |
| option.addEventListener('click', function() { |
| document.querySelectorAll('.service-option').forEach(opt => { |
| opt.classList.remove('border-blue-500', 'bg-blue-50'); |
| }); |
| this.classList.add('border-blue-500', 'bg-blue-50'); |
| const radio = this.querySelector('input[type="radio"]'); |
| radio.checked = true; |
| }); |
| }); |
| |
| |
| document.getElementById('bookingForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('تم استلام طلب الحجز بنجاح! سنتصل بك لتأكيد الموعد.'); |
| this.reset(); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
