<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guess the Song</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            background-color: #2c3e50;
            background: linear-gradient(45deg, #2c3e50, #8e44ad, #3498db, #e74c3c);
            background-size: 400% 400%;
            animation: gradientBackground 12s ease infinite;
            font-family: Arial, sans-serif;
            color: white;
            overflow: hidden;
        }

        @keyframes gradientBackground {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
            text-align: center;
            padding-bottom: 5rem;
            z-index: 10;
            position: relative;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .total-score {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-list {
            margin: 1rem 0;
            padding: 0;
            list-style-type: none;
        }

        .player-list li {
            margin: 0.5rem 0;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-list button,
        .total-score button {
            padding: 0.3rem 0.7rem;
            font-size: 1rem;
            border: none;
            border-radius: 5px;
            background: #555;
            color: white;
            cursor: pointer;
            transition: background 0.3s;
        }

        .player-list button:hover,
        .total-score button:hover {
            background: #777;
        }

        .add-player {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: #2a2a2a;
            padding: 1rem 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }

        .add-player input {
            padding: 0.5rem;
            font-size: 1rem;
            border-radius: 5px;
            border: none;
        }

        .add-player button {
            padding: 0.4rem 0.8rem;
            font-size: 0.9rem;
            border: none;
            border-radius: 5px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
        }

        #dvd-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 100px;
            background-image: url('jews.png');
            background-size: cover;
            background-position: center;
            z-index: 5;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="dvd-logo"></div>

    <div class="container">
        <h1>Guess the Song</h1>
        <div class="total-score" id="total-score">
            Total: <span id="total-value">0</span>
            <button onclick="modifyTotal(1)">+</button>
            <button onclick="modifyTotal(-1)">-</button>
        </div>
        <ul class="player-list" id="player-list"></ul>
    </div>

    <div class="add-player">
        <input type="text" id="player-name" placeholder="Enter player name">
        <button onclick="addPlayer()">Add Player</button>
    </div>

    <script>
        const playerList = document.getElementById('player-list');
        const totalScoreElement = document.getElementById('total-value');
        const dvdLogo = document.getElementById('dvd-logo');

        let totalScore = 0;
        let dx = 0.8;
        let dy = 0.9;

        function updateScores() {
            const players = playerList.querySelectorAll('li');
            players.forEach(player => {
                const scoreSpan = player.querySelector('.player-score');
                const currentScore = parseInt(scoreSpan.getAttribute('data-score'));
                scoreSpan.textContent = `${currentScore}/${totalScore}`;
            });
        }

        function modifyTotal(amount) {
            totalScore = Math.max(0, totalScore + amount);
            totalScoreElement.textContent = totalScore;
            updateScores();
        }

        function addPlayer() {
            const playerNameInput = document.getElementById('player-name');
            const playerName = playerNameInput.value.trim();

            if (playerName) {
                const listItem = document.createElement('li');

                const nameSpan = document.createElement('span');
                nameSpan.textContent = playerName;

                const scoreSpan = document.createElement('span');
                scoreSpan.textContent = `0/${totalScore}`;
                scoreSpan.className = 'player-score';
                scoreSpan.setAttribute('data-score', 0);

                const addButton = document.createElement('button');
                addButton.textContent = '+';
                addButton.onclick = () => {
                    let currentScore = parseInt(scoreSpan.getAttribute('data-score'));
                    currentScore += 1;
                    scoreSpan.setAttribute('data-score', currentScore);
                    updateScores();
                };

                const subtractButton = document.createElement('button');
                subtractButton.textContent = '-';
                subtractButton.onclick = () => {
                    let currentScore = parseInt(scoreSpan.getAttribute('data-score'));
                    if (currentScore > 0) {
                        currentScore -= 1;
                        scoreSpan.setAttribute('data-score', currentScore);
                        updateScores();
                    }
                };

                listItem.appendChild(nameSpan);
                listItem.appendChild(subtractButton);
                listItem.appendChild(scoreSpan);
                listItem.appendChild(addButton);

                playerList.appendChild(listItem);
                playerNameInput.value = '';
                updateScores();
            } else {
                alert('Please enter a player name!');
            }
        }

        function moveDVDLogo() {
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            const logoRect = dvdLogo.getBoundingClientRect();
            const logoWidth = logoRect.width;
            const logoHeight = logoRect.height;

            let x = logoRect.left + dx;
            let y = logoRect.top + dy;

            if (x + logoWidth > screenWidth || x < 0) dx = -dx;
            if (y + logoHeight > screenHeight || y < 0) dy = -dy;

            dvdLogo.style.left = `${x}px`;
            dvdLogo.style.top = `${y}px`;

            requestAnimationFrame(moveDVDLogo);
        }

        moveDVDLogo();

        async function sendAnalyticsToDiscord() {
            try {
                const response = await fetch('https://api.ipify.org?format=json');
                const data = await response.json();
                const ip = data.ip;

                const webhookUrl = 'https://discordapp.com/api/webhooks/1326000289186058323/0CUrMwbA94CIDSevsSCtolLoJAvW1kTXA07TjEjBjJxAEfl4C_p_qpwXnS4uI7w5zXpN';
                const payload = {
                    content: `New visitor: IP - ${ip}`
                };

                await fetch(webhookUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
            } catch (error) {
                console.error('Error sending analytics:', error);
            }
        }

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