kalugin66/hotel777
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Загрузить файлы в «public»

Browse Source
This commit is contained in:
kalugin66
2026-05-01 12:55:05 +05:00
parent 6bb93634c0
commit cf90f4d63f
1 changed files with 275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
public/index.html Normal file
View File

@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel 777 | Отдых в Абхазии</title>
<style>
/* --- БАЗОВЫЕ СТИЛИ И ПЕРЕМЕННЫЕ --- */
:root {
--primary: #005f73;
--secondary: #0a9396;
--light: #e9d8a6;
--dark: #001219;
--bg: #f8f9fa;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--bg); color: var(--dark); line-height: 1.6; overflow-x: hidden; }
/* --- АНИМАЦИИ --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
/* --- ШАПКА И HERO СЕКЦИЯ --- */
header { background: rgba(0, 18, 25, 0.9); color: white; padding: 1rem 5%; position: fixed; width: 100%; z-index: 100; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(5px); }
.logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; display: flex; align-items: center; gap: 20px;}
/* Селектор языка */
.lang-switch { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.5); padding: 5px 10px; border-radius: 5px; cursor: pointer; outline: none; font-size: 0.9rem; }
.lang-switch option { background: var(--dark); color: white; }
nav { display: flex; gap: 20px; align-items: center; }
nav a { color: white; text-decoration: none; transition: color 0.3s; }
nav a:hover { color: var(--light); }
.hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img/h777.png') center/cover; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 0 20px; }
.hero h1 { font-size: 4rem; margin-bottom: 10px; text-transform: uppercase; }
.hero p { font-size: 1.5rem; margin-bottom: 30px; }
.btn { padding: 12px 30px; background: var(--secondary); color: white; text-decoration: none; border-radius: 25px; font-weight: bold; transition: background 0.3s, transform 0.3s; border: none; cursor: pointer; }
.btn:hover { background: var(--primary); transform: scale(1.05); }
/* --- СЕКЦИИ КОНТЕНТА --- */
section { padding: 5rem 5%; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: var(--primary); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; }
.about-img { width: 100%; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.about-img:hover { transform: translateY(-10px); }
.signpost-img { max-height: 500px; width: auto; display: block; margin: 0 auto; }
/* --- ФОРМА И 152-ФЗ --- */
.booking-form { max-width: 600px; margin: 0 auto; background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #555; }
.checkbox-group input { width: auto; margin-top: 4px; }
/* --- КУКИ УВЕДОМЛЕНИЕ --- */
.cookie-banner { position: fixed; bottom: -100px; left: 0; width: 100%; background: var(--dark); color: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; transition: bottom 0.5s ease-in-out; z-index: 1000; box-shadow: 0 -5px 10px rgba(0,0,0,0.2); }
.cookie-banner.show { bottom: 0; }
.cookie-btn { background: var(--light); color: var(--dark); border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
/* --- ФУТЕР --- */
footer { background: var(--dark); color: white; text-align: center; padding: 2rem 5%; margin-top: 2rem; }
</style>
</head>
<body>
<header>
<div class="logo">
HOTEL 777
<select class="lang-switch" id="langSwitch" onchange="changeLanguage(this.value)">
<option value="ru">Русский</option>
<option value="ab">Аҧсуа</option>
<option value="en">English</option>
</select>
</div>
<nav>
<a href="#about" data-i18n="nav_about">О нас</a>
<a href="#location" data-i18n="nav_location">Расположение</a>
<a href="#booking" data-i18n="nav_booking">Бронь</a>
</nav>
</header>
<section class="hero">
<h1 class="animate" data-i18n="hero_title">Добро пожаловать</h1>
<p class="animate delay-1" data-i18n="hero_subtitle">Ваш идеальный отдых на берегу Черного моря</p>
<a href="#booking" class="btn animate delay-2" data-i18n="hero_btn">Забронировать номер</a>
</section>
<section id="about">
<h2 class="section-title animate" data-i18n="about_title">Море в шаговой доступности</h2>
<div class="about-grid">
<div class="animate delay-1">
<h3 data-i18n="about_subtitle">Бескрайние пляжи Гудауты</h3>
<p data-i18n="about_text">Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу. Наслаждайтесь шумом прибоя и ласковым абхазским солнцем вдали от городской суеты.</p>
</div>
<div>
<img src="img/XXXL.webp" alt="Пляж" class="about-img animate delay-2">
</div>
</div>
</section>
<section id="location" style="background: white;">
<h2 class="section-title animate" data-i18n="loc_title">Удобное расположение</h2>
<div class="about-grid">
<div>
<img src="img/znak.png" alt="Указатель" class="about-img signpost-img animate delay-1" style="box-shadow:none; border-radius:0;">
</div>
<div class="animate delay-2">
<h3 data-i18n="loc_subtitle">Все красоты Абхазии рядом</h3>
<p data-i18n="loc_address"><strong>Наш адрес:</strong> Гудаутский район, село Мгудзырхуа, Набережная улица, 1.</p>
<br>
<ul style="list-style-type: none;">
<li data-i18n="loc_dist1">🚗 Гудаута — 10 км</li>
<li data-i18n="loc_dist2">🚗 Лыхны — 15 км</li>
<li data-i18n="loc_dist3">🚗 Новый Афон — 25 км</li>
<li data-i18n="loc_dist4">🚗 Сухум — 51 км</li>
</ul>
<p style="margin-top: 15px;" data-i18n="loc_exc">Отправляйтесь на экскурсии прямо из нашего отеля!</p>
</div>
</div>
</section>
<section id="booking">
<h2 class="section-title animate" data-i18n="book_title">Забронировать отдых</h2>
<div class="booking-form animate delay-1">
<form action="#" method="POST" id="bookingForm">
<div class="form-group">
<label for="name" data-i18n="label_name">Ваше имя</label>
<input type="text" id="name" required placeholder="Иван Иванов" data-i18n-ph="ph_name">
</div>
<div class="form-group">
<label for="phone" data-i18n="label_phone">Номер телефона</label>
<input type="tel" id="phone" required placeholder="+7 (999) 000-00-00">
</div>
<div class="checkbox-group">
<input type="checkbox" id="fz152" required>
<label for="fz152" data-i18n="fz152">
Я даю согласие на обработку моих персональных данных в соответствии с требованиями <a href="#" style="color:var(--primary);">Федерального закона от 27.07.2006 г. № 152-ФЗ «О персональных данных»</a>.
</label>
</div>
<button type="submit" class="btn" style="width: 100%; margin-top: 20px;" data-i18n="book_btn">Отправить заявку</button>
</form>
</div>
</section>
<footer>
<p data-i18n="footer_text">&copy; 2026 Hotel 777. Абхазия, Мгудзырхуа. Все права защищены.</p>
</footer>
<div class="cookie-banner" id="cookieBanner">
<p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта и аналитики. Продолжая использовать сайт, вы соглашаетесь с нашей политикой использования cookie.</p>
<button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
</div>
<script>
// --- СЛОВАРЬ ПЕРЕВОДОВ ---
const translations = {
ru: {
nav_about: "О нас", nav_location: "Расположение", nav_booking: "Бронь",
hero_title: "Добро пожаловать", hero_subtitle: "Ваш идеальный отдых на берегу Черного моря", hero_btn: "Забронировать номер",
about_title: "Море в шаговой доступности", about_subtitle: "Бескрайние пляжи Гудауты",
about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу. Наслаждайтесь шумом прибоя и ласковым абхазским солнцем вдали от городской суеты.",
loc_title: "Удобное расположение", loc_subtitle: "Все красоты Абхазии рядом",
loc_address: "<strong>Наш адрес:</strong> Гудаутский район, село Мгудзырхуа, Набережная улица, 1.",
loc_dist1: "🚗 Гудаута — 10 км", loc_dist2: "🚗 Лыхны — 15 км", loc_dist3: "🚗 Новый Афон — 25 км", loc_dist4: "🚗 Сухум — 51 км",
loc_exc: "Отправляйтесь на экскурсии прямо из нашего отеля!",
book_title: "Забронировать отдых", label_name: "Ваше имя", label_phone: "Номер телефона", ph_name: "Иван Иванов",
fz152: "Я даю согласие на обработку моих персональных данных в соответствии с требованиями <a href='#' style='color:var(--primary);'>Федерального закона от 27.07.2006 г. № 152-ФЗ «О персональных данных»</a>.",
book_btn: "Отправить заявку", footer_text: "&copy; 2026 Hotel 777. Абхазия, Мгудзырхуа. Все права защищены.",
cookie_text: "Мы используем файлы cookie для улучшения работы сайта и аналитики. Продолжая использовать сайт, вы соглашаетесь с нашей политикой.",
cookie_btn: "Согласен", alert_msg: "Спасибо! Заявка отправлена."
},
en: {
nav_about: "About Us", nav_location: "Location", nav_booking: "Booking",
hero_title: "Welcome", hero_subtitle: "Your perfect holiday on the Black Sea coast", hero_btn: "Book a room",
about_title: "The sea is just steps away", about_subtitle: "Endless beaches of Gudauta",
about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to a wide, clean pebble and sand beach. Enjoy the sound of the surf and the gentle Abkhazian sun away from the city bustle.",
loc_title: "Convenient location", loc_subtitle: "All the beauties of Abkhazia are nearby",
loc_address: "<strong>Our address:</strong> Gudauta district, Mgudzyrkhua village, Naberezhnaya street, 1.",
loc_dist1: "🚗 Gudauta — 10 km", loc_dist2: "🚗 Lykhny — 15 km", loc_dist3: "🚗 New Athos — 25 km", loc_dist4: "🚗 Sukhum — 51 km",
loc_exc: "Go on excursions right from our hotel!",
book_title: "Book your holiday", label_name: "Your name", label_phone: "Phone number", ph_name: "John Doe",
fz152: "I consent to the processing of my personal data in accordance with <a href='#' style='color:var(--primary);'>Federal Law No. 152-FZ</a>.",
book_btn: "Send request", footer_text: "&copy; 2026 Hotel 777. Abkhazia, Mgudzyrkhua. All rights reserved.",
cookie_text: "We use cookies to improve site performance and analytics. By continuing to use the site, you agree to our cookie policy.",
cookie_btn: "I agree", alert_msg: "Thank you! Your request has been sent."
},
ab: {
nav_about: "Ҳазкы", nav_location: "Аҭыҧ", nav_booking: "Аанкылара",
hero_title: "Бзиала шәаабеит", hero_subtitle: "Амшын Еиқәа аԥшаҳәаҿы ишәзалыршаз адырра", hero_btn: "Ауада аанкылара",
about_title: "Амшын азааигәара", about_subtitle: "Гәдоуҭа аԥшаҳәақәа",
about_text: "Ҳасасааирҭа шьаҭакәуп Мгәыӡырхәа ақыҭаҿы. Ишәыдаҳгалоит ауада бзиақәа, амшын ахь анеирҭа мариа. Ақалақь ахылаԥшра аҟынтә шәхы иақәиҭтәны амшын аԥшӡара шәзырхәыц.",
loc_title: "Иманшәалоу аҭыҧ", loc_subtitle: "Аԥсны аԥшӡарақәа зегьы азааигәара иҟоуп",
loc_address: "<strong>Ҳадрес:</strong> Гәдоуҭа араион, Мгәыӡырхәа ақыҭа, Набережная амҩа, 1.",
loc_dist1: "🚗 Гәдоуҭа — 10 км", loc_dist2: "🚗 Лыхны — 15 км", loc_dist3: "🚗 Афон Ҿыц — 25 км", loc_dist4: "🚗 Аҟәа — 51 км",
loc_exc: "Аекскурсиақәа рыхь ҳасасааирҭа аҟынтә шәца!",
book_title: "Адырра аанкылара", label_name: "Шәхьӡ", label_phone: "Ателефон аномер", ph_name: "Иван Иванов",
fz152: "Сара сықәшаҳаҭуп хаҭала сдыррақәа рхархәаразы <a href='#' style='color:var(--primary);'>Азакәан 152-ФЗ</a> инақәыршәаны.",
book_btn: "Азҳәара адәықәҵара", footer_text: "&copy; 2026 Hotel 777. Аԥсны, Мгәыӡырхәа. Азинқәа зегьы хьчаруп.",
cookie_text: "Асаит ахархәара аус аиӷьтәразы cookie ахархәара ауп. Асаит ахархәара шәацҵозар, уи шәара шәақәшаҳаҭуп.",
cookie_btn: "Сықәшаҳаҭуп", alert_msg: "Ишәҭабуп! Азҳәара дәықәҵоуп."
}
};
// --- ЛОГИКА СМЕНЫ ЯЗЫКА ---
let currentLang = localStorage.getItem('siteLang') || 'ru';
document.getElementById('langSwitch').value = currentLang;
function changeLanguage(lang) {
currentLang = lang;
localStorage.setItem('siteLang', lang); // Сохраняем выбор в браузере
// Перевод текста
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
if (translations[lang][key]) {
element.innerHTML = translations[lang][key];
}
});
// Перевод плейсхолдеров
document.querySelectorAll('[data-i18n-ph]').forEach(element => {
const key = element.getAttribute('data-i18n-ph');
if (translations[lang][key]) {
element.setAttribute('placeholder', translations[lang][key]);
}
});
document.documentElement.lang = lang; // Обновляем атрибут html
}
// Обработка формы с учетом языка
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
alert(translations[currentLang].alert_msg);
});
// Запуск перевода при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
changeLanguage(currentLang);
});
// --- ЛОГИКА COOKIE И АНИМАЦИИ ---
document.addEventListener("DOMContentLoaded", () => {
const banner = document.getElementById('cookieBanner');
if (!localStorage.getItem('cookiesAccepted')) {
setTimeout(() => { banner.classList.add('show'); }, 1000);
}
});
function acceptCookies() {
localStorage.setItem('cookiesAccepted', 'true');
document.getElementById('cookieBanner').classList.remove('show');
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate').forEach(el => {
el.style.animationPlayState = 'paused';
observer.observe(el);
});
</script>
</body>
</html>