199 lines
12 KiB
PHP
199 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Daftar Anggota - Sarakata</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: {
|
|
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
|
colors: { primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' } }
|
|
}}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
.glass-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: white; transition: all 0.3s; }
|
|
.glass-input:focus { background: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.6); box-shadow: 0 0 20px rgba(99,102,241,0.15); outline: none; }
|
|
.glass-input::placeholder { color: rgba(165,180,252,0.4); }
|
|
select.glass-input option { background-color: #312e81; color: white; }
|
|
.no-scrollbar::-webkit-scrollbar { width: 4px; }
|
|
.no-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.no-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen flex items-center justify-center p-4 bg-gray-50 font-sans antialiased">
|
|
|
|
<div class="w-full max-w-6xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col md:flex-row h-auto md:h-[88vh]">
|
|
|
|
{{-- LEFT PANEL --}}
|
|
<div class="w-full md:w-5/12 p-10 md:p-12 flex flex-col justify-between relative overflow-hidden">
|
|
<div class="absolute -top-10 -left-10 w-40 h-40 bg-primary-100 rounded-full blur-3xl opacity-50"></div>
|
|
<div class="absolute bottom-10 right-10 w-60 h-60 bg-primary-50 rounded-full blur-3xl opacity-50"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-10">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg shadow-primary-200">
|
|
<i class="fas fa-book-open text-white text-sm"></i>
|
|
</div>
|
|
<span class="font-extrabold text-xl text-gray-900 tracking-tight">Sara<span class="gradient-text">kata</span></span>
|
|
</div>
|
|
|
|
<h1 class="text-3xl md:text-4xl font-black text-gray-900 mb-4 leading-tight">
|
|
Mulai Perjalanan<br>Literasi Anda.
|
|
</h1>
|
|
<p class="text-gray-400 leading-relaxed text-sm">
|
|
Daftarkan diri Anda sekarang untuk mengakses ribuan koleksi buku digital, jurnal, dan fasilitas perpustakaan.
|
|
</p>
|
|
|
|
<div class="mt-8 space-y-3">
|
|
<div class="flex items-center gap-3 text-sm text-gray-500">
|
|
<span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
|
|
Akses Peminjaman Buku
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm text-gray-500">
|
|
<span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
|
|
Riwayat Kunjungan Digital
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm text-gray-500">
|
|
<span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
|
|
Gratis untuk Sivitas Akademika
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mt-6 md:mt-0">
|
|
<p class="text-xs text-gray-300 font-medium">© {{ date('Y') }} Sarakata Library System</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- RIGHT PANEL (Form) --}}
|
|
<div class="w-full md:w-7/12 bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900 relative flex flex-col p-8 md:p-12">
|
|
|
|
<div class="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-white">Formulir Pendaftaran</h2>
|
|
<p class="text-primary-300/60 text-xs mt-1">Isi data diri dengan lengkap dan benar.</p>
|
|
</div>
|
|
<div class="hidden md:block text-white/10">
|
|
<i class="fas fa-file-alt text-3xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto no-scrollbar pr-2">
|
|
|
|
@if ($errors->any())
|
|
<div class="mb-6 bg-red-500/20 border border-red-500/30 text-white text-xs p-4 rounded-xl">
|
|
<ul class="list-disc pl-4 space-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('register') }}" class="space-y-5">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Nama Lengkap</label>
|
|
<input type="text" name="name" required placeholder="Masukkan nama sesuai KTP" value="{{ old('name') }}"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Email</label>
|
|
<input type="email" name="email" required placeholder="nama@email.com" value="{{ old('email') }}"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">No. WhatsApp</label>
|
|
<input type="text" name="no_hp" required placeholder="08xxxxxxxxxx" value="{{ old('no_hp') }}"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Asal Instansi</label>
|
|
<input type="text" name="instansi" required placeholder="Contoh: Politeknik Negeri Jember" value="{{ old('instansi') }}"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Status</label>
|
|
<div class="relative">
|
|
<select name="status" required class="w-full px-5 py-3.5 rounded-xl glass-input text-sm appearance-none cursor-pointer">
|
|
<option value="" disabled selected>Pilih Status</option>
|
|
<option value="Mahasiswa">Mahasiswa</option>
|
|
<option value="Siswa">Siswa</option>
|
|
<option value="Dosen">Dosen/Guru</option>
|
|
<option value="Umum">Umum</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">No. Identitas (NIK/NISN)</label>
|
|
<input type="text" name="no_ktp" required placeholder="16 digit angka" value="{{ old('no_ktp') }}"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Tujuan Pendaftaran</label>
|
|
<div class="relative">
|
|
<select name="alasan" required class="w-full px-5 py-3.5 rounded-xl glass-input text-sm appearance-none cursor-pointer">
|
|
<option value="Membaca & Meminjam">Membaca & Meminjam Buku</option>
|
|
<option value="Penelitian">Penelitian / Tugas Akhir</option>
|
|
<option value="Berkunjung">Sekedar Berkunjung</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
|
|
<i class="fas fa-chevron-down text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-white/10 my-2"></div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Password</label>
|
|
<input type="password" name="password" required placeholder="Min. 8 karakter"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Konfirmasi Password</label>
|
|
<input type="password" name="password_confirmation" required placeholder="Ketik ulang"
|
|
class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit"
|
|
class="w-full py-3.5 bg-gradient-to-r from-primary-400 to-primary-500 hover:from-primary-500 hover:to-primary-600 text-white font-bold rounded-xl shadow-xl shadow-primary-500/20 active:scale-[0.98] transition-all text-sm tracking-wide">
|
|
<i class="fas fa-user-plus mr-2"></i> Daftar Sekarang
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-6 mb-2">
|
|
<p class="text-xs text-primary-200/50">
|
|
Sudah memiliki akun anggota?
|
|
<a href="{{ route('login') }}" class="text-white font-semibold hover:text-primary-300 transition underline decoration-primary-400/40 underline-offset-4">Masuk disini</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|