ipram/labs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

22 - python & all web labs

Browse Source
This commit is contained in:
ip-ram
2026-05-02 20:27:02 +05:00
parent ef77f101fa
commit 19af922baf
5781 changed files with 770492 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
labWeb/lab8/order.html Normal file
View File

@@ -0,0 +1,260 @@
<!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>