mitznjay commited on
Commit
6b8a065
·
verified ·
1 Parent(s): 4dc540d

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +274 -1088
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,1186 +3,372 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Tech PC Maintenance Center</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @keyframes fadeIn {
11
- from { opacity: 0; }
12
- to { opacity: 1; }
13
  }
14
- @keyframes slideUp {
15
- from { transform: translateY(20px); opacity: 0; }
16
- to { transform: translateY(0); opacity: 1; }
17
- }
18
- @keyframes pulse {
19
- 0%, 100% { transform: scale(1); }
20
- 50% { transform: scale(1.03); }
21
- }
22
- @keyframes bounce {
23
- 0%, 100% { transform: translateY(0); }
24
- 50% { transform: translateY(-5px); }
25
- }
26
- .fade-in {
27
- animation: fadeIn 0.5s ease-in-out;
28
- }
29
- .slide-up {
30
- animation: slideUp 0.4s ease-out;
31
- }
32
- .gradient-bg {
33
- background: linear-gradient(135deg, #6e8efb, #a777e3);
34
- }
35
- .card-shadow {
36
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
37
- }
38
- .smooth-transition {
39
  transition: all 0.3s ease;
40
  }
41
- .progress-bar {
42
- height: 8px;
43
- border-radius: 4px;
44
- background-color: #e2e8f0;
45
- overflow: hidden;
46
- }
47
- .progress-fill {
48
- height: 100%;
49
- background: linear-gradient(90deg, #6e8efb, #a777e3);
50
- transition: width 0.5s ease;
51
- }
52
- .tool-card:hover {
53
  transform: translateY(-5px);
54
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
55
- }
56
- .log-entry {
57
- border-left: 3px solid #6e8efb;
58
- padding-left: 10px;
59
- margin-bottom: 8px;
60
- transition: all 0.2s ease;
61
- }
62
- .log-entry:hover {
63
- background-color: #f8fafc;
64
- }
65
- .log-entry.error {
66
- border-left-color: #ef4444;
67
  }
68
- .log-entry.warning {
69
- border-left-color: #f59e0b;
70
  }
71
- .log-entry.success {
72
- border-left-color: #10b981;
73
- }
74
- .log-entry.info {
75
- border-left-color: #3b82f6;
76
- }
77
- .log-timestamp {
78
- font-size: 0.75rem;
79
- color: #6b7280;
80
- transition: color 0.2s ease;
81
- }
82
- .log-message {
83
- font-size: 0.875rem;
84
- transition: color 0.2s ease;
85
- }
86
- .debug-section {
87
- max-height: 0;
88
- overflow: hidden;
89
- transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
90
- }
91
- .debug-section.expanded {
92
- max-height: 500px;
93
- }
94
- .highlight-button {
95
- position: relative;
96
- overflow: hidden;
97
  }
98
- .highlight-button::after {
99
- content: '';
100
- position: absolute;
101
- top: 0;
102
- left: 0;
103
- width: 100%;
104
- height: 100%;
105
- background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
106
- transform: translateX(-100%);
107
- transition: transform 0.6s ease;
108
  }
109
- .highlight-button:hover::after {
110
- transform: translateX(100%);
 
111
  }
112
- .pulse-on-hover:hover {
113
- animation: pulse 0.5s ease-in-out;
 
114
  }
115
- .bounce-on-hover:hover {
116
- animation: bounce 0.5s ease;
117
  }
118
- .button-glow {
119
- box-shadow: 0 4px 15px rgba(110, 142, 251, 0.3);
120
- transition: box-shadow 0.3s ease;
121
  }
122
- .button-glow:hover {
123
- box-shadow: 0 6px 20px rgba(110, 142, 251, 0.4);
 
 
124
  }
125
  </style>
126
  </head>
127
- <body class="font-sans bg-gray-50">
128
- <!-- Navigation -->
129
- <nav class="gradient-bg text-white shadow-md">
130
- <div class="container mx-auto px-4 py-3">
131
- <div class="flex justify-between items-center">
132
- <div class="flex items-center">
133
- <i class="fas fa-tools text-2xl mr-2 bounce-on-hover"></i>
134
- <span class="text-xl font-bold">Tech PC Maintenance</span>
135
- </div>
136
-
137
- <!-- Desktop Menu -->
138
- <div class="hidden md:flex space-x-6">
139
- <a href="#" onclick="showPage('home')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Home</a>
140
- <a href="#" onclick="showPage('login')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Login</a>
141
- <a href="#" onclick="showPage('signup')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Sign Up</a>
142
- </div>
143
-
144
- <!-- Mobile Menu Button -->
145
- <button id="mobile-menu-button" class="md:hidden focus:outline-none hover:scale-110 smooth-transition">
146
- <i class="fas fa-bars text-2xl"></i>
147
- </button>
148
- </div>
149
- </div>
150
-
151
- <!-- Mobile Menu -->
152
- <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 slide-up">
153
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
154
- <a href="#" onclick="showPage('home')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 smooth-transition">Home</a>
155
- <a href="#" onclick="showPage('login')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 smooth-transition">Login</a>
156
- <a href="#" onclick="showPage('signup')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 smooth-transition">Sign Up</a>
157
- </div>
158
- </div>
159
- </nav>
160
-
161
- <!-- Main Content Container -->
162
- <div class="container mx-auto px-4 py-8">
163
- <!-- Home Page -->
164
- <div id="home-page" class="fade-in">
165
- <div class="text-center mb-10">
166
- <h1 class="text-4xl font-bold text-gray-800 mb-4">PC Maintenance Tools</h1>
167
- <p class="text-xl text-gray-600">Keep your computer running smoothly with our maintenance tools</p>
168
  </div>
169
 
170
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
171
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
172
- <div class="flex items-center mb-4">
173
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
174
- <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
 
 
 
175
  </div>
176
- <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
 
 
177
  </div>
178
- <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
179
- <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
180
- Run Cleaner
181
- </button>
182
  </div>
183
 
184
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
185
- <div class="flex items-center mb-4">
186
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
187
- <i class="fas fa-globe text-indigo-600 text-xl"></i>
 
188
  </div>
189
- <h3 class="text-xl font-semibold">Clear Browser Cache</h3>
190
- </div>
191
- <p class="text-gray-600 mb-4">Clear your browser cache to improve performance.</p>
192
- <div class="flex space-x-2 mb-4">
193
- <button onclick="selectBrowser('chrome')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition hover:bg-gray-200 hover:text-gray-800">
194
- Chrome
195
- </button>
196
- <button onclick="selectBrowser('firefox')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition hover:bg-gray-200 hover:text-gray-800">
197
- Firefox
198
- </button>
199
- <button onclick="selectBrowser('edge')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition hover:bg-gray-200 hover:text-gray-800">
200
- Edge
201
- </button>
202
  </div>
203
- <button onclick="runTool('browserCache')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
204
- Clear Cache
205
- </button>
206
  </div>
207
 
208
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
209
- <div class="flex items-center mb-4">
210
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
211
- <i class="fas fa-bug text-indigo-600 text-xl"></i>
212
- </div>
213
- <h3 class="text-xl font-semibold">System Debug</h3>
214
  </div>
215
- <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
216
- <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
217
- Run Diagnostics
218
- </button>
219
  </div>
220
 
221
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
222
- <div class="flex items-center mb-4">
223
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
224
- <i class="fas fa-memory text-indigo-600 text-xl"></i>
225
- </div>
226
- <h3 class="text-xl font-semibold">RAM Usage</h3>
 
 
 
 
 
 
 
 
 
227
  </div>
228
- <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
229
- <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
230
- Check RAM
231
- </button>
232
- </div>
233
-
234
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
235
- <div class="flex items-center mb-4">
236
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
237
- <i class="fas fa-hdd text-indigo-600 text-xl"></i>
238
- </div>
239
- <h3 class="text-xl font-semibold">Disk Space</h3>
240
  </div>
241
- <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
242
- <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
243
- Analyze Disk
244
- </button>
245
  </div>
246
 
247
- <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
248
- <div class="flex items-center mb-4">
249
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
250
- <i class="fas fa-folder-open text-indigo-600 text-xl"></i>
251
- </div>
252
- <h3 class="text-xl font-semibold">Organize Downloads</h3>
253
- </div>
254
- <p class="text-gray-600 mb-4">Automatically sort and clean your downloads folder.</p>
255
- <button onclick="runTool('organizeDownloads')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
256
- Organize Now
257
  </button>
258
  </div>
259
  </div>
260
  </div>
261
-
262
- <!-- Login Page -->
263
- <div id="login-page" class="hidden max-w-md mx-auto fade-in">
264
- <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
265
- <div class="text-center mb-6">
266
- <h2 class="text-2xl font-bold text-gray-800">Welcome Back!</h2>
267
- <p class="text-gray-600">Login to access your maintenance tools</p>
268
- </div>
269
-
270
- <form id="login-form">
271
- <div class="mb-4">
272
- <label for="login-email" class="block text-gray-700 mb-2">Email</label>
273
- <input type="email" id="login-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="your@email.com" required>
274
- </div>
275
-
276
- <div class="mb-6">
277
- <label for="login-password" class="block text-gray-700 mb-2">Password</label>
278
- <input type="password" id="login-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="••••••••" required>
279
- </div>
280
-
281
- <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4 highlight-button button-glow">
282
- Login
283
- </button>
284
-
285
- <div class="text-center mt-4">
286
- <a href="#" onclick="showPage('forgot-password')" class="text-indigo-600 hover:underline text-sm smooth-transition">Forgot Password?</a>
287
- </div>
288
-
289
- <div class="text-center">
290
- <p class="text-gray-600">Don't have an account? <a href="#" onclick="showPage('signup')" class="text-indigo-600 hover:underline smooth-transition">Sign up</a></p>
291
- </div>
292
- </form>
293
  </div>
294
- </div>
295
-
296
- <!-- Signup Page -->
297
- <div id="signup-page" class="hidden max-w-md mx-auto fade-in">
298
- <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
299
- <div class="text-center mb-6">
300
- <h2 class="text-2xl font-bold text-gray-800">Create Your Account</h2>
301
- <p class="text-gray-600">Join our PC maintenance community</p>
302
- </div>
303
-
304
- <form id="signup-form">
305
- <div class="mb-4">
306
- <label for="signup-name" class="block text-gray-700 mb-2">Full Name</label>
307
- <input type="text" id="signup-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="John Doe" required>
308
- </div>
309
-
310
- <div class="mb-4">
311
- <label for="signup-email" class="block text-gray-700 mb-2">Email</label>
312
- <input type="email" id="signup-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="your@email.com" required>
313
- </div>
314
-
315
- <div class="mb-4">
316
- <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
317
- <input type="password" id="signup-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="••••••••" required minlength="6">
318
- </div>
319
-
320
- <div class="mb-6">
321
- <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
322
- <input type="password" id="signup-confirm-password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="••••••••" required minlength="6">
323
- </div>
324
-
325
- <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4 highlight-button button-glow">
326
- Create Account
327
- </button>
328
-
329
- <div class="text-center">
330
- <p class="text-gray-600">Already have an account? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline smooth-transition">Login</a></p>
331
  </div>
332
- </form>
333
- </div>
334
- </div>
335
-
336
- <!-- Forgot Password Page -->
337
- <div id="forgot-password-page" class="hidden max-w-md mx-auto fade-in">
338
- <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
339
- <div class="text-center mb-6">
340
- <h2 class="text-2xl font-bold text-gray-800">Reset Your Password</h2>
341
- <p class="text-gray-600">Enter your email to receive a reset link</p>
342
  </div>
343
 
344
- <form id="forgot-password-form">
345
- <div class="mb-6">
346
- <label for="forgot-email" class="block text-gray-700 mb-2">Email Address</label>
347
- <input type="email" id="forgot-email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 smooth-transition" placeholder="your@email.com" required>
348
- </div>
349
-
350
- <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4 highlight-button button-glow">
351
- Send Reset Link
352
- </button>
353
-
354
- <div class="text-center">
355
- <p class="text-gray-600">Remember your password? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline smooth-transition">Login</a></p>
356
  </div>
357
- </form>
358
- </div>
359
- </div>
360
-
361
- <!-- Dashboard Page -->
362
- <div id="dashboard-page" class="hidden fade-in">
363
- <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
364
- <div class="text-center mb-8">
365
- <h2 class="text-2xl font-bold text-gray-800">Welcome, <span id="user-name">User</span>!</h2>
366
- <p class="text-gray-600">Access your PC maintenance tools</p>
367
  </div>
368
 
369
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
370
- <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
371
- <div class="flex items-center mb-4">
372
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
373
- <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
374
- </div>
375
- <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
376
- </div>
377
- <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
378
- <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
379
- Run Cleaner
380
- </button>
381
- </div>
382
-
383
- <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
384
- <div class="flex items-center mb-4">
385
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
386
- <i class="fas fa-bug text-indigo-600 text-xl"></i>
387
- </div>
388
- <h3 class="text-xl font-semibold">System Debug</h3>
389
- </div>
390
- <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
391
- <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
392
- Run Diagnostics
393
- </button>
394
- </div>
395
-
396
- <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
397
- <div class="flex items-center mb-4">
398
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
399
- <i class="fas fa-memory text-indigo-600 text-xl"></i>
400
- </div>
401
- <h3 class="text-xl font-semibold">RAM Usage</h3>
402
- </div>
403
- <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
404
- <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
405
- Check RAM
406
- </button>
407
- </div>
408
-
409
- <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
410
- <div class="flex items-center mb-4">
411
- <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
412
- <i class="fas fa-hdd text-indigo-600 text-xl"></i>
413
- </div>
414
- <h3 class="text-xl font-semibold">Disk Space</h3>
415
  </div>
416
- <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
417
- <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
418
- Analyze Disk
419
- </button>
420
  </div>
 
421
  </div>
422
 
423
- <div class="text-center">
424
- <button onclick="logout()" class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 smooth-transition highlight-button hover:shadow-red-500/30 hover:shadow-lg">
425
- <i class="fas fa-sign-out-alt mr-2"></i>Logout
426
- </button>
427
- </div>
428
- </div>
429
- </div>
430
-
431
- <!-- Results Panel -->
432
- <div id="results-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
433
- <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 card-shadow slide-up transform transition-all duration-300">
434
- <div class="flex justify-between items-center mb-4">
435
- <h3 class="text-xl font-bold text-gray-800" id="results-title">Results</h3>
436
- <button onclick="closeResults()" class="text-gray-500 hover:text-gray-700 smooth-transition hover:scale-110">
437
- <i class="fas fa-times"></i>
438
- </button>
439
  </div>
440
 
441
- <div id="results-content" class="py-4 max-h-[70vh] overflow-y-auto">
442
- <!-- Results content will be inserted here by JavaScript -->
 
 
 
443
  </div>
444
 
445
- <div class="mt-4 text-right">
446
- <button onclick="closeResults()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 smooth-transition highlight-button button-glow">
447
- Close
448
- </button>
449
- </div>
 
 
 
 
450
  </div>
451
  </div>
452
- </div>
453
-
454
- <!-- Footer -->
455
- <footer class="bg-gray-800 text-white py-8">
456
- <div class="container mx-auto px-4">
457
- <div class="text-center">
458
- <p>&copy; 2023 Tech PC Maintenance Center. All rights reserved.</p>
459
- <div class="mt-4 flex justify-center space-x-4">
460
- <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-facebook"></i></a>
461
- <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-twitter"></i></a>
462
- <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-instagram"></i></a>
463
  </div>
 
 
 
 
 
464
  </div>
465
  </div>
466
- </footer>
467
 
468
  <script>
469
- // ========== UTILITY FUNCTIONS ==========
470
- function getCurrentTimestamp() {
471
- const now = new Date();
472
- return now.toLocaleTimeString();
473
- }
 
 
 
 
 
 
 
 
474
 
475
- function generateRandomNumber(min, max) {
476
- return Math.floor(Math.random() * (max - min + 1)) + min;
477
- }
478
-
479
- function formatBytes(bytes, decimals = 2) {
480
- if (bytes === 0) return '0 Bytes';
481
- const k = 1024;
482
- const dm = decimals < 0 ? 0 : decimals;
483
- const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
484
- const i = Math.floor(Math.log(bytes) / Math.log(k));
485
- return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
486
- }
487
-
488
- // ========== PAGE MANAGEMENT ==========
489
- // Mobile menu toggle
490
- document.getElementById('mobile-menu-button').addEventListener('click', function() {
491
- const menu = document.getElementById('mobile-menu');
492
- menu.classList.toggle('hidden');
493
  });
494
 
495
- // Show specific page and hide others
496
- function showPage(pageId) {
497
- document.getElementById('home-page').classList.add('hidden');
498
- document.getElementById('login-page').classList.add('hidden');
499
- document.getElementById('signup-page').classList.add('hidden');
500
- document.getElementById('dashboard-page').classList.add('hidden');
501
- document.getElementById('forgot-password-page').classList.add('hidden');
502
-
503
- document.getElementById(`${pageId}-page`).classList.remove('hidden');
504
- document.getElementById('mobile-menu').classList.add('hidden');
505
- window.scrollTo(0, 0);
506
-
507
- // Update user name in dashboard if logged in
508
- if (pageId === 'dashboard') {
509
- const currentUser = localStorage.getItem('currentUser');
510
- if (currentUser) {
511
- const user = JSON.parse(currentUser);
512
- document.getElementById('user-name').textContent = user.name;
513
- }
514
- }
515
- }
516
 
517
- // ========== USER MANAGEMENT ==========
518
- // Mock user database in localStorage
519
- function initializeUserDatabase() {
520
- if (!localStorage.getItem('users')) {
521
- localStorage.setItem('users', JSON.stringify([]));
522
- }
523
- }
524
 
525
- // Handle login form submission
526
- document.getElementById('login-form').addEventListener('submit', function(e) {
527
  e.preventDefault();
528
 
529
  const email = document.getElementById('login-email').value;
530
  const password = document.getElementById('login-password').value;
531
 
532
- initializeUserDatabase();
533
- const users = JSON.parse(localStorage.getItem('users'));
534
- const user = users.find(u => u.email === email && u.password === password);
535
-
536
- if (user) {
537
- // Store the user data in localStorage
538
- localStorage.setItem('currentUser', JSON.stringify({
539
- name: user.name,
540
- email: user.email
541
- }));
 
 
 
 
542
 
543
- // Show dashboard
544
- showPage('dashboard');
 
545
 
546
- // Update welcome message
547
- document.getElementById('user-name').textContent = user.name;
 
 
548
 
549
- // Clear form
550
- this.reset();
551
- } else {
552
- alert('Invalid email or password');
 
 
 
 
 
 
 
553
  }
554
  });
555
 
556
- // Handle signup form submission
557
- document.getElementById('signup-form').addEventListener('submit', function(e) {
558
  e.preventDefault();
559
 
560
  const name = document.getElementById('signup-name').value;
561
  const email = document.getElementById('signup-email').value;
562
  const password = document.getElementById('signup-password').value;
563
- const confirmPassword = document.getElementById('signup-confirm-password').value;
564
 
 
565
  if (password !== confirmPassword) {
566
- alert('Passwords do not match!');
 
 
 
 
567
  return;
568
  }
569
 
570
- if (password.length < 6) {
571
- alert('Password must be at least 6 characters long');
 
 
 
 
 
572
  return;
573
  }
574
 
575
- initializeUserDatabase();
576
- const users = JSON.parse(localStorage.getItem('users'));
577
-
578
- // Check if user already exists
579
- if (users.some(u => u.email === email)) {
580
- alert('Email already registered');
581
- return;
582
- }
583
-
584
- // Add new user
585
- users.push({
586
- name: name,
587
- email: email,
588
- password: password
589
- });
590
-
591
- localStorage.setItem('users', JSON.stringify(users));
592
- alert('Account created successfully! Please login.');
593
- showPage('login');
594
-
595
- // Clear form
596
- this.reset();
597
- });
598
-
599
- // Handle forgot password form submission
600
- document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
601
- e.preventDefault();
602
- const email = document.getElementById('forgot-email').value;
603
- alert(`Password reset link sent to ${email} (simulated)`);
604
- showPage('login');
605
- this.reset();
606
- });
607
-
608
- // Check if user is logged in on page load
609
- document.addEventListener('DOMContentLoaded', function() {
610
- initializeUserDatabase();
611
- const currentUser = localStorage.getItem('currentUser');
612
-
613
- if (currentUser) {
614
- const user = JSON.parse(currentUser);
615
- showPage('dashboard');
616
- document.getElementById('user-name').textContent = user.name;
617
- } else {
618
- showPage('home');
619
- }
620
- });
621
-
622
- // Logout function
623
- function logout() {
624
- localStorage.removeItem('currentUser');
625
- showPage('home');
626
- }
627
-
628
- // ========== TOOL FUNCTIONS ==========
629
- // Browser selection for cache clearing
630
- let selectedBrowser = null;
631
-
632
- function selectBrowser(browser) {
633
- selectedBrowser = browser;
634
- const buttons = document.querySelectorAll('[onclick^="selectBrowser"]');
635
- buttons.forEach(btn => {
636
- if (btn.getAttribute('onclick').includes(browser)) {
637
- btn.classList.add('bg-indigo-100', 'text-indigo-600');
638
- btn.classList.remove('bg-gray-100', 'text-gray-700');
639
- } else {
640
- btn.classList.remove('bg-indigo-100', 'text-indigo-600');
641
- btn.classList.add('bg-gray-100', 'text-gray-700');
642
- }
643
- });
644
- }
645
-
646
- // Generate system debug logs
647
- function generateDebugLogs() {
648
- const logs = [];
649
- const logTypes = ['error', 'warning', 'success', 'info'];
650
- const messages = [
651
- "Failed to load system module",
652
- "Disk read error on sector 2048",
653
- "Memory allocation successful",
654
- "Checking system integrity",
655
- "Firewall rule updated",
656
- "Driver version mismatch detected",
657
- "System scan completed",
658
- "Network connection established",
659
- "Security update available",
660
- "Registry key not found"
661
- ];
662
-
663
- const count = generateRandomNumber(5, 15);
664
- for (let i = 0; i < count; i++) {
665
- const type = logTypes[generateRandomNumber(0, logTypes.length - 1)];
666
- const message = messages[generateRandomNumber(0, messages.length - 1)];
667
- logs.push({
668
- type,
669
- message,
670
- timestamp: getCurrentTimestamp()
671
  });
672
- }
673
-
674
- return logs;
675
- }
676
-
677
- // Generate disk analysis data
678
- function generateDiskAnalysis() {
679
- const totalSpace = generateRandomNumber(200, 2000) * 1024 * 1024 * 1024; // 200GB to 2TB
680
- const usedSpace = generateRandomNumber(50, totalSpace / (1024 * 1024 * 1024) * 0.8) * 1024 * 1024 * 1024;
681
- const freeSpace = totalSpace - usedSpace;
682
-
683
- return {
684
- totalSpace,
685
- usedSpace,
686
- freeSpace,
687
- tempFiles: generateRandomNumber(500, 2000) * 1024 * 1024, // 500MB to 2GB
688
- duplicateFiles: generateRandomNumber(100, 800) * 1024 * 1024, // 100MB to 800MB
689
- largeApps: generateRandomNumber(1, 5) * 1024 * 1024 * 1024 // 1GB to 5GB
690
- };
691
- }
692
-
693
- // Generate RAM usage data
694
- function generateRamUsage() {
695
- const totalRam = generateRandomNumber(4, 32) * 1024; // 4GB to 32GB in MB
696
- const usedRam = generateRandomNumber(totalRam * 0.3, totalRam * 0.8);
697
- const cachedRam = generateRandomNumber(totalRam * 0.1, totalRam * 0.3);
698
- const availableRam = totalRam - usedRam;
699
-
700
- return {
701
- totalRam,
702
- usedRam,
703
- cachedRam,
704
- availableRam
705
- };
706
- }
707
-
708
- // Generate downloads organization data
709
- function generateDownloadsData() {
710
- const categories = [
711
- { name: "Documents", icon: "fa-file-pdf", color: "text-red-500", count: generateRandomNumber(5, 30) },
712
- { name: "Images", icon: "fa-file-image", color: "text-blue-500", count: generateRandomNumber(10, 50) },
713
- { name: "Videos", icon: "fa-file-video", color: "text-purple-500", count: generateRandomNumber(3, 15) },
714
- { name: "Archives", icon: "fa-file-archive", color: "text-yellow-500", count: generateRandomNumber(2, 10) },
715
- { name: "Audio", icon: "fa-file-audio", color: "text-green-500", count: generateRandomNumber(1, 8) }
716
- ];
717
-
718
- const totalFiles = categories.reduce((sum, cat) => sum + cat.count, 0);
719
- const spaceFreed = generateRandomNumber(500, 3000) * 1024 * 1024; // 500MB to 3GB
720
-
721
- return {
722
- categories,
723
- totalFiles,
724
- spaceFreed
725
- };
726
- }
727
-
728
- // Run maintenance tool
729
- function runTool(tool) {
730
- const resultsPanel = document.getElementById('results-panel');
731
- const resultsContent = document.getElementById('results-content');
732
- const resultsTitle = document.getElementById('results-title');
733
-
734
- // Set title based on tool
735
- const toolTitles = {
736
- 'tempFiles': 'Temporary Files Cleaner Results',
737
- 'browserCache': 'Browser Cache Cleaning Results',
738
- 'systemDebug': 'System Diagnostics Report',
739
- 'ramUsage': 'Memory Analysis Results',
740
- 'diskSpace': 'Disk Space Analysis',
741
- 'organizeDownloads': 'Downloads Organization Results'
742
- };
743
-
744
- resultsTitle.textContent = toolTitles[tool] || 'Results';
745
-
746
- resultsContent.innerHTML = `
747
- <div class="text-center py-8">
748
- <i class="fas fa-spinner fa-spin text-2xl text-indigo-600 mb-2"></i>
749
- <p>Running ${toolTitles[tool] || 'tool'}...</p>
750
- <div class="w-full bg-gray-200 rounded-full h-1.5 mt-4">
751
- <div class="bg-indigo-600 h-1.5 rounded-full progress-animate" style="width: 0%"></div>
752
- </div>
753
- </div>
754
- `;
755
-
756
- // Animate progress bar
757
- const progressBar = resultsContent.querySelector('.progress-animate');
758
- let progress = 0;
759
- const progressInterval = setInterval(() => {
760
- progress += generateRandomNumber(5, 15);
761
- if (progress >= 100) {
762
- progress = 100;
763
- clearInterval(progressInterval);
764
- showToolResults(tool);
765
  }
766
- progressBar.style.width = `${progress}%`;
767
- }, 200);
768
-
769
- resultsPanel.classList.remove('hidden');
770
- }
771
-
772
- // Show tool results
773
- function showToolResults(tool) {
774
- const resultsContent = document.getElementById('results-content');
775
- let resultHtml = '';
776
-
777
- switch(tool) {
778
- case 'tempFiles':
779
- const tempFilesSize = generateRandomNumber(800, 2500) * 1024 * 1024; // 800MB to 2.5GB
780
- resultHtml = `
781
- <div class="p-4 bg-green-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
782
- <div class="flex items-center text-green-600 mb-2">
783
- <i class="fas fa-check-circle mr-2"></i>
784
- <h4 class="font-semibold">Temporary Files Cleaned</h4>
785
- </div>
786
- <p class="text-sm text-gray-700">Successfully removed ${formatBytes(tempFilesSize)} of temporary files.</p>
787
- <div class="mt-3 text-xs text-gray-500">
788
- <p><i class="fas fa-info-circle mr-1"></i> This action is safe and only removes files that can be safely deleted.</p>
789
- </div>
790
- </div>
791
- <div class="grid grid-cols-2 gap-4 mt-4">
792
- <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
793
- <div class="text-blue-600 text-sm font-medium">Files Deleted</div>
794
- <div class="text-xl font-bold">${generateRandomNumber(150, 500)}</div>
795
- </div>
796
- <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
797
- <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
798
- <div class="text-xl font-bold">${formatBytes(tempFilesSize)}</div>
799
- </div>
800
- </div>
801
- `;
802
- break;
803
-
804
- case 'browserCache':
805
- if (!selectedBrowser) {
806
- resultHtml = `
807
- <div class="p-4 bg-yellow-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
808
- <div class="flex items-center text-yellow-600 mb-2">
809
- <i class="fas fa-exclamation-triangle mr-2"></i>
810
- <h4 class="font-semibold">No Browser Selected</h4>
811
- </div>
812
- <p class="text-sm text-gray-700">Please select a browser to clear its cache.</p>
813
- </div>
814
- `;
815
- } else {
816
- const cacheSize = generateRandomNumber(300, 1500) * 1024 * 1024; // 300MB to 1.5GB
817
- resultHtml = `
818
- <div class="p-4 bg-green-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
819
- <div class="flex items-center text-green-600 mb-2">
820
- <i class="fas fa-check-circle mr-2"></i>
821
- <h4 class="font-semibold">Browser Cache Cleared</h4>
822
- </div>
823
- <p class="text-sm text-gray-700">Successfully cleared ${formatBytes(cacheSize)} of cache data from ${selectedBrowser.charAt(0).toUpperCase() + selectedBrowser.slice(1)}.</p>
824
- <div class="mt-3 text-xs text-gray-500">
825
- <p><i class="fas fa-info-circle mr-1"></i> You may need to log in again to some websites.</p>
826
- </div>
827
- </div>
828
- <div class="grid grid-cols-2 gap-4 mt-4">
829
- <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
830
- <div class="text-blue-600 text-sm font-medium">Cache Items</div>
831
- <div class="text-xl font-bold">${generateRandomNumber(500, 2000)}</div>
832
- </div>
833
- <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
834
- <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
835
- <div class="text-xl font-bold">${formatBytes(cacheSize)}</div>
836
- </div>
837
- </div>
838
- `;
839
- }
840
- break;
841
-
842
- case 'systemDebug':
843
- const logs = generateDebugLogs();
844
- const errorCount = logs.filter(log => log.type === 'error').length;
845
- const warningCount = logs.filter(log => log.type === 'warning').length;
846
-
847
- // Generate system health score (0-100)
848
- const healthScore = 100 - (errorCount * 5) - (warningCount * 2);
849
-
850
- resultHtml = `
851
- <div class="p-4 bg-blue-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
852
- <div class="flex items-center text-blue-600 mb-2">
853
- <i class="fas fa-search mr-2"></i>
854
- <h4 class="font-semibold">System Diagnostics</h4>
855
- </div>
856
- <div class="space-y-3">
857
- <div>
858
- <div class="flex justify-between text-sm mb-1">
859
- <span>System Health</span>
860
- <span>${Math.max(0, healthScore)}/100</span>
861
- </div>
862
- <div class="progress-bar">
863
- <div class="progress-fill" style="width: ${healthScore}%"></div>
864
- </div>
865
- </div>
866
- <div>
867
- <div class="flex justify-between text-sm mb-1">
868
- <span>System Errors</span>
869
- <span>${errorCount} found</span>
870
- </div>
871
- <div class="progress-bar">
872
- <div class="progress-fill" style="width: ${100 - (errorCount * 5)}%"></div>
873
- </div>
874
- </div>
875
- <div>
876
- <div class="flex justify-between text-sm mb-1">
877
- <span>Performance</span>
878
- <span>${healthScore > 80 ? 'Excellent' : healthScore > 50 ? 'Good' : 'Needs Attention'}</span>
879
- </div>
880
- <div class="progress-bar">
881
- <div class="progress-fill" style="width: ${healthScore}%"></div>
882
- </div>
883
- </div>
884
- </div>
885
- </div>
886
-
887
- <div class="mt-4">
888
- <div class="flex justify-between items-center mb-2">
889
- <h4 class="font-semibold">System Logs</h4>
890
- <span class="text-sm text-gray-500">${logs.length} entries</span>
891
- </div>
892
-
893
- <div class="debug-section-container">
894
- <button class="debug-section-toggle w-full text-left p-2 bg-gray-100 rounded-t-lg flex justify-between items-center smooth-transition hover:bg-gray-200">
895
- <span>Show Detailed Logs</span>
896
- <i class="fas fa-chevron-down text-gray-500"></i>
897
- </button>
898
- <div class="debug-section bg-gray-50 p-3 rounded-b-lg">
899
- ${logs.map(log => `
900
- <div class="log-entry ${log.type} mb-2">
901
- <div class="flex justify-between items-start">
902
- <span class="log-message">${log.message}</span>
903
- <span class="log-timestamp ml-2">${log.timestamp}</span>
904
- </div>
905
- </div>
906
- `).join('')}
907
- </div>
908
- </div>
909
-
910
- <div class="grid grid-cols-2 gap-4 mt-4">
911
- <div class="bg-red-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
912
- <div class="text-red-600 text-sm font-medium">Errors</div>
913
- <div class="text-xl font-bold">${errorCount}</div>
914
- </div>
915
- <div class="bg-yellow-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
916
- <div class="text-yellow-600 text-sm font-medium">Warnings</div>
917
- <div class="text-xl font-bold">${warningCount}</div>
918
- </div>
919
- </div>
920
- </div>
921
-
922
- <div class="mt-4 p-4 bg-indigo-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
923
- <h4 class="font-semibold text-indigo-600 mb-2">Recommendations</h4>
924
- <ul class="text-sm space-y-2">
925
- ${errorCount > 0 ? '<li class="flex items-start"><i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2 text-xs"></i><span>Address critical system errors first</span></li>' : ''}
926
- ${warningCount > 3 ? '<li class="flex items-start"><i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2 text-xs"></i><span>Review system warnings for potential issues</span></li>' : ''}
927
- <li class="flex items-start"><i class="fas fa-sync-alt text-blue-500 mt-1 mr-2 text-xs"></i><span>Consider restarting your computer to apply changes</span></li>
928
- ${healthScore < 70 ? '<li class="flex items-start"><i class="fas fa-shield-alt text-purple-500 mt-1 mr-2 text-xs"></i><span>Run a full system scan for potential threats</span></li>' : ''}
929
- </ul>
930
- </div>
931
- `;
932
- break;
933
-
934
- case 'ramUsage':
935
- const ramData = generateRamUsage();
936
- const ramPercentage = Math.round((ramData.usedRam / ramData.totalRam) * 100);
937
-
938
- resultHtml = `
939
- <div class="p-4 bg-purple-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
940
- <div class="flex items-center text-purple-600 mb-2">
941
- <i class="fas fa-memory mr-2"></i>
942
- <h4 class="font-semibold">Memory Analysis</h4>
943
- </div>
944
- <div class="space-y-3">
945
- <div>
946
- <div class="flex justify-between text-sm mb-1">
947
- <span>Total RAM</span>
948
- <span>${ramData.totalRam / 1024} GB</span>
949
- </div>
950
- </div>
951
- <div>
952
- <div class="flex justify-between text-sm mb-1">
953
- <span>In Use</span>
954
- <span>${Math.round(ramData.usedRam / 1024)} GB (${ramPercentage}%)</span>
955
- </div>
956
- <div class="progress-bar">
957
- <div class="progress-fill" style="width: ${ramPercentage}%"></div>
958
- </div>
959
- </div>
960
- <div>
961
- <div class="flex justify-between text-sm mb-1">
962
- <span>Cached</span>
963
- <span>${Math.round(ramData.cachedRam / 1024)} GB</span>
964
- </div>
965
- <div class="progress-bar">
966
- <div class="progress-fill" style="width: ${Math.round((ramData.cachedRam / ramData.totalRam) * 100)}%"></div>
967
- </div>
968
- </div>
969
- <div>
970
- <div class="flex justify-between text-sm mb-1">
971
- <span>Available</span>
972
- <span>${Math.round(ramData.availableRam / 1024)} GB</span>
973
- </div>
974
- <div class="progress-bar">
975
- <div class="progress-fill" style="width: ${Math.round((ramData.availableRam / ramData.totalRam) * 100)}%"></div>
976
- </div>
977
- </div>
978
- </div>
979
- </div>
980
-
981
- <div class="mt-4">
982
- <h4 class="font-semibold mb-2">Memory Usage by Process</h4>
983
- <div class="space-y-2">
984
- ${['System', 'Explorer.exe', 'Chrome.exe', 'Antivirus.exe', 'Other Processes']
985
- .map(process => {
986
- const usage = generateRandomNumber(50, 800);
987
- return `
988
- <div>
989
- <div class="flex justify-between text-sm mb-1">
990
- <span>${process}</span>
991
- <span>${usage} MB</span>
992
- </div>
993
- <div class="progress-bar">
994
- <div class="progress-fill" style="width: ${Math.round((usage / ramData.totalRam) * 100)}%"></div>
995
- </div>
996
- </div>
997
- `;
998
- }).join('')}
999
- </div>
1000
- </div>
1001
-
1002
- <div class="mt-4 p-4 ${ramPercentage > 80 ? 'bg-red-50' : 'bg-green-50'} rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
1003
- <h4 class="font-semibold ${ramPercentage > 80 ? 'text-red-600' : 'text-green-600'} mb-2">
1004
- <i class="fas ${ramPercentage > 80 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
1005
- ${ramPercentage > 80 ? 'High Memory Usage' : 'Memory Usage OK'}
1006
- </h4>
1007
- <p class="text-sm">
1008
- ${ramPercentage > 80
1009
- ? 'Your system is using most of available RAM. Consider closing some applications or upgrading your memory.'
1010
- : 'Your memory usage is within normal limits. No immediate action required.'}
1011
- </p>
1012
- </div>
1013
- `;
1014
- break;
1015
-
1016
- case 'diskSpace':
1017
- const diskData = generateDiskAnalysis();
1018
- const usedPercentage = Math.round((diskData.usedSpace / diskData.totalSpace) * 100);
1019
-
1020
- resultHtml = `
1021
- <div class="p-4 bg-indigo-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
1022
- <div class="flex items-center text-indigo-600 mb-2">
1023
- <i class="fas fa-hdd mr-2"></i>
1024
- <h4 class="font-semibold">Disk Analysis</h4>
1025
- </div>
1026
- <div class="space-y-3">
1027
- <div>
1028
- <div class="flex justify-between text-sm mb-1">
1029
- <span>Total Space</span>
1030
- <span>${formatBytes(diskData.totalSpace)}</span>
1031
- </div>
1032
- </div>
1033
- <div>
1034
- <div class="flex justify-between text-sm mb-1">
1035
- <span>Used Space</span>
1036
- <span>${formatBytes(diskData.usedSpace)} (${usedPercentage}%)</span>
1037
- </div>
1038
- <div class="progress-bar">
1039
- <div class="progress-fill" style="width: ${usedPercentage}%"></div>
1040
- </div>
1041
- </div>
1042
- <div>
1043
- <div class="flex justify-between text-sm mb-1">
1044
- <span>Free Space</span>
1045
- <span>${formatBytes(diskData.freeSpace)}</span>
1046
- </div>
1047
- <div class="progress-bar">
1048
- <div class="progress-fill" style="width: ${100 - usedPercentage}%"></div>
1049
- </div>
1050
- </div>
1051
- </div>
1052
- </div>
1053
-
1054
- <div class="mt-4">
1055
- <h4 class="font-semibold mb-2">Disk Usage Breakdown</h4>
1056
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1057
- <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
1058
- <div class="text-blue-600 text-sm font-medium">Temporary Files</div>
1059
- <div class="text-xl font-bold">${formatBytes(diskData.tempFiles)}</div>
1060
- <div class="text-xs mt-1">Can be safely deleted</div>
1061
- </div>
1062
- <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
1063
- <div class="text-purple-600 text-sm font-medium">Duplicate Files</div>
1064
- <div class="text-xl font-bold">${formatBytes(diskData.duplicateFiles)}</div>
1065
- <div class="text-xs mt-1">Potential space savings</div>
1066
- </div>
1067
- <div class="bg-red-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
1068
- <div class="text-red-600 text-sm font-medium">Large Applications</div>
1069
- <div class="text-xl font-bold">${formatBytes(diskData.largeApps)}</div>
1070
- <div class="text-xs mt-1">Consider uninstalling unused apps</div>
1071
- </div>
1072
- <div class="bg-green-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
1073
- <div class="text-green-600 text-sm font-medium">System Files</div>
1074
- <div class="text-xl font-bold">${formatBytes(diskData.usedSpace * 0.4)}</div>
1075
- <div class="text-xs mt-1">Essential system files</div>
1076
- </div>
1077
- </div>
1078
- </div>
1079
-
1080
- <div class="mt-4 p-4 ${usedPercentage > 85 ? 'bg-red-50' : 'bg-green-50'} rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
1081
- <h4 class="font-semibold ${usedPercentage > 85 ? 'text-red-600' : 'text-green-600'} mb-2">
1082
- <i class="fas ${usedPercentage > 85 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
1083
- ${usedPercentage > 85 ? 'Low Disk Space Warning' : 'Disk Space OK'}
1084
- </h4>
1085
- <p class="text-sm">
1086
- ${usedPercentage > 85
1087
- ? 'Your disk is almost full. Consider cleaning up unnecessary files or upgrading your storage.'
1088
- : 'You have sufficient free disk space. No immediate action required.'}
1089
- </p>
1090
- ${usedPercentage > 85
1091
- ? '<button onclick="runTool(\'tempFiles\')" class="mt-2 px-4 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 smooth-transition highlight-button">Clean Temporary Files Now</button>'
1092
- : ''}
1093
- </div>
1094
- `;
1095
- break;
1096
-
1097
- case 'organizeDownloads':
1098
- const downloadsData = generateDownloadsData();
1099
-
1100
- resultHtml = `
1101
- <div class="p-4 bg-teal-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
1102
- <div class="flex items-center text-teal-600 mb-2">
1103
- <i class="fas fa-folder-open mr-2"></i>
1104
- <h4 class="font-semibold">Downloads Organized</h4>
1105
- </div>
1106
- <div class="space-y-3">
1107
- <div>
1108
- <div class="flex justify-between text-sm mb-1">
1109
- <span>Files Processed</span>
1110
- <span>${downloadsData.totalFiles} items</span>
1111
- </div>
1112
- </div>
1113
- <div>
1114
- <div class="flex justify-between text-sm mb-1">
1115
- <span>Space Freed</span>
1116
- <span>${formatBytes(downloadsData.spaceFreed)}</span>
1117
- </div>
1118
- </div>
1119
- </div>
1120
- </div>
1121
-
1122
- <div class="mt-4">
1123
- <h4 class="font-semibold mb-2">Files Organized by Category</h4>
1124
- <div class="space-y-2">
1125
- ${downloadsData.categories.map(cat => `
1126
- <div class="flex items-center justify-between p-2 bg-gray-50 rounded transform transition-all duration-300 hover:scale-[1.01]">
1127
- <div class="flex items-center">
1128
- <i class="${cat.icon} ${cat.color} mr-2"></i>
1129
- <span>${cat.name}</span>
1130
- </div>
1131
- <span class="text-sm font-medium">${cat.count} files</span>
1132
- </div>
1133
- `).join('')}
1134
- </div>
1135
- </div>
1136
-
1137
- <div class="mt-4 p-4 bg-indigo-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
1138
- <h4 class="font-semibold text-indigo-600 mb-2">New Folder Structure</h4>
1139
- <div class="text-sm">
1140
- <div class="flex items-center mb-1">
1141
- <i class="fas fa-folder text-yellow-500 mr-2"></i>
1142
- <span>Downloads/</span>
1143
- </div>
1144
- ${downloadsData.categories.map(cat => `
1145
- <div class="flex items-center ml-4 mb-1">
1146
- <i class="fas fa-folder ${cat.color} mr-2"></i>
1147
- <span>${cat.name}/</span>
1148
- </div>
1149
- `).join('')}
1150
- <div class="flex items-center ml-4">
1151
- <i class="fas fa-folder text-gray-400 mr-2"></i>
1152
- <span>Other/</span>
1153
- </div>
1154
- </div>
1155
- </div>
1156
-
1157
- <div class="mt-4 p-4 bg-green-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
1158
- <h4 class="font-semibold text-green-600 mb-2">Organization Complete</h4>
1159
- <p class="text-sm">Your downloads folder has been successfully organized into categories.</p>
1160
- <button onclick="runTool('organizeDownloads')" class="mt-2 px-4 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 smooth-transition highlight-button">Reorganize Now</button>
1161
- </div>
1162
- `;
1163
- break;
1164
- }
1165
-
1166
- resultsContent.innerHTML = resultHtml;
1167
-
1168
- // Add event listeners for debug sections if this is the system debug tool
1169
- if (tool === 'systemDebug') {
1170
- document.querySelectorAll('.debug-section-toggle').forEach(toggle => {
1171
- toggle.addEventListener('click', function() {
1172
- const section = this.closest('.debug-section-container').querySelector('.debug-section');
1173
- section.classList.toggle('expanded');
1174
- this.querySelector('i').classList.toggle('fa-chevron-down');
1175
- this.querySelector('i').classList.toggle('fa-chevron-up');
1176
- this.querySelector('span').textContent = section.classList.contains('expanded') ? 'Hide Detailed Logs' : 'Show Detailed Logs';
1177
- });
1178
- });
1179
  }
1180
- }
1181
 
1182
- // Close results panel
1183
- function closeResults() {
1184
- document.getElementById('results-panel').classList.add('hidden');
1185
- }
1186
- </script>
1187
- <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=mitznjay/tech-maintenance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1188
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Auth System</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ .auth-container {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 
12
  }
13
+ .form-card {
14
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  transition: all 0.3s ease;
16
  }
17
+ .form-card:hover {
 
 
 
 
 
 
 
 
 
 
 
18
  transform: translateY(-5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
+ .input-field:focus {
21
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
22
  }
23
+ .toggle-form {
24
+ color: #3b82f6;
25
+ cursor: pointer;
26
+ transition: all 0.2s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
+ .toggle-form:hover {
29
+ text-decoration: underline;
 
 
 
 
 
 
 
 
30
  }
31
+ .btn-primary {
32
+ background: linear-gradient(to right, #3b82f6, #6366f1);
33
+ transition: all 0.3s ease;
34
  }
35
+ .btn-primary:hover {
36
+ transform: translateY(-2px);
37
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
38
  }
39
+ .btn-primary:active {
40
+ transform: translateY(0);
41
  }
42
+ .error-message {
43
+ animation: shake 0.5s;
 
44
  }
45
+ @keyframes shake {
46
+ 0%, 100% { transform: translateX(0); }
47
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
48
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
49
  }
50
  </style>
51
  </head>
52
+ <body class="min-h-screen flex items-center justify-center auth-container">
53
+ <div class="w-full max-w-md mx-4">
54
+ <!-- Login Form -->
55
+ <div id="login-form" class="bg-white rounded-xl form-card p-8">
56
+ <div class="text-center mb-8">
57
+ <i class="fas fa-user-shield text-5xl text-blue-500 mb-4"></i>
58
+ <h2 class="text-3xl font-bold text-gray-800">Welcome Back</h2>
59
+ <p class="text-gray-500 mt-2">Login to access your account</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </div>
61
 
62
+ <div id="error-message" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded"></div>
63
+
64
+ <form id="loginForm" class="space-y-6">
65
+ <div>
66
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
67
+ <div class="relative">
68
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
69
+ <i class="fas fa-envelope text-gray-400"></i>
70
  </div>
71
+ <input type="email" id="login-email" required
72
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
73
+ placeholder="your@email.com">
74
  </div>
 
 
 
 
75
  </div>
76
 
77
+ <div>
78
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
79
+ <div class="relative">
80
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
81
+ <i class="fas fa-lock text-gray-400"></i>
82
  </div>
83
+ <input type="password" id="login-password" required
84
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
85
+ placeholder="••••••••">
 
 
 
 
 
 
 
 
 
 
86
  </div>
 
 
 
87
  </div>
88
 
89
+ <div class="flex items-center justify-between">
90
+ <div class="flex items-center">
91
+ <input id="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
92
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
 
 
93
  </div>
94
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-500">Forgot password?</a>
 
 
 
95
  </div>
96
 
97
+ <button type="submit" class="w-full btn-primary text-white py-3 px-4 rounded-lg font-semibold">
98
+ <i class="fas fa-sign-in-alt mr-2"></i> Sign In
99
+ </button>
100
+ </form>
101
+
102
+ <div class="mt-6 text-center">
103
+ <p class="text-gray-600">Don't have an account?
104
+ <span id="show-signup" class="toggle-form font-medium">Sign up</span>
105
+ </p>
106
+ </div>
107
+
108
+ <div class="mt-6">
109
+ <div class="relative">
110
+ <div class="absolute inset-0 flex items-center">
111
+ <div class="w-full border-t border-gray-300"></div>
112
  </div>
113
+ <div class="relative flex justify-center text-sm">
114
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
 
 
 
 
 
 
 
 
 
 
115
  </div>
 
 
 
 
116
  </div>
117
 
118
+ <div class="mt-6 grid grid-cols-3 gap-3">
119
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
120
+ <i class="fab fa-google text-red-500"></i>
121
+ </button>
122
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
123
+ <i class="fab fa-facebook-f text-blue-600"></i>
124
+ </button>
125
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
126
+ <i class="fab fa-twitter text-blue-400"></i>
 
127
  </button>
128
  </div>
129
  </div>
130
  </div>
131
+
132
+ <!-- Signup Form (Hidden by default) -->
133
+ <div id="signup-form" class="bg-white rounded-xl form-card p-8 hidden">
134
+ <div class="text-center mb-8">
135
+ <i class="fas fa-user-plus text-5xl text-blue-500 mb-4"></i>
136
+ <h2 class="text-3xl font-bold text-gray-800">Create Account</h2>
137
+ <p class="text-gray-500 mt-2">Join us today</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </div>
139
+
140
+ <div id="signup-error-message" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded"></div>
141
+
142
+ <form id="signupForm" class="space-y-6">
143
+ <div>
144
+ <label for="signup-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
145
+ <div class="relative">
146
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
147
+ <i class="fas fa-user text-gray-400"></i>
148
+ </div>
149
+ <input type="text" id="signup-name" required
150
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
151
+ placeholder="John Doe">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  </div>
 
 
 
 
 
 
 
 
 
 
153
  </div>
154
 
155
+ <div>
156
+ <label for="signup-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
157
+ <div class="relative">
158
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
159
+ <i class="fas fa-envelope text-gray-400"></i>
160
+ </div>
161
+ <input type="email" id="signup-email" required
162
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
163
+ placeholder="your@email.com">
 
 
 
164
  </div>
 
 
 
 
 
 
 
 
 
 
165
  </div>
166
 
167
+ <div>
168
+ <label for="signup-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
169
+ <div class="relative">
170
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
171
+ <i class="fas fa-lock text-gray-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
+ <input type="password" id="signup-password" required
174
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
175
+ placeholder="••••••••">
 
176
  </div>
177
+ <p class="mt-2 text-xs text-gray-500">Must be at least 8 characters</p>
178
  </div>
179
 
180
+ <div>
181
+ <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
182
+ <div class="relative">
183
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
184
+ <i class="fas fa-lock text-gray-400"></i>
185
+ </div>
186
+ <input type="password" id="confirm-password" required
187
+ class="pl-10 input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
188
+ placeholder="••••••••">
189
+ </div>
 
 
 
 
 
 
190
  </div>
191
 
192
+ <div class="flex items-center">
193
+ <input id="terms" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
194
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
195
+ I agree to the <a href="#" class="text-blue-600 hover:text-blue-500">Terms</a> and <a href="#" class="text-blue-600 hover:text-blue-500">Privacy Policy</a>
196
+ </label>
197
  </div>
198
 
199
+ <button type="submit" class="w-full btn-primary text-white py-3 px-4 rounded-lg font-semibold">
200
+ <i class="fas fa-user-plus mr-2"></i> Sign Up
201
+ </button>
202
+ </form>
203
+
204
+ <div class="mt-6 text-center">
205
+ <p class="text-gray-600">Already have an account?
206
+ <span id="show-login" class="toggle-form font-medium">Sign in</span>
207
+ </p>
208
  </div>
209
  </div>
210
+
211
+ <!-- Success Modal (Hidden by default) -->
212
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
213
+ <div class="bg-white rounded-xl p-8 max-w-sm w-full mx-4 text-center">
214
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
215
+ <i class="fas fa-check text-green-500 text-2xl"></i>
 
 
 
 
 
216
  </div>
217
+ <h3 class="text-2xl font-bold text-gray-800 mb-2" id="success-title">Success!</h3>
218
+ <p class="text-gray-600 mb-6" id="success-message">Your account has been created successfully.</p>
219
+ <button id="close-modal" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-600">
220
+ Continue
221
+ </button>
222
  </div>
223
  </div>
224
+ </div>
225
 
226
  <script>
227
+ // DOM Elements
228
+ const loginForm = document.getElementById('login-form');
229
+ const signupForm = document.getElementById('signup-form');
230
+ const showSignup = document.getElementById('show-signup');
231
+ const showLogin = document.getElementById('show-login');
232
+ const loginFormElement = document.getElementById('loginForm');
233
+ const signupFormElement = document.getElementById('signupForm');
234
+ const errorMessage = document.getElementById('error-message');
235
+ const signupErrorMessage = document.getElementById('signup-error-message');
236
+ const successModal = document.getElementById('success-modal');
237
+ const closeModal = document.getElementById('close-modal');
238
+ const successTitle = document.getElementById('success-title');
239
+ const successMessage = document.getElementById('success-message');
240
 
241
+ // Toggle between login and signup forms
242
+ showSignup.addEventListener('click', () => {
243
+ loginForm.classList.add('hidden');
244
+ signupForm.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  });
246
 
247
+ showLogin.addEventListener('click', () => {
248
+ signupForm.classList.add('hidden');
249
+ loginForm.classList.remove('hidden');
250
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
251
 
252
+ // Close success modal
253
+ closeModal.addEventListener('click', () => {
254
+ successModal.classList.add('hidden');
255
+ });
 
 
 
256
 
257
+ // Login form submission
258
+ loginFormElement.addEventListener('submit', async (e) => {
259
  e.preventDefault();
260
 
261
  const email = document.getElementById('login-email').value;
262
  const password = document.getElementById('login-password').value;
263
 
264
+ try {
265
+ const response = await fetch('/api/auth/login', {
266
+ method: 'POST',
267
+ headers: {
268
+ 'Content-Type': 'application/json',
269
+ },
270
+ body: JSON.stringify({ email, password }),
271
+ });
272
+
273
+ const data = await response.json();
274
+
275
+ if (!response.ok) {
276
+ throw new Error(data.message || 'Login failed');
277
+ }
278
 
279
+ // Store token in localStorage
280
+ localStorage.setItem('token', data.token);
281
+ localStorage.setItem('userName', data.name);
282
 
283
+ // Show success message
284
+ successTitle.textContent = 'Welcome back!';
285
+ successMessage.textContent = `You're now logged in as ${data.name}`;
286
+ successModal.classList.remove('hidden');
287
 
288
+ // Redirect to dashboard after 2 seconds
289
+ setTimeout(() => {
290
+ window.location.href = '/dashboard.html';
291
+ }, 2000);
292
+
293
+ } catch (error) {
294
+ errorMessage.textContent = error.message;
295
+ errorMessage.classList.remove('hidden');
296
+ setTimeout(() => {
297
+ errorMessage.classList.add('hidden');
298
+ }, 5000);
299
  }
300
  });
301
 
302
+ // Signup form submission
303
+ signupFormElement.addEventListener('submit', async (e) => {
304
  e.preventDefault();
305
 
306
  const name = document.getElementById('signup-name').value;
307
  const email = document.getElementById('signup-email').value;
308
  const password = document.getElementById('signup-password').value;
309
+ const confirmPassword = document.getElementById('confirm-password').value;
310
 
311
+ // Validate passwords match
312
  if (password !== confirmPassword) {
313
+ signupErrorMessage.textContent = 'Passwords do not match';
314
+ signupErrorMessage.classList.remove('hidden');
315
+ setTimeout(() => {
316
+ signupErrorMessage.classList.add('hidden');
317
+ }, 5000);
318
  return;
319
  }
320
 
321
+ // Validate terms checkbox
322
+ if (!document.getElementById('terms').checked) {
323
+ signupErrorMessage.textContent = 'You must agree to the terms and conditions';
324
+ signupErrorMessage.classList.remove('hidden');
325
+ setTimeout(() => {
326
+ signupErrorMessage.classList.add('hidden');
327
+ }, 5000);
328
  return;
329
  }
330
 
331
+ try {
332
+ const response = await fetch('/api/auth/signup', {
333
+ method: 'POST',
334
+ headers: {
335
+ 'Content-Type': 'application/json',
336
+ },
337
+ body: JSON.stringify({ name, email, password }),
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  });
339
+
340
+ const data = await response.json();
341
+
342
+ if (!response.ok) {
343
+ throw new Error(data.message || 'Signup failed');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  }
345
+
346
+ // Store token in localStorage
347
+ localStorage.setItem('token', data.token);
348
+ localStorage.setItem('userName', data.name);
349
+
350
+ // Show success message
351
+ successTitle.textContent = 'Account created!';
352
+ successMessage.textContent = `Welcome ${data.name}, your account has been created successfully.`;
353
+ successModal.classList.remove('hidden');
354
+
355
+ // Redirect to dashboard after 2 seconds
356
+ setTimeout(() => {
357
+ window.location.href = '/dashboard.html';
358
+ }, 2000);
359
+
360
+ } catch (error) {
361
+ signupErrorMessage.textContent = error.message;
362
+ signupErrorMessage.classList.remove('hidden');
363
+ setTimeout(() => {
364
+ signupErrorMessage.classList.add('hidden');
365
+ }, 5000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
366
  }
367
+ });
368
 
369
+ // Check if user is already logged in
370
+ document.addEventListener('DOMContentLoaded', () => {
371
+ const token = localStorage.getItem('token');
372
+ if (token) {
373
+
 
374
  </html>
prompts.txt CHANGED
@@ -1,3 +1,6 @@
1
  This is a full-page PC Maintenance web app using TailwindCSS and vanilla JS. Please improve only the frontend code in this HTML file: 1. Keep Tailwind and all existing styles as they are — no rewrites. 2. Add smoother transitions or animations to tool panels and the results display. 3. Ensure all interactive buttons (like login, logout, run tool) are clearly styled and easy to spot. 4. Add a collapsible debug log section with expandable/collapsible toggles. 5. Do not add backend logic or unrelated files. This HTML should remain a standalone working file.
2
  I am building the backend for a PC Maintenance web app. Please create a `server.js` file using Node.js and Express. This is what it should support: 1. SQLite database for storing users (name, email, password) and tool usage logs (tool name, timestamp, user ID). 2. Endpoints for: - POST /signup - POST /login - POST /forgot-password - POST /log-tool-use 3. Make sure CORS is enabled so it can connect to a frontend on a different port (like 5500). 4. No frontend or HTML required in this prompt — just backend setup in one file.
3
- I am building the backend for a PC Maintenance web app. Please create a `server.js` file using Node.js and Express. This is what it should support: 1. SQLite database for storing users (name, email, password) and tool usage logs (tool name, timestamp, user ID). 2. Endpoints for: - POST /signup - POST /login - POST /forgot-password - POST /log-tool-use 3. Make sure CORS is enabled so it can connect to a frontend on a different port (like 5500). 4. No frontend or HTML required in this prompt — just backend setup in one file.
 
 
 
 
1
  This is a full-page PC Maintenance web app using TailwindCSS and vanilla JS. Please improve only the frontend code in this HTML file: 1. Keep Tailwind and all existing styles as they are — no rewrites. 2. Add smoother transitions or animations to tool panels and the results display. 3. Ensure all interactive buttons (like login, logout, run tool) are clearly styled and easy to spot. 4. Add a collapsible debug log section with expandable/collapsible toggles. 5. Do not add backend logic or unrelated files. This HTML should remain a standalone working file.
2
  I am building the backend for a PC Maintenance web app. Please create a `server.js` file using Node.js and Express. This is what it should support: 1. SQLite database for storing users (name, email, password) and tool usage logs (tool name, timestamp, user ID). 2. Endpoints for: - POST /signup - POST /login - POST /forgot-password - POST /log-tool-use 3. Make sure CORS is enabled so it can connect to a frontend on a different port (like 5500). 4. No frontend or HTML required in this prompt — just backend setup in one file.
3
+ I am building the backend for a PC Maintenance web app. Please create a `server.js` file using Node.js and Express. This is what it should support: 1. SQLite database for storing users (name, email, password) and tool usage logs (tool name, timestamp, user ID). 2. Endpoints for: - POST /signup - POST /login - POST /forgot-password - POST /log-tool-use 3. Make sure CORS is enabled so it can connect to a frontend on a different port (like 5500). 4. No frontend or HTML required in this prompt — just backend setup in one file.
4
+ I am building the backend for a PC Maintenance web app. Please create a server.js file using Node.js and Express. This is what it should support: 1. SQLite database for storing users (name, email, password) and tool usage logs (tool name, timestamp, user ID). 2. Endpoints for: - POST /signup - POST /login - POST /forgot-password - POST /log-tool-use 3. Make sure CORS is enabled so it can connect to a frontend on a different port (like 5500). 4. No frontend or HTML required in this prompt — just backend setup in one file.
5
+ Here’s my updated server.js after adding CORS, forgot-password, log-tool-use, and the logs table. Can you confirm it now matches the original backend prompt? "// server.js (clean SQLite version) const express = require('express'); const sqlite3 = require('sqlite3').verbose(); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); const PORT = process.env.PORT || 3000; const SECRET_KEY = 'your-secret-key-123'; app.use(bodyParser.json()); // Serve your frontend (HTML, CSS, JS files from a 'public' folder) app.use(express.static(path.join(__dirname, 'public'))); // SQLite DB setup const db = new sqlite3.Database('./database.db', (err) => { if (err) return console.error('DB connection error:', err.message); console.log('SQLite DB connected'); db.run(` CREATE TABLE IF NOT EXISTS users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); }); // Signup route app.post('/api/auth/signup', async (req, res) => { const { name, email, password } = req.body; if (!name || !email || !password) return res.status(400).json({ message: 'All fields required' }); const hashedPassword = await bcrypt.hash(password, 10); db.run( 'INSERT INTO users (name, email, password) VALUES (?, ?, ?)', [name, email, hashedPassword], function (err) { if (err) { if (err.message.includes('UNIQUE')) return res.status(400).json({ message: 'Email already exists' }); return res.status(500).json({ message: 'DB error' }); } const token = jwt.sign({ id: this.lastID, email }, SECRET_KEY, { expiresIn: '1h' }); res.status(201).json({ token, name }); } ); }); // Login route app.post('/api/auth/login', async (req, res) => { const { email, password } = req.body; if (!email || !password) return res.status(400).json({ message: 'All fields required' }); db.get('SELECT * FROM users WHERE email = ?', [email], async (err, user) => { if (err) return res.status(500).json({ message: 'DB error' }); if (!user) return res.status(400).json({ message: 'User not found' }); const isMatch = await bcrypt.compare(password, user.password); if (!isMatch) return res.status(400).json({ message: 'Invalid password' }); const token = jwt.sign({ id: user.id, email: user.email }, SECRET_KEY, { expiresIn: '1h' }); res.json({ token, name: user.name }); }); }); app.listen(PORT, () => { console.log(` Server running at http://localhost:${PORT}`); });"
6
+ Here’s my updated server.js after adding CORS, forgot-password, log-tool-use, and the logs table. Can you confirm it now matches the original backend prompt? // server.js (clean SQLite version) const express = require('express'); const sqlite3 = require('sqlite3').verbose(); const bcrypt = require('bcryptjs'); const jwt = require('jsonwebtoken'); const bodyParser = require('body-parser'); const path = require('path'); const app = express(); const PORT = process.env.PORT || 3000; const SECRET_KEY = 'your-secret-key-123'; app.use(bodyParser.json()); // Serve your frontend (HTML, CSS, JS files from a 'public' folder) app.use(express.static(path.join(__dirname, 'public'))); // SQLite DB setup const db = new sqlite3.Database('./database.db', (err) => { if (err) return console.error('DB connection error:', err.message); console.log('SQLite DB connected'); db.run(` CREATE TABLE IF NOT EXISTS users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); }); // Signup route app.post('/api/auth/signup', async (req, res) => { const { name, email, password } = req.body; if (!name || !email || !password) return res.status(400).json({ message: 'All fields required' }); const hashedPassword = await bcrypt.hash(password, 10); db.run( 'INSERT INTO users (name, email, password) VALUES (?, ?, ?)', [name, email, hashedPassword], function (err) { if (err) { if (err.message.includes('UNIQUE')) return res.status(400).json({ message: 'Email already exists' }); return res.status(500).json({ message: 'DB error' }); } const token = jwt.sign({ id: this.lastID, email }, SECRET_KEY, { expiresIn: '1h' }); res.status(201).json({ token, name }); } ); }); // Login route app.post('/api/auth/login', async (req, res) => { const { email, password } = req.body; if (!email || !password) return res.status(400).json({ message: 'All fields required' }); db.get('SELECT * FROM users WHERE email = ?', [email], async (err, user) => { if (err) return res.status(500).json({ message: 'DB error' }); if (!user) return res.status(400).json({ message: 'User not found' }); const isMatch = await bcrypt.compare(password, user.password); if (!isMatch) return res.status(400).json({ message: 'Invalid password' }); const token = jwt.sign({ id: user.id, email: user.email }, SECRET_KEY, { expiresIn: '1h' }); res.json({ token, name: user.name }); }); }); app.listen(PORT, () => { console.log(` Server running at http://localhost:${PORT}`); });