<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>สวัสดีปีใหม่ 2569 | Happy New Year</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Itim&family=Sriracha&family=Charmonman:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Itim', cursive;
background: linear-gradient(135deg, #0a1a3d 0%, #1a0b2e 50%, #0a1a3d 100%);
color: #fff;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
/* พื้นหลังลายดอกทอง */
.background-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.05) 2px, transparent 2px),
radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 2px, transparent 2px),
radial-gradient(circle at 40% 90%, rgba(255, 215, 0, 0.05) 2px, transparent 2px),
radial-gradient(circle at 60% 10%, rgba(255, 215, 0, 0.05) 2px, transparent 2px);
background-size: 300px 300px;
z-index: -2;
opacity: 0.5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
position: relative;
z-index: 1;
}
/* หัวข้อหลัก */
.header {
margin-bottom: 30px;
position: relative;
}
.year {
font-family: 'Charmonman', cursive;
font-size: 8rem;
font-weight: 700;
color: #FFD700;
text-shadow: 0 0 20px #FFD700, 0 0 40px #FF8C00;
margin-bottom: 10px;
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
0% { transform: scale(1); text-shadow: 0 0 20px #FFD700, 0 0 40px #FF8C00; }
100% { transform: scale(1.05); text-shadow: 0 0 30px #FFD700, 0 0 60px #FF8C00; }
}
.greeting {
font-family: 'Sriracha', cursive;
font-size: 4.5rem;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF4500;
position: relative;
display: inline-block;
}
.greeting::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: linear-gradient(90deg, transparent, #FFD700, transparent);
}
/* การ์ดอวยพร */
.wish-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
max-width: 800px;
border: 2px solid rgba(255, 215, 0, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.wish-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
z-index: -1;
}
.thai-wish {
font-size: 2.2rem;
line-height: 1.6;
color: #FFD700;
margin-bottom: 25px;
font-family: 'Sriracha', cursive;
}
.english-wish {
font-size: 1.5rem;
color: #87CEEB;
font-style: italic;
margin-bottom: 25px;
}
.blessing {
font-size: 1.8rem;
color: #98FB98;
margin-top: 20px;
padding: 15px;
border-radius: 10px;
background: rgba(0, 100, 0, 0.2);
border-left: 5px solid #98FB98;
}
/* องค์ประกอบไทย */
.thai-element {
position: absolute;
font-size: 3rem;
opacity: 0.7;
z-index: -1;
}
.element-1 { top: 10%; left: 5%; color: #FF6347; }
.element-2 { top: 15%; right: 8%; color: #1E90FF; }
.element-3 { bottom: 20%; left: 10%; color: #FFD700; }
.element-4 { bottom: 15%; right: 5%; color: #32CD32; }
/* ดอกไม้ไฟ */
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 2px #fff;
z-index: -1;
}
/* การควบคุม */
.controls {
margin-top: 30px;
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
background: linear-gradient(45deg, #FF4500, #FF8C00);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-family: 'Itim', cursive;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 5px 15px rgba(255, 69, 0, 0.4);
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 69, 0, 0.6);
}
.btn:active {
transform: translateY(0);
}
.btn-music {
background: linear-gradient(45deg, #1E90FF, #4169E1);
box-shadow: 0 5px 15px rgba(30, 144, 255, 0.4);
}
.btn-music:hover {
box-shadow: 0 10px 20px rgba(30, 144, 255, 0.6);
}
/* เอฟเฟกต์ดอกไม้ปลายหน้า */
.flower {
position: absolute;
font-size: 1.5rem;
opacity: 0;
z-index: -1;
}
/* ส่วนท้าย */
.footer {
margin-top: 40px;
font-size: 1.2rem;
color: #87CEEB;
text-align: center;
padding: 20px;
width: 100%;
border-top: 1px solid rgba(255, 215, 0, 0.3);
}
.footer p {
margin: 10px 0;
}
/* การตอบสนองกับอุปกรณ์ต่างๆ */
@media (max-width: 768px) {
.year {
font-size: 5rem;
}
.greeting {
font-size: 3rem;
}
.thai-wish {
font-size: 1.8rem;
}
.english-wish {
font-size: 1.2rem;
}
.blessing {
font-size: 1.5rem;
}
.wish-card {
padding: 25px;
margin: 20px 15px;
}
.controls {
flex-direction: column;
align-items: center;
}
.btn {
width: 250px;
justify-content: center;
}
}
@media (max-width: 480px) {
.year {
font-size: 4rem;
}
.greeting {
font-size: 2.5rem;
}
.thai-wish {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<!-- พื้นหลังลายดอกทอง -->
<div class="background-pattern"></div>
<!-- องค์ประกอบไทย -->
<div class="thai-element element-1">✿</div>
<div class="thai-element element-2">❀</div>
<div class="thai-element element-3">✾</div>
<div class="thai-element element-4">❁</div>
<!-- คอนเทนเนอร์หลัก -->
<div class="container">
<div class="header">
<h1 class="year">2569</h1>
<h2 class="greeting">สวัสดีปีใหม่</h2>
<p style="font-size: 1.8rem; color: #87CEEB;">สุขสันต์วันปีใหม่ พ.ศ. 2569</p>
</div>
<div class="wish-card">
<p class="thai-wish">ขอให้ปีใหม่นี้<br/>นำมาซึ่งความสุข ความเจริญ<br/>และความสำเร็จในทุกๆ ด้าน</p>
<p class="english-wish">May this New Year bring you<br/>happiness, prosperity, and success in all aspects of life</p>
<p class="blessing">สุขภาพแข็งแรง ร่ำรวยเงินทอง มิตรภาพแน่นแฟ้น</p>
</div>
<div class="controls">
<button class="btn" id="fireworkBtn">
<i class="fas fa-fire"></i> ยิงพลุฉลองปีใหม่
</button>
<button class="btn btn-music" id="musicBtn">
<i class="fas fa-music"></i> เปิด/ปิด เพลงบรรเลง
</button>
<button class="btn" id="flowerBtn">
<i class="fas fa-spa"></i> ปล่อยดอกไม้
</button>
</div>
<div class="footer">
<p>สร้างด้วย ❤️ จากประเทศไทย</p>
<p>สวัสดีปีใหม่ 2569 ขอให้ทุกท่านจงมีแต่ความสุขตลอดไป</p>
<p>© 2025 - 2026 | Happy New Year</p>
</div>
</div>
<!-- ดอกไม้ไฟ -->
<div id="fireworks-container"></div>
<!-- เพลงพื้นหลัง -->
<audio id="bgMusic" loop>
<source src="https://assets.mixkit.co/music/preview/mixkit-thai-traditional-celebration-488.mp3" type="audio/mpeg">
</audio>
<script>
// องค์ประกอบ DOM
const fireworkBtn = document.getElementById('fireworkBtn');
const musicBtn = document.getElementById('musicBtn');
const flowerBtn = document.getElementById('flowerBtn');
const bgMusic = document.getElementById('bgMusic');
const fireworksContainer = document.getElementById('fireworks-container');
const container = document.querySelector('.container');
// สถานะการเล่นเพลง
let isMusicPlaying = false;
// ฟังก์ชันสร้างดอกไม้ไฟ
function createFirework(x, y) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = `${x}px`;
firework.style.top = `${y}px`;
fireworksContainer.appendChild(firework);
// สีแบบสุ่มสำหรับดอกไม้ไฟ
const colors = ['#FF0000', '#FFD700', '#00FF00', '#1E90FF', '#FF69B4', '#FF8C00'];
const color = colors[Math.floor(Math.random() * colors.length)];
// ขนาดและความเร็วแบบสุ่ม
const size = Math.random() * 8 + 2;
const speedX = (Math.random() - 0.5) * 10;
const speedY = (Math.random() - 0.5) * 10;
firework.style.width = `${size}px`;
firework.style.height = `${size}px`;
firework.style.backgroundColor = color;
firework.style.boxShadow = `0 0 10px 2px ${color}`;
// แอนิเมชันดอกไม้ไฟ
let posX = x;
let posY = y;
let opacity = 1;
let scale = 1;
const explode = setInterval(() => {
posX += speedX;
posY += speedY;
opacity -= 0.02;
scale += 0.05;
firework.style.left = `${posX}px`;
firework.style.top = `${posY}px`;
firework.style.opacity = opacity;
firework.style.transform = `scale(${scale})`;
if (opacity <= 0) {
clearInterval(explode);
firework.remove();
}
}, 20);
}
// ฟังก์ชันสร้างดอกไม้ไฟหลายดอก
function createFireworks(count) {
for (let i = 0; i < count; i++) {
setTimeout(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createFirework(x, y);
}, i * 100);
}
}
// ฟังก์ชันสร้างดอกไม้ลอย
function createFlower() {
const flower = document.createElement('div');
flower.className = 'flower';
flower.innerHTML = '❀';
// สีแบบสุ่ม
const colors = ['#FF69B4', '#FFD700', '#98FB98', '#87CEEB', '#FFA07A'];
const color = colors[Math.floor(Math.random() * colors.length)];
// ตำแหน่งเริ่มต้นแบบสุ่ม
const startX = Math.random() * window.innerWidth;
flower.style.left = `${startX}px`;
flower.style.top = `${window.innerHeight + 20}px`;
flower.style.color = color;
flower.style.fontSize = `${Math.random() * 2 + 1.5}rem`;
document.body.appendChild(flower);
// แอนิเมชันดอกไม้ลอย
let posY = window.innerHeight + 20;
let opacity = 1;
let sway = 0;
const swaySpeed = Math.random() * 0.05 + 0.02;
const swayAmount = Math.random() * 50 + 20;
const float = setInterval(() => {
posY -= 1.5;
opacity -= 0.002;
sway += swaySpeed;
const currentX = startX + Math.sin(sway) * swayAmount;
flower.style.left = `${currentX}px`;
flower.style.top = `${posY}px`;
flower.style.opacity = opacity;
if (posY < -50 || opacity <= 0) {
clearInterval(float);
flower.remove();
}
}, 20);
}
// ฟังก์ชันสร้างดอกไม้หลายดอก
function createFlowers(count) {
for (let i = 0; i < count; i++) {
setTimeout(() => {
createFlower();
}, i * 300);
}
}
// Event Listeners
fireworkBtn.addEventListener('click', () => {
createFireworks(50);
// เพิ่มเอฟเฟกต์เสียง
const fireworkSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-fireworks-display-1560.mp3');
fireworkSound.volume = 0.3;
fireworkSound.play().catch(e => console.log("เสียงพลุไม่สามารถเล่นได้: ", e));
});
musicBtn.addEventListener('click', () => {
if (isMusicPlaying) {
bgMusic.pause();
musicBtn.innerHTML = '<i class="fas fa-music"></i> เปิดเพลงบรรเลง';
} else {
bgMusic.play().catch(e => {
console.log("ไม่สามารถเล่นเพลงได้: ", e);
alert("เพลงอาจถูกบล็อกโดยเบราว์เซอร์ กรุณาคลิกที่หน้าจอหนึ่งครั้งก่อนเปิดเพลง");
});
musicBtn.innerHTML = '<i class="fas fa-volume-up"></i> ปิดเพลงบรรเลง';
}
isMusicPlaying = !isMusicPlaying;
});
flowerBtn.addEventListener('click', () => {
createFlowers(15);
});
// สร้างดอกไม้ไฟแบบอัตโนมัติเป็นระยะ
setInterval(() => {
if (Math.random() > 0.7) {
createFireworks(5);
}
}, 3000);
// สร้างดอกไม้แบบอัตโนมัติเป็นระยะ
setInterval(() => {
if (Math.random() > 0.8) {
createFlower();
}
}, 2000);
// ดอกไม้ไฟเมื่อคลิกที่หน้าจอ
document.addEventListener('click', (e) => {
if (e.target.tagName !== 'BUTTON') {
createFirework(e.clientX, e.clientY);
}
});
// เริ่มต้นดอกไม้ไฟเมื่อโหลดหน้าเว็บ
window.addEventListener('load', () => {
setTimeout(() => {
createFireworks(30);
}, 500);
// เริ่มต้นดอกไม้
setTimeout(() => {
createFlowers(10);
}, 1000);
// ข้อความต้อนรับในคอนโซล
console.log("สวัสดีปีใหม่ 2569! ขอให้มีความสุขตลอดปีใหม่นี้!");
});
</script>
</body>
</html>