<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pogađanje Fudbalera i Klubova</title>
    <style>
        body {
            background-color: #1a1a2e;
            color: white;
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .container {
            background: #16213e;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2);
            margin: 50px auto;
            width: 80%;
            max-width: 500px;
        }

        button {
            background: linear-gradient(45deg, #0f3460, #1e5ba9);
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            margin: 10px;
            transition: 0.3s;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

        button:hover {
            background: #e94560;
            transform: scale(1.1);
        }

        .hidden { display: none; }

        .player-image {
            width: 100%;
            max-width: 300px;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.3);
        }

        .result {
            font-size: 22px;
            font-weight: bold;
            margin-top: 15px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .correct { color: #4CAF50; }
        .wrong { color: #e94560; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Pogađanje Fudbalera i Klubova</h1>
        <div id="difficulty-selection">
            <button onclick="selectDifficulty('easy')">Easy</button>
            <button onclick="selectDifficulty('medium')">Medium</button>
            <button onclick="selectDifficulty('hard')">Hard</button>
        </div>

        <div id="mode-selection" class="hidden">
            <button onclick="selectMode('player')">Fudbaler</button>
            <button onclick="selectMode('club')">Klub</button>
        </div>

        <div id="game" class="hidden">
            <h2>Ko je na slici?</h2>
            <img id="image" class="player-image" src="" alt="Slika fudbalera ili kluba">
            <div id="answer-buttons">
                <!-- Dugmadi za odgovore će biti ovde -->
            </div>
            <p id="result" class="result"></p>
        </div>
    </div>

    <script>
        let difficulty = "";
        let currentAnswer = "";
        let currentMode = "";
        let usedIndexes = [];
        let questionCount = 0; // Brojač za broj odigranih pitanja

        // Fudbaleri i njihovi klubovi
        const players = {
            easy: [
                { name: "Messi", club: "Barcelona", img: "https://assets.goal.com/images/v3/bltd58c4d60ecd9275e/GOAL_-_Blank_WEB_-_Facebook_-_2023-06-13T135350.847.png?auto=webp&format=pjpg&width=3840&quality=60" },
                { name: "Ronaldo", club: "Juventus", img: "https://upload.wikimedia.org/wikipedia/commons/8/8c/Cristiano_Ronaldo_2018.jpg" },
                { name: "Neymar", club: "Paris Saint-Germain", img: "https://b.fssta.com/uploads/application/soccer/headshots/713.vresize.350.350.medium.34.png" },
                { name: "Mbappe", club: "Paris Saint-Germain", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118061142839306/250076574.webp?ex=67d592ed&is=67d4416d&hm=1b03692d5be0a3d566fad747ad247d6ec060c3007538861b444a62aae6ca35bb&" },
                { name: "Salah", club: "Liverpool", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118204554612829/mohamed-salah-bodyshot-v2-2024.webp?ex=67d5930f&is=67d4418f&hm=11235105e42d2bd1882bb5b975eeedec1e9083e57aa4501b2b6535c1eee086f2&" }
            ],
            medium: [
                { name: "Benzema", club: "Real Madrid", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118351237681213/220310092648-benzema-tease.jpg?ex=67d59332&is=67d441b2&hm=d84600cc70c758fcda5be573785996d346705142a378e51fce87c4d92eab56e2&" },
                { name: "Modric", club: "Real Madrid", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118453956317347/POSE__10.webp?ex=67d5934b&is=67d441cb&hm=b16eca2646eb5b5d530f3f6ee906c4da8835a24cb18fbaee1c9533d52b4754e0&" },
                { name: "Kante", club: "Chelsea", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118588148875384/24167.vresize.350.350.medium.34.webp?ex=67d5936b&is=67d441eb&hm=93e6b81c987094637cd23bb573eaa7d9af128b5dca3c91aab6c462b8ea15f7d5&" },
                { name: "Pogba", club: "Manchester United", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350118704939143170/paul-pogba-juventus-2023-1729161119-151614.jpg?ex=67d59387&is=67d44207&hm=572bd0522d12ed12e6bd495381888bb62db27b3a90f858714ec60eae9962957e&" },
                { name: "Sterling", club: "Chelsea", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350119122712789092/0_GettyImages-2190607352.webp?ex=67d593ea&is=67d4426a&hm=153649c5d4f7ddaf998f1c7b61e621617144d4e2c8a8b61193f3d7702cdd0651&" }
            ],
            hard: [
                { name: "Zidane", club: "Real Madrid", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350122345431437322/zidane-franca-350x260-1-optimized.webp?ex=67d596eb&is=67d4456b&hm=94282a39df39047b6e3081efc19369b4b2e28c4856eff32742d502ca5a4fdcbe&" },
                { name: "Platini", club: "Juventus", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350122450591154176/1808.jpg?ex=67d59704&is=67d4db90&" },
                { name: "Baggio", club: "Juventus", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350122676819066910/1217217153.0.jpg?ex=67d5973a&is=67d445ba&hm=8055a9d6e82fbc09134e30726271b66a810be8dd501fefcdb9fae5f50ece00f2&" },
                { name: "Cruyff", club: "Barcelona", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350122594736799885/4e758dd42dd8dc9f6722e48d35cd66f4.jpg?ex=67d59726&is=67d445a6&hm=e887b00dcc1c7d5a540cb9ddf53a8a8e2f75c085c8f92adb786cf875c76ddb90&" }
            ]
        };

        const clubs = {
    easy: [
        { name: "Barcelona", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350123123105861734/unnamed.png?ex=67d597a4&is=67d44624&hm=d173850588e83d1b9f0c471317fbb4b11b42d41ef3e2acd2b50497d2aee01d83&" },
        { name: "Juventus", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350123248460759130/1_DiA3hGOrxr_ZldKo4QTzxg.png?ex=67d597c2&is=67d44642&hm=b447d0957c98b187b69be9e678cb8d5f63fe1c66676e13f2c6593921f83de50b&" },
        { name: "Paris Saint-Germain", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350123434457174130/download.png?ex=67d597ee&is=67d4466e&hm=47c14f5529b3de0a74226f56bfec5e521a9ec9b3b04e842acedee2776cd453b7&" },
        { name: "Liverpool", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350123608030187611/unnamed.png?ex=67d59818&is=67d44698&hm=a9f3ac17ad88ff41067d50cc8ac98ef8242f9cc444259cd63c3b9e6e7e0cd6f9&" },
        { name: "Bayern Munich", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350123729987833956/download.jpg?ex=67d59835&is=67d446b5&hm=f434e863c57507c2e45e26b270dcd78ae68cd270b84f647fad63c3b230f2e436&" }
    ],
    medium: [
        { name: "Real Madrid", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350124767075897449/download.jpg?ex=67d5992c&is=67d447ac&hm=24adc1f88a804225b313ca5ee20e740a634a4206ef86614d00fdbdcdb77806cc&" },
        { name: "Chelsea", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350125937160618078/download.jpg?ex=67d59a43&is=67d448c3&hm=f2a0c35897f24578805dde0b7cb752538b4b07a0c560779189f545344c560ae4&" },
        { name: "Manchester United", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126149761503252/Manchester_United_Football_Club_Flag.png?ex=67d59a76&is=67d448f6&hm=035bfdf42c8bb4feeed3cf0ae7938b581e0aa75ca9dce66725dd7e037a6bad18&" },
        { name: "Tottenham Hotspur", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126309023547484/download.jpg?ex=67d59a9c&is=67d4491c&hm=0903aba45c2160eff57c15fa539621648ce1ec3219ce07165d33f7c53b512feb&" },
        { name: "Arsenal", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126449440460830/download.jpg?ex=67d59abd&is=67d4493d&hm=de244937c13d94861f6038d314017b0909e5944190602ff04080bd4430b9b557&" }
    ],
    hard: [
        { name: "Sevilla", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126605166448792/download.png?ex=67d59ae2&is=67d44962&hm=2339328d37ac84e6af5ba357f975a6abcc755720d5cca2f92a3deb2586bb606e&" },
        { name: "Atletico Madrid", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126703258632222/download.png?ex=67d59afa&is=67d4497a&hm=8199785a2cb9777ec1262ed8a90eb47658dc693984085c4eba3ec69ae168046e&" },
        { name: "RB Leipzig", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350126905264967720/download.png?ex=67d59b2a&is=67d449aa&hm=feb44cc402cb190f20b455084b4956b6b19b245d15c1724812da5551918d85fa&" },
        { name: "Napoli", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350127063113138307/download.png?ex=67d59b4f&is=67d449cf&hm=67614ff9a8cf50b696cb006f8987066c39cc31a497204af57757fda293c2b2c4&" },
        { name: "Lyon", img: "https://cdn.discordapp.com/attachments/1326924056779554826/1350127212560388167/download.png?ex=67d59b73&is=67d449f3&hm=e49845e4ba8df5150524ee9c95aa5407130ac975e543c9efd6589b2355d04383&" }
    ]
};



        // Izbor težine
        function selectDifficulty(level) {
            difficulty = level;
            document.getElementById("difficulty-selection").classList.add("hidden");
            document.getElementById("mode-selection").classList.remove("hidden");
        }

        // Izbor moda (fudbaler/klub)
        function selectMode(mode) {
            currentMode = mode;
            document.getElementById("mode-selection").classList.add("hidden");
            document.getElementById("game").classList.remove("hidden");
            setNewQuestion();
        }

        // Postavljanje novog pitanja
        function setNewQuestion() {
            let data;
            if (currentMode === 'player') {
                data = players[difficulty];
            } else {
                data = clubs[difficulty];
            }

            let randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * data.length);
            } while (usedIndexes.includes(randomIndex));

            usedIndexes.push(randomIndex);

            const selectedItem = data[randomIndex];
            currentAnswer = selectedItem.name;
            document.getElementById("image").src = selectedItem.img;

            setAnswers(selectedItem.name);
        }

        // Generisanje odgovora
        function setAnswers(correctAnswer) {
            const answers = [];
            answers.push({ name: correctAnswer });
            while (answers.length < 3) {
                const randomData = currentMode === 'player' ? players[difficulty] : clubs[difficulty];
                const randomItem = randomData[Math.floor(Math.random() * randomData.length)];
                if (!answers.some(item => item.name === randomItem.name)) {
                    answers.push({ name: randomItem.name });
                }
            }
            shuffleArray(answers);

            let answerButtons = document.getElementById("answer-buttons");
            answerButtons.innerHTML = '';
            answers.forEach(answer => {
                let button = document.createElement("button");
                button.textContent = answer.name;
                button.onclick = () => checkAnswer(answer.name);
                answerButtons.appendChild(button);
            });
        }

        // Mešanje odgovora
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        // Provera odgovora
        function checkAnswer(answer) {
            const result = document.getElementById("result");
            if (answer === currentAnswer) {
                result.textContent = "Tačan odgovor!";
                result.classList.add("correct");
                result.classList.remove("wrong");
            } else {
                result.textContent = "Netačan odgovor. Pokušaj ponovo!";
                result.classList.add("wrong");
                result.classList.remove("correct");
            }
            result.style.opacity = 1;

            questionCount++;

            if (questionCount >= 5) {
                setTimeout(() => {
                    location.reload();
                }, 2000);
            } else {
                setTimeout(() => {
                    result.style.opacity = 0;
                    setNewQuestion();
                }, 1500);
            }
        }
    </script>
</body>
</html>



dodaj mi login register forum u ovom dizajnu i ceo kod mi posalji i ako umes shop napravi koji moze da se kupi zivot