<!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, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: transparent;
        }

        canvas {
            display: block;
            width: 2560px;
            height: 1440px;
            background: transparent;
        }
    </style>
</head>
<body>
    <canvas id="gradientCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gradientCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = 2560;
        canvas.height = 1440;

        let offset = 0;

        // Размеры кнопок
        const buttonWidth = 400; // Ширина кнопок
        const buttonHeight = 100; // Высота кнопок
        const borderRadius = 20; // Радиус скругления углов

        // Размеры рамки под веб-камеру
        const webcamFrameWidth = 730;
        const webcamFrameHeight = 430;
        const webcamFrameRadius = 30; // Радиус скругления углов рамки

        // Отступы от краев холста
        const padding = 20;

        // Промежуток между рамкой и нижней кнопкой
        const gap = 30; // Промежуток

        // Текст над рамкой
        const text = "Gr4MoZeK4 ";
        const textFont = "bold 48px Arial"; // Шрифт текста
        const textGap = 20; // Промежуток между текстом и рамкой

        // Позиции кнопок в углах с отступами
        const buttons = [
            { x: padding, y: padding, text: "💻 Stream Gr4MoZeK4 🎮", color: "yellow" }, // Левый верхний угол
            { x: canvas.width - buttonWidth - padding, y: padding, text: "", color: "yellow" }, // Правый верхний угол (дата и время)
            { x: padding, y: canvas.height - buttonHeight - padding, text: "Ману 🔷 в ракетут 🚀", color: "yellow" }, // Левый нижний угол
            { x: canvas.width - buttonWidth - padding, y: canvas.height - buttonHeight - padding, text: "Элексир 🩸 в арену 🏰", color: "yellow" } // Правый нижний угол
        ];

        // Позиция рамки под веб-камеру (в левом углу под левой нижней кнопкой с промежутком)
        const webcamFrameX = padding; // Отступ слева
        const webcamFrameY = canvas.height - webcamFrameHeight - padding - buttonHeight - gap; // Под левой нижней кнопкой с промежутком

        // Позиция текста по центру рамки
        const textX = webcamFrameX + webcamFrameWidth / 2; // Центр рамки по горизонтали
        const textY = webcamFrameY - textGap; // Текст выше рамки с промежутком

        // Функция для получения текущей даты и времени
        function getCurrentDateTime() {
            const now = new Date();
            const day = String(now.getDate()).padStart(2, '0');
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const year = now.getFullYear();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
        }

        // Функция для рисования скругленного прямоугольника
        function roundRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.arcTo(x + width, y, x + width, y + height, radius);
            ctx.arcTo(x + width, y + height, x, y + height, radius);
            ctx.arcTo(x, y + height, x, y, radius);
            ctx.arcTo(x, y, x + width, y, radius);
            ctx.closePath();
        }

        function drawGradientBorder() {
            const gradient = ctx.createLinearGradient(
                0, 0, canvas.width, canvas.height
            );
            gradient.addColorStop(0, `hsl(${offset % 360}, 100%, 50%)`);
            gradient.addColorStop(0.5, `hsl(${(offset + 90) % 360}, 100%, 50%)`);
            gradient.addColorStop(1, `hsl(${(offset + 180) % 360}, 100%, 50%)`);

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Устанавливаем толщину границы
            ctx.strokeStyle = gradient;
            ctx.lineWidth = 2; // Толщина границы 2 пикселя

            // Рисуем прямоугольник по краям холста без отступов
            ctx.strokeRect(0, 0, canvas.width, canvas.height);

            // Рисуем кнопки с градиентом и скругленными углами
            buttons.forEach(button => {
                ctx.strokeStyle = gradient;
                ctx.lineWidth = 2; // Толщина границы кнопки

                // Рисуем скругленный прямоугольник
                roundRect(ctx, button.x, button.y, buttonWidth, buttonHeight, borderRadius);
                ctx.stroke();

                // Рисуем текст внутри кнопки
                ctx.font = "bold 28px Arial";
                ctx.fillStyle = button.color;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";

                // Для правой верхней кнопки добавляем дату и время
                if (button === buttons[1]) {
                    button.text = getCurrentDateTime(); // Обновляем дату и время
                }

                ctx.fillText(button.text, button.x + buttonWidth / 2, button.y + buttonHeight / 2);
            });

            // Рисуем рамку под веб-камеру с закругленными углами
            ctx.strokeStyle = gradient;
            ctx.lineWidth = 2; // Толщина границы рамки
            roundRect(ctx, webcamFrameX, webcamFrameY, webcamFrameWidth, webcamFrameHeight, webcamFrameRadius);
            ctx.stroke();

            // Рисуем текст с градиентом по центру рамки
            ctx.font = textFont;
            ctx.textAlign = "center"; // Выравнивание текста по центру
            ctx.textBaseline = "bottom"; // Выравнивание текста по нижнему краю
            ctx.fillStyle = gradient;
            ctx.fillText(text, textX, textY);

            // Увеличиваем смещение для анимации градиента
            offset += 1;

            requestAnimationFrame(drawGradientBorder);
        }

        drawGradientBorder();
    </script>
</body>
</html>