b13d61b342
- Added Filament and Tailwind CSS dependencies in composer.json. - Updated AGENTS.md to include new package versions. - Modified boost.json to include tailwindcss-development skill. - Updated DatabaseSeeder to create an admin user with a password. - Changed the root route to use HomeController instead of a closure. - Adjusted permissions for .gitignore in storage directory.
244 lines
12 KiB
PHP
244 lines
12 KiB
PHP
@props(['settings'])
|
|
<!DOCTYPE html>
|
|
<html class="scroll-smooth" lang="tk">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Hoşal Patisserie - Hünärmençe döredilen</title>
|
|
<script src="{{ asset('assets/js/tailwind.min.js') }}"></script>
|
|
<link href="{{ asset('assets/css/fonts.css') }}" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"outline": "#81756e",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface-variant": "#4f453f",
|
|
"on-background": "#1e1b1a",
|
|
"tertiary": "#010700",
|
|
"secondary-fixed": "#ffdad2",
|
|
"primary-fixed-dim": "#dfc0af",
|
|
"on-secondary-container": "#7a463a",
|
|
"inverse-on-surface": "#f6efed",
|
|
"primary-fixed": "#fddcca",
|
|
"tertiary-fixed-dim": "#b9ccab",
|
|
"surface-variant": "#e8e1de",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-bright": "#fff8f5",
|
|
"on-primary-container": "#9b8071",
|
|
"on-error-container": "#93000a",
|
|
"on-secondary": "#ffffff",
|
|
"surface-tint": "#71594b",
|
|
"surface-container-low": "#f9f2ef",
|
|
"tertiary-fixed": "#d5e9c6",
|
|
"surface-dim": "#dfd9d6",
|
|
"primary-container": "#2b1a0f",
|
|
"inverse-primary": "#dfc0af",
|
|
"secondary-container": "#ffb8a8",
|
|
"surface": "#fff8f5",
|
|
"on-error": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-container": "#798b6d",
|
|
"surface-container-highest": "#e8e1de",
|
|
"tertiary-container": "#13220c",
|
|
"on-primary-fixed-variant": "#584235",
|
|
"on-secondary-fixed-variant": "#6a392e",
|
|
"surface-container-high": "#eee7e4",
|
|
"on-tertiary-fixed-variant": "#3b4b32",
|
|
"background": "#fff8f5",
|
|
"surface-container": "#f4ecea",
|
|
"on-tertiary-fixed": "#111f0a",
|
|
"outline-variant": "#d3c4bc",
|
|
"secondary": "#865043",
|
|
"on-primary-fixed": "#28180d",
|
|
"secondary-fixed-dim": "#fcb6a5",
|
|
"on-secondary-fixed": "#350f07",
|
|
"primary": "#0c0300",
|
|
"on-surface": "#1e1b1a",
|
|
"inverse-surface": "#33302e",
|
|
"error-container": "#ffdad6",
|
|
"antique-gold": "#C8A96E",
|
|
"ink-brown": "#2B1A0F"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin-mobile": "20px",
|
|
"gutter": "24px",
|
|
"container-max": "1280px",
|
|
"unit": "8px",
|
|
"margin-desktop": "64px"
|
|
},
|
|
"fontFamily": {
|
|
"subheading-caps": ["Playfair Display"],
|
|
"label-sm": ["Libre Franklin"],
|
|
"body-md": ["Merriweather"],
|
|
"display-lg": ["Playfair Display"],
|
|
"headline-md": ["Playfair Display"],
|
|
"display-lg-mobile": ["Playfair Display"],
|
|
"body-lg": ["Merriweather"]
|
|
},
|
|
"fontSize": {
|
|
"subheading-caps": ["14px", { "lineHeight": "1.5", "letterSpacing": "0.15em", "fontWeight": "600" }],
|
|
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "500" }],
|
|
"body-md": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
|
"display-lg": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
|
"headline-md": ["32px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
|
"display-lg-mobile": ["40px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"body-lg": ["18px", { "lineHeight": "1.8", "fontWeight": "400" }]
|
|
},
|
|
"animation": {
|
|
"marquee": "marquee 30s linear infinite",
|
|
"fade-in-up": "fadeInUp 0.8s ease-out forwards"
|
|
},
|
|
"keyframes": {
|
|
marquee: {
|
|
"0%": { transform: "translateX(0%)" },
|
|
"100%": { transform: "translateX(-50%)" }
|
|
},
|
|
fadeInUp: {
|
|
"0%": { opacity: "0", transform: "translateY(20px)" },
|
|
"100%": { opacity: "1", transform: "translateY(0)" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.paper-texture {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.05;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
}
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.animate-on-scroll {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
.animate-on-scroll.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.carousel-slide {
|
|
transition: opacity 1s ease-in-out;
|
|
opacity: 0;
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.carousel-slide.active {
|
|
opacity: 1;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background antialiased relative selection:bg-antique-gold selection:text-white">
|
|
<div class="paper-texture"></div>
|
|
<nav class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-outline/20 transition-all duration-300 ease-in-out">
|
|
<div class="flex justify-between items-center px-margin-mobile md:px-margin-desktop py-4 w-full z-50 max-w-[1280px] mx-auto">
|
|
<a class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-primary italic" href="{{ url('/') }}">Hoşal Patisserie</a>
|
|
<div class="hidden md:flex gap-8">
|
|
<a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#about">Biz barada</a>
|
|
<a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#menu">Menýu</a>
|
|
</div>
|
|
<button aria-label="Menýu" class="md:hidden text-primary">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
{{ $slot }}
|
|
</main>
|
|
|
|
<footer class="w-full mt-auto bg-primary-container dark:bg-tertiary-container border-t border-secondary-container/30">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-margin-desktop py-16 w-full max-w-[1280px] mx-auto">
|
|
<div class="col-span-1 mb-8 md:mb-0 flex flex-col justify-between">
|
|
<h2 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-[40px] text-surface-container-lowest italic mb-4">Hoşal Patisserie</h2>
|
|
<p class="font-body-md text-body-md text-surface-variant/80 mt-auto">{{ $settings->footer_copyright ?? '© 2026 Hoşal Patisserie. Hünärmençe döredilen.' }}</p>
|
|
</div>
|
|
<div class="col-span-1 md:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-8">
|
|
<div>
|
|
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Gözlemek</h3>
|
|
<ul class="space-y-4">
|
|
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#about">Biz barada</a></li>
|
|
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#menu">Menýu</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Goldaw</h3>
|
|
<ul class="space-y-4">
|
|
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Eltip bermek</a></li>
|
|
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Gizlinlik syýasaty</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-2 md:col-span-1 mt-8 md:mt-0">
|
|
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Bize geliň</h3>
|
|
<address class="font-body-md text-body-md text-surface-variant/80 not-italic space-y-2">
|
|
{!! nl2br(e($settings->footer_address ?? "Magtymguly şaýoly\nAşgabat, Türkmenistan")) !!}
|
|
<p class="mt-4"><a class="hover:text-surface-container-lowest transition-colors duration-200" href="tel:{{ preg_replace('/[^0-9+]/', '', $settings->footer_phone ?? '+993 61 92 92 48') }}">{{ $settings->footer_phone ?? '+993 61 92 92 48' }}</a></p>
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
animatedElements.forEach(el => observer.observe(el));
|
|
|
|
const slides = document.querySelectorAll('.carousel-slide');
|
|
if (slides.length > 0) {
|
|
let currentSlide = 0;
|
|
setInterval(() => {
|
|
slides[currentSlide].classList.remove('active');
|
|
currentSlide = (currentSlide + 1) % slides.length;
|
|
slides[currentSlide].classList.add('active');
|
|
}, 5000);
|
|
}
|
|
|
|
const collectionsContainer = document.getElementById('collections-container');
|
|
const btnPrev = document.getElementById('btn-prev-collection');
|
|
const btnNext = document.getElementById('btn-next-collection');
|
|
if(btnNext && btnPrev && collectionsContainer) {
|
|
btnNext.addEventListener('click', () => {
|
|
collectionsContainer.scrollBy({ left: 340, behavior: 'smooth' });
|
|
});
|
|
btnPrev.addEventListener('click', () => {
|
|
collectionsContainer.scrollBy({ left: -340, behavior: 'smooth' });
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |