templates - master - Proxnx/flask

templates
123 строки3 KB
Proxnx
templates
21 фев 2026, 15:37
21 фев 2026, 15:37ebcaea4
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Видео с выбором по стрелочкам</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #0D0326;
            color: #E0D6DE;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            position: relative; /* Добавляем относительное позиционирование для body */
        }

        .video-container {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
        }

        .video-frame {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .video-frame.active {
            opacity: 1;
        }

        .controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .controls button {
            background-color: #120336;
            color: #E0D6DE;
            border: none;
            padding: 1em;
            font-size: 1.5em;
            cursor: pointer;
            transition: 0.3s;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .controls button:hover {
            background-color: #7AF0FF;
            color: #120336;
        }

        #prev {
            left: 10px;
        }

        #next {
            right: 10px;
        }
    </style>
</head>
<body>

<div class="video-container">
    <iframe class="video-frame active" src="https://rutube.ru/play/embed/9ad7bf783386eb794b08219f58c85ce1/" allowfullscreen></iframe>
    <iframe class="video-frame" src="https://rutube.ru/play/embed/3c00c81072b3b028827abea2991220e8/" allowfullscreen></iframe>
    <iframe class="video-frame" src="https://rutube.ru/play/embed/93d322424b71a695de0f920bdd49d39a/" allowfullscreen></iframe>
    <iframe class="video-frame" src="https://rutube.ru/play/embed/6e3a1ddba5dbbc60b0e9ffd125ed5538/" allowfullscreen></iframe>
    <!-- Добавьте остальные видео -->
</div>

<div class="controls">
    <button id="prev">◄</button>
    <button id="next">►</button>
</div>

<script>
    const videoFrames = document.querySelectorAll('.video-frame');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');

    let currentIndex = 0;

    function showVideo(index) {
        videoFrames.forEach((frame, i) => {
            if (i === index) {
                frame.classList.add('active');
            } else {
                frame.classList.remove('active');
            }
        });
    }

    prevButton.addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + videoFrames.length) % videoFrames.length;
        showVideo(currentIndex);
    });

    nextButton.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % videoFrames.length;
        showVideo(currentIndex);
    });

    showVideo(currentIndex);
</script>

</body>
</html>