<!DOCTYPE html>
<html lang="ua">
<head>
    <meta charset="UTF-8">
    <title>Назва готелю | Empire of Travel</title>
    <style>
        .hotel-header {
            position: relative;
            text-align: center;
            color: white;
        }

        .hotel-header img {
            width: 100%;
            height: auto;
        }

        .hotel-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }

        .hotel-nav a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }

        .book-button {
            position: absolute;
            right: 20px;
            bottom: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .section {
            padding: 20px;
            text-align: center;
        }

        .location-section {
            background-color: #e0f2f1;
        }

        .services-section button {
            margin: 10px;
            padding: 10px 20px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        .room-types-section button {
            margin: 10px;
            padding: 10px 20px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        .carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .carousel-images {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-image {
            flex: 0 0 100%;
           max-height: 500px; /* Зменшена висота зображень */
            width: 100%;
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .carousel-button {
            background-color: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            padding: 10px 20px;
            cursor: pointer;
        }

        .hidden { 
            display: none; 
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-images">
            <img src="images\fc2691a8a763f51362fda8bc3b1dfbce.jpg" class="carousel-image">
            <img src="images\654a4e2ba943a_hotel_history.jpg" class="carousel-image hidden">
            <img src="images\готелі-1024x635.jpg" class="carousel-image hidden">
        </div>
        <div class="carousel-controls">
            <button class="carousel-button" onclick="prevSlide()">&#10094;</button>
            <button class="carousel-button" onclick="nextSlide()">&#10095;</button>
        </div>
    </div>
    
    <script>
        let slideIndex = 0;

        function showSlides() {
            let slides = document.getElementsByClassName("carousel-image");
            for (let i = 0; i < slides.length; i++) {
                slides[i].classList.add("hidden");
            }
            slideIndex++;
            if (slideIndex > slides.length) {slideIndex = 1}
            slides[slideIndex-1].classList.remove("hidden");
            setTimeout(showSlides, 6000); // Змінюйте цю затримку для контролю швидкості переключення
        }

        function prevSlide() {
            let slides = document.getElementsByClassName("carousel-image");
            slides[slideIndex - 1].classList.add("hidden");
            slideIndex = (slideIndex - 1 + slides.length) % slides.length;
            slides[slideIndex].classList.remove("hidden");
        }

        function nextSlide() {
            let slides = document.getElementsByClassName("carousel-image");
            slides[slideIndex].classList.add("hidden");
            slideIndex = (slideIndex + 1) % slides.length;
            slides[slideIndex].classList.remove("hidden");
        }

        window.onload = function() {
            showSlides();
        }
    </script>

    <div class="hotel-header">
        <img src="hotel.jpg" alt="Готель">
        <div class="hotel-nav">
            <a href="#location">Розташування</a>
            <a href="#description">Опис</a>
            <a href="#services">Послуги</a>
            <a href="#room-types">Типи Номерів</a>
            <a href="#map">Готель на Карті</a>
        </div>
        <a href="booking.php" class="book-button">Забронювати</a>
    </div>

    <div id="location" class="section location-section">
        <h2>Розташування</h2>
        <p>Тут буде опис розташування готелю…</p>
    </div>

    <div id="description" class="section">
        <h2>Опис</h2>
        <p>Тут буде опис готелю…</p>
    </div>

    <div id="services" class="section services-section">
        <h2>Послуги</h2>
        <button onclick="showServiceInfo('hotel-services')">Послуги готелю</button>
        <button onclick="showServiceInfo('food-services')">Харчування</button>
        <button onclick="showServiceInfo('entertainment')">Розваги і спорт</button>
        <button onclick="showServiceInfo('wellness-beauty')">Краса і здоров’я</button>
        <button onclick="showServiceInfo('for-kids')">Для дітей</button>
        <button onclick="showServiceInfo('pools')">Басейни</button>
        <button onclick="showServiceInfo('beach')">Пляж</button>
        <div id="service-info"></div> <!-- Контейнер для інформації про послуги -->
    </div>

    <div id="room-types" class="section room-types-section">
        <h2>Типи Номерів</h2>
        <button onclick="showRoomType('deluxe')">Superior Deluxe Room</button>
        <button onclick="showRoomType('gold-club')">Superior Gold Club Room</button>
        <button onclick="showRoomType('executive-suite')">Superior Executive Suite</button>
        <button onclick="showRoomType('gold-club-suite')">Superior Gold Club Suite</button>
        <button onclick="showRoomType('royal-suite')">Royal Suite</button>
        <div id="room-info"></div> <!-- Контейнер для інформації про типи номерів -->
    </div>

    <div id="map" class="section">
        <h2>Готель на Карті</h2>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.293384116213!2d144.9630583153189!3d-37.81421727975169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57705f0e9a15ed7!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1589265548780!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>

    <script>
        function showServiceInfo(service) {
            var descriptions = {
                'hotel-services': 'Опис послуг готелю…',
                'food-services': 'Опис харчування в готелі…',
                'entertainment': 'Опис розваг і активностей…',
                'wellness-beauty': 'Опис краси і здоров’я…',
                'for-kids': 'Опис послуг для дітей…',
                'pools': 'Опис басейнів…',
                'beach': 'Опис пляжу…'
            };

            document.getElementById('service-info').innerText = descriptions[service];
        }

        function showRoomType(type) {
            var descriptions = {
                'deluxe': 'Опис Superior Deluxe Room…',
                'gold-club': 'Опис Superior Gold Club Room…',
                'executive-suite': 'Опис Superior Executive Suite…',
                'gold-club-suite': 'Опис Superior Gold Club Suite…',
                'royal-suite': 'Опис Royal Suite…'
            };

            document.getElementById('room-info').innerText = descriptions[type];
        }
    </script>
</body>
</html>
можеш якось зображення зробити коректниіше