Update Koneko integration
This commit is contained in:
@ -1,17 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ session()->get('locale') ?? app()->getLocale() }}"
|
||||
<html lang="{{ $_seo['locale'] ?? app()->getLocale() }}"
|
||||
data-base-url="{{ url('/') . '/' }}"
|
||||
data-template="{{ $_layout['template'] }}"
|
||||
prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
@include('vuexy-website-admin::layouts.base.header')
|
||||
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.maximus.partials.styles')
|
||||
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="font-sans text-gray-800 bg-gradient-to-b from-sky-50 to-white">
|
||||
@yield('header')
|
||||
@yield('content')
|
||||
@yield('footer')
|
||||
|
||||
<!-- Back to top button -->
|
||||
<div x-data="{ showButton: false }" @scroll.window="showButton = window.pageYOffset > 500">
|
||||
<button
|
||||
@click="window.scrollTo({ top: 0, behavior: 'smooth' })"
|
||||
x-show="showButton"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 transform translate-y-10"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform translate-y-10"
|
||||
class="fixed bottom-8 right-8 bg-yellow-500 text-gray-900 w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-yellow-400 transition focus:outline-none"
|
||||
>
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@include('vuexy-website-layout-simple-koneko::layouts.maximus.partials.scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
<!-- Vendor -->
|
||||
@yield('vendor-script')
|
||||
|
||||
<!-- Page Script -->
|
||||
@stack('page-script')
|
||||
|
||||
<!-- Back to top button -->
|
||||
<script>
|
||||
// Add intersection observer polyfill for older browsers
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// Custom directive for scroll animations
|
||||
Alpine.directive('intersect', (el, { value, expression, modifiers }) => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
value(entry.target);
|
||||
if (modifiers.includes('once')) {
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
root: null,
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px'
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
|
||||
return () => {
|
||||
observer.unobserve(el);
|
||||
};
|
||||
});
|
||||
|
||||
// Gallery component
|
||||
Alpine.data('gallery', () => ({
|
||||
photos: [
|
||||
'https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1497217968520-7d8d34bfa9c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1602353225887-4486f295dde7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1565538810643-b5bdb714032a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80'
|
||||
],
|
||||
current: 0,
|
||||
next() {
|
||||
this.current = (this.current + 1) % this.photos.length;
|
||||
},
|
||||
prev() {
|
||||
this.current = (this.current - 1 + this.photos.length) % this.photos.length;
|
||||
}
|
||||
}));
|
||||
|
||||
// Contact form
|
||||
Alpine.data('contactForm', () => ({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
submitted: false,
|
||||
loading: false,
|
||||
errors: {},
|
||||
|
||||
validate() {
|
||||
this.errors = {};
|
||||
|
||||
if (!this.name.trim()) {
|
||||
this.errors.name = 'Name is required';
|
||||
}
|
||||
|
||||
if (!this.email.trim()) {
|
||||
this.errors.email = 'Email is required';
|
||||
} else if (!/^\S+@\S+\.\S+$/.test(this.email)) {
|
||||
this.errors.email = 'Please enter a valid email';
|
||||
}
|
||||
|
||||
if (!this.message.trim()) {
|
||||
this.errors.message = 'Message is required';
|
||||
}
|
||||
|
||||
return Object.keys(this.errors).length === 0;
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (this.validate()) {
|
||||
this.loading = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.submitted = true;
|
||||
this.resetForm();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.name = '';
|
||||
this.email = '';
|
||||
this.phone = '';
|
||||
this.message = '';
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@vite([
|
||||
'vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/templates/maximus/css/app.css'
|
||||
])
|
||||
<!-- Vendor Styles -->
|
||||
@yield('vendor-style')
|
||||
|
||||
<!-- Page Styles -->
|
||||
@stack('page-style')
|
||||
|
||||
@vite('vendor/koneko/laravel-vuexy-website-layout-simple-koneko/resources/assets/css/maximus/app.css')
|
||||
|
||||
Reference in New Issue
Block a user