408 lines
12 KiB
PHP
408 lines
12 KiB
PHP
@extends('layouts.blank')
|
|
|
|
@section('title', 'Student Registration')
|
|
|
|
@push('styles')
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<style>
|
|
body {
|
|
background: #f5f7fb;
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
scale: 0.92;
|
|
}
|
|
|
|
|
|
.left-panel {
|
|
background: #5E244E;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
.right-panel {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
/* REGISTRATION BOX */
|
|
.box {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
background: #ffffff;
|
|
padding: 45px;
|
|
border-radius: 18px;
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
|
scale : 0.72
|
|
}
|
|
|
|
.headline {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #222;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
|
|
.input-container {
|
|
position: relative;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.input-container input {
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 15px 35px 5px 0;
|
|
border: none;
|
|
border-bottom: 2px solid #ddd;
|
|
background: transparent;
|
|
outline: none;
|
|
font-size: 16px;
|
|
color: #334155;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.input-container label {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 0;
|
|
color: #744a68;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
.input-container input:focus {
|
|
border-bottom-color: #744a68;
|
|
}
|
|
|
|
|
|
.input-container input:focus + label,
|
|
.input-container input:not(:placeholder-shown) + label {
|
|
top: -10px;
|
|
font-size: 12px;
|
|
color: #744a68;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
.toggle-password {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 37px;
|
|
cursor: pointer;
|
|
color: #744a68;
|
|
font-size: 16px;
|
|
z-index: 10;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.toggle-password:hover {
|
|
color: #5E244E;
|
|
}
|
|
|
|
/* CHECKBOX STYLE */
|
|
.form-check-input:checked {
|
|
background-color: #5E244E;
|
|
border-color: #5E244E;
|
|
}
|
|
|
|
.form-check-label {
|
|
color: #666;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* BUTTON */
|
|
.btn-primary {
|
|
height: 50px;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
background: #822424;
|
|
border: none;
|
|
color: white;
|
|
transition: background 0.2s ease-in-out, transform 0.1s ease;
|
|
}
|
|
|
|
.btn-primary:hover, .btn-primary:focus {
|
|
background: #822424;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
|
|
.dontacc {
|
|
text-align: center;
|
|
}
|
|
|
|
.dontacc p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dontacc a {
|
|
color: #744a68;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.dontacc a:hover {
|
|
text-decoration: underline;
|
|
color: #5E244E;
|
|
}
|
|
|
|
|
|
.password-rules {
|
|
display: none;
|
|
margin-top: -15px;
|
|
margin-bottom: 20px;
|
|
padding: 10px 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.password-rules ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.password-rules li {
|
|
margin-bottom: 3px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.rule-invalid {
|
|
color: #dc3545; /* Red */
|
|
}
|
|
|
|
.rule-valid {
|
|
color: #198754; /* Green */
|
|
}
|
|
|
|
@media(max-width:991px) {
|
|
.right-panel {
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.box {
|
|
padding: 30px;
|
|
}
|
|
|
|
.headline {
|
|
font-size: 28px;
|
|
color: #5E244E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row min-vh-100">
|
|
|
|
<div class="col-md-8 col-lg-5 mx-auto right-panel" style="padding-left:5px;">
|
|
<div class="box">
|
|
<h2 class="headline">Student Registration</h2>
|
|
|
|
<form method="POST" action="{{ url('/signuppage') }}">
|
|
|
|
@csrf
|
|
|
|
<div class="input-container">
|
|
<input type="text" name="first_name" value="{{ old('first_name') }}" placeholder=" " required autocomplete="given-name">
|
|
<label>First Name</label>
|
|
@error('first_name')
|
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
<input type="text" name="last_name" value="{{ old('last_name') }}" placeholder=" " required autocomplete="family-name">
|
|
<label>Last Name</label>
|
|
@error('last_name')
|
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
<input type="email" name="email" value="{{ old('email') }}" placeholder=" " required autocomplete="email">
|
|
<label>Email Address</label>
|
|
@error('email')
|
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
<input type="text" name="phone" value="{{ old('phone') }}" placeholder=" " required autocomplete="tel">
|
|
<label>Mobile Number</label>
|
|
@error('phone')
|
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="input-container mb-2">
|
|
<input type="password" id="password" name="password" placeholder=" " required autocomplete="new-password">
|
|
<label>Password</label>
|
|
<i class="fa-solid fa-eye toggle-password" id="togglePassword"></i>
|
|
@error('password')
|
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="password-rules" id="passwordRules">
|
|
<strong style="font-size: 13px; color: #444;" class="d-block mb-1">Password Status:</strong>
|
|
<ul>
|
|
<li id="rule-length" class="rule-invalid">• At least 6 characters</li>
|
|
<li id="rule-upper" class="rule-invalid">• At least one uppercase letter</li>
|
|
<li id="rule-lower" class="rule-invalid">• At least one lowercase letter</li>
|
|
<li id="rule-number" class="rule-invalid">• At least one number</li>
|
|
<li id="rule-special" class="rule-invalid">• At least one special character</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="input-container mb-2">
|
|
<input type="password" id="password_confirmation" name="password_confirmation" placeholder=" " required autocomplete="new-password">
|
|
<label>Confirm Password</label>
|
|
<i class="fa-solid fa-eye toggle-password" id="toggleConfirmPassword"></i>
|
|
</div>
|
|
|
|
<!-- Confirm Password Match Status Message -->
|
|
<div id="matchMessage" class="mb-3 small" style="display: none; font-weight: 600; font-size: 12px;"></div>
|
|
|
|
<div class="form-check mb-4 d-flex align-items-center gap-2">
|
|
<input class="form-check-input" type="checkbox" id="agree" required>
|
|
<label class="form-check-label" for="agree">
|
|
I agree to the Terms & Conditions
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mb-4">
|
|
Create Account
|
|
</button>
|
|
|
|
<div class="dontacc">
|
|
<p class="mb-1">Already have an account? <a href="{{ url('/signin') }}" class="ms-1">Sign In</a></p>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const passwordInput = document.getElementById('password');
|
|
const confirmPasswordInput = document.getElementById('password_confirmation');
|
|
const passwordRules = document.getElementById('passwordRules');
|
|
const matchMessage = document.getElementById('matchMessage');
|
|
|
|
const togglePassword = document.getElementById('togglePassword');
|
|
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
|
|
|
|
const ruleLength = document.getElementById('rule-length');
|
|
const ruleUpper = document.getElementById('rule-upper');
|
|
const ruleLower = document.getElementById('rule-lower');
|
|
const ruleNumber = document.getElementById('rule-number');
|
|
const ruleSpecial = document.getElementById('rule-special');
|
|
|
|
|
|
function setupPasswordToggle(inputEl, iconEl) {
|
|
iconEl.addEventListener('click', function () {
|
|
const type = inputEl.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
inputEl.setAttribute('type', type);
|
|
this.classList.toggle('fa-eye');
|
|
this.classList.toggle('fa-eye-slash');
|
|
});
|
|
}
|
|
|
|
setupPasswordToggle(passwordInput, togglePassword);
|
|
setupPasswordToggle(confirmPasswordInput, toggleConfirmPassword);
|
|
|
|
|
|
|
|
passwordInput.addEventListener('focus', function () {
|
|
passwordRules.style.display = 'block';
|
|
});
|
|
|
|
passwordInput.addEventListener('blur', function () {
|
|
if (passwordInput.value.length === 0) {
|
|
passwordRules.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
|
|
|
|
passwordInput.addEventListener('input', function () {
|
|
const val = passwordInput.value;
|
|
|
|
toggleRule(ruleLength, val.length >= 6);
|
|
toggleRule(ruleUpper, /[A-Z]/.test(val));
|
|
toggleRule(ruleLower, /[a-z]/.test(val));
|
|
toggleRule(ruleNumber, /[0-9]/.test(val));
|
|
toggleRule(ruleSpecial, /[!@#$%^&*(),.?":{}|<>]/.test(val));
|
|
|
|
checkPasswordMatch();
|
|
});
|
|
|
|
function toggleRule(element, isValid) {
|
|
if (isValid) {
|
|
element.classList.remove('rule-invalid');
|
|
element.classList.add('rule-valid');
|
|
} else {
|
|
element.classList.remove('rule-valid');
|
|
element.classList.add('rule-invalid');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
|
|
|
|
function checkPasswordMatch() {
|
|
const pwd = passwordInput.value;
|
|
const confirmPwd = confirmPasswordInput.value;
|
|
|
|
if (confirmPwd.length === 0) {
|
|
matchMessage.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
matchMessage.style.display = 'block';
|
|
|
|
if (pwd === confirmPwd) {
|
|
matchMessage.style.color = '#198754'; // Green
|
|
matchMessage.textContent = '✓ Passwords match';
|
|
} else {
|
|
matchMessage.style.color = '#dc3545'; // Red
|
|
matchMessage.textContent = '✕ Passwords do not match';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |