378 lines
19 KiB
PHP
378 lines
19 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>@yield('title', 'Sarakata — Perpustakaan Digital')</title>
|
|
<meta name="description" content="Sarakata - Sistem Informasi Perpustakaan Digital untuk Generasi Modern">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
|
|
rel="stylesheet">
|
|
<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'
|
|
},
|
|
accent: {
|
|
50: '#ecfdf5',
|
|
100: '#d1fae5',
|
|
200: '#a7f3d0',
|
|
300: '#6ee7b7',
|
|
400: '#34d399',
|
|
500: '#10b981',
|
|
600: '#059669'
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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-nav {
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
background: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 30%, #f5f3ff 60%, #ede9fe 100%);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.15);
|
|
}
|
|
|
|
.float-animation {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
animation: fadeUp 0.8s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.blob {
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
|
}
|
|
</style>
|
|
@stack('styles')
|
|
</head>
|
|
|
|
<body class="bg-white text-gray-800 font-sans antialiased overflow-x-hidden w-full">
|
|
|
|
{{-- NAVBAR --}}
|
|
<nav class="glass-nav fixed w-full top-0 z-50 border-b border-gray-100/50">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center relative">
|
|
<a href="{{ route('home') }}" class="flex items-center gap-3 group">
|
|
<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 group-hover:shadow-primary-300 transition-shadow">
|
|
<i class="fas fa-book-open text-white text-sm"></i>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-extrabold text-xl tracking-tight text-gray-900 leading-none">Sara<span
|
|
class="gradient-text">kata</span></span>
|
|
<span
|
|
class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-1 hidden sm:inline-block">Perpustakaan
|
|
Daerah Jember</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Hamburger Button for Mobile -->
|
|
<button id="mobile-menu-btn"
|
|
class="md:hidden text-gray-600 hover:text-primary-600 focus:outline-none p-2 rounded-lg bg-gray-50">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
|
<a href="{{ route('home') }}"
|
|
class="relative transition-colors {{ request()->routeIs('home') ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 {{ request()->routeIs('home') ? 'after:w-full' : 'after:w-0 hover:after:w-full' }} after:h-0.5 after:bg-primary-500 after:transition-all">Beranda</a>
|
|
<a href="{{ route('katalog.index') }}"
|
|
class="relative transition-colors {{ request()->routeIs('katalog.*') ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 {{ request()->routeIs('katalog.*') ? 'after:w-full' : 'after:w-0 hover:after:w-full' }} after:h-0.5 after:bg-primary-500 after:transition-all">Katalog
|
|
Buku</a>
|
|
<a href="{{ route('home') }}#fitur"
|
|
class="relative transition-colors text-gray-600 hover:text-primary-600 after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-primary-500 after:transition-all hover:after:w-full">Fitur</a>
|
|
<a href="{{ route('home') }}#rekomendasi"
|
|
class="relative transition-colors text-gray-600 hover:text-primary-600 after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-primary-500 after:transition-all hover:after:w-full">Koleksi</a>
|
|
|
|
@guest
|
|
<button onclick="openGuestModal()"
|
|
class="px-5 py-2.5 bg-primary-50 text-primary-600 rounded-xl font-semibold hover:bg-primary-100 transition-colors cursor-pointer flex items-center justify-center">
|
|
<i class="fas fa-book-reader mr-1.5"></i> Buku Tamu
|
|
</button>
|
|
<a href="{{ route('login') }}"
|
|
class="px-5 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-semibold shadow-lg shadow-primary-200 hover:shadow-primary-300 hover:from-primary-700 hover:to-primary-800 transition-all">
|
|
<i class="fas fa-sign-in-alt mr-1.5"></i> Login
|
|
</a>
|
|
@endguest
|
|
|
|
@auth
|
|
@if (auth()->user()->role === 'admin')
|
|
<a href="{{ route('admin.dashboard') }}"
|
|
class="px-5 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-semibold shadow-lg shadow-primary-200 hover:shadow-primary-300 transition-all">
|
|
<i class="fas fa-tachometer-alt mr-1.5"></i> Dashboard Admin
|
|
</a>
|
|
@else
|
|
<a href="{{ route('user.dashboard') }}"
|
|
class="px-5 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl font-semibold shadow-lg shadow-green-200 hover:shadow-green-300 transition-all">
|
|
<i class="fas fa-user mr-1.5"></i> Dashboard Anggota
|
|
</a>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu"
|
|
class="hidden md:hidden bg-white/95 backdrop-blur-xl border-t border-gray-100 shadow-xl absolute w-full left-0 top-full flex-col gap-4 px-6 py-6 transition-all">
|
|
<a href="{{ route('home') }}"
|
|
class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Beranda</a>
|
|
<a href="{{ route('katalog.index') }}"
|
|
class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Katalog
|
|
Buku</a>
|
|
<a href="{{ route('home') }}#fitur"
|
|
class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Fitur</a>
|
|
<a href="{{ route('home') }}#rekomendasi"
|
|
class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Koleksi</a>
|
|
|
|
<div class="flex flex-col gap-3 mt-4">
|
|
@guest
|
|
<button onclick="openGuestModal()"
|
|
class="w-full px-5 py-3 bg-primary-50 text-primary-600 rounded-xl font-bold hover:bg-primary-100 transition-colors text-center flex items-center justify-center">
|
|
<i class="fas fa-book-reader mr-1.5"></i> Buku Tamu
|
|
</button>
|
|
<a href="{{ route('login') }}"
|
|
class="w-full px-5 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-bold shadow-lg shadow-primary-200 text-center">
|
|
<i class="fas fa-sign-in-alt mr-1.5"></i> Login
|
|
</a>
|
|
@endguest
|
|
|
|
@auth
|
|
@if (auth()->user()->role === 'admin')
|
|
<a href="{{ route('admin.dashboard') }}"
|
|
class="w-full px-5 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-bold shadow-lg text-center">
|
|
<i class="fas fa-tachometer-alt mr-1.5"></i> Dashboard Admin
|
|
</a>
|
|
@else
|
|
<a href="{{ route('user.dashboard') }}"
|
|
class="w-full px-5 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl font-bold shadow-lg text-center">
|
|
<i class="fas fa-user mr-1.5"></i> Dashboard Anggota
|
|
</a>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{{-- CONTENT --}}
|
|
<main class="pt-[72px]">
|
|
@yield('content')
|
|
</main>
|
|
|
|
{{-- FOOTER --}}
|
|
<footer class="bg-gray-900 text-gray-400 mt-0">
|
|
<div class="max-w-7xl mx-auto px-6 py-16">
|
|
<div class="grid md:grid-cols-4 gap-12">
|
|
{{-- Brand --}}
|
|
<div class="md:col-span-2">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center">
|
|
<i class="fas fa-book-open text-white text-sm"></i>
|
|
</div>
|
|
<span class="font-extrabold text-xl text-white">Sarakata</span>
|
|
</div>
|
|
<p class="text-sm leading-relaxed max-w-sm">
|
|
Sistem Informasi Perpustakaan Digital yang dirancang untuk memudahkan akses, pengelolaan, dan
|
|
peminjaman buku secara modern.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Quick Links --}}
|
|
<div>
|
|
<h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Menu</h4>
|
|
<ul class="space-y-3 text-sm">
|
|
<li><a href="{{ route('home') }}" class="hover:text-white transition-colors">Beranda</a></li>
|
|
<li><a href="{{ route('katalog.index') }}" class="hover:text-white transition-colors">Katalog
|
|
Buku</a></li>
|
|
<li><a href="{{ route('home') }}#fitur" class="hover:text-white transition-colors">Fitur</a>
|
|
</li>
|
|
<li><a href="{{ route('home') }}#rekomendasi" class="hover:text-white transition-colors">Koleksi
|
|
Buku</a></li>
|
|
<li><a href="{{ route('buku_tamu.index') }}" class="hover:text-white transition-colors">Buku
|
|
Tamu</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{{-- Contact --}}
|
|
<div>
|
|
<h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Kontak</h4>
|
|
<ul class="space-y-3 text-sm">
|
|
<li class="flex items-center gap-2"><i class="fas fa-map-marker-alt w-4 text-primary-400"></i>
|
|
Jl. Perpustakaan No. 1</li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-envelope w-4 text-primary-400"></i>
|
|
info@sarakata.id</li>
|
|
<li class="flex items-center gap-2"><i class="fas fa-phone w-4 text-primary-400"></i> (021)
|
|
1234-5678</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p class="text-xs">© {{ date('Y') }} Sarakata Library System. All rights reserved.</p>
|
|
<div class="flex gap-4">
|
|
<a href="#"
|
|
class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
|
|
class="fab fa-instagram text-sm"></i></a>
|
|
<a href="#"
|
|
class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
|
|
class="fab fa-facebook text-sm"></i></a>
|
|
<a href="#"
|
|
class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
|
|
class="fab fa-twitter text-sm"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Global Guest Modal -->
|
|
<div id="guestModal"
|
|
class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm hidden z-[100] flex items-center justify-center p-4 transition-opacity duration-300">
|
|
<div class="bg-white rounded-[2rem] shadow-2xl max-w-md w-full overflow-hidden transform transition-all">
|
|
<div class="p-8 text-center relative">
|
|
<!-- Close Button -->
|
|
<button onclick="closeGuestModal()"
|
|
class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
|
|
<!-- Icon Box -->
|
|
<div
|
|
class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 text-white rounded-2xl flex items-center justify-center mx-auto mb-5 text-2xl shadow-lg shadow-primary-200">
|
|
<i class="fas fa-user-check"></i>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-black text-gray-900 tracking-tight">Selamat Datang!</h3>
|
|
<p class="text-gray-500 text-sm mt-2 leading-relaxed">Apakah Anda sudah terdaftar sebagai anggota
|
|
Sarakata?</p>
|
|
|
|
<div class="grid grid-cols-1 gap-3 mt-8">
|
|
<!-- Member Option -->
|
|
<a href="{{ route('buku_tamu.index') }}"
|
|
class="flex items-center gap-4 p-4 border-2 border-primary-100 rounded-2xl hover:border-primary-300 hover:bg-primary-50/50 transition-all group cursor-pointer shadow-sm hover:shadow-md">
|
|
<div
|
|
class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-primary-600 group-hover:bg-gradient-to-br group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white transition-all shadow-sm group-hover:shadow-primary-300">
|
|
<i class="fas fa-id-card"></i>
|
|
</div>
|
|
<div class="text-left flex-1 border-gray-100">
|
|
<div class="font-bold text-gray-900 text-sm">Saya Anggota</div>
|
|
<div class="text-xs text-gray-400">Punya No. Anggota</div>
|
|
</div>
|
|
<i
|
|
class="fas fa-chevron-right text-primary-300 group-hover:text-primary-500 transition-colors"></i>
|
|
</a>
|
|
|
|
<!-- Visitor Option -->
|
|
<a href="{{ route('buku_tamu.index', ['tipe' => 'tamu']) }}"
|
|
class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-2xl hover:border-gray-300 hover:bg-gray-50 transition-all group cursor-pointer shadow-sm hover:shadow-md">
|
|
<div
|
|
class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 group-hover:bg-gray-800 group-hover:text-white transition-all shadow-sm">
|
|
<i class="fas fa-user-friends"></i>
|
|
</div>
|
|
<div class="text-left flex-1 border-gray-100">
|
|
<div class="font-bold text-gray-900 text-sm">Pengunjung Umum</div>
|
|
<div class="text-xs text-gray-400">Belum punya member</div>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-gray-300 group-hover:text-gray-600 transition-colors"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@stack('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const btn = document.getElementById('mobile-menu-btn');
|
|
const menu = document.getElementById('mobile-menu');
|
|
const icon = btn.querySelector('i');
|
|
|
|
btn.addEventListener('click', () => {
|
|
menu.classList.toggle('hidden');
|
|
menu.classList.toggle('flex');
|
|
|
|
// Toggle icon
|
|
if (menu.classList.contains('flex')) {
|
|
icon.classList.remove('fa-bars');
|
|
icon.classList.add('fa-times');
|
|
} else {
|
|
icon.classList.remove('fa-times');
|
|
icon.classList.add('fa-bars');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Global Modal Scripts
|
|
function openGuestModal() {
|
|
document.getElementById('guestModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
function closeGuestModal() {
|
|
document.getElementById('guestModal').classList.add('hidden');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |