<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>โรงเรียนดิจิทัล | โรงเรียนคุณภาพสู่ยุคดิจิทัล</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>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #10b981;
--accent: #f59e0b;
--dark: #1e293b;
--light: #f8fafc;
}
.gradient-bg {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.navbar {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.9);
}
.hero-section {
background: 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') no-repeat center center;
background-size: cover;
position: relative;
}
.hero-overlay {
background: rgba(0, 0, 0, 0.5);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.news-card {
transition: all 0.3s ease;
}
.news-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.floating-btn {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.floating-btn:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
}
.footer-link {
transition: all 0.2s ease;
}
.footer-link:hover {
color: var(--accent);
transform: translateX(5px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: fadeIn 0.8s ease forwards;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-300 {
animation-delay: 0.3s;
}
.delay-400 {
animation-delay: 0.4s;
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Top Bar -->
<div class="bg-blue-900 text-white text-sm py-1 px-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4">
<a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-phone-alt mr-1"></i> 02-123-4567</a>
<a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-envelope mr-1"></i> contact@school.ac.th</a>
</div>
<div class="flex space-x-4">
<a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-sign-in-alt mr-1"></i> เข้าสู่ระบบ</a>
<a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-user-plus mr-1"></i> สมัครสมาชิก</a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar sticky top-0 z-50 shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="flex items-center">
<div class="bg-blue-600 text-white p-2 rounded-lg mr-3">
<i class="fas fa-graduation-cap text-xl"></i>
</div>
<span class="text-xl font-bold text-blue-800">โรงเรียนดิจิทัล</span>
</a>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-blue-800 font-medium hover:text-blue-600 transition">หน้าแรก</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition">เกี่ยวกับโรงเรียน</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition">หลักสูตร</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition">กิจกรรม</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition">ข่าวสาร</a>
<a href="#" class="text-gray-700 hover:text-blue-600 transition">ติดต่อเรา</a>
</div>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section relative">
<div class="hero-overlay w-full h-full">
<div class="container mx-auto px-4 py-32 text-white">
<div class="max-w-2xl animate-fadeIn">
<h1 class="text-4xl md:text-5xl font-bold mb-4">ยินดีต้อนรับสู่โรงเรียนดิจิทัล</h1>
<p class="text-xl mb-8">สถาบันการศึกษาคุณภาพสู่ยุคดิจิทัล ด้วยหลักสูตรที่ทันสมัยและเทคโนโลยีทางการศึกษา</p>
<div class="flex space-x-4">
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">สมัครเรียน</a>
<a href="#" class="bg-white hover:bg-gray-100 text-blue-800 px-6 py-3 rounded-lg font-medium transition">ดูหลักสูตร</a>
</div>
</div>
</div>
</div>
</section>
<!-- Quick Links -->
<section class="bg-white py-8 shadow-sm">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="#" class="bg-gray-50 hover:bg-blue-50 p-4 rounded-lg border border-gray-200 transition card-hover delay-100">
<div class="flex flex-col items-center text-center">
<div class="bg-blue-100 p-3 rounded-full mb-3">
<i class="fas fa-calendar-alt text-blue-600 text-xl"></i>
</div>
<span class="font-medium">ปฏิทินการศึกษา</span>
</div>
</a>
<a href="#" class="bg-gray-50 hover:bg-blue-50 p-4 rounded-lg border border-gray-200 transition card-hover delay-200">
<div class="flex flex-col items-center text-center">
<div class="bg-green-100 p-3 rounded-full mb-3">
<i class="fas fa-book text-green-600 text-xl"></i>
</div>
<span class="font-medium">ระบบ E-Learning</span>
</div>
</a>
<a href="#" class="bg-gray-50 hover:bg-blue-50 p-4 rounded-lg border border-gray-200 transition card-hover delay-300">
<div class="flex flex-col items-center text-center">
<div class="bg-yellow-100 p-3 rounded-full mb-3">
<i class="fas fa-clipboard-list text-yellow-600 text-xl"></i>
</div>
<span class="font-medium">ผลการเรียน</span>
</div>
</a>
<a href="#" class="bg-gray-50 hover:bg-blue-50 p-4 rounded-lg border border-gray-200 transition card-hover delay-400">
<div class="flex flex-col items-center text-center">
<div class="bg-red-100 p-3 rounded-full mb-3">
<i class="fas fa-bus text-red-600 text-xl"></i>
</div>
<span class="font-medium">ระบบรถโรงเรียน</span>
</div>
</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8 animate-fadeIn">
<h2 class="text-3xl font-bold text-blue-800 mb-4">เกี่ยวกับโรงเรียนดิจิทัล</h2>
<p class="text-gray-700 mb-4">โรงเรียนดิจิทัลก่อตั้งขึ้นในปี พ.ศ. 2545 ด้วยวิสัยทัศน์ที่จะพัฒนาการศึกษาไทยให้ทันสมัยและก้าวทันเทคโนโลยีในยุคดิจิทัล</p>
<p class="text-gray-700 mb-6">เรามุ่งเน้นการพัฒนาทักษะที่จำเป็นในศตวรรษที่ 21 ทั้งด้านวิชาการ ทักษะชีวิต และทักษะดิจิทัล เพื่อเตรียมความพร้อมนักเรียนสู่โลกอนาคต</p>
<a href="#" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition">
อ่านเพิ่มเติม <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="md:w-1/2 animate-fadeIn delay-100">
<div class="relative">
<img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="โรงเรียนดิจิทัล" class="rounded-lg shadow-lg w-full">
<div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg">
<div class="text-center">
<div class="text-3xl font-bold text-blue-600">20+</div>
<div class="text-sm text-gray-600">ปีแห่งความสำเร็จ</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-blue-800 mb-2">หลักสูตรการศึกษา</h2>
<p class="text-gray-600 max-w-2xl mx-auto">หลักสูตรที่ออกแบบมาเพื่อตอบสนองความต้องการของผู้เรียนในยุคดิจิทัล</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200 transition card-hover animate-fadeIn">
<div class="h-48 bg-blue-600 flex items-center justify-center">
<i class="fas fa-laptop-code text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-800 mb-2">วิทยาการคอมพิวเตอร์</h3>
<p class="text-gray-600 mb-4">เรียนรู้การเขียนโปรแกรม พัฒนาซอฟต์แวร์ และเทคโนโลยีล้ำสมัย</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
ดูรายละเอียด <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200 transition card-hover animate-fadeIn delay-100">
<div class="h-48 bg-green-600 flex items-center justify-center">
<i class="fas fa-atom text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-800 mb-2">วิทยาศาสตร์และคณิตศาสตร์</h3>
<p class="text-gray-600 mb-4">หลักสูตรเข้มข้นเพื่อพัฒนาทักษะการคิดวิเคราะห์และแก้ปัญหา</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
ดูรายละเอียด <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200 transition card-hover animate-fadeIn delay-200">
<div class="h-48 bg-yellow-600 flex items-center justify-center">
<i class="fas fa-globe-asia text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-800 mb-2">ภาษาสากล</h3>
<p class="text-gray-600 mb-4">พัฒนาทักษะภาษาเพื่อการสื่อสารในโลกยุคโลกาภิวัตน์</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
ดูรายละเอียด <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
</div>
<div class="text-center mt-10">
<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>
<!-- News Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-blue-800">ข่าวสารและกิจกรรม</h2>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition">ดูทั้งหมด <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg overflow-hidden shadow-sm news-card animate-fadeIn">
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?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="fas fa-calendar-alt mr-1"></i> 15 มิ.ย. 2566
</div>
<h3 class="text-xl font-bold text-blue-800 mb-2">โรงเรียนดิจิทัลคว้ารางวัลโรงเรียนดีเด่นประจำปี</h3>
<p class="text-gray-600 mb-4">โรงเรียนของเราได้รับรางวัลโรงเรียนดีเด่นด้านนวัตกรรมการศึกษา...</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
อ่านต่อ <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-sm news-card animate-fadeIn delay-100">
<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="fas fa-calendar-alt mr-1"></i> 10 มิ.ย. 2566
</div>
<h3 class="text-xl font-bold text-blue-800 mb-2">กิจกรรมวันวิทยาศาสตร์แห่งชาติ</h3>
<p class="text-gray-600 mb-4">นักเรียนร่วมแสดงผลงานและแข่งขันทักษะทางวิทยาศาสตร์ในงานวันวิทยาศาสตร์...</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
อ่านต่อ <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-sm news-card animate-fadeIn delay-200">
<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-48 object-cover">
<div class="p-6">
<div class="flex items-center text-sm text-gray-500 mb-2">
<i class="fas fa-calendar-alt mr-1"></i> 5 มิ.ย. 2566
</div>
<h3 class="text-xl font-bold text-blue-800 mb-2">โครงการจิตอาสาพัฒนาชุมชน</h3>
<p class="text-gray-600 mb-4">นักเรียนและครูร่วมกันทำกิจกรรมจิตอาสาพัฒนาชุมชนรอบโรงเรียน...</p>
<a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition flex items-center">
อ่านต่อ <i class="fas fa-chevron-right ml-1 text-sm"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-blue-800 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-2">เสียงตอบรับจากนักเรียนและผู้ปกครอง</h2>
<p class="max-w-2xl mx-auto opacity-80">ความสำเร็จของนักเรียนคือความภาคภูมิใจของเรา</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-blue-700 p-6 rounded-lg animate-fadeIn">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="ผู้ปกครอง" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">คุณสมศรี ใจดี</h4>
<p class="text-sm opacity-80">ผู้ปกครองนักเรียน</p>
</div>
</div>
<p class="opacity-90">"ลูกชายพัฒนาทักษะด้านคอมพิวเตอร์อย่างเห็นได้ชัดหลังจากเรียนที่นี่เพียง 1 ปี สามารถสร้างเกมง่ายๆ ได้ด้วยตัวเอง"</p>
</div>
<div class="bg-blue-700 p-6 rounded-lg animate-fadeIn delay-100">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="นักเรียน" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">ด.ช.ธนวัฒน์ สุขใจ</h4>
<p class="text-sm opacity-80">นักเรียนชั้น ม.5</p>
</div>
</div>
<p class="opacity-90">"ชอบวิธีการสอนของครูที่นี่มาก ครูใช้เทคโนโลยีช่วยสอนทำให้เข้าใจบทเรียนง่ายขึ้น และมีกิจกรรมให้ทำตลอด"</p>
</div>
<div class="bg-blue-700 p-6 rounded-lg animate-fadeIn delay-200">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/56.jpg" alt="ศิษย์เก่า" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">น.ส.กัลยาณี วัฒนะ</h4>
<p class="text-sm opacity-80">ศิษย์เก่า ปัจจุบันทำงานที่ Google</p>
</div>
</div>
<p class="opacity-90">"โรงเรียนนี้ให้พื้นฐานด้านเทคโนโลยีที่แข็งแรงกับผม ทำให้ผมสามารถแข่งขันในระดับโลกได้"</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8 animate-fadeIn">
<h2 class="text-3xl font-bold text-blue-800 mb-4">ติดต่อเรา</h2>
<p class="text-gray-600 mb-6">เรายินดีตอบคำถามและให้ข้อมูลเพิ่มเติมเกี่ยวกับโรงเรียนของเรา</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">ที่อยู่</h4>
<p class="text-gray-600">123 ถนนการศึกษา แขวงดิจิทัล เขตเทคโนโลยี กรุงเทพมหานคร 10110</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-green-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">โทรศัพท์</h4>
<p class="text-gray-600">02-123-4567<br>081-234-5678</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-yellow-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-yellow-600"></i>
</div>
<div>
<h4 class="font-bold text-gray-800">อีเมล</h4>
<p class="text-gray-600">contact@school.ac.th<br>info@school.ac.th</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 animate-fadeIn delay-100">
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-bold text-blue-800 mb-4">ส่งข้อความถึงเรา</h3>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">ชื่อ-นามสกุล</label>
<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-blue-500">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">อีเมล</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="subject" class="block text-gray-700 mb-2">หัวข้อ</label>
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 mb-2">ข้อความ</label>
<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-blue-500"></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">
ส่งข้อความ
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="h-96 w-full">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.566041036745!2d100.5232673153447!3d13.74639060121336!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29ec8d0f3f8a5%3A0x4e9a1b9b8e1b9b8e!2sMinistry%20of%20Education!5e0!3m2!1sen!2sth!4v1621234567890!5m2!1sen!2sth" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center mb-4">
<div class="bg-blue-600 text-white p-2 rounded-lg mr-3">
<i class="fas fa-graduation-cap text-xl"></i>
</div>
<span class="text-xl font-bold">โรงเรียนดิจิทัล</span>
</div>
<p class="text-gray-400 mb-4">สถาบันการศึกษาคุณภาพสู่ยุคดิจิทัล ด้วยหลักสูตรที่ทันสมัยและเทคโนโลยีทางการศึกษา</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ปฏิทินการศึกษา</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ตารางเรียน</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">เมนูอาหารกลางวัน</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ระบบ E-Learning</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ผลการเรียน</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">ข้อมูลโรงเรียน</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ประวัติโรงเรียน</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">วิสัยทัศน์/พันธกิจ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">คณะผู้บริหาร</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ครูและบุคลากร</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition footer-link">ศิษย์เก่าดีเด่น</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">ติดต่อเรา</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i>
<span class="text-gray-400">123 ถนนการศึกษา แขวงดิจิทัล เขตเทคโนโลยี กรุงเทพมหานคร 10110</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">02-123-4567</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-2 text-gray-400"></i>
<span class="text-gray-400">contact@school.ac.th</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 โรงเรียนดิจิทัล. สงวนลิขสิทธิ์ทุกประการ.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-sm transition">นโยบายความเป็นส่วนตัว</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">ข้อกำหนดการใช้งาน</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">แผนผังเว็บไซต์</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Floating Button -->
<div class="fixed bottom-6 right-6 z-50">
<div class="flex flex-col space-y-3">
<a href="#" class="floating-btn bg-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center">
<i class="fab fa-line text-xl"></i>
</a>
<a href="#" class="floating-btn bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-phone-alt text-xl"></i>
</a>
<a href="#" class="floating-btn bg-yellow-500 text-white w-12 h-12 rounded-full flex items-center justify-center">
<i class="fas fa-question text-xl"></i>
</a>
</div>
</div>
<script>
// Mobile menu toggle
document.querySelector('.fa-bars').addEventListener('click', function() {
const navLinks = document.querySelector('.md\\:flex.space-x-6');
if (navLinks.classList.contains('hidden')) {
navLinks.classList.remove('hidden');
navLinks.classList.add('absolute', 'top-16', 'left-0', 'right-0', 'bg-white', 'shadow-md', 'p-4', 'flex', 'flex-col', 'space-y-4', 'space-x-0', 'md:hidden');
} else {
navLinks.classList.add('hidden');
navLinks.classList.remove('absolute', 'top-16', 'left-0', 'right-0', 'bg-white', 'shadow-md', 'p-4', 'flex', 'flex-col', 'space-y-4', 'space-x-0', 'md:hidden');
}
});
// Animate elements when they come into view
const animateOnScroll = () => {
const elements = document.querySelectorAll('.animate-fadeIn');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
};
window.addEventListener('scroll', animateOnScroll);
window.addEventListener('load', animateOnScroll);
// 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'
});
}
});
});
</script>
</body>
</html>