Hugging Face's logo

Spaces:
hts-ai
/
janus-scanner-pro
Running

App Files Community
hts-ai commited on
Commit
cdf1999
·
verified ·
1 Parent(s): eb1b2ee

Rapports

Browse files

Paramètres. ne fonctionne pas

Files changed (4) hide show
  1. components/navbar.js +3 -4
  2. index.html +4 -4
  3. pages/reports.html +190 -0
  4. pages/settings.html +280 -0
components/navbar.js CHANGED
@@ -85,13 +85,12 @@ class CustomNavbar extends HTMLElement {
85
  </svg>
86
  Janus Scanner Pro
87
  </a>
88
-
89
  <ul class="nav-links">
90
  <li><a href="/" data-page="dashboard">Dashboard</a></li>
91
- <li><a href="/pages/reports.html" data-page="reports">Reports</a></li>
92
- <li><a href="/pages/settings.html" data-page="settings">Settings</a></li>
93
  </ul>
94
- </nav>
95
  `;
96
 
97
  // Gestion de la route active
 
85
  </svg>
86
  Janus Scanner Pro
87
  </a>
 
88
  <ul class="nav-links">
89
  <li><a href="/" data-page="dashboard">Dashboard</a></li>
90
+ <li><a href="pages/reports.html" data-page="reports">Reports</a></li>
91
+ <li><a href="pages/settings.html" data-page="settings">Settings</a></li>
92
  </ul>
93
+ </nav>
94
  `;
95
 
96
  // Gestion de la route active
index.html CHANGED
@@ -17,11 +17,11 @@
17
  <h1 class="text-xl font-bold">Janus Scanner Pro</h1>
18
  </div>
19
  <nav class="flex space-x-4">
20
- <a href="#" class="hover:text-red-500">Dashboard</a>
21
- <a href="#" class="hover:text-red-500">Reports</a>
22
- <a href="#" class="hover:text-red-500">Settings</a>
23
  </nav>
24
- </header>
25
 
26
  <main class="container mx-auto px-4 py-8">
27
  <section class="text-center mb-12">
 
17
  <h1 class="text-xl font-bold">Janus Scanner Pro</h1>
18
  </div>
19
  <nav class="flex space-x-4">
20
+ <a href="index.html" class="hover:text-red-500">Dashboard</a>
21
+ <a href="pages/reports.html" class="hover:text-red-500">Reports</a>
22
+ <a href="pages/settings.html" class="hover:text-red-500">Settings</a>
23
  </nav>
24
+ </header>
25
 
26
  <main class="container mx-auto px-4 py-8">
27
  <section class="text-center mb-12">
pages/reports.html ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reports - Janus Scanner Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="../style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-white">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-8">
16
+ <section class="mb-8">
17
+ <div class="flex justify-between items-center mb-6">
18
+ <h2 class="text-3xl font-bold">Scan Reports</h2>
19
+ <div class="flex gap-4">
20
+ <input type="text" id="searchReports" placeholder="Search reports..."
21
+ class="bg-gray-800 px-4 py-2 rounded-lg border border-gray-700 focus:border-red-500 focus:outline-none">
22
+ <button id="exportBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center gap-2">
23
+ <i data-feather="download" class="w-4 h-4"></i>
24
+ Export CSV
25
+ </button>
26
+ </div>
27
+ </div>
28
+
29
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
30
+ <table class="w-full">
31
+ <thead class="bg-gray-700">
32
+ <tr>
33
+ <th class="py-3 px-4 text-left">File Name</th>
34
+ <th class="py-3 px-4 text-left">Date</th>
35
+ <th class="py-3 px-4 text-left">Risk Score</th>
36
+ <th class="py-3 px-4 text-left">Anomalies</th>
37
+ <th class="py-3 px-4 text-left">Status</th>
38
+ <th class="py-3 px-4 text-left">Actions</th>
39
+ </tr>
40
+ </thead>
41
+ <tbody id="detailedScanHistory">
42
+ <!-- Reports will be populated here -->
43
+ </tbody>
44
+ </table>
45
+ </div>
46
+ </section>
47
+
48
+ <section id="reportDetails" class="hidden">
49
+ <h3 class="text-2xl font-semibold mb-4">Detailed Report</h3>
50
+ <div class="bg-gray-800 rounded-lg p-6">
51
+ <div id="detailContent"></div>
52
+ </div>
53
+ </section>
54
+ </main>
55
+
56
+ <custom-footer></custom-footer>
57
+
58
+ <script src="../components/navbar.js"></script>
59
+ <script src="../components/footer.js"></script>
60
+ <script>
61
+ // Reports page specific functionality
62
+ document.addEventListener('DOMContentLoaded', function() {
63
+ feather.replace();
64
+
65
+ const detailedScanHistory = document.getElementById('detailedScanHistory');
66
+ const searchReports = document.getElementById('searchReports');
67
+ const exportBtn = document.getElementById('exportBtn');
68
+ const reportDetails = document.getElementById('reportDetails');
69
+ const detailContent = document.getElementById('detailContent');
70
+
71
+ let allReports = JSON.parse(localStorage.getItem('scanHistory')) || [];
72
+
73
+ function renderReports(reports = allReports) {
74
+ if (reports.length === 0) {
75
+ detailedScanHistory.innerHTML = `
76
+ <tr>
77
+ <td colspan="6" class="py-8 px-4 text-center text-gray-500">
78
+ <i data-feather="inbox" class="mx-auto mb-2"></i>
79
+ No reports available. Upload files from the Dashboard.
80
+ </td>
81
+ </tr>
82
+ `;
83
+ } else {
84
+ detailedScanHistory.innerHTML = reports.map((report, index) => `
85
+ <tr class="border-t border-gray-700 hover:bg-gray-700">
86
+ <td class="py-3 px-4 font-medium">${report.fileName}</td>
87
+ <td class="py-3 px-4">${new Date(report.date).toLocaleString()}</td>
88
+ <td class="py-3 px-4">
89
+ <span class="font-bold ${report.riskScore > 70 ? 'text-red-500' : report.riskScore > 40 ? 'text-yellow-500' : 'text-green-500'}">
90
+ ${report.riskScore}%
91
+ </span>
92
+ </td>
93
+ <td class="py-3 px-4">${report.anomalies || 0}</td>
94
+ <td class="py-3 px-4">
95
+ <span class="px-2 py-1 rounded text-xs font-medium ${
96
+ report.riskScore > 70 ? 'bg-red-900 text-red-300' :
97
+ report.riskScore > 40 ? 'bg-yellow-900 text-yellow-300' :
98
+ 'bg-green-900 text-green-300'
99
+ }">
100
+ ${report.status || 'COMPLETED'}
101
+ </span>
102
+ </td>
103
+ <td class="py-3 px-4">
104
+ <button onclick="viewReportDetails(${index})" class="text-red-500 hover:text-red-400">
105
+ <i data-feather="eye" class="w-4 h-4"></i>
106
+ </button>
107
+ </td>
108
+ </tr>
109
+ `).join('');
110
+ }
111
+ feather.replace();
112
+ }
113
+
114
+ // Search functionality
115
+ searchReports.addEventListener('input', function(e) {
116
+ const searchTerm = e.target.value.toLowerCase();
117
+ const filtered = allReports.filter(report =>
118
+ report.fileName.toLowerCase().includes(searchTerm)
119
+ );
120
+ renderReports(filtered);
121
+ });
122
+
123
+ // Export functionality
124
+ exportBtn.addEventListener('click', function() {
125
+ const csv = [
126
+ ['File Name', 'Date', 'Risk Score', 'Anomalies', 'Status'],
127
+ ...allReports.map(r => [
128
+ r.fileName,
129
+ new Date(r.date).toLocaleDateString(),
130
+ r.riskScore,
131
+ r.anomalies || 0,
132
+ r.status || 'COMPLETED'
133
+ ])
134
+ ].map(row => row.join(',')).join('\n');
135
+
136
+ const blob = new Blob([csv], { type: 'text/csv' });
137
+ const url = window.URL.createObjectURL(blob);
138
+ const a = document.createElement('a');
139
+ a.href = url;
140
+ a.download = `janus-reports-${new Date().toISOString().split('T')[0]}.csv`;
141
+ a.click();
142
+ window.URL.revokeObjectURL(url);
143
+ });
144
+
145
+ // View report details
146
+ window.viewReportDetails = function(index) {
147
+ const report = allReports[index];
148
+ if (report) {
149
+ detailContent.innerHTML = `
150
+ <h4 class="text-xl font-semibold mb-4">${report.fileName}</h4>
151
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
152
+ <div>
153
+ <p class="text-gray-400">Date</p>
154
+ <p class="font-medium">${new Date(report.date).toLocaleString()}</p>
155
+ </div>
156
+ <div>
157
+ <p class="text-gray-400">Risk Score</p>
158
+ <p class="font-bold text-2xl ${report.riskScore > 70 ? 'text-red-500' : report.riskScore > 40 ? 'text-yellow-500' : 'text-green-500'}">${report.riskScore}%</p>
159
+ </div>
160
+ <div>
161
+ <p class="text-gray-400">Total Entries</p>
162
+ <p class="font-medium">${report.entries || 'N/A'}</p>
163
+ </div>
164
+ <div>
165
+ <p class="text-gray-400">Anomalies</p>
166
+ <p class="font-medium">${report.anomalies || 0}</p>
167
+ </div>
168
+ </div>
169
+ <div class="mb-4">
170
+ <h5 class="font-semibold mb-2">Analysis Summary</h5>
171
+ <p class="text-gray-300">${report.summary || 'No detailed summary available.'}</p>
172
+ </div>
173
+ <div class="mb-4">
174
+ <h5 class="font-semibold mb-2">Suspicious Transactions</h5>
175
+ ${report.suspiciousTransactions && report.suspiciousTransactions.length > 0
176
+ ? `<ul class="list-disc list-inside text-gray-300">
177
+ ${report.suspiciousTransactions.map(t => `<li>${t.description || t.type}</li>`).join('')}
178
+ </ul>`
179
+ : '<p class="text-gray-400">None detected</p>'}
180
+ </div>
181
+ `;
182
+ reportDetails.classList.remove('hidden');
183
+ }
184
+ };
185
+
186
+ renderReports();
187
+ });
188
+ </script>
189
+ </body>
190
+ </html>
pages/settings.html ADDED
@@ -0,0 +1,280 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Settings - Janus Scanner Pro</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="../style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-900 text-white">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-8">
16
+ <h2 class="text-3xl font-bold mb-8">System Settings</h2>
17
+
18
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
19
+ <!-- Configuration Panel -->
20
+ <div class="lg:col-span-2 space-y-6">
21
+ <!-- API Configuration -->
22
+ <div class="bg-gray-800 rounded-lg p-6">
23
+ <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
24
+ <i data-feather="key" class="w-5 h-5 text-red-500"></i>
25
+ API Configuration
26
+ </h3>
27
+ <div class="space-y-4">
28
+ <div>
29
+ <label class="block text-sm font-medium mb-2">OpenRouter API Key</label>
30
+ <input type="password" id="apiKey" placeholder="sk-or-v1-..."
31
+ class="w-full bg-gray-700 px-4 py-2 rounded border border-gray-600 focus:border-red-500 focus:outline-none">
32
+ <p class="text-xs text-gray-400 mt-1">Stored securely in browser memory</p>
33
+ </div>
34
+ <div>
35
+ <label class="block text-sm font-medium mb-2">Default AI Model</label>
36
+ <select id="defaultModel" class="w-full bg-gray-700 px-4 py-2 rounded border border-gray-600 focus:border-red-500 focus:outline-none">
37
+ <option value="deepseek/deepseek-chat-v3.1:free">DeepSeek Chat v3.1 (Free)</option>
38
+ <option value="google/gemma-3-27b-it:free">Google Gemma 3 (Free)</option>
39
+ <option value="nousresearch/hermes-3-llama-3.1-405b:free">Hermes 3 LLaMA (Free)</option>
40
+ <option value="meituan/longcat-flash-chat:free">LongCat Flash (Fast)</option>
41
+ </select>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Risk Thresholds -->
47
+ <div class="bg-gray-800 rounded-lg p-6">
48
+ <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
49
+ <i data-feather="alert-triangle" class="w-5 h-5 text-red-500"></i>
50
+ Risk Thresholds
51
+ </h3>
52
+ <div class="space-y-4">
53
+ <div>
54
+ <label class="block text-sm font-medium mb-2">High Risk Threshold (%)</label>
55
+ <input type="range" id="highRiskThreshold" min="60" max="100" value="70"
56
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
57
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
58
+ <span>60%</span>
59
+ <span id="highRiskValue">70%</span>
60
+ <span>100%</span>
61
+ </div>
62
+ </div>
63
+ <div>
64
+ <label class="block text-sm font-medium mb-2">Medium Risk Threshold (%)</label>
65
+ <input type="range" id="mediumRiskThreshold" min="30" max="70" value="40"
66
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
67
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
68
+ <span>30%</span>
69
+ <span id="mediumRiskValue">40%</span>
70
+ <span>70%</span>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Notifications -->
77
+ <div class="bg-gray-800 rounded-lg p-6">
78
+ <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
79
+ <i data-feather="bell" class="w-5 h-5 text-red-500"></i>
80
+ Notifications
81
+ </h3>
82
+ <div class="space-y-4">
83
+ <label class="flex items-center justify-between">
84
+ <span>Email alerts for high-risk scans</span>
85
+ <input type="checkbox" id="emailAlerts" class="w-5 h-5">
86
+ </label>
87
+ <label class="flex items-center justify-between">
88
+ <span>Sound notifications</span>
89
+ <input type="checkbox" id="soundNotifications" class="w-5 h-5">
90
+ </label>
91
+ <label class="flex items-center justify-between">
92
+ <span>Desktop notifications</span>
93
+ <input type="checkbox" id="desktopNotifications" class="w-5 h-5">
94
+ </label>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Data Retention -->
99
+ <div class="bg-gray-800 rounded-lg p-6">
100
+ <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
101
+ <i data-feather="database" class="w-5 h-5 text-red-500"></i>
102
+ Data Retention
103
+ </h3>
104
+ <div class="space-y-4">
105
+ <div>
106
+ <label class="block text-sm font-medium mb-2">Keep scan history for (days)</label>
107
+ <select id="retentionDays" class="w-full bg-gray-700 px-4 py-2 rounded border border-gray-600 focus:border-red-500 focus:outline-none">
108
+ <option value="30">30 days</option>
109
+ <option value="90">90 days</option>
110
+ <option value="365">1 year</option>
111
+ <option value="0">Forever</option>
112
+ </select>
113
+ </div>
114
+ <button id="clearHistory" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm">
115
+ Clear All History
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Save Button -->
121
+ <div class="flex gap-4">
122
+ <button id="saveSettings" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-medium">
123
+ Save Settings
124
+ </button>
125
+ <button id="resetSettings" class="bg-gray-600 hover:bg-gray-700 px-6 py-3 rounded-lg font-medium">
126
+ Reset to Defaults
127
+ </button>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- System Status Sidebar -->
132
+ <div class="space-y-6">
133
+ <div class="bg-gray-800 rounded-lg p-6">
134
+ <h3 class="text-xl font-semibold mb-4">System Status</h3>
135
+ <div class="space-y-3">
136
+ <div class="flex justify-between items-center">
137
+ <span class="flex items-center gap-2">
138
+ <i data-feather="cpu" class="w-4 h-4 text-green-500"></i>
139
+ AI Service
140
+ </span>
141
+ <span class="text-green-500 text-sm">Online</span>
142
+ </div>
143
+ <div class="flex justify-between items-center">
144
+ <span class="flex items-center gap-2">
145
+ <i data-feather="database" class="w-4 h-4 text-green-500"></i>
146
+ Database
147
+ </span>
148
+ <span class="text-green-500 text-sm">Connected</span>
149
+ </div>
150
+ <div class="flex justify-between items-center">
151
+ <span class="flex items-center gap-2">
152
+ <i data-feather="shield" class="w-4 h-4 text-green-500"></i>
153
+ Security
154
+ </span>
155
+ <span class="text-green-500 text-sm">Active</span>
156
+ </div>
157
+ <div class="flex justify-between items-center">
158
+ <span class="flex items-center gap-2">
159
+ <i data-feather="clock" class="w-4 h-4 text-blue-500"></i>
160
+ Uptime
161
+ </span>
162
+ <span class="text-blue-500 text-sm" id="uptime">00:00:00</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="bg-gray-800 rounded-lg p-6">
168
+ <h3 class="text-xl font-semibold mb-4">Version Info</h3>
169
+ <div class="space-y-2 text-sm">
170
+ <p>Janus Scanner Pro v2.1.0</p>
171
+ <p>Build: 2025.01.15</p>
172
+ <p>Node: Operation "Lumière Noire"</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </main>
178
+
179
+ <custom-footer></custom-footer>
180
+
181
+ <script src="../components/navbar.js"></script>
182
+ <script src="../components/footer.js"></script>
183
+ <script>
184
+ // Settings page functionality
185
+ document.addEventListener('DOMContentLoaded', function() {
186
+ feather.replace();
187
+
188
+ // Load saved settings
189
+ const settings = JSON.parse(localStorage.getItem('janusSettings')) || {
190
+ apiKey: '',
191
+ defaultModel: 'deepseek/deepseek-chat-v3.1:free',
192
+ highRiskThreshold: 70,
193
+ mediumRiskThreshold: 40,
194
+ emailAlerts: false,
195
+ soundNotifications: false,
196
+ desktopNotifications: false,
197
+ retentionDays: 30
198
+ };
199
+
200
+ // Apply settings to form
201
+ document.getElementById('apiKey').value = settings.apiKey;
202
+ document.getElementById('defaultModel').value = settings.defaultModel;
203
+ document.getElementById('highRiskThreshold').value = settings.highRiskThreshold;
204
+ document.getElementById('mediumRiskThreshold').value = settings.mediumRiskThreshold;
205
+ document.getElementById('emailAlerts').checked = settings.emailAlerts;
206
+ document.getElementById('soundNotifications').checked = settings.soundNotifications;
207
+ document.getElementById('desktopNotifications').checked = settings.desktopNotifications;
208
+ document.getElementById('retentionDays').value = settings.retentionDays;
209
+
210
+ // Update threshold displays
211
+ document.getElementById('highRiskValue').textContent = settings.highRiskThreshold + '%';
212
+ document.getElementById('mediumRiskValue').textContent = settings.mediumRiskThreshold + '%';
213
+
214
+ // Threshold sliders
215
+ document.getElementById('highRiskThreshold').addEventListener('input', function(e) {
216
+ document.getElementById('highRiskValue').textContent = e.target.value + '%';
217
+ });
218
+
219
+ document.getElementById('mediumRiskThreshold').addEventListener('input', function(e) {
220
+ document.getElementById('mediumRiskValue').textContent = e.target.value + '%';
221
+ });
222
+
223
+ // Save settings
224
+ document.getElementById('saveSettings').addEventListener('click', function() {
225
+ const newSettings = {
226
+ apiKey: document.getElementById('apiKey').value,
227
+ defaultModel: document.getElementById('defaultModel').value,
228
+ highRiskThreshold: parseInt(document.getElementById('highRiskThreshold').value),
229
+ mediumRiskThreshold: parseInt(document.getElementById('mediumRiskThreshold').value),
230
+ emailAlerts: document.getElementById('emailAlerts').checked,
231
+ soundNotifications: document.getElementById('soundNotifications').checked,
232
+ desktopNotifications: document.getElementById('desktopNotifications').checked,
233
+ retentionDays: parseInt(document.getElementById('retentionDays').value)
234
+ };
235
+
236
+ localStorage.setItem('janusSettings', JSON.stringify(newSettings));
237
+
238
+ // Show notification
239
+ const notification = document.createElement('div');
240
+ notification.className = 'fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50';
241
+ notification.textContent = 'Settings saved successfully!';
242
+ document.body.appendChild(notification);
243
+
244
+ setTimeout(() => notification.remove(), 3000);
245
+ });
246
+
247
+ // Reset settings
248
+ document.getElementById('resetSettings').addEventListener('click', function() {
249
+ if (confirm('Reset all settings to default values?')) {
250
+ localStorage.removeItem('janusSettings');
251
+ location.reload();
252
+ }
253
+ });
254
+
255
+ // Clear history
256
+ document.getElementById('clearHistory').addEventListener('click', function() {
257
+ if (confirm('Delete all scan history? This cannot be undone.')) {
258
+ localStorage.removeItem('scanHistory');
259
+ const notification = document.createElement('div');
260
+ notification.className = 'fixed top-4 right-4 bg-red-600 text-white px-6 py-3 rounded-lg shadow-lg z-50';
261
+ notification.textContent = 'History cleared!';
262
+ document.body.appendChild(notification);
263
+ setTimeout(() => notification.remove(), 3000);
264
+ }
265
+ });
266
+
267
+ // Uptime counter
268
+ let uptime = 0;
269
+ setInterval(() => {
270
+ uptime++;
271
+ const hours = Math.floor(uptime / 3600);
272
+ const minutes = Math.floor((uptime % 3600) / 60);
273
+ const seconds = uptime % 60;
274
+ document.getElementById('uptime').textContent =
275
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
276
+ }, 1000);
277
+ });
278
+ </script>
279
+ </body>
280
+ </html>