<!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 href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;700;900&family=Space+Mono&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Kanit', sans-serif;
background: #0f172a;
overflow-x: hidden;
color: white;
}
.math-float {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.3;
animation: float 10s linear infinite;
font-family: 'Space Mono', monospace;
}
@keyframes float {
0% { transform: translateY(110vh) rotate(0deg); }
100% { transform: translateY(-10vh) rotate(360deg); }
}
.hero-text {
text-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.4);
}
.card-gradient {
background: linear-gradient(135deg, rgba(88, 28, 135, 0.8) 0%, rgba(30, 58, 138, 0.8) 100%);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.shake-on-hover:hover {
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
}
.btn-fancy {
background: linear-gradient(45deg, #f472b6, #8b5cf6);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-fancy:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 0 30px rgba(244, 114, 182, 0.6);
}
#confetti-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 50;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<canvas id="confetti-canvas"></canvas>
<!-- Background Math Symbols -->
<div id="math-container"></div>
<main class="z-10 text-center max-w-4xl">
<div class="mb-6 inline-block animate-bounce">
<span class="text-6xl">?</span>
</div>
<h1 class="hero-text text-5xl md:text-8xl font-black mb-4 uppercase tracking-tighter italic">
สอวน. ค่าย 6!
</h1>
<p class="text-xl md:text-2xl font-light mb-8 text-purple-200">
ขอแสดงความยินดีกับ <span class="font-bold text-yellow-400">"อัจฉริยะผู้ไม่กินเส้นขนาน"</span>
</p>
<div class="card-gradient p-8 rounded-3xl shadow-2xl mb-10 relative overflow-hidden">
<div class="absolute -top-10 -right-10 w-32 h-32 bg-yellow-400 rounded-full opacity-20 blur-3xl"></div>
<h2 class="text-2xl font-bold mb-4 text-pink-300">ประกาศนียบัตรความกาวขั้นสูง</h2>
<div class="space-y-4 text-lg">
<p>ทางสถาบันวิจัยคนหล่อคณิตศาสตร์ (สวค.) ขอรับรองว่าคุณคือ:</p>
<ul class="text-left inline-block space-y-2">
<li>✅ ผู้ที่มองเห็น $\pi$ เป็นอาหารเช้า</li>
<li>✅ ผู้ที่แก้โจทย์อสมการได้เร็วกว่าแก้ผ้า</li>
<li>✅ ผู้ที่พิสูจน์ได้ว่า "เหนื่อย" คือตัวแปรหนึ่งของ "ความสำเร็จ"</li>
<li>✅ ผู้รอดชีวิตจากการทำโจทย์จนมองเห็นเลข 0 เป็นหน้าพระอินทร์</li>
</ul>
<p class="mt-6 font-bold text-green-400">คุณได้รับการขนานนามว่าเป็น: "จอมมารอินทิกรัล 8 ชั้น"</p>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4">
<button onclick="launchConfetti()" class="btn-fancy px-8 py-4 rounded-full font-bold text-white shadow-lg">
จุดพลุฉลองโว้ยยย!
</button>
<button onclick="changeQuote()" class="bg-white/10 hover:bg-white/20 backdrop-blur px-8 py-4 rounded-full font-bold transition-all">
ฟังคำคมแก้เครียด
</button>
</div>
<p id="quote-box" class="mt-12 italic text-gray-400 min-h-[3rem] text-lg">
"จงเป็นเหมือนเส้นขนาน... แม้จะไม่ได้คู่กัน แต่ก็อยู่เคียงข้างกันตลอดไป"
</p>
</main>
<footer class="mt-20 text-gray-500 text-sm z-10">
สร้างด้วย $f(x) = Love$ โดย AI เพื่อนยาก
</footer>
<script>
// Generate Floating Math Symbols
const symbols = [
'∑', '∫', 'π', '∞', '√', 'Δ', 'θ', 'λ', 'φ', '≠', '≈',
'f(x)', 'e=mc²', 'a²+b²=c²', 'P=NP?', 'i²', 'sin θ', 'log', 'mod'
];
const container = document.getElementById('math-container');
for (let i = 0; i < 40; i++) {
const div = document.createElement('div');
div.className = 'math-float';
div.innerText = symbols[Math.floor(Math.random() * symbols.length)];
div.style.left = Math.random() * 100 + 'vw';
div.style.fontSize = (Math.random() * 20 + 10) + 'px';
div.style.animationDelay = Math.random() * 10 + 's';
div.style.animationDuration = (Math.random() * 5 + 5) + 's';
container.appendChild(div);
}
// Confetti Logic
const canvas = document.getElementById('confetti-canvas');
const ctx = canvas.getContext('2d');
let particles = [];
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
class Particle {
constructor() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.size = Math.random() * 8 + 4;
this.speedX = (Math.random() - 0.5) * 15;
this.speedY = (Math.random() - 0.5) * 15 - 5;
this.gravity = 0.2;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.life = 100;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.speedY += this.gravity;
this.life -= 1.5;
}
draw() {
ctx.fillStyle = this.color;
ctx.globalAlpha = this.life / 100;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function launchConfetti() {
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].life <= 0) {
particles.splice(i, 1);
i--;
}
}
requestAnimationFrame(animate);
}
animate();
// Absurd Quotes
const quotes = [
"จงเป็นเหมือนเส้นขนาน... แม้จะไม่ได้คู่กัน แต่ก็อยู่เคียงข้างกันตลอดไป",
"คณิตศาสตร์ไม่ใช่เรื่องยาก แค่เรื่องที่เป็นไปไม่ได้",
"โจทย์ข้อนี้ทำได้สองวิธี: วิธีที่ถูก กับวิธีที่ผมทำ",
"ในวันที่คุณท้อ ให้รู้ว่าอย่างน้อย $x$ ก็ยังหาค่าได้",
"ความรักก็เหมือนแคลคูลัส... ซับซ้อนจนอยากจะดรอป",
"เพื่อนที่ดีคือเพื่อนที่ส่งเฉลยมาในรูปของ Matrix",
"สอวน. ค่าย 6 ไม่ใช่ที่สำหรับมนุษย์ แต่มันคือที่สำหรับ 'ตัวแปร'"
];
function changeQuote() {
const qBox = document.getElementById('quote-box');
let newQuote = quotes[Math.floor(Math.random() * quotes.length)];
qBox.style.opacity = 0;
setTimeout(() => {
qBox.innerText = `"${newQuote}"`;
qBox.style.opacity = 1;
}, 300);
}
// Initialize
window.onload = () => {
launchConfetti();
console.log("ยินดีด้วยนะเจ้ามนุษย์คณิตศาสตร์!");
};
</script>
</body>
</html>
หน้าแรก
คณะผู้บริหาร
ข่าวประชาสัมพันธ์
ภาพกิจกรรม
ถาม-ตอบ(Q&A)
สมุดเยี่ยม
ติดต่อเรา
ผู้บริหาร
เมนูโรงเรียน
ฝ่ายบริหารและบุคลากร
คณะผู้บริหาร 
แบบสำรวจความคิดเห็น
สถิติผู้เยี่ยมชม
