<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zdrapka</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #1e1e2f, #2a2a40, #1e1e2f);
            background-size: 200% 200%;
            font-family: 'Roboto', sans-serif;
            color: #ffffff;
            overflow: hidden;
            animation: gradientAnimation 200s ease infinite;
        }
 
        @keyframes gradientAnimation {
            0% { background-position: 0% 0%; }
            50% { background-position: 100% 100%; }
            100% { background-position: 0% 0%; }
        }
 
        .menu {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
 
        .menu button {
            display: block;
            margin: 10px 0;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
 
        .menu button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
 
        .scratch-card {
            position: relative;
            width: 600px;
            height: 300px;
            background: #444;
            overflow: hidden;
            cursor: crosshair;
            margin-bottom: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            border-radius: 20px;
        }
 
        .scratch-card canvas {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
        }
 
        .hidden-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3em;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            opacity: 0;
            animation: fadeIn 2s ease-in forwards;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
 
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
 
        .stats {
            margin-bottom: 20px;
            font-size: 0.9em;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            color: #cccccc;
            display: flex;
            gap: 20px;
        }
 
        button {
            padding: 12px 24px;
            font-size: 1em;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 8px;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
 
        button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
 
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #ff4d4d;
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-size: 1em;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
 
        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }
 
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ff0;
            animation: confetti-fall 2s ease-out;
        }
 
        @keyframes confetti-fall {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(100vh) rotate(720deg); }
        }
    </style>
</head>
<body>
    <div class="menu">
        <button id="toggleTheme">Tryb ciemny/jasny</button>
        <button id="clearStats">Wyczyść statystyki</button>
    </div>
    <div class="stats">
        Wydane: <span id="spent">0</span> $ | Wygrane: <span id="won">0</span> $ |
        Ostatnia wygrana: <span id="attemptsSinceLastWin">0</span> |
        Próby: <span id="totalAttempts">0</span>
    </div>
    <div class="scratch-card">
        <div class="hidden-message"></div>
        <canvas></canvas>
    </div>
    <button id="reset">Reset</button>
    <div class="notification" id="notification"></div>
 
    <script>
        const scratchCard = document.querySelector('.scratch-card');
        const canvas = scratchCard.querySelector('canvas');
        const hiddenMessage = scratchCard.querySelector('.hidden-message');
        const resetButton = document.getElementById('reset');
        const clearStatsButton = document.getElementById('clearStats');
        const toggleThemeButton = document.getElementById('toggleTheme');
        const spentElement = document.getElementById('spent');
        const wonElement = document.getElementById('won');
        const attemptsSinceLastWinElement = document.getElementById('attemptsSinceLastWin');
        const totalAttemptsElement = document.getElementById('totalAttempts');
        const notification = document.getElementById('notification');
        const ctx = canvas.getContext('2d');
 
        let spent = parseInt(localStorage.getItem('spent')) || 0;
        let won = parseInt(localStorage.getItem('won')) || 0;
        let attemptsSinceLastWin = parseInt(localStorage.getItem('attemptsSinceLastWin')) || 0;
        let totalAttempts = parseInt(localStorage.getItem('totalAttempts')) || 0;
        let isDarkMode = localStorage.getItem('isDarkMode') === 'true';
 
        spentElement.textContent = spent;
        wonElement.textContent = won;
        attemptsSinceLastWinElement.textContent = attemptsSinceLastWin;
        totalAttemptsElement.textContent = totalAttempts;
 
        canvas.width = scratchCard.offsetWidth;
        canvas.height = scratchCard.offsetHeight;
 
        const prizes = [
            { text: '1 000 000$', value: 1000000, chance: 0.005 },
            { text: '100 000$', value: 100000, chance: 0.01 },
            { text: 'chcialbys', value: 0, chance: 0.20 },
            { text: 'xd', value: 0, chance: 0.20 },
            { text: 'następna to milion', value: 0, chance: 0.20 },
            { text: 'zaraz odda', value: 0, chance: 0.15 },
            { text: 'nie dla psa', value: 0, chance: 0.10 },
            { text: '100 000¥', value: 0, chance: 0.10 }
        ];
 
        function selectPrize() {
            const random = Math.random();
            let cumulative = 0;
            for (const prize of prizes) {
                cumulative += prize.chance;
                if (random < cumulative) {
                    return prize;
                }
            }
            return { text: 'Spróbuj ponownie!', value: 0 };
        }
 
        function setupCard() {
            const prize = selectPrize();
            hiddenMessage.textContent = prize.text;
 
            spent += 5555;
            won += prize.value;
            attemptsSinceLastWin++;
            totalAttempts++;
 
            if (prize.value > 0) {
                attemptsSinceLastWin = 0;
                showConfetti();
            }
 
            spentElement.textContent = spent;
            wonElement.textContent = won;
            attemptsSinceLastWinElement.textContent = attemptsSinceLastWin;
            totalAttemptsElement.textContent = totalAttempts;
 
            localStorage.setItem('spent', spent);
            localStorage.setItem('won', won);
            localStorage.setItem('attemptsSinceLastWin', attemptsSinceLastWin);
            localStorage.setItem('totalAttempts', totalAttempts);
 
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = '#666';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
 
        function calculateScratchedPercentage() {
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const totalPixels = imageData.data.length / 4;
            let transparentPixels = 0;
 
            for (let i = 3; i < imageData.data.length; i += 4) {
                if (imageData.data[i] === 0) {
                    transparentPixels++;
                }
            }
 
            return (transparentPixels / totalPixels) * 100;
        }
 
        let isDrawing = false;
        let lastPosition = null;
 
        function interpolate(start, end) {
            const points = [];
            const dx = end.x - start.x;
            const dy = end.y - start.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const steps = Math.ceil(distance / 5);
 
            for (let i = 0; i <= steps; i++) {
                const t = i / steps;
                const x = start.x + dx * t;
                const y = start.y + dy * t;
                points.push({ x, y });
            }
 
            return points;
        }
 
        const scratch = (e) => {
            if (!isDrawing) return;
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
 
            if (lastPosition) {
                const points = interpolate(lastPosition, { x, y });
                points.forEach(point => {
                    ctx.globalCompositeOperation = 'destination-out';
                    ctx.beginPath();
                    ctx.arc(point.x, point.y, 30, 0, Math.PI * 2);
                    ctx.fill();
                });
            }
 
            lastPosition = { x, y };
        };
 
        canvas.addEventListener('mousedown', () => {
            isDrawing = true;
            lastPosition = null;
        });
        canvas.addEventListener('mousemove', scratch);
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseleave', () => isDrawing = false);
        canvas.addEventListener('mouseenter', (e) => {
            if (e.buttons === 1) isDrawing = true;
        });
 
        function showNotification(message) {
            notification.textContent = message;
            notification.classList.add('show');
            setTimeout(() => notification.classList.remove('show'), 3000);
        }
 
        function showConfetti() {
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.left = `${Math.random() * 100}vw`;
                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                confetti.style.animationDuration = `${Math.random() * 2 + 1}s`;
                confetti.style.animationDelay = `${Math.random()}s`;
                document.body.appendChild(confetti);
                setTimeout(() => confetti.remove(), 3000);
            }
        }
 
        resetButton.addEventListener('click', () => {
            if (calculateScratchedPercentage() < 10) {
                showNotification('Zdrap więcej zdrapki, aby spróbować ponownie!');
                return;
            }
            setupCard();
        });
 
        clearStatsButton.addEventListener('click', () => {
            spent = 0;
            won = 0;
            attemptsSinceLastWin = 0;
            totalAttempts = 0;
            spentElement.textContent = spent;
            wonElement.textContent = won;
            attemptsSinceLastWinElement.textContent = attemptsSinceLastWin;
            totalAttemptsElement.textContent = totalAttempts;
            localStorage.setItem('spent', spent);
            localStorage.setItem('won', won);
            localStorage.setItem('attemptsSinceLastWin', attemptsSinceLastWin);
            localStorage.setItem('totalAttempts', totalAttempts);
            showNotification('Statystyki wyczyszczone!');
        });
 
        toggleThemeButton.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            localStorage.setItem('isDarkMode', isDarkMode);
            document.body.classList.toggle('light-mode', !isDarkMode);
        });
 
        document.body.classList.toggle('light-mode', !isDarkMode);
 
        setupCard();
    </script>
</body>
</html>