22 - python & all web labs
This commit is contained in:
162
labWeb/lab8/contacts.html
Normal file
162
labWeb/lab8/contacts.html
Normal 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">© 2024 ТурНиша. Все права защищены.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
181
labWeb/lab8/css/style.css
Normal file
181
labWeb/lab8/css/style.css
Normal 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
151
labWeb/lab8/index.html
Normal 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>© 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
137
labWeb/lab8/news.html
Normal 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">© 2024 ТурНиша. Все права защищены.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
260
labWeb/lab8/order.html
Normal file
260
labWeb/lab8/order.html
Normal 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">© 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
174
labWeb/lab8/products.html
Normal 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">© 2024 ТурНиша. Все права защищены.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
labWeb/lab8/script.js
Normal file
85
labWeb/lab8/script.js
Normal 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
29
labWeb/lab8/style.css
Normal 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user