6ea6701963
- Updated GeneralSettings page to include localized labels and structured sections for better organization. - Enhanced CarouselSlide, Category, Collection, and Product resources with localized model labels and improved form/table configurations. - Modified HomeController to utilize query builder for better performance and added collection items retrieval. - Updated views to reflect localized settings and improved layout for collections and footer. - Adjusted timezone and locale settings in app configuration for better regional support.
259 lines
16 KiB
PHP
259 lines
16 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>{{ $settings->site_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('/') }}">{{ $settings->site_title ?? '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">{{ $settings->site_title ?? '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">{{ $settings->find_us_label ?? 'Bizi tapyň' }}</h3>
|
|
<div class="flex gap-4">
|
|
<a href="{{ $settings->instagram_url ?? '#' }}" target="_blank" rel="noopener noreferrer" class="text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" aria-label="Instagram">
|
|
<svg style="width: 44px; fill: currentColor;"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z"/></svg>
|
|
</a>
|
|
<a href="{{ $settings->tiktok_url ?? '#' }}" target="_blank" rel="noopener noreferrer" class="text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" aria-label="TikTok">
|
|
<svg style="width: 44px; fill: currentColor;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M544.5 273.9C500.5 274 457.5 260.3 421.7 234.7L421.7 413.4C421.7 446.5 411.6 478.8 392.7 506C373.8 533.2 347.1 554 316.1 565.6C285.1 577.2 251.3 579.1 219.2 570.9C187.1 562.7 158.3 545 136.5 520.1C114.7 495.2 101.2 464.1 97.5 431.2C93.8 398.3 100.4 365.1 116.1 336C131.8 306.9 156.1 283.3 185.7 268.3C215.3 253.3 248.6 247.8 281.4 252.3L281.4 342.2C266.4 337.5 250.3 337.6 235.4 342.6C220.5 347.6 207.5 357.2 198.4 369.9C189.3 382.6 184.4 398 184.5 413.8C184.6 429.6 189.7 444.8 199 457.5C208.3 470.2 221.4 479.6 236.4 484.4C251.4 489.2 267.5 489.2 282.4 484.3C297.3 479.4 310.4 469.9 319.6 457.2C328.8 444.5 333.8 429.1 333.8 413.4L333.8 64L421.8 64C421.7 71.4 422.4 78.9 423.7 86.2C426.8 102.5 433.1 118.1 442.4 131.9C451.7 145.7 463.7 157.5 477.6 166.5C497.5 179.6 520.8 186.6 544.6 186.6L544.6 274z"/></svg>
|
|
</a>
|
|
</div>
|
|
</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 btnPrevs = document.querySelectorAll('.btn-prev-collection');
|
|
const btnNexts = document.querySelectorAll('.btn-next-collection');
|
|
|
|
btnNexts.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetId = btn.getAttribute('data-target');
|
|
const container = document.getElementById(targetId);
|
|
if (container) {
|
|
container.scrollBy({ left: 340, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
btnPrevs.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetId = btn.getAttribute('data-target');
|
|
const container = document.getElementById(targetId);
|
|
if (container) {
|
|
container.scrollBy({ left: -340, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |