<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>สวัสดีปีใหม่ 2569</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Prompt', sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Particle Canvas */
#particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* Main Container */
.container {
position: relative;
z-index: 10;
text-align: center;
padding: 40px;
max-width: 900px;
}
/* Thai Pattern Border */
.pattern-border {
position: relative;
padding: 30px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 30px;
border: 2px solid rgba(255, 215, 0, 0.3);
box-shadow:
0 0 60px rgba(255, 215, 0, 0.2),
inset 0 0 60px rgba(255, 215, 0, 0.1);
}
.pattern-border::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
background-size: 400% 400%;
border-radius: 35px;
z-index: -1;
animation: borderGlow 3s ease infinite;
}
@keyframes borderGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Year Display */
.year-container {
margin-bottom: 20px;
}
.year-2569 {
font-size: 120px;
font-weight: 700;
background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientText 4s ease infinite, float 3s ease-in-out infinite;
text-shadow: none;
filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}
@keyframes gradientText {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-15px) rotate(2deg); }
}
/* Main Greeting */
.greeting {
font-size: 48px;
color: #fff;
margin-bottom: 15px;
font-weight: 600;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
animation: fadeInUp 1s ease forwards;
opacity: 0;
}
.greeting .thai-text {
color: #feca57;
}
/* Sub Greeting */
.sub-greeting {
font-size: 24px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.3s forwards;
opacity: 0;
}
/* Decorative Elements */
.decorations {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.5s forwards;
opacity: 0;
}
.decoration-item {
font-size: 50px;
animation: bounce 2s ease-in-out infinite;
}
.decoration-item:nth-child(1) { animation-delay: 0s; }
.decoration-item:nth-child(2) { animation-delay: 0.2s; }
.decoration-item:nth-child(3) { animation-delay: 0.4s; }
.decoration-item:nth-child(4) { animation-delay: 0.6s; }
.decoration-item:nth-child(5) { animation-delay: 0.8s; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Countdown Section */
.countdown-container {
margin: 30px 0;
animation: fadeInUp 1s ease 0.7s forwards;
opacity: 0;
}
.countdown-title {
color: #fff;
font-size: 20px;
margin-bottom: 15px;
color: #feca57;
}
.countdown {
display: flex;
justify-content: center;
gap: 20px;
}
.countdown-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
padding: 20px 30px;
border-radius: 15px;
min-width: 100px;
border: 1px solid rgba(255, 215, 0, 0.3);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.countdown-item:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
.countdown-number {
font-size: 48px;
font-weight: 700;
color: #fff;
display: block;
}
.countdown-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
}
/* Blessing Message */
.blessing {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 107, 107, 0.1));
padding: 25px 40px;
border-radius: 20px;
margin: 30px 0;
border: 1px solid rgba(255, 215, 0, 0.3);
animation: fadeInUp 1s ease 0.9s forwards;
opacity: 0;
}
.blessing-text {
font-size: 28px;
color: #feca57;
font-weight: 500;
line-height: 1.6;
}
/* Button */
.celebrate-btn {
background: linear-gradient(135deg, #ff6b6b, #feca57);
color: #1a1a2e;
border: none;
padding: 18px 50px;
font-size: 22px;
font-weight: 600;
font-family: 'Prompt', sans-serif;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 1.1s forwards, pulse 2s ease-in-out infinite;
opacity: 0;
box-shadow: 0 10px 40px rgba(255, 107, 107, 0.4);
}
.celebrate-btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 20px 60px rgba(255, 107, 107, 0.6);
}
@keyframes pulse {
0%, 100% { box-shadow: 0 10px 40px rgba(255, 107, 107, 0.4); }
50% { box-shadow: 0 10px 60px rgba(254, 202, 87, 0.6); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fireworks Container */
#fireworks-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
/* Lantern Effect */
.lantern {
position: fixed;
font-size: 40px;
animation: lanternFloat 8s ease-in-out infinite;
z-index: 2;
filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.8));
}
.lantern:nth-child(1) { left: 5%; animation-delay: 0s; }
.lantern:nth-child(2) { left: 15%; animation-delay: 1s; }
.lantern:nth-child(3) { left: 25%; animation-delay: 2s; }
.lantern:nth-child(4) { left: 75%; animation-delay: 0.5s; }
.lantern:nth-child(5) { left: 85%; animation-delay: 1.5s; }
.lantern:nth-child(6) { left: 95%; animation-delay: 2.5s; }
@keyframes lanternFloat {
0%, 100% {
transform: translateY(0) rotate(-5deg);
opacity: 0.8;
}
50% {
transform: translateY(-30px) rotate(5deg);
opacity: 1;
}
}
/* Sparkle Effect */
.sparkle {
position: absolute;
width: 10px;
height: 10px;
background: #feca57;
border-radius: 50%;
animation: sparkle 1.5s ease-in-out infinite;
}
@keyframes sparkle {
0%, 100% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
}
/* Responsive */
@media (max-width: 768px) {
.year-2569 {
font-size: 80px;
}
.greeting {
font-size: 32px;
}
.sub-greeting {
font-size: 18px;
}
.countdown {
gap: 10px;
}
.countdown-item {
padding: 15px 20px;
min-width: 70px;
}
.countdown-number {
font-size: 32px;
}
.blessing-text {
font-size: 22px;
}
.decorations {
gap: 10px;
}
.decoration-item {
font-size: 35px;
}
}
/* Celebration Burst Animation */
.burst {
position: fixed;
pointer-events: none;
z-index: 100;
}
.burst-particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
animation: burstParticle 1s ease-out forwards;
}
@keyframes burstParticle {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(0);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- Canvas for Particles -->
<canvas id="particles"></canvas>
<!-- Fireworks Container -->
<div id="fireworks-container"></div>
<!-- Floating Lanterns -->
<div class="lantern">🏮</div>
<div class="lantern">🏮</div>
<div class="lantern">🏮</div>
<div class="lantern">🏮</div>
<div class="lantern">🏮</div>
<div class="lantern">🏮</div>
<!-- Main Content -->
<div class="container">
<div class="pattern-border">
<div class="year-container">
<div class="year-2569">๒๕๖๙</div>
</div>
<div class="decorations">
<span class="decoration-item">🎆</span>
<span class="decoration-item">✨</span>
<span class="decoration-item">🧧</span>
<span class="decoration-item">🎊</span>
<span class="decoration-item">🌟</span>
</div>
<h1 class="greeting">
<span class="thai-text">สวัสดีปีใหม่</span> พ.ศ. ๒๕๖๙
</h1>
<p class="sub-greeting">
Happy New Year 2026
</p>
<div class="countdown-container">
<p class="countdown-title">นับถอยหลังสู่ปีใหม่</p>
<div class="countdown">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">วัน</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">ชั่วโมง</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">นาที</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">วินาที</span>
</div>
</div>
</div>
<div class="blessing">
<p class="blessing-text">
🎄 ขอให้ปีใหม่เป็นปีแห่งความสุข ความสำเร็จ <br>
และความฝันที่เป็นจริง สุขภาพแข็งแรง ร่ำรวยตลอดปี 🎄
</p>
</div>
<button class="celebrate-btn" onclick="celebrate()">
🎉 ส่งความสุขให้เพื่อน! 🎉
</button>
</div>
</div>
<script>
// Particle System
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const particleCount = 150;
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 4 + 1;
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = (Math.random() - 0.5) * 2;
this.color = this.getRandomColor();
this.opacity = Math.random() * 0.5 + 0.3;
}
getRandomColor() {
const colors = [
'255, 107, 107', // Coral
'254, 202, 87', // Yellow
'72, 219, 251', // Cyan
'255, 159, 243', // Pink
'84, 160, 255', // Blue
'255, 215, 0' // Gold
];
return colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
this.reset();
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.color}, ${this.opacity})`;
ctx.fill();
// Add glow effect
ctx.shadowBlur = 10;
ctx.shadowColor = `rgba(${this.color}, 0.5)`;
}
}
function initParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animateParticles);
}
initParticles();
animateParticles();
// Resize canvas on window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Firework System
const fireworksContainer = document.getElementById('fireworks-container');
function createFirework(x, y) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = x + 'px';
firework.style.top = y + 'px';
const colors = ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#ffd700'];
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
const angle = (i / particleCount) * Math.PI * 2;
const velocity = Math.random() * 100 + 50;
const tx = Math.cos(angle) * velocity;
const ty = Math.sin(angle) * velocity;
particle.style.cssText = `
position: absolute;
width: 8px;
height: 8px;
background: ${colors[Math.floor(Math.random() * colors.length)]};
border-radius: 50%;
--tx: ${tx}px;
--ty: ${ty}px;
animation: fireworkParticle 1s ease-out forwards;
`;
firework.appendChild(particle);
}
fireworksContainer.appendChild(firework);
setTimeout(() => {
firework.remove();
}, 1000);
}
// Add firework animation styles
const style = document.createElement('style');
style.textContent = `
@keyframes fireworkParticle {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(0);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// Auto fireworks
function autoFireworks() {
const x = Math.random() * window.innerWidth;
const y = Math.random() * (window.innerHeight * 0.6);
createFirework(x, y);
}
setInterval(autoFireworks, 800);
// Countdown Timer
function updateCountdown() {
const now = new Date();
const year = now.getFullYear() + 1; // Next year
const newYear = new Date(year, 0, 1, 0, 0, 0);
const diff = newYear - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
// Celebrate Button Effect
function celebrate() {
// Create burst effect
const burst = document.createElement('div');
burst.className = 'burst';
burst.style.left = '50%';
burst.style.top = '50%';
const colors = ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#ffd700'];
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
const angle = (i / 50) * Math.PI * 2;
const distance = Math.random() * 200 + 100;
const tx = Math.cos(angle) * distance;
const ty = Math.sin(angle) * distance;
particle.className = 'burst-particle';
particle.style.cssText = `
background: ${colors[Math.floor(Math.random() * colors.length)]};
--tx: ${tx}px;
--ty: ${ty}px;
`;
burst.appendChild(particle);
}
document.body.appendChild(burst);
// Create multiple fireworks
for (let i = 0; i < 10; i++) {
setTimeout(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * (window.innerHeight * 0.5);
createFirework(x, y);
}, i * 100);
}
setTimeout(() => {
burst.remove();
}, 1000);
}
// Add click effect to create fireworks
document.addEventListener('click', (e) => {
createFirework(e.clientX, e.clientY);
});
// Thai decorative sparkles
function createSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
sparkle.style.left = Math.random() * 100 + '%';
sparkle.style.top = Math.random() * 100 + '%';
document.body.appendChild(sparkle);
setTimeout(() => {
sparkle.remove();
}, 1500);
}
setInterval(createSparkle, 500);
</script>
</body>
</html>