225 lines
6.5 KiB
PHP
225 lines
6.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Reset Kata Sandi - Pustaka Nawasena</title>
|
|
<link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background: url('{{ asset("images/utama.jpg") }}') no-repeat center center / cover;
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(5px);
|
|
z-index: 0;
|
|
}
|
|
|
|
.auth-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
padding: 45px 40px;
|
|
width: 90%;
|
|
max-width: 430px;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
|
|
opacity: 0;
|
|
transform: translateY(40px) scale(0.95);
|
|
animation: fadeInCard 0.8s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInCard {
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.logo-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo-wrapper img {
|
|
width: 85px;
|
|
height: 85px;
|
|
object-fit: contain;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.logo-wrapper img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.header-bar {
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.header-bar h5 {
|
|
color: #1e3a8a;
|
|
font-weight: 800;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.header-bar small {
|
|
color: #4b5563;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
input.form-control {
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
border: 1.5px solid #ddd;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
input.form-control:focus {
|
|
border-color: #f97316;
|
|
box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
button.btn-primary {
|
|
background: #f97316;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
button.btn-primary:hover {
|
|
background: #ea580c;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 15px rgba(249, 115, 22, 0.5);
|
|
}
|
|
|
|
.back-login {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.back-login a {
|
|
color: #1e3a8a;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.back-login a:hover {
|
|
color: #f97316;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.auth-card { padding: 35px 25px; }
|
|
.logo-wrapper img { width: 70px; height: 70px; }
|
|
.header-bar h5 { font-size: 1.3rem; }
|
|
.header-bar small { font-size: 0.85rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="auth-card">
|
|
<div class="logo-wrapper">
|
|
<img src="{{ asset('images/kartu.png') }}" alt="Logo Pustaka Nawasena">
|
|
</div>
|
|
|
|
<div class="header-bar">
|
|
<h5>Pustaka Nawasena</h5>
|
|
<small>Bakorwil III Malang</small>
|
|
</div>
|
|
|
|
<h6 class="text-center mb-4 fw-bold text-secondary">Reset Kata Sandi</h6>
|
|
|
|
@if(session('status'))
|
|
<div class="alert alert-success text-center py-2">{{ session('status') }}</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-danger text-center py-2">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('password.update') }}">
|
|
@csrf
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label fw-semibold">Alamat Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
|
|
<div class="mb-3 position-relative">
|
|
<label for="password" class="form-label fw-semibold">Kata Sandi Baru</label>
|
|
<input type="password" class="form-control" id="password" name="password" required>
|
|
<i class="bi bi-eye-slash position-absolute togglePassword"
|
|
data-target="password"
|
|
style="top: 50%; right: 14px; transform: translateY(-50%); cursor: pointer; color: #555;">
|
|
</i>
|
|
</div>
|
|
|
|
<div class="mb-3 position-relative">
|
|
<label for="password_confirmation" class="form-label fw-semibold">Konfirmasi Kata Sandi</label>
|
|
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
|
|
<i class="bi bi-eye-slash position-absolute togglePassword"
|
|
data-target="password_confirmation"
|
|
style="top: 50%; right: 14px; transform: translateY(-50%); cursor: pointer; color: #555;">
|
|
</i>
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="btn btn-primary w-100">Ubah Kata Sandi</button>
|
|
</form>
|
|
|
|
<div class="back-login">
|
|
<a href="{{ route('login') }}">← Kembali ke Halaman Login</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.togglePassword').forEach(icon => {
|
|
icon.addEventListener('click', function () {
|
|
const target = document.getElementById(this.dataset.target);
|
|
|
|
if (target.type === "password") {
|
|
target.type = "text";
|
|
this.classList.remove("bi-eye-slash");
|
|
this.classList.add("bi-eye");
|
|
} else {
|
|
target.type = "password";
|
|
this.classList.remove("bi-eye");
|
|
this.classList.add("bi-eye-slash");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|