Spaces:

mitznjay
/

tech-maintenance

Running

App Files Files Community

mitznjay commited on Apr 23, 2025

Commit

17cf838

verified ·

1 Parent(s): f4cc507

Add 2 files

Browse files

Files changed (2) hide show

index.html +159 -101
prompts.txt +1 -6

index.html CHANGED Viewed

@@ -15,6 +15,14 @@
             from { transform: translateY(20px); opacity: 0; }
             to { transform: translateY(0); opacity: 1; }
         }
         .fade-in {
             animation: fadeIn 0.5s ease-in-out;
         }
@@ -49,6 +57,10 @@
             border-left: 3px solid #6e8efb;
             padding-left: 10px;
             margin-bottom: 8px;
         }
         .log-entry.error {
             border-left-color: #ef4444;
@@ -65,18 +77,51 @@
         .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">
@@ -85,30 +130,30 @@
         <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>
                 <!-- 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>
         <!-- Mobile Menu -->
-        <div id="mobile-menu" class="hidden md:hidden bg-indigo-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">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">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">Sign Up</a>
             </div>
         </div>
     </nav>
@@ -123,91 +168,91 @@
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
-                    <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Run Cleaner
                     </button>
                 </div>
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-globe text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Clear Browser Cache</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Clear your browser cache to improve performance.</p>
                     <div class="flex space-x-2 mb-4">
-                        <button onclick="selectBrowser('chrome')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
                             Chrome
                         </button>
-                        <button onclick="selectBrowser('firefox')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
                             Firefox
                         </button>
-                        <button onclick="selectBrowser('edge')" class="flex-1 bg-gray-100 text-gray-700 py-1 px-3 rounded text-sm smooth-transition">
                             Edge
                         </button>
                     </div>
-                    <button onclick="runTool('browserCache')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Clear Cache
                     </button>
                 </div>
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-bug text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">System Debug</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
-                    <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Run Diagnostics
                     </button>
                 </div>
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-memory text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">RAM Usage</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
-                    <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Check RAM
                     </button>
                 </div>
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-hdd text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Disk Space</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
-                    <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Analyze Disk
                     </button>
                 </div>
-                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition">
                     <div class="flex items-center mb-4">
-                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                             <i class="fas fa-folder-open text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Organize Downloads</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Automatically sort and clean your downloads folder.</p>
-                    <button onclick="runTool('organizeDownloads')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                         Organize Now
                     </button>
                 </div>
@@ -216,7 +261,7 @@
         <!-- Login Page -->
         <div id="login-page" class="hidden max-w-md mx-auto fade-in">
-            <div class="bg-white rounded-lg p-8 card-shadow">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Welcome Back!</h2>
                     <p class="text-gray-600">Login to access your maintenance tools</p>
@@ -225,22 +270,24 @@
                 <form id="login-form">
                     <div class="mb-4">
                         <label for="login-email" class="block text-gray-700 mb-2">Email</label>
-                        <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" placeholder="your@email.com" required>
                     </div>
                     <div class="mb-6">
                         <label for="login-password" class="block text-gray-700 mb-2">Password</label>
-                        <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" placeholder="••••••••" required>
                     </div>
-                    <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Login</button>
                     <div class="text-center mt-4">
-                        <a href="#" onclick="showPage('forgot-password')" class="text-indigo-600 hover:underline text-sm">Forgot Password?</a>
                     </div>
                     <div class="text-center">
-                        <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>
                     </div>
                 </form>
             </div>
@@ -248,7 +295,7 @@
         <!-- Signup Page -->
         <div id="signup-page" class="hidden max-w-md mx-auto fade-in">
-            <div class="bg-white rounded-lg p-8 card-shadow">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Create Your Account</h2>
                     <p class="text-gray-600">Join our PC maintenance community</p>
@@ -257,28 +304,30 @@
                 <form id="signup-form">
                     <div class="mb-4">
                         <label for="signup-name" class="block text-gray-700 mb-2">Full Name</label>
-                        <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" placeholder="John Doe" required>
                     </div>
                     <div class="mb-4">
                         <label for="signup-email" class="block text-gray-700 mb-2">Email</label>
-                        <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" placeholder="your@email.com" required>
                     </div>
                     <div class="mb-4">
                         <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
-                        <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">
                     </div>
                     <div class="mb-6">
                         <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
-                        <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">
                     </div>
-                    <button type="submit" class="gradient-bg text-white w-full py-2 rounded-lg hover:opacity-90 smooth-transition mb-4">Create Account</button>
                     <div class="text-center">
-                        <p class="text-gray-600">Already have an account? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline">Login</a></p>
                     </div>
                 </form>
             </div>
@@ -286,7 +335,7 @@
         <!-- Forgot Password Page -->
         <div id="forgot-password-page" class="hidden max-w-md mx-auto fade-in">
-            <div class="bg-white rounded-lg p-8 card-shadow">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Reset Your Password</h2>
                     <p class="text-gray-600">Enter your email to receive a reset link</p>
@@ -295,13 +344,15 @@
                 <form id="forgot-password-form">
                     <div class="mb-6">
                         <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 mb-4">Send Reset Link</button>
                     <div class="text-center">
-                        <p class="text-gray-600">Remember your password? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline">Login</a></p>
                     </div>
                 </form>
             </div>
@@ -309,68 +360,68 @@
         <!-- Dashboard Page -->
         <div id="dashboard-page" class="hidden fade-in">
-            <div class="bg-white rounded-lg p-8 card-shadow">
                 <div class="text-center mb-8">
                     <h2 class="text-2xl font-bold text-gray-800">Welcome, <span id="user-name">User</span>!</h2>
                     <p class="text-gray-600">Access your PC maintenance tools</p>
                 </div>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
                         <div class="flex items-center mb-4">
-                            <div class="bg-indigo-100 p-3 rounded-full mr-4">
                                 <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
-                        <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                             Run Cleaner
                         </button>
                     </div>
-                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
                         <div class="flex items-center mb-4">
-                            <div class="bg-indigo-100 p-3 rounded-full mr-4">
                                 <i class="fas fa-bug text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">System Debug</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
-                        <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                             Run Diagnostics
                         </button>
                     </div>
-                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
                         <div class="flex items-center mb-4">
-                            <div class="bg-indigo-100 p-3 rounded-full mr-4">
                                 <i class="fas fa-memory text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">RAM Usage</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
-                        <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                             Check RAM
                         </button>
                     </div>
-                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition">
                         <div class="flex items-center mb-4">
-                            <div class="bg-indigo-100 p-3 rounded-full mr-4">
                                 <i class="fas fa-hdd text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">Disk Space</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
-                        <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition">
                             Analyze Disk
                         </button>
                     </div>
                 </div>
                 <div class="text-center">
-                    <button onclick="logout()" class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 smooth-transition">
                         <i class="fas fa-sign-out-alt mr-2"></i>Logout
                     </button>
                 </div>
@@ -379,10 +430,10 @@
         <!-- Results Panel -->
         <div id="results-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 card-shadow slide-up">
                 <div class="flex justify-between items-center mb-4">
                     <h3 class="text-xl font-bold text-gray-800" id="results-title">Results</h3>
-                    <button onclick="closeResults()" class="text-gray-500 hover:text-gray-700">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -392,7 +443,7 @@
                 </div>
                 <div class="mt-4 text-right">
-                    <button onclick="closeResults()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 smooth-transition">
                         Close
                     </button>
                 </div>
@@ -406,9 +457,9 @@
             <div class="text-center">
                 <p>&copy; 2023 Tech PC Maintenance Center. All rights reserved.</p>
                 <div class="mt-4 flex justify-center space-x-4">
-                    <a href="#" class="hover:text-indigo-300"><i class="fab fa-facebook"></i></a>
-                    <a href="#" class="hover:text-indigo-300"><i class="fab fa-twitter"></i></a>
-                    <a href="#" class="hover:text-indigo-300"><i class="fab fa-instagram"></i></a>
                 </div>
             </div>
         </div>
@@ -727,7 +778,7 @@
                 case 'tempFiles':
                     const tempFilesSize = generateRandomNumber(800, 2500) * 1024 * 1024; // 800MB to 2.5GB
                     resultHtml = `
-                        <div class="p-4 bg-green-50 rounded-lg mb-4">
                             <div class="flex items-center text-green-600 mb-2">
                                 <i class="fas fa-check-circle mr-2"></i>
                                 <h4 class="font-semibold">Temporary Files Cleaned</h4>
@@ -738,11 +789,11 @@
                             </div>
                         </div>
                         <div class="grid grid-cols-2 gap-4 mt-4">
-                            <div class="bg-blue-50 p-3 rounded-lg">
                                 <div class="text-blue-600 text-sm font-medium">Files Deleted</div>
                                 <div class="text-xl font-bold">${generateRandomNumber(150, 500)}</div>
                             </div>
-                            <div class="bg-purple-50 p-3 rounded-lg">
                                 <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
                                 <div class="text-xl font-bold">${formatBytes(tempFilesSize)}</div>
                             </div>
@@ -753,7 +804,7 @@
                 case 'browserCache':
                     if (!selectedBrowser) {
                         resultHtml = `
-                            <div class="p-4 bg-yellow-50 rounded-lg mb-4">
                                 <div class="flex items-center text-yellow-600 mb-2">
                                     <i class="fas fa-exclamation-triangle mr-2"></i>
                                     <h4 class="font-semibold">No Browser Selected</h4>
@@ -764,7 +815,7 @@
                     } else {
                         const cacheSize = generateRandomNumber(300, 1500) * 1024 * 1024; // 300MB to 1.5GB
                         resultHtml = `
-                            <div class="p-4 bg-green-50 rounded-lg mb-4">
                                 <div class="flex items-center text-green-600 mb-2">
                                     <i class="fas fa-check-circle mr-2"></i>
                                     <h4 class="font-semibold">Browser Cache Cleared</h4>
@@ -775,11 +826,11 @@
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 gap-4 mt-4">
-                                <div class="bg-blue-50 p-3 rounded-lg">
                                     <div class="text-blue-600 text-sm font-medium">Cache Items</div>
                                     <div class="text-xl font-bold">${generateRandomNumber(500, 2000)}</div>
                                 </div>
-                                <div class="bg-purple-50 p-3 rounded-lg">
                                     <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
                                     <div class="text-xl font-bold">${formatBytes(cacheSize)}</div>
                                 </div>
@@ -797,7 +848,7 @@
                     const healthScore = 100 - (errorCount * 5) - (warningCount * 2);
                     resultHtml = `
-                        <div class="p-4 bg-blue-50 rounded-lg mb-4">
                             <div class="flex items-center text-blue-600 mb-2">
                                 <i class="fas fa-search mr-2"></i>
                                 <h4 class="font-semibold">System Diagnostics</h4>
@@ -839,30 +890,36 @@
                                 <span class="text-sm text-gray-500">${logs.length} entries</span>
                             </div>
-                            <div class="bg-gray-50 p-3 rounded-lg max-h-60 overflow-y-auto">
-                                ${logs.map(log => `
-                                    <div class="log-entry ${log.type} mb-2">
-                                        <div class="flex justify-between items-start">
-                                            <span class="log-message">${log.message}</span>
-                                            <span class="log-timestamp ml-2">${log.timestamp}</span>
                                         </div>
-                                    </div>
-                                `).join('')}
                             </div>
                             <div class="grid grid-cols-2 gap-4 mt-4">
-                                <div class="bg-red-50 p-3 rounded-lg">
                                     <div class="text-red-600 text-sm font-medium">Errors</div>
                                     <div class="text-xl font-bold">${errorCount}</div>
                                 </div>
-                                <div class="bg-yellow-50 p-3 rounded-lg">
                                     <div class="text-yellow-600 text-sm font-medium">Warnings</div>
                                     <div class="text-xl font-bold">${warningCount}</div>
                                 </div>
                             </div>
                         </div>
-                        <div class="mt-4 p-4 bg-indigo-50 rounded-lg">
                             <h4 class="font-semibold text-indigo-600 mb-2">Recommendations</h4>
                             <ul class="text-sm space-y-2">
                                 ${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>' : ''}
@@ -879,7 +936,7 @@
                     const ramPercentage = Math.round((ramData.usedRam / ramData.totalRam) * 100);
                     resultHtml = `
-                        <div class="p-4 bg-purple-50 rounded-lg mb-4">
                             <div class="flex items-center text-purple-600 mb-2">
                                 <i class="fas fa-memory mr-2"></i>
                                 <h4 class="font-semibold">Memory Analysis</h4>
@@ -942,7 +999,7 @@
                             </div>
                         </div>
-                        <div class="mt-4 p-4 ${ramPercentage > 80 ? 'bg-red-50' : 'bg-green-50'} rounded-lg">
                             <h4 class="font-semibold ${ramPercentage > 80 ? 'text-red-600' : 'text-green-600'} mb-2">
                                 <i class="fas ${ramPercentage > 80 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
                                 ${ramPercentage > 80 ? 'High Memory Usage' : 'Memory Usage OK'}
@@ -961,7 +1018,7 @@
                     const usedPercentage = Math.round((diskData.usedSpace / diskData.totalSpace) * 100);
                     resultHtml = `
-                        <div class="p-4 bg-indigo-50 rounded-lg mb-4">
                             <div class="flex items-center text-indigo-600 mb-2">
                                 <i class="fas fa-hdd mr-2"></i>
                                 <h4 class="font-semibold">Disk Analysis</h4>
@@ -997,22 +1054,22 @@
                         <div class="mt-4">
                             <h4 class="font-semibold mb-2">Disk Usage Breakdown</h4>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="bg-blue-50 p-3 rounded-lg">
                                     <div class="text-blue-600 text-sm font-medium">Temporary Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.tempFiles)}</div>
                                     <div class="text-xs mt-1">Can be safely deleted</div>
                                 </div>
-                                <div class="bg-purple-50 p-3 rounded-lg">
                                     <div class="text-purple-600 text-sm font-medium">Duplicate Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.duplicateFiles)}</div>
                                     <div class="text-xs mt-1">Potential space savings</div>
                                 </div>
-                                <div class="bg-red-50 p-3 rounded-lg">
                                     <div class="text-red-600 text-sm font-medium">Large Applications</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.largeApps)}</div>
                                     <div class="text-xs mt-1">Consider uninstalling unused apps</div>
                                 </div>
-                                <div class="bg-green-50 p-3 rounded-lg">
                                     <div class="text-green-600 text-sm font-medium">System Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.usedSpace * 0.4)}</div>
                                     <div class="text-xs mt-1">Essential system files</div>
@@ -1020,7 +1077,7 @@
                             </div>
                         </div>
-                        <div class="mt-4 p-4 ${usedPercentage > 85 ? 'bg-red-50' : 'bg-green-50'} rounded-lg">
                             <h4 class="font-semibold ${usedPercentage > 85 ? 'text-red-600' : 'text-green-600'} mb-2">
                                 <i class="fas ${usedPercentage > 85 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
                                 ${usedPercentage > 85 ? 'Low Disk Space Warning' : 'Disk Space OK'}
@@ -1031,7 +1088,7 @@
                                     : 'You have sufficient free disk space. No immediate action required.'}
                             </p>
                             ${usedPercentage > 85
-                                ? '<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>'
                                 : ''}
                         </div>
                     `;
@@ -1041,7 +1098,7 @@
                     const downloadsData = generateDownloadsData();
                     resultHtml = `
