Hugging Face's logo

Spaces:
mitznjay
/
tech-maintenance
Running

App Files Community
mitznjay commited on
Commit
f4cc507
·
verified ·
1 Parent(s): 2b6cb73

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +834 -519
  2. prompts.txt +6 -1
index.html CHANGED
@@ -7,73 +7,109 @@
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
- /* Custom animations */
11
  @keyframes fadeIn {
12
  from { opacity: 0; }
13
  to { opacity: 1; }
14
  }
 
 
 
 
15
  .fade-in {
16
  animation: fadeIn 0.5s ease-in-out;
17
  }
18
-
19
- /* Custom gradient */
 
20
  .gradient-bg {
21
  background: linear-gradient(135deg, #6e8efb, #a777e3);
22
  }
23
-
24
- /* Custom card shadow */
25
  .card-shadow {
26
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
27
  }
28
-
29
- /* Custom transition */
30
  .smooth-transition {
31
  transition: all 0.3s ease;
32
  }
33
-
34
- /* Progress bar */
35
  .progress-bar {
36
  height: 8px;
37
  border-radius: 4px;
38
  background-color: #e2e8f0;
39
  overflow: hidden;
40
  }
41
-
42
  .progress-fill {
43
  height: 100%;
44
  background: linear-gradient(90deg, #6e8efb, #a777e3);
45
  transition: width 0.5s ease;
46
  }
47
-
48
- /* Tool card hover effect */
49
  .tool-card:hover {
50
  transform: translateY(-5px);
51
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
52
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </style>
54
  </head>
55
  <body class="font-sans bg-gray-50">
56
  <!-- Navigation -->
57
  <nav class="gradient-bg text-white shadow-md">
58
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
59
- <div class="flex items-center space-x-2">
60
- <i class="fas fa-laptop-code text-2xl"></i>
61
- <a href="#" onclick="showPage('home')" class="text-xl font-bold">Tech PC Maintenance</a>
62
- </div>
63
- <div class="hidden md:flex space-x-6">
64
- <a href="#" onclick="showPage('home')" class="hover:text-gray-200 smooth-transition">Home</a>
65
- <a href="#" onclick="showPage('login')" class="hover:text-gray-200 smooth-transition">Login</a>
66
- <a href="#" onclick="showPage('signup')" class="hover:text-gray-200 smooth-transition">Sign Up</a>
 
 
 
 
 
 
 
 
 
67
  </div>
68
- <button id="mobile-menu-button" class="md:hidden focus:outline-none">
69
- <i class="fas fa-bars text-2xl"></i>
70
- </button>
71
  </div>
72
- <!-- Mobile menu -->
73
- <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-4 py-2">
74
- <a href="#" onclick="showPage('home')" class="block py-2 hover:text-gray-200 smooth-transition">Home</a>
75
- <a href="#" onclick="showPage('login')" class="block py-2 hover:text-gray-200 smooth-transition">Login</a>
76
- <a href="#" onclick="showPage('signup')" class="block py-2 hover:text-gray-200 smooth-transition">Sign Up</a>
 
 
 
77
  </div>
78
  </nav>
79
 
@@ -81,56 +117,99 @@
81
  <div class="container mx-auto px-4 py-8">
82
  <!-- Home Page -->
83
  <div id="home-page" class="fade-in">
84
- <div class="text-center mb-12">
85
- <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Tech PC Maintenance Center</h1>
86
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Your one-stop solution for keeping your computer running smoothly and efficiently.</p>
87
  </div>
88
 
89
- <div class="grid md:grid-cols-3 gap-8 mb-12">
90
- <div class="bg-white rounded-lg p-6 card-shadow smooth-transition hover:transform hover:-translate-y-1">
91
- <div class="text-indigo-600 mb-4">
92
- <i class="fas fa-tools text-4xl"></i>
 
 
 
93
  </div>
94
- <h3 class="text-xl font-semibold mb-2">Easy Maintenance Tools</h3>
95
- <p class="text-gray-600">Simple, beginner-friendly tools to optimize your computer's performance.</p>
 
 
96
  </div>
97
 
98
- <div class="bg-white rounded-lg p-6 card-shadow smooth-transition hover:transform hover:-translate-y-1">
99
- <div class="text-indigo-600 mb-4">
100
- <i class="fas fa-shield-alt text-4xl"></i>
 
 
 
101
  </div>
102
- <h3 class="text-xl font-semibold mb-2">Security Checks</h3>
103
- <p class="text-gray-600">Basic security scans to help protect your system from common threats.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </div>
105
 
106
- <div class="bg-white rounded-lg p-6 card-shadow smooth-transition hover:transform hover:-translate-y-1">
107
- <div class="text-indigo-600 mb-4">
108
- <i class="fas fa-chart-line text-4xl"></i>
 
 
 
109
  </div>
110
- <h3 class="text-xl font-semibold mb-2">Performance Tracking</h3>
111
- <p class="text-gray-600">Monitor your system's health and get recommendations for improvements.</p>
 
 
112
  </div>
113
- </div>
114
-
115
- <div class="bg-white rounded-lg p-8 card-shadow max-w-4xl mx-auto">
116
- <h2 class="text-2xl font-bold mb-4 text-center">Getting Started</h2>
117
- <div class="grid md:grid-cols-2 gap-6">
118
- <div class="flex flex-col items-center text-center">
119
- <div class="bg-indigo-100 rounded-full p-4 mb-4">
120
- <i class="fas fa-user-plus text-indigo-600 text-2xl"></i>
121
  </div>
122
- <h3 class="text-xl font-semibold mb-2">New User?</h3>
123
- <p class="text-gray-600 mb-4">Create an account to access all our maintenance tools.</p>
124
- <button onclick="showPage('signup')" class="gradient-bg text-white px-6 py-2 rounded-full hover:opacity-90 smooth-transition">Sign Up</button>
125
  </div>
126
- <div class="flex flex-col items-center text-center">
127
- <div class="bg-indigo-100 rounded-full p-4 mb-4">
128
- <i class="fas fa-sign-in-alt text-indigo-600 text-2xl"></i>
 
 
 
 
 
 
 
129
  </div>
130
- <h3 class="text-xl font-semibold mb-2">Returning User?</h3>
131
- <p class="text-gray-600 mb-4">Log in to access your dashboard and tools.</p>
132
- <button onclick="showPage('login')" class="gradient-bg text-white px-6 py-2 rounded-full hover:opacity-90 smooth-transition">Login</button>
133
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  </div>
135
  </div>
136
  </div>
@@ -156,6 +235,10 @@
156
 
157
  <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Login</button>
158
 
 
 
 
 
159
  <div class="text-center">
160
  <p class="text-gray-600">Don't have an account? <a href="#" onclick="showPage('signup')" class="text-indigo-600 hover:underline">Sign up</a></p>
161
  </div>
@@ -184,12 +267,12 @@
184
 
185
  <div class="mb-4">
186
  <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
187
- <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" placeholder="••••••••" required>
188
  </div>
189
 
190
  <div class="mb-6">
191
  <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
192
- <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" placeholder="••••••••" required>
193
  </div>
194
 
195
  <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Create Account</button>
@@ -201,232 +284,117 @@
201
  </div>
202
  </div>
203
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  <!-- Dashboard Page -->
205
  <div id="dashboard-page" class="hidden fade-in">
206
- <div class="max-w-6xl mx-auto">
207
- <!-- Dashboard Header -->
208
- <div class="bg-white rounded-lg p-6 card-shadow mb-8">
209
- <div class="flex flex-col md:flex-row items-center">
210
- <div class="md:mr-6 mb-4 md:mb-0">
211
- <div class="bg-indigo-100 rounded-full p-4">
212
- <i class="fas fa-user-cog text-indigo-600 text-4xl"></i>
 
 
 
 
213
  </div>
 
214
  </div>
215
- <div class="flex-1">
216
- <h2 class="text-2xl font-bold text-gray-800">Welcome to Tech PC Maintenance Center</h2>
217
- <p class="text-gray-600">Keep your computer running smoothly with these easy-to-use tools.</p>
218
- </div>
219
- <div class="mt-4 md:mt-0">
220
- <button onclick="logout()" class="text-indigo-600 hover:text-indigo-800 smooth-transition px-4 py-2 border border-indigo-600 rounded-lg">
221
- <i class="fas fa-sign-out-alt mr-2"></i> Logout
222
- </button>
223
- </div>
224
  </div>
225
 
226
- <!-- System Overview -->
227
- <div class="mt-6 pt-6 border-t">
228
- <h3 class="text-xl font-semibold mb-4">System Overview</h3>
229
- <div class="grid md:grid-cols-3 gap-4 mb-4">
230
- <div class="bg-gray-50 p-4 rounded-lg">
231
- <div class="flex justify-between items-center mb-2">
232
- <span class="font-medium">Disk Space</span>
233
- <span class="text-sm text-gray-500">75% used</span>
234
- </div>
235
- <div class="progress-bar">
236
- <div class="progress-fill" style="width: 75%"></div>
237
- </div>
238
- </div>
239
- <div class="bg-gray-50 p-4 rounded-lg">
240
- <div class="flex justify-between items-center mb-2">
241
- <span class="font-medium">Memory</span>
242
- <span class="text-sm text-gray-500">60% used</span>
243
- </div>
244
- <div class="progress-bar">
245
- <div class="progress-fill" style="width: 60%"></div>
246
- </div>
247
- </div>
248
- <div class="bg-gray-50 p-4 rounded-lg">
249
- <div class="flex justify-between items-center mb-2">
250
- <span class="font-medium">CPU</span>
251
- <span class="text-sm text-gray-500">45% used</span>
252
- </div>
253
- <div class="progress-bar">
254
- <div class="progress-fill" style="width: 45%"></div>
255
- </div>
256
  </div>
 
257
  </div>
 
 
 
 
258
  </div>
259
- </div>
260
-
261
- <!-- Maintenance Tools -->
262
- <div class="mb-8">
263
- <h3 class="text-xl font-semibold mb-4 text-gray-800">Cleaning Tools</h3>
264
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
265
- <!-- Clean Temporary Files -->
266
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
267
- <div class="flex items-center mb-3">
268
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
269
- <i class="fas fa-trash-alt text-indigo-600"></i>
270
- </div>
271
- <h4 class="font-semibold">Clean Temporary Files</h4>
272
- </div>
273
- <p class="text-sm text-gray-600 mb-4">Safely remove temporary files that accumulate over time.</p>
274
- <button onclick="runTool('tempFiles')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
275
- Run Cleaner
276
- </button>
277
- </div>
278
-
279
- <!-- Delete Browser Cache -->
280
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
281
- <div class="flex items-center mb-3">
282
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
283
- <i class="fas fa-globe text-indigo-600"></i>
284
- </div>
285
- <h4 class="font-semibold">Delete Browser Cache</h4>
286
- </div>
287
- <p class="text-sm text-gray-600 mb-4">Clear cached files from your web browsers.</p>
288
- <div class="flex space-x-2 mb-3">
289
- <button onclick="selectBrowser('chrome')" class="flex-1 bg-gray-100 text-gray-700 py-1 rounded text-xs hover:bg-gray-200 smooth-transition">
290
- <i class="fab fa-chrome mr-1"></i> Chrome
291
- </button>
292
- <button onclick="selectBrowser('firefox')" class="flex-1 bg-gray-100 text-gray-700 py-1 rounded text-xs hover:bg-gray-200 smooth-transition">
293
- <i class="fab fa-firefox mr-1"></i> Firefox
294
- </button>
295
- <button onclick="selectBrowser('edge')" class="flex-1 bg-gray-100 text-gray-700 py-1 rounded text-xs hover:bg-gray-200 smooth-transition">
296
- <i class="fab fa-edge mr-1"></i> Edge
297
- </button>
298
  </div>
299
- <button onclick="runTool('browserCache')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
300
- Clear Cache
301
- </button>
302
  </div>
303
-
304
- <!-- Check Disk Space -->
305
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
306
- <div class="flex items-center mb-3">
307
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
308
- <i class="fas fa-hdd text-indigo-600"></i>
309
- </div>
310
- <h4 class="font-semibold">Check Disk Space</h4>
 
 
311
  </div>
312
- <p class="text-sm text-gray-600 mb-4">See how much free space is available on your drives.</p>
313
- <button onclick="runTool('diskSpace')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
314
- Check Now
315
- </button>
316
  </div>
 
 
 
 
317
  </div>
318
  </div>
319
 
320
- <!-- Organizing Tools -->
321
- <div class="mb-8">
322
- <h3 class="text-xl font-semibold mb-4 text-gray-800">Organizing Tools</h3>
323
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
324
- <!-- Organize Downloads Folder -->
325
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
326
- <div class="flex items-center mb-3">
327
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
328
- <i class="fas fa-folder-open text-indigo-600"></i>
329
- </div>
330
- <h4 class="font-semibold">Organize Downloads</h4>
331
- </div>
332
- <p class="text-sm text-gray-600 mb-4">Group files by type (Documents, Images, Videos).</p>
333
- <button onclick="runTool('organizeDownloads')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
334
- Organize Now
335
- </button>
336
- </div>
337
-
338
- <!-- Scan for Large Files -->
339
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
340
- <div class="flex items-center mb-3">
341
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
342
- <i class="fas fa-search-plus text-indigo-600"></i>
343
- </div>
344
- <h4 class="font-semibold">Find Large Files</h4>
345
- </div>
346
- <p class="text-sm text-gray-600 mb-4">Identify files over 500MB that may be taking up space.</p>
347
- <button onclick="runTool('largeFiles')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
348
- Start Scan
349
- </button>
350
- </div>
351
-
352
- <!-- Duplicate File Finder -->
353
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
354
- <div class="flex items-center mb-3">
355
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
356
- <i class="fas fa-copy text-indigo-600"></i>
357
- </div>
358
- <h4 class="font-semibold">Duplicate File Finder</h4>
359
- </div>
360
- <p class="text-sm text-gray-600 mb-4">Scan selected folders for duplicate files.</p>
361
- <div class="mb-3">
362
- <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
363
- <option>Select folder to scan</option>
364
- <option>Downloads</option>
365
- <option>Documents</option>
366
- <option>Pictures</option>
367
- <option>Desktop</option>
368
- </select>
369
- </div>
370
- <button onclick="runTool('duplicateFiles')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
371
- Find Duplicates
372
- </button>
373
- </div>
374
- </div>
375
  </div>
376
 
377
- <!-- Management Tools -->
378
- <div class="mb-8">
379
- <h3 class="text-xl font-semibold mb-4 text-gray-800">Management Tools</h3>
380
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
381
- <!-- Startup Program Manager -->
382
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
383
- <div class="flex items-center mb-3">
384
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
385
- <i class="fas fa-rocket text-indigo-600"></i>
386
- </div>
387
- <h4 class="font-semibold">Startup Manager</h4>
388
- </div>
389
- <p class="text-sm text-gray-600 mb-4">Control which programs launch at startup.</p>
390
- <button onclick="runTool('startupPrograms')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
391
- Manage Startup
392
- </button>
393
- </div>
394
-
395
- <!-- Backup Reminder -->
396
- <div class="bg-white rounded-lg p-5 card-shadow smooth-transition tool-card">
397
- <div class="flex items-center mb-3">
398
- <div class="bg-indigo-100 p-3 rounded-full mr-3">
399
- <i class="fas fa-save text-indigo-600"></i>
400
- </div>
401
- <h4 class="font-semibold">Backup Reminder</h4>
402
- </div>
403
- <p class="text-sm text-gray-600 mb-4">Set a reminder to back up your important files.</p>
404
- <div class="mb-3">
405
- <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
406
- <option>Select folder to back up</option>
407
- <option>Documents</option>
408
- <option>Pictures</option>
409
- <option>Desktop</option>
410
- </select>
411
- </div>
412
- <button onclick="runTool('backupReminder')" class="w-full bg-indigo-50 text-indigo-600 py-2 rounded-lg hover:bg-indigo-100 smooth-transition">
413
- Set Reminder
414
- </button>
415
- </div>
416
- </div>
417
  </div>
418
 
419
- <!-- Results Panel (hidden by default) -->
420
- <div id="results-panel" class="hidden bg-white rounded-lg p-6 card-shadow mb-8">
421
- <div class="flex justify-between items-center mb-4">
422
- <h3 class="text-xl font-semibold">Results</h3>
423
- <button onclick="closeResults()" class="text-gray-500 hover:text-gray-700">
424
- <i class="fas fa-times"></i>
425
- </button>
426
- </div>
427
- <div id="results-content" class="text-gray-700">
428
- <!-- Results will be displayed here -->
429
- </div>
430
  </div>
431
  </div>
432
  </div>
@@ -435,28 +403,38 @@
435
  <!-- Footer -->
436
  <footer class="bg-gray-800 text-white py-8">
437
  <div class="container mx-auto px-4">
438
- <div class="flex flex-col md:flex-row justify-between items-center">
439
- <div class="mb极速4 md:mb-0">
440
- <div class="flex items-center">
441
- <i class="fas fa-laptop-code text-2xl mr-2"></i>
442
- <span class="text-xl font-bold">Tech PC Maintenance</span>
443
- </div>
444
- <p class="text-gray-400 mt-2">Keeping your computer in top shape.</p>
445
- </div>
446
- <div class="flex space-x-6">
447
- <a href="#" class="text-gray-400 hover:text-white smooth-transition"><i class="fab fa-facebook-f"></i></a>
448
- <a href="#" class="text-gray-400 hover:text-white smooth-transition"><i class="fab fa-twitter"></i></a>
449
- <a href="#" class="text-gray-400 hover:text-white smooth-transition"><i class="fab fa-instagram"></i></a>
450
- <a href="#" class="text-gray-400 hover:text-white smooth-transition"><i class="fab fa-github"></i></a>
451
- </div>
452
- </div>
453
- <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
454
  <p>&copy; 2023 Tech PC Maintenance Center. All rights reserved.</p>
 
 
 
 
 
455
  </div>
456
  </div>
457
  </footer>
458
 
459
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
460
  // Mobile menu toggle
461
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
462
  const menu = document.getElementById('mobile-menu');
@@ -465,67 +443,67 @@
465
 
466
  // Show specific page and hide others
467
  function showPage(pageId) {
468
- // Hide all pages
469
  document.getElementById('home-page').classList.add('hidden');
470
  document.getElementById('login-page').classList.add('hidden');
471
  document.getElementById('signup-page').classList.add('hidden');
472
  document.getElementById('dashboard-page').classList.add('hidden');
 
473
 
474
- // Show selected page
475
  document.getElementById(`${pageId}-page`).classList.remove('hidden');
476
-
477
- // Close mobile menu if open
478
  document.getElementById('mobile-menu').classList.add('hidden');
479
-
480
- // Scroll to top
481
  window.scrollTo(0, 0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
482
  }
483
 
484
  // Handle login form submission
485
- document.getElementById('login-form').addEventListener('submit', async function(e) {
486
  e.preventDefault();
487
 
488
  const email = document.getElementById('login-email').value;
489
  const password = document.getElementById('login-password').value;
490
 
491
- try {
492
- const response = await fetch('/api/auth/login', {
493
- method: 'POST',
494
- headers: {
495
- 'Content-Type': 'application/json'
496
- },
497
- body: JSON.stringify({ email, password })
498
- });
 
 
499
 
500
- const data = await response.json();
 
501
 
502
- if (response.ok) {
503
- // Store the token in localStorage
504
- localStorage.setItem('token', data.token);
505
- localStorage.setItem('userName', data.name);
506
-
507
- // Show dashboard
508
- showPage('dashboard');
509
-
510
- // Update welcome message
511
- const welcomeMessage = document.querySelector('#dashboard-page .text-2xl');
512
- if (welcomeMessage) {
513
- welcomeMessage.textContent = `Welcome back, ${data.name}!`;
514
- }
515
- } else {
516
- alert(data.message || 'Login failed');
517
- }
518
- } catch (error) {
519
- console.error('Login error:', error);
520
- alert('An error occurred during login');
521
  }
522
-
523
- // Clear form
524
- this.reset();
525
  });
526
 
527
  // Handle signup form submission
528
- document.getElementById('signup-form').addEventListener('submit', async function(e) {
529
  e.preventDefault();
530
 
531
  const name = document.getElementById('signup-name').value;
@@ -538,46 +516,53 @@
538
  return;
539
  }
540
 
541
- try {
542
- const response = await fetch('/api/auth/signup', {
543
- method: 'POST',
544
- headers: {
545
- 'Content-Type': 'application/json'
546
- },
547
- body: JSON.stringify({ name, email, password })
548
- });
549
-
550
- const data = await response.json();
551
-
552
- if response.ok) {
553
- alert('Account created successfully! Please login.');
554
- showPage('login');
555
- } else {
556
- alert(data.message || 'Signup failed');
557
- }
558
- } catch (error) {
559
- console.error('Signup error:', error);
560
- alert('An error occurred during signup');
561
  }
562
 
 
 
 
 
 
 
 
 
 
 
 
563
  // Clear form
564
  this.reset();
565
  });
566
 
 
 
 
 
 
 
 
 
 
567
  // Check if user is logged in on page load
568
  document.addEventListener('DOMContentLoaded', function() {
569
- const token = localStorage.getItem('token');
570
- const userName = localStorage.getItem('userName');
571
 
572
- if (token && userName) {
573
- // Show dashboard
574
  showPage('dashboard');
575
-
576
- // Update welcome message
577
- const welcomeMessage = document.querySelector('#dashboard-page .text-2xl');
578
- if (welcomeMessage) {
579
- welcomeMessage.textContent = `Welcome back, ${userName}!`;
580
- }
581
  } else {
582
  showPage('home');
583
  }
@@ -585,20 +570,16 @@
585
 
586
  // Logout function
587
  function logout() {
588
- // Clear localStorage
589
- localStorage.removeItem('token');
590
- localStorage.removeItem('userName');
591
-
592
- // Go back to home
593
  showPage('home');
594
  }
595
 
 
596
  // Browser selection for cache clearing
597
  let selectedBrowser = null;
598
 
599
  function selectBrowser(browser) {
600
  selectedBrowser = browser;
601
- // Update UI to show selected browser
602
  const buttons = document.querySelectorAll('[onclick^="selectBrowser"]');
603
  buttons.forEach(btn => {
604
  if (btn.getAttribute('onclick').includes(browser)) {
@@ -611,199 +592,533 @@
611
  });
612
  }
613
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
614
  // Run maintenance tool
615
  function runTool(tool) {
616
  const resultsPanel = document.getElementById('results-panel');
617
  const resultsContent = document.getElementById('results-content');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
618
 
619
- // Show loading state
620
- resultsContent.innerHTML = '<div class="text-center py-8"><i class="fas fa-spinner fa-spin text-2xl text-indigo-600 mb-2"></i><p>Processing...</p></div>';
621
  resultsPanel.classList.remove('hidden');
 
 
 
 
 
 
622
 
623
- // Simulate processing delay
624
- setTimeout(() => {
625
- let resultHtml = '';
626
-
627
- switch(tool) {
628
- case 'tempFiles':
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
629
  resultHtml = `
630
  <div class="p-4 bg-green-50 rounded-lg mb-4">
631
  <div class="flex items-center text-green-600 mb-2">
632
  <i class="fas fa-check-circle mr-2"></i>
633
- <h4 class="font-semibold">Temporary Files Cleaned</h4>
634
  </div>
635
- <p class="text-sm text-gray-700">Successfully removed 1.2GB of temporary files.</p>
636
  <div class="mt-3 text-xs text-gray-500">
637
- <p><i class="fas fa-info-circle mr-1"></i> This action is safe and only removes files that can be safely deleted.</p>
 
 
 
 
 
 
 
 
 
 
638
  </div>
639
  </div>
640
  `;
641
- break;
642
-
643
- case 'browserCache':
644
- if (!selectedBrowser) {
645
- resultHtml = `
646
- <div class="p极速4 bg-yellow-50 rounded-lg mb-4">
647
- <div class="flex items-center text-yellow-600 mb-2">
648
- <i class="fas fa-exclamation-triangle mr-2"></i>
649
- <h4 class="font-semibold">No Browser Selected</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
650
  </div>
651
- <p class="text-sm text-gray-700">Please select a browser to clear its cache.</p>
652
  </div>
653
- `;
654
- } else {
655
- resultHtml = `
656
- <div class="p-4 bg-green-50 rounded-lg mb-4">
657
- <div class="flex items-center text-green-600 mb-2">
658
- <i class="fas fa-check-circle mr-2"></i>
659
- <h4 class="font-semibold">Browser Cache Cleared</h4>
660
  </div>
661
- <p class="text-sm text-gray-700">Successfully cleared cache for ${selectedBrowser.charAt(0).toUpperCase() + selectedBrowser.slice(1)}.</p>
662
- <div class="mt-3 text-xs text-gray-500">
663
- <p><i class="fas fa-info-circle mr-1"></i> You may need to log in again to some websites.</p>
664
  </div>
665
  </div>
666
- `;
667
- }
668
- break;
 
 
 
 
 
 
 
 
669
 
670
- case 'diskSpace':
671
- resultHtml = `
672
- <div class="mb-4">
673
- <h4 class="font-semibold mb-2">Disk Space Overview</h4>
674
- <p class="text-sm text-gray-700 mb-3">These are your current disk space statistics:</p>
675
- <div class="space-y-3">
676
- <div>
677
- <div class="flex justify-between text-sm mb-1">
678
- <span>C: Drive (System)</span>
679
- <span>75GB free of 250GB</span>
680
- </div>
681
- <div class="progress-bar">
682
- <div class="progress-fill" style="width: 70%"></div>
683
  </div>
684
  </div>
685
- <div>
686
- <div class="flex justify-between text-sm mb-1">
687
- <span>D: Drive (Data)</span>
688
- <span>320GB free of 500GB</span>
689
- </div>
690
- <div class="progress-bar">
691
- <div class="progress-fill" style="width: 36%"></div>
692
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
693
  </div>
694
  </div>
695
  </div>
696
- <div class="bg-blue-50 p-3 rounded-lg text-sm text-blue-700">
697
- <i class="fas fa-lightbulb mr-2"></i> Consider cleaning temporary files or moving large files to free up space.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
698
  </div>
699
- `;
700
- break;
701
 
702
- case 'organizeDownloads':
703
- resultHtml = `
704
- <div class="p-4 bg-green-50 rounded-lg mb-4">
705
- <div class="flex items-center text-green-600 mb-2">
706
- <i class="fas fa-check-circle mr-2"></i>
707
- <h4 class="font-semibold">Downloads Organized</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
708
  </div>
709
- <p class="text-sm text-gray-700 mb-3">Files in your Downloads folder have been sorted into subfolders:</p>
710
- <ul class="text-sm text-gray-700 space-y-1">
711
- <li><i class="fas fa-folder text-indigo-500 mr-2"></i> Documents: 12 files</li>
712
- <li><i class="fas fa-folder text-indigo-500 mr-2"></i> Images: 8 files</li>
713
- <li><i class="fas fa-folder text-indigo-500 mr-2"></i> Videos: 3 files</li>
714
- <li><i class="fas fa-folder text-indigo-500 mr-2"></i> Archives: 5 files</li>
715
- </ul>
716
  </div>
717
- `;
718
- break;
719
 
720
- case 'largeFiles':
721
- resultHtml = `
722
- <div class="mb-4">
723
- <h4 class="font-semibold mb-2">Large Files Found</h4>
724
- <p class="text-sm text-gray-700 mb-3">These files are over 500MB and may be taking up significant space:</p>
725
- <div class="border rounded-lg overflow-hidden">
726
- <table class="min-w-full text-sm">
727
- <thead class="bg-gray-50">
728
- <tr>
729
- <th class="px-4 py-2 text-left">File</th>
730
- <th class="px-4 py-2 text-left">Size</th>
731
- <th class="px-4 py-2 text-left">Location</th>
732
- </tr>
733
- </thead>
734
- <tbody class="divide-y divide-gray-200">
735
- <tr>
736
- <td class="px-4 py-2">backup_2023.zip</td>
737
- <td class="px-4 py-2">1.8GB</td>
738
- <td class="px-4 py-2">C:\Backups</td>
739
- </tr>
740
- <tr>
741
- <td class="px-4 py-2">movie.mp4</td>
742
- <td class="px-4 py-2">1.2GB</td>
743
- <td class="px-4 py-2">D:\Videos</td>
744
- </tr>
745
- <tr>
746
- <td class="px-4 py-2">game_installer.exe</td>
747
- <td class="px-4 py-2">750MB</td>
748
- <td class="px-4 py-2">C:\Downloads</td>
749
- </tr>
750
- </tbody>
751
- </table>
752
  </div>
753
  </div>
754
- <div class="bg-blue-50 p-3 rounded-lg text-sm text-blue-700">
755
- <i class="fas fa-lightbulb mr-2"></i> Consider moving large files you no longer need to an external drive or cloud storage.
756
- </div>
757
- `;
758
- break;
759
 
760
- case 'startupPrograms':
761
- resultHtml = `
762
- <div class="mb-4">
763
- <h4 class="font-semibold mb-2">Startup Programs</h4>
764
- <p class="text-sm text-gray-700 mb-3">These programs launch when your computer starts:</p>
765
- <div class="border rounded-lg overflow-hidden">
766
- <table class="min-w-full text-sm">
767
- <thead class="bg-gray-50">
768
- <tr>
769
- <th class="px-4 py-2 text-left">Program</th>
770
- <th class="px-4 py-2 text-left">Impact</th>
771
- <th class="px-4 py-2 text-left">Status</th>
772
- <th class="px-4 py-2 text-left">Action</th>
773
- </tr>
774
- </thead>
775
- <tbody class="divide-y divide-gray-200">
776
- <tr>
777
- <td class="px-4 py-2">Dropbox</td>
778
- <td class="px-4 py-2">High</td>
779
- <td class="px-4 py-2">Enabled</td>
780
- <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Disable</button></td>
781
- </tr>
782
- <tr>
783
- <td class="px-4 py-2">Spotify</td>
784
- <td class="px-4 py-2">Medium</td>
785
- <td class="px-4 py-2">Enabled</td>
786
- <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Disable</button></td>
787
- </tr>
788
- <tr>
789
- <td class="px-4 py-2">Steam Client</td>
790
- <td class="px-4 py-2">High</td>
791
- <td class="px-4 py-2">Enabled</td>
792
- <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Disable</button></td>
793
- </tr>
794
- </tbody>
795
- </table>
796
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
797
  </div>
798
- <div class="bg-blue-50 p-3 rounded-lg text-sm text-blue-700">
799
- <i class="fas fa-lightbulb mr-2"></i> Disabling unnecessary startup programs can significantly improve boot time.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
800
  </div>
801
- `;
802
- break;
803
- }
804
-
805
- resultsContent.innerHTML = resultHtml;
806
- }, 1500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
807
  }
808
 
809
  // Close results panel
 
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
  .fade-in {
19
  animation: fadeIn 0.5s ease-in-out;
20
  }
21
+ .slide-up {
22
+ animation: slideUp 0.4s ease-out;
23
+ }
24
  .gradient-bg {
25
  background: linear-gradient(135deg, #6e8efb, #a777e3);
26
  }
 
 
27
  .card-shadow {
28
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
29
  }
 
 
30
  .smooth-transition {
31
  transition: all 0.3s ease;
32
  }
 
 
33
  .progress-bar {
34
  height: 8px;
35
  border-radius: 4px;
36
  background-color: #e2e8f0;
37
  overflow: hidden;
38
  }
 
39
  .progress-fill {
40
  height: 100%;
41
  background: linear-gradient(90deg, #6e8efb, #a777e3);
42
  transition: width 0.5s ease;
43
  }
 
 
44
  .tool-card:hover {
45
  transform: translateY(-5px);
46
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
47
  }
48
+ .log-entry {
49
+ border-left: 3px solid #6e8efb;
50
+ padding-left: 10px;
51
+ margin-bottom: 8px;
52
+ }
53
+ .log-entry.error {
54
+ border-left-color: #ef4444;
55
+ }
56
+ .log-entry.warning {
57
+ border-left-color: #f59e0b;
58
+ }
59
+ .log-entry.success {
60
+ border-left-color: #10b981;
61
+ }
62
+ .log-entry.info {
63
+ border-left-color: #3b82f6;
64
+ }
65
+ .log-timestamp {
66
+ font-size: 0.75rem;
67
+ color: #6b7280;
68
+ }
69
+ .log-message {
70
+ font-size: 0.875rem;
71
+ }
72
+ .debug-section {
73
+ max-height: 0;
74
+ overflow: hidden;
75
+ transition: max-height 0.5s ease;
76
+ }
77
+ .debug-section.expanded {
78
+ max-height: 500px;
79
+ }
80
  </style>
81
  </head>
82
  <body class="font-sans bg-gray-50">
83
  <!-- Navigation -->
84
  <nav class="gradient-bg text-white shadow-md">
85
+ <div class="container mx-auto px-4 py-3">
86
+ <div class="flex justify-between items-center">
87
+ <div class="flex items-center">
88
+ <i class="fas fa-tools text-2xl mr-2"></i>
89
+ <span class="text-xl font-bold">Tech PC Maintenance</span>
90
+ </div>
91
+
92
+ <!-- Desktop Menu -->
93
+ <div class="hidden md:flex space-x-6">
94
+ <a href="#" onclick="showPage('home')" class="hover:text-indigo-200">Home</a>
95
+ <a href="#" onclick="showPage('login')" class="hover:text-indigo-200">Login</a>
96
+ <a href="#" onclick="showPage('signup')" class="hover:text-indigo-200">Sign Up</a>
97
+ </div>
98
+
99
+ <!-- Mobile Menu Button -->
100
+ <button id="mobile-menu-button" class="md:hidden focus:outline-none">
101
+ <i class="fas fa-bars text-2xl"></i>
102
+ </button>
103
  </div>
 
 
 
104
  </div>
105
+
106
+ <!-- Mobile Menu -->
107
+ <div id="mobile-menu" class="hidden md:hidden bg-indigo-700">
108
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
109
+ <a href="#" onclick="showPage('home')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600">Home</a>
110
+ <a href="#" onclick="showPage('login')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600">Login</a>
111
+ <a href="#" onclick="showPage('signup')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600">Sign Up</a>
112
+ </div>
113
  </div>
114
  </nav>
115
 
 
117
  <div class="container mx-auto px-4 py-8">
118
  <!-- Home Page -->
119
  <div id="home-page" class="fade-in">
120
+ <div class="text-center mb-10">
121
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">PC Maintenance Tools</h1>
122
+ <p class="text-xl text-gray-600">Keep your computer running smoothly with our maintenance tools</p>
123
  </div>
124
 
125
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
126
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
127
+ <div class="flex items-center mb-4">
128
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
129
+ <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
132
  </div>
133
+ <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
134
+ <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
135
+ Run Cleaner
136
+ </button>
137
  </div>
138
 
139
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
140
+ <div class="flex items-center mb-4">
141
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
142
+ <i class="fas fa-globe text-indigo-600 text-xl"></i>
143
+ </div>
144
+ <h3 class="text-xl font-semibold">Clear Browser Cache</h3>
145
  </div>
146
+ <p class="text-gray-600 mb-4">Clear your browser cache to improve performance.</p>
147
+ <div class="flex space-x-2 mb-4">
148
+ <button onclick="selectBrowser('chrome')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
149
+ Chrome
150
+ </button>
151
+ <button onclick="selectBrowser('firefox')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
152
+ Firefox
153
+ </button>
154
+ <button onclick="selectBrowser('edge')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
155
+ Edge
156
+ </button>
157
+ </div>
158
+ <button onclick="runTool('browserCache')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
159
+ Clear Cache
160
+ </button>
161
  </div>
162
 
163
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
164
+ <div class="flex items-center mb-4">
165
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
166
+ <i class="fas fa-bug text-indigo-600 text-xl"></i>
167
+ </div>
168
+ <h3 class="text-xl font-semibold">System Debug</h3>
169
  </div>
170
+ <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
171
+ <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
172
+ Run Diagnostics
173
+ </button>
174
  </div>
175
+
176
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
177
+ <div class="flex items-center mb-4">
178
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
179
+ <i class="fas fa-memory text-indigo-600 text-xl"></i>
 
 
 
180
  </div>
181
+ <h3 class="text-xl font-semibold">RAM Usage</h3>
 
 
182
  </div>
183
+ <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
184
+ <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
185
+ Check RAM
186
+ </button>
187
+ </div>
188
+
189
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
190
+ <div class="flex items-center mb-4">
191
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
192
+ <i class="fas fa-hdd text-indigo-600 text-xl"></i>
193
  </div>
194
+ <h3 class="text-xl font-semibold">Disk Space</h3>
 
 
195
  </div>
196
+ <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
197
+ <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
198
+ Analyze Disk
199
+ </button>
200
+ </div>
201
+
202
+ <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
203
+ <div class="flex items-center mb-4">
204
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
205
+ <i class="fas fa-folder-open text-indigo-600 text-xl"></i>
206
+ </div>
207
+ <h3 class="text-xl font-semibold">Organize Downloads</h3>
208
+ </div>
209
+ <p class="text-gray-600 mb-4">Automatically sort and clean your downloads folder.</p>
210
+ <button onclick="runTool('organizeDownloads')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
211
+ Organize Now
212
+ </button>
213
  </div>
214
  </div>
215
  </div>
 
235
 
236
  <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Login</button>
237
 
238
+ <div class="text-center mt-4">
239
+ <a href="#" onclick="showPage('forgot-password')" class="text-indigo-600 hover:underline text-sm">Forgot Password?</a>
240
+ </div>
241
+
242
  <div class="text-center">
243
  <p class="text-gray-600">Don't have an account? <a href="#" onclick="showPage('signup')" class="text-indigo-600 hover:underline">Sign up</a></p>
244
  </div>
 
267
 
268
  <div class="mb-4">
269
  <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
270
+ <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" placeholder="••••••••" required minlength="6">
271
  </div>
272
 
273
  <div class="mb-6">
274
  <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
275
+ <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" placeholder="••••••••" required minlength="6">
276
  </div>
277
 
278
  <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Create Account</button>
 
284
  </div>
285
  </div>
286
 
287
+ <!-- Forgot Password Page -->
288
+ <div id="forgot-password-page" class="hidden max-w-md mx-auto fade-in">
289
+ <div class="bg-white rounded-lg p-8 card-shadow">
290
+ <div class="text-center mb-6">
291
+ <h2 class="text-2xl font-bold text-gray-800">Reset Your Password</h2>
292
+ <p class="text-gray-600">Enter your email to receive a reset link</p>
293
+ </div>
294
+
295
+ <form id="forgot-password-form">
296
+ <div class="mb-6">
297
+ <label for="forgot-email" class="block text-gray-700 mb-2">Email Address</label>
298
+ <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" placeholder="your@email.com" required>
299
+ </div>
300
+
301
+ <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Send Reset Link</button>
302
+
303
+ <div class="text-center">
304
+ <p class="text-gray-600">Remember your password? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline">Login</a></p>
305
+ </div>
306
+ </form>
307
+ </div>
308
+ </div>
309
+
310
  <!-- Dashboard Page -->
311
  <div id="dashboard-page" class="hidden fade-in">
312
+ <div class="bg-white rounded-lg p-8 card-shadow">
313
+ <div class="text-center mb-8">
314
+ <h2 class="text-2xl font-bold text-gray-800">Welcome, <span id="user-name">User</span>!</h2>
315
+ <p class="text-gray-600">Access your PC maintenance tools</p>
316
+ </div>
317
+
318
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
319
+ <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
320
+ <div class="flex items-center mb-4">
321
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
322
+ <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
323
  </div>
324
+ <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
325
  </div>
326
+ <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
327
+ <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
328
+ Run Cleaner
329
+ </button>
 
 
 
 
 
330
  </div>
331
 
332
+ <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
333
+ <div class="flex items-center mb-4">
334
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
335
+ <i class="fas fa-bug text-indigo-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
336
  </div>
337
+ <h3 class="text-xl font-semibold">System Debug</h3>
338
  </div>
339
+ <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
340
+ <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
341
+ Run Diagnostics
342
+ </button>
343
  </div>
344
+
345
+ <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
346
+ <div class="flex items-center mb-4">
347
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
348
+ <i class="fas fa-memory text-indigo-600 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
349
  </div>
350
+ <h3 class="text-xl font-semibold">RAM Usage</h3>
 
 
351
  </div>
352
+ <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
353
+ <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
354
+ Check RAM
355
+ </button>
356
+ </div>
357
+
358
+ <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
359
+ <div class="flex items-center mb-4">
360
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
361
+ <i class="fas fa-hdd text-indigo-600 text-xl"></i>
362
  </div>
363
+ <h3 class="text-xl font-semibold">Disk Space</h3>
 
 
 
364
  </div>
365
+ <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
366
+ <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
367
+ Analyze Disk
368
+ </button>
369
  </div>
370
  </div>
371
 
372
+ <div class="text-center">
373
+ <button onclick="logout()" class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 smooth-transition">
374
+ <i class="fas fa-sign-out-alt mr-2"></i>Logout
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Results Panel -->
381
+ <div id="results-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
382
+ <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 card-shadow slide-up">
383
+ <div class="flex justify-between items-center mb-4">
384
+ <h3 class="text-xl font-bold text-gray-800" id="results-title">Results</h3>
385
+ <button onclick="closeResults()" class="text-gray-500 hover:text-gray-700">
386
+ <i class="fas fa-times"></i>
387
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
388
  </div>
389
 
390
+ <div id="results-content" class="py-4 max-h-[70vh] overflow-y-auto">
391
+ <!-- Results content will be inserted here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
392
  </div>
393
 
394
+ <div class="mt-4 text-right">
395
+ <button onclick="closeResults()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 smooth-transition">
396
+ Close
397
+ </button>
 
 
 
 
 
 
 
398
  </div>
399
  </div>
400
  </div>
 
403
  <!-- Footer -->
404
  <footer class="bg-gray-800 text-white py-8">
405
  <div class="container mx-auto px-4">
406
+ <div class="text-center">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
407
  <p>&copy; 2023 Tech PC Maintenance Center. All rights reserved.</p>
408
+ <div class="mt-4 flex justify-center space-x-4">
409
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-facebook"></i></a>
410
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-twitter"></i></a>
411
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-instagram"></i></a>
412
+ </div>
413
  </div>
414
  </div>
415
  </footer>
416
 
417
  <script>
418
+ // ========== UTILITY FUNCTIONS ==========
419
+ function getCurrentTimestamp() {
420
+ const now = new Date();
421
+ return now.toLocaleTimeString();
422
+ }
423
+
424
+ function generateRandomNumber(min, max) {
425
+ return Math.floor(Math.random() * (max - min + 1)) + min;
426
+ }
427
+
428
+ function formatBytes(bytes, decimals = 2) {
429
+ if (bytes === 0) return '0 Bytes';
430
+ const k = 1024;
431
+ const dm = decimals < 0 ? 0 : decimals;
432
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
433
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
434
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
435
+ }
436
+
437
+ // ========== PAGE MANAGEMENT ==========
438
  // Mobile menu toggle
439
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
440
  const menu = document.getElementById('mobile-menu');
 
443
 
444
  // Show specific page and hide others
445
  function showPage(pageId) {
 
446
  document.getElementById('home-page').classList.add('hidden');
447
  document.getElementById('login-page').classList.add('hidden');
448
  document.getElementById('signup-page').classList.add('hidden');
449
  document.getElementById('dashboard-page').classList.add('hidden');
450
+ document.getElementById('forgot-password-page').classList.add('hidden');
451
 
 
452
  document.getElementById(`${pageId}-page`).classList.remove('hidden');
 
 
453
  document.getElementById('mobile-menu').classList.add('hidden');
 
 
454
  window.scrollTo(0, 0);
455
+
456
+ // Update user name in dashboard if logged in
457
+ if (pageId === 'dashboard') {
458
+ const currentUser = localStorage.getItem('currentUser');
459
+ if (currentUser) {
460
+ const user = JSON.parse(currentUser);
461
+ document.getElementById('user-name').textContent = user.name;
462
+ }
463
+ }
464
+ }
465
+
466
+ // ========== USER MANAGEMENT ==========
467
+ // Mock user database in localStorage
468
+ function initializeUserDatabase() {
469
+ if (!localStorage.getItem('users')) {
470
+ localStorage.setItem('users', JSON.stringify([]));
471
+ }
472
  }
473
 
474
  // Handle login form submission
475
+ document.getElementById('login-form').addEventListener('submit', function(e) {
476
  e.preventDefault();
477
 
478
  const email = document.getElementById('login-email').value;
479
  const password = document.getElementById('login-password').value;
480
 
481
+ initializeUserDatabase();
482
+ const users = JSON.parse(localStorage.getItem('users'));
483
+ const user = users.find(u => u.email === email && u.password === password);
484
+
485
+ if (user) {
486
+ // Store the user data in localStorage
487
+ localStorage.setItem('currentUser', JSON.stringify({
488
+ name: user.name,
489
+ email: user.email
490
+ }));
491
 
492
+ // Show dashboard
493
+ showPage('dashboard');
494
 
495
+ // Update welcome message
496
+ document.getElementById('user-name').textContent = user.name;
497
+
498
+ // Clear form
499
+ this.reset();
500
+ } else {
501
+ alert('Invalid email or password');
 
 
 
 
 
 
 
 
 
 
 
 
502
  }
 
 
 
503
  });
504
 
505
  // Handle signup form submission
506
+ document.getElementById('signup-form').addEventListener('submit', function(e) {
507
  e.preventDefault();
508
 
509
  const name = document.getElementById('signup-name').value;
 
516
  return;
517
  }
518
 
519
+ if (password.length < 6) {
520
+ alert('Password must be at least 6 characters long');
521
+ return;
522
+ }
523
+
524
+ initializeUserDatabase();
525
+ const users = JSON.parse(localStorage.getItem('users'));
526
+
527
+ // Check if user already exists
528
+ if (users.some(u => u.email === email)) {
529
+ alert('Email already registered');
530
+ return;
 
 
 
 
 
 
 
 
531
  }
532
 
533
+ // Add new user
534
+ users.push({
535
+ name: name,
536
+ email: email,
537
+ password: password
538
+ });
539
+
540
+ localStorage.setItem('users', JSON.stringify(users));
541
+ alert('Account created successfully! Please login.');
542
+ showPage('login');
543
+
544
  // Clear form
545
  this.reset();
546
  });
547
 
548
+ // Handle forgot password form submission
549
+ document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
550
+ e.preventDefault();
551
+ const email = document.getElementById('forgot-email').value;
552
+ alert(`Password reset link sent to ${email} (simulated)`);
553
+ showPage('login');
554
+ this.reset();
555
+ });
556
+
557
  // Check if user is logged in on page load
558
  document.addEventListener('DOMContentLoaded', function() {
559
+ initializeUserDatabase();
560
+ const currentUser = localStorage.getItem('currentUser');
561
 
562
+ if (currentUser) {
563
+ const user = JSON.parse(currentUser);
564
  showPage('dashboard');
565
+ document.getElementById('user-name').textContent = user.name;
 
 
 
 
 
566
  } else {
567
  showPage('home');
568
  }
 
570
 
571
  // Logout function
572
  function logout() {
573
+ localStorage.removeItem('currentUser');
 
 
 
 
574
  showPage('home');
575
  }
576
 
577
+ // ========== TOOL FUNCTIONS ==========
578
  // Browser selection for cache clearing
579
  let selectedBrowser = null;
580
 
581
  function selectBrowser(browser) {
582
  selectedBrowser = browser;
 
583
  const buttons = document.querySelectorAll('[onclick^="selectBrowser"]');
584
  buttons.forEach(btn => {
585
  if (btn.getAttribute('onclick').includes(browser)) {
 
592
  });
593
  }
594
 
595
+ // Generate system debug logs
596
+ function generateDebugLogs() {
597
+ const logs = [];
598
+ const logTypes = ['error', 'warning', 'success', 'info'];
599
+ const messages = [
600
+ "Failed to load system module",
601
+ "Disk read error on sector 2048",
602
+ "Memory allocation successful",
603
+ "Checking system integrity",
604
+ "Firewall rule updated",
605
+ "Driver version mismatch detected",
606
+ "System scan completed",
607
+ "Network connection established",
608
+ "Security update available",
609
+ "Registry key not found"
610
+ ];
611
+
612
+ const count = generateRandomNumber(5, 15);
613
+ for (let i = 0; i < count; i++) {
614
+ const type = logTypes[generateRandomNumber(0, logTypes.length - 1)];
615
+ const message = messages[generateRandomNumber(0, messages.length - 1)];
616
+ logs.push({
617
+ type,
618
+ message,
619
+ timestamp: getCurrentTimestamp()
620
+ });
621
+ }
622
+
623
+ return logs;
624
+ }
625
+
626
+ // Generate disk analysis data
627
+ function generateDiskAnalysis() {
628
+ const totalSpace = generateRandomNumber(200, 2000) * 1024 * 1024 * 1024; // 200GB to 2TB
629
+ const usedSpace = generateRandomNumber(50, totalSpace / (1024 * 1024 * 1024) * 0.8) * 1024 * 1024 * 1024;
630
+ const freeSpace = totalSpace - usedSpace;
631
+
632
+ return {
633
+ totalSpace,
634
+ usedSpace,
635
+ freeSpace,
636
+ tempFiles: generateRandomNumber(500, 2000) * 1024 * 1024, // 500MB to 2GB
637
+ duplicateFiles: generateRandomNumber(100, 800) * 1024 * 1024, // 100MB to 800MB
638
+ largeApps: generateRandomNumber(1, 5) * 1024 * 1024 * 1024 // 1GB to 5GB
639
+ };
640
+ }
641
+
642
+ // Generate RAM usage data
643
+ function generateRamUsage() {
644
+ const totalRam = generateRandomNumber(4, 32) * 1024; // 4GB to 32GB in MB
645
+ const usedRam = generateRandomNumber(totalRam * 0.3, totalRam * 0.8);
646
+ const cachedRam = generateRandomNumber(totalRam * 0.1, totalRam * 0.3);
647
+ const availableRam = totalRam - usedRam;
648
+
649
+ return {
650
+ totalRam,
651
+ usedRam,
652
+ cachedRam,
653
+ availableRam
654
+ };
655
+ }
656
+
657
+ // Generate downloads organization data
658
+ function generateDownloadsData() {
659
+ const categories = [
660
+ { name: "Documents", icon: "fa-file-pdf", color: "text-red-500", count: generateRandomNumber(5, 30) },
661
+ { name: "Images", icon: "fa-file-image", color: "text-blue-500", count: generateRandomNumber(10, 50) },
662
+ { name: "Videos", icon: "fa-file-video", color: "text-purple-500", count: generateRandomNumber(3, 15) },
663
+ { name: "Archives", icon: "fa-file-archive", color: "text-yellow-500", count: generateRandomNumber(2, 10) },
664
+ { name: "Audio", icon: "fa-file-audio", color: "text-green-500", count: generateRandomNumber(1, 8) }
665
+ ];
666
+
667
+ const totalFiles = categories.reduce((sum, cat) => sum + cat.count, 0);
668
+ const spaceFreed = generateRandomNumber(500, 3000) * 1024 * 1024; // 500MB to 3GB
669
+
670
+ return {
671
+ categories,
672
+ totalFiles,
673
+ spaceFreed
674
+ };
675
+ }
676
+
677
  // Run maintenance tool
678
  function runTool(tool) {
679
  const resultsPanel = document.getElementById('results-panel');
680
  const resultsContent = document.getElementById('results-content');
681
+ const resultsTitle = document.getElementById('results-title');
682
+
683
+ // Set title based on tool
684
+ const toolTitles = {
685
+ 'tempFiles': 'Temporary Files Cleaner Results',
686
+ 'browserCache': 'Browser Cache Cleaning Results',
687
+ 'systemDebug': 'System Diagnostics Report',
688
+ 'ramUsage': 'Memory Analysis Results',
689
+ 'diskSpace': 'Disk Space Analysis',
690
+ 'organizeDownloads': 'Downloads Organization Results'
691
+ };
692
+
693
+ resultsTitle.textContent = toolTitles[tool] || 'Results';
694
+
695
+ resultsContent.innerHTML = `
696
+ <div class="text-center py-8">
697
+ <i class="fas fa-spinner fa-spin text-2xl text-indigo-600 mb-2"></i>
698
+ <p>Running ${toolTitles[tool] || 'tool'}...</p>
699
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-4">
700
+ <div class="bg-indigo-600 h-1.5 rounded-full progress-animate" style="width: 0%"></div>
701
+ </div>
702
+ </div>
703
+ `;
704
+
705
+ // Animate progress bar
706
+ const progressBar = resultsContent.querySelector('.progress-animate');
707
+ let progress = 0;
708
+ const progressInterval = setInterval(() => {
709
+ progress += generateRandomNumber(5, 15);
710
+ if (progress >= 100) {
711
+ progress = 100;
712
+ clearInterval(progressInterval);
713
+ showToolResults(tool);
714
+ }
715
+ progressBar.style.width = `${progress}%`;
716
+ }, 200);
717
 
 
 
718
  resultsPanel.classList.remove('hidden');
719
+ }
720
+
721
+ // Show tool results
722
+ function showToolResults(tool) {
723
+ const resultsContent = document.getElementById('results-content');
724
+ let resultHtml = '';
725
 
726
+ switch(tool) {
727
+ case 'tempFiles':
728
+ const tempFilesSize = generateRandomNumber(800, 2500) * 1024 * 1024; // 800MB to 2.5GB
729
+ resultHtml = `
730
+ <div class="p-4 bg-green-50 rounded-lg mb-4">
731
+ <div class="flex items-center text-green-600 mb-2">
732
+ <i class="fas fa-check-circle mr-2"></i>
733
+ <h4 class="font-semibold">Temporary Files Cleaned</h4>
734
+ </div>
735
+ <p class="text-sm text-gray-700">Successfully removed ${formatBytes(tempFilesSize)} of temporary files.</p>
736
+ <div class="mt-3 text-xs text-gray-500">
737
+ <p><i class="fas fa-info-circle mr-1"></i> This action is safe and only removes files that can be safely deleted.</p>
738
+ </div>
739
+ </div>
740
+ <div class="grid grid-cols-2 gap-4 mt-4">
741
+ <div class="bg-blue-50 p-3 rounded-lg">
742
+ <div class="text-blue-600 text-sm font-medium">Files Deleted</div>
743
+ <div class="text-xl font-bold">${generateRandomNumber(150, 500)}</div>
744
+ </div>
745
+ <div class="bg-purple-50 p-3 rounded-lg">
746
+ <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
747
+ <div class="text-xl font-bold">${formatBytes(tempFilesSize)}</div>
748
+ </div>
749
+ </div>
750
+ `;
751
+ break;
752
+
753
+ case 'browserCache':
754
+ if (!selectedBrowser) {
755
+ resultHtml = `
756
+ <div class="p-4 bg-yellow-50 rounded-lg mb-4">
757
+ <div class="flex items-center text-yellow-600 mb-2">
758
+ <i class="fas fa-exclamation-triangle mr-2"></i>
759
+ <h4 class="font-semibold">No Browser Selected</h4>
760
+ </div>
761
+ <p class="text-sm text-gray-700">Please select a browser to clear its cache.</p>
762
+ </div>
763
+ `;
764
+ } else {
765
+ const cacheSize = generateRandomNumber(300, 1500) * 1024 * 1024; // 300MB to 1.5GB
766
  resultHtml = `
767
  <div class="p-4 bg-green-50 rounded-lg mb-4">
768
  <div class="flex items-center text-green-600 mb-2">
769
  <i class="fas fa-check-circle mr-2"></i>
770
+ <h4 class="font-semibold">Browser Cache Cleared</h4>
771
  </div>
772
+ <p class="text-sm text-gray-700">Successfully cleared ${formatBytes(cacheSize)} of cache data from ${selectedBrowser.charAt(0).toUpperCase() + selectedBrowser.slice(1)}.</p>
773
  <div class="mt-3 text-xs text-gray-500">
774
+ <p><i class="fas fa-info-circle mr-1"></i> You may need to log in again to some websites.</p>
775
+ </div>
776
+ </div>
777
+ <div class="grid grid-cols-2 gap-4 mt-4">
778
+ <div class="bg-blue-50 p-3 rounded-lg">
779
+ <div class="text-blue-600 text-sm font-medium">Cache Items</div>
780
+ <div class="text-xl font-bold">${generateRandomNumber(500, 2000)}</div>
781
+ </div>
782
+ <div class="bg-purple-50 p-3 rounded-lg">
783
+ <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
784
+ <div class="text-xl font-bold">${formatBytes(cacheSize)}</div>
785
  </div>
786
  </div>
787
  `;
788
+ }
789
+ break;
790
+
791
+ case 'systemDebug':
792
+ const logs = generateDebugLogs();
793
+ const errorCount = logs.filter(log => log.type === 'error').length;
794
+ const warningCount = logs.filter(log => log.type === 'warning').length;
795
+
796
+ // Generate system health score (0-100)
797
+ const healthScore = 100 - (errorCount * 5) - (warningCount * 2);
798
+
799
+ resultHtml = `
800
+ <div class="p-4 bg-blue-50 rounded-lg mb-4">
801
+ <div class="flex items-center text-blue-600 mb-2">
802
+ <i class="fas fa-search mr-2"></i>
803
+ <h4 class="font-semibold">System Diagnostics</h4>
804
+ </div>
805
+ <div class="space-y-3">
806
+ <div>
807
+ <div class="flex justify-between text-sm mb-1">
808
+ <span>System Health</span>
809
+ <span>${Math.max(0, healthScore)}/100</span>
810
+ </div>
811
+ <div class="progress-bar">
812
+ <div class="progress-fill" style="width: ${healthScore}%"></div>
813
  </div>
 
814
  </div>
815
+ <div>
816
+ <div class="flex justify-between text-sm mb-1">
817
+ <span>System Errors</span>
818
+ <span>${errorCount} found</span>
 
 
 
819
  </div>
820
+ <div class="progress-bar">
821
+ <div class="progress-fill" style="width: ${100 - (errorCount * 5)}%"></div>
 
822
  </div>
823
  </div>
824
+ <div>
825
+ <div class="flex justify-between text-sm mb-1">
826
+ <span>Performance</span>
827
+ <span>${healthScore > 80 ? 'Excellent' : healthScore > 50 ? 'Good' : 'Needs Attention'}</span>
828
+ </div>
829
+ <div class="progress-bar">
830
+ <div class="progress-fill" style="width: ${healthScore}%"></div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ </div>
835
 
836
+ <div class="mt-4">
837
+ <div class="flex justify-between items-center mb-2">
838
+ <h4 class="font-semibold">System Logs</h4>
839
+ <span class="text-sm text-gray-500">${logs.length} entries</span>
840
+ </div>
841
+
842
+ <div class="bg-gray-50 p-3 rounded-lg max-h-60 overflow-y-auto">
843
+ ${logs.map(log => `
844
+ <div class="log-entry ${log.type} mb-2">
845
+ <div class="flex justify-between items-start">
846
+ <span class="log-message">${log.message}</span>
847
+ <span class="log-timestamp ml-2">${log.timestamp}</span>
 
848
  </div>
849
  </div>
850
+ `).join('')}
851
+ </div>
852
+
853
+ <div class="grid grid-cols-2 gap-4 mt-4">
854
+ <div class="bg-red-50 p-3 rounded-lg">
855
+ <div class="text-red-600 text-sm font-medium">Errors</div>
856
+ <div class="text-xl font-bold">${errorCount}</div>
857
+ </div>
858
+ <div class="bg-yellow-50 p-3 rounded-lg">
859
+ <div class="text-yellow-600 text-sm font-medium">Warnings</div>
860
+ <div class="text-xl font-bold">${warningCount}</div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <div class="mt-4 p-4 bg-indigo-50 rounded-lg">
866
+ <h4 class="font-semibold text-indigo-600 mb-2">Recommendations</h4>
867
+ <ul class="text-sm space-y-2">
868
+ ${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>' : ''}
869
+ ${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>' : ''}
870
+ <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>
871
+ ${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>' : ''}
872
+ </ul>
873
+ </div>
874
+ `;
875
+ break;
876
+
877
+ case 'ramUsage':
878
+ const ramData = generateRamUsage();
879
+ const ramPercentage = Math.round((ramData.usedRam / ramData.totalRam) * 100);
880
+
881
+ resultHtml = `
882
+ <div class="p-4 bg-purple-50 rounded-lg mb-4">
883
+ <div class="flex items-center text-purple-600 mb-2">
884
+ <i class="fas fa-memory mr-2"></i>
885
+ <h4 class="font-semibold">Memory Analysis</h4>
886
+ </div>
887
+ <div class="space-y-3">
888
+ <div>
889
+ <div class="flex justify-between text-sm mb-1">
890
+ <span>Total RAM</span>
891
+ <span>${ramData.totalRam / 1024} GB</span>
892
+ </div>
893
+ </div>
894
+ <div>
895
+ <div class="flex justify-between text-sm mb-1">
896
+ <span>In Use</span>
897
+ <span>${Math.round(ramData.usedRam / 1024)} GB (${ramPercentage}%)</span>
898
+ </div>
899
+ <div class="progress-bar">
900
+ <div class="progress-fill" style="width: ${ramPercentage}%"></div>
901
+ </div>
902
+ </div>
903
+ <div>
904
+ <div class="flex justify-between text-sm mb-1">
905
+ <span>Cached</span>
906
+ <span>${Math.round(ramData.cachedRam / 1024)} GB</span>
907
+ </div>
908
+ <div class="progress-bar">
909
+ <div class="progress-fill" style="width: ${Math.round((ramData.cachedRam / ramData.totalRam) * 100)}%"></div>
910
+ </div>
911
+ </div>
912
+ <div>
913
+ <div class="flex justify-between text-sm mb-1">
914
+ <span>Available</span>
915
+ <span>${Math.round(ramData.availableRam / 1024)} GB</span>
916
+ </div>
917
+ <div class="progress-bar">
918
+ <div class="progress-fill" style="width: ${Math.round((ramData.availableRam / ramData.totalRam) * 100)}%"></div>
919
  </div>
920
  </div>
921
  </div>
922
+ </div>
923
+
924
+ <div class="mt-4">
925
+ <h4 class="font-semibold mb-2">Memory Usage by Process</h4>
926
+ <div class="space-y-2">
927
+ ${['System', 'Explorer.exe', 'Chrome.exe', 'Antivirus.exe', 'Other Processes']
928
+ .map(process => {
929
+ const usage = generateRandomNumber(50, 800);
930
+ return `
931
+ <div>
932
+ <div class="flex justify-between text-sm mb-1">
933
+ <span>${process}</span>
934
+ <span>${usage} MB</span>
935
+ </div>
936
+ <div class="progress-bar">
937
+ <div class="progress-fill" style="width: ${Math.round((usage / ramData.totalRam) * 100)}%"></div>
938
+ </div>
939
+ </div>
940
+ `;
941
+ }).join('')}
942
  </div>
943
+ </div>
 
944
 
945
+ <div class="mt-4 p-4 ${ramPercentage > 80 ? 'bg-red-50' : 'bg-green-50'} rounded-lg">
946
+ <h4 class="font-semibold ${ramPercentage > 80 ? 'text-red-600' : 'text-green-600'} mb-2">
947
+ <i class="fas ${ramPercentage > 80 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
948
+ ${ramPercentage > 80 ? 'High Memory Usage' : 'Memory Usage OK'}
949
+ </h4>
950
+ <p class="text-sm">
951
+ ${ramPercentage > 80
952
+ ? 'Your system is using most of available RAM. Consider closing some applications or upgrading your memory.'
953
+ : 'Your memory usage is within normal limits. No immediate action required.'}
954
+ </p>
955
+ </div>
956
+ `;
957
+ break;
958
+
959
+ case 'diskSpace':
960
+ const diskData = generateDiskAnalysis();
961
+ const usedPercentage = Math.round((diskData.usedSpace / diskData.totalSpace) * 100);
962
+
963
+ resultHtml = `
964
+ <div class="p-4 bg-indigo-50 rounded-lg mb-4">
965
+ <div class="flex items-center text-indigo-600 mb-2">
966
+ <i class="fas fa-hdd mr-2"></i>
967
+ <h4 class="font-semibold">Disk Analysis</h4>
968
+ </div>
969
+ <div class="space-y-3">
970
+ <div>
971
+ <div class="flex justify-between text-sm mb-1">
972
+ <span>Total Space</span>
973
+ <span>${formatBytes(diskData.totalSpace)}</span>
974
+ </div>
975
+ </div>
976
+ <div>
977
+ <div class="flex justify-between text-sm mb-1">
978
+ <span>Used Space</span>
979
+ <span>${formatBytes(diskData.usedSpace)} (${usedPercentage}%)</span>
980
+ </div>
981
+ <div class="progress-bar">
982
+ <div class="progress-fill" style="width: ${usedPercentage}%"></div>
983
+ </div>
984
+ </div>
985
+ <div>
986
+ <div class="flex justify-between text-sm mb-1">
987
+ <span>Free Space</span>
988
+ <span>${formatBytes(diskData.freeSpace)}</span>
989
+ </div>
990
+ <div class="progress-bar">
991
+ <div class="progress-fill" style="width: ${100 - usedPercentage}%"></div>
992
+ </div>
993
  </div>
 
 
 
 
 
 
 
994
  </div>
995
+ </div>
 
996
 
997
+ <div class="mt-4">
998
+ <h4 class="font-semibold mb-2">Disk Usage Breakdown</h4>
999
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1000
+ <div class="bg-blue-50 p-3 rounded-lg">
1001
+ <div class="text-blue-600 text-sm font-medium">Temporary Files</div>
1002
+ <div class="text-xl font-bold">${formatBytes(diskData.tempFiles)}</div>
1003
+ <div class="text-xs mt-1">Can be safely deleted</div>
1004
+ </div>
1005
+ <div class="bg-purple-50 p-3 rounded-lg">
1006
+ <div class="text-purple-600 text-sm font-medium">Duplicate Files</div>
1007
+ <div class="text-xl font-bold">${formatBytes(diskData.duplicateFiles)}</div>
1008
+ <div class="text-xs mt-1">Potential space savings</div>
1009
+ </div>
1010
+ <div class="bg-red-50 p-3 rounded-lg">
1011
+ <div class="text-red-600 text-sm font-medium">Large Applications</div>
1012
+ <div class="text-xl font-bold">${formatBytes(diskData.largeApps)}</div>
1013
+ <div class="text-xs mt-1">Consider uninstalling unused apps</div>
1014
+ </div>
1015
+ <div class="bg-green-50 p-3 rounded-lg">
1016
+ <div class="text-green-600 text-sm font-medium">System Files</div>
1017
+ <div class="text-xl font-bold">${formatBytes(diskData.usedSpace * 0.4)}</div>
1018
+ <div class="text-xs mt-1">Essential system files</div>
 
 
 
 
 
 
 
 
 
 
1019
  </div>
1020
  </div>
1021
+ </div>
 
 
 
 
1022
 
1023
+ <div class="mt-4 p-4 ${usedPercentage > 85 ? 'bg-red-50' : 'bg-green-50'} rounded-lg">
1024
+ <h4 class="font-semibold ${usedPercentage > 85 ? 'text-red-600' : 'text-green-600'} mb-2">
1025
+ <i class="fas ${usedPercentage > 85 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
1026
+ ${usedPercentage > 85 ? 'Low Disk Space Warning' : 'Disk Space OK'}
1027
+ </h4>
1028
+ <p class="text-sm">
1029
+ ${usedPercentage > 85
1030
+ ? 'Your disk is almost full. Consider cleaning up unnecessary files or upgrading your storage.'
1031
+ : 'You have sufficient free disk space. No immediate action required.'}
1032
+ </p>
1033
+ ${usedPercentage > 85
1034
+ ? '<button onclick="runTool(\'tempFiles\')" class="mt-2 px-4 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">Clean Temporary Files Now</button>'
1035
+ : ''}
1036
+ </div>
1037
+ `;
1038
+ break;
1039
+
1040
+ case 'organizeDownloads':
1041
+ const downloadsData = generateDownloadsData();
1042
+
1043
+ resultHtml = `
1044
+ <div class="p-4 bg-teal-50 rounded-lg mb-4">
1045
+ <div class="flex items-center text-teal-600 mb-2">
1046
+ <i class="fas fa-folder-open mr-2"></i>
1047
+ <h4 class="font-semibold">Downloads Organized</h4>
1048
+ </div>
1049
+ <div class="space-y-3">
1050
+ <div>
1051
+ <div class="flex justify-between text-sm mb-1">
1052
+ <span>Files Processed</span>
1053
+ <span>${downloadsData.totalFiles} items</span>
1054
+ </div>
 
 
 
 
1055
  </div>
1056
+ <div>
1057
+ <div class="flex justify-between text-sm mb-1">
1058
+ <span>Space Freed</span>
1059
+ <span>${formatBytes(downloadsData.spaceFreed)}</span>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+
1065
+ <div class="mt-4">
1066
+ <h4 class="font-semibold mb-2">Files Organized by Category</h4>
1067
+ <div class="space-y-2">
1068
+ ${downloadsData.categories.map(cat => `
1069
+ <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
1070
+ <div class="flex items-center">
1071
+ <i class="${cat.icon} ${cat.color} mr-2"></i>
1072
+ <span>${cat.name}</span>
1073
+ </div>
1074
+ <span class="text-sm font-medium">${cat.count} files</span>
1075
+ </div>
1076
+ `).join('')}
1077
  </div>
1078
+ </div>
1079
+
1080
+ <div class="mt-4 p-4 bg-indigo-50 rounded-lg">
1081
+ <h4 class="font-semibold text-indigo-600 mb-2">New Folder Structure</h4>
1082
+ <div class="text-sm">
1083
+ <div class="flex items-center mb-1">
1084
+ <i class="fas fa-folder text-yellow-500 mr-2"></i>
1085
+ <span>Downloads/</span>
1086
+ </div>
1087
+ ${downloadsData.categories.map(cat => `
1088
+ <div class="flex items-center ml-4 mb-1">
1089
+ <i class="fas fa-folder ${cat.color} mr-2"></i>
1090
+ <span>${cat.name}/</span>
1091
+ </div>
1092
+ `).join('')}
1093
+ <div class="flex items-center ml-4">
1094
+ <i class="fas fa-folder text-gray-400 mr-2"></i>
1095
+ <span>Other/</span>
1096
+ </div>
1097
  </div>
1098
+ </div>
1099
+
1100
+ <div class="mt-4 p-4 bg-green-50 rounded-lg">
1101
+ <h4 class="font-semibold text-green-600 mb-2">Organization Complete</h4>
1102
+ <p class="text-sm">Your downloads folder has been successfully organized into categories.</p>
1103
+ <button onclick="runTool('organizeDownloads')" class="mt-2 px-4 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700">Reorganize Now</button>
1104
+ </div>
1105
+ `;
1106
+ break;
1107
+ }
1108
+
1109
+ resultsContent.innerHTML = resultHtml;
1110
+
1111
+ // Add event listeners for debug sections if this is the system debug tool
1112
+ if (tool === 'systemDebug') {
1113
+ document.querySelectorAll('.debug-section-toggle').forEach(toggle => {
1114
+ toggle.addEventListener('click', function() {
1115
+ const section = this.closest('.debug-section-container').querySelector('.debug-section');
1116
+ section.classList.toggle('expanded');
1117
+ this.querySelector('i').classList.toggle('fa-chevron-down');
1118
+ this.querySelector('i').classList.toggle('fa-chevron-up');
1119
+ });
1120
+ });
1121
+ }
1122
  }
1123
 
1124
  // Close results panel
prompts.txt CHANGED
@@ -1 +1,6 @@
1
- the closing tags are missing
 
 
 
 
 
 
1
+ 1. Forgot Password Feature (Frontend + Backend) 👉 Add this on login page (below the form): html Copy Edit <div class="text-center mt-4"> <a href="#" onclick="showPage('forgot-password')" class="text-indigo-600 hover:underline text-sm">Forgot Password?</a> </div> 👉 Create a Forgot Password Page in index.html: html Copy Edit <div id="forgot-password-page" class="hidden max-w-md mx-auto fade-in"> <div class="bg-white rounded-lg p-8 card-shadow"> <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Reset Your Password</h2> <form id="forgot-password-form"> <div class="mb-4"> <label for="forgot-email" class="block text-gray-700 mb-2">Email Address</label> <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" placeholder="your@email.com" required> </div> <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition">Send Reset Link</button> </form> </div> </div> 👉 Add this frontend JavaScript inside <script> at bottom: javascript Copy Edit document.getElementById('forgot-password-form').addEventListener('submit', async function(e) { e.preventDefault(); const email = document.getElementById('forgot-email').value; try { const response = await fetch('/api/auth/forgot-password', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }); const data = await response.json(); alert(data.message); if (response.ok) { showPage('login'); } } catch (error) { console.error('Forgot password error:', error); alert('An error occurred'); } this.reset(); }); 👉 Backend (server.js): javascript Copy Edit app.post('/api/auth/forgot-password', (req, res) => { const { email } = req.body; if (!email) return res.status(400).json({ message: 'Email is required' }); // (Fake for now: real reset would send an email) res.json({ message: 'If this email exists, password reset instructions have been sent.' }); });
2
+ Add a simple debugging feature to my Node.js + Express server. I want to log every incoming request (method + URL + timestamp) to the console. Also, create a "debug panel" on the front-end (HTML file in public folder) that can be toggled on/off and shows these request logs using fetch from the server. The backend is using `server.js`, storing users in JSON, and serves the HTML from the /public directory. Keep everything clean and integrated into what I already have.
3
+ dont change this html just repair it as the login and signup dont work
4
+ 1. Add the missing `<div id="results-panel">` section with proper layout and styling. 2. Insert a mobile menu with the `id="mobile-menu"` and `id="mobile-menu-button"` so the toggle script works correctly. 3. Add basic placeholder content inside: - `#forgot-password-page` (e.g., form with email input and submit) - `#dashboard-page` (e.g., "Welcome, [user]" and a logout button) 4. Ensure the file ends correctly with closing `</body>` and `</html>` tags. 5. Make sure the layout uses Tailwind classes consistently. 6. Do **not** change the existing styles or structure — just fix what’s missing.
5
+ Take this HTML/JS code for a PC maintenance website that uses localStorage for login/signup and fake tools. I need to add: 1. Working debug tool feature — for example: check console errors or simulate RAM usage stats. 2. More tool result blocks like disk space or organize downloads. 3. On successful login, update the user name in the dashboard at: <span id="user-name">. Make sure the JS is consistent with the existing pattern. Keep styling and structure aligned with TailwindCSS and Font Awesome icons.
6
+ I have a full HTML + JS site for a Tech PC Maintenance tool. It includes login/signup functionality using localStorage and several maintenance tools that simulate features like "Clean Temporary Files", "Clear Browser Cache", "Disk Space", etc. The tools are represented as styled cards with fake result panels using modals. I need you to: 1. Add realistic simulation logic or diagnostics to each tool if possible. 2. Introduce an actual debugging panel (fake or simulated) when "System Debug" is clicked. Ideally with expandable logs or check results. 3. Replace localStorage with a JSON-based backend or SQLite using Node.js (optional but preferred). 4. Add animation transitions for tool result panels. 5. Clean and organize the JavaScript into modular functions or split scripts if possible (optional). Keep Tailwind CSS and Font Awesome styles consistent. Don't change the visual layout or UI structure unless necessary. Make sure it stays easy for me to expand in the future. Return the updated HTML file (or HTML + backend server.js if converted to Node).