<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="https://ik.imagekit.io/2cs1xx8pd/gif-grande-unscreen.gif?updatedAt=1725309865889" type="image/gif">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marcelo</title>
    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });

        document.addEventListener('keydown', function(e) {
            if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && (e.keyCode == 73 || e.keyCode == 74 || e.keyCode == 75))) {
                e.preventDefault();
            }
            if (e.ctrlKey && e.keyCode == 85) {
                e.preventDefault();
            }
        });

        function openImage(src) {
            const modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = 0;
            modal.style.left = 0;
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.alignItems = 'center';
            modal.style.zIndex = 1000;

            const img = document.createElement('img');
            img.src = src;
            img.style.maxWidth = '90%';
            img.style.maxHeight = '90%';
            img.style.boxShadow = '0 0 20px rgba(139, 0, 0)';

            const closeButton = document.createElement('span');
            closeButton.textContent = '✖';
            closeButton.style.position = 'absolute';
            closeButton.style.top = '20px';
            closeButton.style.right = '20px';
            closeButton.style.fontSize = '30px';
            closeButton.style.color = 'red';
            closeButton.style.cursor = 'pointer';
            closeButton.onclick = () => modal.remove();

            modal.appendChild(img);
            modal.appendChild(closeButton);
            document.body.appendChild(modal);
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #121212;
            color: #e1e1e1;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            animation: fadeIn 2s ease-in-out;
            background: linear-gradient(135deg, #1a1a1a, #333);
        }

        .background {
            background-image: url('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/1350421.jpg?updatedAt=1733863705602');
            background-size: cover;
            background-position: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            z-index: -1;
        }

        .container {
            text-align: center;
            padding: 30px;
            max-width: 900px;
            margin: 20px auto;
            border-radius: 15px;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.616);
            color: #ff6b6b;
            animation: fadeInUp 2s ease-in-out;
            border: 2px solid #991c1c;
            background: rgba(2, 2, 2, 0.438);
        }

        .perfil img {
            border: 4px solid #991c1c;
            border-radius: 50%;
            width: 180px;
            height: 180px;
            box-shadow: 0 0 25px rgba(11, 56, 204, 0.541);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .perfil img:hover {
            transform: scale(1.15);
            box-shadow: 0 0 35px rgba(26, 46, 228, 0.7);
        }

        .perfil h1 {
            color: #dd3131a6;
            font-size: 36px;
            margin-top: 15px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            text-shadow: 2px 2px 4px rgba(255, 107, 107, 0.4);
        }

        .descricao {
            font-size: 20px;
            color: #ffffff62;
            max-width: 700px;
            margin: auto;
            line-height: 1.6;
            background: rgba(40, 40, 40, 0.39);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
        }

        .mural h2 {
            color: #db3131;
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        }

        .galeria img {
            width: 220px;
            height: 130px;
            border: 3px solid #dd3131a6;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        .galeria img:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(179, 26, 26, 0.5);
        }

        .video-section {
            margin-top: 30px;
            padding: 20px;
            border-radius: 15px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .video-section video {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 0 10px #dd3131a6;
        }

        .audio-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #cf2c2c;
            color: white;
            padding: 10px 15px; /* Ajuste o padding conforme necessário */
            border-radius: 20px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 0 10px rgba(189, 67, 67, 0.5);
            width: auto; /* Ajusta a largura para o conteúdo */
            height: auto; /* Ajusta a altura para o conteúdo */
        }
        
        .audio-control:hover {
            background-color: #d94a4a;
            transform: scale(1.05);
        }
        

        @media (max-width: 768px) {
            .perfil img {
                width: 120px;
                height: 120px;
            }

            .perfil h1 {
                font-size: 24px;
            }

            .descricao {
                font-size: 16px;
                padding: 10px;
            }

            .galeria img {
                width: 100px;
                height: 75px;
            }

            .audio-control {
                font-size: 14px;
                padding: 8px 12px;
            }
        }
        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
        }

        .social-links a {
            color: #dd3131a6;
            text-decoration: none;
            font-size: 20px;
            transition: color 0.3s;
        }

        .social-links a:hover {
            color: #701e1ec0;
        }
            /* Contêiner principal dos comentários */
            /* Contêiner principal dos comentários */
            .comments-section {
                background: rgba(0, 0, 0, 0.397);
                padding: 40px 30px;
                border-radius: 20px;
                color: #ffffff8f;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
                max-width: 100%;
                overflow: hidden;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 50px auto;
                width: 90%;
                box-sizing: border-box;
            }
        
            h2 {
                font-size: 26px;
                margin-bottom: 25px;
                text-align: center;
                color: rgba(182, 27, 27, 0.8);
                text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
            }
        
            /* Estilo dos comentários */
            #comments-list .comment {
                border-bottom: 1px solid rgba(185, 81, 81, 0.3);
                margin-bottom: 20px;
                padding-bottom: 15px;
                position: relative;
                transition: background-color 0.3s ease, transform 0.2s ease;
            }
        
            #comments-list .comment:hover {
                background-color: rgba(185, 81, 81, 0.1);
                transform: translateX(5px);
            }
        
            #comments-list .comment p {
                margin: 5px 0;
                font-size: 15px;
            }
        
            /* Estilo do input e textarea */
            #comment-input, #user-name, #media-link {
                width: 100%;
                padding: 15px;
                border: 1px solid rgba(185, 81, 81, 0.5);
                border-radius: 10px;
                background: #222;
                color: #fff;
                font-size: 16px;
                transition: border-color 0.3s ease;
                margin-bottom: 20px;
                box-sizing: border-box;
            }
        
            #comment-input:focus, #user-name:focus, #media-link:focus {
                border-color: rgba(218, 7, 7, 0.5);
                outline: none;
            }
        
            /* Remover a possibilidade de expansão do textarea */
            #comment-input {
                resize: none;
            }
        
            /* Estilo do botão */
            button {
                background: rgba(218, 7, 7, 0.5);
                color: #fff;
                border: none;
                padding: 14px 18px;
                cursor: pointer;
                margin-top: 20px;
                border-radius: 12px;
                font-size: 17px;
                transition: background-color 0.3s ease, transform 0.2s ease;
                width: 100%;
                box-sizing: border-box;
            }
        
            button:hover {
                background: rgba(75, 7, 7, 0.849);
                transform: scale(1.05);
            }
        
            button:active {
                transform: scale(1);
            }
        
            /* Estilo para o botão de envio de comentário com efeitos de transição */
            #comment-form {
                display: flex;
                flex-direction: column;
                gap: 25px;
            }
        
            /* Adicionar um espaço abaixo do botão de enviar */
            #comment-form {
                margin-bottom: 30px;
            }
        
            /* Responsividade */
            @media (max-width: 768px) {
                .comments-section {
                    padding: 20px;
                    margin: 30px auto; /* Centralizar a seção */
                    width: 95%; /* Ajustar largura para dispositivos menores */
                    box-sizing: border-box;
                }
        
                h2 {
                    font-size: 22px;
                }
        
                #comment-input, #user-name, #media-link, button {
                    font-size: 14px;
                    padding: 12px;
                }
            }
            /* Garantir que as mídias (imagem, vídeo, áudio, iframe) não excedam a largura da tela */
