192 lines
8.8 KiB
PHP
192 lines
8.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Daftar Akun | FiFreshChecker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
heading: ['Poppins', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: '#0A66C2',
|
|
'primary-dark': '#004182',
|
|
accent: '#00C4CC',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="font-sans text-gray-800 antialiased selection:bg-primary/20 bg-gradient-to-br from-[#0B192C] via-[#1A365D] to-primary-dark min-h-screen flex items-center justify-center relative overflow-hidden py-10">
|
|
|
|
<div class="absolute inset-0 opacity-5" style="background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); z-index: 0;"></div>
|
|
|
|
<div class="w-full max-w-lg bg-white rounded-[24px] shadow-2xl p-8 sm:p-10 relative z-10 mx-4 border border-white/20">
|
|
|
|
<div class="text-center mb-8">
|
|
<a href="/" class="inline-flex items-center justify-center mb-4">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
|
<i class="bi bi-person-plus text-cyan-500 text-2xl"></i>
|
|
</div>
|
|
</a>
|
|
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 font-heading mb-2">
|
|
Buat Akun Baru
|
|
</h2>
|
|
<p class="text-gray-500 text-sm sm:text-base">
|
|
Bergabunglah untuk mulai menganalisis kesegaran ikan dengan AI.
|
|
</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('register') }}" class="space-y-5">
|
|
@csrf
|
|
|
|
{{-- NAMA --}}
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Nama Lengkap
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-person text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
required
|
|
placeholder="Masukkan nama lengkap Anda"
|
|
value="{{ old('name') }}"
|
|
class="w-full border @error('name') border-red-500 focus:ring-red-500/20 focus:border-red-500 @else border-gray-300 focus:ring-primary/20 focus:border-primary @enderror rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none transition-colors"
|
|
>
|
|
</div>
|
|
@error('name')
|
|
<p class="text-red-500 text-xs font-medium mt-1.5 pl-1 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- EMAIL --}}
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Alamat Email
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-envelope text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
required
|
|
placeholder="contoh@email.com"
|
|
value="{{ old('email') }}"
|
|
class="w-full border @error('email') border-red-500 focus:ring-red-500/20 focus:border-red-500 @else border-gray-300 focus:ring-primary/20 focus:border-primary @enderror rounded-xl pl-10 pr-4 py-3 text-sm focus:outline-none transition-colors"
|
|
>
|
|
</div>
|
|
@error('email')
|
|
<p class="text-red-500 text-xs font-medium mt-1.5 pl-1 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- PASSWORD --}}
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Kata Sandi
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-lock text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="password"
|
|
required
|
|
placeholder="Minimal 8 karakter"
|
|
class="w-full border @error('password') border-red-500 @else border-gray-300 @enderror rounded-xl pl-10 pr-12 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
|
|
>
|
|
<button type="button" onclick="togglePassword('password', 'icon-pass')"
|
|
class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-primary transition-colors">
|
|
<i id="icon-pass" class="bi bi-eye text-lg"></i>
|
|
</button>
|
|
</div>
|
|
@error('password')
|
|
<p class="text-red-500 text-xs font-medium mt-1.5 pl-1 flex items-center gap-1">
|
|
<i class="bi bi-exclamation-circle"></i> {{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- KONFIRMASI PASSWORD --}}
|
|
<div>
|
|
<label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Konfirmasi Kata Sandi
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
|
<i class="bi bi-shield-lock text-gray-400"></i>
|
|
</div>
|
|
<input
|
|
type="password"
|
|
name="password_confirmation"
|
|
id="password_confirmation"
|
|
required
|
|
placeholder="Ulangi kata sandi Anda"
|
|
class="w-full border border-gray-300 rounded-xl pl-10 pr-12 py-3 text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-colors"
|
|
>
|
|
<button type="button" onclick="togglePassword('password_confirmation', 'icon-confirm')"
|
|
class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-gray-400 hover:text-primary transition-colors">
|
|
<i id="icon-confirm" class="bi bi-eye text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-4 rounded-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(10,102,194,0.25)] mt-6"
|
|
>
|
|
Daftar Sekarang
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div class="text-center mt-8 text-sm text-gray-600">
|
|
Sudah memiliki akun?
|
|
<a href="/login" class="font-semibold text-primary hover:text-primary-dark transition-colors hover:underline">
|
|
Masuk di sini
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |