<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO Gestione delle vulnerabilità software</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            background-color: #f9fafb;
            color: #111827;
        }

        /* Layout */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        header {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            margin-bottom: 2rem;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* Grid layout */
        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 1024px) {
            .grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Components */
        .card {
            background: white;
            border-radius: 0.5rem;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 1rem;
            cursor: pointer;
            transition: box-shadow 0.2s;
        }

        .card:hover {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
        }

        .service-info h3 {
            font-size: 1.125rem;
            margin-bottom: 0.25rem;
        }

        .service-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: #6b7280;
        }

        /* Form styles */
        .form-group {
            margin-bottom: 1rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        input, textarea {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            font-size: 1rem;
        }

        button {
            background-color: #2563eb;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            font-size: 1rem;
        }

        button:hover {
            background-color: #1d4ed8;
        }

        /* Vulnerability styles */
        .vulnerability {
            border-left: 4px solid;
            padding-left: 1rem;
        }

        .critical { border-color: #dc2626; }
        .high { border-color: #ea580c; }
        .medium { border-color: #ca8a04; }
        .low { border-color: #2563eb; }

        .severity-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .severity-critical { background-color: #fee2e2; color: #dc2626; }
        .severity-high { background-color: #ffedd5; color: #ea580c; }
        .severity-medium { background-color: #fef3c7; color: #ca8a04; }
        .severity-low { background-color: #dbeafe; color: #2563eb; }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
               DEMO Gestione delle vulnerabilità software
            </div>
            <button id="addServiceBtn">Aggiungi SW</button>
        </div>
    </header>

    <main class="container">
        <div class="grid">
            <div>
                <h2>Servizi monitorati</h2>
                <div id="servicesList"></div>
                <div id="addServiceForm" style="display: none;">
                    <form id="serviceForm">
                        <div class="form-group">
                            <label for="name">Nome SW/Servizio</label>
                            <input type="text" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="version">Versione installata</label>
                            <input type="text" id="version" required>
                        </div>
                        <div class="form-group">
                            <label for="description">Descrizione</label>
                            <textarea id="description" rows="3" required></textarea>
                        </div>
                        <button type="submit">Aggiungi SW</button>
                    </form>
                </div>
            </div>
            <div>
                <h2>Vulnerabilities</h2>
                <div id="vulnerabilitiesList"></div>
            </div>
        </div>
    </main>

    <script>
        // Data store
        const store = {
            services: [
                {
                    id: '1',
                    name: 'Apache Server',
                    version: '2.4.52',
                    description: 'Web server software',
                    lastChecked: '2024-12-02T10:30:00Z',
                    status: 'vulnerable'
                },
                {
                    id: '2',
                    name: 'MySQL',
                    version: '8.0.28',
                    description: 'Database management system',
                    lastChecked: '2024-12-01T10:30:00Z',
                    status: 'secure'
                },
                {
                    id: '3',
                    name: 'Wordpress',
                    version: '4.2.34',
                    description: 'CMS',
                    lastChecked: '2024-12-02T10:30:00Z',
                    status: 'warning'
                }
            ],
            vulnerabilities: [
                {
                    id: 'v1',
                    serviceId: '1',
                    severity: 'critical',
                    description: 'Remote code execution vulnerability in Apache HTTP Server',
                    detectedAt: '2024-03-14T15:30:00Z',
                    cveId: 'CVE-2024-1234'
                },
                {
                    id: 'v2',
                    serviceId: '3',
                    severity: 'medium',
                    description: 'Potential memory leak in Node.js HTTP parser',
                    detectedAt: '2024-03-13T09:15:00Z',
                    cveId: 'CVE-2024-5678'
                }
            ],
            selectedServiceId: null
        };

        // UI Components
        const UI = {
            getStatusIcon(status) {
                const icons = {
                    vulnerable: '⚠️',
                    warning: '⚡',
                    secure: '✅'
                };
                return icons[status] || '❓';
            },

            renderServices() {
                const servicesList = document.getElementById('servicesList');
                servicesList.innerHTML = store.services.map(service => `
                    <div class="card" data-id="${service.id}">
                        <div class="service-header">
                            <div class="service-info">
                                <h3>${service.name}</h3>
                                <div>Version: ${service.version}</div>
                                <div>${service.description}</div>
                            </div>
                            <div class="service-status">
                                ${this.getStatusIcon(service.status)}
                                <span>Last checked: ${new Date(service.lastChecked).toLocaleDateString()}</span>
                            </div>
                        </div>
                    </div>
                `).join('');
            },

            renderVulnerabilities() {
                const vulnerabilitiesList = document.getElementById('vulnerabilitiesList');
                const filteredVulnerabilities = store.selectedServiceId
                    ? store.vulnerabilities.filter(v => v.serviceId === store.selectedServiceId)
                    : store.vulnerabilities;

                vulnerabilitiesList.innerHTML = filteredVulnerabilities.map(vuln => `
                    <div class="card vulnerability ${vuln.severity}">
                        <span class="severity-badge severity-${vuln.severity}">${vuln.severity}</span>
                        <span>${vuln.cveId}</span>
                        <p>${vuln.description}</p>
                        <small>Detected: ${new Date(vuln.detectedAt).toLocaleString()}</small>
                    </div>
                `).join('');
            }
        };

        // Event Handlers
        function setupEventListeners() {
            // Add Service button
            document.getElementById('addServiceBtn').addEventListener('click', () => {
                const form = document.getElementById('addServiceForm');
                const list = document.getElementById('servicesList');
                form.style.display = form.style.display === 'none' ? 'block' : 'none';
                list.style.display = list.style.display === 'none' ? 'block' : 'none';
            });

            // Service Form submission
            document.getElementById('serviceForm').addEventListener('submit', (e) => {
                e.preventDefault();
                const newService = {
                    id: Date.now().toString(),
                    name: document.getElementById('name').value,
                    version: document.getElementById('version').value,
                    description: document.getElementById('description').value,
                    lastChecked: new Date().toISOString(),
                    status: 'secure'
                };
                store.services.push(newService);
                UI.renderServices();
                e.target.reset();
                document.getElementById('addServiceForm').style.display = 'none';
                document.getElementById('servicesList').style.display = 'block';
            });

            // Service selection
            document.getElementById('servicesList').addEventListener('click', (e) => {
                const card = e.target.closest('.card');
                if (card) {
                    store.selectedServiceId = card.dataset.id;
                    UI.renderVulnerabilities();
                }
            });
        }

        // Initialize application
        function init() {
            UI.renderServices();
            UI.renderVulnerabilities();
            setupEventListeners();
        }

        // Start the application
        init();
    </script>
</body>
</html>