-                        <div class="p-4 bg-teal-50 rounded-lg mb-4">
                             <div class="flex items-center text-teal-600 mb-2">
                                 <i class="fas fa-folder-open mr-2"></i>
                                 <h4 class="font-semibold">Downloads Organized</h4>
@@ -1066,7 +1123,7 @@
                             <h4 class="font-semibold mb-2">Files Organized by Category</h4>
                             <div class="space-y-2">
                                 ${downloadsData.categories.map(cat => `
-                                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                         <div class="flex items-center">
                                             <i class="${cat.icon} ${cat.color} mr-2"></i>
                                             <span>${cat.name}</span>
@@ -1077,7 +1134,7 @@
                             </div>
                         </div>
-                        <div class="mt-4 p-4 bg-indigo-50 rounded-lg">
                             <h4 class="font-semibold text-indigo-600 mb-2">New Folder Structure</h4>
                             <div class="text-sm">
                                 <div class="flex items-center mb-1">
@@ -1097,10 +1154,10 @@
                             </div>
                         </div>
-                        <div class="mt-4 p-4 bg-green-50 rounded-lg">
                             <h4 class="font-semibold text-green-600 mb-2">Organization Complete</h4>
                             <p class="text-sm">Your downloads folder has been successfully organized into categories.</p>
-                            <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>
                         </div>
                     `;
                     break;
@@ -1116,6 +1173,7 @@
                         section.classList.toggle('expanded');
                         this.querySelector('i').classList.toggle('fa-chevron-down');
                         this.querySelector('i').classList.toggle('fa-chevron-up');
                     });
                 });
             }

             from { transform: translateY(20px); opacity: 0; }
             to { transform: translateY(0); opacity: 1; }
         }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.03); }
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
         .fade-in {
             animation: fadeIn 0.5s ease-in-out;
         }
             border-left: 3px solid #6e8efb;
             padding-left: 10px;
             margin-bottom: 8px;
