<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MCPanel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- Glow elements -->
    <div class="cursor-glow" id="glow1"></div>
    <div class="cursor-glow" id="glow2"></div>
    <div class="cursor-glow" id="glow3"></div>
    <div class="cursor-glow" id="glow4"></div>
    <div class="cursor-glow" id="glow5"></div>
    <div class="cursor-glow" id="glow6"></div>

    <!-- Particle Background -->
    <div id="particle-background"></div>

    <nav class="top-nav">
        <div class="nav-logo"><a href="/">MCPanel <h6>BETA</h6></a></div>
        <div class="nav-links">
            <a href="/dashboard">Panel</a>
            <a href="/status">Statusy</a>
            <a style="color: cornflowerblue;" href="/donate">Donate</a>
            <a style="color: red;" href="/logout">Wyloguj</a>
        </div>
    </nav>

    <div class="dashboard-card">
        {% block content %}{% endblock %}
    </div>
    <div id="ad-banner" class="ad-banner"></div>
    <p>Wersja: v0.3.1</p>
    <script>
        window.addEventListener('dragover', e => e.preventDefault());
        window.addEventListener('drop', e => e.preventDefault());

        const hoverSound = new Audio("/static/sounds/hover.wav");
        //const clickSound = new Audio("/static/sounds/click.wav");

        hoverSound.volume = 1.0;
        //clickSound.volume = 0.5;

        document.querySelectorAll('a, button, .clickable').forEach(el => {
            el.addEventListener('mouseenter', () => {
                hoverSound.currentTime = 0;
                hoverSound.play();
            });

            //el.addEventListener('click', () => {
            //    clickSound.currentTime = 0;
            //    clickSound.play();
            //});
        });

        const trails = [
            document.getElementById('glow1'),
            document.getElementById('glow2'),
            document.getElementById('glow3'),
            document.getElementById('glow4'),
            document.getElementById('glow5'),
            document.getElementById('glow6'),
        ];

        let x = window.innerWidth / 2, y = window.innerHeight / 2;
        const delays = trails.map(() => ({ x, y }));
        const speeds = [0.9, 0.75, 0.6, 0.5, 0.4, 0.3];

        window.addEventListener('mousemove', (e) => {
            x = e.clientX;
            y = e.clientY;
        });

        function animate() {
            delays.forEach((d, i) => {
                d.x += (x - d.x) * speeds[i];
                d.y += (y - d.y) * speeds[i];
                const size = trails[i].offsetWidth;
                trails[i].style.transform = `translate(${d.x - size / 2}px, ${d.y - size / 2}px)`;
            });

            requestAnimationFrame(animate);
        }

        function createParticle() {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            document.getElementById('particle-background').appendChild(particle);

            const size = Math.random() * 4 + 2;
            const xPos = Math.random() * window.innerWidth;
            const yPos = Math.random() * window.innerHeight;
            const xMove = (Math.random() - 0.5) * 300;
            const yMove = (Math.random() - 0.5) * 300;
            const animationDuration = Math.random() * 2 + 2;
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.left = `${xPos}px`;
            particle.style.top = `${yPos}px`;
            particle.style.setProperty('--x-move', `${xMove}px`);
            particle.style.setProperty('--y-move', `${yMove}px`);
            particle.style.animationDuration = `${animationDuration}s`;
            particle.style.animationDelay = `${Math.random() * 2}s`;
            setTimeout(() => {
                particle.remove();
            }, animationDuration * 1000);
        }
        setInterval(createParticle, 100);

        fetch("/ads/list")
            .then(response => response.json())
            .then(images => {
                if (images.length === 0) return;
                const randomImage = images[Math.floor(Math.random() * images.length)];
                const img = document.createElement("img");
                img.src = randomImage;
                img.alt = "Ad Banner";
                img.style.maxWidth = "100%";
                img.style.height = "auto";
                img.style.borderRadius = "8px";
                img.style.boxShadow = "0 0 12px rgba(0,0,0,0.3)";
                document.getElementById("ad-banner").appendChild(img);
            });

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