visualizer.html - master - bulitin/hello-gitverse

visualizer.html
185 строк7 KB
bulitin
Реализован проект
20 май 2026, 21:49
20 май 2026, 21:4946dee3c
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Генератор пожеланий и загадок</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
            padding: 20px;
            text-align: center;
        }
        button {
            padding: 12px 24px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 20px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            font-size: 18px;
            margin-bottom: 30px;
            min-height: 60px;
            color: #333;
            max-width: 600px;
        }
        #riddle-container {
            display: none;
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        #riddle-question {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        input[type="text"] {
            padding: 10px;
            width: 80%;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        #submit-guess {
            padding: 10px 15px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #riddle-answer {
            margin-top: 15px;
            font-size: 16px;
            color: #27ae60;
            font-weight: bold;
            display: none;
        }
    </style>
</head>
<body>

    <h1>🎓 Добро пожаловать!</h1>
    <button id="wishButton">Получить пожелание</button>
    <div id="message"></div>

    <div id="riddle-container">
        <p id="riddle-question"></p>
        <input type="text" id="userGuess" placeholder="Введите ваш ответ...">
        <br>
        <button id="submit-guess">Проверить ответ</button>
        <p id="riddle-answer"></p>
    </div>

    <script>
        // База позитивных сообщений
        const encouragements = [
            "Молодец! Видно, что ты старался — продолжай в том же духе!",
            "Отличная работа! Даже если есть ошибки, ты на верном пути.",
            "Ты справился с этим заданием лучше, чем думаешь. Горжусь твоим прогрессом!",
            "Не переживай из-за мелких недочётов — главное, что ты понял суть!",
            "Каждая ошибка — это шаг к успеху. Ты уже ближе к мастерству!",
            "Ты мыслишь как настоящий профессионал! Так держать!",
            "Работа выполнена с душой — это самое важное. Уверен, в следующий раз будет ещё лучше!",
            "Ты сделал больше, чем мог себе представить. Горжусь тобой!",
            "Ошибка — не провал, а возможность вырасти. А ты растёшь с каждым днём!",
            "Спасибо за усилия! Они обязательно принесут плоды."
        ];

        // База IT-загадок
        const riddles = [
            {
                question: "Что всегда перед тобой, но ты его не видишь?",
                answer: "будущее"
            },
            {
                question: "Какой язык программирования начинается с 'Java', но не имеет ничего общего с кофе?",
                answer: "javascript"
            },
            {
                question: "Что у каждого программиста на столе, но он всё равно говорит, что у него нет ничего?",
                answer: "кофе"
            },
            {
                question: "Почему программисты не моют машину зимой?",
                answer: "боится, что после обновления она запросит перезагрузку"
            },
            {
                question: "Что может быть разбито, не касаясь его?",
                answer: "пароль"
            }
        ];

        // Элементы DOM
        const wishButton = document.getElementById('wishButton');
        const messageDiv = document.getElementById('message');
        const riddleContainer = document.getElementById('riddle-container');
        const riddleQuestion = document.getElementById('riddle-question');
        const userGuessInput = document.getElementById('userGuess');
        const submitGuessButton = document.getElementById('submit-guess');
        const riddleAnswer = document.getElementById('riddle-answer');

        let currentAnswer = '';

        // Генерация случайного пожелания
        function generateEncouragement() {
            return encouragements[Math.floor(Math.random() * encouragements.length)];
        }

        // Генерация случайной загадки
        function generateRiddle() {
            const riddle = riddles[Math.floor(Math.random() * riddles.length)];
            riddleQuestion.textContent = "🧠 " + riddle.question;
            currentAnswer = riddle.answer;
            riddleAnswer.textContent = "💡 Правильный ответ: " + riddle.answer + " 😊";
            riddleContainer.style.display = 'block';
            riddleAnswer.style.display = 'none';
            userGuessInput.value = '';
        }

        // Обработчик кнопки "Получить пожелание"
        wishButton.addEventListener('click', () => {
            const encouragement = generateEncouragement();
            messageDiv.textContent = encouragement;
            generateRiddle(); // показываем загадку
        });

        // Обработчик проверки ответа
        submitGuessButton.addEventListener('click', () => {
            const userGuess = userGuessInput.value.trim().toLowerCase();
            if (userGuess === '') {
                alert('Пожалуйста, введите свой ответ.');
                return;
            }
            riddleAnswer.style.display = 'block';
        });

        // Поддержка Enter для отправки ответа
        userGuessInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                submitGuessButton.click();
            }
        });
    </script>

</body>
</html>