pages/database.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Main meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page title displayed browser tab -->
    <title>DART Project - Database</title>
    <!-- Main stylesheets -->
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/css/database.css">
    <link rel="stylesheet" href="../assets/css/tailwind.min.css">
    <link rel="stylesheet" href="../assets/css/context-menu.css">
    <!-- Favicon for all browsers -->
    <link rel="icon" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/favicons/favicon.ico" type="image/x-icon">
    <!-- Apple Touch Icons (for iOS home screen bookmarks) -->
    <link rel="apple-touch-icon" sizes="57x57" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/apple/apple-icon-180x180.png">
    <!-- Favicons for different devices -->
    <link rel="icon" type="image/png" sizes="192x192" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/android/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/favicons/favicon-16x16.png">
    <!-- Web Manifest -->
    <link rel="manifest" href="../site-data/site.manifest">
    <!-- Windows-specific tiles (for pinned sites in Windows Start menu) -->
    <meta name="msapplication-TileColor" content="#4338ca">
    <meta name="msapplication-TileImage" content="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/microsoft/ms-icon-144x144.png">
    <!-- Defines the color of the browser UI elements -->
    <meta name="theme-color" content="#4338ca">
    <!-- Open Graph Meta Tags (for social media sharing, mainly Facebook) -->
    <meta property="og:title" content="DART Project - Database">
    <meta property="og:description" content="Comprehensive database view of all malicious account cases with advanced filtering capabilities.">
    <meta property="og:image" content="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/social-share/The-DART-Project.png">
    <meta property="og:url" content="https://thedartproject.github.io/pages/database.html">
    <meta property="og:type" content="website">
    <!-- Twitter Card Meta Tags (for better sharing on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="DART Project - Database">
    <meta name="twitter:description" content="Comprehensive database view of all malicious account cases with advanced filtering capabilities.">
    <meta name="twitter:image" content="https://raw.githubusercontent.com/TheDARTProject/Website-Images/refs/heads/main/social-share/The-DART-Project.png">
  </head>
  <body class="bg-gray-100 min-h-screen texture">
    <!-- Sidebar -->
    <div id="sidebar" class="sidebar bg-indigo-700">
      <div class="sidebar-header">
        <button id="closeSidebar" class="close-sidebar bg-indigo-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <nav class="sidebar-nav bg-indigo-700">
        <!-- Monitoring -->
        <h3 class="text-xs font-semibold text-indigo-200 uppercase px-4 pt-4 pb-2">Monitoring</h3>
        <ul class="mb-4">
          <li>
            <a href="dashboard.html" class="sidebar-link hover:bg-indigo-600">Dashboard View</a>
          </li>
          <li>
            <a href="database.html" class="sidebar-link hover:bg-indigo-600">Threat Database</a>
          </li>
          <li>
            <a href="domain-analytics.html" class="sidebar-link hover:bg-indigo-600">Domain Analytics</a>
          </li>
          <li>
            <a href="threat-map.html" class="sidebar-link hover:bg-indigo-600">Global Threat Map</a>
          </li>
          <li>
            <a href="intelligence.html" class="sidebar-link hover:bg-indigo-600">Intelligence Reports</a>
          </li>
          <li>
            <a href="monitor-app.html" class="sidebar-link hover:bg-indigo-600">Official Discord App</a>
          </li>
        </ul>
        <!-- Resources -->
        <h3 class="text-xs font-semibold text-indigo-200 uppercase px-4 pt-4 pb-2">Resources</h3>
        <ul class="mb-4">
          <li>
            <a href="info.html" class="sidebar-link hover:bg-indigo-600">Information Center</a>
          </li>
          <li>
            <a href="resources.html" class="sidebar-link hover:bg-indigo-600">Resource Center</a>
          </li>
          <li>
            <a href="scam-awareness.html" class="sidebar-link hover:bg-indigo-600">Scam Awareness</a>
          </li>
          <li>
            <a href="faq.html" class="sidebar-link hover:bg-indigo-600">Frequent Questions</a>
          </li>
          <li>
            <a href="changelog.html" class="sidebar-link hover:bg-indigo-600">Project Changelog</a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Sidebar Toggle Button -->
    <button id="sidebarToggle" class="sidebar-toggle bg-indigo-700">
      <svg xmlns="http://www.w3.org/2000/svg" class=" h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
    <!-- Header -->
    <nav class="bg-indigo-700 text-white shadow-md">
      <div class="header-content">
        <div class="container mx-auto flex justify-between items-center">
          <!-- Header Title -->
          <div>
            <a href="../index.html" class="block">
              <h1 class="text-2xl font-bold flex items-center"> DART Project <span class="text-amber-400 text-xs ml-2 align-top">BETA</span>
              </h1>
              <p class="text-sm text-gray-200">Tracking Threats, Protecting Communities</p>
            </a>
          </div>
          <!-- Header Buttons -->
          <div class="flex items-center space-x-2">
            <!-- Theme Button -->
            <button id="darkModeToggle" class="p-2 rounded hover:bg-indigo-600" title="Theme Toggle">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
              </svg>
            </button>
            <!-- Info Button -->
            <button id="infoButton" class="p-2 rounded hover:bg-indigo-600" title="Info Page">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
            </button>
            <!-- FAQ Button -->
            <button id="faqButton" class="p-2 rounded hover:bg-indigo-600" title="FAQ Page">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>
    <!-- Announcement Bar -->
    <div id="announcement-bar" class="announcement-bar hidden">
      <div class="container mx-auto py-3 px-4">
        <div class="flex items-center justify-between">
          <!-- Announcement Message -->
          <div class="announcement-content">
            <p id="announcement-text" class="text-sm md:text-base font-medium"></p>
          </div>
          <!-- Close Announcement Button -->
          <button id="closeAnnouncement" class="ml-4 text-white opacity-70 hover:opacity-100 transition-opacity">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- Breadcrumbs -->
    <div class="breadcrumb-container">
      <div class="container mx-auto px-4 py-2">
        <nav class="flex" aria-label="Breadcrumb">
          <ol class="inline-flex items-center space-x-2">
            <!-- Home Breadcrumb -->
            <li class="inline-flex items-center">
              <a href="../index.html" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                </svg> Home </a>
            </li>
            <!-- Dashboard Breadcrumb -->
            <li class="inline-flex items-center">
              <span class="text-gray-400 mx-2">></span>
              <span class="text-sm font-medium text-gray-500">Database</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8">
      <!-- Loader -->
      <div id="loading" class="text-center">
        <div class="loader"></div>
        <p class="text-gray-600">Loading data...</p>
      </div>
      <div id="databaseContent" class="hidden">
        <!-- Info Box -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-6">
          <h2 class="text-3xl font-bold text-indigo-700 mb-6 text-center">DART Project Database</h2>
          <p class="text-gray-600 mb-4 text-center">This database provides a complete view of all malicious account cases with advanced filtering capabilities.</p>
          <p class="text-gray-600 mb-4 text-center"> The DART Project Database serves as the central repository for tracking malicious Discord accounts, documenting attack methods, threat origins, and mitigation status. Each case includes detailed forensic information including attack vectors, malicious URLs, account metadata, and threat actor patterns. Use the interactive filters to analyze trends, identify emerging threats, or track specific cases. All data is updated in real-time from our monitoring network. </p>
          <div class="counter-container mt-4">
            <div class="counter-item bg-indigo-100 text-indigo-800 hover:bg-indigo-200">
              <span class="counter-value" id="totalCasesCount">0</span>
              <span class="counter-label">Total Cases</span>
            </div>
            <div class="counter-item bg-green-100 text-green-800 hover:bg-green-200">
              <span class="counter-value" id="activeUrlsCount">0</span>
              <span class="counter-label">Active URLs</span>
            </div>
            <div class="counter-item bg-red-100 text-red-800 hover:bg-red-200">
              <span class="counter-value" id="criticalCasesCount">0</span>
              <span class="counter-label">Critical Cases</span>
            </div>
          </div>
        </div>
        <!-- Filters Section -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
            <!-- Search Input -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Search</label>
              <input id="searchInput" type="text" class="w-full border border-gray-300 rounded p-2" placeholder="Search across all fields...">
            </div>
            <!-- Date Range Filter (replaces Case Number) -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
              <div class="flex gap-2">
                <input id="dateFrom" type="date" class="w-1/2 border border-gray-300 rounded p-2">
                <input id="dateTo" type="date" class="w-1/2 border border-gray-300 rounded p-2">
              </div>
            </div>
            <!-- Status Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Account Status</label>
              <select id="statusFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Statuses</option>
              </select>
            </div>
            <!-- URL Status Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">URL Status</label>
              <select id="urlStatusFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Statuses</option>
              </select>
            </div>
            <!-- Attack Method Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Attack Method</label>
              <select id="attackMethodFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Methods</option>
              </select>
            </div>
            <!-- Attack Surface Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Attack Surface</label>
              <select id="attackSurfaceFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Surfaces</option>
              </select>
            </div>
            <!-- Region Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
              <select id="regionFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Regions</option>
              </select>
            </div>
            <!-- Account Type Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Account Type</label>
              <select id="accountTypeFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Types</option>
              </select>
            </div>
            <!-- Server Filter -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Found On Server</label>
              <select id="serverFilter" class="w-full border border-gray-300 rounded p-2">
                <option value="">All Servers</option>
              </select>
            </div>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Reset Button -->
            <div class="flex items-end">
              <button id="resetFilters" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded w-full transition-colors"> Reset All Filters </button>
            </div>
          </div>
        </div>
        <!-- Data Table -->
        <div class="bg-white p-6 rounded-lg shadow">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold">Case Records</h2>
            <div class="flex gap-2">
              <button id="exportCSV" class="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded">Export CSV</button>
              <button id="refreshData" class="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1 rounded">Refresh Data</button>
            </div>
          </div>
          <div class="table-container">
            <table id="dataTable" class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Case #</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Found On</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Status</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attack Method</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attack Surface</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL Status</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody id="tableBody" class="bg-white divide-y divide-gray-200">
                <!-- Table rows will be inserted here -->
              </tbody>
            </table>
          </div>
          <div class="mt-4 flex flex-col sm:flex-row justify-between items-center">
            <span id="tableInfo" class="text-sm text-gray-600 mb-2 sm:mb-0">Showing 0 of 0 cases</span>
            <div class="pagination-controls flex gap-2">
              <button id="firstPage" class="px-3 py-1 border rounded">First</button>
              <button id="prevPage" class="px-3 py-1 border rounded">Previous</button>
              <span id="pageInfo" class="px-3 py-1">Page 1</span>
              <button id="nextPage" class="px-3 py-1 border rounded">Next</button>
              <button id="lastPage" class="px-3 py-1 border rounded">Last</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal for Detailed View -->
    <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
      <div class="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-4 border-b">
          <div class="flex justify-between items-center">
            <h2 class="text-lg font-semibold">Case Details</h2>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div id="modalContent" class="p-4">
          <!-- Modal content will be inserted here -->
        </div>
      </div>
    </div>
    <!-- Project Links Section -->
    <div class="container mx-auto px-4 py-8">
      <div class="bg-white p-6 rounded-lg shadow-lg text-center">
        <!-- Section Title & Description -->
        <h2 class="text-3xl font-bold text-indigo-700 mb-4">Important Links</h2>
        <p class="text-lg text-gray-600 mb-6">Key resources and guidelines below</p>
        <!-- Buttons -->
        <div class="flex flex-wrap justify-center gap-4">
          <!-- License Button -->
          <a href="../legal/license.html" class="bg-indigo-700 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition-colors shadow-md hover:shadow-lg w-full sm:w-auto"> LICENSE </a>
          <!-- Code of Conduct Button -->
          <a href="../legal/code-of-conduct.html" class="bg-indigo-700 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition-colors shadow-md hover:shadow-lg w-full sm:w-auto"> CODE OF CONDUCT </a>
          <!-- Contributing Button -->
          <a href="../legal/contributing.html" class="bg-indigo-700 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition-colors shadow-md hover:shadow-lg w-full sm:w-auto"> CONTRIBUTIONS </a>
          <!-- Security Button -->
          <a href="../legal/security.html" class="bg-indigo-700 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-semibold transition-colors shadow-md hover:shadow-lg w-full sm:w-auto"> SECURITY </a>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <footer class="bg-indigo-800 text-white py-8 shadow-lg">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Footer About -->
          <div class="space-y-4">
            <div class="flex items-center space-x-2">
              <img id="footer-logo" src="https://raw.githubusercontent.com/TheDARTProject/Website-Images/main/favicons/icon-144x144.png" alt="Icon" class="h-8 w-8 text-indigo-300">
              <h3 class="text-xl font-bold">The DART Project</h3>
            </div>
            <p class="text-indigo-100">Tracking Threats, Protecting Communities</p>
            <p class="text-sm text-indigo-200">© 2025 SINEWAVE Development. All rights reserved.</p>
          </div>
          <!-- Footer Links -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <h4 class="text-lg font-semibold mb-3 text-indigo-300">Resources</h4>
              <ul class="space-y-2">
                <li>
                  <a href="dashboard.html" class="text-indigo-100 hover:text-white transition">Dashboard View</a>
                </li>
                <li>
                  <a href="monitor-app.html" class="text-indigo-100 hover:text-white transition">Official Monitor App</a>
                </li>
                <li>
                  <a href="threat-map.html" class="text-indigo-100 hover:text-white transition">Global Threat Map</a>
                </li>
                <li>
                  <a href="domain-analytics.html" class="text-indigo-100 hover:text-white transition">Domains Analysis</a>
                </li>
              </ul>
            </div>
            <div>
              <h4 class="text-lg font-semibold mb-3 text-indigo-300">Legal</h4>
              <ul class="space-y-2">
                <li>
                  <a href="../legal/privacy-policy.html" class="text-indigo-100 hover:text-white transition">Privacy Policy</a>
                </li>
                <li>
                  <a href="../legal/terms-of-service.html" class="text-indigo-100 hover:text-white transition">Terms of Service</a>
                </li>
                <li>
                  <a href="../legal/security.html" class="text-indigo-100 hover:text-white transition">Project Security</a>
                </li>
                <li>
                  <a href="../legal/code-of-conduct.html" class="text-indigo-100 hover:text-white transition">Code of Conduct</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- Footer Social -->
          <div>
            <h4 class="text-lg font-semibold mb-3 text-indigo-300">Connect With Us</h4>
            <div class="flex space-x-4 mb-4">
              <a href="https://github.com/TheDARTProject" class="bg-indigo-700 hover:bg-indigo-600 text-white p-2 rounded-full transition" aria-label="GitHub">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
              </a>
              <a href="https://discord.gg/2nHHHBWNDw" class="bg-indigo-700 hover:bg-indigo-600 text-white p-2 rounded-full transition" aria-label="Discord">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3847-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286z" />
                </svg>
              </a>
              <a href="https://ko-fi.com/thatsinewave" class="bg-indigo-700 hover:bg-indigo-600 text-white p-2 rounded-full transition" aria-label="Support Us">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </a>
              <a href="status.html" class="bg-indigo-700 hover:bg-indigo-600 text-white p-2 rounded-full transition" aria-label="Support Us">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm0 2.2l7 3.1v5.7c0 4.4-2.8 8.8-7 10-4.2-1.2-7-5.6-7-10V6.3l7-3.1zm-1 5.3v4h2V8.5h-2zm0 6v2h2v-2h-2z" />
                </svg>
              </a>
            </div>
            <div class="bg-indigo-900/30 p-4 rounded-lg">
              <p class="text-sm text-indigo-100">Have questions or feedback?</p>
              <a href="https://docs.google.com/forms/d/e/1FAIpQLSesh6fzwdKBD-lf-h3nbHJ_1bP92EEbPVHW_MUQrgjuJDRU-w/viewform?usp=header" class="text-white font-medium hover:underline">Contact us</a>
            </div>
          </div>
        </div>
        <div class="border-t border-indigo-700/50 mt-8 pt-6 text-center text-sm text-indigo-300">
          <p>The Discord Analytics for Risks & Threats Project - Protecting communities since 2024</p>
        </div>
      </div>
    </footer>
    <!-- Scripts -->
    <!-- Database Script -->
    <script src="../assets/js/database.js" type="module"></script>
    <!-- Context Menu Script -->
    <script src="../assets/js/context-menu.js" type="module"></script>
    <!-- Main Script -->
    <script src="../assets/js/main.js" type="module"></script>
    <!-- Announcements Script -->
    <script src="../assets/js/announcements.js" type="module"></script>
    <!-- Utilities Script -->
    <script src="../assets/js/utils.js" type="module"></script>
    <!-- Local Day.js Copy -->
    <script src="../assets/js/dayjs.min.js"></script>
  </body>
</html>