feat: Import 35+ skills, merge duplicates, add openclaw installer
Major updates: - Added 35+ new skills from awesome-opencode-skills and antigravity repos - Merged SEO skills into seo-master - Merged architecture skills into architecture - Merged security skills into security-auditor and security-coder - Merged testing skills into testing-master and testing-patterns - Merged pentesting skills into pentesting - Renamed website-creator to thai-frontend-dev - Replaced skill-creator with github version - Removed Chutes references (use MiniMax API instead) - Added install-openclaw-skills.sh for cross-platform installation - Updated .env.example with MiniMax API credentials
This commit is contained in:
Kunthawat Greethong
@@ -0,0 +1,313 @@
|
||||
---
|
||||
// Password-protected admin page for viewing consent logs
|
||||
import { db, ConsentLog, desc } from 'astro:db';
|
||||
|
||||
// Simple password protection (in production, use proper auth)
|
||||
const ADMIN_PASSWORD = Astro.env.ADMIN_PASSWORD || 'changeme';
|
||||
|
||||
let logs = [];
|
||||
let isAuthenticated = false;
|
||||
let error = '';
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
const formData = await Astro.request.formData();
|
||||
const password = formData.get('password');
|
||||
|
||||
if (password === ADMIN_PASSWORD) {
|
||||
isAuthenticated = true;
|
||||
try {
|
||||
logs = await db.select().from(ConsentLog).orderBy(desc(ConsentLog.timestamp)).limit(100);
|
||||
} catch (err) {
|
||||
error = 'Failed to load consent logs. Make sure database is initialized.';
|
||||
console.error(err);
|
||||
}
|
||||
} else {
|
||||
error = 'Invalid password';
|
||||
}
|
||||
}
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Consent Logs Admin | PDPA Compliance</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: #f3f4f6;
|
||||
padding: 2rem;
|
||||
}
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #111827;
|
||||
}
|
||||
.login-form {
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #374151;
|
||||
}
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
input[type="password"]:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
button:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
.error {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.success {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
th {
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
}
|
||||
tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.actions {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-green {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
.badge-red {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔐 Consent Logs Admin Dashboard</h1>
|
||||
|
||||
{!isAuthenticated ? (
|
||||
<div class="login-form">
|
||||
<h2 class="text-xl font-bold mb-4">Admin Login</h2>
|
||||
{error && <div class="error">{error}</div>}
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Enter admin password"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<p class="mt-4 text-sm text-gray-600">
|
||||
Default password: <code>changeme</code> (change in .env)
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div class="actions flex gap-4 mb-4">
|
||||
<a href="/admin/consent-logs" class="btn btn-primary">Refresh</a>
|
||||
<a href="/" class="btn" style="background: #6b7280; color: white;">← Back to Site</a>
|
||||
</div>
|
||||
|
||||
{error && <div class="error">{error}</div>}
|
||||
|
||||
<div style="overflow-x: auto;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date/Time</th>
|
||||
<th>Locale</th>
|
||||
<th>Session ID</th>
|
||||
<th>Essential</th>
|
||||
<th>Analytics</th>
|
||||
<th>Marketing</th>
|
||||
<th>Policy Ver</th>
|
||||
<th>IP Hash</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.length === 0 ? (
|
||||
<tr>
|
||||
<td colspan="9" style="text-align: center; padding: 2rem;">
|
||||
No consent logs found. Make sure the website has received consent.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
logs.map((log) => (
|
||||
<tr>
|
||||
<td>{new Date(log.timestamp).toLocaleString('en-GB')}</td>
|
||||
<td>{log.locale.toUpperCase()}</td>
|
||||
<td style="font-family: monospace; font-size: 0.75rem;">{log.sessionId}</td>
|
||||
<td>
|
||||
<span class="badge badge-green">{log.essential ? 'Yes' : 'No'}</span>
|
||||
</td>
|
||||
<td>
|
||||
{log.analytics ? (
|
||||
<span class="badge badge-green">✓</span>
|
||||
) : (
|
||||
<span class="badge badge-red">✗</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{log.marketing ? (
|
||||
<span class="badge badge-green">✓</span>
|
||||
) : (
|
||||
<span class="badge badge-red">✗</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{log.policyVersion}</td>
|
||||
<td style="font-family: monospace; font-size: 0.75rem;">{log.ipHash}</td>
|
||||
<td>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
onclick="deleteConsent('{log.sessionId}')"
|
||||
style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; padding: 1rem; background: #fef3c7; border-radius: 0.375rem;">
|
||||
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem;">⚠️ Important Notes:</h3>
|
||||
<ul style="font-size: 0.75rem; color: #92400e; list-style: disc; padding-left: 1.5rem;">
|
||||
<li>Consent records must be retained for 10 years (PDPA requirement)</li>
|
||||
<li>Only delete records when user exercises "right to be forgotten"</li>
|
||||
<li>Document all deletions for compliance audit</li>
|
||||
<li>IP addresses are hashed for privacy protection</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function deleteConsent(sessionId) {
|
||||
if (!confirm('Delete this consent record? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/consent/${sessionId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
alert('Consent record deleted successfully');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Failed to delete consent record');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete error:', error);
|
||||
alert('Error deleting consent record');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
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', svg: '' },
|
||||
{ name: 'Line', href: 'https://line.me', icon: 'line', svg: 'line' },
|
||||
{ name: 'YouTube', href: 'https://youtube.com', icon: 'youtube', svg: '' },
|
||||
];
|
||||
---
|
||||
|
||||
<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) => (
|
||||
<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}>
|
||||
{social.svg === 'line' ? (
|
||||
<img src="/images/icons/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
) : (
|
||||
<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>
|
||||
@@ -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>
|
||||
10
skills/thai-frontend-dev/scripts/templates/icons/line.svg
Normal file
10
skills/thai-frontend-dev/scripts/templates/icons/line.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-6,-6)">
|
||||
<path d="M12.5,42L35.5,42C39.09,42 42,39.09 42,35.5L42,12.5C42,8.91 39.09,6 35.5,6L12.5,6C8.91,6 6,8.91 6,12.5L6,35.5C6,39.09 8.91,42 12.5,42Z" style="fill:rgb(0,195,0);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-6,-6)">
|
||||
<path d="M37.113,22.417C37.113,16.552 31.233,11.78 24.006,11.78C16.779,11.78 10.898,16.552 10.898,22.417C10.898,27.675 15.561,32.079 21.86,32.912C22.287,33.004 22.868,33.194 23.015,33.558C23.147,33.889 23.101,34.408 23.057,34.743C23.057,34.743 22.904,35.668 22.87,35.865C22.813,36.196 22.607,37.161 24.005,36.572C25.404,35.983 31.553,32.127 34.303,28.961L34.302,28.961C36.203,26.879 37.113,24.764 37.113,22.417ZM18.875,25.907L16.271,25.907C15.892,25.907 15.584,25.599 15.584,25.219L15.584,20.01C15.584,19.631 15.892,19.323 16.271,19.323C16.65,19.323 16.958,19.631 16.958,20.01L16.958,24.531L18.875,24.531C19.254,24.531 19.562,24.839 19.562,25.218C19.562,25.598 19.254,25.907 18.875,25.907ZM21.568,25.219C21.568,25.598 21.26,25.907 20.881,25.907C20.502,25.907 20.194,25.599 20.194,25.219L20.194,20.01C20.194,19.631 20.502,19.323 20.881,19.323C21.26,19.323 21.568,19.631 21.568,20.01L21.568,25.219ZM27.838,25.219C27.838,25.516 27.65,25.778 27.368,25.871C27.297,25.895 27.223,25.907 27.15,25.907C26.935,25.907 26.73,25.804 26.601,25.632L23.932,21.997L23.932,25.219C23.932,25.598 23.624,25.907 23.244,25.907C22.865,25.907 22.556,25.599 22.556,25.219L22.556,20.01C22.556,19.714 22.745,19.452 23.026,19.358C23.097,19.334 23.17,19.323 23.244,19.323C23.458,19.323 23.664,19.426 23.793,19.598L26.463,23.233L26.463,20.01C26.463,19.631 26.772,19.323 27.151,19.323C27.53,19.323 27.838,19.631 27.838,20.01L27.838,25.219ZM32.052,21.927C32.431,21.927 32.74,22.235 32.74,22.615C32.74,22.994 32.432,23.302 32.052,23.302L30.135,23.302L30.135,24.532L32.052,24.532C32.431,24.532 32.74,24.84 32.74,25.219C32.74,25.598 32.431,25.907 32.052,25.907L29.448,25.907C29.07,25.907 28.761,25.599 28.761,25.219L28.761,20.011C28.761,19.632 29.069,19.324 29.448,19.324L32.052,19.324C32.431,19.324 32.74,19.632 32.74,20.011C32.74,20.39 32.432,20.698 32.052,20.698L30.135,20.698L30.135,21.928L32.052,21.928L32.052,21.927Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,190 @@
|
||||
---
|
||||
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>
|
||||
183
skills/thai-frontend-dev/scripts/templates/pages/index.astro
Normal file
183
skills/thai-frontend-dev/scripts/templates/pages/index.astro
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/common/Header.astro';
|
||||
import Footer from '../components/common/Footer.astro';
|
||||
|
||||
const pageTitle = 'หน้าแรก';
|
||||
const pageDescription = 'ผู้เชี่ยวชาญด้านระบบท่อและอุปกรณ์ติดตั้งคุณภาพสูง ราคาโรงงาน';
|
||||
---
|
||||
|
||||
<BaseLayout title={pageTitle} description={pageDescription}>
|
||||
<Header slot="header" />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="hero-section" class="relative bg-white section overflow-hidden pt-24 md:pt-32">
|
||||
<div id="hero-container" class="container-custom">
|
||||
<div id="hero-grid" class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
|
||||
<div id="hero-content" class="animate-fade-in">
|
||||
<h1 id="hero-title" class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900 mb-4 md:mb-6 leading-tight">
|
||||
ผู้เชี่ยวชาญระบบน้ำ<br/>
|
||||
<span class="text-green-600">คุณภาพสูง ราคาโรงงาน</span>
|
||||
</h1>
|
||||
<p id="hero-description" class="text-base sm:text-lg md:text-xl text-secondary-600 mb-6 md:mb-8 leading-relaxed">
|
||||
เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ท่อ HDPE ท่อ PVC และอุปกรณ์ติดตั้งคุณภาพสูง ราคาถูก
|
||||
</p>
|
||||
<div id="hero-buttons" class="flex flex-wrap justify-center gap-3 md:gap-4">
|
||||
<a id="hero-cta-products" href="/products" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">
|
||||
ดูสินค้าทั้งหมด
|
||||
</a>
|
||||
<a id="hero-cta-contact" href="/contact" class="bg-white text-green-600 px-5 py-3 md:px-8 md:py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
<div id="hero-stats" class="flex items-center sm:space-x-8 space-x-4 sm:mt-12 mt-8 justify-center">
|
||||
<div id="stat-experience">
|
||||
<div id="stat-experience-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">10+</div>
|
||||
<div id="stat-experience-label" class="text-secondary-600 text-xs sm:text-base">ปีประสบการณ์</div>
|
||||
</div>
|
||||
<div id="stat-projects">
|
||||
<div id="stat-projects-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">1000+</div>
|
||||
<div id="stat-projects-label" class="text-secondary-600 text-xs sm:text-base">โปรเจคต์</div>
|
||||
</div>
|
||||
<div id="stat-products">
|
||||
<div id="stat-products-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">500+</div>
|
||||
<div id="stat-products-label" class="text-secondary-600 text-xs sm:text-base">สินค้า</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hero-image-container" class="relative animate-slide-up mt-6 md:mt-0">
|
||||
<div id="hero-image-wrapper" class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
|
||||
<div id="hero-image-grid" class="grid grid-cols-3 gap-2 md:gap-4 relative">
|
||||
<div id="hero-image-main" class="col-span-2 row-span-2">
|
||||
<img id="hero-img-1" src="/images/hero-1.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
<div id="hero-image-2">
|
||||
<img id="hero-img-2" src="/images/hero-2.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
<div id="hero-image-3">
|
||||
<img id="hero-img-3" src="/images/hero-3.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Categories Section -->
|
||||
<section id="categories-section" class="py-16 md:py-24 bg-gray-50">
|
||||
<div id="categories-container" class="container-custom">
|
||||
<div id="categories-header" class="text-center mb-12">
|
||||
<h2 id="categories-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
|
||||
หมวดสินค้า
|
||||
</h2>
|
||||
<p id="categories-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
|
||||
สินค้าคุณภาพสูงสำหรับทุกการใช้งาน
|
||||
</p>
|
||||
</div>
|
||||
<div id="categories-grid" class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
|
||||
{['ท่อ PPR', 'ท่อ HDPE', 'ท่อ UPVC', 'วาล์ว', 'ข้อต่อ', 'อุปกรณ์ติดตั้ง', 'ปั๊มน้ำ', 'อุปกรณ์ดับเพลิง'].map((category, index) => (
|
||||
<a id={`category-card-${index}`} href={`/products/${category.toLowerCase().replace(' ', '-')}`} class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 text-center">
|
||||
<div id={`category-icon-${index}`} class="w-16 h-16 mx-auto mb-4 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-600 transition-colors">
|
||||
<span class="text-2xl">{category[0]}</span>
|
||||
</div>
|
||||
<h3 id={`category-name-${index}`} class="font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
|
||||
{category}
|
||||
</h3>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products Section -->
|
||||
<section id="featured-products-section" class="py-16 md:py-24 bg-white">
|
||||
<div id="featured-products-container" class="container-custom">
|
||||
<div id="featured-products-header" class="text-center mb-12">
|
||||
<h2 id="featured-products-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
|
||||
สินค้าแนะนำ
|
||||
</h2>
|
||||
<p id="featured-products-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
|
||||
สินค้ายอดนิยมจากลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
<div id="featured-products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{[
|
||||
{ name: 'ท่อ PPR ตราช้าง', description: 'ท่อ PPR คุณภาพสูง มาตรฐาน', image: '/images/products/ppr.jpg' },
|
||||
{ name: 'วาล์วน้ำดับเพลิง', description: 'วาล์วคุณภาพสูง ทนทาน', image: '/images/products/valve.jpg' },
|
||||
{ name: 'ข้อต่อ HDPE', description: 'ข้อต่อสำหรับท่อ HDPE', image: '/images/products/fitting.jpg' },
|
||||
].map((product, index) => (
|
||||
<div id={`featured-product-card-${index}`} class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
|
||||
<div id={`featured-product-image-${index}`} class="aspect-video overflow-hidden">
|
||||
<img id={`featured-product-img-${index}`} src={product.image} alt={product.name} class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" />
|
||||
</div>
|
||||
<div id={`featured-product-content-${index}`} class="p-6">
|
||||
<h3 id={`featured-product-title-${index}`} class="font-bold text-lg text-secondary-900 mb-2">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p id={`featured-product-desc-${index}`} class="text-secondary-600 mb-4">
|
||||
{product.description}
|
||||
</p>
|
||||
<a id={`featured-product-link-${index}`} href={`/products/${product.name.toLowerCase().replace(' ', '-')}`} class="text-primary-600 font-medium hover:text-primary-700 transition-colors">
|
||||
ดูรายละเอียด →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div id="featured-products-cta" class="text-center mt-12">
|
||||
<a id="featured-products-all" href="/products" class="btn-primary px-8 py-3 text-lg rounded-xl">
|
||||
ดูสินค้าทั้งหมด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section id="why-choose-us-section" class="py-16 md:py-24 bg-primary-50">
|
||||
<div id="why-choose-us-container" class="container-custom">
|
||||
<div id="why-choose-us-header" class="text-center mb-12">
|
||||
<h2 id="why-choose-us-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
|
||||
ทำไมต้องเลือกเรา
|
||||
</h2>
|
||||
<p id="why-choose-us-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
|
||||
เรามีความมุ่งมั่นในการให้บริการที่ดีที่สุด
|
||||
</p>
|
||||
</div>
|
||||
<div id="why-choose-us-grid" class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{[
|
||||
{ icon: '🏭', title: 'โรงงานผู้ผลิต', description: 'สินค้าจากโรงงานโดยตรง ราคาถูก' },
|
||||
{ icon: '✅', title: 'มาตรฐาน', description: 'ผ่านการรับรอง มอก.' },
|
||||
{ icon: '🚚', title: 'จัดส่งรวดเร็ว', description: 'ส่งทั่วประเทศไทย' },
|
||||
].map((feature, index) => (
|
||||
<div id={`why-choose-us-card-${index}`} class="bg-white rounded-xl shadow-md p-8 text-center">
|
||||
<div id={`why-choose-us-icon-${index}`} class="text-4xl mb-4">{feature.icon}</div>
|
||||
<h3 id={`why-choose-us-feature-title-${index}`} class="font-bold text-xl text-secondary-900 mb-2">{feature.title}</h3>
|
||||
<p id={`why-choose-us-feature-desc-${index}`} class="text-secondary-600">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="cta-section" class="py-16 md:py-24 bg-green-600">
|
||||
<div id="cta-container" class="container-custom text-center">
|
||||
<h2 id="cta-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-4">
|
||||
ต้องการคำปรึกษาฟรี?
|
||||
</h2>
|
||||
<p id="cta-description" class="text-white/80 text-lg mb-8 max-w-2xl mx-auto">
|
||||
ทีมงานของเราพร้อมให้คำปรึกษาฟรี ไม่มีค่าใช้จ่าย
|
||||
</p>
|
||||
<div id="cta-buttons" class="flex flex-wrap justify-center gap-4">
|
||||
<a id="cta-contact-btn" href="/contact" class="bg-white text-green-600 px-8 py-3 rounded-xl font-bold hover:bg-gray-100 transition-colors">
|
||||
ติดต่อเราวันนี้
|
||||
</a>
|
||||
<a id="cta-line-btn" href="https://line.me" target="_blank" class="bg-green-500 text-white px-8 py-3 rounded-xl font-bold hover:bg-green-400 transition-colors">
|
||||
ติดต่อผ่าน LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
298
skills/thai-frontend-dev/scripts/templates/styles/global.css
Normal file
298
skills/thai-frontend-dev/scripts/templates/styles/global.css
Normal file
@@ -0,0 +1,298 @@
|
||||
/* Global Styles */
|
||||
|
||||
/* Base Typography */
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
html { font-size: 20px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
html { font-size: 22px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
html { font-size: 24px; }
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Minimum font sizes */
|
||||
.text-base { font-size: 1rem; }
|
||||
.text-lg { font-size: 1.125rem; }
|
||||
.text-xl { font-size: 1.25rem; }
|
||||
|
||||
/* Container */
|
||||
.container-custom {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container-custom {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #16a34a;
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #374151;
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: white;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.gap-6 { gap: 1.5rem; }
|
||||
.gap-8 { gap: 2rem; }
|
||||
|
||||
.grid { display: grid; }
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:flex { display: flex; }
|
||||
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
.mt-6 { margin-top: 1.5rem; }
|
||||
.mt-8 { margin-top: 2rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.mb-6 { margin-bottom: 1.5rem; }
|
||||
.mb-8 { margin-bottom: 2rem; }
|
||||
|
||||
.p-2 { padding: 0.5rem; }
|
||||
.p-4 { padding: 1rem; }
|
||||
.p-6 { padding: 1.5rem; }
|
||||
.p-8 { padding: 2rem; }
|
||||
|
||||
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
||||
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
||||
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
|
||||
/* Colors */
|
||||
.text-white { color: white; }
|
||||
.text-black { color: black; }
|
||||
.text-gray-500 { color: #6b7280; }
|
||||
.text-gray-600 { color: #4b5563; }
|
||||
.text-gray-700 { color: #374151; }
|
||||
.text-gray-900 { color: #111827; }
|
||||
.text-green-500 { color: #22c55e; }
|
||||
.text-green-600 { color: #16a34a; }
|
||||
|
||||
.bg-white { background-color: white; }
|
||||
.bg-gray-50 { background-color: #f9fafb; }
|
||||
.bg-gray-100 { background-color: #f3f4f6; }
|
||||
.bg-black { background-color: black; }
|
||||
.bg-green-500 { background-color: #22c55e; }
|
||||
.bg-green-600 { background-color: #16a34a; }
|
||||
|
||||
/* Border Radius */
|
||||
.rounded { border-radius: 0.25rem; }
|
||||
.rounded-lg { border-radius: 0.5rem; }
|
||||
.rounded-xl { border-radius: 0.75rem; }
|
||||
.rounded-2xl { border-radius: 1rem; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
|
||||
/* Shadows */
|
||||
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
|
||||
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
|
||||
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
|
||||
|
||||
/* Typography */
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
|
||||
.text-xs { font-size: 0.75rem; }
|
||||
.text-sm { font-size: 0.875rem; }
|
||||
.text-lg { font-size: 1.125rem; }
|
||||
.text-xl { font-size: 1.25rem; }
|
||||
.text-2xl { font-size: 1.5rem; }
|
||||
.text-3xl { font-size: 1.875rem; }
|
||||
.text-4xl { font-size: 2.25rem; }
|
||||
|
||||
.leading-tight { line-height: 1.25; }
|
||||
.leading-relaxed { line-height: 1.625; }
|
||||
|
||||
/* Width/Height */
|
||||
.w-full { width: 100%; }
|
||||
.h-full { height: 100%; }
|
||||
.h-10 { height: 2.5rem; }
|
||||
.h-12 { height: 3rem; }
|
||||
.h-16 { height: 4rem; }
|
||||
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
/* Position */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.fixed { position: fixed; }
|
||||
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
|
||||
.top-0 { top: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.z-40 { z-index: 40; }
|
||||
.z-50 { z-index: 50; }
|
||||
|
||||
/* Overflow */
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
|
||||
/* Transitions */
|
||||
.transition-all { transition: all 0.2s; }
|
||||
.transition-colors { transition: color 0.2s, background-color 0.2s; }
|
||||
.transition-transform { transition: transform 0.2s; }
|
||||
|
||||
/* Transform */
|
||||
.translate-y-full { transform: translateY(100%); }
|
||||
|
||||
/* Misc */
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
.hover\:scale-105:hover { transform: scale(1.05); }
|
||||
.active\:scale-95:active { transform: scale(0.95); }
|
||||
|
||||
/* Hidden by default */
|
||||
.hidden { display: none; }
|
||||
|
||||
/* Space-x for flex items */
|
||||
.space-x-4 > * + * { margin-left: 1rem; }
|
||||
.space-x-6 > * + * { margin-left: 1.5rem; }
|
||||
.space-x-8 > * + * { margin-left: 2rem; }
|
||||
|
||||
/* Space-y for flex/grid items */
|
||||
.space-y-2 > * + * { margin-top: 0.5rem; }
|
||||
.space-y-4 > * + * { margin-top: 1rem; }
|
||||
.space-y-6 > * + * { margin-top: 1.5rem; }
|
||||
|
||||
/* Aspect ratio */
|
||||
.aspect-video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
/* Object fit */
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Border */
|
||||
.border {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
/* Text align */
|
||||
.text-center { text-align: center; }
|
||||
|
||||
/* Max width */
|
||||
.max-w-lg { max-width: 32rem; }
|
||||
.max-w-2xl { max-width: 42rem; }
|
||||
.max-w-6xl { max-width: 72rem; }
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
@@ -0,0 +1,423 @@
|
||||
# นโยบายความเป็นส่วนตัว (Privacy Policy)
|
||||
|
||||
**ชื่อเว็บไซต์:** [WEBSITE_NAME]
|
||||
**มีผลบังคับใช้วันที่:** [DATE]
|
||||
**แก้ไขล่าสุด:** [DATE]
|
||||
|
||||
## 1. บทนำ
|
||||
|
||||
บริษัท [COMPANY_NAME] ("เรา", "ของเรา" หรือ "บริษัท") ให้คำมั่นสัญญาที่จะปกป้องข้อมูลส่วนบุคคลของผู้ใช้บริการ ("ผู้ใช้", "ของคุณ" หรือ "ท่าน") ที่ใช้งานเว็บไซต์ [WEBSITE_URL] ("เว็บไซต์") นโยบายความเป็นส่วนตัวฉบับนี้อธิบายถึงวิธีการเก็บรวบรวม ใช้ เปิดเผย และคุ้มครองข้อมูลส่วนบุคคลของท่าน
|
||||
|
||||
นโยบายนี้จัดทำขึ้นตามกฎหมายคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 (PDPA) และกฎหมายที่เกี่ยวข้องของประเทศไทย
|
||||
|
||||
## 2. ข้อมูลส่วนบุคคลที่เก็บรวบรวม
|
||||
|
||||
### 2.1 ข้อมูลที่ท่านให้โดยตรง
|
||||
|
||||
เราอาจเก็บรวบรวมข้อมูลส่วนบุคคลต่อไปนี้ที่ท่านให้โดยตรง:
|
||||
|
||||
**ข้อมูลการติดต่อ:**
|
||||
- ชื่อและนามสกุล
|
||||
- ที่อยู่อีเมล
|
||||
- เบอร์โทรศัพท์
|
||||
- ที่อยู่สำหรับติดต่อ
|
||||
|
||||
**ข้อมูลบัญชีผู้ใช้:**
|
||||
- ชื่อผู้ใช้ (Username)
|
||||
- รหัสผ่าน (Password)
|
||||
- ประวัติการใช้งาน
|
||||
|
||||
**ข้อมูลการชำระเงิน:**
|
||||
- ข้อมูลบัตรเครดิต/เดบิต
|
||||
- ข้อมูลบัญชีธนาคาร
|
||||
- ประวัติการทำธุรกรรม
|
||||
|
||||
**ข้อมูลอื่นๆ:**
|
||||
- ความคิดเห็น ข้อเสนอแนะ
|
||||
- แบบสำรวจความพึงพอใจ
|
||||
- เนื้อหาที่ท่านส่งมา
|
||||
|
||||
### 2.2 ข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ
|
||||
|
||||
เมื่อท่านใช้งานเว็บไซต์ เราอาจเก็บรวบรวมข้อมูลต่อไปนี้โดยอัตโนมัติ:
|
||||
|
||||
**ข้อมูลอุปกรณ์:**
|
||||
- ประเภทของอุปกรณ์ (คอมพิวเตอร์, สมาร์ทโฟน, แท็บเล็ต)
|
||||
- ระบบปฏิบัติการ
|
||||
- เบราว์เซอร์ที่ใช้
|
||||
- ที่อยู่ IP (IP Address)
|
||||
|
||||
**ข้อมูลการใช้งาน:**
|
||||
- หน้าเว็บที่ท่านเข้าชม
|
||||
- เวลาและวันที่เข้าชม
|
||||
- ระยะเวลาการใช้งาน
|
||||
- ลิงก์ที่ท่านคลิก
|
||||
- ข้อมูล Cookie
|
||||
|
||||
**ข้อมูลตำแหน่ง:**
|
||||
- ข้อมูลตำแหน่งทางภูมิศาสตร์ (หากท่านอนุญาต)
|
||||
|
||||
## 3. วัตถุประสงค์ในการใช้ข้อมูล
|
||||
|
||||
เราใช้ข้อมูลส่วนบุคคลของท่านเพื่อวัตถุประสงค์ดังต่อไปนี้:
|
||||
|
||||
### 3.1 การให้บริการ
|
||||
|
||||
- ให้บริการและบำรุงรักษาเว็บไซต์
|
||||
- ประมวลผลคำขอและธุรกรรมของท่าน
|
||||
- ส่งมอบสินค้าหรือบริการที่ท่านสั่งซื้อ
|
||||
- จัดการบัญชีผู้ใช้ของท่าน
|
||||
|
||||
### 3.2 การสื่อสาร
|
||||
|
||||
- ตอบกลับคำถามและข้อร้องเรียน
|
||||
- ส่งข้อมูลเกี่ยวกับบริการของเรา
|
||||
- แจ้งเตือนเกี่ยวกับการอัปเดตหรือการเปลี่ยนแปลง
|
||||
- ส่งข่าวสารโปรโมชั่น (หากท่านยินยอม)
|
||||
|
||||
### 3.3 การปรับปรุงบริการ
|
||||
|
||||
- วิเคราะห์การใช้งานเว็บไซต์
|
||||
- พัฒนาและปรับปรุงบริการ
|
||||
- ทดสอบฟีเจอร์ใหม่
|
||||
- วิจัยตลาด
|
||||
|
||||
### 3.4 ความปลอดภัย
|
||||
|
||||
- ระบุและป้องกันภัยคุกคามด้านความปลอดภัย
|
||||
- ตรวจสอบกิจกรรมที่อาจเป็นการฉ้อโกง
|
||||
- บังคับใช้นโยบายและข้อกำหนดของเรา
|
||||
- ปฏิบัติตามข้อกำหนดทางกฎหมาย
|
||||
|
||||
### 3.5 ตามกฎหมาย
|
||||
|
||||
- ปฏิบัติตามภาระผูกพันทางกฎหมาย
|
||||
- ตอบสนองต่อคำขอจากหน่วยงานราชการ
|
||||
- ป้องกันสิทธิและทรัพย์สินของเรา
|
||||
- ป้องกันอันตรายต่อสาธารณะ
|
||||
|
||||
## 4. ฐานทางกฎหมายในการประมวลผลข้อมูล
|
||||
|
||||
เราประมวลผลข้อมูลส่วนบุคคลของท่านบนฐานทางกฎหมายดังต่อไปนี้:
|
||||
|
||||
### 4.1 ความยินยอม (Consent)
|
||||
|
||||
ท่านได้ให้ความยินยอมให้เราประมวลผลข้อมูลส่วนบุคคลของท่านเพื่อวัตถุประสงค์เฉพาะ เช่น:
|
||||
- การส่งข่าวสารทางอีเมล
|
||||
- การใช้ Cookie สำหรับการตลาด
|
||||
- การเก็บข้อมูลสุขภาพหรือข้อมูลอ่อนไหวอื่นๆ
|
||||
|
||||
### 4.2 การปฏิบัติตามสัญญา (Contract)
|
||||
|
||||
การประมวลผลจำเป็นสำหรับการปฏิบัติตามสัญญาที่ท่านทำกับเรา เช่น:
|
||||
- การประมวลผลการสั่งซื้อ
|
||||
- การให้บริการที่ท่านร้องขอ
|
||||
- การจัดการบัญชีผู้ใช้
|
||||
|
||||
### 4.3 หน้าที่ทางกฎหมาย (Legal Obligation)
|
||||
|
||||
การประมวลผลจำเป็นเพื่อปฏิบัติตามภาระผูกพันทางกฎหมาย เช่น:
|
||||
- การเก็บรักษาบันทึกทางการเงิน
|
||||
- การรายงานต่อหน่วยงานราชการ
|
||||
- การปฏิบัติตามคำสั่งศาล
|
||||
|
||||
### 4.4 ผลประโยชน์โดยชอบด้วยกฎหมาย (Legitimate Interest)
|
||||
|
||||
การประมวลผลจำเป็นเพื่อประโยชน์โดยชอบด้วยกฎหมายของเรา เช่น:
|
||||
- การป้องกันและการตรวจสอบการฉ้อโกง
|
||||
- ความปลอดภัยของเครือข่ายและข้อมูล
|
||||
- การปรับปรุงบริการ
|
||||
|
||||
## 5. การเปิดเผยข้อมูลให้กับบุคคลที่สาม
|
||||
|
||||
เราไม่ขายหรือให้เช่าข้อมูลส่วนบุคคลของท่านให้กับบุคคลที่สาม อย่างไรก็ตาม เราอาจเปิดเผยข้อมูลของท่านในกรณีต่อไปนี้:
|
||||
|
||||
### 5.1 ผู้ให้บริการ (Service Providers)
|
||||
|
||||
เราอาจแบ่งปันข้อมูลกับผู้ให้บริการที่ช่วยเราดำเนินธุรกิจ:
|
||||
- **ผู้ให้บริการชำระเงิน:** เช่น ธนาคาร, ผู้ให้บริการบัตรเครดิต
|
||||
- **ผู้ให้บริการจัดส่ง:** เช่น ไปรษณีย์ไทย, Kerry, Flash Express
|
||||
- **ผู้ให้บริการคลาวด์:** เช่น AWS, Google Cloud, Azure
|
||||
- **ผู้ให้บริการอีเมล:** เช่น SendGrid, Mailchimp
|
||||
- **ผู้ให้บริการวิเคราะห์ข้อมูล:** เช่น Google Analytics
|
||||
|
||||
### 5.2 หน่วยงานราชการ
|
||||
|
||||
เราอาจเปิดเผยข้อมูลเมื่อได้รับคำสั่งตามกฎหมาย:
|
||||
- ศาลหรือกระบวนการยุติธรรม
|
||||
- หน่วยงานบังคับใช้กฎหมาย
|
||||
- หน่วยงานกำกับดูแล
|
||||
- หน่วยงานภาษี
|
||||
|
||||
### 5.3 การโอนกิจการ
|
||||
|
||||
ในกรณีที่มีการควบรวมกิจการ ขายทรัพย์สิน หรือการโอนกิจการ ข้อมูลของท่านอาจถูกโอนไปยังผู้ซื้อหรือผู้รับโอน
|
||||
|
||||
### 5.4 เพื่อปกป้องสิทธิ
|
||||
|
||||
เราอาจเปิดเผยข้อมูลเพื่อ:
|
||||
- ปกป้องสิทธิ ทรัพย์สิน หรือความปลอดภัยของเรา
|
||||
- ป้องกันการฉ้อโกง
|
||||
- ปฏิบัติตามข้อกำหนดการใช้งาน
|
||||
|
||||
## 6. การเก็บรักษาข้อมูล
|
||||
|
||||
เราเก็บรักษาข้อมูลส่วนบุคคลของท่านไว้เฉพาะเท่าที่จำเป็นเพื่อวัตถุประสงค์ที่ระบุไว้ในนโยบายนี้:
|
||||
|
||||
### 6.1 ระยะเวลาการเก็บรักษา
|
||||
|
||||
- **ข้อมูลบัญชีผู้ใช้:** เก็บรักษาตราบเท่าที่ท่านเป็นผู้ใช้บริการ และ 3 ปีหลังจากนั้น
|
||||
- **ข้อมูลธุรกรรม:** 5 ปี ตามข้อกำหนดของกฎหมายภาษี
|
||||
- **ข้อมูลการติดต่อ:** 2 ปีหลังจากการติดต่อล่าสุด
|
||||
- **ข้อมูล Cookie:** ตามการตั้งค่า Cookie ของท่าน
|
||||
|
||||
### 6.2 การทำลายข้อมูล
|
||||
|
||||
เมื่อไม่จำเป็นต้องเก็บรักษาข้อมูลต่อไป เราจะ:
|
||||
- ลบข้อมูลจากระบบอิเล็กทรอนิกส์
|
||||
- ทำลายเอกสารที่เป็นกระดาษ
|
||||
- ทำให้ข้อมูลไม่สามารถระบุตัวตนได้
|
||||
|
||||
## 7. สิทธิของท่าน
|
||||
|
||||
ภายใต้ PDPA ท่านมีสิทธิดังต่อไปนี้เกี่ยวกับข้อมูลส่วนบุคคลของท่าน:
|
||||
|
||||
### 7.1 สิทธิในการเข้าถึง (Right to Access)
|
||||
|
||||
ท่านมีสิทธิขอเข้าถึงข้อมูลส่วนบุคคลที่ท่านเป็นเจ้าของ:
|
||||
- ขอสำเนาข้อมูลส่วนบุคคล
|
||||
- ทราบวัตถุประสงค์ของการประมวลผล
|
||||
- ทราบแหล่งที่มาของข้อมูล
|
||||
|
||||
### 7.2 สิทธิในการแก้ไข (Right to Rectification)
|
||||
|
||||
ท่านมีสิทธิขอให้แก้ไขข้อมูลส่วนบุคคลที่ไม่ถูกต้อง:
|
||||
- แก้ไขข้อมูลการติดต่อ
|
||||
- อัปเดตข้อมูลบัญชี
|
||||
- แก้ไขข้อมูลอื่นๆ
|
||||
|
||||
### 7.3 สิทธิในการลบ (Right to Erasure)
|
||||
|
||||
ท่านมีสิทธิขอให้ลบข้อมูลส่วนบุคคลในกรณีต่อไปนี้:
|
||||
- ข้อมูลไม่จำเป็นต้องใช้แล้ว
|
||||
- ท่านถอนความยินยอม
|
||||
- ข้อมูลถูกประมวลผลโดยมิชอบด้วยกฎหมาย
|
||||
|
||||
### 7.4 สิทธิในการจำกัดการประมวลผล (Right to Restriction)
|
||||
|
||||
ท่านมีสิทธิขอให้จำกัดการประมวลผลข้อมูล:
|
||||
- ขณะตรวจสอบความถูกต้องของข้อมูล
|
||||
- เมื่อการประมวลผลเป็นการมิชอบด้วยกฎหมาย
|
||||
- เมื่อเราไม่จำเป็นต้องใช้ข้อมูลแล้ว แต่ท่านต้องการให้เก็บไว้เพื่อการใช้สิทธิทางกฎหมาย
|
||||
|
||||
### 7.5 สิทธิในการคัดค้าน (Right to Object)
|
||||
|
||||
ท่านมีสิทธิคัดค้านการประมวลผลข้อมูล:
|
||||
- การประมวลผลเพื่อประโยชน์โดยชอบด้วยกฎหมาย
|
||||
- การประมวลผลเพื่อการตลาดโดยตรง
|
||||
- การประมวลผลเพื่อวัตถุประสงค์ทางสถิติ
|
||||
|
||||
### 7.6 สิทธิในการโอนย้ายข้อมูล (Right to Data Portability)
|
||||
|
||||
ท่านมีสิทธิขอให้โอนข้อมูลส่วนบุคคลไปยังผู้ควบคุมข้อมูลอื่น:
|
||||
- ข้อมูลที่ท่านให้ไว้
|
||||
- ข้อมูลที่ประมวลผลโดยอัตโนมัติ
|
||||
- เมื่อการประมวลผลอาศัยความยินยอมหรือสัญญา
|
||||
|
||||
### 7.7 สิทธิในการถอนความยินยอม (Right to Withdraw Consent)
|
||||
|
||||
หากการประมวลผลอาศัยความยินยอม ท่านมีสิทธิถอนความยินยอมเมื่อใดก็ได้:
|
||||
- การถอนความยินยอมไม่กระทบต่อการประมวลผลก่อนหน้า
|
||||
- ท่านอาจไม่สามารถใช้บริการบางอย่างได้หลังถอนความยินยอม
|
||||
|
||||
### 7.8 สิทธิในการร้องเรียน (Right to Complaint)
|
||||
|
||||
หากท่านเชื่อว่าข้อมูลของท่านถูกประมวลผลโดยมิชอบด้วยกฎหมาย ท่านมีสิทธิร้องเรียนต่อ:
|
||||
- สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)
|
||||
- เว็บไซต์: www.pdpc.or.th
|
||||
- โทรศัพท์: 0-2141-6900
|
||||
|
||||
## 8. Cookie และเทคโนโลยีการติดตาม
|
||||
|
||||
### 8.1 Cookie คืออะไร
|
||||
|
||||
Cookie เป็นไฟล์ข้อความขนาดเล็กที่เว็บไซต์บันทึกลงในอุปกรณ์ของท่านเมื่อท่านเข้าชมเว็บไซต์
|
||||
|
||||
### 8.2 ประเภทของ Cookie ที่เราใช้
|
||||
|
||||
**Cookie ที่จำเป็น (Necessary Cookies):**
|
||||
- จำเป็นสำหรับการทำงานของเว็บไซต์
|
||||
- ไม่สามารถปิดใช้งานได้
|
||||
- ไม่เก็บข้อมูลส่วนบุคคล
|
||||
|
||||
**Cookie เพื่อประสิทธิภาพ (Performance Cookies):**
|
||||
- รวบรวมข้อมูลเกี่ยวกับวิธีการใช้เว็บไซต์
|
||||
- ช่วยให้เราปรับปรุงเว็บไซต์
|
||||
- ข้อมูลเป็นแบบรวมกลุ่มและไม่ระบุตัวตน
|
||||
|
||||
**Cookie เพื่อการทำงาน (Functional Cookies):**
|
||||
- จดจำการตั้งค่าของท่าน
|
||||
- ให้องค์ประกอบที่เป็นส่วนตัวมากขึ้น
|
||||
|
||||
**Cookie เพื่อการตลาด (Marketing Cookies):**
|
||||
- ติดตามกิจกรรมการท่องเว็บ
|
||||
- ใช้เพื่อแสดงโฆษณาที่เกี่ยวข้อง
|
||||
- แบ่งปันข้อมูลกับบุคคลที่สาม
|
||||
|
||||
### 8.3 การจัดการ Cookie
|
||||
|
||||
ท่านสามารถจัดการ Cookie ได้โดย:
|
||||
- **การตั้งค่าเบราว์เซอร์:** ปิดการใช้งาน Cookie ทั้งหมดหรือบางประเภท
|
||||
- **การตั้งค่า Cookie ของเรา:** เลือกประเภท Cookie ที่ท่านยินยอม
|
||||
- **เครื่องมือของบุคคลที่สาม:** เช่น Google Analytics Opt-out
|
||||
|
||||
### 8.4 ผลกระทบจากการปิด Cookie
|
||||
|
||||
หากท่านปิดการใช้งาน Cookie:
|
||||
- ฟีเจอร์บางอย่างของเว็บไซต์อาจไม่ทำงาน
|
||||
- ท่านอาจไม่สามารถเข้าสู่ระบบได้
|
||||
- การตั้งค่าของท่านอาจไม่ถูกจดจำ
|
||||
|
||||
## 9. ความปลอดภัยของข้อมูล
|
||||
|
||||
เราใช้มาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อคุ้มครองข้อมูลส่วนบุคคลของท่าน:
|
||||
|
||||
### 9.1 มาตรการทางเทคนิค
|
||||
|
||||
- **การเข้ารหัส:** ข้อมูลถูกเข้ารหัสระหว่างการส่ง (SSL/TLS)
|
||||
- **การควบคุมการเข้าถึง:** จำกัดการเข้าถึงข้อมูลเฉพาะผู้ที่จำเป็น
|
||||
- **Firewall:** ป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต
|
||||
- **การตรวจจับการบุกรุก:** ตรวจสอบกิจกรรมที่ผิดปกติ
|
||||
|
||||
### 9.2 มาตรการทางองค์กร
|
||||
|
||||
- **นโยบายความปลอดภัย:** นโยบายและขั้นตอนที่ชัดเจน
|
||||
- **การฝึกอบรม:** พนักงานได้รับการฝึกอบรมเรื่องความปลอดภัยของข้อมูล
|
||||
- **การตรวจสอบ:** ทบทวนและปรับปรุงมาตรการอย่างสม่ำเสมอ
|
||||
- **การจัดการผู้ให้บริการ:** ประเมินความปลอดภัยของผู้ให้บริการ
|
||||
|
||||
### 9.3 มาตรการทางกายภาพ
|
||||
|
||||
- **การควบคุมการเข้าถึง:** จำกัดการเข้าถึงศูนย์ข้อมูล
|
||||
- **การป้องกันสิ่งแวดล้อม:** ระบบป้องกันอัคคีภัยและน้ำท่วม
|
||||
- **การทำลายสื่อ:** ทำลายสื่อเก็บข้อมูลอย่างปลอดภัย
|
||||
|
||||
### 9.4 การแจ้งเหตุละเมิดข้อมูล
|
||||
|
||||
ในกรณีที่มีการละเมิดข้อมูลส่วนบุคคล เราจะ:
|
||||
- แจ้งสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคลภายใน 72 ชั่วโมง
|
||||
- แจ้งให้ท่านทราบหากมีความเสี่ยงสูงต่อสิทธิและเสรีภาพของท่าน
|
||||
- ดำเนินการเพื่อลดผลกระทบ
|
||||
|
||||
## 10. การโอนข้อมูลข้ามพรมแดน
|
||||
|
||||
เราอาจโอนข้อมูลส่วนบุคคลของท่านไปยังประเทศนอกประเทศไทย:
|
||||
|
||||
### 10.1 ประเทศปลายทาง
|
||||
|
||||
ข้อมูลอาจถูกโอนไปยัง:
|
||||
- ประเทศที่มีมาตรฐานการคุ้มครองข้อมูลที่เพียงพอ
|
||||
- ประเทศที่มีมาตรการคุ้มครองที่เหมาะสม
|
||||
- ประเทศที่กฎหมายกำหนด
|
||||
|
||||
### 10.2 มาตรการคุ้มครอง
|
||||
|
||||
การโอนข้อมูลข้ามพรมแดนอยู่ภายใต้:
|
||||
- มาตรฐานข้อบทเชิงสัญญา (Standard Contractual Clauses)
|
||||
- กฎบัตรบริษัท (Binding Corporate Rules)
|
||||
- การรับรองมาตรฐาน (Certification)
|
||||
|
||||
## 11. เด็กและเยาวชน
|
||||
|
||||
### 11.1 อายุขั้นต่ำ
|
||||
|
||||
เว็บไซต์ของเราไม่ได้ออกแบบมาสำหรับเด็กอายุต่ำกว่า 20 ปี:
|
||||
- เราไม่เก็บรวบรวมข้อมูลจากเด็กโดยรู้เท่าไม่ถึงการณ์
|
||||
- หากท่านอายุต่ำกว่า 20 ปี กรุณาอย่าให้ข้อมูลส่วนบุคคล
|
||||
|
||||
### 11.2 ความยินยอมจากผู้ปกครอง
|
||||
|
||||
หากเราทราบ bahwaเราเก็บรวบรวมข้อมูลจากเด็กอายุต่ำกว่า 20 ปี:
|
||||
- เราจะขอความยินยอมจากผู้ปกครอง
|
||||
- หากไม่ได้รับความยินยอม เราจะลบข้อมูลดังกล่าว
|
||||
|
||||
## 12. การเปลี่ยนแปลงนโยบายความเป็นส่วนตัว
|
||||
|
||||
เราอาจอัปเดตนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว:
|
||||
|
||||
### 12.1 การแจ้งการเปลี่ยนแปลง
|
||||
|
||||
เราจะแจ้งท่านเกี่ยวกับการเปลี่ยนแปลงโดย:
|
||||
- โพสต์นโยบายที่อัปเดตบนเว็บไซต์
|
||||
- ส่งอีเมลแจ้งให้ทราบ
|
||||
- แสดงประกาศบนเว็บไซต์
|
||||
|
||||
### 12.2 การยอมรับการเปลี่ยนแปลง
|
||||
|
||||
การใช้งานเว็บไซต์ของท่านหลังจากการเปลี่ยนแปลงแสดงว่าท่านยอมรับนโยบายที่อัปเดต:
|
||||
- หากท่านไม่เห็นด้วย กรุณาหยุดใช้งานเว็บไซต์
|
||||
- ท่านมีสิทธิถอนความยินยอมหรือลบบัญชี
|
||||
|
||||
## 13. การติดต่อ
|
||||
|
||||
หากท่านมีคำถามหรือข้อกังวลเกี่ยวกับนโยบายความเป็นส่วนตัว:
|
||||
|
||||
### 13.1 เจ้าหน้าที่คุ้มครองข้อมูลส่วนบุคคล (DPO)
|
||||
|
||||
**ชื่อ:** [DPO_NAME]
|
||||
**อีเมล:** [DPO_EMAIL]
|
||||
**โทรศัพท์:** [DPO_PHONE]
|
||||
**ที่อยู่:** [COMPANY_ADDRESS]
|
||||
|
||||
### 13.2 ช่องทางการติดต่ออื่นๆ
|
||||
|
||||
**แบบฟอร์มติดต่อ:** [CONTACT_FORM_URL]
|
||||
**อีเมล:** [CONTACT_EMAIL]
|
||||
**โทรศัพท์:** [CONTACT_PHONE]
|
||||
**ที่อยู่:** [COMPANY_ADDRESS]
|
||||
|
||||
### 13.3 หน่วยงานกำกับดูแล
|
||||
|
||||
หากท่านไม่พอใจกับการตอบสนองของเรา ท่านสามารถติดต่อ:
|
||||
|
||||
**สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)**
|
||||
ที่อยู่: 120 ถนนแจ้งวัฒนะ แขวงทุ่งสองห้อง เขตหลักสี่ กรุงเทพมหานคร 10210
|
||||
โทรศัพท์: 0-2141-6900
|
||||
อีเมล: ocppd@pdpc.or.th
|
||||
เว็บไซต์: www.pdpc.or.th
|
||||
|
||||
## 14. คำจำกัดความ
|
||||
|
||||
**"ข้อมูลส่วนบุคคล"** หมายถึง ข้อมูลเกี่ยวกับบุคคลซึ่งทำให้สามารถระบุตัวตนของบุคคลนั้นได้ ไม่ว่าทางตรงหรือทางอ้อม
|
||||
|
||||
**"การประมวลผล"** หมายถึง การเก็บรวบรวม ใช้ เปิดเผย ส่งต่อ ปรับเปลี่ยน เปรียบเทียบ ทำลาย หรือการดำเนินการใดๆ กับข้อมูลส่วนบุคคล
|
||||
|
||||
**"ผู้ควบคุมข้อมูล"** หมายถึง บุคคลหรือนิติบุคคลซึ่งมีอำนาจหน้าที่ตัดสินใจเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคล
|
||||
|
||||
**"ผู้ประมวลผลข้อมูล"** หมายถึง บุคคลหรือนิติบุคคลซึ่งดำเนินการเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลตามคำสั่งหรือในนามของผู้ควบคุมข้อมูล
|
||||
|
||||
## 15. กฎหมายที่ใช้บังคับ
|
||||
|
||||
นโยบายความเป็นส่วนตัวนี้ตีความและบังคับใช้ตามกฎหมายแห่งราชอาณาจักรไทย:
|
||||
- พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
|
||||
- พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์
|
||||
- กฎหมายคุ้มครองผู้บริโภค
|
||||
|
||||
## 16. การแยกความมีผลบังคับใช้
|
||||
|
||||
หากข้อกำหนดใดในนโยบายนี้ถูกพิจารณาว่าเป็นโมฆะหรือบังคับไม่ได้:
|
||||
- ข้อกำหนดดังกล่าวจะถูกตัดออก
|
||||
- ข้อกำหนดที่เหลือจะยังคงมีผลบังคับใช้เต็มที่
|
||||
|
||||
---
|
||||
|
||||
**ลงชื่อ:** _________________________
|
||||
**ชื่อ:** [AUTHORIZED_NAME]
|
||||
**ตำแหน่ง:** [AUTHORIZED_TITLE]
|
||||
**วันที่:** [DATE]
|
||||
|
||||
**บริษัท [COMPANY_NAME]**
|
||||
|
||||
---
|
||||
|
||||
*เอกสารนี้เป็นเอกสารทางกฎหมาย หากท่านมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย*
|
||||
@@ -0,0 +1,416 @@
|
||||
# เงื่อนไขการให้บริการ (Terms of Service)
|
||||
|
||||
**ชื่อเว็บไซต์:** [WEBSITE_NAME]
|
||||
**เว็บไซต์:** [WEBSITE_URL]
|
||||
**มีผลบังคับใช้วันที่:** [DATE]
|
||||
**แก้ไขล่าสุด:** [DATE]
|
||||
|
||||
## 1. การยอมรับเงื่อนไข
|
||||
|
||||
### 1.1 ข้อตกลง
|
||||
|
||||
ด้วยการเข้าถึงและใช้งานเว็บไซต์ [WEBSITE_URL] ("เว็บไซต์") ของบริษัท [COMPANY_NAME] ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้ ("เงื่อนไข")
|
||||
|
||||
### 1.2 การแก้ไขเงื่อนไข
|
||||
|
||||
เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:
|
||||
- การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์
|
||||
- ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ
|
||||
- การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข
|
||||
|
||||
### 1.3 อายุขั้นต่ำ
|
||||
|
||||
ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์:
|
||||
- หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครอง
|
||||
- ผู้ปกครองต้องตกลงที่จะผูกพันด้วยเงื่อนไขนี้
|
||||
|
||||
## 2. บริการของเรา
|
||||
|
||||
### 2.1 คำอธิบายบริการ
|
||||
|
||||
เว็บไซต์ของเราให้บริการ:
|
||||
- [SERVICE_DESCRIPTION]
|
||||
- ข้อมูลและเนื้อหาเกี่ยวกับ [TOPIC]
|
||||
- เครื่องมือและฟีเจอร์ต่างๆ
|
||||
|
||||
### 2.2 การเปลี่ยนแปลงบริการ
|
||||
|
||||
เราขอสงวนสิทธิในการ:
|
||||
- เพิ่ม ลบ หรือแก้ไขฟีเจอร์ของบริการ
|
||||
- ระงับหรือยุติบริการชั่วคราวหรือถาวร
|
||||
- จำกัดการเข้าถึงบางส่วนหรือทั้งหมดของบริการ
|
||||
|
||||
### 2.3 ความพร้อมของบริการ
|
||||
|
||||
เราพยายามให้บริการอย่างต่อเนื่อง แต่:
|
||||
- เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด
|
||||
- เราไม่รับผิดชอบต่อ downtime ที่ไม่ได้ตั้งใจ
|
||||
- เราขอสงวนสิทธิในการหยุดให้บริการโดยไม่แจ้งล่วงหน้า
|
||||
|
||||
## 3. บัญชีผู้ใช้
|
||||
|
||||
### 3.1 การสร้างบัญชี
|
||||
|
||||
เพื่อใช้งานบริการบางอย่าง ท่านต้องสร้างบัญชีผู้ใช้:
|
||||
- ท่านต้องให้ข้อมูลที่ถูกต้อง ครบถ้วน และทันสมัย
|
||||
- ท่านต้องรักษารหัสผ่านให้เป็นความลับ
|
||||
- ท่านรับผิดชอบต่อทุกกิจกรรมที่เกิดขึ้นภายใต้บัญชีของท่าน
|
||||
|
||||
### 3.2 ข้อกำหนดของบัญชี
|
||||
|
||||
- หนึ่งคนต่อหนึ่งบัญชีเท่านั้น
|
||||
- ห้ามแบ่งปันบัญชีกับผู้อื่น
|
||||
- ห้ามใช้ชื่อบัญชีที่ผิดกฎหมายหรือละเมิดสิทธิผู้อื่น
|
||||
|
||||
### 3.3 การระงับบัญชี
|
||||
|
||||
เราขอสงวนสิทธิในการระงับหรือลบบัญชีของท่านหาก:
|
||||
- ท่านละเมิดเงื่อนไขนี้
|
||||
- มีการ_activity_ที่น่าสงสัยหรือเป็นอันตราย
|
||||
- มีการร้องเรียนจากผู้ใช้รายอื่น
|
||||
- ตามข้อกำหนดของกฎหมาย
|
||||
|
||||
### 3.4 การลบบัญชี
|
||||
|
||||
ท่านสามารถลบบัญชีของท่านเมื่อใดก็ได้:
|
||||
- ติดต่อเราที่ [CONTACT_EMAIL]
|
||||
- ข้อมูลบางอย่างอาจถูกเก็บไว้ตามข้อกำหนดของกฎหมาย
|
||||
- การลบบัญชีไม่สามารถย้อนกลับได้
|
||||
|
||||
## 4. ความเป็นเจ้าของทรัพย์สินทางปัญญา
|
||||
|
||||
### 4.1 สิทธิของเรา
|
||||
|
||||
เว็บไซต์และเนื้อหาทั้งหมดเป็นทรัพย์สินของเราหรือผู้ให้ใบอนุญาต:
|
||||
- เนื้อหา ข้อความ กราฟิก โลโก้
|
||||
- ซอฟต์แวร์ โค้ด ฐานข้อมูล
|
||||
- การออกแบบ เลย์เอาต์
|
||||
|
||||
### 4.2 เครื่องหมายการค้า
|
||||
|
||||
เครื่องหมายการค้า โลโก้ และชื่อบริการเป็นเครื่องหมายการค้าของเรา:
|
||||
- ห้ามใช้โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
|
||||
- การใช้โดยไม่ได้รับอนุญาตอาจเป็นการละเมิดกฎหมาย
|
||||
|
||||
### 4.3 สิทธิของท่าน
|
||||
|
||||
ท่าน retainsสิทธิในเนื้อหาที่ท่านส่งมา:
|
||||
- ท่านยังคงเป็นเจ้าของเนื้อหาของท่าน
|
||||
- ท่านให้ใบอนุญาตแก่เราในการใช้เนื้อหานั้น
|
||||
- ท่านรับประกันว่ามีสิทธิในการให้ใบอนุญาต
|
||||
|
||||
### 4.4 ใบอนุญาตการใช้งาน
|
||||
|
||||
ท่านได้รับใบอนุญาตที่เพิกถอนได้ ไม่เฉพาะเจาะจง ไม่สามารถโอนย้ายได้:
|
||||
- เข้าถึงและใช้งานบริการเพื่อวัตถุประสงค์ส่วนบุคคล
|
||||
- ห้ามใช้เพื่อวัตถุประสงค์เชิงพาณิชย์โดยไม่ได้รับอนุญาต
|
||||
- ห้ามดัดแปลง แก้ไข หรือสร้างงานดัดแปลง
|
||||
|
||||
## 5. ข้อห้ามในการใช้งาน
|
||||
|
||||
### 5.1 กิจกรรมที่ต้องห้าม
|
||||
|
||||
ท่านตกลงที่จะไม่:
|
||||
|
||||
**กิจกรรมที่ผิดกฎหมาย:**
|
||||
- ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย
|
||||
- ละเมิดสิทธิทางปัญญาของผู้อื่น
|
||||
- ละเมิดความเป็นส่วนตัวของผู้อื่น
|
||||
- ส่งเนื้อหาที่ผิดกฎหมายหรือเป็นอันตราย
|
||||
|
||||
**กิจกรรมที่เป็นอันตราย:**
|
||||
- เผยแพร่ไวรัส มัลแวร์ หรือโค้ดที่เป็นอันตราย
|
||||
- พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต
|
||||
- รบกวนหรือขัดขวางการทำงานของเว็บไซต์
|
||||
- ดำเนินการ reverse engineering ของซอฟต์แวร์
|
||||
|
||||
**กิจกรรมที่ละเมิดสิทธิ:**
|
||||
- ละเมิดลิขสิทธิ์ เครื่องหมายการค้า หรือสิทธิอื่นๆ
|
||||
- ใช้ข้อมูลส่วนบุคคลของผู้อื่นโดยไม่ได้รับอนุญาต
|
||||
- ส่งสแปมหรือข้อความเชิงพาณิชย์ที่ไม่พึงประสงค์
|
||||
- ปลอมแปลงตัวตนหรือแหล่งที่มาของเนื้อหา
|
||||
|
||||
**กิจกรรมที่ผิดจริยธรรม:**
|
||||
- ส่งเนื้อหาที่หยาบคาย อนาจาร หรือผิดศีลธรรม
|
||||
- ส่งเสริมการเลือกปฏิบัติหรือความเกลียดชัง
|
||||
- ส่งเสริมความรุนแรงหรือการทำร้ายตนเอง
|
||||
- ส่งเสริมการพนันหรือยาเสพติดที่ผิดกฎหมาย
|
||||
|
||||
### 5.2 ผลของการละเมิด
|
||||
|
||||
หากท่านละเมิดข้อห้าม:
|
||||
- บัญชีของท่านอาจถูกระงับหรือลบ
|
||||
- เราอาจดำเนินการทางกฎหมาย
|
||||
- เราอาจแจ้งหน่วยงานบังคับใช้กฎหมาย
|
||||
|
||||
## 6. เนื้อหาที่ผู้ใช้ส่ง
|
||||
|
||||
### 6.1 คำจำกัดความ
|
||||
|
||||
"เนื้อหาที่ผู้ใช้ส่ง" หมายถึงเนื้อหาใดๆ ที่ท่านส่ง โพสต์ หรือแสดงบนเว็บไซต์:
|
||||
- ความคิดเห็น รีวิว
|
||||
- รูปภาพ วิดีโอ
|
||||
- ข้อความ ไฟล์
|
||||
|
||||
### 6.2 ใบอนุญาต
|
||||
|
||||
โดยส่งเนื้อหา ท่านให้ใบอนุญาตแก่เรา:
|
||||
- ใบอนุญาตทั่วโลก ไม่เฉพาะเจาะจง ย่อยได้
|
||||
- สิทธิในการใช้ ทำซ้ำ ดัดแปลง เผยแพร่
|
||||
- สิทธิในการแสดงเนื้อหา
|
||||
- ใบอนุญาตนี้ไม่มีค่าตอบแทน
|
||||
|
||||
### 6.3 ความรับผิดชอบของท่าน
|
||||
|
||||
ท่านรับผิดชอบเนื้อหาที่ท่านส่ง:
|
||||
- ท่านรับประกันว่ามีสิทธิในการส่งเนื้อหา
|
||||
- เนื้อหาไม่ละเมิดสิทธิของผู้อื่น
|
||||
- เนื้อหาไม่ผิดกฎหมายหรือเป็นอันตราย
|
||||
|
||||
### 6.4 การตรวจสอบเนื้อหา
|
||||
|
||||
เราขอสงวนสิทธิในการ:
|
||||
- ตรวจสอบเนื้อหาที่ส่งมา
|
||||
- ลบเนื้อหาที่ละเมิดเงื่อนไข
|
||||
- รายงานกิจกรรมที่ผิดกฎหมายต่อเจ้าหน้าที่
|
||||
|
||||
### 6.5 การตอบสนองต่อการละเมิด
|
||||
|
||||
หากท่านเชื่อว่ามีการละเมิดลิขสิทธิ์:
|
||||
- แจ้งเราที่ [CONTACT_EMAIL]
|
||||
- ให้ข้อมูลการละเมิดโดยละเอียด
|
||||
- เราจะดำเนินการตาม DMCA และกฎหมายที่เกี่ยวข้อง
|
||||
|
||||
## 7. การชำระเงิน
|
||||
|
||||
### 7.1 ราคาและค่าธรรมเนียม
|
||||
|
||||
- ราคาทั้งหมดแสดงเป็นเงินบาทไทย (THB)
|
||||
- ราคานี้รวม/ไม่รวมภาษีมูลค่าเพิ่ม
|
||||
- เราขอสงวนสิทธิในการเปลี่ยนราคาเมื่อใดก็ได้
|
||||
|
||||
### 7.2 การชำระเงิน
|
||||
|
||||
การชำระเงินต้องชำระล่วงหน้า:
|
||||
- เรายอมรับการชำระเงินผ่าน [PAYMENT_METHODS]
|
||||
- การชำระเงินจะประมวลผลโดยบุคคลที่สาม
|
||||
- ท่านต้องให้ข้อมูลการชำระเงินที่ถูกต้อง
|
||||
|
||||
### 7.3 การคืนเงิน
|
||||
|
||||
นโยบายการคืนเงิน:
|
||||
- [REFUND_POLICY_DETAILS]
|
||||
- คำขอคืนเงินต้องส่งภายใน [X] วัน
|
||||
- การคืนเงินจะประมวลผลภายใน [X] วันทำการ
|
||||
|
||||
### 7.4 การต่ออายุอัตโนมัติ
|
||||
|
||||
หากบริการมีการต่ออายุอัตโนมัติ:
|
||||
- ท่านจะได้รับแจ้งก่อนการต่ออายุ
|
||||
- ท่านสามารถยกเลิกการต่ออายุเมื่อใดก็ได้
|
||||
- การยกเลิกจะมีผลหลังระยะเวลาปัจจุบันสิ้นสุด
|
||||
|
||||
## 8. การปฏิเสธความรับผิดชอบ
|
||||
|
||||
### 8.1 "ตามที่เป็น"
|
||||
|
||||
บริการให้บริการ "ตามที่เป็น" และ "ตามที่มี":
|
||||
- เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด
|
||||
- เราไม่รับประกันว่าบริการจะตรงตามความต้องการของท่าน
|
||||
- เราไม่รับประกันความถูกต้องของข้อมูล
|
||||
|
||||
### 8.2 การปฏิเสธความรับผิดชอบ
|
||||
|
||||
ภายใต้ขอบเขตที่กฎหมายอนุญาต เราปฏิเสธความรับผิดชอบ:
|
||||
- ความเสียหายโดยตรง ทางอ้อม โดยบังเอิญ หรือเชิงลงโทษ
|
||||
- การสูญเสียข้อมูลหรือข้อมูล
|
||||
- การหยุดชะงักของธุรกิจ
|
||||
- ความเสียหายอื่นๆ
|
||||
|
||||
### 8.3 ข้อจำกัดความรับผิด
|
||||
|
||||
ความรับผิดรวมของเราจะไม่เกิน:
|
||||
- จำนวนที่ท่านจ่ายให้เราในช่วง 12 เดือนที่ผ่านมา
|
||||
- หรือ 1,000 บาท แล้วแต่จำนวนใดมากกว่า
|
||||
|
||||
### 8.4 ข้อยกเว้น
|
||||
|
||||
ข้อจำกัดบางอย่างไม่ใช้บังคับกับ:
|
||||
- การเสียชีวิตหรือการบาดเจ็บส่วนบุคคล
|
||||
- การฉ้อโกงหรือการแสดงโดยประมาทเลินเล่ออย่างร้ายแรง
|
||||
- หน้าที่ที่ไม่สามารถถูกจำกัดตามกฎหมาย
|
||||
|
||||
## 9. การชดเชย
|
||||
|
||||
### 9.1 ข้อตกลงการชดเชย
|
||||
|
||||
ท่านตกลงที่จะชดใช้และปกป้องเราจาก:
|
||||
- การเรียกร้อง ค่าเสียหาย ค่าใช้จ่าย
|
||||
- ที่เกิดจากการใช้งานเว็บไซต์ของท่าน
|
||||
- ที่เกิดจากการละเมิดเงื่อนไขนี้
|
||||
- ที่เกิดจากการละเมิดสิทธิของผู้อื่น
|
||||
|
||||
### 9.2 ขั้นตอนการชดเชย
|
||||
|
||||
เมื่อได้รับการเรียกร้อง:
|
||||
- เราจะแจ้งท่านเป็นลายลักษณ์อักษร
|
||||
- ท่านจะมีสิทธิในการป้องกัน
|
||||
- เราจะร่วมมือในการป้องกัน
|
||||
|
||||
## 10. ความเป็นส่วนตัว
|
||||
|
||||
### 10.1 นโยบายความเป็นส่วนตัว
|
||||
|
||||
การใช้ข้อมูลส่วนบุคคลอยู่ภายใต้นโยบายความเป็นส่วนตัว:
|
||||
- อ่านนโยบายความเป็นส่วนตัวของเรา
|
||||
- นโยบายความเป็นส่วนตัวเป็นส่วนหนึ่งของเงื่อนไขนี้
|
||||
- ในกรณีที่มีความขัดแย้ง เงื่อนไขนี้จะมีผลบังคับใช้
|
||||
|
||||
### 10.2 Cookie
|
||||
|
||||
เราใช้ Cookie และเทคโนโลยีการติดตาม:
|
||||
- อ่านนโยบาย Cookie ของเรา
|
||||
- ท่านสามารถจัดการการตั้งค่า Cookie ได้
|
||||
- การปิดการใช้งาน Cookie อาจจำกัดการทำงานของเว็บไซต์
|
||||
|
||||
## 11. ลิงก์ไปยังเว็บไซต์ภายนอก
|
||||
|
||||
### 11.1 ลิงก์ของบุคคลที่สาม
|
||||
|
||||
เว็บไซต์อาจมีลิงก์ไปยังเว็บไซต์ของบุคคลที่สาม:
|
||||
- เราไม่ควบคุมเว็บไซต์เหล่านั้น
|
||||
- เราไม่รับผิดชอบเนื้อหาหรือการปฏิบัติของเว็บไซต์เหล่านั้น
|
||||
- การเข้าถึงเว็บไซต์เหล่านั้นเป็นความเสี่ยงของท่าน
|
||||
|
||||
### 11.2 การโฆษณา
|
||||
|
||||
เว็บไซต์อาจมีโฆษณาของบุคคลที่สาม:
|
||||
- เราไม่รับผิดชอบผลิตภัณฑ์หรือบริการที่โฆษณา
|
||||
- ธุรกรรมกับเจ้าของโฆษณาอยู่ระหว่างท่านและเจ้าของโฆษณา
|
||||
- เราไม่ตรวจสอบหรือรับรองการโฆษณา
|
||||
|
||||
## 12. การยุติบริการ
|
||||
|
||||
### 12.1 การยุติโดยท่าน
|
||||
|
||||
ท่านสามารถยุติการใช้งานเว็บไซต์เมื่อใดก็ได้:
|
||||
- หยุดใช้งานเว็บไซต์
|
||||
- ลบบัญชีของท่าน
|
||||
- ส่งคำขอเป็นลายลักษณ์อักษร
|
||||
|
||||
### 12.2 การยุติโดยเรา
|
||||
|
||||
เราขอสงวนสิทธิในการยุติการเข้าถึงของท่าน:
|
||||
- โดยไม่แจ้งล่วงหน้า
|
||||
- ด้วยเหตุผลใดๆ หรือไม่มีเหตุผล
|
||||
- ทันทีที่มีผล
|
||||
|
||||
### 12.3 ผลของการยุติ
|
||||
|
||||
เมื่อการเข้าถึงถูกยุติ:
|
||||
- สิทธิ์ในการใช้งานเว็บไซต์สิ้นสุดลง
|
||||
- ท่านต้องหยุดใช้งานเว็บไซต์ทันที
|
||||
- ข้อกำหนดบางประการยังคงมีผล (ดูข้อ 15)
|
||||
|
||||
## 13. กฎหมายที่ใช้บังคับ
|
||||
|
||||
### 13.1 กฎหมายไทย
|
||||
|
||||
เงื่อนไขนี้ถูกควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย:
|
||||
- พระราชบัญญัติคุ้มครองผู้บริโภค
|
||||
- พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์
|
||||
- พระราชบัญญัติลิขสิทธิ์
|
||||
- กฎหมายที่เกี่ยวข้องอื่นๆ
|
||||
|
||||
### 13.2 เขตอำนาจศาล
|
||||
|
||||
ข้อพิพาทใดๆ อยู่ภายใต้เขตอำนาจศาลของ:
|
||||
- ศาลไทย
|
||||
- กรุงเทพมหานคร
|
||||
- หรือศาลที่มีเขตอำนาจ
|
||||
|
||||
### 13.3 การระงับข้อพิพาท
|
||||
|
||||
ก่อนดำเนินการทางกฎหมาย:
|
||||
- พยายามเจรจาเพื่อระงับข้อพิพาท
|
||||
- ใช้เวลา 30 วันในการเจรจา
|
||||
- หากไม่สำเร็จ จึงดำเนินการทางกฎหมาย
|
||||
|
||||
## 14. ข้อกำหนดทั่วไป
|
||||
|
||||
### 14.1 การสละสิทธิ
|
||||
|
||||
การไม่บังคับใช้สิทธิใดๆ ไม่ถือเป็นการสละสิทธิ:
|
||||
- การสละสิทธิต้องเป็นลายลักษณ์อักษร
|
||||
- การสละสิทธิครั้งหนึ่งไม่ถือเป็นการสละสิทธิในอนาคต
|
||||
|
||||
### 14.2 การโอนสิทธิ
|
||||
|
||||
ท่านไม่สามารถโอนสิทธิหรือหน้าที่ภายใต้เงื่อนไขนี้:
|
||||
- การโอนที่พยายามทำจะถือเป็นโมฆะ
|
||||
- เราสามารถโอนสิทธิของเราได้โดยไม่ต้องแจ้งให้ท่านทราบ
|
||||
|
||||
### 14.3 ความสัมพันธ์ระหว่างคู่สัญญา
|
||||
|
||||
เงื่อนไขนี้ไม่สร้างความสัมพันธ์:
|
||||
- ไม่มีความสัมพันธ์การจ้างงาน
|
||||
- ไม่มีความสัมพันธ์หุ้นส่วน
|
||||
- ไม่มีความสัมพันธ์ร่วมทุน
|
||||
|
||||
### 14.4 การแยกความมีผลบังคับใช้
|
||||
|
||||
หากข้อกำหนดใดถูกพิจารณาว่าเป็นโมฆะ:
|
||||
- ข้อกำหนดนั้นจะถูกตัดออก
|
||||
- ข้อกำหนดที่เหลือจะยังคงมีผลบังคับใช้เต็มที่
|
||||
|
||||
### 14.5 ข้อกำหนดทั้งหมด
|
||||
|
||||
เงื่อนไขนี้เป็นข้อตกลงทั้งหมดระหว่างท่านและเรา:
|
||||
- แทนที่ข้อตกลงหรือความเข้าใจก่อนหน้าทั้งหมด
|
||||
- ไม่ว่าจะด้วยลายลักษณ์อักษรหรือด้วยวาจา
|
||||
- ไม่มีการแก้ไขด้วยวาจามีผลบังคับใช้
|
||||
|
||||
## 15. ข้อกำหนดที่ยังคงมีผล
|
||||
|
||||
ข้อกำหนดดังต่อไปนี้จะยังคงมีผลหลังการยุติ:
|
||||
- ความเป็นเจ้าของทรัพย์สินทางปัญญา
|
||||
- การปฏิเสธความรับผิดชอบ
|
||||
- ข้อจำกัดความรับผิด
|
||||
- การชดเชย
|
||||
- กฎหมายที่ใช้บังคับ
|
||||
|
||||
## 16. การติดต่อ
|
||||
|
||||
หากท่านมีคำถามเกี่ยวกับเงื่อนไขนี้:
|
||||
|
||||
**อีเมล:** [CONTACT_EMAIL]
|
||||
**โทรศัพท์:** [CONTACT_PHONE]
|
||||
**ที่อยู่:** [COMPANY_ADDRESS]
|
||||
**แบบฟอร์มติดต่อ:** [CONTACT_FORM_URL]
|
||||
|
||||
---
|
||||
|
||||
## ภาคผนวก ก: คำจำกัดความ
|
||||
|
||||
**"บัญชี"** หมายถึง บัญชีผู้ใช้ที่ท่านสร้างบนเว็บไซต์
|
||||
|
||||
**"เนื้อหา"** หมายถึง ข้อมูล ข้อความ กราฟิก ภาพ วิดีโอ ซอฟต์แวร์ หรือวัสดุอื่นๆ
|
||||
|
||||
**"เว็บไซต์"** หมายถึง เว็บไซต์ [WEBSITE_URL] และบริการที่เกี่ยวข้องทั้งหมด
|
||||
|
||||
**"เรา" "ของเรา"** หมายถึง บริษัท [COMPANY_NAME]
|
||||
|
||||
**"ท่าน" "ผู้ใช้"** หมายถึง บุคคลหรือนิติบุคคลที่เข้าถึงหรือใช้งานเว็บไซต์
|
||||
|
||||
---
|
||||
|
||||
**ลงชื่อ:** _________________________
|
||||
**ชื่อ:** [AUTHORIZED_NAME]
|
||||
**ตำแหน่ง:** [AUTHORIZED_TITLE]
|
||||
**วันที่:** [DATE]
|
||||
|
||||
**บริษัท [COMPANY_NAME]**
|
||||
|
||||
---
|
||||
|
||||
*เอกสารนี้เป็นเอกสารทางกฎหมาย หากท่านมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย*
|
||||
Reference in New Issue
Block a user