22 - python & all web labs

This commit is contained in:
2026-05-02 20:27:02 +05:00
parent ef77f101fa
commit 19af922baf
5781 changed files with 770492 additions and 96 deletions

162
labWeb/lab8/contacts.html Normal file
View File

@@ -0,0 +1,162 @@
<!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-gray-700 hover:text-emerald-600 transition">Заказать</a>
<a href="contacts.html" class="text-emerald-600 font-semibold border-b-2 border-emerald-600">Контакты</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-gray-700">Заказать</a>
<a href="contacts.html" class="block py-2 text-emerald-600 font-semibold">Контакты</a>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-12">
<h1 class="text-3xl md:text-4xl font-bold mb-8 text-gray-800 text-center">Контакты</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<div class="bg-white rounded-2xl shadow-lg p-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">Свяжитесь с нами</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="bg-emerald-100 p-3 rounded-full">
<i data-lucide="map-pin" class="w-6 h-6 text-emerald-600"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800">Адрес офиса</h3>
<p class="text-gray-600">г. Москва, ул. Туристическая, д. 15, офис 402</p>
<p class="text-sm text-gray-500">м. Третьяковская (10 мин. пешком)</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-emerald-100 p-3 rounded-full">
<i data-lucide="phone" class="w-6 h-6 text-emerald-600"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800">Телефоны</h3>
<p class="text-gray-600">8 (800) 555-35-35 (бесплатный)</p>
<p class="text-gray-600">8 (495) 123-45-67 (Москва)</p>
<p class="text-sm text-gray-500 mt-1">Ежедневно: 9:00 - 21:00</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-emerald-100 p-3 rounded-full">
<i data-lucide="mail" class="w-6 h-6 text-emerald-600"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800">Email</h3>
<p class="text-gray-600">info@turnisha.ru - общие вопросы</p>
<p class="text-gray-600">booking@turnisha.ru - бронирование</p>
<p class="text-gray-600">support@turnisha.ru - поддержка клиентов</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-emerald-100 p-3 rounded-full">
<i data-lucide="clock" class="w-6 h-6 text-emerald-600"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800">Режим работы</h3>
<p class="text-gray-600">Понедельник - Пятница: 9:00 - 20:00</p>
<p class="text-gray-600">Суббота - Воскресенье: 10:00 - 18:00</p>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t">
<h3 class="font-semibold text-gray-800 mb-4">Мы в соцсетях</h3>
<div class="flex gap-4">
<a href="#" class="bg-gray-100 p-3 rounded-full hover:bg-emerald-100 hover:text-emerald-600 transition">
<i data-lucide="send" class="w-5 h-5"></i>
</a>
</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-lg p-2 h-full min-h-[400px]">
<div class="w-full h-full bg-gray-200 rounded-xl flex items-center justify-center relative overflow-hidden">
<img src="http://static.photos/cityscape/1024x576/80" alt="Map" class="w-full h-full object-cover rounded-lg opacity-50">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white px-6 py-4 rounded-lg shadow-lg text-center">
<i data-lucide="map-pin" class="w-8 h-8 text-emerald-600 mx-auto mb-2"></i>
<p class="font-semibold text-gray-800">г. Москва, ул. Туристическая, 15</p>
<button class="mt-3 text-emerald-600 hover:underline text-sm">Открыть в Яндекс.Картах</button>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-2xl font-bold mb-6 text-gray-800">Наши офисы в других городах</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-2">Санкт-Петербург</h3>
<p class="text-gray-600 text-sm mb-2">Невский проспект, 28</p>
<p class="text-emerald-600 font-semibold">8 (812) 123-45-67</p>
</div>
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-2">Казань</h3>
<p class="text-gray-600 text-sm mb-2">Кремлевская ул., 15</p>
<p class="text-emerald-600 font-semibold">8 (843) 123-45-67</p>
</div>
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-2">Екатеринбург</h3>
<p class="text-gray-600 text-sm mb-2">пр. Ленина, 50</p>
<p class="text-emerald-600 font-semibold">8 (343) 123-45-67</p>
</div>
</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();
</script>
</body>
</html>

181
labWeb/lab8/css/style.css Normal file
View File

