<?php
// ServerAion Web by Pr00f & Sky (serveraion.ru)
require "header.php";
?>

<div class="video-intro" id="video-intro" style="display:none;">
    <video id="intro-video" autoplay muted playsinline>
        <source src="bg/Historia Aion.mp4" type="video/mp4">
    </video>
    <div class="video-controls">
        <button id="skip-button" class="control-button">Ir para página</button>
        <button id="replay-button" class="control-button">Assistir novamente</button>
        <button id="sound-toggle-button" class="control-button">Ativar Som</button>
    </div>
</div>

<div class="case" id="main-content">
    <div class="content">
        <?php require "news.php";?>
    </div>
 
<?php require "sidebar.php"; ?>

</div>

<?php require "footer.php"; ?>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var introVideo = document.getElementById('intro-video');
        var skipButton = document.getElementById('skip-button');
        var replayButton = document.getElementById('replay-button');
        var soundToggleButton = document.getElementById('sound-toggle-button');
        var mainContent = document.getElementById('main-content');
        var videoIntro = document.getElementById('video-intro');
        
        introVideo.volume = 1;

        // Verifica se o vídeo deve ser exibido
        function shouldShowVideo() {
            return !sessionStorage.getItem('videoShown');
        }

        // Função para ocultar o vídeo de introdução e mostrar o conteúdo principal
        function goToMainContent() {
            introVideo.pause(); // Pausar o vídeo
            videoIntro.style.display = 'none';
            mainContent.style.display = 'block';
            sessionStorage.setItem('videoShown', 'true'); // Marca o vídeo como mostrado na sessão
        }

        if (shouldShowVideo()) {
            videoIntro.style.display = 'flex';
            mainContent.style.display = 'none';
        } else {
            videoIntro.style.display = 'none';
            mainContent.style.display = 'block';
        }

        // Pular o vídeo de introdução
        skipButton.addEventListener('click', function() {
            goToMainContent();
        });

        // Reproduzir o vídeo novamente
        replayButton.addEventListener('click', function() {
            introVideo.currentTime = 0;
            introVideo.play();
        });
        
        // Ativar som
        soundToggleButton.addEventListener('click', function() {
            introVideo.muted = !introVideo.muted;
            soundToggleButton.textContent = introVideo.muted ? 'Ativar Som' : 'Desativar Som';
        });

        // Quando o vídeo terminar, ir para o conteúdo principal
        introVideo.addEventListener('ended', function() {
            goToMainContent();
        });
    });
</script>

<style>
    .video-intro {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
    }

    #intro-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-controls {
        position: absolute;
        bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .control-button {
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background: #007bff; /* Cor de fundo */
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s, transform 0.3s;
    }

    .control-button:hover {
        background: #0056b3; /* Cor de fundo ao passar o mouse */
        transform: scale(1.05); /* Efeito de aumento */
    }

    .control-button:focus {
        outline: none; /* Remove o contorno ao focar */
    }

    #main-content {
        display: none;
    }
</style>