### Programmier-Anweisung für eine Benutzeroberfläche (UI) zur Visualisierung und Analyse von IT-Sicherheitsmethoden Um eine benutzerfreundliche und interaktive Benutzeroberfläche (UI) zu entwickeln, die die Informationen aus dem bereitgestellten „IT Security Methods – Complete Cheat-Sheet“ visualisiert und analysiert, müssen wir eine präzise Programmier-Anweisung formulieren. Die UI soll Entwicklern, IT-Sicherheitsanalysten oder Administratoren helfen, die Sicherheitsmethoden (z. B. XSS, DoS, DDoS, TLS, etc.) zu verstehen, zu filtern, zu durchsuchen und spezifische Details anzuzeigen. Die Anweisung wird den gesamten Softwareentwicklungsprozess abdecken, basierend auf dem zuvor beschriebenen strukturierten Ansatz für Softwareprojekte, und spezifisch auf die Erstellung einer UI ausgerichtet sein. Dabei wird die Bedeutung präziser Anweisungen berücksichtigt, wie im Restaurant-Beispiel gezeigt, um irrelevante Daten zu vermeiden und ein fokussiertes Ergebnis zu erzielen. --- ### Prompt zur Erstellung einer UI für IT-Sicherheitsmethoden #### 1. Projektplanung und Anforderungen - **Projektziel**: Entwicklung einer interaktiven Web-basierten Benutzeroberfläche, die IT-Sicherheitsmethoden aus dem „IT Security Methods – Complete Cheat-Sheet“ strukturiert darstellt, durchsuchbar macht und es Benutzern ermöglicht, spezifische Details zu jeder Methode (z. B. XSS, DDoS, TLS) anzuzeigen. Die UI soll benutzerfreundlich sein, sowohl für technische als auch weniger technische Nutzer, und eine Analyse der Sicherheitsmethoden ermöglichen (z. B. Vergleich von Methoden, Filtern nach Kategorie). - **Funktionale Anforderungen**: - Anzeige aller Sicherheitsmethoden in einer übersichtlichen, kategorisierten Struktur (z. B. XSS, DoS, TLS als Kategorien). - Suchfunktion, um Methoden nach Namen, Kategorien oder Schlüsselwörtern zu finden. - Filteroptionen (z. B. nach Kategorie, Angriffstyp, Schutzmaßnahme). - Detailansicht für jede Methode mit Beschreibung, Beispielen und relevanten Links (z. B. OWASP, RFCs). - Interaktive Visualisierung (z. B. Diagramme für Angriffstypen oder Schutzmaßnahmen). - Exportfunktion für ausgewählte Daten (z. B. als JSON oder PDF). - **Nicht-funktionale Anforderungen**: - **Benutzerfreundlichkeit**: Intuitive Navigation, responsive Design für Desktop und Mobile. - **Performance**: Ladezeiten unter 2 Sekunden für die Hauptansicht. - **Sicherheit**: Schutz vor XSS, sichere Datenverarbeitung, keine Speicherung sensibler Benutzerdaten. - **Skalierbarkeit**: Unterstützung für zukünftige Erweiterungen (z. B. neue Sicherheitsmethoden). - **Stakeholder-Analyse**: - **Endnutzer**: IT-Sicherheitsanalysten, Entwickler, Administratoren. - **Kunden**: Unternehmen, die Sicherheitsmethoden für Schulungen oder Audits nutzen. - **Entwickler**: Team, das die UI wartet und erweitert. - **Anforderungen der Stakeholder**: Schneller Zugriff auf Informationen, einfache Bedienung, zuverlässige und sichere Anwendung. - **Projektplan**: - **Meilenstein 1**: Anforderungsanalyse und Mockups (2 Wochen). - **Meilenstein 2**: Technologieauswahl und Prototyp (3 Wochen). - **Meilenstein 3**: Implementierung der UI (6 Wochen). - **Meilenstein 4**: Testen und Fehlerbehebung (2 Wochen). - **Meilenstein 5**: Deployment und Dokumentation (1 Woche). - **Verantwortlichkeiten**: - UI/UX-Designer: Erstellung von Mockups und responsive Design. - Frontend-Entwickler: Implementierung der UI und Visualisierungen. - Backend-Entwickler: Datenverarbeitung und API-Bereitstellung. - QA-Team: Testen der Funktionalität und Sicherheit. --- #### 2. Technologieauswahl - **Programmiersprache**: - **Frontend**: JavaScript (für dynamische UI-Elemente). - **Backend**: Python (für API und Datenverarbeitung, falls erforderlich). - **Frameworks und Bibliotheken**: - **Frontend**: - React.js für die Erstellung der Benutzeroberfläche (komponentenbasiert, performant). - Chart.js für interaktive Diagramme (z. B. Verteilung von Angriffstypen). - Material-UI oder Tailwind CSS für ein modernes, responsives Design. - **Backend** (falls benötigt): - FastAPI oder Flask für eine REST-API zur Datenverarbeitung. - SQLite oder MongoDB für die Speicherung der Sicherheitsmethoden-Daten. - **Entwicklungsumgebung**: - **IDE**: VS Code für Frontend- und Backend-Entwicklung. - **Versionskontrolle**: Git mit GitHub für Zusammenarbeit und Code-Management. - **Tools**: - Webpack/Vite für das Bundling von Frontend-Ressourcen. - ESLint und Prettier für Code-Qualität. - Docker für einheitliche Entwicklungsumgebungen. - **Datenquelle**: - Die Daten aus dem „IT Security Methods – Complete Cheat-Sheet“ werden als JSON-Datei strukturiert und in die Anwendung eingebunden (z. B. lokal oder über eine API). --- #### 3. Entwicklung - **Architekturdesign**: - **Frontend**: React-Komponentenstruktur mit: - **Hauptkomponente**: Übersicht aller Kategorien (z. B. XSS, DDoS). - **Such- und Filterkomponente**: Eingabefeld und Dropdowns für Kategorien. - **Detailkomponente**: Anzeige von Details zu einer Methode (z. B. Beschreibung, Links). - **Diagrammkomponente**: Visualisierung mit Chart.js (z. B. Balkendiagramm für Angriffstypen). - **Backend** (optional): REST-API mit Endpunkten wie `/methods`, `/search`, `/categories`. - **Schnittstellen**: - JSON-basierte Datenstruktur für die Sicherheitsmethoden. - API-Calls für dynamische Datenaktualisierung (falls erweitert). - **Datenmodellierung**: - Struktur der Sicherheitsmethoden in JSON, z. B.: ```json { "categories": [ { "name": "XSS", "methods": [ { "name": "Reflected-XSS", "description": "Angriff, bei dem bösartiger Code in einer Anfrage reflektiert wird.", "mitigation": ["Input-Validation", "Output-Encoding"], "references": ["OWASP XSS Prevention"] }, ... ] }, ... ] } ``` - Speicherung in einer SQLite-Datenbank oder als statische JSON-Datei. - **Implementierung**: - **Frontend**: - React-Komponenten für die Darstellung der Kategorien und Methoden. - Suchfunktion mit Fuzzy-Suche (z. B. mit Fuse.js). - Filterlogik für Kategorien und Angriffstypen. - Chart.js für Visualisierungen (z. B. Balkendiagramm für Häufigkeit von Methoden). - Responsive Design mit Tailwind CSS. - **Backend** (falls benötigt): - FastAPI für Endpunkte zur Datenabfrage. - Caching (z. B. Redis) für schnellere Antwortzeiten. - Verwendung von Design Patterns wie „Component Pattern“ (React) und „RESTful API Design“. - **Integration**: - Verbindung von Frontend und Backend über REST-API (falls verwendet). - Einbindung von Chart.js für Diagramme. - Sicherstellung, dass die UI mit statischen JSON-Daten oder dynamischen API-Daten funktioniert. --- #### 4. Kontextverständnis und Aufgabenautomatisierung - **Kontextanalyse**: - Die UI erkennt den Kontext basierend auf Benutzeraktionen (z. B. Auswahl einer Kategorie wie „XSS“ zeigt nur relevante Methoden an). - Analyse von JSON-Daten, um dynamische Filteroptionen zu generieren. - **Aufgabenerkennung**: - Erkennung von Benutzerintentionen (z. B. Suche nach „XSS“ zeigt nur XSS-Methoden). - Vorschläge basierend auf häufigen Suchbegriffen (z. B. „OWASP“, „DDoS“). - **Automatisierungstools**: - CI/CD-Pipeline mit GitHub Actions für automatische Builds und Tests. - Skripte zur Konvertierung des Cheat-Sheets in JSON. - Automatische Generierung von Diagrammen basierend auf Daten (z. B. Verteilung der Methoden). --- #### 5. Testen - **Unit-Tests**: - Testen von React-Komponenten mit Jest und React Testing Library. - Überprüfung der Such- und Filterlogik. - **Integrationstests**: - Testen der Interaktion zwischen Frontend und API (falls verwendet). - Sicherstellung, dass Diagramme korrekt gerendert werden. - **Systemtests**: - Überprüfung der gesamten UI in verschiedenen Browsern (Chrome, Firefox, Safari). - Tests auf mobilen Geräten für responsives Design. - **Benutzertests**: - Feedback von IT-Sicherheitsanalysten einholen, um Usability zu bewerten. - Testen der Suchfunktion und Navigation mit echten Nutzern. --- #### 6. Dokumentation und Support - **Dokumentation**: - **Benutzerhandbuch**: Anleitung zur Nutzung der UI (z. B. Suche, Filter, Export). - **Technische Dokumentation**: Beschreibung der React-Komponenten und API-Endpunkte. - **API-Dokumentation**: Falls Backend verwendet, Swagger/OpenAPI-Dokumentation. - **Support**: - Einrichtung eines FAQ-Bereichs in der UI. - Kontaktformular für Benutzeranfragen. --- #### 7. Deployment und Wartung - **Deployment**: - Bereitstellung der UI auf einer Cloud-Plattform wie Vercel oder Netlify. - Konfiguration von HTTPS und Sicherheitsheadern (z. B. HSTS, CSP). - Einrichtung eines CDN für schnellere Ladezeiten. - **Wartung**: - Regelmäßige Updates der Sicherheitsmethoden-Daten (z. B. neue OWASP-Einträge). - Monitoring der UI-Performance mit Tools wie Sentry. - Behebung von Fehlern basierend auf Benutzerfeedback. --- #### Beispiel-JSON für die UI Um die Daten für die UI zu strukturieren, könnte ein Auszug des JSON wie folgt aussehen: ```json { "categories": [ { "name": "XSS", "methods": [ { "name": "Reflected-XSS", "description": "Angriff, bei dem bösartiger Code in einer Anfrage reflektiert wird.", "mitigation": ["Input-Validation", "Output-Encoding"], "references": ["https://owasp.org/www-community/attacks/xss/"] }, { "name": "Stored-XSS", "description": "Angriff, bei dem bösartiger Code auf dem Server gespeichert wird.", "mitigation": ["Sanitization", "CSP"], "references": ["https://owasp.org/www-community/attacks/xss/"] } ] }, { "name": "DDoS", "methods": [ { "name": "DNS Amplification", "description": "Verstärkung von DNS-Anfragen zur Überlastung eines Servers.", "mitigation": ["Cloud Scrubbing", "Anycast Diffusion"], "references": ["https://www.cloudflare.com/learning/ddos/dns-amplification-ddos-attack/"] } ] } ] } ``` --- #### Beispiel-Chart für Visualisierung Um die Verteilung der Sicherheitsmethoden nach Kategorien zu visualisieren, könnte die UI ein Balkendiagramm anzeigen. Hier ist ein Beispiel für ein Chart.js-Balkendiagramm, das die Anzahl der Methoden pro Kategorie darstellt: ```chartjs { "type": "bar", "data": { "labels": ["XSS", "DoS", "DDoS", "IPSec", "TLS", "AES", "MFA", "WAF"], "datasets": [ { "label": "Anzahl der Methoden", "data": [10, 12, 13, 14, 13, 13, 14, 14], "backgroundColor": [ "#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#14b8a6", "#f97316" ], "borderColor": [ "#1e3a8a", "#b91c1c", "#047857", "#b45309", "#5b21b6", "#be185d", "#0f766e", "#c2410c" ], "borderWidth": 1 } ] }, "options": { "scales": { "y": { "beginAtZero": true, "title": { "display": true, "text": "Anzahl der Methoden" } }, "x": { "title": { "display": true, "text": "Kategorien" } } }, "plugins": { "legend": { "display": false }, "title": { "display": true, "text": "Verteilung der IT-Sicherheitsmethoden nach Kategorie" } } } } ``` Dieses Diagramm zeigt die Anzahl der Methoden pro Kategorie (z. B. XSS, DoS) in einem farblich abgestimmten Balkendiagramm, das für helle und dunkle Themes geeignet ist. --- #### Fazit Diese Programmier-Anweisung bietet eine klare, schrittweise Anleitung zur Entwicklung einer interaktiven UI für IT-Sicherheitsmethoden. Durch die präzise Formulierung der Anforderungen – inspiriert vom Restaurant-Beispiel, das die Bedeutung spezifischer Anweisungen zeigt – wird sichergestellt, dass die UI nur relevante Daten anzeigt und die Bedürfnisse der Benutzer (z. B. schnelle Suche, klare Visualisierung) erfüllt. Die Verwendung von React, Chart.js und Tailwind CSS ermöglicht eine moderne, skalierbare und benutzerfreundliche Anwendung, die sowohl für technische als auch weniger technische Nutzer geeignet ist. Die Anweisung deckt alle Phasen ab – von der Planung bis zur Wartung – und berücksichtigt Sicherheitsaspekte wie CSP und HSTS, die im Cheat-Sheet selbst erwähnt sind, um die Anwendung abzusichern. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Itsecdash
-emoji: 👀
-colorFrom: indigo
+title: itsecdash
+emoji: 🐳
+colorFrom: red
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,1047 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IT Security Methods Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .method-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .dark .chart-container {
+            background-color: #1f2937;
+        }
+        .search-highlight {
+            background-color: #fef08a;
+            padding: 0 2px;
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
+    <div class="min-h-screen">
+        <!-- Header -->
+        <header class="bg-blue-600 text-white shadow-lg">
+            <div class="container mx-auto px-4 py-6">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="flex items-center mb-4 md:mb-0">
+                        <i class="fas fa-shield-alt text-3xl mr-3"></i>
+                        <h1 class="text-2xl font-bold">IT Security Methods Dashboard</h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <button id="theme-toggle" class="p-2 rounded-full bg-blue-700 hover:bg-blue-800">
+                            <i class="fas fa-moon"></i>
+                        </button>
+                        <button id="export-btn" class="px-4 py-2 bg-blue-700 hover:bg-blue-800 rounded-lg flex items-center">
+                            <i class="fas fa-file-export mr-2"></i> Export
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="container mx-auto px-4 py-8">
+            <!-- Search and Filter Section -->
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Search -->
+                    <div class="md:col-span-2">
+                        <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Methods</label>
+                        <div class="relative">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <i class="fas fa-search text-gray-400"></i>
+                            </div>
+                            <input type="text" id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" placeholder="Search by name, category or keyword...">
+                        </div>
+                    </div>
+                    
+                    <!-- Category Filter -->
+                    <div>
+                        <label for="category-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Filter by Category</label>
+                        <select id="category-filter" class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white">
+                            <option value="all">All Categories</option>
+                            <!-- Categories will be populated by JavaScript -->
+                        </select>
+                    </div>
+                </div>
+                
+                <!-- Advanced Filters (Collapsible) -->
+                <div class="mt-4">
+                    <button id="advanced-filters-toggle" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm font-medium flex items-center">
+                        <i class="fas fa-sliders-h mr-2"></i> Advanced Filters
+                        <i id="advanced-filters-arrow" class="fas fa-chevron-down ml-1 text-xs"></i>
+                    </button>
+                    
+                    <div id="advanced-filters" class="hidden mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <!-- Attack Type Filter -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attack Type</label>
+                                <div class="space-y-2">
+                                    <div class="flex items-center">
+                                        <input id="attack-web" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="attack-web" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Web</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="attack-network" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="attack-network" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Network</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="attack-system" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="attack-system" class="ml-2 text-sm text-gray-700 dark:text-gray-300">System</label>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Mitigation Filter -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mitigation</label>
+                                <div class="space-y-2">
+                                    <div class="flex items-center">
+                                        <input id="mitigation-encryption" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="mitigation-encryption" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Encryption</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="mitigation-validation" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="mitigation-validation" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Validation</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="mitigation-monitoring" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="mitigation-monitoring" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Monitoring</label>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Severity Filter -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Severity</label>
+                                <div class="flex items-center space-x-4">
+                                    <div class="flex items-center">
+                                        <input id="severity-high" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="severity-high" class="ml-2 text-sm text-gray-700 dark:text-gray-300">High</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="severity-medium" type="checkbox" class="h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="severity-medium" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Medium</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input id="severity-low" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700">
+                                        <label for="severity-low" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Low</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Stats and Chart Section -->
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+                <!-- Stats Cards -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Methods</p>
+                            <p id="total-methods" class="text-3xl font-bold text-gray-900 dark:text-white">0</p>
+                        </div>
+                        <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
+                            <i class="fas fa-list-check text-xl"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Categories</p>
+                            <p id="total-categories" class="text-3xl font-bold text-gray-900 dark:text-white">0</p>
+                        </div>
+                        <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300">
+                            <i class="fas fa-tags text-xl"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Common Mitigation</p>
+                            <p id="common-mitigation" class="text-3xl font-bold text-gray-900 dark:text-white">-</p>
+                        </div>
+                        <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300">
+                            <i class="fas fa-shield-alt text-xl"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Chart Section -->
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Security Methods Distribution</h2>
+                    <div class="flex space-x-2">
+                        <button id="chart-bar" class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md">Bar</button>
+                        <button id="chart-pie" class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md">Pie</button>
+                        <button id="chart-doughnut" class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md">Doughnut</button>
+                    </div>
+                </div>
+                <div class="chart-container" style="position: relative; height: 400px;">
+                    <canvas id="methods-chart"></canvas>
+                </div>
+            </div>
+            
+            <!-- Methods List Section -->
+            <div class="mb-8">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Security Methods</h2>
+                    <p id="filtered-count" class="text-sm text-gray-500 dark:text-gray-400">Showing <span id="shown-count">0</span> of <span id="total-count">0</span> methods</p>
+                </div>
+                
+                <div id="methods-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Method cards will be populated by JavaScript -->
+                </div>
+                
+                <div id="no-results" class="hidden text-center py-12">
+                    <i class="fas fa-search text-4xl text-gray-400 mb-4"></i>
+                    <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">No methods found</h3>
+                    <p class="text-gray-500 dark:text-gray-400 mt-2">Try adjusting your search or filters</p>
+                </div>
+            </div>
+        </main>
+        
+        <!-- Method Detail Modal -->
+        <div id="method-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                    <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
+                </div>
+                
+                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                
+                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
+                    <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                        <div class="sm:flex sm:items-start">
+                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <h3 id="modal-title" class="text-2xl leading-6 font-bold text-gray-900 dark:text-white"></h3>
+                                        <div id="modal-category" class="mt-1 text-sm text-blue-600 dark:text-blue-400 font-medium"></div>
+                                    </div>
+                                    <button id="close-modal" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                                
+                                <div class="mt-4">
+                                    <div class="mb-6">
+                                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Description</h4>
+                                        <p id="modal-description" class="text-gray-700 dark:text-gray-300"></p>
+                                    </div>
+                                    
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <div>
+                                            <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Attack Type</h4>
+                                            <div id="modal-attack-type" class="flex flex-wrap gap-2"></div>
+                                        </div>
+                                        
+                                        <div>
+                                            <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Severity</h4>
+                                            <div id="modal-severity" class="inline-block px-3 py-1 rounded-full text-sm font-medium"></div>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="mt-6">
+                                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Mitigation</h4>
+                                        <div id="modal-mitigation" class="flex flex-wrap gap-2"></div>
+                                    </div>
+                                    
+                                    <div class="mt-6">
+                                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">References</h4>
+                                        <div id="modal-references" class="space-y-2"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse bg-gray-50 dark:bg-gray-700 rounded-b-lg">
+                        <button type="button" id="modal-close-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Sample data - in a real app, this would come from an API
+        const securityData = {
+            categories: [
+                {
+                    name: "XSS",
+                    methods: [
+                        {
+                            name: "Reflected XSS",
+                            description: "Reflected Cross-Site Scripting (XSS) occurs when malicious script is reflected off a web application to the victim's browser. The script is embedded into a link and is activated when the victim clicks on it.",
+                            attackType: ["Web"],
+                            severity: "High",
+                            mitigation: ["Input Validation", "Output Encoding", "Content Security Policy (CSP)"],
+                            references: [
+                                { text: "OWASP XSS Prevention Cheat Sheet", url: "https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html" },
+                                { text: "PortSwigger XSS", url: "https://portswigger.net/web-security/cross-site-scripting" }
+                            ]
+                        },
+                        {
+                            name: "Stored XSS",
+                            description: "Stored XSS (also known as Persistent or Type-II XSS) occurs when the malicious script is permanently stored on the target servers, such as in a database, message forum, visitor log, comment field, etc.",
+                            attackType: ["Web", "Database"],
+                            severity: "Critical",
+                            mitigation: ["Input Sanitization", "Output Encoding", "Content Security Policy (CSP)"],
+                            references: [
+                                { text: "OWASP XSS Prevention Cheat Sheet", url: "https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html" }
+                            ]
+                        },
+                        {
+                            name: "DOM XSS",
+                            description: "DOM-based XSS (or type-0 XSS) occurs when the client-side JavaScript writes user-provided data to the Document Object Model (DOM) without proper sanitization.",
+                            attackType: ["Web", "Client-side"],
+                            severity: "High",
+                            mitigation: ["Context-aware Output Encoding", "Avoid unsafe JavaScript functions", "Content Security Policy (CSP)"],
+                            references: [
+                                { text: "OWASP DOM XSS Prevention", url: "https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html" }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "DDoS",
+                    methods: [
+                        {
+                            name: "DNS Amplification",
+                            description: "DNS amplification is a type of DDoS attack that exploits open DNS resolvers to overwhelm a target with DNS response traffic.",
+                            attackType: ["Network", "Protocol"],
+                            severity: "High",
+                            mitigation: ["Rate limiting", "Anycast network diffusion", "DNS Response Rate Limiting (RRL)"],
+                            references: [
+                                { text: "Cloudflare DNS Amplification", url: "https://www.cloudflare.com/learning/ddos/dns-amplification-ddos-attack/" }
+                            ]
+                        },
+                        {
+                            name: "SYN Flood",
+                            description: "A SYN flood is a form of denial-of-service attack in which an attacker rapidly initiates a connection to a server without finalizing the connection.",
+                            attackType: ["Network", "Protocol"],
+                            severity: "High",
+                            mitigation: ["SYN cookies", "Firewall rules", "Intrusion Prevention Systems"],
+                            references: [
+                                { text: "Cloudflare SYN Flood", url: "https://www.cloudflare.com/learning/ddos/syn-flood-ddos-attack/" }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "TLS",
+                    methods: [
+                        {
+                            name: "BEAST Attack",
+                            description: "The BEAST (Browser Exploit Against SSL/TLS) attack is a security vulnerability against the confidentiality of the SSL 3.0 and TLS 1.0 protocols.",
+                            attackType: ["Web", "Encryption"],
+                            severity: "Medium",
+                            mitigation: ["Disable SSL 3.0", "Use TLS 1.1 or higher", "Implement TLS_FALLBACK_SCSV"],
+                            references: [
+                                { text: "OWASP Transport Layer Protection Cheat Sheet", url: "https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protection_Cheat_Sheet.html" }
+                            ]
+                        },
+                        {
+                            name: "POODLE",
+                            description: "The POODLE (Padding Oracle On Downgraded Legacy Encryption) attack is a man-in-the-middle exploit that takes advantage of Internet and security software clients' fallback to SSL 3.0.",
+                            attackType: ["Web", "Encryption"],
+                            severity: "Medium",
+                            mitigation: ["Disable SSL 3.0", "Use TLS_FALLBACK_SCSV", "Implement TLS 1.2 or higher"],
+                            references: [
+                                { text: "OWASP Transport Layer Protection Cheat Sheet", url: "https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protection_Cheat_Sheet.html" }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "Authentication",
+                    methods: [
+                        {
+                            name: "Credential Stuffing",
+                            description: "Credential stuffing is the automated injection of breached username/password pairs in order to fraudulently gain access to user accounts.",
+                            attackType: ["Web", "Authentication"],
+                            severity: "High",
+                            mitigation: ["Multi-factor authentication", "Passwordless authentication", "Rate limiting login attempts"],
+                            references: [
+                                { text: "OWASP Credential Stuffing Prevention", url: "https://owasp.org/www-community/attacks/Credential_stuffing" }
+                            ]
+                        },
+                        {
+                            name: "Brute Force",
+                            description: "A brute force attack is a trial-and-error method used to obtain information such as a user password or personal identification number (PIN).",
+                            attackType: ["Web", "Authentication"],
+                            severity: "Medium",
+                            mitigation: ["Account lockout policies", "Rate limiting", "Multi-factor authentication"],
+                            references: [
+                                { text: "OWASP Authentication Cheat Sheet", url: "https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html" }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "Injection",
+                    methods: [
+                        {
+                            name: "SQL Injection",
+                            description: "SQL injection is a code injection technique that might destroy your database. It is one of the most common web hacking techniques.",
+                            attackType: ["Web", "Database"],
+                            severity: "Critical",
+                            mitigation: ["Prepared statements", "Stored procedures", "Input validation"],
+                            references: [
+                                { text: "OWASP SQL Injection Prevention", url: "https://owasp.org/www-community/attacks/SQL_Injection" }
+                            ]
+                        },
+                        {
+                            name: "Command Injection",
+                            description: "Command injection is an attack in which the goal is execution of arbitrary commands on the host operating system via a vulnerable application.",
+                            attackType: ["System", "OS"],
+                            severity: "Critical",
+                            mitigation: ["Input validation", "Parameterized APIs", "Principle of least privilege"],
+                            references: [
+                                { text: "OWASP Command Injection", url: "https://owasp.org/www-community/attacks/Command_Injection" }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+
+        // DOM Elements
+        const searchInput = document.getElementById('search');
+        const categoryFilter = document.getElementById('category-filter');
+        const methodsContainer = document.getElementById('methods-container');
+        const noResults = document.getElementById('no-results');
+        const totalMethods = document.getElementById('total-methods');
+        const totalCategories = document.getElementById('total-categories');
+        const commonMitigation = document.getElementById('common-mitigation');
+        const shownCount = document.getElementById('shown-count');
+        const totalCount = document.getElementById('total-count');
+        const filteredCount = document.getElementById('filtered-count');
+        const advancedFiltersToggle = document.getElementById('advanced-filters-toggle');
+        const advancedFilters = document.getElementById('advanced-filters');
+        const advancedFiltersArrow = document.getElementById('advanced-filters-arrow');
+        const themeToggle = document.getElementById('theme-toggle');
+        const exportBtn = document.getElementById('export-btn');
+        const methodModal = document.getElementById('method-modal');
+        const modalTitle = document.getElementById('modal-title');
+        const modalCategory = document.getElementById('modal-category');
+        const modalDescription = document.getElementById('modal-description');
+        const modalAttackType = document.getElementById('modal-attack-type');
+        const modalSeverity = document.getElementById('modal-severity');
+        const modalMitigation = document.getElementById('modal-mitigation');
+        const modalReferences = document.getElementById('modal-references');
+        const modalCloseBtn = document.getElementById('modal-close-btn');
+        const closeModal = document.getElementById('close-modal');
+        const chartBar = document.getElementById('chart-bar');
+        const chartPie = document.getElementById('chart-pie');
+        const chartDoughnut = document.getElementById('chart-doughnut');
+
+        // Chart variables
+        let methodsChart;
+        let currentChartType = 'bar';
+
+        // Initialize the app
+        function init() {
+            // Calculate stats
+            calculateStats();
+            
+            // Populate category filter
+            populateCategoryFilter();
+            
+            // Render all methods
+            renderMethods(securityData.categories.flatMap(c => c.methods));
+            
+            // Initialize chart
+            initChart();
+            
+            // Set up event listeners
+            setupEventListeners();
+            
+            // Check for saved theme preference
+            checkThemePreference();
+        }
+
+        // Calculate statistics
+        function calculateStats() {
+            const allMethods = securityData.categories.flatMap(c => c.methods);
+            totalMethods.textContent = allMethods.length;
+            totalCategories.textContent = securityData.categories.length;
+            
+            // Find most common mitigation
+            const mitigationCounts = {};
+            allMethods.forEach(method => {
+                method.mitigation.forEach(mit => {
+                    mitigationCounts[mit] = (mitigationCounts[mit] || 0) + 1;
+                });
+            });
+            
+            const mostCommon = Object.entries(mitigationCounts).sort((a, b) => b[1] - a[1])[0];
+            commonMitigation.textContent = mostCommon ? mostCommon[0] : '-';
+        }
+
+        // Populate category filter dropdown
+        function populateCategoryFilter() {
+            securityData.categories.forEach(category => {
+                const option = document.createElement('option');
+                option.value = category.name;
+                option.textContent = category.name;
+                categoryFilter.appendChild(option);
+            });
+        }
+
+        // Render methods to the UI
+        function renderMethods(methods, searchTerm = '') {
+            methodsContainer.innerHTML = '';
+            
+            if (methods.length === 0) {
+                noResults.classList.remove('hidden');
+                filteredCount.classList.add('hidden');
+                return;
+            }
+            
+            noResults.classList.add('hidden');
+            filteredCount.classList.remove('hidden');
+            
+            shownCount.textContent = methods.length;
+            totalCount.textContent = securityData.categories.flatMap(c => c.methods).length;
+            
+            methods.forEach(method => {
+                const category = securityData.categories.find(c => 
+                    c.methods.some(m => m.name === method.name)
+                ).name;
+                
+                const methodCard = document.createElement('div');
+                methodCard.className = 'bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 method-card transition-all duration-200 cursor-pointer hover:border-blue-500 border border-transparent';
+                methodCard.innerHTML = `
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">${highlightSearchTerm(method.name, searchTerm)}</h3>
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+                            ${category}
+                        </span>
+                    </div>
+                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">${method.description}</p>
+                    <div class="flex flex-wrap gap-2 mb-4">
+                        ${method.attackType.map(type => `
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
+                                ${type}
+                            </span>
+                        `).join('')}
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getSeverityClass(method.severity)}">
+                            ${method.severity}
+                        </div>
+                        <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm font-medium">
+                            View details <i class="fas fa-arrow-right ml-1"></i>
+                        </button>
+                    </div>
+                `;
+                
+                methodCard.addEventListener('click', () => openMethodModal(method, category));
+                methodsContainer.appendChild(methodCard);
+            });
+        }
+
+        // Highlight search term in text
+        function highlightSearchTerm(text, term) {
+            if (!term) return text;
+            
+            const regex = new RegExp(term, 'gi');
+            return text.replace(regex, match => `<span class="search-highlight">${match}</span>`);
+        }
+
+        // Get severity CSS class
+        function getSeverityClass(severity) {
+            const classes = {
+                'Critical': 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200',
+                'High': 'bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200',
+                'Medium': 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
+                'Low': 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+            };
+            return classes[severity] || 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
+        }
+
+        // Filter methods based on search and filters
+        function filterMethods() {
+            const searchTerm = searchInput.value.toLowerCase();
+            const category = categoryFilter.value;
+            
+            // Get all methods
+            let methods = securityData.categories.flatMap(c => 
+                c.methods.map(m => ({ ...m, category: c.name }))
+            );
+            
+            // Apply category filter
+            if (category !== 'all') {
+                methods = methods.filter(m => m.category === category);
+            }
+            
+            // Apply search term filter
+            if (searchTerm) {
+                methods = methods.filter(m => 
+                    m.name.toLowerCase().includes(searchTerm) || 
+                    m.description.toLowerCase().includes(searchTerm) ||
+                    m.category.toLowerCase().includes(searchTerm) ||
+                    m.attackType.some(t => t.toLowerCase().includes(searchTerm)) ||
+                    m.mitigation.some(m => m.toLowerCase().includes(searchTerm))
+                );
+            }
+            
+            // Apply advanced filters if visible
+            if (!advancedFilters.classList.contains('hidden')) {
+                // Attack type filters
+                const attackWeb = document.getElementById('attack-web').checked;
+                const attackNetwork = document.getElementById('attack-network').checked;
+                const attackSystem = document.getElementById('attack-system').checked;
+                
+                if (attackWeb || attackNetwork || attackSystem) {
+                    const attackFilters = [];
+                    if (attackWeb) attackFilters.push('Web');
+                    if (attackNetwork) attackFilters.push('Network');
+                    if (attackSystem) attackFilters.push('System');
+                    
+                    methods = methods.filter(m => 
+                        m.attackType.some(t => attackFilters.includes(t))
+                    );
+                }
+                
+                // Mitigation filters
+                const mitigationEncryption = document.getElementById('mitigation-encryption').checked;
+                const mitigationValidation = document.getElementById('mitigation-validation').checked;
+                const mitigationMonitoring = document.getElementById('mitigation-monitoring').checked;
+                
+                if (mitigationEncryption || mitigationValidation || mitigationMonitoring) {
+                    const mitigationFilters = [];
+                    if (mitigationEncryption) mitigationFilters.push('Encryption');
+                    if (mitigationValidation) mitigationFilters.push('Validation');
+                    if (mitigationMonitoring) mitigationFilters.push('Monitoring');
+                    
+                    methods = methods.filter(m => 
+                        m.mitigation.some(mit => 
+                            mitigationFilters.some(filter => mit.includes(filter))
+                        )
+                    );
+                }
+                
+                // Severity filters
+                const severityHigh = document.getElementById('severity-high').checked;
+                const severityMedium = document.getElementById('severity-medium').checked;
+                const severityLow = document.getElementById('severity-low').checked;
+                
+                if (severityHigh || severityMedium || severityLow) {
+                    const severityFilters = [];
+                    if (severityHigh) severityFilters.push('High', 'Critical');
+                    if (severityMedium) severityFilters.push('Medium');
+                    if (severityLow) severityFilters.push('Low');
+                    
+                    methods = methods.filter(m => severityFilters.includes(m.severity));
+                }
+            }
+            
+            // Render filtered methods
+            renderMethods(methods, searchTerm);
+            
+            // Update chart
+            updateChart(methods);
+        }
+
+        // Initialize chart
+        function initChart() {
+            const ctx = document.getElementById('methods-chart').getContext('2d');
+            
+            // Get initial data
+            const allMethods = securityData.categories.flatMap(c => c.methods);
+            const chartData = prepareChartData(allMethods);
+            
+            methodsChart = new Chart(ctx, {
+                type: currentChartType,
+                data: chartData,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                            }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `${context.label}: ${context.raw} methods`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                            },
+                            grid: {
+                                color: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                            },
+                            grid: {
+                                color: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        // Prepare chart data
+        function prepareChartData(methods) {
+            // Group by category
+            const categoryCounts = {};
+            securityData.categories.forEach(category => {
+                const count = methods.filter(m => 
+                    securityData.categories.find(c => 
+                        c.methods.some(cm => cm.name === m.name)
+                    )?.name === category.name
+                ).length;
+                
+                if (count > 0) {
+                    categoryCounts[category.name] = count;
+                }
+            });
+            
+            // Group by severity
+            const severityCounts = {};
+            const severities = ['Critical', 'High', 'Medium', 'Low'];
+            severities.forEach(severity => {
+                const count = methods.filter(m => m.severity === severity).length;
+                if (count > 0) {
+                    severityCounts[severity] = count;
+                }
+            });
+            
+            // Determine which grouping to use based on current filter state
+            let labels, data, backgroundColor, borderColor;
+            
+            if (categoryFilter.value === 'all' || Object.keys(categoryCounts).length > 1) {
+                // Use category grouping
+                labels = Object.keys(categoryCounts);
+                data = Object.values(categoryCounts);
+                
+                // Generate colors based on category
+                backgroundColor = [
+                    'rgba(59, 130, 246, 0.7)',  // XSS - blue
+                    'rgba(239, 68, 68, 0.7)',   // DDoS - red
+                    'rgba(16, 185, 129, 0.7)', // TLS - green
+                    'rgba(245, 158, 11, 0.7)', // Authentication - yellow
+                    'rgba(139, 92, 246, 0.7)'  // Injection - purple
+                ].slice(0, labels.length);
+                
+                borderColor = backgroundColor.map(c => c.replace('0.7', '1'));
+            } else {
+                // Use severity grouping
+                labels = Object.keys(severityCounts);
+                data = Object.values(severityCounts);
+                
+                // Generate colors based on severity
+                backgroundColor = labels.map(label => {
+                    switch(label) {
+                        case 'Critical': return 'rgba(239, 68, 68, 0.7)'; // red
+                        case 'High': return 'rgba(245, 158, 11, 0.7)';    // yellow
+                        case 'Medium': return 'rgba(59, 130, 246, 0.7)';  // blue
+                        case 'Low': return 'rgba(16, 185, 129, 0.7)';     // green
+                        default: return 'rgba(156, 163, 175, 0.7)';       // gray
+                    }
+                });
+                
+                borderColor = backgroundColor.map(c => c.replace('0.7', '1'));
+            }
+            
+            return {
+                labels: labels,
+                datasets: [{
+                    label: 'Number of Methods',
+                    data: data,
+                    backgroundColor: backgroundColor,
+                    borderColor: borderColor,
+                    borderWidth: 1
+                }]
+            };
+        }
+
+        // Update chart with filtered data
+        function updateChart(methods) {
+            const chartData = prepareChartData(methods);
+            
+            // Change chart type if needed
+            if (methodsChart.config.type !== currentChartType) {
+                methodsChart.destroy();
+                const ctx = document.getElementById('methods-chart').getContext('2d');
+                methodsChart = new Chart(ctx, {
+                    type: currentChartType,
+                    data: chartData,
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'top',
+                                labels: {
+                                    color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                                }
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context) {
+                                        return `${context.label}: ${context.raw} methods`;
+                                    }
+                                }
+                            }
+                        },
+                        scales: currentChartType === 'bar' ? {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                                },
+                                grid: {
+                                    color: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                                }
+                            },
+                            x: {
+                                ticks: {
+                                    color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#333'
+                                },
+                                grid: {
+                                    color: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+                                }
+                            }
+                        } : undefined
+                    }
+                });
+            } else {
+                methodsChart.data = chartData;
+                methodsChart.update();
+            }
+        }
+
+        // Open method details modal
+        function openMethodModal(method, category) {
+            modalTitle.textContent = method.name;
+            modalCategory.textContent = category;
+            modalDescription.textContent = method.description;
+            
+            // Clear previous content
+            modalAttackType.innerHTML = '';
+            modalMitigation.innerHTML = '';
+            modalReferences.innerHTML = '';
+            
+            // Add attack types
+            method.attackType.forEach(type => {
+                const badge = document.createElement('span');
+                badge.className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
+                badge.textContent = type;
+                modalAttackType.appendChild(badge);
+            });
+            
+            // Add severity
+            modalSeverity.className = `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getSeverityClass(method.severity)}`;
+            modalSeverity.textContent = method.severity;
+            
+            // Add mitigations
+            method.mitigation.forEach(mit => {
+                const badge = document.createElement('span');
+                badge.className = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200';
+                badge.textContent = mit;
+                modalMitigation.appendChild(badge);
+            });
+            
+            // Add references
+            method.references.forEach(ref => {
+                const refLink = document.createElement('a');
+                refLink.href = ref.url;
+                refLink.target = '_blank';
+                refLink.rel = 'noopener noreferrer';
+                refLink.className = 'flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm';
+                refLink.innerHTML = `<i class="fas fa-external-link-alt mr-2"></i> ${ref.text}`;
+                
+                const refItem = document.createElement('div');
+                refItem.className = 'flex items-center';
+                refItem.appendChild(refLink);
+                
+                modalReferences.appendChild(refItem);
+            });
+            
+            // Show modal
+            methodModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+
+        // Close method details modal
+        function closeMethodModal() {
+            methodModal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+
+        // Check for saved theme preference
+        function checkThemePreference() {
+            const savedTheme = localStorage.getItem('theme') || 
+                              (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            
+            if (savedTheme === 'dark') {
+                document.documentElement.classList.add('dark');
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            } else {
+                document.documentElement.classList.remove('dark');
+                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+            }
+        }
+
+        // Toggle dark/light theme
+        function toggleTheme() {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            }
+            
+            // Update chart colors
+            if (methodsChart) {
+                methodsChart.update();
+            }
+        }
+
+        // Export data as JSON
+        function exportData() {
+            const data = {
+                categories: securityData.categories,
+                timestamp: new Date().toISOString()
+            };
+            
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'it-security-methods.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        // Set up event listeners
+        function setupEventListeners() {
+            // Search and filter events
+            searchInput.addEventListener('input', filterMethods);
+            categoryFilter.addEventListener('change', filterMethods);
+            
+            // Advanced filters toggle
+            advancedFiltersToggle.addEventListener('click', () => {
+                advancedFilters.classList.toggle('hidden');
+                advancedFiltersArrow.classList.toggle('fa-chevron-down');
+                advancedFiltersArrow.classList.toggle('fa-chevron-up');
+                filterMethods();
+            });
+            
+            // Advanced filter checkboxes
+            document.querySelectorAll('#advanced-filters input[type="checkbox"]').forEach(checkbox => {
+                checkbox.addEventListener('change', filterMethods);
+            });
+            
+            // Theme toggle
+            themeToggle.addEventListener('click', toggleTheme);
+            
+            // Export button
+            exportBtn.addEventListener('click', exportData);
+            
+            // Modal close events
+            modalCloseBtn.addEventListener('click', closeMethodModal);
+            closeModal.addEventListener('click', closeMethodModal);
+            
+            // Close modal when clicking outside
+            methodModal.addEventListener('click', (e) => {
+                if (e.target === methodModal) {
+                    closeMethodModal();
+                }
+            });
+            
+            // Chart type buttons
+            chartBar.addEventListener('click', () => {
+                currentChartType = 'bar';
+                chartBar.className = 'px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md';
+                chartPie.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                chartDoughnut.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                updateChart(getFilteredMethods());
+            });
+            
+            chartPie.addEventListener('click', () => {
+                currentChartType = 'pie';
+                chartBar.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                chartPie.className = 'px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md';
+                chartDoughnut.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                updateChart(getFilteredMethods());
+            });
+            
+            chartDoughnut.addEventListener('click', () => {
+                currentChartType = 'doughnut';
+                chartBar.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                chartPie.className = 'px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-md';
+                chartDoughnut.className = 'px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md';
+                updateChart(getFilteredMethods());
+            });
+        }
+
+        // Get currently filtered methods
+        function getFilteredMethods() {
+            const searchTerm = searchInput.value.toLowerCase();
+            const category = categoryFilter.value;
+            
+            let methods = securityData.categories.flatMap(c => 
+                c.methods.map(m => ({ ...m, category: c.name }))
+            );
+            
+            if (category !== 'all') {
+                methods = methods.filter(m => m.category === category);
+            }
+            
+            if (searchTerm) {
+                methods = methods.filter(m => 
+                    m.name.toLowerCase().includes(searchTerm) || 
+                    m.description.toLowerCase().includes(searchTerm) ||
+                    m.category.toLowerCase().includes(searchTerm) ||
+                    m.attackType.some(t => t.toLowerCase().includes(searchTerm)) ||
+                    m.mitigation.some(m => m.toLowerCase().includes(searchTerm))
+                );
+            }
+            
+            return methods;
+        }
+
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', init);
+    </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=CYRAGE/itsecdash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>