191 lines
8.1 KiB
Plaintext
191 lines
8.1 KiB
Plaintext
---
|
|
import '../styles/global.css';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string;
|
|
image?: string;
|
|
canonicalURL?: string;
|
|
}
|
|
|
|
const { title, description = '', image = '/images/logo.png', canonicalURL = Astro.url } = Astro.props;
|
|
|
|
const siteName = 'Website Name';
|
|
const siteUrl = 'https://example.com';
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<title>{title} | {siteName}</title>
|
|
<meta name="title" content={`${title} | ${siteName}`} />
|
|
<meta name="description" content={description} />
|
|
<link rel="canonical" href={canonicalURL} />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content={canonicalURL} />
|
|
<meta property="og:title" content={`${title} | ${siteName}`} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={new URL(image, siteUrl)} />
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content={canonicalURL} />
|
|
<meta property="twitter:title" content={`${title} | ${siteName}`} />
|
|
<meta property="twitter:description" content={description} />
|
|
<meta property="twitter:image" content={new URL(image, siteUrl)} />
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="/favicon.ico" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
|
|
<!-- Preconnect -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
</head>
|
|
|
|
<body id="body" class="flex flex-col min-h-screen">
|
|
<div id="page-wrapper">
|
|
<header id="header">
|
|
<slot name="header" />
|
|
</header>
|
|
|
|
<main id="main-content" class="flex-grow">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer id="footer">
|
|
<slot name="footer" />
|
|
</footer>
|
|
|
|
<!-- Cookie Consent Banner -->
|
|
<div id="cookie-consent-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-secondary-900 text-white p-6 shadow-2xl transform translate-y-full transition-transform duration-500">
|
|
<div id="cookie-consent-container" class="container-custom max-w-6xl">
|
|
<div id="cookie-consent-content" class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div id="cookie-consent-text" class="flex-1">
|
|
<h3 id="cookie-consent-title" class="text-xl font-bold mb-2">เราใช้คุกกี้เพื่อประสบการณ์ที่ดีที่สุด</h3>
|
|
<p id="cookie-consent-description" class="text-secondary-300 text-base">
|
|
เว็บไซต์ของเราใช้คุกกี้เพื่อเพิ่มประสิทธิภาพการใช้งาน คุณสามารถยอมรับหรือปฏิเสธได้
|
|
</p>
|
|
</div>
|
|
<div id="cookie-consent-buttons" class="flex flex-wrap gap-4">
|
|
<button id="cookie-reject-btn" class="btn-secondary px-6 py-3 text-sm">
|
|
ปฏิเสธทั้งหมด
|
|
</button>
|
|
<button id="cookie-accept-btn" class="btn-primary px-6 py-3 text-sm">
|
|
ยอมรับทั้งหมด
|
|
</button>
|
|
<button id="cookie-settings-btn" class="btn-outline px-6 py-3 text-sm">
|
|
ตั้งค่า
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cookie Preferences Modal -->
|
|
<div id="cookie-preferences-modal" class="fixed inset-0 z-50 hidden bg-black/50">
|
|
<div id="cookie-modal-content" class="flex items-center justify-center min-h-screen p-4">
|
|
<div id="cookie-modal-box" class="bg-white rounded-2xl shadow-2xl max-w-lg w-full p-6">
|
|
<div id="cookie-modal-header" class="flex justify-between items-center mb-4">
|
|
<h2 id="cookie-modal-title" class="text-xl font-bold">ตั้งค่าคุกกี้</h2>
|
|
<button id="cookie-modal-close" class="text-gray-500 hover:text-gray-700">
|
|
<span id="cookie-close-icon">✕</span>
|
|
</button>
|
|
</div>
|
|
<div id="cookie-modal-body">
|
|
<div id="cookie-necessary" class="mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-medium">คุกกี้ที่จำเป็น</h3>
|
|
<p class="text-sm text-gray-600">จำเป็นสำหรับการทำงานของเว็บไซต์</p>
|
|
</div>
|
|
<input type="checkbox" checked disabled class="w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
<div id="cookie-analytics" class="mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-medium">คุกกี้วิเคราะห์</h3>
|
|
<p class="text-sm text-gray-600">ช่วยให้เราเข้าใจผู้ใช้งาน</p>
|
|
</div>
|
|
<input type="checkbox" id="cookie-analytics-checkbox" class="w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
<div id="cookie-marketing" class="mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-medium">คุกกี้การตลาด</h3>
|
|
<p class="text-sm text-gray-600">ใช้สำหรับโฆษณา</p>
|
|
</div>
|
|
<input type="checkbox" id="cookie-marketing-checkbox" class="w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cookie-modal-footer" class="flex justify-end gap-4 mt-6">
|
|
<button id="cookie-save-btn" class="btn-primary px-6 py-3">บันทึก</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Cookie Consent Logic
|
|
const banner = document.getElementById('cookie-consent-banner');
|
|
const acceptBtn = document.getElementById('cookie-accept-btn');
|
|
const rejectBtn = document.getElementById('cookie-reject-btn');
|
|
const settingsBtn = document.getElementById('cookie-settings-btn');
|
|
const modal = document.getElementById('cookie-preferences-modal');
|
|
const closeModal = document.getElementById('cookie-modal-close');
|
|
const saveBtn = document.getElementById('cookie-save-btn');
|
|
|
|
function showBanner() {
|
|
banner?.classList.remove('translate-y-full');
|
|
}
|
|
|
|
function hideBanner() {
|
|
banner?.classList.add('translate-y-full');
|
|
}
|
|
|
|
acceptBtn?.addEventListener('click', () => {
|
|
localStorage.setItem('cookie-consent', 'accepted');
|
|
hideBanner();
|
|
});
|
|
|
|
rejectBtn?.addEventListener('click', () => {
|
|
localStorage.setItem('cookie-consent', 'rejected');
|
|
hideBanner();
|
|
});
|
|
|
|
settingsBtn?.addEventListener('click', () => {
|
|
modal?.classList.remove('hidden');
|
|
});
|
|
|
|
closeModal?.addEventListener('click', () => {
|
|
modal?.classList.add('hidden');
|
|
});
|
|
|
|
saveBtn?.addEventListener('click', () => {
|
|
const analytics = (document.getElementById('cookie-analytics-checkbox') as HTMLInputElement)?.checked;
|
|
const marketing = (document.getElementById('cookie-marketing-checkbox') as HTMLInputElement)?.checked;
|
|
localStorage.setItem('cookie-consent', JSON.stringify({ analytics, marketing }));
|
|
modal?.classList.add('hidden');
|
|
hideBanner();
|
|
});
|
|
|
|
// Check consent on load
|
|
const consent = localStorage.getItem('cookie-consent');
|
|
if (!consent) {
|
|
showBanner();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|