password set

This commit is contained in:
imadhigp 2026-08-07 13:12:26 +05:30
parent 45fc7e33c9
commit d71dc7ef62
1 changed files with 19 additions and 21 deletions

View File

@ -3,7 +3,7 @@
@section('title', 'Student Registration') @section('title', 'Student Registration')
@push('styles') @push('styles')
<!-- FontAwesome Icons (Eye icon එක සඳහා) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
@ -13,7 +13,7 @@
scale: 0.92; scale: 0.92;
} }
/* LEFT PANEL (If active) */
.left-panel { .left-panel {
background: #5E244E; background: #5E244E;
color: white; color: white;
@ -23,7 +23,6 @@
padding: 40px; padding: 40px;
} }
/* RIGHT PANEL */
.right-panel { .right-panel {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@ -43,7 +42,6 @@
scale : 0.72 scale : 0.72
} }
/* TITLE */
.headline { .headline {
text-align: center; text-align: center;
font-size: 32px; font-size: 32px;
@ -52,7 +50,7 @@
margin-bottom: 35px; margin-bottom: 35px;
} }
/* MODERN INPUT WITH FLOATING LABELS */
.input-container { .input-container {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
@ -61,7 +59,7 @@
.input-container input { .input-container input {
width: 100%; width: 100%;
height: 50px; height: 50px;
padding: 15px 35px 5px 0; /* Eye icon එක සඳහා දකුණු පසින් ඉඩ තබා ඇත */ padding: 15px 35px 5px 0;
border: none; border: none;
border-bottom: 2px solid #ddd; border-bottom: 2px solid #ddd;
background: transparent; background: transparent;
@ -81,12 +79,12 @@
font-size: 16px; font-size: 16px;
} }
/* Input Focus States */
.input-container input:focus { .input-container input:focus {
border-bottom-color: #744a68; border-bottom-color: #744a68;
} }
/* Label Floating Effect */
.input-container input:focus + label, .input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label { .input-container input:not(:placeholder-shown) + label {
top: -10px; top: -10px;
@ -95,7 +93,7 @@
font-weight: 600; font-weight: 600;
} }
/* EYE ICON TOGGLE */
.toggle-password { .toggle-password {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -144,7 +142,7 @@
transform: scale(0.98); transform: scale(0.98);
} }
/* BOTTOM TEXT */
.dontacc { .dontacc {
text-align: center; text-align: center;
} }
@ -167,9 +165,9 @@
color: #5E244E; color: #5E244E;
} }
/* PASSWORD STATUS BOX STYLE */
.password-rules { .password-rules {
display: none; /* මුලින් Hide කර ඇත */ display: none;
margin-top: -15px; margin-top: -15px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 15px; padding: 10px 15px;
@ -261,7 +259,7 @@
@enderror @enderror
</div> </div>
<!-- Password Field -->
<div class="input-container mb-2"> <div class="input-container mb-2">
<input type="password" id="password" name="password" placeholder=" " required autocomplete="new-password"> <input type="password" id="password" name="password" placeholder=" " required autocomplete="new-password">
<label>Password</label> <label>Password</label>
@ -271,7 +269,7 @@
@enderror @enderror
</div> </div>
<!-- Password Rules Box -->
<div class="password-rules" id="passwordRules"> <div class="password-rules" id="passwordRules">
<strong style="font-size: 13px; color: #444;" class="d-block mb-1">Password Status:</strong> <strong style="font-size: 13px; color: #444;" class="d-block mb-1">Password Status:</strong>
<ul> <ul>
@ -283,7 +281,7 @@
</ul> </ul>
</div> </div>
<!-- Confirm Password Field -->
<div class="input-container mb-2"> <div class="input-container mb-2">
<input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " required autocomplete="new-password"> <input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " required autocomplete="new-password">
<label>Confirm Password</label> <label>Confirm Password</label>
@ -333,7 +331,7 @@
const ruleNumber = document.getElementById('rule-number'); const ruleNumber = document.getElementById('rule-number');
const ruleSpecial = document.getElementById('rule-special'); const ruleSpecial = document.getElementById('rule-special');
// --- 1. SHOW / HIDE PASSWORD TOGGLE ---
function setupPasswordToggle(inputEl, iconEl) { function setupPasswordToggle(inputEl, iconEl) {
iconEl.addEventListener('click', function () { iconEl.addEventListener('click', function () {
const type = inputEl.getAttribute('type') === 'password' ? 'text' : 'password'; const type = inputEl.getAttribute('type') === 'password' ? 'text' : 'password';
@ -347,7 +345,7 @@
setupPasswordToggle(confirmPasswordInput, toggleConfirmPassword); setupPasswordToggle(confirmPasswordInput, toggleConfirmPassword);
// --- 2. FOCUS / BLUR FOR RULES BOX ---
passwordInput.addEventListener('focus', function () { passwordInput.addEventListener('focus', function () {
passwordRules.style.display = 'block'; passwordRules.style.display = 'block';
}); });
@ -359,7 +357,7 @@
}); });
// --- 3. LIVE PASSWORD VALIDATION ---
passwordInput.addEventListener('input', function () { passwordInput.addEventListener('input', function () {
const val = passwordInput.value; const val = passwordInput.value;
@ -383,7 +381,7 @@
} }
// --- 4. CONFIRM PASSWORD MATCH CHECK ---
confirmPasswordInput.addEventListener('input', checkPasswordMatch); confirmPasswordInput.addEventListener('input', checkPasswordMatch);
function checkPasswordMatch() { function checkPasswordMatch() {