pages redirection are not working make it working give mock datas and create admin login and password for it to see admin page
a882b64
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Panel | CyberGuardian</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-blue-600 text-white shadow-lg"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="mr-2"></i> | |
| <span class="font-semibold text-xl">CyberGuardian</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="/admin" class="px-3 py-2 bg-blue-700 rounded-md font-medium">Admin Panel</a> | |
| <a href="/logout" class="px-3 py-2 hover:bg-blue-700 rounded-md flex items-center"> | |
| <i data-feather="log-out" class="mr-1"></i> Logout | |
| </a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button class="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <div class="mb-8 flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-gray-800">Admin Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <a href="/export" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> Export Data | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <h2 class="text-xl font-semibold">All Analysis Results</h2> | |
| <div class="mt-4 md:mt-0 flex space-x-2"> | |
| <select id="categoryFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">All Categories</option> | |
| <option value="Normal">Normal</option> | |
| <option value="Offensive">Offensive</option> | |
| <option value="Hate">Hate</option> | |
| </select> | |
| <input type="text" id="searchInput" placeholder="Search..." class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table id="resultsTable" class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Text</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confidence</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">admin</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900 max-w-xs truncate">This is a test message</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Normal | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 98% | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-06-15 14:30:22 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">user123</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900 max-w-xs truncate">I hate this stupid website!</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| Offensive | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 87% | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-06-14 09:15:45 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">user456</div> | |
| </td> | |
| <td class="px-6 py-4"> | |
| <div class="text-sm text-gray-900 max-w-xs truncate">People like you shouldn't be allowed here</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| Hate | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 92% | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-06-13 16:22:10 | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8"> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Statistics</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Users</p> | |
| <p class="text-2xl font-bold text-blue-600"> | |
| 127 | |
| </p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Analyses</p> | |
| <p class="text-2xl font-bold text-blue-600"> | |
| 642 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Content Distribution</h3> | |
| <div class="h-64" id="chart"></div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Recent Flagged Content</h3> | |
| <div class="space-y-3"> | |
| <div class="border-l-4 border-red-500 pl-3"> | |
| <p class="text-sm font-medium">user789</p> | |
| <p class="text-sm text-gray-600 truncate">You're so stupid I can't believe it!</p> | |
| <p class="text-xs text-gray-500">2023-06-15 10:45:33</p> | |
| </div> | |
| <div class="border-l-4 border-red-500 pl-3"> | |
| <p class="text-sm font-medium">user101</p> | |
| <p class="text-sm text-gray-600 truncate">Go back to your country!</p> | |
| <p class="text-xs text-gray-500">2023-06-14 17:22:18</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-100 border-t mt-12"> | |
| <div class="max-w-6xl mx-auto px-4 py-8"> | |
| <p class="text-base text-gray-500"> | |
| © 2023 CyberGuardian. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| feather.replace(); | |
| $(document).ready(function() { | |
| $('#resultsTable').DataTable({ | |
| responsive: true | |
| }); | |
| $('#categoryFilter').change(function() { | |
| var table = $('#resultsTable').DataTable(); | |
| table.column(2).search($(this).val()).draw(); | |
| }); | |
| $('#searchInput').keyup(function() { | |
| var table = $('#resultsTable').DataTable(); | |
| table.search($(this).val()).draw(); | |
| }); | |
| // Chart.js for content distribution | |
| var ctx = document.getElementById('chart').getContext('2d'); | |
| var chart = new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Normal', 'Offensive', 'Hate'], | |
| datasets: [{ | |
| data: [ | |
| 512, | |
| 87, | |
| 43 | |
| ], | |
| backgroundColor: [ | |
| '#10B981', | |
| '#EF4444', | |
| '#B91C1C' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |