<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="server-name"></title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <script src="script/config.js"></script>
    <div class="video-background">
        <iframe 
            id="youtube-player" 
            src="https://www.youtube.com/embed/o9tVz3JbjEs?controls=0&amp;showinfo=0&amp;rel=0&amp;autoplay=1&amp;loop=1&amp;mute=1" 
            title="background" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            referrerpolicy="strict-origin-when-cross-origin" 
            allowfullscreen>
        </iframe>
    </div>
    <div id="cursor"></div>
    
    
    <canvas id="animation-canvas"></canvas>
    <audio id="background-music" loop autoplay>
        <source src="audio/music.mp3" type="audio/mp3">
    </audio>    
    <div class="container">
        <div class="staff-panel panel">
            <h2>Staff Team</h2>
            <div id="staff-list" class="list">
                <!-- Staff members will be dynamically added here -->
            </div>
        </div>
        <div class="center-content">
            <div class="logo-container">
                <h1 class="logo">
                    <span class="gradient-text" id="server-name-logo"></span>
                </h1>
                <div class="subtitle" id="server-subtitle"></div>
            </div>
            <p class="description" id="server-description"></p>
            <div class="social-links">
                <a id="discord-link" class="social-btn">
                    <i class="fab fa-discord"></i>
                </a>
                <a id="youtube-link" class="social-btn">
                    <i class="fab fa-youtube"></i>
                </a>
                <a id="twitter-link" class="social-btn">
                    <i class="fab fa-twitter"></i>
                </a>
            </div>
        </div>
    </div>

        
    
    <div class="loading-container">
        <div class="loading-bar">
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
            <div class="loading-text">
                <span class="percentage">0</span>%
            </div>
        </div>
    </div>
    <div class="volume-control">
        <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1" orient="vertical">
    </div>

    <button id="music-toggle" class="music-toggle">
        <i class="fas fa-volume-up"></i>
    </button>
    <script src="script/script.js"></script>
    <script>
        document.addEventListener('mousemove', function(event) {
            const cursor = document.getElementById('cursor');
            cursor.style.left = event.clientX - cursor.offsetWidth / 2 + 'px';
            cursor.style.top = event.clientY - cursor.offsetHeight / 2 + 'px';
        });

        // Event zum Setzen der Spielerliste (falls benötigt)
        window.addEventListener('message', function(event) {
            if (event.data.action === 'showPlayers') {
                // Hier kannst du die Spieleranzeige anpassen (falls du sie anzeigen möchtest)
                console.log(event.data.players);
            }
        });
    </script>
</body>
</html>

