252 lines
16 KiB
PHP
252 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Buku Tamu - 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; }
|
|
.toggle-option { transition: all 0.3s ease; cursor: pointer; }
|
|
.toggle-option.active { background-color: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.5); }
|
|
@keyframes blob { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-50px) scale(1.1); } 66% { transform: translate(-20px,20px) scale(0.9); } 100% { transform: translate(0,0) scale(1); } }
|
|
.animate-blob { animation: blob 7s infinite; }
|
|
.animation-delay-2000 { animation-delay: 2s; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen flex items-center justify-center p-4 lg:p-8 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-[85vh]">
|
|
|
|
{{-- LEFT PANEL --}}
|
|
<div class="w-full md:w-5/12 bg-white p-10 flex flex-col justify-between relative overflow-hidden">
|
|
<div class="absolute -top-20 -left-20 w-72 h-72 bg-primary-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob"></div>
|
|
<div class="absolute bottom-0 right-0 w-72 h-72 bg-primary-50 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob animation-delay-2000"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<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>
|
|
|
|
<div class="space-y-6 mt-10">
|
|
<h1 class="text-4xl font-black text-gray-900 leading-tight">
|
|
Selamat Datang <br> <span class="gradient-text">Kembali!</span>
|
|
</h1>
|
|
<p class="text-gray-400 leading-relaxed text-sm">
|
|
Silakan isi buku tamu digital untuk mencatat kehadiran Anda sebelum beraktivitas di 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>
|
|
Pencatatan Otomatis
|
|
</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>
|
|
Akses Layanan Cepat
|
|
</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
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mt-12">
|
|
<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="mb-6 pb-4">
|
|
<h2 class="text-2xl font-bold text-white tracking-wide mb-2">Buku Tamu</h2>
|
|
<p class="text-primary-300/60 text-sm">Isi data kunjungan Anda hari ini.</p>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto 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
|
|
|
|
{{-- Toggle --}}
|
|
<div class="flex gap-3 mb-6">
|
|
<label class="toggle-option flex-1 flex items-center gap-3 p-4 rounded-xl border border-white/10 active" id="toggle-member" onclick="switchMode('member')">
|
|
<input type="radio" name="mode_toggle" value="member" checked class="hidden">
|
|
<div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center" id="radio-member">
|
|
<div class="w-3 h-3 rounded-full bg-primary-400"></div>
|
|
</div>
|
|
<div>
|
|
<p class="text-white text-sm font-semibold">Anggota</p>
|
|
<p class="text-primary-300/50 text-[10px]">Sudah punya No. Anggota</p>
|
|
</div>
|
|
</label>
|
|
<label class="toggle-option flex-1 flex items-center gap-3 p-4 rounded-xl border border-white/10" id="toggle-tamu" onclick="switchMode('tamu')">
|
|
<input type="radio" name="mode_toggle" value="tamu" class="hidden">
|
|
<div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center" id="radio-tamu"></div>
|
|
<div>
|
|
<p class="text-white text-sm font-semibold">Pengunjung</p>
|
|
<p class="text-primary-300/50 text-[10px]">Belum punya No. Anggota</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('buku_tamu.store') }}" class="space-y-6" id="buku-tamu-form">
|
|
@csrf
|
|
<input type="hidden" name="tipe" id="tipe-input" value="member">
|
|
|
|
<div id="form-member" class="space-y-5">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">No. Anggota</label>
|
|
<input type="text" name="no_anggota" placeholder="Masukkan Nomor Anggota"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_anggota') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-tamu" class="space-y-5" style="display: none;">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Nama Lengkap</label>
|
|
<input type="text" name="nama_tamu" placeholder="Isi nama lengkap anda"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('nama_tamu') }}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Email</label>
|
|
<input type="email" name="email" placeholder="Isi email anda"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('email') }}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">No HP</label>
|
|
<input type="text" name="no_hp" placeholder="+62"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_hp') }}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Asal Instansi/ Sekolah / Kampus</label>
|
|
<input type="text" name="asal_instansi" placeholder="Politeknik Negeri Jember"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('asal_instansi') }}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Status</label>
|
|
<div class="relative">
|
|
<select name="status" class="w-full glass-input rounded-xl px-5 py-4 text-sm appearance-none cursor-pointer">
|
|
<option value="" disabled selected>Pilih Status</option>
|
|
<option value="Siswa" {{ old('status') == 'Siswa' ? 'selected' : '' }}>Siswa</option>
|
|
<option value="Mahasiswa" {{ old('status') == 'Mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
|
|
<option value="Guru/Dosen" {{ old('status') == 'Guru/Dosen' ? 'selected' : '' }}>Guru/Dosen</option>
|
|
<option value="Umum" {{ old('status') == 'Umum' ? 'selected' : '' }}>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>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Tujuan Kunjungan</label>
|
|
<div class="relative">
|
|
<select name="keperluan" required class="w-full glass-input rounded-xl px-5 py-4 text-sm appearance-none cursor-pointer">
|
|
<option value="" disabled selected>Pilih Keperluan</option>
|
|
<option value="Membaca & Meminjam" {{ old('keperluan') == 'Membaca & Meminjam' ? 'selected' : '' }}>Membaca & Meminjam</option>
|
|
<option value="Membaca" {{ old('keperluan') == 'Membaca' ? 'selected' : '' }}>Membaca Buku</option>
|
|
<option value="Meminjam" {{ old('keperluan') == 'Meminjam' ? 'selected' : '' }}>Meminjam Buku</option>
|
|
<option value="Pengembalian" {{ old('keperluan') == 'Pengembalian' ? 'selected' : '' }}>Pengembalian Buku</option>
|
|
<option value="Diskusi" {{ old('keperluan') == 'Diskusi' ? 'selected' : '' }}>Diskusi / Kerja Kelompok</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-2 ml-1 uppercase tracking-wider">Tanggal Kunjungan</label>
|
|
<div class="relative">
|
|
<input type="text" readonly value="{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm cursor-not-allowed opacity-80">
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
|
|
<i class="fas fa-calendar text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit"
|
|
class="group w-full py-4 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 uppercase flex items-center justify-center gap-3">
|
|
<span>MASUK PERPUSTAKAAN</span>
|
|
<i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center pt-2">
|
|
<p class="text-sm text-primary-200/40">
|
|
Belum punya akun anggota?
|
|
<a href="{{ route('register') }}" class="text-white font-semibold hover:text-primary-300 transition underline decoration-primary-400/30 underline-offset-4">
|
|
Daftar Sekarang
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchMode(mode) {
|
|
const formMember = document.getElementById('form-member');
|
|
const formTamu = document.getElementById('form-tamu');
|
|
const toggleMember = document.getElementById('toggle-member');
|
|
const toggleTamu = document.getElementById('toggle-tamu');
|
|
const radioMember = document.getElementById('radio-member');
|
|
const radioTamu = document.getElementById('radio-tamu');
|
|
const tipeInput = document.getElementById('tipe-input');
|
|
|
|
if (mode === 'member') {
|
|
formMember.style.display = 'block';
|
|
formTamu.style.display = 'none';
|
|
toggleMember.classList.add('active');
|
|
toggleTamu.classList.remove('active');
|
|
radioMember.innerHTML = '<div class="w-3 h-3 rounded-full bg-primary-400"></div>';
|
|
radioTamu.innerHTML = '';
|
|
tipeInput.value = 'member';
|
|
} else {
|
|
formMember.style.display = 'none';
|
|
formTamu.style.display = 'block';
|
|
toggleMember.classList.remove('active');
|
|
toggleTamu.classList.add('active');
|
|
radioMember.innerHTML = '';
|
|
radioTamu.innerHTML = '<div class="w-3 h-3 rounded-full bg-primary-400"></div>';
|
|
tipeInput.value = 'tamu';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|