Hugging Face's logo

Spaces:
nakel-ola
/
anycoder-247414bc
Running

App Files Community
nakel-ola commited on
Commit
e4275f8
·
verified ·
1 Parent(s): 3f20322

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +561 -19
index.html CHANGED
@@ -1,19 +1,561 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus IT Helpdesk | Intranet</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ fontFamily: {
16
+ sans: ['Inter', 'sans-serif'],
17
+ mono: ['JetBrains Mono', 'monospace'],
18
+ },
19
+ colors: {
20
+ nexus: {
21
+ 900: '#0f172a',
22
+ 800: '#1e293b',
23
+ 700: '#334155',
24
+ accent: '#38bdf8', // Sky blue
25
+ success: '#10b981', // Emerald
26
+ warning: '#f59e0b', // Amber
27
+ danger: '#ef4444', // Red
28
+ }
29
+ },
30
+ animation: {
31
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
+ 'scan': 'scan 4s linear infinite',
33
+ 'fade-in': 'fadeIn 0.5s ease-out forwards',
34
+ 'slide-up': 'slideUp 0.5s ease-out forwards',
35
+ },
36
+ keyframes: {
37
+ scan: {
38
+ '0%': { transform: 'translateY(-100%)' },
39
+ '100%': { transform: 'translateY(100%)' }
40
+ },
41
+ fadeIn: {
42
+ '0%': { opacity: '0' },
43
+ '100%': { opacity: '1' }
44
+ },
45
+ slideUp: {
46
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
47
+ '100%': { transform: 'translateY(0)', opacity: '1' }
48
+ }
49
+ }
50
+ }
51
+ }
52
+ }
53
+ </script>
54
+ <style>
55
+ /* Custom Scrollbar */
56
+ ::-webkit-scrollbar {
57
+ width: 8px;
58
+ }
59
+ ::-webkit-scrollbar-track {
60
+ background: #0f172a;
61
+ }
62
+ ::-webkit-scrollbar-thumb {
63
+ background: #334155;
64
+ border-radius: 4px;
65
+ }
66
+ ::-webkit-scrollbar-thumb:hover {
67
+ background: #475569;
68
+ }
69
+
70
+ /* Glassmorphism Utilities */
71
+ .glass {
72
+ background: rgba(30, 41, 59, 0.7);
73
+ backdrop-filter: blur(12px);
74
+ -webkit-backdrop-filter: blur(12px);
75
+ border: 1px solid rgba(255, 255, 255, 0.05);
76
+ }
77
+
78
+ .glass-card {
79
+ background: rgba(30, 41, 59, 0.4);
80
+ backdrop-filter: blur(8px);
81
+ border: 1px solid rgba(56, 189, 248, 0.1);
82
+ transition: all 0.3s ease;
83
+ }
84
+
85
+ .glass-card:hover {
86
+ background: rgba(30, 41, 59, 0.6);
87
+ border-color: rgba(56, 189, 248, 0.3);
88
+ transform: translateY(-2px);
89
+ box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.2);
90
+ }
91
+
92
+ /* CRT Scanline Effect */
93
+ .scanlines {
94
+ position: fixed;
95
+ top: 0;
96
+ left: 0;
97
+ width: 100%;
98
+ height: 100%;
99
+ background: linear-gradient(
100
+ to bottom,
101
+ rgba(255,255,255,0),
102
+ rgba(255,255,255,0) 50%,
103
+ rgba(0,0,0,0.1) 50%,
104
+ rgba(0,0,0,0.1)
105
+ );
106
+ background-size: 100% 4px;
107
+ pointer-events: none;
108
+ z-index: 50;
109
+ opacity: 0.3;
110
+ }
111
+
112
+ /* Grid Background */
113
+ .bg-grid {
114
+ background-size: 40px 40px;
115
+ background-image: linear-gradient(to right, rgba(56, 189, 248, 0.05) 1px, transparent 1px),
116
+ linear-gradient(to bottom, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
117
+ }
118
+
119
+ /* Glitch Text Effect on Hover */
120
+ .glitch-hover:hover {
121
+ animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
122
+ color: #38bdf8;
123
+ }
124
+ @keyframes glitch {
125
+ 0% { transform: translate(0) }
126
+ 20% { transform: translate(-2px, 2px) }
127
+ 40% { transform: translate(-2px, -2px) }
128
+ 60% { transform: translate(2px, 2px) }
129
+ 80% { transform: translate(2px, -2px) }
130
+ 100% { transform: translate(0) }
131
+ }
132
+ </style>
133
+ </head>
134
+ <body class="bg-nexus-900 text-slate-300 font-sans min-h-screen overflow-x-hidden selection:bg-nexus-accent selection:text-nexus-900">
135
+
136
+ <!-- Background Effects -->
137
+ <div class="fixed inset-0 bg-grid pointer-events-none z-0"></div>
138
+ <div class="scanlines"></div>
139
+
140
+ <!-- Decorative Glows -->
141
+ <div class="fixed top-0 left-1/4 w-96 h-96 bg-nexus-accent/10 rounded-full blur-3xl pointer-events-none -z-10"></div>
142
+ <div class="fixed bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl pointer-events-none -z-10"></div>
143
+
144
+ <!-- Navigation -->
145
+ <nav class="fixed w-full z-40 glass border-b border-slate-700/50">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147
+ <div class="flex items-center justify-between h-16">
148
+ <div class="flex items-center gap-3">
149
+ <div class="w-8 h-8 bg-gradient-to-br from-nexus-accent to-blue-600 rounded flex items-center justify-center shadow-lg shadow-blue-500/20">
150
+ <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
151
+ </div>
152
+ <span class="text-xl font-bold text-white tracking-tight">NEXUS<span class="text-nexus-accent">SUPPORT</span></span>
153
+ </div>
154
+ <div class="hidden md:block">
155
+ <div class="ml-10 flex items-baseline space-x-4">
156
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-nexus-accent transition-colors">Dashboard</a>
157
+ <a href="#kb" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">Knowledge Base</a>
158
+ <a href="#tickets" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">My Tickets</a>
159
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-mono text-nexus-accent border border-nexus-accent/30 px-2 py-1 rounded hover:bg-nexus-accent/10 transition-colors">Built with anycoder</a>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-center gap-4">
163
+ <div class="text-right hidden sm:block">
164
+ <div class="text-xs text-slate-400">System Time</div>
165
+ <div class="text-sm font-mono text-nexus-accent" id="clock">00:00:00</div>
166
+ </div>
167
+ <div class="h-8 w-8 rounded-full bg-slate-700 border border-slate-600 flex items-center justify-center text-xs font-bold text-white cursor-pointer hover:bg-slate-600 transition-colors">
168
+ JD
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </nav>
174
+
175
+ <!-- Main Content -->
176
+ <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative z-10">
177
+
178
+ <!-- Hero Section -->
179
+ <div class="text-center mb-12 animate-slide-up">
180
+ <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-4 tracking-tight">
181
+ How can we <span class="text-transparent bg-clip-text bg-gradient-to-r from-nexus-accent to-blue-500">assist</span> you today?
182
+ </h1>
183
+ <p class="text-lg text-slate-400 max-w-2xl mx-auto mb-8">
184
+ Access troubleshooting guides, submit support requests, and monitor system infrastructure health.
185
+ </p>
186
+
187
+ <!-- Search Bar -->
188
+ <div class="max-w-3xl mx-auto relative group">
189
+ <div class="absolute -inset-1 bg-gradient-to-r from-nexus-accent to-blue-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
190
+ <div class="relative flex items-center bg-nexus-800 rounded-lg border border-slate-700 shadow-2xl">
191
+ <svg class="w-6 h-6 text-slate-400 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
192
+ <input type="text" id="searchInput" placeholder="Search knowledge base (e.g., 'VPN', 'Password Reset', 'Printer')..."
193
+ class="w-full bg-transparent border-none text-white px-4 py-4 focus:ring-0 placeholder-slate-500 text-lg font-light">
194
+ <div class="pr-4 hidden md:block">
195
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs text-slate-300 font-mono border border-slate-600">CTRL K</kbd>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Dashboard Grid -->
202
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
203
+
204
+ <!-- Left Column: Quick Actions & Status -->
205
+ <div class="lg:col-span-1 space-y-8 animate-slide-up" style="animation-delay: 0.1s;">
206
+
207
+ <!-- Ticket Submission -->
208
+ <div class="glass-card rounded-xl p-6 relative overflow-hidden group">
209
+ <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
210
+ <svg class="w-24 h-24 text-nexus-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path></svg>
211
+ </div>
212
+ <h2 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
213
+ <span class="w-2 h-8 bg-nexus-accent rounded-full"></span>
214
+ New Ticket
215
+ </h2>
216
+ <p class="text-slate-400 text-sm mb-6">Experiencing an issue? Submit a detailed report to our engineering team.</p>
217
+
218
+ <button onclick="openTicketModal()" class="w-full bg-nexus-accent hover:bg-sky-400 text-nexus-900 font-bold py-3 px-4 rounded-lg transition-all transform hover:scale-[1.02] flex items-center justify-center gap-2 shadow-lg shadow-sky-500/20">
219
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
220
+ Create Support Ticket
221
+ </button>
222
+ </div>
223
+
224
+ <!-- System Status -->
225
+ <div class="glass-card rounded-xl p-6">
226
+ <div class="flex justify-between items-center mb-6">
227
+ <h2 class="text-xl font-bold text-white flex items-center gap-2">
228
+ <span class="w-2 h-8 bg-nexus-success rounded-full"></span>
229
+ System Status
230
+ </h2>
231
+ <span class="flex h-3 w-3 relative">
232
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-nexus-success opacity-75"></span>
233
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-nexus-success"></span>
234
+ </span>
235
+ </div>
236
+
237
+ <div class="space-y-4" id="statusList">
238
+ <!-- Status Items Injected via JS -->
239
+ </div>
240
+
241
+ <div class="mt-6 pt-4 border-t border-slate-700/50">
242
+ <div class="flex justify-between text-xs text-slate-400 font-mono">
243
+ <span>Uptime: 99.98%</span>
244
+ <span>Last checked: <span id="lastChecked">Just now</span></span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Emergency Contacts -->
250
+ <div class="glass-card rounded-xl p-6 border-l-4 border-l-nexus-danger bg-red-900/10">
251
+ <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
252
+ <svg class="w-5 h-5 text-nexus-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
253
+ Emergency Contacts
254
+ </h2>
255
+ <ul class="space-y-3 text-sm">
256
+ <li class="flex items-center justify-between group cursor-pointer">
257
+ <span class="text-slate-300 group-hover:text-white">Security Operations</span>
258
+ <span class="font-mono text-nexus-danger font-bold">x5911</span>
259
+ </li>
260
+ <li class="flex items-center justify-between group cursor-pointer">
261
+ <span class="text-slate-300 group-hover:text-white">Network Admin</span>
262
+ <span class="font-mono text-nexus-danger font-bold">x5500</span>
263
+ </li>
264
+ <li class="flex items-center justify-between group cursor-pointer">
265
+ <span class="text-slate-300 group-hover:text-white">Facilities</span>
266
+ <span class="font-mono text-nexus-danger font-bold">x5000</span>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Right Column: Knowledge Base -->
273
+ <div class="lg:col-span-2 animate-slide-up" style="animation-delay: 0.2s;">
274
+ <div class="flex justify-between items-end mb-6">
275
+ <h2 class="text-2xl font-bold text-white">Knowledge Base</h2>
276
+ <div class="flex gap-2">
277
+ <button class="px-3 py-1 text-xs rounded-full bg-nexus-700 text-white hover:bg-nexus-600 transition-colors active-filter" data-filter="all">All</button>
278
+ <button class="px-3 py-1 text-xs rounded-full bg-nexus-800 text-slate-400 hover:bg-nexus-700 transition-colors" data-filter="hardware">Hardware</button>
279
+ <button class="px-3 py-1 text-xs rounded-full bg-nexus-800 text-slate-400 hover:bg-nexus-700 transition-colors" data-filter="software">Software</button>
280
+ <button class="px-3 py-1 text-xs rounded-full bg-nexus-800 text-slate-400 hover:bg-nexus-700 transition-colors" data-filter="network">Network</button>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="kbContainer">
285
+ <!-- KB Cards Injected via JS -->
286
+ </div>
287
+
288
+ <!-- Empty State (Hidden by default) -->
289
+ <div id="noResults" class="hidden text-center py-12">
290
+ <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-800 mb-4">
291
+ <svg class="w-8 h-8 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
292
+ </div>
293
+ <h3 class="text-lg font-medium text-white">No articles found</h3>
294
+ <p class="text-slate-400">Try adjusting your search terms.</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </main>
299
+
300
+ <!-- Ticket Modal Overlay -->
301
+ <div id="ticketModal" class="fixed inset-0 z-50 hidden">
302
+ <!-- Backdrop -->
303
+ <div class="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity opacity-0" id="modalBackdrop"></div>
304
+
305
+ <!-- Modal Content -->
306
+ <div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
307
+ <div class="bg-nexus-800 border border-slate-600 w-full max-w-lg rounded-xl shadow-2xl transform scale-95 opacity-0 transition-all duration-300 pointer-events-auto" id="modalPanel">
308
+ <div class="p-6 border-b border-slate-700 flex justify-between items-center">
309
+ <h3 class="text-xl font-bold text-white">Submit Support Ticket</h3>
310
+ <button onclick="closeTicketModal()" class="text-slate-400 hover:text-white">
311
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
312
+ </button>
313
+ </div>
314
+
315
+ <form id="ticketForm" class="p-6 space-y-4">
316
+ <div>
317
+ <label class="block text-sm font-medium text-slate-300 mb-1">Issue Category</label>
318
+ <select class="w-full bg-nexus-900 border border-slate-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-nexus-accent focus:border-transparent outline-none">
319
+ <option>Hardware Failure</option>
320
+ <option>Software Bug</option>
321
+ <option>Access Request</option>
322
+ <option>Network Connectivity</option>
323
+ <option>General Inquiry</option>
324
+ </select>
325
+ </div>
326
+
327
+ <div>
328
+ <label class="block text-sm font-medium text-slate-300 mb-1">Subject</label>
329
+ <input type="text" required class="w-full bg-nexus-900 border border-slate-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-nexus-accent focus:border-transparent outline-none" placeholder="Brief description of the issue">
330
+ </div>
331
+
332
+ <div>
333
+ <label class="block text-sm font-medium text-slate-300 mb-1">Description</label>
334
+ <textarea rows="4" required class="w-full bg-nexus-900 border border-slate-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-nexus-accent focus:border-transparent outline-none" placeholder="Provide detailed steps to reproduce or error messages..."></textarea>
335
+ </div>
336
+
337
+ <div class="pt-4 flex justify-end gap-3">
338
+ <button type="button" onclick="closeTicketModal()" class="px-4 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-slate-700 transition-colors">Cancel</button>
339
+ <button type="submit" class="px-6 py-2 rounded-lg bg-nexus-accent hover:bg-sky-400 text-nexus-900 font-bold shadow-lg shadow-sky-500/20 transition-all transform hover:scale-105">Submit Ticket</button>
340
+ </div>
341
+ </form>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Toast Notification -->
347
+ <div id="toast" class="fixed bottom-5 right-5 transform translate-y-20 opacity-0 transition-all duration-500 z-50">
348
+ <div class="bg-nexus-800 border border-nexus-success/50 text-white px-6 py-4 rounded-lg shadow-2xl flex items-center gap-3">
349
+ <div class="bg-nexus-success/20 p-2 rounded-full">
350
+ <svg class="w-6 h-6 text-nexus-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
351
+ </div>
352
+ <div>
353
+ <h4 class="font-bold text-sm">Success</h4>
354
+ <p class="text-xs text-slate-300">Ticket #<span id="ticketId">1024</span> created successfully.</p>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <script>
360
+ // --- Data ---
361
+ const kbArticles = [
362
+ { id: 1, title: "VPN Connection Issues", category: "network", icon: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z", desc: "Troubleshoot common VPN drops and authentication errors." },
363
+ { id: 2, title: "Password Reset Guide", category: "software", icon: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z", desc: "Step-by-step instructions for resetting your domain password." },
364
+ { id: 3, title: "Printer Offline Fix", category: "hardware", icon: "M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z", desc: "Resolve spooler errors and network printer discovery issues." },
365
+ { id: 4, title: "Email Setup (Outlook)", category: "software", icon: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z", desc: "Configure Outlook 365 on desktop and mobile devices." },
366
+ { id: 5, title: "Blue Screen (BSOD)", category: "hardware", icon: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z", desc: "Identify error codes and perform hardware diagnostics." },
367
+ { id: 6, title: "Wi-Fi Connectivity", category: "network", icon: "M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0", desc: "Troubleshoot weak signals and DHCP configuration." },
368
+ ];
369
+
370
+ const systemStatus = [
371
+ { name: "Core Network", status: "operational", uptime: "100%" },
372
+ { name: "Email Server", status: "operational", uptime: "99.9%" },
373
+ { name: "File Server (NAS)", status: "degraded", uptime: "98.2%" },
374
+ { name: "VPN Gateway", status: "operational", uptime: "100%" },
375
+ { name: "Active Directory", status: "operational", uptime: "100%" },
376
+ ];
377
+
378
+ // --- Initialization ---
379
+ document.addEventListener('DOMContentLoaded', () => {
380
+ renderKB(kbArticles);
381
+ renderStatus();
382
+ startClock();
383
+ setupSearch();
384
+ setupFilters();
385
+ });
386
+
387
+ // --- Rendering Functions ---
388
+ function renderKB(articles) {
389
+ const container = document.getElementById('kbContainer');
390
+ const noResults = document.getElementById('noResults');
391
+ container.innerHTML = '';
392
+
393
+ if (articles.length === 0) {
394
+ noResults.classList.remove('hidden');
395
+ return;
396
+ } else {
397
+ noResults.classList.add('hidden');
398
+ }
399
+
400
+ articles.forEach(article => {
401
+ const card = document.createElement('div');
402
+ card.className = 'glass-card rounded-xl p-5 cursor-pointer group animate-fade-in';
403
+ card.innerHTML = `
404
+ <div class="flex items-start justify-between mb-3">
405
+ <div class="p-2 bg-nexus-800 rounded-lg group-hover:bg-nexus-accent/20 transition-colors">
406
+ <svg class="w-6 h-6 text-nexus-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
407
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${article.icon}"></path>
408
+ </svg>
409
+ </div>
410
+ <span class="text-xs font-mono text-slate-500 uppercase border border-slate-700 px-2 py-1 rounded">${article.category}</span>
411
+ </div>
412
+ <h3 class="text-lg font-bold text-white mb-2 group-hover:text-nexus-accent transition-colors">${article.title}</h3>
413
+ <p class="text-sm text-slate-400 line-clamp-2">${article.desc}</p>
414
+ `;
415
+ container.appendChild(card);
416
+ });
417
+ }
418
+
419
+ function renderStatus() {
420
+ const list = document.getElementById('statusList');
421
+ list.innerHTML = '';
422
+
423
+ systemStatus.forEach(sys => {
424
+ const isOp = sys.status === 'operational';
425
+ const colorClass = isOp ? 'text-nexus-success' : 'text-nexus-warning';
426
+ const bgClass = isOp ? 'bg-nexus-success' : 'bg-nexus-warning';
427
+ const icon = isOp
428
+ ? `<svg class="w-4 h-4 ${colorClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>`
429
+ : `<svg class="w-4 h-4 ${colorClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>`;
430
+
431
+ const item = document.createElement('div');
432
+ item.className = 'flex items-center justify-between p-3 rounded-lg bg-nexus-900/50 border border-slate-700/50';
433
+ item.innerHTML = `
434
+ <div class="flex items-center gap-3">
435
+ <div class="flex items-center justify-center w-8 h-8 rounded-full bg-slate-800">
436
+ ${icon}
437
+ </div>
438
+ <div>
439
+ <div class="text-sm font-medium text-white">${sys.name}</div>
440
+ <div class="text-xs text-slate-500 font-mono">Uptime: ${sys.uptime}</div>
441
+ </div>
442
+ </div>
443
+ <div class="flex items-center gap-2">
444
+ <span class="w-2 h-2 rounded-full ${bgClass} ${isOp ? '' : 'animate-pulse'}"></span>
445
+ <span class="text-xs font-bold uppercase ${colorClass}">${sys.status}</span>
446
+ </div>
447
+ `;
448
+ list.appendChild(item);
449
+ });
450
+ }
451
+
452
+ // --- Logic ---
453
+ function setupSearch() {
454
+ const input = document.getElementById('searchInput');
455
+ input.addEventListener('input', (e) => {
456
+ const term = e.target.value.toLowerCase();
457
+ const filtered = kbArticles.filter(a =>
458
+ a.title.toLowerCase().includes(term) ||
459
+ a.desc.toLowerCase().includes(term) ||
460
+ a.category.toLowerCase().includes(term)
461
+ );
462
+ renderKB(filtered);
463
+ });
464
+
465
+ // Keyboard shortcut for search
466
+ document.addEventListener('keydown', (e) => {
467
+ if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
468
+ e.preventDefault();
469
+ input.focus();
470
+ }
471
+ });
472
+ }
473
+
474
+ function setupFilters() {
475
+ const buttons = document.querySelectorAll('[data-filter]');
476
+ buttons.forEach(btn => {
477
+ btn.addEventListener('click', () => {
478
+ // Update active state
479
+ buttons.forEach(b => {
480
+ b.classList.remove('bg-nexus-700', 'text-white');
481
+ b.classList.add('bg-nexus-800', 'text-slate-400');
482
+ });
483
+ btn.classList.remove('bg-nexus-800', 'text-slate-400');
484
+ btn.classList.add('bg-nexus-700', 'text-white');
485
+
486
+ // Filter logic
487
+ const filter = btn.getAttribute('data-filter');
488
+ if (filter === 'all') {
489
+ renderKB(kbArticles);
490
+ } else {
491
+ const filtered = kbArticles.filter(a => a.category === filter);
492
+ renderKB(filtered);
493
+ }
494
+ });
495
+ });
496
+ }
497
+
498
+ function startClock() {
499
+ const clock = document.getElementById('clock');
500
+ setInterval(() => {
501
+ const now = new Date();
502
+ clock.innerText = now.toLocaleTimeString('en-US', { hour12: false });
503
+ }, 1000);
504
+ }
505
+
506
+ // --- Modal Logic ---
507
+ function openTicketModal() {
508
+ const modal = document.getElementById('ticketModal');
509
+ const backdrop = document.getElementById('modalBackdrop');
510
+ const panel = document.getElementById('modalPanel');
511
+
512
+ modal.classList.remove('hidden');
513
+ // Small delay to allow display:block to apply before opacity transition
514
+ setTimeout(() => {
515
+ backdrop.classList.remove('opacity-0');
516
+ panel.classList.remove('opacity-0', 'scale-95');
517
+ panel.classList.add('scale-100');
518
+ }, 10);
519
+ }
520
+
521
+ function closeTicketModal() {
522
+ const modal = document.getElementById('ticketModal');
523
+ const backdrop = document.getElementById('modalBackdrop');
524
+ const panel = document.getElementById('modalPanel');
525
+
526
+ backdrop.classList.add('opacity-0');
527
+ panel.classList.remove('scale-100');
528
+ panel.classList.add('opacity-0', 'scale-95');
529
+
530
+ setTimeout(() => {
531
+ modal.classList.add('hidden');
532
+ document.getElementById('ticketForm').reset();
533
+ }, 300);
534
+ }
535
+
536
+ // Form Submission
537
+ document.getElementById('ticketForm').addEventListener('submit', (e) => {
538
+ e.preventDefault();
539
+ closeTicketModal();
540
+
541
+ // Show Toast
542
+ const toast = document.getElementById('toast');
543
+ document.getElementById('ticketId').innerText = Math.floor(Math.random() * 9000) + 1000;
544
+
545
+ toast.classList.remove('translate-y-20', 'opacity-0');
546
+
547
+ setTimeout(() => {
548
+ toast.classList.add('translate-y-20', 'opacity-0');
549
+ }, 3000);
550
+ });
551
+
552
+ // Close modal on backdrop click
553
+ document.getElementById('ticketModal').addEventListener('click', (e) => {
554
+ if (e.target.id === 'ticketModal' || e.target.id === 'modalBackdrop') {
555
+ closeTicketModal();
556
+ }
557
+ });
558
+
559
+ </script>
560
+ </body>
561
+ </html>