TKK_E32222868/resources/views/components/layouts/front.blade.php

109 lines
3.2 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>DFOOD</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
font-family: "Montserrat", sans-serif;
overflow: hidden;
height: 100dvh;
}
.sidebar-scroll {
overflow-y: auto;
height: 100dvh;
padding-bottom: 6em;
}
.sidebar-scroll::-webkit-scrollbar {
display: none;
}
.main-content-scroll {
overflow-y: auto;
height: 100dvh;
}
[x-cloak] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
</style>
<!-- Midtrans -->
<script src="https://app.sandbox.midtrans.com/snap/snap.js"
data-client-key="{{ config('services.midtrans.client_key') }}"></script>
@livewireStyles
</head>
<body class="min-h-screen flex bg-gray-100">
<!-- Sidebar -->
<aside class="w-64 bg-white text-black min-h-screen px-4 py-6">
<div class="text-5xl text-center font-bold mb-6">DFOOD</div>
<div class="space-y-4 sidebar-scroll">
<a href="#food" class="block">
<div class="shadow rounded overflow-hidden">
<img src="img/makanan.jpg" class="w-full h-auto">
<div class="text-center py-2 border-t">Makanan</div>
</div>
</a>
<a href="#drink" class="block">
<div class="shadow rounded overflow-hidden">
<img src="img/minuman.jpg" class="w-full h-auto">
<div class="text-center py-2 border-t">Minuman</div>
</div>
</a>
</div>
</aside>
<!-- Main Content -->
{{ $slot }}
@livewireScripts
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
document.addEventListener('livewire:load', function() {
Livewire.on('notify', message => {
console.log('Notification:', message);
});
Livewire.hook('message.processed', (message, component) => {
if (component.fingerprint.name === 'food-order') {
console.log('Component updated:', component.serverMemo.data.cart);
}
});
});
setInterval(() => {
fetch('/refresh-csrf')
.then(response => response.json())
.then(data => {
document.querySelector('meta[name="csrf-token"]').setAttribute('content', data.csrf_token);
window.Livewire.findComponents().forEach(component => {
component.canonical = component.canonical || {};
component.canonical.csrf = data.csrf_token;
});
});
}, 1800000);
</script>
</body>
</html>