.media-content img,
.media-content video,
.media-content audio,
.media-content iframe {
    max-width: 100%;
    max-height: 400px; /* Limitar a altura máxima */
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    </style>
</head>
<body>
    <div class="background"></div>
    <div class="container">
        <div class="perfil">
            <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/perfil-cecelo.gif?updatedAt=1733863709091" alt="Foto de Perfil do Marcelo">
            <h1>Marcelo</h1>
            <div class="social-links">
                <a href="https://discord.gg/9XXzfrMBs6" target="_blank"><i class="fab fa-discord"></i></a>
                <a href="https://steamcommunity.com/profiles/76561199161841461/" target="_blank"><i class="fab fa-steam"></i></a>  
            </div>
            <p class="descricao">Oi, eu sou o Marcelo! Vou ser bem sincero: não sei jogar nada, sou péssimo dirigindo e atirando, e sempre acabo fazendo uma enorme bagunça!</p>
        </div>
        <div class="mural">
            <h2>Melhores Momentos</h2>
            <div class="galeria">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/1.png?updatedAt=1733863712113" alt="Momento 1" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/1.png?updatedAt=1733863712113')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/8.png?updatedAt=1733863708189" alt="Momento 2" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/8.png?updatedAt=1733863708189')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/3.png?updatedAt=1733863707846" alt="Momento 3" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/3.png?updatedAt=1733863707846')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/4.png?updatedAt=1733863707875" alt="Momento 4" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/4.png?updatedAt=1733863707875')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/5.png?updatedAt=1733863705587" alt="Momento 5" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/5.png?updatedAt=1733863705587')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/7.png?updatedAt=1733863707709" alt="Momento 6" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/7.png?updatedAt=1733863707709')">
                <img src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/9.gif?updatedAt=1733863709380" alt="Momento 7" onclick="openImage('https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/9.gif?updatedAt=1733863709380')">
            </div>
        </div>

        <div class="video-section">
            <video controls>
                <source src="https://ik.imagekit.io/2cs1xx8pd/servidor%20antagonista/marcelo1.mp4?updatedAt=1733863732110" type="video/mp4">
                Seu navegador não suporta a tag de vídeo.
            </video>
        </div>
        <div class="comments-section">
            <h2>Comentários</h2>
            <div id="auth-status">
                <p>Deixe seu comentário abaixo:</p>
            </div>
        
            <!-- Formulário para enviar comentário -->
            <div id="comment-form">
                <input type="text" id="user-name" placeholder="Seu nome" />
                <textarea id="comment-input" placeholder="Deixe seu comentário"></textarea>
                <input type="text" id="media-link" placeholder="Link da mídia (Imagem/Video)" />
                <button id="submit-comment">Enviar Comentário</button>
            </div>
        
            <!-- Lista de Comentários -->
            <div id="comments-list"></div>
        </div>
        
        <audio id="background-audio" loop>
            <source src="https://dl.dropboxusercontent.com/scl/fi/ukay26mw2ubyjthtk7j9o/O-Rei-Fraco-Shinichiro-Sano-Tokyo-Revengers-Shiny.mp3?rlkey=m6azq6stn99gyw913vqftj655&st=3qcx8c7p&dl=0" type="audio/mpeg">
            Seu navegador não suporta a tag de áudio.
        </audio>
        
        <button class="audio-control" onclick="toggleAudio(event)">Reproduzir/Pausar Música</button>
    </div>
    <script>
        const pageId = "comentarios_marcelo"; // Identificador único da página
        
        // Função para detectar o tipo de mídia
        async function detectMediaType(url) {
            try {
                const response = await fetch(url, { method: 'HEAD' });
                const contentType = response.headers.get('Content-Type');
                
                if (contentType) {
                    if (contentType.startsWith('image/')) {
                        return 'image';
                    } else if (contentType.startsWith('video/')) {
                        return 'video';
                    } else if (contentType.startsWith('audio/')) {
                        return 'audio';
                    }
                }
            } catch (error) {
                console.error('Erro ao tentar verificar o tipo de mídia:', error);
            }
            
            // Verifica se o link é do YouTube
            if (url.includes("youtube.com") || url.includes("youtu.be")) {
                return 'youtube';
            }
    
            return null; // Retorna null caso não consiga detectar
        }
        
        // Postar comentário
        async function postComment() {
            const name = document.getElementById("user-name").value;
            const comment = document.getElementById("comment-input").value;
            const mediaLink = document.getElementById("media-link").value.trim(); // Obtém o link da mídia
        
            if (name.trim() === "" || comment.trim() === "") {
                return alert("Por favor, insira seu nome e o comentário!");
            }
        
            const response = await fetch('/comments', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    pageId: pageId,
                    comment: { text: comment, user: name, date: new Date().toISOString() }, // Passa o comentário de forma estruturada
                    mediaLink: mediaLink || null, // Se houver link de mídia, envia, caso contrário, envia `null`
                })
            });
        
            if (response.ok) {
                loadComments();
                document.getElementById("user-name").value = "";
                document.getElementById("comment-input").value = "";
                document.getElementById("media-link").value = ""; // Limpa o campo do link de mídia
            } else {
                alert("Erro ao enviar comentário!");
            }
        }
        
        async function loadComments() {
            const response = await fetch(`/comments?pageId=${pageId}`);
            const data = await response.json();
            console.log('Comentários recebidos:', data); // Log dos dados recebidos
            const commentsList = document.getElementById("comments-list");
            commentsList.innerHTML = "";
        
            const comments = data.comments || [];
        
            comments.sort((a, b) => new Date(b.date) - new Date(a.date));
        
            for (const comment of comments) {
                let mediaContent = '';
                if (comment.mediaLink) {
                    const mediaType = await detectMediaType(comment.mediaLink); // Detecta o tipo de mídia
                    if (mediaType === 'image') {
                        mediaContent = `<div class="media-content"><img src="${comment.mediaLink}" alt="Mídia" /></div>`;
                    } else if (mediaType === 'video') {
                        mediaContent = `<div class="media-content"><video controls><source src="${comment.mediaLink}" type="video/mp4">Seu navegador não suporta o elemento de vídeo.</video></div>`;
                    } else if (mediaType === 'audio') {
                        mediaContent = `<div class="media-content"><audio controls><source src="${comment.mediaLink}" type="audio/mp3">Seu navegador não suporta o elemento de áudio.</audio></div>`;
                    } else if (mediaType === 'youtube') {
                        const youtubeEmbed = comment.mediaLink.replace('watch?v=', 'embed/');
                        mediaContent = `<div class="media-content"><iframe width="560" height="315" src="https://www.youtube.com/${youtubeEmbed}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
                    }
                }
        
                commentsList.innerHTML += `
                    <div class="comment" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgba(185, 81, 81, 0.3);">
                        <p><strong>${comment.user}</strong> em ${new Date(comment.date).toLocaleString()}</p>
                        <p>${comment.text}</p>
                        ${mediaContent} <!-- Exibe o conteúdo da mídia -->
                    </div>
                `;
            }
        }
        
        // Adicionar evento de clique ao botão
        document.getElementById("submit-comment").addEventListener("click", postComment);
        
        window.onload = () => {
            loadComments();
        };
    </script>   
    <script>
        const audio = document.getElementById('background-audio');

        function toggleAudio(event) {
            event.stopPropagation();
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        }

        function playAudio() {
            if (audio.paused) {
                audio.play();
            }
        }
    </script>
</body>
</html>