index.html - master - web-dev-1999/George

index.html
182 строки6 KB
web-dev-1999
update: index.html
13 май 2026, 23:32
13 май 2026, 23:329ccec53
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Операция «Тайный Амур» 💘</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Share+Tech+Mono&display=swap');

        body {
            margin: 0;
            padding: 0;
            background-color: #0b0c10;
            color: #66fcf1;
            font-family: 'Montserrat', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            text-align: center;
        }

        .container {
            background: rgba(31, 40, 51, 0.8);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(102, 252, 241, 0.3);
            border: 2px solid #45a29e;
            max-width: 800px;
            width: 90%;
            position: relative;
        }

        h1 {
            color: #ff007f;
            text-transform: uppercase;
            font-weight: 900;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 0 0 15px rgba(255, 0, 127, 0.7);
            letter-spacing: 2px;
        }

        .subtitle {
            font-size: 1.2em;
            color: #c5c6c7;
            margin-bottom: 30px;
        }

        .timer-container {
            font-family: 'Share Tech Mono', monospace;
            font-size: 4em;
            color: #66fcf1;
            background: #1f2833;
            padding: 20px;
            border-radius: 15px;
            display: inline-block;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
            text-shadow: 0 0 10px #66fcf1;
            margin-bottom: 30px;
            border: 1px solid #45a29e;
        }

        .labels {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.25em;
            color: #45a29e;
            display: flex;
            justify-content: space-around;
            text-transform: uppercase;
            font-weight: 700;
            margin-top: -10px;
        }

        .status-board {
            background: #0b0c10;
            padding: 20px;
            border-radius: 10px;
            font-size: 1.1em;
            color: #c5c6c7;
            text-align: left;
            border-left: 5px solid #ff007f;
        }

        .status-board p {
            margin: 10px 0;
            border-bottom: 1px dashed #1f2833;
            padding-bottom: 5px;
        }

        .highlight {
            color: #ff007f;
            font-weight: bold;
        }

        .ready {
            color: #00ff00;
            font-weight: bold;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        #boom-message {
            display: none;
            font-size: 3em;
            color: #ff007f;
            font-weight: 900;
            text-shadow: 0 0 30px #ff007f;
            animation: zoomInOut 1s infinite alternate;
        }

        @keyframes zoomInOut {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }
    </style>
</head>
<body>

    <div class="container" id="main-content">
        <h1>🚨 Секретная операция 🚨<br>"Ромео-007"</h1>
        <div class="subtitle">Цель: <span class="highlight">Именинница</span>. Статус объекта: Ничего не подозревает.</div>

        <div id="boom-message">
            ВРЕМЯ ПРИШЛО!!! 🚀💘<br>ШТАБ, СБРОС ПОДАРКОВ!
        </div>

        <div class="timer-container" id="timer-box">
            <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
            <div class="labels">
                <span>Часов</span>
                <span>Минут</span>
                <span>Секунд</span>
            </div>
        </div>

        <div class="status-board" id="status-box">
            <p>🚗 <b>ТопВодитель-агент:</b> Мотор заведен, бак полон. <span class="ready">[ГОТОВ]</span></p>
            <p>🎁 <b>Агент с подарками:</b> Заряд умиления на максимуме. <span class="ready">[ГОТОВ]</span></p>
            <p>🕵️‍♂️ <b>Главный герой:</b> Уровень интриги 99lvl... George ;). <span class="ready">[ОЖИДАЕТ))0)]</span></p>
            <p>💻 <b>IT-поддержка от дуры:</b> Сервера держатся, чайник кипит. <span class="ready">[НА СВЯЗИ]</span></p>
        </div>
    </div>

    <script>
        function updateTimer() {
            const now = new Date();
            // Настраиваем цель: ближайшая полночь
            const midnight = new Date(now);
            midnight.setHours(24, 0, 0, 0); 

            const diff = midnight - now;

            if (diff <= 0) {
                document.getElementById('timer-box').style.display = 'none';
                document.getElementById('status-box').style.display = 'none';
                document.getElementById('boom-message').style.display = 'block';
                return;
            }

            const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const s = Math.floor((diff % (1000 * 60)) / 1000);

            // Добавляем нули спереди, если число меньше 10
            document.getElementById('hours').innerText = h.toString().padStart(2, '0');
            document.getElementById('minutes').innerText = m.toString().padStart(2, '0');
            document.getElementById('seconds').innerText = s.toString().padStart(2, '0');
        }

        // Обновляем таймер каждую секунду
        setInterval(updateTimer, 1000);
        updateTimer(); // Запуск сразу при загрузке
    </script>
</body>
</html>