41 lines
2.3 KiB
PHP
41 lines
2.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Verifikasi Email - OTP</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { background: #0b1120; color: #e5e7eb; font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.card { background: rgba(17,24,39,0.92); border-radius: 18px; padding: 36px 32px; max-width: 380px; width: 100%; box-shadow: 0 12px 32px #0005; }
|
|
h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 18px; }
|
|
label { font-size: 13px; color: #cbd5e1; }
|
|
input[type="text"], input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #334155; background: #1e293b; color: #e5e7eb; margin-bottom: 18px; }
|
|
button { width: 100%; padding: 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, #2563eb, #14b8a6); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
|
|
.errors { background: #ef44441a; color: #fecaca; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
|
|
.info { color: #fbbf24; font-size: 13px; margin-bottom: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form class="card" method="POST" action="{{ $formAction ?? route('verification.verify') }}">
|
|
@csrf
|
|
<h1>{{ $title ?? 'Verifikasi Email' }}</h1>
|
|
<div class="info">{{ $info ?? 'Masukkan kode OTP yang telah dikirim ke email Anda.' }}</div>
|
|
@if ($errors->any())
|
|
<div class="errors">
|
|
<ul style="margin:0; padding-left: 18px;">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
<label for="email">Email</label>
|
|
<input id="email" type="email" name="email" value="{{ old('email', $email ?? '') }}" required readonly />
|
|
<label for="otp">Kode OTP</label>
|
|
<input id="otp" type="text" name="otp" maxlength="6" pattern="[0-9]{6}" required placeholder="Masukkan 6 digit kode" autofocus />
|
|
<button type="submit">Verifikasi</button>
|
|
</form>
|
|
</body>
|
|
</html>
|