kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Fix website-creator: add missing functions and templates with IDs

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-03-16 10:50:00 +07:00
parent 58ab725ef9
commit 12515acd5d
6 changed files with 1190 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
skills/website-creator/scripts/templates/components/common/Footer.astro Normal file
View File

@@ -0,0 +1,131 @@
---
const currentYear = new Date().getFullYear();
const quickLinks = [
{ name: 'หน้าแรก', href: '/' },
{ name: 'เกี่ยวกับเรา', href: '/about' },
{ name: 'บริการ', href: '/services' },
{ name: 'สินค้า', href: '/products' },
{ name: 'ติดต่อเรา', href: '/contact' },
];
const services = [
{ name: 'บริการติดตั้ง', href: '/services/installation' },
{ name: 'บริการให้คำปรึกษา', href: '/services/consultation' },
{ name: 'บริการซ่อมบำรุง', href: '/services/maintenance' },
];
const legalLinks = [
{ name: 'นโยบายความเป็นส่วนตัว', href: '/privacy-policy' },
{ name: 'ข้อกำหนดและเงื่อนไข', href: '/terms-and-conditions' },
{ name: 'นโยบายคุกกี้', href: '/cookie-policy' },
];
const socialLinks = [
{ name: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
{ name: 'Line', href: 'https://line.me', icon: 'line' },
{ name: 'YouTube', href: 'https://youtube.com', icon: 'youtube' },
];
---
<footer id="footer-component" class="bg-secondary-900 text-white pt-16 pb-8">
<div id="footer-container" class="container-custom">
<!-- Main Footer Content -->
<div id="footer-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Company Info -->
<div id="footer-company">
<div id="footer-logo-container" class="mb-4">
<img id="footer-logo" src="/images/logo.png" alt="Logo" class="h-12" />
</div>
<div id="footer-description">
<p class="text-secondary-300 mb-4">
บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบท่อและอุปกรณ์ติดตั้งคุณภาพสูง
</p>
</div>
<!-- Social Links -->
<div id="footer-social">
<div id="social-links-container" class="flex space-x-4">
{socialLinks.map((social, index) => (
<a id={`social-${social.icon}`} href={social.href} target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-secondary-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition-colors" aria-label={social.name}>
<span class="text-sm font-medium">{social.name[0]}</span>
</a>
))}
</div>
</div>
</div>
<!-- Quick Links -->
<div id="footer-quick-links">
<h3 id="quick-links-title" class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
<ul id="quick-links-list" class="space-y-2">
{quickLinks.map((link, index) => (
<li>
<a id={`quick-link-${index}`} href={link.href} class="text-secondary-300 hover:text-white transition-colors">
{link.name}
</a>
</li>
))}
</ul>
</div>
<!-- Services -->
<div id="footer-services">
<h3 id="services-title" class="text-lg font-bold mb-4">บริการ</h3>
<ul id="services-list" class="space-y-2">
{services.map((service, index) => (
<li>
<a id={`service-link-${index}`} href={service.href} class="text-secondary-300 hover:text-white transition-colors">
{service.name}
</a>
</li>
))}
</ul>
</div>
<!-- Contact Info -->
<div id="footer-contact">
<h3 id="contact-title" class="text-lg font-bold mb-4">ติดต่อเรา</h3>
<div id="contact-info" class="space-y-3">
<div id="contact-address" class="flex items-start">
<span class="text-secondary-400 mr-2">📍</span>
<span class="text-secondary-300">123 ถนนสุขุมวิท กรุงเทพมหานคร 10110</span>
</div>
<div id="contact-phone" class="flex items-center">
<span class="text-secondary-400 mr-2">📞</span>
<a href="tel:021234567" class="text-secondary-300 hover:text-white transition-colors">02-123-4567</a>
</div>
<div id="contact-email" class="flex items-center">
<span class="text-secondary-400 mr-2">✉️</span>
<a href="mailto:info@example.com" class="text-secondary-300 hover:text-white transition-colors">info@example.com</a>
</div>
<div id="contact-hours" class="flex items-center">
<span class="text-secondary-400 mr-2">🕐</span>
<span class="text-secondary-300">วันจันทร์-เสาร์ 08:00-18:00 น.</span>
</div>
</div>
</div>
</div>
<!-- Bottom Footer -->
<div id="footer-bottom" class="border-t border-secondary-800 pt-8">
<div id="footer-bottom-content" class="flex flex-col md:flex-row justify-between items-center gap-4">
<div id="copyright">
<p class="text-secondary-400 text-sm">
© {currentYear} บริษัท ดีล พลัส เทค จำกัด สงวนลิขสิทธิ์
</p>
</div>
<div id="footer-legal-links">
<ul id="legal-links-list" class="flex flex-wrap gap-4 text-sm">
{legalLinks.map((link, index) => (
<li>
<a id={`legal-link-${index}`} href={link.href} class="text-secondary-400 hover:text-white transition-colors">
{link.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</footer>

122
skills/website-creator/scripts/templates/components/common/Header.astro Normal file
View File

@@ -0,0 +1,122 @@
---
const navItems = [
{ name: 'หน้าแรก', href: '/' },
{ name: 'เกี่ยวกับเรา', href: '/about' },
{ name: 'บริการ', href: '/services' },
{ name: 'ติดต่อเรา', href: '/contact' },
];
const categories = [
{ name: 'สินค้า', href: '/products', hasDropdown: true },
];
---
<header id="header-component" class="fixed w-full top-0 z-40 bg-white shadow-md">
<nav id="navbar" class="container-custom">
<div id="navbar-container" class="flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<div id="logo-container">
<a id="logo-link" href="/" class="flex items-center">
<img id="logo-image" src="/images/logo.png" alt="Logo" class="h-10 md:h-12" />
</a>
</div>
<!-- Desktop Navigation -->
<div id="desktop-nav" class="hidden md:flex items-center space-x-6">
<div id="nav-items-container">
{navItems.map((item) => (
<a id={`nav-${item.name.replace(' ', '-').toLowerCase()}`} href={item.href} class="nav-link text-secondary-700 hover:text-primary-600 font-medium transition-colors">
{item.name}
</a>
))}
</div>
<!-- Categories Dropdown -->
<div id="categories-dropdown" class="relative group">
<button id="categories-btn" class="nav-link flex items-center text-secondary-700 hover:text-primary-600 font-medium transition-colors">
สินค้า
<svg id="categories-chevron" class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div id="categories-menu" class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-left">
<div id="categories-menu-container" class="py-2">
<a id="category-all-products" href="/products" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
สินค้าทั้งหมด
</a>
<a id="category-pipes" href="/products/pipes" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
ท่อ
</a>
<a id="category-valves" href="/products/valves" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
วาล์ว
</a>
<a id="category-fittings" href="/products/fittings" class="block px-4 py-2 text-secondary-700 hover:bg-primary-50 hover:text-primary-600">
ข้อต่อ
</a>
</div>
</div>
</div>
<!-- CTA Button -->
<div id="cta-container">
<a id="cta-button" href="/contact" class="btn-primary px-4 py-2 rounded-lg font-medium">
ติดต่อเรา
</a>
</div>
</div>
<!-- Mobile Menu Button -->
<div id="mobile-menu-btn-container" class="md:hidden">
<button id="mobile-menu-btn" class="p-2 text-secondary-700 hover:text-primary-600" aria-label="เมนู">
<svg id="menu-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
<div id="mobile-menu-container" class="px-4 py-4 space-y-2">
{navItems.map((item, index) => (
<a id={`mobile-nav-${index}`} href={item.href} class="block py-2 text-secondary-700 hover:text-primary-600 font-medium">
{item.name}
</a>
))}
<div id="mobile-categories-container">
<button id="mobile-categories-btn" class="flex items-center justify-between w-full py-2 text-secondary-700 font-medium">
สินค้า
<svg id="mobile-chevron" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div id="mobile-categories-menu" class="hidden pl-4 space-y-2">
<a id="mobile-all-products" href="/products" class="block py-2 text-secondary-600">- สินค้าทั้งหมด</a>
<a id="mobile-pipes" href="/products/pipes" class="block py-2 text-secondary-600">- ท่อ</a>
<a id="mobile-valves" href="/products/valves" class="block py-2 text-secondary-600">- วาล์ว</a>
<a id="mobile-fittings" href="/products/fittings" class="block py-2 text-secondary-600">- ข้อต่อ</a>
</div>
</div>
<a id="mobile-cta" href="/contact" class="block w-full text-center btn-primary px-4 py-3 rounded-lg font-medium mt-4">
ติดต่อเรา
</a>
</div>
</div>
</nav>
</header>
<script>
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const mobileCategoriesBtn = document.getElementById('mobile-categories-btn');
const mobileCategoriesMenu = document.getElementById('mobile-categories-menu');
mobileMenuBtn?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
mobileCategoriesBtn?.addEventListener('click', () => {
mobileCategoriesMenu?.classList.toggle('hidden');
});
</script>