<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="หน้าเว็บโรงเรียนสาธิตแห่งความรู้ มีข้อมูลแนะนำ ผู้บริหาร กิจกรรม ประชาสัมพันธ์ และแกลเลอรี">
<meta name="keywords" content="โรงเรียน, การศึกษา, ผู้บริหาร, กิจกรรม, ประชาสัมพันธ์, แกลเลอรี">
<meta name="robots" content="index, follow">
<title>โรงเรียนสาธิตแห่งความรู้</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icomoon/1.0.0/style.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Prompt', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: #2c3e50;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}
header h1 {
font-size: 2rem;
text-align: center;
}
nav {
background: #34495e;
padding: 1rem 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
}
nav a:hover {
color: #3498db;
}
.hero {
position: relative;
height: 500px;
background: url('assets/images/photo-1497633762265-9d179a990aa6.jpeg') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin-bottom: 20px;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.hero-btn {
display: inline-block;
padding: 12px 24px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
}
.hero-btn:hover {
background: #2980b9;
}
.about {
background: white;
padding: 40px 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
text-align: center;
}
.about h2 {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.about-img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: 8px;
margin: 20px auto;
}
.gallery {
margin: 40px 0;
position: relative;
}
.gallery h2 {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.gallery-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.gallery-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.gallery-slide.active {
opacity: 1;
}
.gallery-item {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.gallery-item-fallback {
width: 100%;
height: 100%;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 1rem;
border-radius: 8px;
}
.gallery-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 1.5rem;
border-radius: 4px;
}
.gallery-btn.prev {
left: 10px;
}
.gallery-btn.next {
right: 10px;
}
.gallery-dots {
text-align: center;
margin-top: 10px;
}
.gallery-dot {
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.gallery-dot.active {
background: #3498db;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px 0;
}
.column {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.3s ease;
}
.column:hover {
transform: translateY(-5px);
}
.column h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
}
.executive-item,
.activity-item,
.news-item {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.executive-item:last-child,
.activity-item:last-child,
.news-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.executive-img,
.activity-img,
.news-img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 10px;
}
.executive-item h3,
.activity-item h3,
.news-item h3 {
font-size: 1.2rem;
color: #2c3e50;
margin-bottom: 5px;
}
.executive-item p,
.activity-item p,
.news-item p {
font-size: 0.9rem;
color: #666;
}
.more-btn {
display: inline-block;
padding: 8px 16px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 4px;
margin-top: 10px;
transition: background 0.3s ease;
}
.more-btn:hover {
background: #2980b9;
}
footer {
background: #2c3e50;
color: white;
padding: 2rem 0;
text-align: center;
margin-top: 20px;
}
footer .contact-info {
margin-bottom: 1rem;
}
footer .contact-info p {
margin: 5px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
footer a {
color: #3498db;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.hero {
height: 300px;
}
.hero h2 {
font-size: 1.8rem;
}
.hero p {
font-size: 1rem;
}
.gallery-container {
height: 250px;
}
.grid {
grid-template-columns: 1fr;
}
.column {
margin-bottom: 20px;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav a {
padding: 10px 0;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>โรงเรียนสาธิตแห่งความรู้</h1>
</div>
</header>
<nav>
<div class="container">
<ul>
<li><a href="#home">หน้าแรก</a></li>
<li><a href="#about">เกี่ยวกับเรา</a></li>
<li><a href="#gallery">แกลเลอรี</a></li>
<li><a href="#executives">ผู้บริหาร</a></li>
<li><a href="#activities">กิจกรรม</a></li>
<li><a href="#news">ประชาสัมพันธ์</a></li>
<li><a href="#contact">ติดต่อเรา</a></li>
</ul>
</div>
</nav>
<div class="hero" id="home">
<div class="hero-overlay"></div>
<div class="hero-content">
<h2>ยินดีต้อนรับสู่โรงเรียนสาธิตแห่งความรู้</h2>
<p>มุ่งมั่นพัฒนาการศึกษา สร้างอนาคตที่สดใสให้เยาวชน</p>
<a href="#about" class="hero-btn">เรียนรู้เพิ่มเติม</a>
</div>
</div>
<div class="container">
<div class="about" id="about">
<h2><i class="icon-home"></i> เกี่ยวกับโรงเรียน</h2>
<p>โรงเรียนสาธิตแห่งความรู้ ก่อตั้งในปี 2550 มุ่งเน้นการพัฒนาการศึกษาที่มีคุณภาพ ด้วยหลักสูตรที่ทันสมัยและคณาจารย์ที่มีประสบการณ์ เราให้ความสำคัญกับการเรียนรู้แบบองค์รวม พัฒนาทั้งด้านวิชาการและจริยธรรม เพื่อเตรียมความพร้อมให้เยาวชนสู่ศตวรรษที่ 21</p>
<img class="about-img" src="assets/images/photo-1524178232363-1fb2b075b655.jpeg" alt="School campus">
</div>
<div class="gallery" id="gallery">
<h2><i class="icon-camera"></i> แกลเลอรี</h2>
<div class="gallery-container">
<div class="gallery-slide">
<img class="gallery-item" src="assets/images/photo-1502082553048-f009c37129b9.jpeg" alt="School event">
</div>
<div class="gallery-slide">
<img class="gallery-item" src="assets/images/photo-1524178232363-1fb2b075b655.jpeg" alt="Classroom">
</div>
<div class="gallery-slide">
<img class="gallery-item" src="assets/images/photo-1509062522246-3755977927d7.jpeg" alt="School activity">
</div>
<div class="gallery-slide">
<img class="gallery-item" src="assets/images/photo-1497633762265-9d179a990aa6.jpeg" alt="Library">
</div>
</div>
<button class="gallery-btn prev"><i class="icon-arrow-left"></i></button>
<button class="gallery-btn next"><i class="icon-arrow-right"></i></button>
<div class="gallery-dots"></div>
</div>
<div class="grid">
<div class="column" id="executives">
<h2><i class="icon-user"></i> ผู้บริหาร</h2>
<div class="executive-list"></div>
</div>
<div class="column" id="activities">
<h2><i class="icon-calendar"></i> กิจกรรม</h2>
<div class="activity-list"></div>
</div>
<div class="column" id="news">
<h2><i class="icon-megaphone"></i> ประชาสัมพันธ์</h2>
<div class="news-list"></div>
</div>
</div>
</div>
<footer id="contact">
<div class="container">
<div class="contact-info">
<p><i class="icon-phone"></i> โทรศัพท์: 02-123-4567</p>
<p><i class="icon-mail"></i> อีเมล: <a href="mailto:contact@sathit.ac.th">contact@sathit.ac.th</a></p>
<p><i class="icon-location"></i> ที่อยู่: 123 ถนนความรู้ แขวงสานติ เขตการศึกษา กรุงเทพฯ 10100</p>
</div>
<p>© 2568 โรงเรียนสาธิตแห่งความรู้. สงวนลิขสิทธิ์.</p>
</div>
</footer>
<script>
const sanitizeHTML = (str) => {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
};
const executivesData = [
{name: "นายสมชาย ใจดี", position: "ผู้อำนวยการ", image: "assets/images/photo-1519085360753-af0119f7cbe7.jpeg", description: "ผู้นำที่มีวิสัยทัศน์ 30 ปีในวงการศึกษา"},
{name: "นางสาวสมหญิง สุขใจ", position: "รองผู้อำนวยการ", image: "assets/images/photo-1573497019940-1c28c88b4f3e.jpeg", description: "ผู้เชี่ยวชาญด้านหลักสูตรและการสอน"},
{name: "นายสมศักดิ์ เก่งงาน", position: "หัวหน้าฝ่ายวิชาการ", image: "assets/images/photo-1560250097-0b93528c311a.jpeg", description: "ดูแลด้านวิชาการและนวัตกรรม"}
];
const activitiesData = [
{title: "งานกีฬาสีประจำปี 2568", date: "25-26 ก.ค. 2568", image: "assets/images/photo-1519085360753-af0119f7cbe7.jpeg", description: "การแข่งขันกีฬาระหว่างบ้านสี"},
{title: "อบรม STEM Education", date: "30 ก.ค. 2568", image: "assets/images/photo-1509062522246-3755977927d7.jpeg", description: "พัฒนาทักษะด้านวิทยาศาสตร์และเทคโนโลยี"},
{title: "ค่ายภาษาอังกฤษ", date: "5-7 ส.ค. 2568", image: "assets/images/photo-1524178232363-1fb2b075b655.jpeg", description: "เรียนภาษาอังกฤษแบบเข้มข้น"}
];
const newsData = [
{title: "รับสมัครนักเรียนใหม่ ปีการศึกษา 2569", date: "1-30 ส.ค. 2568", image: "assets/images/photo-1497633762265-9d179a990aa6.jpeg", description: "เปิดรับสมัครระดับชั้น ม.1 และ ม.4"},
{title: "วันหยุดพิเศษ", date: "15 ส.ค. 2568", image: "assets/images/photo-1573497019940-1c28c88b4f3e.jpeg", description: "วันหยุดเนื่องในวันแม่แห่งชาติ"},
{title: "โครงการโรงเรียนสี เขียว", date: "20 ส.ค. 2568", image: "assets/images/photo-1502082553048-f009c37129b9.jpeg", description: "รณรงค์ลดขยะและอนุรักษ์พลังงาน"}
];
const renderExecutives = () => {
const list = document.querySelector('.executive-list');
list.innerHTML = executivesData.map(item => `
<div class="executive-item">
<img class="executive-img" src="${sanitizeHTML(item.image)}" alt="Executive image" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200?text=Image+Not+Available';">
<h3>${sanitizeHTML(item.name)}</h3>
<p>${sanitizeHTML(item.position)}</p>
<p>${sanitizeHTML(item.description)}</p>
</div>
`).join('');
};
const renderActivities = () => {
const list = document.querySelector('.activity-list');
list.innerHTML = activitiesData.map(item => `
<div class="activity-item">
<img class="activity-img" src="${sanitizeHTML(item.image)}" alt="Activity image" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200?text=Image+Not+Available';">
<h3>${sanitizeHTML(item.title)}</h3>
<p>${sanitizeHTML(item.date)}</p>
<p>${sanitizeHTML(item.description)}</p>
<a href="#" class="more-btn">รายละเอียด</a>
</div>
`).join('');
};
const renderNews = () => {
const list = document.querySelector('.news-list');
list.innerHTML = newsData.map(item => `
<div class="news-item">
<img class="news-img" src="${sanitizeHTML(item.image)}" alt="News image" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200?text=Image+Not+Available';">
<h3>${sanitizeHTML(item.title)}</h3>
<p>${sanitizeHTML(item.date)}</p>
<p>${sanitizeHTML(item.description)}</p>
<a href="#" class="more-btn">อ่านเพิ่มเติม</a>
</div>
`).join('');
};
const handleNavClick = (e) => {
e.preventDefault();
const targetId = e.target.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({behavior: 'smooth'});
}
};
const handleGallerySlideshow = () => {
const slides = document.querySelectorAll('.gallery-slide');
const dotsContainer = document.querySelector('.gallery-dots');
const prevBtn = document.querySelector('.gallery-btn.prev');
const nextBtn = document.querySelector('.gallery-btn.next');
let currentIndex = 0;
let intervalId;
const updateSlide = (index) => {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
dotsContainer.querySelectorAll('.gallery-dot').forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
currentIndex = index;
};
const nextSlide = () => {
currentIndex = (currentIndex + 1) % slides.length;
updateSlide(currentIndex);
};
const prevSlide = () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlide(currentIndex);
};
const startSlideshow = () => {
intervalId = setInterval(nextSlide, 5000);
};
const stopSlideshow = () => {
clearInterval(intervalId);
};
slides.forEach((_, i) => {
const dot = document.createElement('span');
dot.classList.add('gallery-dot');
if (i === 0) dot.classList.add('active');
dot.addEventListener('click', () => {
stopSlideshow();
updateSlide(i);
startSlideshow();
});
dotsContainer.appendChild(dot);
});
prevBtn.addEventListener('click', () => {
stopSlideshow();
prevSlide();
startSlideshow();
});
nextBtn.addEventListener('click', () => {
stopSlideshow();
nextSlide();
startSlideshow();
});
slides.forEach(slide => {
const img = slide.querySelector('.gallery-item');
img.addEventListener('error', () => {
img.outerHTML = `<div class="gallery-item-fallback">รูปภาพไม่สามารถโหลดได้</div>`;
});
});
startSlideshow();
document.querySelector('.gallery').addEventListener('mouseenter', stopSlideshow);
document.querySelector('.gallery').addEventListener('mouseleave', startSlideshow);
};
const init = () => {
renderExecutives();
renderActivities();
renderNews();
handleGallerySlideshow();
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', handleNavClick);
});
};
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>