2.html - master - Extrap/Games_site

2.html
218 строк7 KB
Extrap
result
27 янв 2026, 13:42
27 янв 2026, 13:421f4c493
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Угадай число</title>
    <style>
        body {
            background: radial-gradient(circle, #ff0000, #0000ff);
            font-family: GEORGIA, sans-serif;
            text-align: center;
            margin: 0;
            overflow: hidden;
        }

        /* Стили для бегущей строки */
        .marquee-container {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            z-index: 3;
        }

        .marquee {
            display: inline-block;
            padding: 10px 0;
            animation: marquee 15s linear infinite;
        }

        @keyframes marquee {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }

        /* Стили для слайд-шоу */
        .slideshow-container {
            position: fixed;
            top: 5px;
            bottom: 50px;
            width: 25%;
        }

        .left { left: 20%; }
        .right { right: 10%; }

        .slideshow-container img {
            width: 60%;
            height: 100%;
            object-fit: contain;
            display: none;
        }

        .slide.active { display: block; }

        .content {
            margin-top: 100px;
            position: relative;
            z-index: 1;
        }

        input, button {
            padding: 10px;
            margin: 10px;
        }

        /* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ADD8E6;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            z-index: 4;
            border-radius: 10px;
        }

        .modal.active { display: block; }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 3;
        }

        .overlay.active { display: block; }

        /* Центральный нижний фрейм */
        .iframe-container-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 25%;
            background-color: #f0f0f0;
            border-top: 2px solid #000;
            z-index: 2;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <!-- Бегущая строка -->
    <div class="marquee-container">
        <div class="marquee">Добро пожаловать в игру "Угадай число"! Удачи и приятной игры!</div>
    </div>
    <img src="1.jpg"  width="200px"  hspace="10px" style="margin:40px">
    <!-- Слайд-шоу слева -->
    <div class="slideshow-container left">
        <img src="./assets/2_game/7.jpg" class="slide active" />
        <img src="./assets/2_game/99.jpg" class="slide" />
        <img src="./assets/2_game/9.jpg" class="slide" />
    </div>

    <!-- Слайд-шоу справа -->
    <div class="slideshow-container right">
        <img src="./assets/2_game/10.jpg" class="slide active" />
        <img src="./assets/2_game/11.jpg" class="slide" />
        <img src="./assets/2_game/14.jpg" class="slide" />
    </div>

    <!-- Основное содержимое -->
    <div class="content">
        <h1>Угадай число</h1>
        <p>Попробуй угадать число от 1 до 100</p>
        <input type="number" id="guessInput" min="1" max="100" placeholder="Введите число">
        <button onclick="checkGuess()">Угадать</button>
        <p id="feedback"></p>
    </div>

    <!-- Центральный нижний фрейм -->
    <div class="iframe-container-bottom">
        <iframe src="https://diletant.media/" title="Новости"></iframe>
    </div>

    <!-- Затемнение фона и модальное окно -->
    <div class="overlay" id="overlay"></div>
    <div class="modal" id="resultModal">
        <p id="resultMessage"></p>
        <button onclick="restartGame()">Сыграть заново</button>
    </div>

    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;
        const guesses = [];

        function checkGuess() {
            const guessInput = document.getElementById('guessInput');
            const userGuess = parseInt(guessInput.value);
            const feedback = document.getElementById('feedback');

            if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
                feedback.innerText = "Введите число от 1 до 100!";
                return;
            }

            attempts++;
            guesses.push(userGuess);

            if (userGuess > randomNumber) {
                feedback.innerText = "Загаданное число меньше.";
            } else if (userGuess < randomNumber) {
                feedback.innerText = "Загаданное число больше.";
            } else {
                showResultModal();
            }
            guessInput.value = '';
        }

        function showResultModal() {
            const resultMessage = document.getElementById('resultMessage');
            resultMessage.innerText = `Поздравляем! Вы угадали число за ${attempts} попыток. Ваши попытки: ${guesses.join(', ')}`;
            document.getElementById('resultModal').classList.add('active');
            document.getElementById('overlay').classList.add('active');
        }

        function restartGame() {
            randomNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
            guesses.length = 0;
            document.getElementById('feedback').innerText = '';
            document.getElementById('resultModal').classList.remove('active');
            document.getElementById('overlay').classList.remove('active');
        }

        // Функция для слайд-шоу
        function startSlideshow(slides) {
            let currentIndex = 0;
            setInterval(() => {
                slides[currentIndex].classList.remove('active');
                currentIndex = (currentIndex + 1) % slides.length;
                slides[currentIndex].classList.add('active');
            }, 3000);
        }

        // Запуск слайд-шоу для обеих сторон
        startSlideshow(document.querySelectorAll('.left .slide'));
        startSlideshow(document.querySelectorAll('.right .slide'));
    </script>
</body>
</html>