+            transition: all 0.2s ease;
+        }
+        .log-entry:hover {
+            background-color: #f8fafc;
         }
         .log-entry.error {
             border-left-color: #ef4444;
         .log-timestamp {
             font-size: 0.75rem;
             color: #6b7280;
+            transition: color 0.2s ease;
         }
         .log-message {
             font-size: 0.875rem;
+            transition: color 0.2s ease;
         }
         .debug-section {
             max-height: 0;
             overflow: hidden;
+            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .debug-section.expanded {
             max-height: 500px;
         }
+        .highlight-button {
+            position: relative;
+            overflow: hidden;
+        }
+        .highlight-button::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.1));
+            transform: translateX(-100%);
+            transition: transform 0.6s ease;
+        }
+        .highlight-button:hover::after {
+            transform: translateX(100%);
+        }
+        .pulse-on-hover:hover {
+            animation: pulse 0.5s ease-in-out;
+        }
+        .bounce-on-hover:hover {
+            animation: bounce 0.5s ease;
+        }
+        .button-glow {
+            box-shadow: 0 4px 15px rgba(110, 142, 251, 0.3);
+            transition: box-shadow 0.3s ease;
+        }
+        .button-glow:hover {
+            box-shadow: 0 6px 20px rgba(110, 142, 251, 0.4);
+        }
     </style>
 </head>
 <body class="font-sans bg-gray-50">
         <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 bounce-on-hover"></i>
                     <span class="text-xl font-bold">Tech PC Maintenance</span>
                 </div>
                 <!-- Desktop Menu -->
                 <div class="hidden md:flex space-x-6">
+                    <a href="#" onclick="showPage('home')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Home</a>
+                    <a href="#" onclick="showPage('login')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Login</a>
+                    <a href="#" onclick="showPage('signup')" class="hover:text-indigo-200 smooth-transition hover:underline underline-offset-4">Sign Up</a>
                 </div>
                 <!-- Mobile Menu Button -->
+                <button id="mobile-menu-button" class="md:hidden focus:outline-none hover:scale-110 smooth-transition">
                     <i class="fas fa-bars text-2xl"></i>
                 </button>
             </div>
         </div>
         <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 slide-up">
             <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 smooth-transition">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 smooth-transition">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 smooth-transition">Sign Up</a>
             </div>
         </div>
     </nav>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
+                    <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Run Cleaner
                     </button>
                 </div>
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-globe text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Clear Browser Cache</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Clear your browser cache to improve performance.</p>
                     <div class="flex space-x-2 mb-4">
+                        <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">
                             Chrome
                         </button>
+                        <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">
                             Firefox
                         </button>
+                        <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">
                             Edge
                         </button>
                     </div>
+                    <button onclick="runTool('browserCache')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Clear Cache
                     </button>
                 </div>
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-bug text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">System Debug</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
+                    <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Run Diagnostics
                     </button>
                 </div>
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-memory text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">RAM Usage</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
+                    <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Check RAM
                     </button>
                 </div>
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-hdd text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Disk Space</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
+                    <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Analyze Disk
                     </button>
                 </div>
+                <div class="bg-white rounded-lg p-6 card-shadow tool-card smooth-transition hover:border-indigo-200 border border-transparent">
                     <div class="flex items-center mb-4">
+                        <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                             <i class="fas fa-folder-open text-indigo-600 text-xl"></i>
                         </div>
                         <h3 class="text-xl font-semibold">Organize Downloads</h3>
                     </div>
                     <p class="text-gray-600 mb-4">Automatically sort and clean your downloads folder.</p>
+                    <button onclick="runTool('organizeDownloads')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                         Organize Now
                     </button>
                 </div>
         <!-- Login Page -->
         <div id="login-page" class="hidden max-w-md mx-auto fade-in">
+            <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Welcome Back!</h2>
                     <p class="text-gray-600">Login to access your maintenance tools</p>
                 <form id="login-form">
                     <div class="mb-4">
                         <label for="login-email" class="block text-gray-700 mb-2">Email</label>
+                        <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>
                     </div>
                     <div class="mb-6">
                         <label for="login-password" class="block text-gray-700 mb-2">Password</label>
+                        <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>
                     </div>
+                    <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">
+                        Login
+                    </button>
                     <div class="text-center mt-4">
+                        <a href="#" onclick="showPage('forgot-password')" class="text-indigo-600 hover:underline text-sm smooth-transition">Forgot Password?</a>
                     </div>
                     <div class="text-center">
