<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Загадки</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: url('static/background.png') no-repeat center center fixed;
            background-size: cover;
            color: white;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
        }
        .content {
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 600px;
        }
        h1 {
            margin-bottom: 20px;
        }
        .puzzle-number {
            margin-bottom: 10px;
            font-size: 1.2em;
            color: #ffd700;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 10px;
            border: 2px solid white;
        }
        .hint {
            margin-bottom: 10px;
            font-size: 1em;
            color: #87CEEB;
        }
        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            width: 80%;
            border: 2px solid red;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        input[type="text"].correct {
            border-color: green;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background: green;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .final-image {
            margin-top: 20px;
            border-radius: 10px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Знайди відповіді на кілька загадок і подарунок твій!</h1>
        <div class="puzzle-number" id="puzzle-number">Загадка 1 з 3</div>
        <img id="puzzle-image" src="static/car1.jpg" alt="Загадка">
        <div class="hint" id="hint">Підказка: Введіть назву марки авто</div>
        <input id="answer-input" type="text" placeholder="Введіть відповідь">
        <p id="message" style="color: yellow; display: none;">Правильно! Переходимо до наступної загадки.</p>
    </div>

    <script>
        const puzzles = [
            {
                image: 'static/car1.png',
                answers: ['bmw'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car2.png',
                answers: ['mercedes', 'mercedes-benz', 'mercedes benz'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car3.png',
                answers: ['mercedes', 'mercedes-benz', 'mercedes benz'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car4.png',
                answers: ['renault'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car5.png',
                answers: ['Buick'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car6.png',
                answers: ['Mazda'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car7.png',
                answers: ['Saab'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car8.png',
                answers: ['BMW'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car9.png',
                answers: ['zaz'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car10.png',
                answers: ['lancia'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car11.png',
                answers: ['ford'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car12.png',
                answers: ['laborghini', 'lambo'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car13.png',
                answers: ['nissan'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car14.png',
                answers: ['fiat'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car15.png',
                answers: ['subaru'],
                hint: 'Вкажи марку авто, англійською'
            },
            {
                image: 'static/car16.png',
                answers: ['aztek'],
                hint: 'Вкажи МОДЕЛЬ авто, англійською'
            },
            {
                image: 'static/puzzle1.png',
                answers: ['3'],
                hint: 'Відповідь запиши у вигляді числа'
            },
            {
                image: 'static/puzzle2.png',
                answers: ['23'],
                hint: 'Відповідь запиши у вигляді числа'
            },
            {
                image: 'static/puzzle3.png',
                answers: ['150'],
                hint: 'Відповідь запиши у вигляді числа'
            },
            {
                image: 'static/puzzle4.png',
                answers: ['20'],
                hint: 'Відповідь запиши у вигляді числа'
            },
            {
                image: 'static/puzzle5.png',
                answers: ['954', '459', '495'],
                hint: 'Відповідь запиши у вигляді числа, має бути 3 цифри'
            }
        ];

        let currentPuzzle = 0;

        const puzzleImage = document.getElementById('puzzle-image');
        const answerInput = document.getElementById('answer-input');
        const message = document.getElementById('message');
        const puzzleNumber = document.getElementById('puzzle-number');
        const hint = document.getElementById('hint');

        // Функція оновлення загадки
        function loadPuzzle() {
            const puzzle = puzzles[currentPuzzle];
            puzzleImage.src = puzzle.image;
            hint.textContent = puzzle.hint;
            puzzleNumber.textContent = `Загадка ${currentPuzzle + 1} з ${puzzles.length}`;
            answerInput.value = '';
            answerInput.classList.remove('correct');
            answerInput.focus();
            message.style.display = 'none';
        }

        // Фінальний екран
        function displayFinalScreen() {
            const finalHTML = `
                <h2>Вітаємо! Ви (я знаю що ти не один) пройшли всі загадки!</h2>
                <p>Наступна підказка вже чекає на тебе!</p>
                <img class="final-image" src="static/final-clue.png" alt="Підказка">
            `;
            document.querySelector('.content').innerHTML = finalHTML;
        }

        // Перевірка відповіді
        answerInput.addEventListener('input', () => {
            const userAnswer = answerInput.value.trim().toLowerCase();
            const correctAnswers = puzzles[currentPuzzle].answers.map(answer => answer.toLowerCase());

            if (correctAnswers.includes(userAnswer)) {
                answerInput.classList.add('correct');
                message.style.display = 'block';

                setTimeout(() => {
                    currentPuzzle++;
                    if (currentPuzzle < puzzles.length) {
                        loadPuzzle();
                    } else {
                        displayFinalScreen();
                    }
                }, 1000);
            } else {
                answerInput.classList.remove('correct');
            }
        });

        // Завантажуємо першу загадку
        loadPuzzle();
    </script>
</body>
</html>