@@ -0,0 +1,181 @@
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem 0;
}
.product-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.news-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
}
.news-card-large {
grid-column: 1 / -1;
}
}
@media (min-width: 1024px) {
.news-grid {
grid-template-columns: repeat(3, 1fr);
}
.news-card-large {
grid-column: 1 / 3;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
}
.news-card-large img {
height: 300px;
width: 100%;
object-fit: cover;
}
}
.news-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.news-card:hover {
transform: translateY(-3px);
}
.news-card-large {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #374151;
}
input[type="radio"],
input[type="checkbox"] {
accent-color: #059669;
}
#mobile-menu {
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
opacity: 0;
}
#mobile-menu:not(.hidden) {
max-height: 400px;
opacity: 1;
}
#burger-btn {
transition: transform 0.2s;
}
#burger-btn:active {
transform: scale(0.95);
}
@media (max-width: 640px) {
.grid-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
header {
transition: box-shadow 0.3s ease;
}
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #10b981;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #059669;
}
img {
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
background-size: 200% 100%;
animation: 1.5s shine linear infinite;
}
@keyframes shine {
to {
background-position-x: -200%;
}
}
img[src] {
animation: none;
background: none;
}

151
labWeb/lab8/index.html Normal file
View File

@@ -0,0 +1,151 @@
<!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="../vendor/tailwind.css">
<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-emerald-600 font-semibold border-b-2 border-emerald-600">Главная</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-gray-700 hover:text-emerald-600 transition">Заказать</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-emerald-600 font-semibold">Главная</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-gray-700">Заказать</a>
<a href="contacts.html" class="block py-2 text-gray-700">Контакты</a>
</div>
</div>
</header>
<section class="relative bg-emerald-600 text-white py-20">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">Откройте мир с ТурНиша</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">Лучшие туры по доступным ценам. Горы, море, экскурсии и приключения ждут вас!</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="products.html" class="bg-white text-emerald-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">
Выбрать тур
</a>
<a href="news.html" class="bg-emerald-700 text-white px-8 py-3 rounded-full font-semibold hover:bg-emerald-800 transition">
Акции до -50%
</a>
</div>
</div>
</section>
<section class="py-16 container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Популярные направления</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300">
<img src="http://static.photos/nature/640x360/1" alt="Альпы" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Альпийские горы</h3>
<p class="text-gray-600 mb-4">7 дней в Швейцарии. Включено проживание и питание.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-emerald-600">45 000 ₽</span>
<a href="order.html" class="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition">
Заказать
</a>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300">
<img src="http://static.photos/sea/640x360/2" alt="Чёрное море" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Чёрное море</h3>
<p class="text-gray-600 mb-4">10 дней в Сочи. Все включено, пляжный отдых.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-emerald-600">32 000 ₽</span>
<a href="order.html" class="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition">
Заказать
</a>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300">
<img src="http://static.photos/cityscape/640x360/3" alt="Европа" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Европейские столицы</h3>
<p class="text-gray-600 mb-4">Экскурсионный тур: Париж, Берлин, Прага. 12 дней.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-emerald-600">68 000 ₽</span>
<a href="order.html" class="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition">
Заказать
</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="products.html" class="inline-block border-2 border-emerald-600 text-emerald-600 px-8 py-3 rounded-full font-semibold hover:bg-emerald-600 hover:text-white transition">
Все туры
</a>
</div>
</section>
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-left">
<div>
<h4 class="text-xl font-bold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="compass" class="w-5 h-5"></i>
ТурНиша
</h4>
<p class="text-gray-400">Ваш проводник в мир путешествий с 2015 года.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Быстрые ссылки</h4>
<div class="space-y-2">
<a href="products.html" class="block text-gray-400 hover:text-white">Каталог</a>
<a href="news.html" class="block text-gray-400 hover:text-white">Акции</a>
<a href="contacts.html" class="block text-gray-400 hover:text-white">Контакты</a>
</div>
</div>
<div>
<h4 class="font-semibold mb-4">Контакты</h4>
<p class="text-gray-400">тел: 8 (800) 555-35-35</p>
<p class="text-gray-400">email: info@turnisha.ru</p>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2024 ТурНиша. Все права защищены.</p>
</div>
</div>
</footer>
<script src="js/script.js"></script>
<script>
lucide.createIcons();
</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html>

137
labWeb/lab8/news.html Normal file
View File

@@ -0,0 +1,137 @@
<!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-emerald-600 font-semibold border-b-2 border-emerald-600">Акции</a>
<a href="order.html" class="text-gray-700 hover:text-emerald-600 transition">Заказать</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-emerald-600 font-semibold">Акции</a>
<a href="order.html" class="block py-2 text-gray-700">Заказать</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">
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">Акции и новости</h1>
<p class="text-gray-600 mb-8">Специальные предложения и последние новости компании</p>
<div class="news-grid">
<div class="news-card-large">
<img src="http://static.photos/red/1200x630/50" alt="Распродажа">
<div class="p-6">
<span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold mb-3 inline-block">Горячая распродажа</span>
<h2 class="text-2xl font-bold mb-3">Летняя распродажа до -50%!</h2>
<p class="text-gray-600 mb-4">Успейте забронировать туры на июль и август со скидкой до 50%. Предложение ограничено!</p>
<p class="text-sm text-gray-400 mb-4">До конца акции осталось: 3 дня</p>
<a href="products.html" class="inline-block bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 transition">
Смотреть туры
</a>
</div>
</div>
<div class="news-card">
<img src="http://static.photos/sea/640x360/55" alt="Крым" class="w-full h-48 object-cover">
<div class="p-5">
<span class="text-emerald-600 text-sm font-semibold">Акция</span>
<h3 class="text-xl font-bold mb-2 mt-1">Крым: 2 по цене 1</h3>
<p class="text-gray-600 text-sm mb-3">При покупке тура в Крым, второй тур для спутника бесплатно!</p>
<span class="text-gray-400 text-xs">15 января 2024</span>
</div>
</div>
<div class="news-card">
<img src="http://static.photos/mountain/640x360/60" alt="Шерегеш" class="w-full h-48 object-cover">
<div class="p-5">
<span class="text-blue-600 text-sm font-semibold">Новость</span>
<h3 class="text-xl font-bold mb-2 mt-1">Открытие сезона в Шерегеше</h3>
<p class="text-gray-600 text-sm mb-3">Начинаем бронирование зимнего сезона 2024. Раннее бронирование -20%.</p>
<span class="text-gray-400 text-xs">10 января 2024</span>
</div>
</div>
<div class="news-card">
<img src="http://static.photos/technology/640x360/65" alt="Приложение" class="w-full h-48 object-cover">
<div class="p-5">
<span class="text-purple-600 text-sm font-semibold">Обновление</span>
<h3 class="text-xl font-bold mb-2 mt-1">Новое мобильное приложение</h3>
<p class="text-gray-600 text-sm mb-3">Скачайте наше приложение и получите скидку 10% на первое бронирование.</p>
<span class="text-gray-400 text-xs">5 января 2024</span>
</div>
</div>
<div class="news-card">
<img src="http://static.photos/event/640x360/70" alt="Конкурс" class="w-full h-48 object-cover">
<div class="p-5">
<span class="text-orange-600 text-sm font-semibold">Конкурс</span>
<h3 class="text-xl font-bold mb-2 mt-1">Выиграйте бесплатный тур</h3>
<p class="text-gray-600 text-sm mb-3">Поделитесь фото из прошлого путешествия с хэштегом #ТурНиша и выиграйте тур.</p>
<span class="text-gray-400 text-xs">1 января 2024</span>
</div>
</div>
</div>
<div class="mt-12 bg-emerald-600 rounded-2xl p-8 text-center text-white">
<h2 class="text-2xl font-bold mb-4">Подпишитесь на рассылку</h2>
<p class="mb-6">Получайте первыми информацию о новых акциях и скидках</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<input type="email" placeholder="Ваш email" class="flex-1 px-4 py-3 rounded-lg text-gray-800 focus:outline-none">
<button type="submit" class="bg-gray-800 px-6 py-3 rounded-lg hover:bg-gray-900 transition">
Подписаться
</button>
</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();
</script>
</body>
</html>

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>

174
labWeb/lab8/products.html Normal file
View File