+                        <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>
                     </div>
                 </form>
             </div>
         <!-- Signup Page -->
         <div id="signup-page" class="hidden max-w-md mx-auto fade-in">
+            <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Create Your Account</h2>
                     <p class="text-gray-600">Join our PC maintenance community</p>
                 <form id="signup-form">
                     <div class="mb-4">
                         <label for="signup-name" class="block text-gray-700 mb-2">Full Name</label>
+                        <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>
                     </div>
                     <div class="mb-4">
                         <label for="signup-email" class="block text-gray-700 mb-2">Email</label>
+                        <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>
                     </div>
                     <div class="mb-4">
                         <label for="signup-password" class="block text-gray-700 mb-2">Password</label>
+                        <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">
                     </div>
                     <div class="mb-6">
                         <label for="signup-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
+                        <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">
                     </div>
+                    <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">
+                        Create Account
+                    </button>
                     <div class="text-center">
+                        <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>
                     </div>
                 </form>
             </div>
         <!-- Forgot Password Page -->
         <div id="forgot-password-page" class="hidden max-w-md mx-auto fade-in">
+            <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
                 <div class="text-center mb-6">
                     <h2 class="text-2xl font-bold text-gray-800">Reset Your Password</h2>
                     <p class="text-gray-600">Enter your email to receive a reset link</p>
                 <form id="forgot-password-form">
                     <div class="mb-6">
                         <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 smooth-transition" 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 mb-4 highlight-button button-glow">
+                        Send Reset Link
+                    </button>
                     <div class="text-center">
+                        <p class="text-gray-600">Remember your password? <a href="#" onclick="showPage('login')" class="text-indigo-600 hover:underline smooth-transition">Login</a></p>
                     </div>
                 </form>
             </div>
         <!-- Dashboard Page -->
         <div id="dashboard-page" class="hidden fade-in">
+            <div class="bg-white rounded-lg p-8 card-shadow transform transition-all duration-300 hover:shadow-xl">
                 <div class="text-center mb-8">
                     <h2 class="text-2xl font-bold text-gray-800">Welcome, <span id="user-name">User</span>!</h2>
                     <p class="text-gray-600">Access your PC maintenance tools</p>
                 </div>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
                         <div class="flex items-center mb-4">
+                            <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                                 <i class="fas fa-trash-alt text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">Clean Temporary Files</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Remove unnecessary temporary files to free up disk space.</p>
+                        <button onclick="runTool('tempFiles')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                             Run Cleaner
                         </button>
                     </div>
+                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
                         <div class="flex items-center mb-4">
+                            <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                                 <i class="fas fa-bug text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">System Debug</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Check for system errors and performance issues.</p>
+                        <button onclick="runTool('systemDebug')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                             Run Diagnostics
                         </button>
                     </div>
+                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
                         <div class="flex items-center mb-4">
+                            <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                                 <i class="fas fa-memory text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">RAM Usage</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Analyze your current memory usage and performance.</p>
+                        <button onclick="runTool('ramUsage')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                             Check RAM
                         </button>
                     </div>
+                    <div class="bg-white rounded-lg p-6 border border-gray-200 tool-card smooth-transition hover:border-indigo-200">
                         <div class="flex items-center mb-4">
+                            <div class="bg-indigo-100 p-3 rounded-full mr-4 smooth-transition hover:bg-indigo-200">
                                 <i class="fas fa-hdd text-indigo-600 text-xl"></i>
                             </div>
                             <h3 class="text-xl font-semibold">Disk Space</h3>
                         </div>
                         <p class="text-gray-600 mb-4">Analyze and clean up your disk storage.</p>
+                        <button onclick="runTool('diskSpace')" class="w-full gradient-bg text-white py-2 rounded-lg hover:opacity-90 smooth-transition highlight-button button-glow">
                             Analyze Disk
                         </button>
                     </div>
                 </div>
                 <div class="text-center">
+                    <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">
                         <i class="fas fa-sign-out-alt mr-2"></i>Logout
                     </button>
                 </div>
         <!-- Results Panel -->
         <div id="results-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 card-shadow slide-up transform transition-all duration-300">
                 <div class="flex justify-between items-center mb-4">
                     <h3 class="text-xl font-bold text-gray-800" id="results-title">Results</h3>
+                    <button onclick="closeResults()" class="text-gray-500 hover:text-gray-700 smooth-transition hover:scale-110">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                 </div>
                 <div class="mt-4 text-right">
