password set
This commit is contained in:
parent
45fc7e33c9
commit
d71dc7ef62
|
|
@ -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() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue