193 lines
10 KiB
PHP
193 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ $title ?? 'FiFreshChecker | AI Fish Freshness' }}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
heading: ['Poppins', 'sans-serif']
|
|
},
|
|
colors: {
|
|
primary: '#0A66C2',
|
|
'primary-dark': '#004182',
|
|
accent: '#00C4CC'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="font-sans bg-gray-50 flex flex-col h-screen overflow-hidden selection:bg-primary selection:text-white">
|
|
|
|
<header class="bg-white border-b border-gray-100 z-50 shadow-sm shrink-0 relative">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
|
|
{{-- Logo --}}
|
|
<div class="flex-shrink-0 flex items-center">
|
|
@guest
|
|
<a href="{{ route('home') }}" class="font-heading font-bold text-2xl text-primary flex items-center gap-2 transition hover:opacity-80">
|
|
<i class="bi bi-droplet-half text-accent text-3xl"></i>
|
|
FiFreshChecker
|
|
</a>
|
|
@else
|
|
<span class="font-heading font-bold text-2xl text-primary flex items-center gap-2 select-none cursor-default">
|
|
<i class="bi bi-droplet-half text-accent text-3xl"></i>
|
|
FiFreshChecker
|
|
</span>
|
|
@endguest
|
|
</div>
|
|
|
|
{{-- Desktop Nav --}}
|
|
<nav class="hidden md:flex items-center gap-1">
|
|
@guest
|
|
<a href="{{ route('home') }}"
|
|
class="{{ request()->routeIs('home') ? 'text-primary font-semibold bg-primary/5' : 'text-gray-600 hover:text-primary hover:bg-gray-100' }} px-4 py-2 rounded-lg font-medium transition-colors text-sm">
|
|
Beranda
|
|
</a>
|
|
@endguest
|
|
|
|
<a href="{{ route('klasifikasi') }}"
|
|
class="{{ request()->routeIs('klasifikasi') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-gray-100' }} px-4 py-2 rounded-lg font-medium transition-colors text-sm flex items-center gap-1.5">
|
|
<i class="bi bi-cpu"></i> Klasifikasi AI
|
|
</a>
|
|
|
|
@auth
|
|
<a href="{{ route('history.index') }}"
|
|
class="{{ request()->routeIs('history.*') ? 'text-primary bg-primary/10' : 'text-gray-600 hover:text-primary hover:bg-gray-100' }} px-4 py-2 rounded-lg font-medium transition-colors text-sm flex items-center gap-1.5">
|
|
<i class="bi bi-clock-history"></i> Riwayat
|
|
</a>
|
|
|
|
<div class="w-px h-5 bg-gray-200 mx-1"></div>
|
|
|
|
{{-- Dropdown user --}}
|
|
<div class="relative">
|
|
<button id="user-dropdown-btn"
|
|
class="flex items-center gap-1.5 text-sm text-gray-600 hover:text-primary hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition-colors">
|
|
<i class="bi bi-person-circle text-primary"></i>
|
|
{{ Auth::user()->name }}
|
|
<i id="user-chevron" class="bi bi-chevron-down text-xs transition-transform duration-200"></i>
|
|
</button>
|
|
|
|
<div id="user-dropdown-menu"
|
|
class="hidden absolute right-0 mt-2 w-48 bg-white border border-gray-100 rounded-xl shadow-lg py-1 z-50">
|
|
<div class="px-4 py-2 border-b border-gray-100">
|
|
<p class="text-xs text-gray-400">Masuk sebagai</p>
|
|
<p class="text-sm font-semibold text-gray-700 truncate">{{ Auth::user()->name }}</p>
|
|
</div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit"
|
|
class="w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-red-50 flex items-center gap-2 rounded-lg">
|
|
<i class="bi bi-box-arrow-right"></i> Keluar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="w-px h-5 bg-gray-200 mx-2"></div>
|
|
<a href="{{ route('login') }}"
|
|
class="text-gray-600 hover:text-primary hover:bg-gray-100 px-4 py-2 rounded-lg font-medium transition-colors text-sm flex items-center gap-1.5">
|
|
<i class="bi bi-person"></i> Masuk
|
|
</a>
|
|
<a href="{{ route('register') }}"
|
|
class="bg-primary hover:bg-primary-dark text-white px-5 py-2 rounded-lg font-semibold transition-all text-sm shadow-sm hover:shadow-md flex items-center gap-1.5">
|
|
<i class="bi bi-person-plus"></i> Daftar
|
|
</a>
|
|
@endauth
|
|
</nav>
|
|
|
|
{{-- Hamburger --}}
|
|
<div class="md:hidden flex items-center">
|
|
<button id="mobile-menu-btn" class="text-gray-600 hover:text-primary focus:outline-none p-1">
|
|
<i id="mobile-menu-icon" class="bi bi-list text-3xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Mobile Menu --}}
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 px-4 pt-3 pb-4 space-y-2 shadow-lg absolute w-full z-50">
|
|
|
|
<a href="{{ route('klasifikasi') }}" class="block px-3 py-2 rounded-lg text-sm font-medium {{ request()->routeIs('klasifikasi') ? 'text-primary bg-primary/10' : 'text-gray-700 hover:text-primary hover:bg-gray-50' }} flex items-center gap-2">
|
|
<i class="bi bi-cpu"></i> Klasifikasi AI
|
|
</a>
|
|
|
|
@auth
|
|
<a href="{{ route('history.index') }}" class="block px-3 py-2 rounded-lg text-sm font-medium {{ request()->routeIs('history.*') ? 'text-primary bg-primary/10' : 'text-gray-700 hover:text-primary hover:bg-gray-50' }} flex items-center gap-2">
|
|
<i class="bi bi-clock-history text-primary/60"></i> Riwayat Klasifikasi
|
|
</a>
|
|
<div class="border-t border-gray-100 pt-2 mt-1">
|
|
<div class="px-3 py-1.5 text-xs text-gray-400 flex items-center gap-1.5">
|
|
<i class="bi bi-person-circle text-primary"></i>
|
|
{{ Auth::user()->name }}
|
|
</div>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-red-500 hover:bg-red-50 flex items-center gap-2">
|
|
<i class="bi bi-box-arrow-right"></i> Keluar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@else
|
|
<div class="border-t border-gray-100 pt-2 mt-1 space-y-2">
|
|
<a href="{{ route('login') }}" class="block px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:text-primary hover:bg-gray-50 flex items-center gap-2 border border-gray-200">
|
|
<i class="bi bi-person text-primary/60"></i> Masuk
|
|
</a>
|
|
<a href="{{ route('register') }}" class="block px-3 py-2 rounded-lg text-sm font-semibold text-white bg-primary hover:bg-primary-dark flex items-center justify-center gap-2">
|
|
<i class="bi bi-person-plus"></i> Daftar Sekarang
|
|
</a>
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 overflow-y-auto w-full py-10 px-4 sm:px-6 lg:px-8 flex flex-col items-center">
|
|
{{ $slot }}
|
|
</main>
|
|
|
|
<footer class="bg-white border-t border-gray-100 py-6 shrink-0">
|
|
<div class="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500">
|
|
© 2026 <span class="font-semibold text-gray-700">FiFreshChecker</span>. Inovasi Teknologi untuk Kualitas Pangan.
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const mobileBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileIcon = document.getElementById('mobile-menu-icon');
|
|
|
|
mobileBtn.addEventListener('click', function () {
|
|
mobileMenu.classList.toggle('hidden');
|
|
mobileIcon.classList.toggle('bi-list');
|
|
mobileIcon.classList.toggle('bi-x-lg');
|
|
});
|
|
|
|
const dropdownBtn = document.getElementById('user-dropdown-btn');
|
|
const dropdownMenu = document.getElementById('user-dropdown-menu');
|
|
const chevron = document.getElementById('user-chevron');
|
|
|
|
if (dropdownBtn) {
|
|
dropdownBtn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
dropdownMenu.classList.toggle('hidden');
|
|
chevron.classList.toggle('rotate-180');
|
|
});
|
|
|
|
document.addEventListener('click', function () {
|
|
dropdownMenu.classList.add('hidden');
|
|
chevron.classList.remove('rotate-180');
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |