labs/labWeb/lab8/order.html

<!DOCTYPE html>
<html lang="ru">
<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/lucide@latest"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans">
    
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <a href="index.html" class="text-2xl font-bold text-emerald-600 flex items-center gap-2">
                    <i data-lucide="compass"></i>
                    ТурНиша
                </a>

                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-emerald-600 transition">Главная</a>
                    <a href="products.html" class="text-gray-700 hover:text-emerald-600 transition">Туры</a>
                    <a href="news.html" class="text-gray-700 hover:text-emerald-600 transition">Акции</a>
                    <a href="order.html" class="text-emerald-600 font-semibold border-b-2 border-emerald-600">Заказать</a>
                    <a href="contacts.html" class="text-gray-700 hover:text-emerald-600 transition">Контакты</a>
                </nav>

                <button id="burger-btn" class="md:hidden p-2 text-gray-700 hover:text-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-lg" aria-label="Открыть меню" aria-expanded="false">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="px-4 py-2 space-y-2">
                <a href="index.html" class="block py-2 text-gray-700">Главная</a>
                <a href="products.html" class="block py-2 text-gray-700">Туры</a>
                <a href="news.html" class="block py-2 text-gray-700">Акции</a>
                <a href="order.html" class="block py-2 text-emerald-600 font-semibold">Заказать</a>
                <a href="contacts.html" class="block py-2 text-gray-700">Контакты</a>
            </div>
        </div>
    </header>

    
    <main class="container mx-auto px-4 py-12 max-w-4xl">
        <h1 class="text-3xl md:text-4xl font-bold mb-8 text-gray-800 text-center">Оформление заказа</h1>
        
        <div class="bg-white rounded-2xl shadow-lg p-6 md:p-10">
            <form id="order-form" class="space-y-6">
                
                <div class="form-group">
                    <label for="fullname" class="block text-sm font-medium text-gray-700 mb-2">
                        ФИО <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="fullname" name="fullname" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition"
                        placeholder="Иванов Иван Иванович">
                </div>

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    
                    <div class="form-group">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Email <span class="text-red-500">*</span>
                        </label>
                        <input type="email" id="email" name="email" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition"
                            placeholder="example@mail.ru">
                    </div>

                    
                    <div class="form-group">
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Телефон <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" id="phone" name="phone" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition"
                            placeholder="+7 (999) 123-45-67">
                    </div>
                </div>

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    
                    <div class="form-group">
                        <label for="tour" class="block text-sm font-medium text-gray-700 mb-2">
                            Выберите тур <span class="text-red-500">*</span>
                        </label>
                        <select id="tour" name="tour" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition bg-white">
                            <option value="">-- Выберите тур --</option>
                            <option value="alps">Альпийские горы - 45 000 ₽</option>
                            <option value="sochi">Чёрное море (Сочи) - 32 000 ₽</option>
                            <option value="europe">Европейские столицы - 68 000 ₽</option>
                            <option value="caucasus">Турбаза на Кавказе - 25 000 ₽</option>
                            <option value="phuket">Пхукет, Таиланд - 55 000 ₽</option>
                        </select>
                    </div>

                    
                    <div class="form-group">
                        <label for="date" class="block text-sm font-medium text-gray-700 mb-2">
                            Дата поездки <span class="text-red-500">*</span>
                        </label>
                        <input type="date" id="date" name="date" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition">
                    </div>
                </div>

                
                <div class="form-group">
                    <label for="people" class="block text-sm font-medium text-gray-700 mb-2">
                        Количество человек <span class="text-red-500">*</span>
                    </label>
                    <input type="number" id="people" name="people" min="1" max="20" value="1" required
                        class="w-full md:w-1/3 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition">
                </div>

                
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Тип питания</label>
                    <div class="space-y-2">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="food" value="none" class="w-4 h-4 text-emerald-600 border-gray-300 focus:ring-emerald-500">
                            <span class="ml-3 text-gray-700">Без питания</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="food" value="breakfast" class="w-4 h-4 text-emerald-600 border-gray-300 focus:ring-emerald-500" checked>
                            <span class="ml-3 text-gray-700">Завтраки</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="food" value="all" class="w-4 h-4 text-emerald-600 border-gray-300 focus:ring-emerald-500">
                            <span class="ml-3 text-gray-700">Все включено (+5000 ₽)</span>
                        </label>
                    </div>
                </div>

                
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Дополнительные услуги</label>
                    <div class="space-y-2">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="services" value="insurance" class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500">
                            <span class="ml-3 text-gray-700">Страховка (+1500 ₽)</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="services" value="transfer" class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500">
                            <span class="ml-3 text-gray-700">Трансфер из аэропорта (+2000 ₽)</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="services" value="guide" class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500">
                            <span class="ml-3 text-gray-700">Личный гид (+8000 ₽)</span>
                        </label>
                    </div>
                </div>

                
                <div class="form-group">
                    <label for="comments" class="block text-sm font-medium text-gray-700 mb-2">
                        Комментарии к заказу
                    </label>
                    <textarea id="comments" name="comments" rows="4"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none transition resize-none"
                        placeholder="Особые пожелания, аллергии, предпочтения по размещению..."></textarea>
                </div>

                
                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                    <div class="flex justify-between items-center text-lg font-semibold">
                        <span>Предварительная сумма:</span>
                        <span id="total-price" class="text-emerald-600 text-2xl">0 ₽</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-2">* Точная сумма будет рассчитана менеджером</p>
                </div>

                
                <div class="pt-4">
                    <button type="submit" class="w-full bg-emerald-600 text-white py-4 rounded-lg font-semibold text-lg hover:bg-emerald-700 transition transform hover:scale-[1.02] active:scale-[0.98]">
                        Отправить заявку
                    </button>
                    <p class="text-center text-sm text-gray-500 mt-4">
                        Нажимая кнопку, вы соглашаетесь с условиями бронирования
                    </p>
                </div>
            </form>
        </div>
    </main>

    
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-400">&copy; 2024 ТурНиша. Все права защищены.</p>
        </div>
    </footer>

    <script src="js/script.js"></script>
    <script>
        lucide.createIcons();
        
        
        const tourSelect = document.getElementById('tour');
        const peopleInput = document.getElementById('people');
        const totalSpan = document.getElementById('total-price');
        
        const prices = {
            'alps': 45000,
            'sochi': 32000,
            'europe': 68000,
            'caucasus': 25000,
            'phuket': 55000
        };
        
        function calculateTotal() {
            const tour = tourSelect.value;
            const people = parseInt(peopleInput.value) || 1;
            let total = 0;
            
            if (tour && prices[tour]) {
                total = prices[tour] * people;
                
                
                const food = document.querySelector('input[name="food"]:checked');
                if (food && food.value === 'all') {
                    total += 5000 * people;
                }
                
                
                const services = document.querySelectorAll('input[name="services"]:checked');
                services.forEach(service => {
                    if (service.value === 'insurance') total += 1500;
                    if (service.value === 'transfer') total += 2000;
                    if (service.value === 'guide') total += 8000;
                });
            }
            
            totalSpan.textContent = total.toLocaleString() + ' ₽';
        }
        
        tourSelect.addEventListener('change', calculateTotal);
        peopleInput.addEventListener('input', calculateTotal);
        document.querySelectorAll('input[name="food"], input[name="services"]').forEach(el => {
            el.addEventListener('change', calculateTotal);
        });
        
        
        document.getElementById('order-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Заявка успешно отправлена! Наш менеджер свяжется с вами в ближайшее время.');
            this.reset();
            totalSpan.textContent = '0 ₽';
        });
    </script>
    <script>
        lucide.createIcons();
    </script>
</body>
</html>