+                    <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">
                         Close
                     </button>
                 </div>
             <div class="text-center">
                 <p>&copy; 2023 Tech PC Maintenance Center. All rights reserved.</p>
                 <div class="mt-4 flex justify-center space-x-4">
+                    <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="hover:text-indigo-300 smooth-transition hover:scale-110"><i class="fab fa-instagram"></i></a>
                 </div>
             </div>
         </div>
                 case 'tempFiles':
                     const tempFilesSize = generateRandomNumber(800, 2500) * 1024 * 1024; // 800MB to 2.5GB
                     resultHtml = `
+                        <div class="p-4 bg-green-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                             <div class="flex items-center text-green-600 mb-2">
                                 <i class="fas fa-check-circle mr-2"></i>
                                 <h4 class="font-semibold">Temporary Files Cleaned</h4>
                             </div>
                         </div>
                         <div class="grid grid-cols-2 gap-4 mt-4">
+                            <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                 <div class="text-blue-600 text-sm font-medium">Files Deleted</div>
                                 <div class="text-xl font-bold">${generateRandomNumber(150, 500)}</div>
                             </div>
+                            <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                 <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
                                 <div class="text-xl font-bold">${formatBytes(tempFilesSize)}</div>
                             </div>
                 case 'browserCache':
                     if (!selectedBrowser) {
                         resultHtml = `
+                            <div class="p-4 bg-yellow-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                                 <div class="flex items-center text-yellow-600 mb-2">
                                     <i class="fas fa-exclamation-triangle mr-2"></i>
                                     <h4 class="font-semibold">No Browser Selected</h4>
                     } else {
                         const cacheSize = generateRandomNumber(300, 1500) * 1024 * 1024; // 300MB to 1.5GB
                         resultHtml = `
+                            <div class="p-4 bg-green-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                                 <div class="flex items-center text-green-600 mb-2">
                                     <i class="fas fa-check-circle mr-2"></i>
                                     <h4 class="font-semibold">Browser Cache Cleared</h4>
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 gap-4 mt-4">
+                                <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-blue-600 text-sm font-medium">Cache Items</div>
                                     <div class="text-xl font-bold">${generateRandomNumber(500, 2000)}</div>
                                 </div>
+                                <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-purple-600 text-sm font-medium">Space Recovered</div>
                                     <div class="text-xl font-bold">${formatBytes(cacheSize)}</div>
                                 </div>
                     const healthScore = 100 - (errorCount * 5) - (warningCount * 2);
                     resultHtml = `
+                        <div class="p-4 bg-blue-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                             <div class="flex items-center text-blue-600 mb-2">
                                 <i class="fas fa-search mr-2"></i>
                                 <h4 class="font-semibold">System Diagnostics</h4>
                                 <span class="text-sm text-gray-500">${logs.length} entries</span>
                             </div>
+                            <div class="debug-section-container">
+                                <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">
+                                    <span>Show Detailed Logs</span>
+                                    <i class="fas fa-chevron-down text-gray-500"></i>
+                                </button>
+                                <div class="debug-section bg-gray-50 p-3 rounded-b-lg">
+                                    ${logs.map(log => `
+                                        <div class="log-entry ${log.type} mb-2">
+                                            <div class="flex justify-between items-start">
+                                                <span class="log-message">${log.message}</span>
+                                                <span class="log-timestamp ml-2">${log.timestamp}</span>
+                                            </div>
                                         </div>
+                                    `).join('')}
+                                </div>
                             </div>
                             <div class="grid grid-cols-2 gap-4 mt-4">
+                                <div class="bg-red-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-red-600 text-sm font-medium">Errors</div>
                                     <div class="text-xl font-bold">${errorCount}</div>
                                 </div>
+                                <div class="bg-yellow-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-yellow-600 text-sm font-medium">Warnings</div>
                                     <div class="text-xl font-bold">${warningCount}</div>
                                 </div>
                             </div>
                         </div>
+                        <div class="mt-4 p-4 bg-indigo-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
                             <h4 class="font-semibold text-indigo-600 mb-2">Recommendations</h4>
                             <ul class="text-sm space-y-2">
                                 ${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>' : ''}
                     const ramPercentage = Math.round((ramData.usedRam / ramData.totalRam) * 100);
                     resultHtml = `
+                        <div class="p-4 bg-purple-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                             <div class="flex items-center text-purple-600 mb-2">
                                 <i class="fas fa-memory mr-2"></i>
                                 <h4 class="font-semibold">Memory Analysis</h4>
                             </div>
                         </div>
+                        <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]">
                             <h4 class="font-semibold ${ramPercentage > 80 ? 'text-red-600' : 'text-green-600'} mb-2">
                                 <i class="fas ${ramPercentage > 80 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
                                 ${ramPercentage > 80 ? 'High Memory Usage' : 'Memory Usage OK'}
                     const usedPercentage = Math.round((diskData.usedSpace / diskData.totalSpace) * 100);
                     resultHtml = `
+                        <div class="p-4 bg-indigo-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                             <div class="flex items-center text-indigo-600 mb-2">
                                 <i class="fas fa-hdd mr-2"></i>
                                 <h4 class="font-semibold">Disk Analysis</h4>
                         <div class="mt-4">
                             <h4 class="font-semibold mb-2">Disk Usage Breakdown</h4>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div class="bg-blue-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-blue-600 text-sm font-medium">Temporary Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.tempFiles)}</div>
                                     <div class="text-xs mt-1">Can be safely deleted</div>
                                 </div>
