95 lines
4.6 KiB
PHP
95 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth overflow-y-scroll">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title', 'Rice Leaf AI')</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Poppins', 'sans-serif'] },
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
@stack('styles')
|
|
</head>
|
|
|
|
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col pt-[80px]">
|
|
|
|
<nav class="fixed top-0 left-0 right-0 w-full z-50 transition-all duration-300" x-data="{ open: false }">
|
|
<div class="max-w-6xl mx-auto px-4 py-3">
|
|
<div class="bg-white/70 backdrop-blur-xl border border-white/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] rounded-2xl px-6 h-[64px] flex items-center justify-between">
|
|
|
|
<a href="/" class="flex items-center gap-2">
|
|
<span class="text-lg font-extrabold text-gray-800">RiceLeaf<span class="text-green-600">AI</span></span>
|
|
</a>
|
|
|
|
<button @click="open = !open" class="md:hidden text-gray-600 focus:outline-none">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
|
|
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hidden md:flex items-center gap-1">
|
|
@php $menus = [['name' => 'Home', 'url' => '/'], ['name' => 'Dashboard', 'url' => '/dashboard'], ['name' => 'Riwayat', 'url' => '/riwayat'], ['name' => 'Informasi Penyakit', 'url' => '/penyakit']]; @endphp
|
|
@foreach($menus as $menu)
|
|
@if($menu['name'] === 'Home' || Auth::check())
|
|
<a href="{{ $menu['url'] }}" class="px-4 py-2 text-sm font-semibold rounded-xl transition-all {{ Request::is(ltrim($menu['url'], '/')) || (Request::is('/') && $menu['url'] == '/') ? 'bg-green-600 text-white' : 'text-gray-600 hover:bg-green-50' }}">
|
|
{{ $menu['name'] }}
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="hidden md:flex">
|
|
@auth
|
|
<form action="/logout" method="POST">@csrf <button type="submit" class="text-sm font-bold text-red-500">Logout</button></form>
|
|
@else
|
|
<a href="/login" class="bg-gray-900 text-white px-5 py-2 rounded-xl text-sm font-bold">Login</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 -translate-y-4"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
class="md:hidden mt-2 mx-4 bg-white/90 backdrop-blur-xl border border-gray-100 rounded-2xl p-4 shadow-xl">
|
|
<div class="flex flex-col gap-2">
|
|
@foreach($menus as $menu)
|
|
@if($menu['name'] === 'Home' || Auth::check())
|
|
<a href="{{ $menu['url'] }}" class="px-4 py-3 rounded-xl font-semibold {{ Request::is(ltrim($menu['url'], '/')) ? 'bg-green-600 text-white' : 'text-gray-600' }}">
|
|
{{ $menu['name'] }}
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
@auth
|
|
<form action="/logout" method="POST">@csrf <button type="submit" class="w-full text-left px-4 py-3 font-semibold text-red-600">Logout</button></form>
|
|
@else
|
|
<a href="/login" class="px-4 py-3 font-semibold text-gray-800">Login</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-grow w-full relative">
|
|
@yield('content')
|
|
</main>
|
|
|
|
<footer class="py-10 text-center text-gray-400 text-sm">
|
|
Sistem Klasifikasi Penyakit Daun Padi © 2026
|
|
</footer>
|
|
|
|
@stack('scripts')
|
|
</body>
|
|
</html> |