Spaces:
Runtime error
Runtime error
Update register.html
Browse files- register.html +56 -15
register.html
CHANGED
|
@@ -322,6 +322,29 @@
|
|
| 322 |
font-size: 12px;
|
| 323 |
}
|
| 324 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 325 |
</style>
|
| 326 |
</head>
|
| 327 |
<body class="light-mode">
|
|
@@ -354,26 +377,32 @@
|
|
| 354 |
|
| 355 |
<div class="form-group">
|
| 356 |
<label for="password">Password</label>
|
| 357 |
-
<
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
|
|
|
|
|
|
|
|
|
|
| 365 |
<div id="passwordStrength" class="password-strength"></div>
|
| 366 |
</div>
|
| 367 |
|
| 368 |
<div class="form-group">
|
| 369 |
<label for="confirmPassword">Confirm Password</label>
|
| 370 |
-
<
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
|
|
|
|
|
|
|
|
|
| 377 |
</div>
|
| 378 |
|
| 379 |
<button type="button" class="btn" id="registerBtn" onclick="handleRegister()">
|
|
@@ -409,6 +438,18 @@
|
|
| 409 |
}
|
| 410 |
}
|
| 411 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 412 |
document.addEventListener("DOMContentLoaded", async () => {
|
| 413 |
const savedTheme = localStorage.getItem('theme') || 'light';
|
| 414 |
document.body.classList.remove("light-mode", "dark-mode");
|
|
|
|
| 322 |
font-size: 12px;
|
| 323 |
}
|
| 324 |
}
|
| 325 |
+
|
| 326 |
+
/* Password Toggle */
|
| 327 |
+
.password-wrapper {
|
| 328 |
+
position: relative;
|
| 329 |
+
}
|
| 330 |
+
|
| 331 |
+
.password-toggle {
|
| 332 |
+
position: absolute;
|
| 333 |
+
right: 15px;
|
| 334 |
+
top: 50%;
|
| 335 |
+
transform: translateY(-50%);
|
| 336 |
+
cursor: pointer;
|
| 337 |
+
background: none;
|
| 338 |
+
border: none;
|
| 339 |
+
padding: 0;
|
| 340 |
+
font-size: 18px;
|
| 341 |
+
opacity: 0.6;
|
| 342 |
+
transition: opacity 0.3s;
|
| 343 |
+
}
|
| 344 |
+
|
| 345 |
+
.password-toggle:hover {
|
| 346 |
+
opacity: 1;
|
| 347 |
+
}
|
| 348 |
</style>
|
| 349 |
</head>
|
| 350 |
<body class="light-mode">
|
|
|
|
| 377 |
|
| 378 |
<div class="form-group">
|
| 379 |
<label for="password">Password</label>
|
| 380 |
+
<div class="password-wrapper">
|
| 381 |
+
<input
|
| 382 |
+
type="password"
|
| 383 |
+
id="password"
|
| 384 |
+
name="password"
|
| 385 |
+
required
|
| 386 |
+
placeholder="••••••••"
|
| 387 |
+
minlength="6"
|
| 388 |
+
>
|
| 389 |
+
<button type="button" class="password-toggle" onclick="togglePassword('password', this)">👁️</button>
|
| 390 |
+
</div>
|
| 391 |
<div id="passwordStrength" class="password-strength"></div>
|
| 392 |
</div>
|
| 393 |
|
| 394 |
<div class="form-group">
|
| 395 |
<label for="confirmPassword">Confirm Password</label>
|
| 396 |
+
<div class="password-wrapper">
|
| 397 |
+
<input
|
| 398 |
+
type="password"
|
| 399 |
+
id="confirmPassword"
|
| 400 |
+
name="confirmPassword"
|
| 401 |
+
required
|
| 402 |
+
placeholder="••••••••"
|
| 403 |
+
>
|
| 404 |
+
<button type="button" class="password-toggle" onclick="togglePassword('confirmPassword', this)">👁️</button>
|
| 405 |
+
</div>
|
| 406 |
</div>
|
| 407 |
|
| 408 |
<button type="button" class="btn" id="registerBtn" onclick="handleRegister()">
|
|
|
|
| 438 |
}
|
| 439 |
}
|
| 440 |
|
| 441 |
+
// Toggle Password Visibility
|
| 442 |
+
function togglePassword(inputId, btn) {
|
| 443 |
+
const input = document.getElementById(inputId);
|
| 444 |
+
if (input.type === "password") {
|
| 445 |
+
input.type = "text";
|
| 446 |
+
btn.textContent = "🙈";
|
| 447 |
+
} else {
|
| 448 |
+
input.type = "password";
|
| 449 |
+
btn.textContent = "👁️";
|
| 450 |
+
}
|
| 451 |
+
}
|
| 452 |
+
|
| 453 |
document.addEventListener("DOMContentLoaded", async () => {
|
| 454 |
const savedTheme = localStorage.getItem('theme') || 'light';
|
| 455 |
document.body.classList.remove("light-mode", "dark-mode");
|