Spaces:

magikx
/

test

Running

File size: 16,269 Bytes

9e3c379

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Zgłaszania Błędów</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <style>
        .dragging {
            opacity: 0.5;
            transform: rotate(5deg);
        }
        
        .drop-zone {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 2px dashed #0ea5e9;
        }
        
        .priority-high {
            border-left: 4px solid #ef4444;
            background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
        }
        
        .priority-medium {
            border-left: 4px solid #f59e0b;
            background: linear-gradient(90deg, #fffbeb 0%, #ffffff 100%);
        }
        
        .priority-low {
            border-left: 4px solid #10b981;
            background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
        }
        
        .vote-btn {
            transition: all 0.2s ease;
        }
        
        .vote-btn:hover {
            transform: scale(1.1);
        }
        
        .vote-btn:active {
            transform: scale(0.9);
        }
        
        .kanban-card {
            transition: all 0.3s ease;
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .badge-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">System Zgłaszania Błędów</h1>
            <p class="text-gray-600">Zarządzaj zgłoszeniami w formie tablicy Kanban</p>
            <button onclick="showAddForm()" class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
                <i data-lucide="plus-circle"></i>
                Dodaj nowe zgłoszenie
            </button>
        </header>

        <!-- Formularz dodawania zgłoszenia -->
        <div id="addFormModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
            <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 transform transition-all">
                <h2 class="text-2xl font-bold mb-4">Nowe zgłoszenie błędu</h2>
                <form id="bugForm" onsubmit="addBug(event)" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Tytuł zgłoszenia</label>
                        <input type="text" id="bugTitle" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Opis</label>
                        <textarea id="bugDescription" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Kategoria</label>
                        <select id="bugCategory" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">Wybierz kategorię</option>
                            <option value="frontend">Frontend</option>
                            <option value="backend">Backend</option>
                            <option value="baza-danych">Baza danych</option>
                            <option value="ui-ux">UI/UX</option>
                            <option value="bezpieczenstwo">Bezpieczeństwo</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Priorytet</label>
                        <select id="bugPriority" required class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="low">Niski</option>
                            <option value="medium">Średni</option>
                            <option value="high">Wysoki</option>
                        </select>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit" class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors">
                            Zapisz zgłoszenie
                        </button>
                        <button type="button" onclick="hideAddForm()" class="flex-1 bg-gray-600 text-white py-2 rounded-lg hover:bg-gray-700 transition-colors">
                            Anuluj
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tablica Kanban -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-100 rounded-lg p-4">
                <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                    <i data-lucide="circle" class="text-gray-500"></i>
                    Nowe
                    <span id="newCount" class="bg-gray-500 text-white px-2 py-1 rounded-full text-sm">0</span>
                </h3>
                <div id="newColumn" class="space-y-3 min-h-96" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
            
            <div class="bg-blue-100 rounded-lg p-4">
                <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                    <i data-lucide="loader" class="text-blue-500"></i>
                    W trakcie
                    <span id="progressCount" class="bg-blue-500 text-white px-2 py-1 rounded-full text-sm">0</span>
                </h3>
                <div id="progressColumn" class="space-y-3 min-h-96" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
            
            <div class="bg-yellow-100 rounded-lg p-4">
                <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                    <i data-lucide="check-circle-2" class="text-yellow-500"></i>
                    Do weryfikacji
                    <span id="reviewCount" class="bg-yellow-500 text-white px-2 py-1 rounded-full text-sm">0</span>
                </h3>
                <div id="reviewColumn" class="space-y-3 min-h-96" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
            
            <div class="bg-green-100 rounded-lg p-4">
                <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                    <i data-lucide="check" class="text-green-500"></i>
                    Zakończone
                    <span id="doneCount" class="bg-green-500 text-white px-2 py-1 rounded-full text-sm">0</span>
                </h3>
                <div id="doneColumn" class="space-y-3 min-h-96" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
        </div>
    </div>

    <script>
        let bugs = [];
        let draggedElement = null;

        // Inicjalizacja
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
            loadSampleData();
            renderBugs();
            updateCounts();
        });

        function loadSampleData() {
            bugs = [
                {
                    id: 1,
                    title: "Przycisk wylogowania nie działa",
                    description: "Po kliknięciu przycisku 'Wyloguj' nic się nie dzieje",
                    category: "frontend",
                    priority: "high",
                    status: "new",
                    votes: 5,
                    date: new Date()
                },
                {
                    id: 2,
                    title: "Błąd w zapytaniu SQL",
                    description: "Niepoprawne łączenie tabel w raporcie sprzedaży",
                    category: "baza-danych",
                    priority: "medium",
                    status: "progress",
                    votes: 2,
                    date: new Date()
                },
                {
                    id: 3,
                    title: "Logo nie wyświetla się poprawnie na Safari",
                    description: "Na przeglądarce Safari logo jest rozciągnięte",
                    category: "ui-ux",
                    priority: "low",
                    status: "review",
                    votes: 1,
                    date: new Date()
                }
            ];
        }

        function renderBugs() {
            // Wyczyść kolumny
            ['new', 'progress', 'review', 'done'].forEach(status => {
                const column = document.getElementById(`${status}Column`);
                column.innerHTML = '';
            });

            // Renderuj zgłoszenia
            bugs.forEach(bug => {
                const card = createBugCard(bug);
                const column = document.getElementById(`${bug.status}Column`);
                column.appendChild(card);
            });

            updateCounts();
            lucide.createIcons();
        }

        function createBugCard(bug) {
            const card = document.createElement('div');
            card.className = `kanban-card bg-white p-4 rounded-lg shadow-md cursor-move priority-${bug.priority}`;
            card.draggable = true;
            card.dataset.id = bug.id;

            const categoryMap = {
                'frontend': 'Frontend',
                'backend': 'Backend',
                'baza-danych': 'Baza danych',
                'ui-ux': 'UI/UX',
                'bezpieczenstwo': 'Bezpieczeństwo'
            };

            const priorityMap = {
                'high': { text: 'Wysoki', color: 'red' },
                'medium': { text: 'Średni', color: 'yellow' },
                'low': { text: 'Niski', color: 'green' }
            };

            const priority = priorityMap[bug.priority];

            card.innerHTML = `
                <div class="flex justify-between items-start mb-2">
                    <h4 class="font-semibold text-gray-800">${bug.title}</h4>
                    <div class="flex items-center gap-1">
                        <button onclick="voteUp(${bug.id})" class="vote-btn text-gray-500 hover:text-blue-600">
                            <i data-lucide="thumbs-up" class="w-4 h-4"></i>
                        </button>
                        <span class="text-sm text-gray-600">${bug.votes}</span>
                    </div>
                </div>
                <p class="text-sm text-gray-600 mb-3">${bug.description}</p>
                <div class="flex items-center justify-between">
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded">${categoryMap[bug.category]}</span>
                    <span class="text-xs bg-${priority.color}-100 text-${priority.color}-700 px-2 py-1 rounded">${priority.text}</span>
                </div>
                <div class="mt-2 text-xs text-gray-500">
                    ${bug.date.toLocaleDateString('pl-PL')}
                </div>
            `;

            // Event listeners dla drag & drop
            card.addEventListener('dragstart', dragStart);
            card.addEventListener('dragend', dragEnd);

            return card;
        }

        function addBug(event) {
            event.preventDefault();
            
            const newBug = {
                id: Date.now(),
                title: document.getElementById('bugTitle').value,
                description: document.getElementById('bugDescription').value,
                category: document.getElementById('bugCategory').value,
                priority: document.getElementById('bugPriority').value,
                status: 'new',
                votes: 0,
                date: new Date()
            };

            bugs.push(newBug);
            renderBugs();
            hideAddForm();
            document.getElementById('bugForm').reset();
        }

        function voteUp(bugId) {
            const bug = bugs.find(b => b.id === bugId);
            if (bug) {
                bug.votes++;
                
                // Animacja głosu
                const card = document.querySelector(`[data-id="${bugId}"]`);
                const voteBtn = card.querySelector('.vote-btn');
                voteBtn.style.color = '#3b82f6';
                
                setTimeout(() => {
                    voteBtn.style.color = '';
                }, 300);
                
                renderBugs();
            }
        }

        function showAddForm() {
            document.getElementById('addFormModal').classList.remove('hidden');
            document.getElementById('addFormModal').classList.add('flex');
        }

        function hideAddForm() {
            document.getElementById('addFormModal').classList.add('hidden');
            document.getElementById('addFormModal').classList.remove('flex');
        }

        function updateCounts() {
            const counts = {
                new: bugs.filter(b => b.status === 'new').length,
                progress: bugs.filter(b => b.status === 'progress').length,
                review: bugs.filter(b => b.status === 'review').length,
                done: bugs.filter(b => b.status === 'done').length
            };

            Object.keys(counts).forEach(status => {
                const countElement = document.getElementById(`${status}Count`);
                countElement.textContent = counts[status];
                
                // Pulsująca animacja gdy pojawi się nowe zgłoszenie
                if (counts[status] > 0) {
                    countElement.classList.add('badge-pulse');
                }
            });
        }

        // Drag & Drop functions
        function dragStart(e) {
            draggedElement = e.target;
            e.target.classList.add('dragging');
        }

        function dragEnd(e) {
            e.target.classList.remove('dragging');
        }

        function allowDrop(e) {
            e.preventDefault();
            e.currentTarget.classList.add('drop-zone');
        }

        function drop(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('drop-zone');
            
            if (draggedElement) {
                const bugId = parseInt(draggedElement.dataset.id);
                const newStatus = e.currentTarget.id.replace('Column', '');
                
                const bug = bugs.find(b => b.id === bugId);
                if (bug && bug.status !== newStatus) {
                    bug.status = newStatus;
                    renderBugs();
                }
                
                draggedElement = null;
            }
        }
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=magikx/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>