206 lines
6.8 KiB
PHP
206 lines
6.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Lupa Password - SIDAKDesa</title>
|
|
<meta name="description"
|
|
content="Halaman lupa password SIDAKDesa untuk mengirim email reset password dan memulihkan akses akun dengan aman.">
|
|
<meta name="keywords"
|
|
content="lupa password SIDAKDesa, kirim email reset password, reset password, SIDAKDesa, Desa Pelem">
|
|
<meta name="author" content="Desa Pelem">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="canonical" href="{{ url()->current() }}">
|
|
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Lupa Password - SIDAKDesa">
|
|
<meta property="og:description"
|
|
content="Kirim email reset password SIDAKDesa untuk memulihkan akses akun Anda dengan aman.">
|
|
<meta property="og:url" content="{{ url()->current() }}">
|
|
<meta property="og:image" content="{{ asset('assets/images/njk-logo.png') }}">
|
|
<meta property="og:site_name" content="SIDAKDesa">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Lupa Password - SIDAKDesa">
|
|
<meta name="twitter:description"
|
|
content="Kirim email reset password SIDAKDesa untuk memulihkan akses akun Anda dengan aman.">
|
|
<meta name="twitter:image" content="{{ asset('assets/images/njk-logo.png') }}">
|
|
|
|
<link rel="icon" type="image/png" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
<link rel="shortcut icon" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
<link rel="apple-touch-icon" href="{{ asset('assets/images/njk-logo.png') }}">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<style>
|
|
body {
|
|
background: #ffffff;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.login-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.logo-col {
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.logo-card {
|
|
background: #f4f6f8;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-card img {
|
|
display: block max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Skala nyaman, tapi tetap dibatasi kontainer */
|
|
.brand-img {
|
|
width: clamp(220px, 70%, 360px);
|
|
}
|
|
|
|
.illu-img {
|
|
width: clamp(280px, 85%, 440px);
|
|
}
|
|
|
|
/* Kolom kiri agak lega di layar besar */
|
|
@media (min-width:1200px) {
|
|
.logo-col {
|
|
padding: 3rem;
|
|
}
|
|
|
|
.logo-card {
|
|
max-width: 520px;
|
|
}
|
|
}
|
|
|
|
/* Di layar kecil, kasih jarak bawah */
|
|
@media (max-width:991.98px) {
|
|
.logo-col {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.logo-card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.form-col {
|
|
background: #ffffff;
|
|
padding: 3rem 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-teal {
|
|
background-color: #168a85;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-teal:hover {
|
|
background-color: #11716c;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-orange {
|
|
background-color: #f27d32;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-orange:hover {
|
|
background-color: #d86b28;
|
|
color: #fff;
|
|
}
|
|
|
|
.text-forgot-password {
|
|
color: #168a85;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="login-wrapper">
|
|
<div class="row g-0 w-100" style="max-width: 1100px; background: transparent;">
|
|
{{-- Kolom kiri: card logo & ilustrasi --}}
|
|
<div class="col-lg-6 logo-col">
|
|
<div class="logo-card">
|
|
{{-- Logo --}}
|
|
<img src="{{ asset('assets/images/sidak-desa.jpg') }}" alt="Logo SIDAKDesa"
|
|
class="img-fluid mb-4 brand-img">
|
|
{{-- Ilustrasi --}}
|
|
<img src="{{ asset('assets/images/icon_lupa_sandi.png') }}" alt="Ilustrasi Lupa Sandi"
|
|
class="img-fluid illu-img">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kolom kanan: form login --}}
|
|
<div class="col-lg-6 form-col">
|
|
<div class="w-100" style="max-width: 500px;">
|
|
{{-- Tombol kembali --}}
|
|
<a href="{{ route('login') }}" class="btn btn-light mb-4"
|
|
style="border-radius:8px; border:1px solid #ddd;">
|
|
← Halaman Login
|
|
</a>
|
|
<h3 class="fw-bold mb-2">Lupa Kata Sandi</h3>
|
|
<p class="text-muted mb-4">Silahkan masukkan email dan password baru anda!</p>
|
|
|
|
@if ($errors->has('email'))
|
|
<div class="alert alert-danger mt-4">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->get('email') as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
{{-- Tampilkan error status --}}
|
|
@if (session('status'))
|
|
<div class="alert alert-success mt-4">
|
|
{{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('password.email') }}" method="POST">
|
|
@csrf
|
|
<div class="mb-3">
|
|
<label class="form-label">Email</label>
|
|
<input type="text" name="email" value="{{ old('email') }}"
|
|
class="form-control form-control-lg" placeholder="Masukkan Email" required>
|
|
</div>
|
|
<div class="d-grid gap-3">
|
|
<button type="submit" class="btn btn-teal btn-lg">Kirim</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|