<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>โรงเรียนสาธิตพัฒนา | Satit Pattana School</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
* {
font-family: 'Kanit', sans-serif;
}
.hero-bg {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.calendar-day.today {
background-color: #E1F5FE;
border: 2px solid #4FC3F7;
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.gallery-image:hover {
transform: scale(1.03);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<img src="images/logo.png" alt="School Logo" class="h-10 mr-3">
<div>
<h1 class="text-xl font-bold text-blue-800">โรงเรียนสาธิตพัฒนา</h1>
<p class="text-xs text-gray-600">Satit Pattana School</p>
</div>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-8">
<li><a href="#home" class="text-blue-800 font-medium hover:text-blue-600 transition">หน้าแรก</a></li>
<li><a href="#about" class="text-gray-700 hover:text-blue-600 transition">เกี่ยวกับโรงเรียน</a></li>
<li><a href="#calendar" class="text-gray-700 hover:text-blue-600 transition">ปฏิทินกิจกรรม</a></li>
<li><a href="#news" class="text-gray-700 hover:text-blue-600 transition">ข่าวสาร</a></li>
<li><a href="#gallery" class="text-gray-700 hover:text-blue-600 transition">ภาพกิจกรรม</a></li>
<li><a href="#contact" class="text-gray-700 hover:text-blue-600 transition">ติดต่อเรา</a></li>
</ul>
</nav>
<button class="md:hidden text-gray-700" id="mobile-menu-button">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div class="hidden md:hidden bg-white py-2 px-4 shadow-lg" id="mobile-menu">
<ul class="space-y-2">
<li><a href="#home" class="block py-2 text-blue-800 font-medium">หน้าแรก</a></li>
<li><a href="#about" class="block py-2 text-gray-700">เกี่ยวกับโรงเรียน</a></li>
<li><a href="#calendar" class="block py-2 text-gray-700">ปฏิทินกิจกรรม</a></li>
<li><a href="#news" class="block py-2 text-gray-700">ข่าวสาร</a></li>
<li><a href="#gallery" class="block py-2 text-gray-700">ภาพกิจกรรม</a></li>
<li><a href="#contact" class="block py-2 text-gray-700">ติดต่อเรา</a></li>
</ul>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-bg text-white py-20 md:py-32">
<div class="container mx-auto px-4 text-center fade-in">
<h1 class="text-3xl md:text-5xl font-bold mb-4">ยินดีต้อนรับสู่โรงเรียนสาธิตพัฒนา</h1>
<p class="text-xl md:text-2xl mb-8">พัฒนาคน พัฒนาชาติ ด้วยการศึกษา</p>
<div class="flex justify-center space-x-4">
<a href="#about" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-medium transition">เกี่ยวกับเรา</a>
<a href="#contact" class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition">ติดต่อโรงเรียน</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12 fade-in">
<h2 class="text-3xl font-bold text-blue-800 mb-2">เกี่ยวกับโรงเรียน</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto"></div>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center fade-in">
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-4">ประวัติโรงเรียนสาธิตพัฒนา</h3>
<p class="text-gray-600 mb-4">โรงเรียนสาธิตพัฒนาก่อตั้งขึ้นเมื่อปี พ.ศ. 2540 ด้วยวิสัยทัศน์ที่จะสร้างสถานศึกษาที่มุ่งเน้นการพัฒนาศักยภาพของผู้เรียนแบบองค์รวม</p>
<p class="text-gray-600 mb-6">เราเป็นโรงเรียนที่เปิดสอนตั้งแต่ระดับอนุบาลจนถึงมัธยมศึกษาตอนปลาย ด้วยหลักสูตรที่เข้มข้นและกิจกรรมที่หลากหลาย</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="text-blue-600 text-2xl mb-2">
<i class="fas fa-graduation-cap"></i>
</div>
<h4 class="font-semibold">กว่า 3,000</h4>
<p class="text-sm text-gray-600">ศิษย์เก่า</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="text-blue-600 text-2xl mb-2">
<i class="fas fa-user-graduate"></i>
</div>
<h4 class="font-semibold">1,200+</h4>
<p class="text-sm text-gray-600">นักเรียนปัจจุบัน</p>
</div>
</div>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">อ่านต่อเกี่ยวกับโรงเรียน →</a>
</div>
<div class="relative rounded-xl overflow-hidden shadow-lg">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="โรงเรียนสาธิตพัฒนา" class="w-full h-auto transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
<div class="text-white">
<p class="text-sm">อาคารเรียนหลักของโรงเรียนสาธิตพัฒนา</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Calendar Section -->
<section id="calendar" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12 fade-in">
<h2 class="text-3xl font-bold text-blue-800 mb-2">ปฏิทินกิจกรรม</h2>
<p class="text-gray-600">ติดตามกิจกรรมและวันสำคัญต่างๆ ของโรงเรียน</p>
<div class="w-20 h-1 bg-blue-600 mx-auto mt-2"></div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden fade-in">
<div class="p-6 bg-gradient-to-r from-blue-500 to-blue-700 text-white">
<div class="flex justify-between items-center">
<button id="prev-year" class="p-2 rounded-full hover:bg-blue-600 transition">
<i class="fas fa-chevron-left"></i>
</button>
<h2 id="current-year" class="text-2xl font-semibold">พ.ศ. 2566</h2>
<button id="next-year" class="p-2 rounded-full hover:bg-blue-600 transition">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6" id="months-container">
<!-- Months will be generated by JavaScript -->
</div>
</div>
</div>
</section>
<!-- News Section -->
<section id="news" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12 fade-in">
<h2 class="text-3xl font-bold text-blue-800 mb-2">ข่าวสารล่าสุด</h2>
<p class="text-gray-600">อัพเดทข่าวสารและประกาศจากโรงเรียน</p>
<div class="w-20 h-1 bg-blue-600 mx-auto mt-2"></div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- News Item 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden news-card transition duration-300 fade-in">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="ข่าวรับสมัคร" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<i class="far fa-calendar-alt mr-2"></i> 15 มิถุนายน 2566
</div>
<h3 class="text-xl font-semibold mb-3">รับสมัครนักเรียนใหม่ ปีการศึกษา 2567</h3>
<p class="text-gray-600 mb-4">โรงเรียนสาธิตพัฒนากำลังเปิดรับสมัครนักเรียนใหม่ระดับชั้นอนุบาลถึงมัธยมศึกษาปีที่ 6 สำหรับปีการศึกษา 2567</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">อ่านเพิ่มเติม →</a>
</div>
</div>
<!-- News Item 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden news-card transition duration-300 fade-in">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="ข่าวโครงการ" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<i class="far fa-calendar-alt mr-2"></i> 5 มิถุนายน 2566
</div>
<h3 class="text-xl font-semibold mb-3">โครงการพัฒนาภาษาอังกฤษภาคฤดูร้อน</h3>
<p class="text-gray-600 mb-4">โรงเรียนขอเชิญนักเรียนเข้าร่วมโครงการพัฒนาภาษาอังกฤษภาคฤดูร้อน ตั้งแต่ 10-28 กรกฎาคม 2566</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">อ่านเพิ่มเติม →</a>
</div>
</div>
<!-- News Item 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden news-card transition duration-300 fade-in">
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="ผลสอบ" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<i class="far fa-calendar-alt mr-2"></i> 1 มิถุนายน 2566
</div>
<h3 class="text-xl font-semibold mb-3">ประกาศผลสอบเข้าชั้นมัธยมปีที่ 1 และ 4</h3>
<p class="text-gray-600 mb-4">โรงเรียนได้ประกาศผลสอบคัดเลือกระดับชั้นมัธยมศึกษาปีที่ 1 และชั้นมัธยมศึกษาปีที่ 4 ประจำปีการศึกษา 2566</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">อ่านเพิ่มเติม →</a>
</div>
</div>
</div>
<div class="text-center mt-10 fade-in">
<a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">
ดูข่าวสารทั้งหมด
</a>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12 fade-in">
<h2 class="text-3xl font-bold text-blue-800 mb-2">ภาพกิจกรรมโรงเรียน</h2>
<p class="text-gray-600">บันทึกความทรงจำและกิจกรรมต่างๆ ของนักเรียน</p>
<div class="w-20 h-1 bg-blue-600 mx-auto mt-2"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<!-- Gallery Image 1 -->
<div class="rounded-lg overflow-hidden shadow-md gallery-image transition duration-500 fade-in">
<img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="กิจกรรมวิทยาศาสตร์" class="w-full h-40 object-cover">
<div class="bg-white p-3">
<p class="text-sm font-medium">กิจกรรมวันวิทยาศาสตร์</p>
<p class="text-xs text-gray-500">18 สิงหาคม 2565</p>
</div>
</div>
<!-- Gallery Image 2 -->
<div class="rounded-lg overflow-hidden shadow-md gallery-image transition duration-500 fade-in">
<img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="ทัศนศึกษา" class="w-full h-40 object-cover">
<div class="bg-white p-3">
<p class="text-sm font-medium">ทัศนศึกษาจังหวัดอยุธยา</p>
<p class="text-xs text-gray-500">5 มกราคม 2566</p>
</div>
</div>
<!-- Gallery Image 3 -->
<div class="rounded-lg overflow-hidden shadow-md gallery-image transition duration-500 fade-in">
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="กีฬาสี" class="w-full h-40 object-cover">
<div class="bg-white p-3">
<p class="text-sm font-medium">แข่งขันกีฬาสีภายในโรงเรียน</p>
<p class="text-xs text-gray-500">20 กุมภาพันธ์ 2566</p>
</div>
</div>
<!-- Gallery Image 4 -->
<div class="rounded-lg overflow-hidden shadow-md gallery-image transition duration-500 fade-in">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="วันไหว้ครู" class="w-full h-40 object-cover">
<div class="bg-white p-3">
<p class="text-sm font-medium">พิธีไหว้ครูประจำปี 2566</p>
<p class="text-xs text-gray-500">16 มิถุนายน 2566</p>
</div>
</div>
</div>
<div class="text-center mt-10 fade-in">
<a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">
ดูภาพกิจกรรมทั้งหมด
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-blue-800 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12 fade-in">
<h2 class="text-3xl font-bold mb-2">ติดต่อโรงเรียน</h2>
<p class="opacity-80">สอบถามข้อมูลเพิ่มเติม หรือเยี่ยมชมโรงเรียน</p>
<div class="w-20 h-1 bg-white mx-auto mt-2"></div>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div class="fade-in">
<h3 class="text-xl font-semibold mb-6">ข้อมูลติดต่อ</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="text-blue-300 text-xl mr-4 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium">ที่อยู่</h4>
<p class="opacity-80">123 ถนนพัฒนาการ แขวงบางนา เขตบางกะปิ กรุงเทพมหานคร 10240</p>
</div>
</div>
<div class="flex items-start">
<div class="text-blue-300 text-xl mr-4 mt-1">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-medium">โทรศัพท์</h4>
<p class="opacity-80">02-345-6789</p>
</div>
</div>
<div class="flex items-start">
<div class="text-blue-300 text-xl mr-4 mt-1">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-medium">อีเมล</h4>
<p class="opacity-80">info@satitpattana.ac.th</p>
</div>
</div>
<div class="flex items-start">
<div class="text-blue-300 text-xl mr-4 mt-1">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-medium">เวลาทำการ</h4>
<p class="opacity-80">จันทร์-ศุกร์ 08:00 - 16:30 น.</p>
<p class="opacity-80">เสาร์ 08:00 - 12:00 น.</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium mb-4">ติดตามเราบนโซเชียลมีเดีย</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-line"></i>
</a>
<a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="bg-blue-700 hover:bg-blue-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
<div class="fade-in">
<h3 class="text-xl font-semibold mb-6">ส่งข้อความถึงเรา</h3>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="name" class="block mb-1">ชื่อ-สกุล</label>
<input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-blue-700 border border-blue-600 text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="email" class="block mb-1">อีเมล</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-blue-700 border border-blue-600 text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div>
<label for="phone" class="block mb-1">หมายเลขโทรศัพท์</label>
<input type="tel" id="phone" class="w-full px-4 py-2 rounded-lg bg-blue-700 border border-blue-600 text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="subject" class="block mb-1">หัวข้อ</label>
<select id="subject" class="w-full px-4 py-2 rounded-lg bg-blue-700 border border-blue-600 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>สอบถามข้อมูลทั่วไป</option>
<option>สมัครเรียน</option>
<option>ร่วมงานกับเรา</option>
<option>อื่นๆ</option>
</select>
</div>
<div>
<label for="message" class="block mb-1">ข้อความ</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-blue-700 border border-blue-600 text-white placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<button type="submit" class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition w-full">
ส่งข้อความ
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="h-96 w-full fade-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.395217154914!2d100.60801921483035!3d13.756354590347758!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29edf4fffab2f%3A0xb3dbd7ab5e16b9cf!2sSchool%20of%20Science%20and%20Technology%2C%20Bangkok%20University!5e0!3m2!1sen!2sth!4v1627471237034!5m2!1sen!2sth" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div class="fade-in">
<h3 class="text-xl font-semibold mb-4 flex items-center">
<img src="https://via.placeholder.com/40" alt="School Logo" class="h-8 mr-2">
โรงเรียนสาธิตพัฒนา
</h3>
<p class="text-gray-400">พัฒนาคน พัฒนาชาติ ด้วยการศึกษา</p>
<p class="text-gray-400 mt-4">© 2023 โรงเรียนสาธิตพัฒนา. สงวนลิขสิทธิ์.</p>
</div>
<div class="fade-in">
<h3 class="text-lg font-semibold mb-4">เมนูหลัก</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition">หน้าแรก</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition">เกี่ยวกับโรงเรียน</a></li>
<li><a href="#calendar" class="text-gray-400 hover:text-white transition">ปฏิทินกิจกรรม</a></li>
<li><a href="#news" class="text-gray-400 hover:text-white transition">ข่าวสาร</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-white transition">ภาพกิจกรรม</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition">ติดต่อเรา</a></li>
</ul>
</div>
<div class="fade-in">
<h3 class="text-lg font-semibold mb-4">ลิงค์สำคัญ</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">ระบบ E-Learning</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">ระบบลงทะเบียน</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">ผลงานนักเรียน</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">กิจกรรมแนะแนว</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">สำหรับผู้ปกครอง</a></li>
</ul>
</div>
<div class="fade-in">
<h3 class="text-lg font-semibold mb-4">ติดตามเรา</h3>
<div class="flex space-x-4 mb-4">
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-line"></i>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition">
<i class="fab fa-instagram"></i>
</a>
</div>
<p class="text-gray-400">รับข่าวสารและอัพเดทล่าสุดจากพวกเรา</p>
</div>
</div>
<div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm">
<p>เว็บไซต์นี้เป็นส่วนหนึ่งของโครงการพัฒนาเว็บไซต์โรงเรียน สงวนลิขสิทธิ์ 2566</p>
</div>
</div>
</footer>
<!-- Event Modal -->
<div id="event-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4 z-50">
<div class="bg-white rounded-xl max-w-md w-full p-6">
<div class="flex justify-between items-center mb-4">
<h3 id="event-date" class="text-xl font-bold"></h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="event-content" class="mb-4">
<!-- Event content will be filled here -->
</div>
<button id="modal-close-btn" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">ปิด</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Animate elements on scroll
const fadeElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
}, {threshold: 0.1});
fadeElements.forEach(el => observer.observe(el));
// Calendar functionality
const monthNames = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน",
"กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"];
const shortDayNames = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"];
let currentYear = new Date().getFullYear();
const currentDate = new Date();
// Sample events data
const events = {
'2566': {
'5': { // June
'5': 'กิจกรรมวันไหว้ครู <br><small class="text-gray-500">09:00 - 12:00 น. ที่หอประชุมใหญ่</small>',
'15': 'แข่งขันทักษะวิชาการระดับเขต <br><small class="text-gray-500">08:30 - 16:00 น.</small>',
'25': 'ประชุมผู้ปกครองประจำภาคเรียน <br><small class="text-gray-500">13:00 - 16:00 น.</small>'
},
'6': { // July
'1': 'วันสถาปนาโรงเรียน <br><small class="text-gray-500">กิจกรรมทั้งวัน</small>',
'10': 'เริ่มโครงการพัฒนาภาษาอังกฤษภาคฤดูร้อน <br><small class="text-gray-500">08:30 - 15:30 น.</small>',
'24': 'แข่งขันกีฬาเชื่อมความสัมพันธ์ <br><small class="text-gray-500">08:00 - 17:00 น.</small>'
},
'7': { // August
'12': 'วันแม่แห่งชาติ <br><small class="text-gray-500">กิจกรรมช่วงเช้า</small>',
'18': 'กิจกรรมวันวิทยาศาสตร์ <br><small class="text-gray-500">08:30 - 15:30 น.</small>'
}
},
'2567': {
'0': { // January
'1': 'วันขึ้นปีใหม่ <br><small class="text-gray-500">หยุดเรียน</small>',
'13': 'กิจกรรมวันเด็ก <br><small class="text-gray-500">08:30 - 14:00 น.</small>',
'16': 'วันครู <br><small class="text-gray-500">กิจกรรมช่วงเช้า</small>'
},
'1': { // February
'14': 'แข่งขันศิลปหัตถกรรมนักเรียน <br><small class="text-gray-500">08:30 - 16:00 น.</small>',
'28': 'ปัจฉิมนิเทศนักเรียนชั้น ม.6 <br><small class="text-gray-500">13:00 - 16:00 น.</small>'
}
}
};
function renderYearCalendar(year) {
document.getElementById('current-year').textContent = `พ.ศ. ${year}`;
const monthsContainer = document.getElementById('months-container');
monthsContainer.innerHTML = '';
for (let month = 0; month < 12; month++) {
const monthEl = document.createElement('div');
monthEl.className = 'bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200';
// Month header
const monthHeader = document.createElement('div');
monthHeader.className = 'bg-blue-600 text-white py-2 px-3 text-center font-medium';
monthHeader.textContent = monthNames[month];
monthEl.appendChild(monthHeader);
// Days of week header
const daysHeader = document.createElement('div');
daysHeader.className = 'grid grid-cols-7 bg-blue-50 text-center text-xs font-medium py-1';
shortDayNames.forEach(day => {
const dayCell = document.createElement('div');
dayCell.className = day === 'อา' ? 'text-red-500' : '';
dayCell.textContent = day;
daysHeader.appendChild(dayCell);
});
monthEl.appendChild(daysHeader);
// Calendar days grid
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const daysGrid = document.createElement('div');
daysGrid.className = 'grid grid-cols-7 gap-px bg-gray-100 p-px';
// Empty cells for days before the first day of the month
for (let i = 0; i < firstDay; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'bg-white h-10';
daysGrid.appendChild(emptyCell);
}
// Days of the month
for (let day = 1; day <= daysInMonth; day++) {
const dayCell = document.createElement('div');
dayCell.className = 'bg-white p-1 h-10 overflow-hidden relative flex flex-col';
// Highlight today
const isToday = year === currentDate.getFullYear() &&
month === currentDate.getMonth() &&
day === currentDate.getDate();
if (isToday) {
dayCell.classList.add('today');
}
// Day number
const dayNumber = document.createElement('div');
dayNumber.className = 'text-xs font-medium self-end ' + (isToday ? 'text-blue-600' : '');
dayNumber.textContent = day;
dayCell.appendChild(dayNumber);
// Check for events
const buddhistYear = year + 543;
if (events[buddhistYear] && events[buddhistYear][month] && events[buddhistYear][month][day]) {
const eventDot = document.createElement('div');
eventDot.className = 'w-1 h-1 rounded-full bg-blue-500 self-center mt-auto mb-1';
dayCell.appendChild(eventDot);
dayCell.classList.add('cursor-pointer', 'hover:bg-blue-50');
dayCell.addEventListener('click', () => showEventModal(buddhistYear, month, day));
}
daysGrid.appendChild(dayCell);
}
monthEl.appendChild(daysGrid);
monthsContainer.appendChild(monthEl);
}
}
function showEventModal(year, month, day) {
const modal = document.getElementById('event-modal');
const eventDate = document.getElementById('event-date');
const eventContent = document.getElementById('event-content');
eventDate.textContent = `${day} ${monthNames[month]} ${year}`;
eventContent.innerHTML = `
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
${events[year][month][day]}
</div>
`;
modal.classList.remove('hidden');
}
// Navigation
document.getElementById('prev-year').addEventListener('click', () => {
currentYear--;
renderYearCalendar(currentYear);
});
document.getElementById('next-year').addEventListener('click', () => {
currentYear++;
renderYearCalendar(currentYear);
});
// Modal close
document.getElementById('close-modal').addEventListener('click', () => {
document.getElementById('event-modal').classList.add('hidden');
});
document.getElementById('modal-close-btn').addEventListener('click', () => {
document.getElementById('event-modal').classList.add('hidden');
});
// Initialize calendar
renderYearCalendar(currentYear);
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
});
</script>
</body>
</html>