+                                <div class="bg-purple-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-purple-600 text-sm font-medium">Duplicate Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.duplicateFiles)}</div>
                                     <div class="text-xs mt-1">Potential space savings</div>
                                 </div>
+                                <div class="bg-red-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-red-600 text-sm font-medium">Large Applications</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.largeApps)}</div>
                                     <div class="text-xs mt-1">Consider uninstalling unused apps</div>
                                 </div>
+                                <div class="bg-green-50 p-3 rounded-lg transform transition-all duration-300 hover:scale-[1.02]">
                                     <div class="text-green-600 text-sm font-medium">System Files</div>
                                     <div class="text-xl font-bold">${formatBytes(diskData.usedSpace * 0.4)}</div>
                                     <div class="text-xs mt-1">Essential system files</div>
                             </div>
                         </div>
+                        <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]">
                             <h4 class="font-semibold ${usedPercentage > 85 ? 'text-red-600' : 'text-green-600'} mb-2">
                                 <i class="fas ${usedPercentage > 85 ? 'fa-exclamation-triangle' : 'fa-check-circle'} mr-2"></i>
                                 ${usedPercentage > 85 ? 'Low Disk Space Warning' : 'Disk Space OK'}
                                     : 'You have sufficient free disk space. No immediate action required.'}
                             </p>
                             ${usedPercentage > 85
+                                ? '<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>'
                                 : ''}
                         </div>
                     `;
                     const downloadsData = generateDownloadsData();
                     resultHtml = `
+                        <div class="p-4 bg-teal-50 rounded-lg mb-4 transform transition-all duration-300 hover:scale-[1.01]">
                             <div class="flex items-center text-teal-600 mb-2">
                                 <i class="fas fa-folder-open mr-2"></i>
                                 <h4 class="font-semibold">Downloads Organized</h4>
                             <h4 class="font-semibold mb-2">Files Organized by Category</h4>
                             <div class="space-y-2">
                                 ${downloadsData.categories.map(cat => `
+                                    <div class="flex items-center justify-between p-2 bg-gray-50 rounded transform transition-all duration-300 hover:scale-[1.01]">
                                         <div class="flex items-center">
                                             <i class="${cat.icon} ${cat.color} mr-2"></i>
                                             <span>${cat.name}</span>
                             </div>
                         </div>
+                        <div class="mt-4 p-4 bg-indigo-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
                             <h4 class="font-semibold text-indigo-600 mb-2">New Folder Structure</h4>
                             <div class="text-sm">
                                 <div class="flex items-center mb-1">
                             </div>
                         </div>
+                        <div class="mt-4 p-4 bg-green-50 rounded-lg transform transition-all duration-300 hover:scale-[1.01]">
                             <h4 class="font-semibold text-green-600 mb-2">Organization Complete</h4>
                             <p class="text-sm">Your downloads folder has been successfully organized into categories.</p>
+                            <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>
                         </div>
                     `;
                     break;
                         section.classList.toggle('expanded');
                         this.querySelector('i').classList.toggle('fa-chevron-down');
                         this.querySelector('i').classList.toggle('fa-chevron-up');
+                        this.querySelector('span').textContent = section.classList.contains('expanded') ? 'Hide Detailed Logs' : 'Show Detailed Logs';
                     });
                 });
             }

prompts.txt CHANGED Viewed

@@ -1,6 +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.' }); });
-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.
-dont change this html just repair it as the login and signup dont work
-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.
-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.
-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).


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.