294 lines
18 KiB
PHP
294 lines
18 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; }
|
|
|
|
/* Hide spin buttons for number input */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
</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">
|
|
|
|
@php $activeTipe = old('tipe', request('tipe', 'member')); @endphp
|
|
|
|
<div class="mb-5 pb-3">
|
|
<h2 id="form-title" class="text-2xl font-bold text-white tracking-wide mb-1">
|
|
{{ $activeTipe == 'member' ? 'Buku Tamu Anggota' : 'Buku Tamu Pengunjung Umum' }}
|
|
</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 {{ $activeTipe == 'member' ? 'active' : '' }}" id="toggle-member" onclick="switchMode('member')">
|
|
<input type="radio" name="mode_toggle" value="member" {{ $activeTipe == '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">
|
|
@if($activeTipe == 'member')
|
|
<div class="w-3 h-3 rounded-full bg-primary-400"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<p class="text-white text-sm font-semibold">Anggota</p>
|
|
<p class="text-primary-300/50 text-[10px]">Punya NIK / No. Anggota</p>
|
|
</div>
|
|
</label>
|
|
<label class="toggle-option flex-1 flex items-center gap-3 p-4 rounded-xl border border-white/10 {{ $activeTipe == 'tamu' ? 'active' : '' }}" id="toggle-tamu" onclick="switchMode('tamu')">
|
|
<input type="radio" name="mode_toggle" value="tamu" {{ $activeTipe == 'tamu' ? 'checked' : '' }} class="hidden">
|
|
<div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center" id="radio-tamu">
|
|
@if($activeTipe == 'tamu')
|
|
<div class="w-3 h-3 rounded-full bg-primary-400"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<p class="text-white text-sm font-semibold">Pengunjung</p>
|
|
<p class="text-primary-300/50 text-[10px]">Belum punya NIK / 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="{{ $activeTipe }}">
|
|
|
|
<div id="form-member" class="space-y-5" style="{{ $activeTipe == 'member' ? '' : 'display: none;' }}">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">NIK / No. KTP / No. Anggota</label>
|
|
<input type="text" name="no_anggota" placeholder="Masukkan 16 digit NIK atau Nomor Anggota"
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_anggota') }}" {{ $activeTipe == 'member' ? 'required' : '' }}>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-tamu" class="space-y-5" style="{{ $activeTipe == 'tamu' ? '' : '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') }}" {{ $activeTipe == 'tamu' ? 'required' : '' }}>
|
|
</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') }}" {{ $activeTipe == 'tamu' ? 'required' : '' }}>
|
|
</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="number" name="no_hp" placeholder="08..."
|
|
class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_hp') }}" {{ $activeTipe == 'tamu' ? 'required' : '' }} oninput="if(this.value.length > 13) this.value = this.value.slice(0, 13);">
|
|
</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') }}" {{ $activeTipe == 'tamu' ? 'required' : '' }}>
|
|
</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" {{ $activeTipe == 'tamu' ? 'required' : '' }}>
|
|
<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>
|
|
|
|
|
|
</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');
|
|
const formTitle = document.getElementById('form-title');
|
|
|
|
const reqMember = formMember.querySelectorAll('input, select');
|
|
const reqTamu = formTamu.querySelectorAll('input, select');
|
|
|
|
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';
|
|
if(formTitle) formTitle.innerText = 'Buku Tamu Anggota';
|
|
|
|
reqMember.forEach(el => el.setAttribute('required', 'required'));
|
|
reqTamu.forEach(el => el.removeAttribute('required'));
|
|
} 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';
|
|
if(formTitle) formTitle.innerText = 'Buku Tamu Pengunjung Umum';
|
|
|
|
reqMember.forEach(el => el.removeAttribute('required'));
|
|
reqTamu.forEach(el => el.setAttribute('required', 'required'));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|