Initial commit - Deal Plus Tech Astro Website
✅ 53 pages (34 products + corporate) ✅ All logo images ✅ Nginx Dockerfile (production-ready) ✅ PDPA compliant (cookie consent) ✅ Modern design with Kanit font ✅ Line + Phone buttons on products Built: 2026-03-13
This commit is contained in:
225
src/layouts/BaseLayout.astro
Normal file
225
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,225 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
canonicalURL?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'ผู้เชี่ยวชาญระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก', image = '/images/logo/logox2.png', canonicalURL = Astro.url } = Astro.props;
|
||||
|
||||
const siteName = 'Deal Plus Tech';
|
||||
const siteUrl = 'https://dealplustech.co.th';
|
||||
---
|
||||
|
||||
<!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} />
|
||||
<meta name="keywords" content="ท่อ PPR, ท่อ HDPE, ท่อ PVC, ระบบน้ำ, รั้วตาข่าย, อุปกรณ์ท่อ, วาล์ว, ปั๊มน้ำ" />
|
||||
<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 to Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<slot name="header" />
|
||||
|
||||
<main class="flex-grow">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<slot name="footer" />
|
||||
|
||||
<!-- Cookie Consent Banner -->
|
||||
<div id="cookie-consent" 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 class="container-custom max-w-6xl">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">เราใช้คุกกี้เพื่อประสบการณ์ที่ดีที่สุด</h3>
|
||||
<p class="text-secondary-300 text-base">
|
||||
เว็บไซต์ของเราใช้คุกกี้เพื่อเพิ่มประสิทธิภาพการใช้งาน วิเคราะห์การจราจร และแสดงเนื้อหาที่เหมาะสม
|
||||
คุณสามารถยอมรับหรือปฏิเสธคุกกี้บางประเภทได้
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<button id="consent-reject" class="btn-secondary px-6 py-3 text-sm">
|
||||
ปฏิเสธทั้งหมด
|
||||
</button>
|
||||
<button id="consent-accept" class="btn-primary px-6 py-3 text-sm">
|
||||
ยอมรับทั้งหมด
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consent Preferences Modal -->
|
||||
<div id="consent-modal" class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm hidden">
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
<div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div class="p-6 md:p-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold text-secondary-900">การตั้งค่าคุกกี้</h2>
|
||||
<button id="modal-close" class="text-secondary-500 hover:text-secondary-700 text-2xl">×</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="border border-secondary-200 rounded-xl p-4">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-secondary-900">คุกกี้ที่จำเป็น</h3>
|
||||
<p class="text-secondary-600 text-base">จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดได้</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-not-allowed">
|
||||
<input type="checkbox" checked disabled class="sr-only peer" />
|
||||
<div class="w-11 h-6 bg-primary-500 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-100 rounded-full peer"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-secondary-200 rounded-xl p-4">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-secondary-900">คุกกี้ประสิทธิภาพ</h3>
|
||||
<p class="text-secondary-600 text-base">ช่วยเราวิเคราะห์การใช้งานเว็บไซต์</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" id="consent-analytics" class="sr-only peer" />
|
||||
<div class="w-11 h-6 bg-secondary-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-secondary-200 rounded-xl p-4">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-secondary-900">คุกกี้การตลาด</h3>
|
||||
<p class="text-secondary-600 text-base">ใช้สำหรับแสดงโฆษณาที่เกี่ยวข้อง</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" id="consent-marketing" class="sr-only peer" />
|
||||
<div class="w-11 h-6 bg-secondary-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<button id="consent-save" class="btn-primary flex-1 py-3">
|
||||
บันทึกการตั้งค่า
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-secondary-500 text-sm mt-6 text-center">
|
||||
คุณสามารถเปลี่ยนการตั้งค่าคุกกี้ได้ตลอดเวลา การใช้บริการนี้ถือว่าคุณยอมรับ
|
||||
<a href="/privacy-policy" class="text-primary-500 hover:underline">นโยบายความเป็นส่วนตัว</a> ของเรา
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Umami Analytics (conditionally loaded) -->
|
||||
<script is:inline>
|
||||
const consent = JSON.parse(localStorage.getItem('consent-preferences') || '{}');
|
||||
if (consent.analytics) {
|
||||
const script = document.createElement('script');
|
||||
script.defer = true;
|
||||
script.src = 'https://analytics.dealplustech.co.th/script.js';
|
||||
script.setAttribute('data-website-id', import.meta.env.UMAMI_WEBSITE_ID || '');
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Consent Management Script -->
|
||||
<script>
|
||||
(function() {
|
||||
const consent = JSON.parse(localStorage.getItem('consent-preferences') || '{}');
|
||||
const hasConsent = consent.timestamp !== undefined;
|
||||
|
||||
if (!hasConsent) {
|
||||
setTimeout(() => {
|
||||
document.getElementById('cookie-consent').classList.remove('translate-y-full');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.getElementById('consent-accept')?.addEventListener('click', () => {
|
||||
saveConsent({ essential: true, analytics: true, marketing: true });
|
||||
});
|
||||
|
||||
document.getElementById('consent-reject')?.addEventListener('click', () => {
|
||||
saveConsent({ essential: true, analytics: false, marketing: false });
|
||||
});
|
||||
|
||||
document.getElementById('modal-close')?.addEventListener('click', () => {
|
||||
document.getElementById('consent-modal').classList.add('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('consent-save')?.addEventListener('click', () => {
|
||||
const analytics = document.getElementById('consent-analytics')?.checked || false;
|
||||
const marketing = document.getElementById('consent-marketing')?.checked || false;
|
||||
saveConsent({ essential: true, analytics, marketing });
|
||||
});
|
||||
|
||||
function saveConsent(preferences) {
|
||||
const consentData = {
|
||||
...preferences,
|
||||
timestamp: Date.now(),
|
||||
policyVersion: '1.0'
|
||||
};
|
||||
localStorage.setItem('consent-preferences', JSON.stringify(consentData));
|
||||
|
||||
fetch('/api/consent', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(consentData)
|
||||
}).catch(console.error);
|
||||
|
||||
document.getElementById('cookie-consent').classList.add('translate-y-full');
|
||||
document.getElementById('consent-modal').classList.add('hidden');
|
||||
|
||||
if (preferences.analytics && !window.umami) {
|
||||
const script = document.createElement('script');
|
||||
script.defer = true;
|
||||
script.src = 'https://analytics.dealplustech.co.th/script.js';
|
||||
script.setAttribute('data-website-id', import.meta.env.UMAMI_WEBSITE_ID || '');
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
}
|
||||
|
||||
window.openConsentPreferences = function() {
|
||||
document.getElementById('consent-modal').classList.remove('hidden');
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user