Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tech PC Maintenance Center</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| .slide-up { | |
| animation: slideUp 0.4s ease-out; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .smooth-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e2e8f0; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #6e8efb, #a777e3); | |
| transition: width 0.5s ease; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .log-entry { | |
| border-left: 3px solid #6e8efb; | |
| padding-left: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .log-entry.error { | |
| border-left-color: #ef4444; | |
| } | |
| .log-entry.warning { | |
| border-left-color: #f59e0b; | |
| } | |
| .log-entry.success { | |
| border-left-color: #10b981; | |
| } | |
| .log-entry.info { | |
| border-left-color: #3b82f6; | |
| } | |
| .log-timestamp { | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| } | |
| .log-message { | |
| font-size: 0.875rem; | |
| } | |
| .debug-section { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease; | |
| } | |
| .debug-section.expanded { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 dark:bg-gray-900 dark:text-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-md dark:bg-gray-800"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tools text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">Tech PC Maintenance</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Dark Mode Toggle --> | |
| <button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20"> | |
| <i class="fas fa-moon hidden dark:block"></i> | |
| <i class="fas fa-sun block dark:hidden"></i> | |
| </button> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" onclick="showPage('home')" class="hover:text-indigo-200">Home</a> | |
| <a href="#" onclick="showPage('login')" class="hover:text-indigo-200">Login</a> | |
| <a href="#" onclick="showPage('signup')" class="hover:text-indigo-200">Sign Up</a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 dark:bg-gray-700"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" onclick="showPage('home')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 dark:hover:bg-gray-600">Home</a> | |
| <a href="#" onclick="showPage('login')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 dark:hover:bg-gray-600">Login</a> | |
| <a href="#" onclick="showPage('signup')" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-600 dark:hover:bg-gray-600">Sign Up</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content Container --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Home Page --> | |
| <div id="home-page" class="fade-in"> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">PC Maintenance Tools</h1> | |
| <p class="text-xl text-gray-600 dark:text-gray-300">Keep your computer running smoothly with our maintenance tools</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Existing tool cards... --> | |
| <!-- New Update Drivers Card --> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 card-shadow tool-card smooth-transition"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 dark:bg-indigo-900 p-3 rounded-full mr-4"> | |
| <i class="fas fa-sync-alt text-indigo-600 dark:text-indigo-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold dark:text-white">Update Drivers</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Check for and install the latest driver updates for your hardware.</p> | |
| <button onclick="runTool('updateDrivers')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition"> | |
| Check for Updates | |
| </button> | |
| </div> | |
| <!-- Other existing tool cards... --> | |
| </div> | |
| </div> | |
| <!-- Other pages (login, signup, dashboard, etc.) remain unchanged... --> | |
| </div> | |
| <!-- Confirmation Modal --> | |
| <div id="confirmation-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4 card-shadow slide-up"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Confirm Logout</h3> | |
| <button onclick="closeConfirmation()" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="py-4"> | |
| <p class="text-gray-700 dark:text-gray-300">Are you sure you want to logout?</p> | |
| </div> | |
| <div class="mt-4 flex justify-end space-x-3"> | |
| <button onclick="closeConfirmation()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 smooth-transition"> | |
| Cancel | |
| </button> | |
| <button onclick="confirmLogout()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 smooth-transition"> | |
| Logout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // ========== DARK MODE TOGGLE ========== | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| const htmlElement = document.documentElement; | |
| // Check for saved user preference or use system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| htmlElement.classList.add('dark'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| htmlElement.classList.toggle('dark'); | |
| localStorage.setItem('darkMode', htmlElement.classList.contains('dark')); | |
| }); | |
| // ========== CONFIRMATION MODAL ========== | |
| function showConfirmation() { | |
| document.getElementById('confirmation-modal').classList.remove('hidden'); | |
| } | |
| function closeConfirmation() { | |
| document.getElementById('confirmation-modal').classList.add('hidden'); | |
| } | |
| function confirmLogout() { | |
| logout(); | |
| closeConfirmation(); | |
| } | |
| // ========== USER MANAGEMENT ========== | |
| // Check if user is logged in on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const token = localStorage.getItem('token'); | |
| if (token) { | |
| showPage('dashboard'); | |
| } else { | |
| showPage('home'); | |
| } | |
| }); | |
| // Modified logout function with confirmation | |
| function logout() { | |
| localStorage.removeItem('token'); | |
| localStorage.removeItem('user_id'); | |
| localStorage.removeItem('user_name'); | |
| showPage('home'); | |
| } | |
| // ========== TOOL FUNCTIONS ========== | |
| // Add updateDrivers case to showToolResults function | |
| function showToolResults(tool) { | |
| const resultsContent = document.getElementById('results-content'); | |
| let resultHtml = ''; | |
| switch(tool) { | |
| // Existing cases... | |
| case 'updateDrivers': | |
| const driversUpdated = generateRandomNumber(1, 5); | |
| const driversAvailable = generateRandomNumber(0, 3); | |
| resultHtml = ` | |
| <div class="p-4 bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg mb-4"> | |
| <div class="flex items-center text-blue-600 dark:text-blue-300 mb-2"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <h4 class="font-semibold">Driver Update Results</h4> | |
| </div> | |
| <p class="text-sm text-gray-700 dark:text-gray-300"> | |
| ${driversUpdated} drivers were updated successfully. | |
| ${driversAvailable > 0 ? `There are ${driversAvailable} additional updates available.` : 'Your drivers are all up to date.'} | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mt-4"> | |
| <div class="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 p-3 rounded-lg"> | |
| <div class="text-green-600 dark:text-green-300 text-sm font-medium">Updated</div> | |
| <div class="text-xl font-bold">${driversUpdated}</div> | |
| </div> | |
| <div class="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 p-3 rounded-lg"> | |
| <div class="text-yellow-600 dark:text-yellow-300 text-sm font-medium">Available</div> | |
| <div class="text-xl font-bold">${driversAvailable}</div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 bg-indigo-50 dark:bg-indigo-900 dark:bg-opacity-20 rounded-lg"> | |
| <h4 class="font-semibold text-indigo-600 dark:text-indigo-300 mb-2">Recommendations</h4> | |
| <ul class="text-sm space-y-2 dark:text-gray-300"> | |
| ${driversAvailable > 0 | |
| ? '<li class="flex items-start"><i class="fas fa-exclamation-circle text-yellow-500 mt-1 mr-2 text-xs"></i><span>Consider updating available drivers for optimal performance</span></li>' | |
| : '<li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2 text-xs"></i><span>All drivers are up to date</span></li>'} | |
| <li class="flex items-start"><i class="fas fa-info-circle text-blue-500 mt-1 mr-2 text-xs"></i><span>Restart your computer to complete driver installations</span></li> | |
| </ul> | |
| </div> | |
| `; | |
| break; | |
| // Other existing cases... | |
| } | |
| resultsContent.innerHTML = resultHtml; | |
| } | |
| // Rest of your existing JavaScript remains unchanged... | |
| </script> | |
| <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> | |
| </html> |