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