104 lines
6.4 KiB
PHP
104 lines
6.4 KiB
PHP
<x-guest-layout>
|
|
<div class="text-center mb-8">
|
|
<div class="bg-[#1e3a8a] w-20 h-20 rounded-2xl mx-auto mb-4 flex items-center justify-center shadow-lg">
|
|
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Buat Akun Baru</h2>
|
|
<p class="text-sm text-gray-600 mt-1">Daftar untuk menggunakan S-Learn</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('register') }}" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Name -->
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus autocomplete="name"
|
|
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200 @error('name') border-red-500 @enderror"
|
|
placeholder="John Doe">
|
|
</div>
|
|
@error('name')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
|
|
</svg>
|
|
</div>
|
|
<input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="username"
|
|
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200 @error('email') border-red-500 @enderror"
|
|
placeholder="user@example.com">
|
|
</div>
|
|
@error('email')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
|
</svg>
|
|
</div>
|
|
<input id="password" type="password" name="password" required autocomplete="new-password"
|
|
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200 @error('password') border-red-500 @enderror"
|
|
placeholder="Minimal 8 karakter">
|
|
</div>
|
|
@error('password')
|
|
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Confirm Password -->
|
|
<div>
|
|
<label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
</div>
|
|
<input id="password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password"
|
|
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200"
|
|
placeholder="Ketik ulang password">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Button -->
|
|
<button type="submit" class="w-full bg-[#1e3a8a] text-white py-3 px-4 rounded-xl hover:bg-[#2b4a9e] focus:ring-4 focus:ring-[#1e3a8a]/50 transition duration-200 font-medium text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
|
|
<span class="flex items-center justify-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
</svg>
|
|
Daftar
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Link to Login -->
|
|
<div class="text-center mt-6 pt-6 border-t border-gray-200">
|
|
<p class="text-sm text-gray-600">
|
|
Sudah punya akun?
|
|
<a href="{{ route('login') }}" class="font-medium text-[#1e3a8a] hover:text-[#2b4a9e] hover:underline transition duration-200">
|
|
Login disini
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</x-guest-layout> |