<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: transparent; /* Прозрачный фон страницы */
        }

        .frame {
            position: relative;
            width: 2560px;
            height: 1440px;
        }

        .horizontal-line {
            position: absolute;
            height: 5px; /* Толщина рамки */
            background-color: yellow; /* Цвет рамки */
            left: 0;
            right: 0;
        }

        .top-line {
            top: 0; /* Верхняя полоска */
        }

        .bottom-line {
            bottom: 0; /* Нижняя полоска */
        }

        .vertical-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px; /* Толщина рамки */
            background-color: yellow; /* Цвет рамки */
        }

        .left-line {
            left: 0; /* Левая полоска */
        }

        .right-line {
            right: 0; /* Правая полоска */
        }

        .datetime-container {
            display: flex; /* Используем flexbox для выравнивания */
            align-items: center; /* Центрируем по вертикали */
            position: absolute;
            top: 10px; /* Отступ сверху */
            left: 10px; /* Отступ слева */
        }

        .datetime {
            font-size: 44px; /* Размер шрифта */
            color: lightblue; /* Цвет текста */
            font-weight: bold; /* Жирный текст */
        }

        .marquee {
            font-size: 44px; /* Размер шрифта для бегущей строки */
            color: lightblue; /* Цвет текста бегущей строки */
            white-space: nowrap; /* Запрещаем перенос строки */
            animation: marquee-animation 10s linear infinite; /* Анимация бегущей строки */
            margin-left: 1cm; /* Отступ в 1 см от секунд */
            font-weight: bold; /* Жирный текст для бегущей строки */
        }

        @keyframes marquee-animation {
            from {
                transform: translateX(0); /* Начальная позиция (рядом с временем) */
            }
            to {
                transform: translateX(100vw); /* Конечная позиция (уходит вправо за экран) */
            }
        }
    </style>
</head>
<body>

<div class="frame">
    <div class="horizontal-line top-line"></div>
    <div class="horizontal-line bottom-line"></div>
    <div class="vertical-line left-line"></div>
    <div class="vertical-line right-line"></div>
    
    <div class="datetime-container">
        <div class="datetime" id="datetime"></div>
        <div class="marquee" id="marquee">Gr4MoZeK4</div> <!-- Бегущая строка -->
    </div>
</div>

<script>
    function updateDateTime() {
        const now = new Date();
        
        // Форматирование даты и времени
        const optionsDate = { year: 'numeric', month: '2-digit', day: '2-digit' };
        const optionsTime = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };

        const formattedDate = now.toLocaleDateString('ru-RU', optionsDate);
        const formattedTime = now.toLocaleTimeString('ru-RU', optionsTime);
        
        // Объединение даты и времени с дефисом
        const formattedDateTime = `${formattedDate} - ${formattedTime}`;
        
        document.getElementById('datetime').textContent = formattedDateTime;
    }

    // Обновляем дату и время каждую секунду
    setInterval(updateDateTime, 1000);
    updateDateTime(); // Начальный вызов
</script>

</body>
</html>
