Files
hotell777_260507/public/index.html
2026-05-10 21:42:31 +05:00

712 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/inter-font.css">
<link rel="stylesheet" href="css/playfair-font.css">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reviews.css">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="logo-text">HOTEL 777</div>
<div class="loader-bar"></div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">HOTEL <span>777</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">О нас</a></li>
<li class="nav-item"><a class="nav-link" href="#rooms">Номера</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery">Галерея</a></li>
<li class="nav-item"><a class="nav-link" href="#activities">Развлечения</a></li>
<li class="nav-item"><a class="nav-link" href="#reviews">Отзывы</a></li>
<li class="nav-item"><a class="nav-link" href="#host">Хозяин</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Контакты</a></li>
<li class="nav-item"><a class="nav-link" href="/admin" style="color: var(--gold);"><i class="fas fa-cog"></i> Управление</a></li>
<li class="nav-item language-switcher">
<button class="lang-btn active" data-lang="ru" onclick="switchLang('ru')">RU</button>
<button class="lang-btn" data-lang="en" onclick="switchLang('en')">EN</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<img class="hero-bg" src="img/h777.webp" alt="Hotel 777">
<div class="hero-overlay"></div>
<div class="container">
<div class="hero-content">
<div class="hero-badge"><i class="fas fa-anchor me-2"></i>Набережная ул. 1, Мгудзырхуа</div>
<h1 class="hero-title">Hotel <span>777</span><br>Абхазия</h1>
<p class="hero-subtitle">Ваш идеальный отдых на берегу Чёрного моря в самом сердце Абхазии. Комфорт, природа и гостеприимство — всё, что нужно для незабываемого отпуска.</p>
<div class="hero-buttons">
<a href="#rooms" class="btn-gold"><i class="fas fa-bed"></i> Выбрать номер</a>
<a href="tel:89409270080" class="btn-outline-white"><i class="fas fa-phone"></i> Позвонить</a>
</div>
</div>
</div>
<div class="hero-stats">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<div class="stat-item">
<div class="stat-number"><span class="counter" data-target="5">0</span></div>
<div class="stat-label">мин до моря</div>
</div>
</div>
<div class="col-auto"><div class="stat-divider"></div></div>
<div class="col-auto">
<div class="stat-item">
<div class="stat-number"><span class="counter" data-target="3">0</span></div>
<div class="stat-label">категории</div>
</div>
</div>
<div class="col-auto"><div class="stat-divider"></div></div>
<div class="col-auto">
<div class="stat-item">
<div class="stat-number"><span class="counter" data-target="98">0</span>%</div>
<div class="stat-label">довольных гостей</div>
</div>
</div>
<div class="col-auto"><div class="stat-divider"></div></div>
<div class="col-auto">
<div class="stat-item">
<div class="stat-number"><span class="counter" data-target="365">0</span></div>
<div class="stat-label">дней в году</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="section section-light" id="about">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6 animate-on-scroll">
<div class="about-image-wrapper">
<img src="img/123f15ff3-55ae-428f-8af9-7d53c01d28a5.webp" alt="Вид на реку Гудаута">
<div class="about-image-badge">
<span class="big">777</span>
<span class="small">Счастье рядом</span>
</div>
</div>
</div>
<div class="col-lg-6 animate-on-scroll">
<div class="section-badge">О гостинице</div>
<h2 class="section-title">Добро пожаловать в <span style="color: var(--primary);">Hotel 777</span></h2>
<div class="ornament"><div class="ornament-line"></div><div class="ornament-diamond"></div><div class="ornament-line"></div></div>
<p style="font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 20px;">
Гостиница <strong>Hotel 777</strong> расположена в живописном селе Мгудзырхуа, Гудаутский район Абхазии, на Набережной улице, 1 — прямо на берегу реки Гудаута и всего в нескольких шагах от Чёрного моря.
</p>
<p style="font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 25px;">
Мы предлагаем уютные номера всех категорий, вкусную домашнюю кухню в столовой, аренду SUP-бордов и близость к пляжному кафе. Наши гости ценят аутентичное абхазское гостеприимство и современный комфорт.
</p>
<div class="feature-grid">
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-water"></i></div>
<div class="feature-text">
<h5>На берегу моря</h5>
<p>Чистый пляж в 5 минутах ходьбы</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-snowflake"></i></div>
<div class="feature-text">
<h5>Кондиционер</h5>
<p>В каждом номере для вашего комфорта</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-wifi"></i></div>
<div class="feature-text">
<h5>Бесплатный WiFi</h5>
<p>Высокоскоростной интернет на территории</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-utensils"></i></div>
<div class="feature-text">
<h5>Столовая</h5>
<p>Домашняя кухня — абхазская и русская</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Rooms Section -->
<section class="section section-light" id="rooms" style="background: #f8fafc;">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge">Размещение</div>
<h2 class="section-title">Выберите свой номер</h2>
<div class="abkhazian-pattern"></div>
<p class="section-subtitle">Три категории номеров — от экономного до VIP-комфорта. Каждый номер оснащён всем необходимым для идеального отдыха.</p>
</div>
<div class="row g-4">
<!-- Economy -->
<div class="col-lg-4 animate-on-scroll">
<div class="room-card">
<div class="room-image">
<img src="img/1faae356b-9f79-489d-8165-c37a47b82040.webp" alt="Эконом номер">
<div class="room-category">Эконом</div>
</div>
<div class="room-body">
<h3 class="room-name">Эконом</h3>
<p class="room-desc">Уютный номер с одной кроватью — идеально для соло-путешественника или экономного отдыха. Чистый, светлый и со всем необходимым.</p>
<div class="room-features">
<span class="room-feature-tag"><i class="fas fa-bed"></i> 1 кровать</span>
<span class="room-feature-tag"><i class="fas fa-snowflake"></i> Кондиционер</span>
<span class="room-feature-tag"><i class="fas fa-wifi"></i> WiFi</span>
<span class="room-feature-tag"><i class="fas fa-shower"></i> Душ</span>
</div>
<div class="room-footer">
<div class="room-price">
<span class="amount">от 1 500 ₽</span>
<span class="period"> / ночь</span>
</div>
<button class="btn-book" data-bs-toggle="modal" data-bs-target="#bookingModal" data-room="Эконом">Забронировать</button>
</div>
</div>
</div>
</div>
<!-- Standard -->
<div class="col-lg-4 animate-on-scroll">
<div class="room-card featured">
<div class="room-image">
<img src="img/1006bc9be-64c6-43e3-9625-1a862d04930c.webp" alt="Стандарт номер">
<div class="room-category">Стандарт</div>
</div>
<div class="room-body">
<h3 class="room-name">Стандарт</h3>
<p class="room-desc">Просторный номер с двумя односпальными или одной двухспальной кроватью. Отличный выбор для пары или небольшой семьи.</p>
<div class="room-features">
<span class="room-feature-tag"><i class="fas fa-bed"></i> 2 кровати / 1 двухспальная</span>
<span class="room-feature-tag"><i class="fas fa-snowflake"></i> Кондиционер</span>
<span class="room-feature-tag"><i class="fas fa-wifi"></i> WiFi</span>
<span class="room-feature-tag"><i class="fas fa-shower"></i> Душ</span>
</div>
<div class="room-footer">
<div class="room-price">
<span class="amount">от 2 500 ₽</span>
<span class="period"> / ночь</span>
</div>
<button class="btn-book" data-bs-toggle="modal" data-bs-target="#bookingModal" data-room="Стандарт">Забронировать</button>
</div>
</div>
</div>
</div>
<!-- VIP -->
<div class="col-lg-4 animate-on-scroll">
<div class="room-card">
<div class="room-image">
<img src="img/1eae46658-cfca-4b65-82f0-e5868af5541b.webp" alt="VIP номер">
<div class="room-category">VIP</div>
</div>
<div class="room-body">
<h3 class="room-name">VIP Люкс</h3>
<p class="room-desc">Две комнаты: спальня с двухспальной кроватью и гостиная с удобным диваном. Премиум-комфорт для тех, кто ценит простор и роскошь.</p>
<div class="room-features">
<span class="room-feature-tag"><i class="fas fa-bed"></i> 2 комнаты</span>
<span class="room-feature-tag"><i class="fas fa-couch"></i> Двухспальная + диван</span>
<span class="room-feature-tag"><i class="fas fa-snowflake"></i> Кондиционер</span>
<span class="room-feature-tag"><i class="fas fa-wifi"></i> WiFi</span>
<span class="room-feature-tag"><i class="fas fa-shower"></i> Душ</span>
</div>
<div class="room-footer">
<div class="room-price">
<span class="amount">от 4 500 ₽</span>
<span class="period"> / ночь</span>
</div>
<button class="btn-book" data-bs-toggle="modal" data-bs-target="#bookingModal" data-room="VIP Люкс">Забронировать</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="section section-light" id="gallery">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge">Галерея</div>
<h2 class="section-title">Красота Абхазии</h2>
<div class="abkhazian-pattern"></div>
<p class="section-subtitle">Насладитесь видами нашей гостиницы, побережья и окрестностей Гудауты</p>
</div>
<div class="gallery-grid animate-on-scroll">
<div class="gallery-item">
<img src="img/h777.webp" alt="Hotel 777">
<div class="gallery-overlay"><span>Наша гостиница</span></div>
</div>
<div class="gallery-item">
<img src="img/16536f4b7-0c1c-4bbb-8537-96bbdd2e0886.webp" alt="Пляж">
<div class="gallery-overlay"><span>Пляж Гудауты</span></div>
</div>
<div class="gallery-item">
<img src="img/1e4e22546-0208-4ba8-96fb-02052aecc8b5.webp" alt="Закат">
<div class="gallery-overlay"><span>Закат на море</span></div>
</div>
<div class="gallery-item">
<img src="img/1e1ad70fe-ff01-4f94-9ca9-4926eba5bdd2.webp" alt="Горы">
<div class="gallery-overlay"><span>Горы Абхазии</span></div>
</div>
<div class="gallery-item">
<img src="img/123f15ff3-55ae-428f-8af9-7d53c01d28a5.webp" alt="Река">
<div class="gallery-overlay"><span>Река Гудаута</span></div>
</div>
</div>
</div>
</section>
<!-- Activities Section -->
<section class="section section-dark" id="activities">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge">Развлечения</div>
<h2 class="section-title">Чем заняться рядом</h2>
<div class="abkhazian-pattern"></div>
<p class="section-subtitle">SUP-борды, пляжное кафе и незабываемые виды — всё это ждёт вас</p>
</div>
<div class="row g-4">
<div class="col-lg-4 animate-on-scroll">
<div class="activity-card">
<img src="img/105d059e5-a204-499f-a01c-c540f6ae1e5d.webp" alt="SUP-борд">
<div class="activity-overlay">
<div class="activity-icon"><i class="fas fa-water"></i></div>
<h3 class="activity-title">SUP-борды</h3>
<p class="activity-desc">Аренда SUP-бордов прямо на пляже. Исследуйте побережье с воды — идеальный способ увидеть Абхазию с нового ракурса!</p>
</div>
</div>
</div>
<div class="col-lg-4 animate-on-scroll">
<div class="activity-card">
<img src="img/18abbb136-0e24-4c92-a568-fec8011e029b.webp" alt="Кафе у пляжа">
<div class="activity-overlay">
<div class="activity-icon"><i class="fas fa-coffee"></i></div>
<h3 class="activity-title">Кафе у пляжа</h3>
<p class="activity-desc">Всего 2 минуты пешком — уютное кафе с видом на море. Абхазская и русская кухня, свежие морепродукты и ароматный кофе.</p>
</div>
</div>
</div>
<div class="col-lg-4 animate-on-scroll">
<div class="activity-card">
<img src="img/1f00325ba-df2c-4bb9-9ec6-28958e11f843.webp" alt="Столовая">
<div class="activity-overlay">
<div class="activity-icon"><i class="fas fa-utensils"></i></div>
<h3 class="activity-title">Столовая Hotel 777</h3>
<p class="activity-desc">Домашняя кухня каждый день! Завтраки, обеды и ужины из свежих местных продуктов. Аджика, хачапури, азу и многое другое.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Banner -->
<section class="section section-light" style="background: #fff;">
<div class="container">
<div class="cta-banner animate-on-scroll">
<h2>Забронируйте номер прямо сейчас!</h2>
<p>Лучшие цены гарантированы при бронировании напрямую. Позвоните Рауфу Алексеевичу или оставьте заявку.</p>
<a href="tel:89409270080" class="btn-dark-cta"><i class="fas fa-phone"></i> 8 (940) 927-00-80</a>
</div>
</div>
</section>
<!-- Reviews Section -->
<section class="section reviews-section" id="reviews">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge" data-i18n="reviews.title">Отзывы</div>
<h2 class="section-title" data-i18n="reviews.title">Что говорят наши гости</h2>
<div class="abkhazian-pattern"></div>
</div>
<div class="reviews-stats" id="reviewsStats" style="display: none;">
<div class="reviews-avg">
<div class="reviews-avg-number" id="reviewsAvgNumber">0.0</div>
<div>
<div class="reviews-avg-stars" id="reviewsAvgStars"></div>
<div class="reviews-avg-count" id="reviewsAvgCount"></div>
</div>
</div>
</div>
<div class="reviews-grid" id="reviewsGrid"></div>
<div class="reviews-empty" id="reviewsEmpty" style="display: none;">
<i class="fas fa-star-half-alt"></i>
<p data-i18n="reviews.write_first">Будьте первым, кто оставит отзыв!</p>
</div>
<div class="reviews-actions">
<button class="btn-gold" onclick="openReviewModal()" data-i18n="reviews.leave_review">
<i class="fas fa-pen"></i> Оставить отзыв
</button>
</div>
</div>
</section>
<!-- Host Section -->
<section class="section section-light" id="host">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge">Ваш хозяин</div>
<h2 class="section-title">Рауф Алексеевич — душа Hotel 777</h2>
<div class="abkhazian-pattern"></div>
</div>
<div class="host-card animate-on-scroll">
<div class="host-image">
<div class="host-portrait">
<div class="host-portrait-ring"></div>
<i class="fas fa-user" style="position: relative; z-index: 2;"></i>
</div>
</div>
<div class="host-body">
<h3>Рауф Алексеевич</h3>
<p style="font-size: 1.1rem; color: var(--gold); font-weight: 600; margin-bottom: 20px; font-style: italic;">
«Абхазское гостеприимство — это не работа, это образ жизни»
</p>
<p style="font-size: 1rem; color: #666; line-height: 1.7; margin-bottom: 25px;">
Рауф Алексеевич — настоящий хозяин и душа Hotel 777. Он встречает каждого гостя с теплотой и заботой, как родного человека. Всегда подскажет лучшие маршруты по Абхазии, организует экскурсии к самым красивым местам — Новоафонскому монастырю, озеру Рица, Гагрскому парку.
</p>
<p style="font-size: 1rem; color: #666; line-height: 1.7; margin-bottom: 25px;">
Домашняя кухня Рауфа Алексеевича — отдельная достопримечательность гостиницы. Свежие местные продукты, абхазские и русские блюда, приготовленные с душой — абиц, ачапа, хачапури, шашлык и многое другое. Чистые номера, искренняя улыбка и внимание к каждой детали — это то, что делает Hotel 777 особенным.
</p>
<a href="tel:89409270080" class="host-contact">
<i class="fas fa-phone"></i> 8 (940) 927-00-80
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section contact-section" id="contact">
<div class="container">
<div class="section-header animate-on-scroll">
<div class="section-badge">Контакты</div>
<h2 class="section-title" style="color: #fff;">Свяжитесь с нами</h2>
<div class="abkhazian-pattern"></div>
<p class="section-subtitle">Рауф Алексеевич всегда рад ответить на ваши вопросы и помочь спланировать идеальный отдых</p>
</div>
<div class="row g-5">
<div class="col-lg-5 animate-on-scroll">
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-user-tie"></i></div>
<div>
<div class="contact-label">Хозяин гостиницы</div>
<div class="contact-value">Рауф Алексеевич</div>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<div class="contact-label">Адрес</div>
<div class="contact-value">Абхазия, Гудаутский район,<br>с. Мгудзырхуа, Набережная ул., 1</div>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-phone"></i></div>
<div>
<div class="contact-label">Телефон</div>
<div class="contact-value"><a href="tel:89409270080">8 (940) 927-00-80</a></div>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-clock"></i></div>
<div>
<div class="contact-label">Режим работы</div>
<div class="contact-value">Круглосуточно, 365 дней в году</div>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon"><i class="fas fa-water"></i></div>
<div>
<div class="contact-label">Расположение</div>
<div class="contact-value">На берегу реки Гудаута,<br>5 минут до Чёрного моря</div>
</div>
</div>
<div class="mt-4">
<a href="https://wa.me/89409270080" class="btn-gold" target="_blank" style="text-decoration: none;">
<i class="fab fa-whatsapp"></i> Написать Рауфу в WhatsApp
</a>
</div>
</div>
<div class="col-lg-7 animate-on-scroll">
<div class="map-container">
<i class="fas fa-map-marked-alt"></i>
<span>Гудаутский район, Абхазия</span>
<span style="font-size: 0.8rem; color: rgba(255,255,255,0.4);">E 40.5° N 43.1°</span>
<div style="padding: 20px; text-align: center;">
<p style="color: rgba(255,255,255,0.5); font-size: 0.9rem;">
<i class="fas fa-info-circle me-2"></i>
Мгудзырхуа — уютное село на Набережной улице, окружённое виноградниками и горами.
Чистый воздух, тишина и близость к морю — идеальное место для отдыха.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<div class="footer-brand">HOTEL <span>777</span></div>
<p class="footer-desc">Гостиница на берегу Чёрного моря в Абхазии. Комфортные номера, домашняя кухня Рауфа Алексеевича и настоящее абхазское гостеприимство.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fab fa-telegram"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="tel:89409270080"><i class="fas fa-phone"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="footer-title">Навигация</div>
<ul class="footer-links">
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#rooms">Номера</a></li>
<li><a href="#gallery">Галерея</a></li>
<li><a href="#reviews">Отзывы</a></li>
<li><a href="#host">Хозяин</a></li>
<li><a href="/admin" style="color: var(--gold);"><i class="fas fa-cog"></i> Управление</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<div class="footer-title">Услуги</div>
<ul class="footer-links">
<li><a href="#rooms">Номера Эконом</a></li>
<li><a href="#rooms">Номера Стандарт</a></li>
<li><a href="#rooms">Номера VIP</a></li>
<li><a href="#activities">Аренда SUP-бордов</a></li>
<li><a href="#activities">Столовая</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<div class="footer-title">Контакты</div>
<ul class="footer-links">
<li><a href="tel:89409270080"><i class="fas fa-phone me-2"></i>8 (940) 927-00-80</a></li>
<li><a href="#"><i class="fas fa-user me-2"></i>Рауф Алексеевич</a></li>
<li><a href="#"><i class="fas fa-map-marker-alt me-2"></i>с. Мгудзырхуа</a></li>
<li><a href="#"><i class="fas fa-water me-2"></i>Набережная ул., 1</a></li>
<li><a href="#"><i class="fas fa-flag me-2"></i>Абхазия, Гудаутский р</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Hotel 777. Хозяин — Рауф Алексеевич. Все права защищены. Абхазия, Гудаутский район, с. Мгудзырхуа.</p>
</div>
</div>
</footer>
<!-- Floating Phone Button -->
<a href="tel:89409270080" class="float-phone">
<i class="fas fa-phone"></i>
</a>
<!-- Booking Modal -->
<div class="modal fade" id="bookingModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="font-family: 'Playfair Display', serif; font-size: 1.5rem;">
<i class="fas fa-calendar-check me-2"></i>Бронирование номера
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="bookingForm">
<div class="mb-3">
<label class="form-label">Выбранный номер</label>
<input type="text" class="form-control" id="selectedRoom" name="room" readonly style="background: #f0f4f8; font-weight: 600;">
</div>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Ваше имя</label>
<input type="text" class="form-control" name="name" placeholder="Иван Иванов" required>
</div>
<div class="col-md-6">
<label class="form-label">Телефон</label>
<input type="tel" class="form-control" name="phone" placeholder="+7 (___) ___-__-__" required>
</div>
</div>
<div class="row g-3 mt-1">
<div class="col-md-6">
<label class="form-label">Дата заезда</label>
<input type="date" class="form-control" name="checkin" required>
</div>
<div class="col-md-6">
<label class="form-label">Дата выезда</label>
<input type="date" class="form-control" name="checkout" required>
</div>
</div>
<div class="row g-3 mt-1">
<div class="col-md-6">
<label class="form-label">Кол-во гостей</label>
<select class="form-select" name="guests">
<option value="1">1 гость</option>
<option value="2">2 гостя</option>
<option value="3">3 гостя</option>
<option value="4">4 гостя</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Пожелания</label>
<input type="text" class="form-control" name="wishes" placeholder="Например: вид на море">
</div>
</div>
<div class="row g-3 mt-1">
<div class="col-md-6">
<label class="form-label">Промокод</label>
<input type="text" class="form-control" id="promocodeInput" name="promocode" placeholder="Введите промокод" style="text-transform: uppercase;">
</div>
<div class="col-md-6 d-flex align-items-end">
<button type="button" class="btn btn-outline-primary btn-sm" id="checkPromocodeBtn" style="width: 100%;">Проверить промокод</button>
</div>
</div>
<div id="priceInfo" class="mt-3" style="display: none; padding: 15px; background: #f8f9fa; border-radius: 10px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>Базовая стоимость:</span>
<span id="basePriceDisplay"></span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 8px; color: #16a34a;">
<span>Скидка (<span id="discountPercentDisplay">0</span>%):</span>
<span id="discountAmountDisplay"></span>
</div>
<div style="display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; border-top: 1px solid #dee2e6; padding-top: 8px;">
<span>Итого к оплате:</span>
<span id="totalPriceDisplay" style="color: var(--primary);"></span>
</div>
</div>
<div class="mt-4">
<button type="submit" class="btn-submit-booking">
<i class="fas fa-paper-plane me-2"></i>Отправить заявку
</button>
</div>
<p class="text-center mt-3" style="font-size: 0.8rem; color: #999;">
Или позвоните Рауфу Алексеевичу: <a href="tel:89409270080" style="color: var(--primary); font-weight: 600;">8 (940) 927-00-80</a>
</p>
</form>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script src="js/i18n.js"></script>
<script src="js/reviews.js"></script>
<!-- Review Modal -->
<div class="review-modal" id="reviewModal">
<div class="review-modal-content">
<div class="review-modal-header">
<h3 data-i18n="reviews.write_review">Написать отзыв</h3>
<button class="review-modal-close" onclick="closeReviewModal()">&times;</button>
</div>
<div class="review-modal-body" id="reviewModalBody">
<form id="reviewForm">
<div class="review-row">
<div class="review-form-group">
<label data-i18n="form.select_country">Страна</label>
<div class="review-select-wrapper">
<select class="review-form-control" id="reviewCountry" required>
<option value="" data-i18n="form.select_country">Выберите страну</option>
</select>
</div>
<div class="review-error" id="countryError" data-i18n="validation.country_required">Выберите страну</div>
</div>
<div class="review-form-group">
<label data-i18n="form.select_city">Город (необязательно)</label>
<div class="review-select-wrapper" id="citySelectWrapper">
<select class="review-form-control" id="reviewCity">
<option value="" data-i18n="form.select_city">Выберите город</option>
</select>
</div>
<div class="review-error" id="cityError" data-i18n="validation.city_required">Выберите или введите город</div>
</div>
</div>
<div class="review-form-group" id="otherCityGroup" style="display: none;">
<label data-i18n="form.another_city">Другой город</label>
<input type="text" class="review-form-control" id="reviewOtherCity" data-i18n-placeholder="form.city_placeholder" placeholder="Введите название города">
<div class="review-error" data-i18n="validation.city_required">Введите название города</div>
</div>
<div class="review-form-group">
<label data-i18n="form.rating">Оценка</label>
<div class="review-stars-input">
<div class="review-stars-slider-wrapper">
<div class="review-stars-display" id="starsDisplay"></div>
<div class="review-stars-value" id="starsValue">5.0</div>
</div>
<input type="range" class="review-stars-slider" id="starsSlider" min="0" max="5" step="0.1" value="5" style="--value: 100%;">
</div>
<div class="review-error" data-i18n="validation.rating_required">Поставьте оценку</div>
</div>
<div class="review-form-group">
<label data-i18n="form.your_name">Ваше имя (ФИО) <span class="required">*</span></label>
<input type="text" class="review-form-control" id="reviewName" required data-i18n-placeholder="form.name_placeholder" placeholder="Иванов Иван Иванович" minlength="2">
<div class="review-error" data-i18n="validation.name_min">Имя должно содержать минимум 2 символа</div>
</div>
<div class="review-form-group">
<label data-i18n="form.review_text">Текст отзыва <span class="required">*</span></label>
<textarea class="review-form-control" id="reviewText" rows="4" required data-i18n-placeholder="form.review_placeholder" placeholder="Расскажите о вашем опыте отдыха в Hotel 777..." minlength="20"></textarea>
<div class="review-error" id="textError" data-i18n="validation.review_min">Отзыв должен содержать минимум 20 символов</div>
</div>
<div class="review-form-group">
<label data-i18n="form.hotel_code">Код гостиницы <span class="required">*</span></label>
<div class="review-code-wrapper">
<input type="password" class="review-form-control" id="reviewCode" required data-i18n-placeholder="form.code_placeholder" placeholder="Получите на ресепшене">
<button type="button" class="toggle-code" onclick="toggleCodeVisibility()">
<i class="fas fa-eye"></i>
</button>
</div>
<small class="hint" data-i18n="form.code_hint">Код сообщается гостям на ресепшене отеля</small>
<div class="review-error" id="codeError" data-i18n="validation.code_invalid">Неверный код гостиницы</div>
</div>
</form>
</div>
<div class="review-modal-footer">
<button type="button" class="review-btn-cancel" onclick="closeReviewModal()" data-i18n="form.cancel">Отмена</button>
<button type="submit" class="review-btn-submit" form="reviewForm" id="reviewSubmitBtn">
<span data-i18n="form.submit">Отправить отзыв</span>
</button>
</div>
</div>
</div>
</body>
</html>