@@ -0,0 +1,174 @@
<!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-emerald-600 font-semibold border-b-2 border-emerald-600">Туры</a>
<a href="news.html" class="text-gray-700 hover:text-emerald-600 transition">Акции</a>
<a href="order.html" class="text-gray-700 hover:text-emerald-600 transition">Заказать</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-emerald-600 font-semibold">Туры</a>
<a href="news.html" class="block py-2 text-gray-700">Акции</a>
<a href="order.html" class="block py-2 text-gray-700">Заказать</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">
<h1 class="text-3xl md:text-4xl font-bold mb-8 text-gray-800">Каталог туров</h1>
<div class="grid-container">
<div class="product-card">
<div class="relative">
<img src="http://static.photos/nature/640x360/10" alt="Кавказ" class="w-full h-56 object-cover">
<span class="absolute top-4 left-4 bg-emerald-600 text-white px-3 py-1 rounded-full text-sm">Хит продаж</span>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Турбаза на Кавказе</h3>
<p class="text-gray-600 text-sm mb-4">5 дней в горах Северного Кавказа. Пешие походы, водопады.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-emerald-600">25 000 ₽</span>
<span class="text-gray-400 text-sm">5 дней</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
<div class="product-card">
<div class="relative">
<img src="http://static.photos/sea/640x360/15" alt="Таиланд" class="w-full h-56 object-cover">
<span class="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm">-30%</span>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Пхукет, Таиланд</h3>
<p class="text-gray-600 text-sm mb-4">12 дней на острове. Отель 4*, питание все включено.</p>
<div class="flex justify-between items-center mb-4">
<div>
<span class="text-2xl font-bold text-emerald-600">55 000 ₽</span>
<span class="text-gray-400 line-through text-sm ml-2">78 000 ₽</span>
</div>
<span class="text-gray-400 text-sm">12 дней</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
<div class="product-card">
<img src="http://static.photos/cityscape/640x360/20" alt="Петербург" class="w-full h-56 object-cover">
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Золотое кольцо + СПб</h3>
<p class="text-gray-600 text-sm mb-4">Экскурсионный тур по России. 8 дней, автобус.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-emerald-600">18 000 ₽</span>
<span class="text-gray-400 text-sm">8 дней</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
<div class="product-card">
<img src="http://static.photos/aerial/640x360/25" alt="Карелия" class="w-full h-56 object-cover">
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Карелия: Онежское озеро</h3>
<p class="text-gray-600 text-sm mb-4">3 дня на берегу озера. Рыбалка, сауна, катание на лодках.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-emerald-600">12 000 ₽</span>
<span class="text-gray-400 text-sm">3 дня</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
<div class="product-card">
<img src="http://static.photos/outdoor/640x360/30" alt="Байкал" class="w-full h-56 object-cover">
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Озеро Байкал</h3>
<p class="text-gray-600 text-sm mb-4">7 дней на Байкале. Экскурсии, купание, местная кухня.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-emerald-600">35 000 ₽</span>
<span class="text-gray-400 text-sm">7 дней</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
<div class="product-card">
<div class="relative">
<img src="http://static.photos/travel/640x360/35" alt="Турция" class="w-full h-56 object-cover">
<span class="absolute top-4 left-4 bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Новинка</span>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-2">Анталия, Турция</h3>
<p class="text-gray-600 text-sm mb-4">10 дней в отеле 5*. Все включено, бассейн, пляж.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-bold text-emerald-600">42 000 ₽</span>
<span class="text-gray-400 text-sm">10 дней</span>
</div>
<a href="order.html" class="block w-full text-center bg-emerald-600 text-white py-2 rounded-lg hover:bg-emerald-700 transition">
Забронировать
</a>
</div>
</div>
</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();
</script>
</body>
</html>

85
labWeb/lab8/script.js Normal file
View File

@@ -0,0 +1,85 @@
document.addEventListener('DOMContentLoaded', function() {
const burgerBtn = document.getElementById('burger-btn');
const mobileMenu = document.getElementById('mobile-menu');
let isMenuOpen = false;
function toggleMenu() {
isMenuOpen = !isMenuOpen;
const icon = burgerBtn.querySelector('i');
if (isMenuOpen) {
mobileMenu.classList.remove('hidden');
mobileMenu.style.maxHeight = '400px';
mobileMenu.style.opacity = '1';
if (icon) {
icon.setAttribute('data-lucide', 'x');
lucide.createIcons();
}
burgerBtn.setAttribute('aria-expanded', 'true');
} else {
mobileMenu.style.maxHeight = '0';
mobileMenu.style.opacity = '0';
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
if (icon) {
icon.setAttribute('data-lucide', 'menu');
lucide.createIcons();
}
burgerBtn.setAttribute('aria-expanded', 'false');
}
}
if (burgerBtn && mobileMenu) {
burgerBtn.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
toggleMenu();
});
});
document.addEventListener('click', function(e) {
if (isMenuOpen && !mobileMenu.contains(e.target) && !burgerBtn.contains(e.target)) {
toggleMenu();
}
});
window.addEventListener('resize', function() {
if (window.innerWidth >= 768 && isMenuOpen) {
toggleMenu();
}
});
}
const header = document.querySelector('header');
if (header) {
window.addEventListener('scroll', function() {
if (window.scrollY > 10) {
header.classList.add('shadow-lg');
header.classList.remove('shadow-md');
} else {
header.classList.add('shadow-md');
header.classList.remove('shadow-lg');
}
});
}
const dateInput = document.getElementById('date');
if (dateInput) {
const today = new Date().toISOString().split('T')[0];
dateInput.setAttribute('min', today);
}
});

29
labWeb/lab8/style.css Normal file
View File

@@ -0,0 +1,29 @@
body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}
h1 {
font-size: 16px;
margin-top: 0;
}
p {
color: rgb(107, 114, 128);
font-size: 15px;
margin-bottom: 10px;
margin-top: 5px;
}
.card {
max-width: 620px;
margin: 0 auto;
padding: 16px;
border: 1px solid lightgray;
border-radius: 16px;
}
.card p:last-child {
margin-bottom: 0;
}