Hugging Face's logo

Spaces:
kritsanan311
/
wat
Running

App Files Community
kritsanan311 commited on
Commit
491c64d
·
verified ·
1 Parent(s): 7acb670

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +833 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wat
3
- emoji: 🚀
4
  colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wat
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,833 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="th">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>วัดวังสามหมอ | Wang Sam Mo Temple</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ :root {
12
+ --gold: #D4AF37;
13
+ --deep-gold: #B8860B;
14
+ --earth-brown: #8B4513;
15
+ --cream: #FFF8E7;
16
+ --light-cream: #FFFDF8;
17
+ --green: #228B22;
18
+ --text: #4A2C12;
19
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ body {
23
+ font-family: 'Sarabun', 'TH Sarabun New', sans-serif;
24
+ background-color: var(--cream);
25
+ color: var(--text);
26
+ line-height: 1.8;
27
+ }
28
+
29
+ .gold-bg {
30
+ background-color: var(--gold);
31
+ }
32
+
33
+ .gold-text {
34
+ color: var(--gold);
35
+ }
36
+
37
+ .border-gold {
38
+ border-color: var(--gold);
39
+ }
40
+
41
+ .phu-thai-pattern {
42
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%23D4AF37" stroke-width="2"/><path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="%23D4AF37" stroke-width="1"/><circle cx="50" cy="50" r="15" fill="none" stroke="%23D4AF37" stroke-width="1"/></svg>');
43
+ background-size: 100px;
44
+ opacity: 0.1;
45
+ }
46
+
47
+ .temple-header {
48
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
49
+ url('https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg');
50
+ background-size: cover;
51
+ background-position: center;
52
+ background-attachment: fixed;
53
+ }
54
+
55
+ .carousel-slide {
56
+ transition: opacity 1s ease-in-out;
57
+ }
58
+
59
+ .timeline::before {
60
+ content: '';
61
+ position: absolute;
62
+ top: 0;
63
+ bottom: 0;
64
+ left: 50%;
65
+ width: 4px;
66
+ background: var(--gold);
67
+ transform: translateX(-50%);
68
+ }
69
+
70
+ @media (max-width: 768px) {
71
+ .timeline::before {
72
+ left: 31px;
73
+ }
74
+ }
75
+
76
+ .dhamma-card {
77
+ transition: transform 0.3s ease;
78
+ }
79
+
80
+ .dhamma-card:hover {
81
+ transform: translateY(-5px);
82
+ }
83
+
84
+ .monk-robes {
85
+ background: linear-gradient(to right, #F5DEB3, #D2B48C, #A0522D);
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="relative">
90
+ <!-- Decorative elements -->
91
+ <div class="absolute inset-0 overflow-hidden pointer-events-none">
92
+ <div class="absolute inset-0 phu-thai-pattern"></div>
93
+ </div>
94
+
95
+ <!-- Header -->
96
+ <header class="temple-header text-white py-6 shadow-lg">
97
+ <div class="container mx-auto px-4">
98
+ <div class="flex flex-col md:flex-row items-center justify-between">
99
+ <div class="flex items-center mb-4 md:mb-0">
100
+ <img src="https://i.postimg.cc/3Nw2TmTR/94620494-534275127260977-6366032613831868416-n.jpg"
101
+ alt="โลโก้วัดวังสามหมอ"
102
+ class="w-16 h-16 rounded-full border-2 border-gold object-cover mr-4">
103
+ <div>
104
+ <h1 class="text-2xl md:text-3xl font-bold gold-text">วัดวังสามหมอ</h1>
105
+ <p class="text-sm md:text-base opacity-80">Wang Sam Mo Temple</p>
106
+ </div>
107
+ </div>
108
+
109
+ <nav class="flex flex-wrap justify-center gap-2 md:gap-4">
110
+ <a href="#home" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">หน้าหลัก</a>
111
+ <a href="#history" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">ประวัติวัด</a>
112
+ <a href="#dhamma" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">หลักธรรม</a>
113
+ <a href="#gallery" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">แกลเลอรี่</a>
114
+ <a href="#events" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">กิจกรรม</a>
115
+ <a href="#contact" class="px-3 py-1 rounded hover:bg-gold hover:text-white transition">ติดต่อ</a>
116
+ </nav>
117
+ </div>
118
+ </div>
119
+ </header>
120
+
121
+ <!-- Main Content -->
122
+ <main class="container mx-auto px-4 py-8 relative z-10">
123
+ <!-- Hero Section -->
124
+ <section id="home" class="mb-16">
125
+ <div class="relative h-96 overflow-hidden rounded-lg shadow-xl">
126
+ <!-- Carousel -->
127
+ <div class="relative h-full" id="temple-carousel">
128
+ <div class="carousel-slide absolute inset-0 bg-cover bg-center flex items-end opacity-0"
129
+ style="background-image: url('https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg')">
130
+ <div class="bg-black bg-opacity-50 text-white p-6 w-full">
131
+ <h2 class="text-2xl font-bold gold-text">อุโบสถเก่าแก่ 200 ปี</h2>
132
+ <p>สถาปัตยกรรมแบบล้านช้างผสมภูไท</p>
133
+ </div>
134
+ </div>
135
+ <div class="carousel-slide absolute inset-0 bg-cover bg-center flex items-end opacity-0"
136
+ style="background-image: url('https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg')">
137
+ <div class="bg-black bg-opacity-50 text-white p-6 w-full">
138
+ <h2 class="text-2xl font-bold gold-text">พระธาตุเจดีย์ทรงล้านช้าง</h2>
139
+ <p>ศูนย์รวมจิตใจชาววังสามหมอ</p>
140
+ </div>
141
+ </div>
142
+ <div class="carousel-slide absolute inset-0 bg-cover bg-center flex items-end opacity-0"
143
+ style="background-image: url('https://i.postimg.cc/7ZSGjm29/95260264-534275163927640-9008067950531313664-n.jpg')">
144
+ <div class="bg-black bg-opacity-50 text-white p-6 w-full">
145
+ <h2 class="text-2xl font-bold gold-text">งานบุญประจำปี</h2>
146
+ <p>ประเพณีที่สืบทอดกันมายาวนาน</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Carousel Controls -->
152
+ <button id="prev-btn" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-gold transition">
153
+ <i class="fas fa-chevron-left"></i>
154
+ </button>
155
+ <button id="next-btn" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-gold transition">
156
+ <i class="fas fa-chevron-right"></i>
157
+ </button>
158
+
159
+ <!-- Indicators -->
160
+ <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
161
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 indicator-btn"></button>
162
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 indicator-btn"></button>
163
+ <button class="w-3 h-3 rounded-full bg-white bg-opacity-50 indicator-btn"></button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Daily Dhamma -->
168
+ <div class="mt-8 bg-white rounded-lg shadow-md p-6 max-w-3xl mx-auto border-l-4 border-gold">
169
+ <h3 class="text-xl font-bold mb-4 gold-text flex items-center">
170
+ <i class="fas fa-quote-left mr-2"></i> คำสอนประจำวัน
171
+ </h3>
172
+ <div id="daily-dhamma" class="text-lg italic mb-4">
173
+ <!-- Filled by JavaScript -->
174
+ </div>
175
+ <button onclick="newDhammaQuote()" class="bg-gold hover:bg-deep-gold text-white px-4 py-2 rounded transition">
176
+ <i class="fas fa-sync-alt mr-2"></i> คำสอนใหม่
177
+ </button>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- History Section -->
182
+ <section id="history" class="mb-16 py-8">
183
+ <div class="text-center mb-12">
184
+ <h2 class="text-3xl font-bold gold-text mb-2">ประวัติวัดวังสามหมอ</h2>
185
+ <div class="w-24 h-1 bg-gold mx-auto"></div>
186
+ </div>
187
+
188
+ <div class="relative timeline pl-8 md:pl-0">
189
+ <!-- Timeline Item 1 -->
190
+ <div class="relative mb-12">
191
+ <div class="flex flex-col md:flex-row">
192
+ <div class="flex justify-center md:justify-end md:w-1/2 md:pr-8">
193
+ <div class="relative">
194
+ <div class="w-16 h-16 rounded-full bg-gold flex items-center justify-center text-white font-bold absolute -left-8 md:left-auto md:-right-4 top-0 z-10 shadow-md">
195
+ 2365
196
+ </div>
197
+ <img src="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg"
198
+ alt="ประวัติวัด"
199
+ class="w-full h-64 object-cover rounded-lg shadow-md">
200
+ </div>
201
+ </div>
202
+ <div class="md:w-1/2 md:pl-8 mt-8 md:mt-0">
203
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-gold">
204
+ <h3 class="text-xl font-bold gold-text mb-2">การก่อตั้งวัด</h3>
205
+ <p class="mb-4">วัดวังสามหมอก่อตั้งโดยชาวภูไทที่อพยพมาจากฝั่งซ้ายแม่น้ำโขง ในปี พ.ศ. 2365 โดยมีพระอาจารย์สีห์เป็นประธานสงฆ์องค์แรก</p>
206
+ <div class="flex space-x-2">
207
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#ประวัติศาสตร์</span>
208
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#ชาติพันธุ์ภูไท</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Timeline Item 2 -->
216
+ <div class="relative mb-12">
217
+ <div class="flex flex-col md:flex-row">
218
+ <div class="flex justify-center md:justify-end md:w-1/2 md:pr-8 order-2 md:order-1">
219
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-gold">
220
+ <h3 class="text-xl font-bold gold-text mb-2">การบูรณะครั้งใหญ่</h3>
221
+ <p class="mb-4">ในปี พ.ศ. 2505 วัดได้รับการบูรณะครั้งใหญ่โดยช่างฝีมือท้องถิ่น ใช้เทคนิคดั้งเดิมของช่างภูไทในการตกแต่งลวดลายไม้และปูนปั้น</p>
222
+ <div class="flex space-x-2">
223
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#สถาปัตยกรรม</span>
224
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#ศิลปะภูไท</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <div class="md:w-1/2 md:pl-8 mt-8 md:mt-0 order-1 md:order-2">
229
+ <div class="relative">
230
+ <div class="w-16 h-16 rounded-full bg-gold flex items-center justify-center text-white font-bold absolute -left-8 md:left-auto md:-right-4 top-0 z-10 shadow-md">
231
+ 2505
232
+ </div>
233
+ <img src="https://i.postimg.cc/fTGSH6Jk/473008924-1514615032560310-3261655751430399231-n.jpg"
234
+ alt="บูรณะวัด"
235
+ class="w-full h-64 object-cover rounded-lg shadow-md">
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Timeline Item 3 -->
242
+ <div class="relative">
243
+ <div class="flex flex-col md:flex-row">
244
+ <div class="flex justify-center md:justify-end md:w-1/2 md:pr-8">
245
+ <div class="relative">
246
+ <div class="w-16 h-16 rounded-full bg-gold flex items-center justify-center text-white font-bold absolute -left-8 md:left-auto md:-right-4 top-0 z-10 shadow-md">
247
+ 2555
248
+ </div>
249
+ <img src="https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg"
250
+ alt="พระธาตุ"
251
+ class="w-full h-64 object-cover rounded-lg shadow-md">
252
+ </div>
253
+ </div>
254
+ <div class="md:w-1/2 md:pl-8 mt-8 md:mt-0">
255
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-gold">
256
+ <h3 class="text-xl font-bold gold-text mb-2">พระธาตุเจดีย์ใหม่</h3>
257
+ <p class="mb-4">สร้างพระธาตุเจดีย์ทรงล้านช้างเพื่อเป็นศูนย์กลางจิตใจของชุมชน โดยจำลองแบบจากพระธาตุหลวง ประเทศลาว แต่ปรับให้เข้ากับศิลปะภูไท</p>
258
+ <div class="flex space-x-2">
259
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#พระธาตุ</span>
260
+ <span class="bg-cream px-3 py-1 rounded-full text-sm">#ล้านช้าง</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Dhamma Section -->
270
+ <section id="dhamma" class="mb-16 py-8 bg-white rounded-lg shadow-sm">
271
+ <div class="container mx-auto px-4">
272
+ <div class="text-center mb-12">
273
+ <h2 class="text-3xl font-bold gold-text mb-2">หลักธรรมคำสอน</h2>
274
+ <div class="w-24 h-1 bg-gold mx-auto"></div>
275
+ </div>
276
+
277
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
278
+ <!-- Dhamma Card 1 -->
279
+ <div class="dhamma-card bg-light-cream rounded-lg shadow-md overflow-hidden border border-gold border-opacity-30">
280
+ <div class="monk-robes h-2"></div>
281
+ <div class="p-6">
282
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mb-4 mx-auto">
283
+ <i class="fas fa-heart text-xl"></i>
284
+ </div>
285
+ <h3 class="text-xl font-bold text-center gold-text mb-3">เมตตาธรรม</h3>
286
+ <p class="text-center mb-4">การแผ่เมตตาเป็นพื้นฐานของความสุขทั้งแก่ตนเองและผู้อื่น</p>
287
+ <button class="w-full bg-gold bg-opacity-10 hover:bg-opacity-20 text-gold py-2 rounded transition flex items-center justify-center">
288
+ ศึกษาต่อ <i class="fas fa-arrow-right ml-2"></i>
289
+ </button>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Dhamma Card 2 -->
294
+ <div class="dhamma-card bg-light-cream rounded-lg shadow-md overflow-hidden border border-gold border-opacity-30">
295
+ <div class="monk-robes h-2"></div>
296
+ <div class="p-6">
297
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mb-4 mx-auto">
298
+ <i class="fas fa-brain text-xl"></i>
299
+ </div>
300
+ <h3 class="text-xl font-bold text-center gold-text mb-3">สติปัฏฐาน</h3>
301
+ <p class="text-center mb-4">การพัฒนาสติเป็นหนทางสู่ความหลุดพ้นจากทุกข์ทั้งปวง</p>
302
+ <button class="w-full bg-gold bg-opacity-10 hover:bg-opacity-20 text-gold py-2 rounded transition flex items-center justify-center">
303
+ ศึกษาต่อ <i class="fas fa-arrow-right ml-2"></i>
304
+ </button>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Dhamma Card 3 -->
309
+ <div class="dhamma-card bg-light-cream rounded-lg shadow-md overflow-hidden border border-gold border-opacity-30">
310
+ <div class="monk-robes h-2"></div>
311
+ <div class="p-6">
312
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mb-4 mx-auto">
313
+ <i class="fas fa-hands-helping text-xl"></i>
314
+ </div>
315
+ <h3 class="text-xl font-bold text-center gold-text mb-3">ทานธรรม</h3>
316
+ <p class="text-center mb-4">การให้ทานด้วยจิตใจอันบริสุทธิ์นำมาซึ่งบุญกุศลอันยิ่งใหญ่</p>
317
+ <button class="w-full bg-gold bg-opacity-10 hover:bg-opacity-20 text-gold py-2 rounded transition flex items-center justify-center">
318
+ ศึกษาต่อ <i class="fas fa-arrow-right ml-2"></i>
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Dhamma Search -->
325
+ <div class="mt-12 bg-white rounded-lg shadow-md p-6 max-w-4xl mx-auto border border-gold border-opacity-30">
326
+ <h3 class="text-xl font-bold mb-4 gold-text flex items-center">
327
+ <i class="fas fa-search mr-2"></i> ค้นหาหลักธรรม
328
+ </h3>
329
+ <div class="relative">
330
+ <input type="text" placeholder="ค้นหาคำสอน เช่น เมตตา, สติ, ทาน..."
331
+ class="w-full px-4 py-3 border border-gold rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent">
332
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gold text-white p-2 rounded-full hover:bg-deep-gold transition">
333
+ <i class="fas fa-search"></i>
334
+ </button>
335
+ </div>
336
+ <div class="mt-4 text-sm text-gray-600">
337
+ <p>ตัวอย่าง: "วิธีฝึกสติ", "ทำอย่างไรให้ใจสงบ", "ประโยชน์ของการทำบุญ"</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </section>
342
+
343
+ <!-- Gallery Section -->
344
+ <section id="gallery" class="mb-16 py-8">
345
+ <div class="text-center mb-12">
346
+ <h2 class="text-3xl font-bold gold-text mb-2">แกลเลอรี่ภาพวัด</h2>
347
+ <div class="w-24 h-1 bg-gold mx-auto"></div>
348
+ </div>
349
+
350
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
351
+ <a href="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg" class="gallery-item group">
352
+ <img src="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg"
353
+ alt="อุโบสถวัด"
354
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
355
+ </a>
356
+ <a href="https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg" class="gallery-item group">
357
+ <img src="https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg"
358
+ alt="พระธาตุเจดีย์"
359
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
360
+ </a>
361
+ <a href="https://i.postimg.cc/7ZSGjm29/95260264-534275163927640-9008067950531313664-n.jpg" class="gallery-item group">
362
+ <img src="https://i.postimg.cc/7ZSGjm29/95260264-534275163927640-9008067950531313664-n.jpg"
363
+ alt="งานบุญประจำปี"
364
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
365
+ </a>
366
+ <a href="https://i.postimg.cc/fTGSH6Jk/473008924-1514615032560310-3261655751430399231-n.jpg" class="gallery-item group">
367
+ <img src="https://i.postimg.cc/fTGSH6Jk/473008924-1514615032560310-3261655751430399231-n.jpg"
368
+ alt="พระประธาน"
369
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
370
+ </a>
371
+ <a href="https://i.postimg.cc/3Nw2TmTR/94620494-534275127260977-6366032613831868416-n.jpg" class="gallery-item group">
372
+ <img src="https://i.postimg.cc/3Nw2TmTR/94620494-534275127260977-6366032613831868416-n.jpg"
373
+ alt="วิหารวัด"
374
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
375
+ </a>
376
+ <a href="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg" class="gallery-item group">
377
+ <img src="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg"
378
+ alt="พระสงฆ์"
379
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
380
+ </a>
381
+ <a href="https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg" class="gallery-item group">
382
+ <img src="https://i.postimg.cc/652Gf96D/95249904-534275053927651-6148702063153905664-n.jpg"
383
+ alt="พุทธศาสนิกชน"
384
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
385
+ </a>
386
+ <a href="https://i.postimg.cc/7ZSGjm29/95260264-534275163927640-9008067950531313664-n.jpg" class="gallery-item group">
387
+ <img src="https://i.postimg.cc/7ZSGjm29/95260264-534275163927640-9008067950531313664-n.jpg"
388
+ alt="สวนพุทธธรรม"
389
+ class="w-full h-48 object-cover rounded-lg shadow-md group-hover:opacity-90 transition">
390
+ </a>
391
+ </div>
392
+
393
+ <div class="text-center mt-8">
394
+ <button class="bg-gold hover:bg-deep-gold text-white px-6 py-3 rounded-full shadow-lg transition flex items-center mx-auto">
395
+ <i class="fas fa-images mr-2"></i> ดูภาพทั้งหมด
396
+ </button>
397
+ </div>
398
+ </section>
399
+
400
+ <!-- Events Section -->
401
+ <section id="events" class="mb-16 py-8 bg-white rounded-lg shadow-sm">
402
+ <div class="container mx-auto px-4">
403
+ <div class="text-center mb-12">
404
+ <h2 class="text-3xl font-bold gold-text mb-2">กิจกรรมและประเพณี</h2>
405
+ <div class="w-24 h-1 bg-gold mx-auto"></div>
406
+ </div>
407
+
408
+ <div class="grid md:grid-cols-2 gap-8">
409
+ <!-- Upcoming Events -->
410
+ <div>
411
+ <h3 class="text-xl font-bold mb-4 gold-text flex items-center">
412
+ <i class="fas fa-calendar-alt mr-2"></i> กิจกรรมที่จะมาถึง
413
+ </h3>
414
+
415
+ <div class="space-y-4">
416
+ <!-- Event 1 -->
417
+ <div class="flex bg-light-cream rounded-lg shadow-sm overflow-hidden border border-gold border-opacity-30">
418
+ <div class="bg-gold text-white w-20 flex flex-col items-center justify-center p-2">
419
+ <div class="text-2xl font-bold">15</div>
420
+ <div class="text-sm">เม.ย.</div>
421
+ </div>
422
+ <div class="p-4 flex-1">
423
+ <h4 class="font-bold">วันสงกรานต์</h4>
424
+ <p class="text-sm text-gray-600">ทำบุญตักบาตร รดน้ำดำหัวผู้ใหญ่</p>
425
+ <div class="mt-2 flex justify-between items-center">
426
+ <span class="text-xs bg-gold bg-opacity-10 text-gold px-2 py-1 rounded">09:00 - 12:00</span>
427
+ <button class="text-xs bg-gold hover:bg-deep-gold text-white px-3 py-1 rounded transition">ลงทะเบียน</button>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Event 2 -->
433
+ <div class="flex bg-light-cream rounded-lg shadow-sm overflow-hidden border border-gold border-opacity-30">
434
+ <div class="bg-gold text-white w-20 flex flex-col items-center justify-center p-2">
435
+ <div class="text-2xl font-bold">22</div>
436
+ <div class="text-sm">เม.ย.</div>
437
+ </div>
438
+ <div class="p-4 flex-1">
439
+ <h4 class="font-bold">ปฏิบัติธรรมเยาวชน</h4>
440
+ <p class="text-sm text-gray-600">กิจกรรมสำหรับเยาวชนอายุ 12-18 ปี</p>
441
+ <div class="mt-2 flex justify-between items-center">
442
+ <span class="text-xs bg-gold bg-opacity-10 text-gold px-2 py-1 rounded">08:00 - 16:00</span>
443
+ <button class="text-xs bg-gold hover:bg-deep-gold text-white px-3 py-1 rounded transition">ลงทะเบียน</button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Event 3 -->
449
+ <div class="flex bg-light-cream rounded-lg shadow-sm overflow-hidden border border-gold border-opacity-30">
450
+ <div class="bg-gold text-white w-20 flex flex-col items-center justify-center p-2">
451
+ <div class="text-2xl font-bold">5</div>
452
+ <div class="text-sm">พ.ค.</div>
453
+ </div>
454
+ <div class="p-4 flex-1">
455
+ <h4 class="font-bold">วันวิสาขบูชา</h4>
456
+ <p class="text-sm text-gray-600">เวียนเทียนรอบพระธาตุเจดีย์</p>
457
+ <div class="mt-2 flex justify-between items-center">
458
+ <span class="text-xs bg-gold bg-opacity-10 text-gold px-2 py-1 rounded">18:00 - 21:00</span>
459
+ <button class="text-xs bg-gold hover:bg-deep-gold text-white px-3 py-1 rounded transition">รายละเอียด</button>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Temple Map -->
467
+ <div>
468
+ <h3 class="text-xl font-bold mb-4 gold-text flex items-center">
469
+ <i class="fas fa-map-marked-alt mr-2"></i> แผนที่วัด
470
+ </h3>
471
+
472
+ <div class="bg-gray-200 rounded-lg overflow-hidden h-96 relative">
473
+ <!-- This would be replaced with a real map in production -->
474
+ <img src="https://i.postimg.cc/9Mm7dZzp/95112883-534275217260968-286899060844003328-n.jpg"
475
+ alt="แผนที่วัด"
476
+ class="w-full h-full object-cover">
477
+ <div class="absolute inset-0 flex items-center justify-center">
478
+ <div class="bg-black bg-opacity-70 text-white p-4 rounded-lg text-center max-w-xs">
479
+ <h4 class="font-bold mb-2">แผนที่วัดวังสามหมอ</h4>
480
+ <p class="text-sm mb-3">ตำบลวังสามหมอ อำเภอวังสามหมอ จังหวัดอุดรธานี</p>
481
+ <button class="bg-gold hover:bg-deep-gold text-white px-4 py-2 rounded text-sm transition">
482
+ <i class="fas fa-directions mr-2"></i> ดูเส้นทาง
483
+ </button>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </section>
491
+
492
+ <!-- Contact & Donation Section -->
493
+ <section id="contact" class="mb-16 py-8">
494
+ <div class="container mx-auto px-4">
495
+ <div class="grid md:grid-cols-2 gap-12">
496
+ <!-- Contact Form -->
497
+ <div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-gold">
498
+ <h2 class="text-2xl font-bold gold-text mb-6">ติดต่อวัด</h2>
499
+
500
+ <form id="contact-form">
501
+ <div class="mb-4">
502
+ <label for="name" class="block mb-1">ชื่อ-นามสกุล</label>
503
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent">
504
+ </div>
505
+
506
+ <div class="mb-4">
507
+ <label for="phone" class="block mb-1">เบอร์โทรศัพท์</label>
508
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent">
509
+ </div>
510
+
511
+ <div class="mb-4">
512
+ <label for="subject" class="block mb-1">เรื่องที่ต้องการติดต่อ</label>
513
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent">
514
+ <option value="">เลือกเรื่องที่ต้องการติดต่อ</option>
515
+ <option value="visit">นัดหมายเยี่ยมชมวัด</option>
516
+ <option value="dhamma">สอบถามหลักธรรม</option>
517
+ <option value="event">สอบถามกิจกรรม</option>
518
+ <option value="other">อื่นๆ</option>
519
+ </select>
520
+ </div>
521
+
522
+ <div class="mb-4">
523
+ <label for="message" class="block mb-1">ข้อความ</label>
524
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gold focus:border-transparent"></textarea>
525
+ </div>
526
+
527
+ <button type="submit" class="w-full bg-gold hover:bg-deep-gold text-white py-3 rounded-lg shadow-md transition">
528
+ <i class="fas fa-paper-plane mr-2"></i> ส่งข้อความ
529
+ </button>
530
+ </form>
531
+ </div>
532
+
533
+ <!-- Donation -->
534
+ <div class="bg-white rounded-lg shadow-md p-6 border-t-4 border-gold">
535
+ <h2 class="text-2xl font-bold gold-text mb-6">บริจาคสมทบทุนวัด</h2>
536
+
537
+ <div class="mb-6">
538
+ <p class="mb-4">ท่านสามารถสนับสนุนกิจกรรมและโครงการของวัดวังสามหมอผ่านช่องทางต่างๆ ดังนี้</p>
539
+
540
+ <div class="space-y-4">
541
+ <!-- Bank Transfer -->
542
+ <div class="flex items-center p-3 bg-light-cream rounded-lg border border-gold border-opacity-30">
543
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mr-4">
544
+ <i class="fas fa-university"></i>
545
+ </div>
546
+ <div>
547
+ <h4 class="font-bold">โอนเงินผ่านธนาคาร</h4>
548
+ <p class="text-sm">บัญชีวัดวังสามหมอ ธนาคารไทยพาณิชย์ สาขาวังสามหมอ</p>
549
+ <p class="text-sm font-mono">เลขที่ 789-2-34567-8</p>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- QR Code -->
554
+ <div class="flex items-center p-3 bg-light-cream rounded-lg border border-gold border-opacity-30">
555
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mr-4">
556
+ <i class="fas fa-qrcode"></i>
557
+ </div>
558
+ <div>
559
+ <h4 class="font-bold">สแกน QR Code</h4>
560
+ <p class="text-sm">พร้อมเพย์ หมายเลข 089-123-4567 (พระครูใบฎีกา สมชาย ฐานวุฑโฒ)</p>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- In Person -->
565
+ <div class="flex items-center p-3 bg-light-cream rounded-lg border border-gold border-opacity-30">
566
+ <div class="w-12 h-12 bg-gold rounded-full flex items-center justify-center text-white mr-4">
567
+ <i class="fas fa-hand-holding-heart"></i>
568
+ </div>
569
+ <div>
570
+ <h4 class="font-bold">บริจาคด้วยตนเอง</h4>
571
+ <p class="text-sm">ติดต่อได้ที่กุฏิเจ้าอาวาสหรือตู้บริจาคในวัดทุกวัน 08:00-17:00 น.</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="bg-yellow-50 border-l-4 border-gold p-4">
578
+ <h4 class="font-bold gold-text mb-2">หมายเหตุ</h4>
579
+ <p class="text-sm">วัดวังสามหมอจะออกใบอนุโมทนาบัตรให้กับผู้บริจาคทุกท่านเพื่อเป็นสิริมงคล</p>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </section>
585
+ </main>
586
+
587
+ <!-- Footer -->
588
+ <footer class="bg-gray-900 text-white py-12">
589
+ <div class="container mx-auto px-4">
590
+ <div class="grid md:grid-cols-4 gap-8">
591
+ <!-- About -->
592
+ <div>
593
+ <h3 class="text-xl font-bold gold-text mb-4">เกี่ยวกับวัด</h3>
594
+ <p class="mb-4 text-gray-300">วัดวังสามหมอเป็นศูนย์กลางจิตใจของชุมชนชาวภูไทในอำเภอวังสามหมอ จังหวัดอุดรธานี มีประวัติศาสตร์ยาวนานกว่า 200 ปี</p>
595
+ <div class="flex space-x-4">
596
+ <a href="#" class="text-gray-300 hover:text-gold transition">
597
+ <i class="fab fa-facebook-f"></i>
598
+ </a>
599
+ <a href="#" class="text-gray-300 hover:text-gold transition">
600
+ <i class="fab fa-line"></i>
601
+ </a>
602
+ <a href="#" class="text-gray-300 hover:text-gold transition">
603
+ <i class="fab fa-youtube"></i>
604
+ </a>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- Quick Links -->
609
+ <div>
610
+ <h3 class="text-xl font-bold gold-text mb-4">เมนูหลัก</h3>
611
+ <ul class="space-y-2">
612
+ <li><a href="#home" class="text-gray-300 hover:text-gold transition">หน้าหลัก</a></li>
613
+ <li><a href="#history" class="text-gray-300 hover:text-gold transition">ประวัติวัด</a></li>
614
+ <li><a href="#dhamma" class="text-gray-300 hover:text-gold transition">หลักธรรม</a></li>
615
+ <li><a href="#gallery" class="text-gray-300 hover:text-gold transition">แกลเลอรี่</a></li>
616
+ <li><a href="#events" class="text-gray-300 hover:text-gold transition">กิจกรรม</a></li>
617
+ <li><a href="#contact" class="text-gray-300 hover:text-gold transition">ติดต่อ/บริจาค</a></li>
618
+ </ul>
619
+ </div>
620
+
621
+ <!-- Contact Info -->
622
+ <div>
623
+ <h3 class="text-xl font-bold gold-text mb-4">ติดต่อเรา</h3>
624
+ <div class="space-y-3">
625
+ <div class="flex items-start">
626
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-gold"></i>
627
+ <p class="text-gray-300">ตำบลวังสามหมอ อำเภอวังสามหมอ จังหวัดอุดรธานี 41280</p>
628
+ </div>
629
+ <div class="flex items-center">
630
+ <i class="fas fa-phone-alt mr-3 text-gold"></i>
631
+ <p class="text-gray-300">042-123456</p>
632
+ </div>
633
+ <div class="flex items-center">
634
+ <i class="fas fa-envelope mr-3 text-gold"></i>
635
+ <p class="text-gray-300">[email protected]</p>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Opening Hours -->
641
+ <div>
642
+ <h3 class="text-xl font-bold gold-text mb-4">เวลาเปิด-ปิด</h3>
643
+ <div class="space-y-2">
644
+ <div class="flex justify-between text-gray-300">
645
+ <span>วันจันทร์-ศุกร์</span>
646
+ <span>08:00 - 17:00</span>
647
+ </div>
648
+ <div class="flex justify-between text-gray-300">
649
+ <span>วันเสาร์-อาทิตย์</span>
650
+ <span>07:00 - 18:00</span>
651
+ </div>
652
+ <div class="flex justify-between text-gray-300">
653
+ <span>วันพระ</span>
654
+ <span>06:00 - 20:00</span>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
661
+ <p>© 2023 วัดวังสามหมอ จังหวัดอุดรธานี. สงวนลิขสิทธิ์ทุกประการ.</p>
662
+ <p class="mt-2 text-sm">ออกแบบด้วยใจเพื่อเผยแผ่พระพุทธศาสนา</p>
663
+ </div>
664
+ </div>
665
+ </footer>
666
+
667
+ <!-- Back to Top Button -->
668
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-gold text-white w-12 h-12 rounded-full shadow-xl flex items-center justify-center opacity-0 invisible transition-all">
669
+ <i class="fas fa-arrow-up"></i>
670
+ </button>
671
+
672
+ <!-- Lightbox for Gallery -->
673
+ <div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden">
674
+ <div class="relative max-w-4xl w-full">
675
+ <img id="lightbox-img" src="" alt="" class="w-full max-h-screen object-contain">
676
+ <button id="close-lightbox" class="absolute top-4 right-4 text-white text-3xl hover:text-gold transition">
677
+ <i class="fas fa-times"></i>
678
+ </button>
679
+ <button id="prev-lightbox" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-3xl hover:text-gold transition">
680
+ <i class="fas fa-chevron-left"></i>
681
+ </button>
682
+ <button id="next-lightbox" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white text-3xl hover:text-gold transition">
683
+ <i class="fas fa-chevron-right"></i>
684
+ </button>
685
+ </div>
686
+ </div>
687
+
688
+ <script>
689
+ // Dhamma Quotes
690
+ const dhammaQuotes = [
691
+ "ความเพียรเป็นทางแห่งความไม่ตาย ความประมาทเป็นทางแห่งความตาย - ธรรมบท",
692
+ "น้ำใจคือยอดแห่งธรรม ไมตรีคือยอดแห่งน้ำใจ - พระสูตร",
693
+ "จิตที่ฝึกดีแล้วนำสุขมาให้ - ธรรมบท",
694
+ "ผู้ชนะตนนั่นแล เป็นผู้ชนะที่ประเสริฐที่สุด - ธรรมบท",
695
+ "ความไม่ประมาทเป็นทางไม่ตาย ความประมาทเป็นทางแห่งความตาย - ธรรมบท",
696
+ "คนพาลย่อมติเตียนการให้ทาน คนดีย่อมสรรเสริญการให้ทาน - ธรรมบท",
697
+ "ความโกรธเป็นศัตรูที่ร้ายกาจที่สุด - พระพุทธพจน์",
698
+ "ความสุขใดจะเสมอด้วยความสงบไม่มี - ธรรมบท"
699
+ ];
700
+
701
+ function newDhammaQuote() {
702
+ const randomQuote = dhammaQuotes[Math.floor(Math.random() * dhammaQuotes.length)];
703
+ document.getElementById("daily-dhamma").innerHTML = `<p>"${randomQuote}"</p>`;
704
+ }
705
+
706
+ // Initialize with a random quote
707
+ document.addEventListener('DOMContentLoaded', function() {
708
+ newDhammaQuote();
709
+
710
+ // Carousel functionality
711
+ let currentSlide = 0;
712
+ const slides = document.querySelectorAll('.carousel-slide');
713
+ const indicators = document.querySelectorAll('.indicator-btn');
714
+
715
+ function showSlide(n) {
716
+ slides.forEach(slide => slide.classList.remove('opacity-0'));
717
+ slides.forEach(slide => slide.classList.add('opacity-0'));
718
+ indicators.forEach(ind => ind.classList.remove('bg-white', 'bg-opacity-80'));
719
+
720
+ currentSlide = (n + slides.length) % slides.length;
721
+ slides[currentSlide].classList.remove('opacity-0');
722
+ indicators[currentSlide].classList.add('bg-white', 'bg-opacity-80');
723
+ }
724
+
725
+ // Auto slide
726
+ let slideInterval = setInterval(() => {
727
+ showSlide(currentSlide + 1);
728
+ }, 5000);
729
+
730
+ // Next/previous controls
731
+ document.getElementById('next-btn').addEventListener('click', () => {
732
+ clearInterval(slideInterval);
733
+ showSlide(currentSlide + 1);
734
+ slideInterval = setInterval(() => {
735
+ showSlide(currentSlide + 1);
736
+ }, 5000);
737
+ });
738
+
739
+ document.getElementById('prev-btn').addEventListener('click', () => {
740
+ clearInterval(slideInterval);
741
+ showSlide(currentSlide - 1);
742
+ slideInterval = setInterval(() => {
743
+ showSlide(currentSlide + 1);
744
+ }, 5000);
745
+ });
746
+
747
+ // Indicator buttons
748
+ indicators.forEach((indicator, index) => {
749
+ indicator.addEventListener('click', () => {
750
+ clearInterval(slideInterval);
751
+ showSlide(index);
752
+ slideInterval = setInterval(() => {
753
+ showSlide(currentSlide + 1);
754
+ }, 5000);
755
+ });
756
+ });
757
+
758
+ // Show first slide initially
759
+ showSlide(0);
760
+
761
+ // Back to top button
762
+ const backToTopButton = document.getElementById('back-to-top');
763
+
764
+ window.addEventListener('scroll', () => {
765
+ if (window.pageYOffset > 300) {
766
+ backToTopButton.classList.remove('opacity-0', 'invisible');
767
+ backToTopButton.classList.add('opacity-100', 'visible');
768
+ } else {
769
+ backToTopButton.classList.remove('opacity-100', 'visible');
770
+ backToTopButton.classList.add('opacity-0', 'invisible');
771
+ }
772
+ });
773
+
774
+ backToTopButton.addEventListener('click', () => {
775
+ window.scrollTo({ top: 0, behavior: 'smooth' });
776
+ });
777
+
778
+ // Lightbox functionality
779
+ const lightbox = document.getElementById('lightbox');
780
+ const lightboxImg = document.getElementById('lightbox-img');
781
+ const galleryItems = document.querySelectorAll('.gallery-item');
782
+ const closeLightbox = document.getElementById('close-lightbox');
783
+ const prevLightbox = document.getElementById('prev-lightbox');
784
+ const nextLightbox = document.getElementById('next-lightbox');
785
+
786
+ let currentImageIndex = 0;
787
+ const galleryImages = Array.from(galleryItems).map(item => item.href);
788
+
789
+ galleryItems.forEach((item, index) => {
790
+ item.addEventListener('click', (e) => {
791
+ e.preventDefault();
792
+ currentImageIndex = index;
793
+ lightboxImg.src = galleryImages[currentImageIndex];
794
+ lightbox.classList.remove('hidden');
795
+ document.body.style.overflow = 'hidden';
796
+ });
797
+ });
798
+
799
+ closeLightbox.addEventListener('click', () => {
800
+ lightbox.classList.add('hidden');
801
+ document.body.style.overflow = 'auto';
802
+ });
803
+
804
+ prevLightbox.addEventListener('click', () => {
805
+ currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
806
+ lightboxImg.src = galleryImages[currentImageIndex];
807
+ });
808
+
809
+ nextLightbox.addEventListener('click', () => {
810
+ currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
811
+ lightboxImg.src = galleryImages[currentImageIndex];
812
+ });
813
+
814
+ // Close lightbox when clicking outside image
815
+ lightbox.addEventListener('click', (e) => {
816
+ if (e.target === lightbox) {
817
+ lightbox.classList.add('hidden');
818
+ document.body.style.overflow = 'auto';
819
+ }
820
+ });
821
+
822
+ // Contact form submission
823
+ const contactForm = document.getElementById('contact-form');
824
+
825
+ contactForm.addEventListener('submit', (e) => {
826
+ e.preventDefault();
827
+ alert('ขอบคุณสำหรับข้อความของคุณ! เราจะติดต่อกลับโดยเร็วที่สุด');
828
+ contactForm.reset();
829
+ });
830
+ });
831
+ </script>
832
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan311/wat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
833
+ </html>