245 lines
12 KiB
PHP
245 lines
12 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">
|
|
<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">
|
|
|
|
{{-- 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">
|
|
<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>
|
|
|
|
<div class="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 {{ request()->routeIs('home') && request()->getQueryString() == '' ? 'text-primary-600 font-semibold' : '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 {{ request()->routeIs('home') && request()->getQueryString() == '' ? 'text-primary-600 font-semibold' : '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">
|
|
<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>
|
|
</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>
|
|
|
|
@stack('scripts')
|
|
</body>
|
|
|
|
</html>
|