<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
overflow: hidden;
font-family: 'Prompt', sans-serif;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.container {
text-align: center;
color: white;
z-index: 10;
position: relative;
}
h1 {
font-size: 4.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, #ffd700, #ff6b6b, #feca57);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: glow 3s ease-in-out infinite alternate;
}
p {
font-size: 1.8rem;
margin-bottom: 30px;
opacity: 0;
animation: fadeInUp 1.5s forwards 1s;
}
.thai-pattern {
position: absolute;
width: 300px;
height: 300px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L61 35 L88 38 L68 57 L72 85 L50 72 L28 85 L32 57 L12 38 L39 35 Z" fill="%23ffd700" opacity="0.1"/></svg>') repeat;
border-radius: 50%;
animation: rotate 30s linear infinite;
opacity: 0.3;
}
.pattern1 { top: -100px; left: -100px; width: 400px; height: 400px; }
.pattern2 { bottom: -150px; right: -120px; width: 500px; height: 500px; animation-direction: reverse; }
.firework {
position: absolute;
width: 6px;
height: 6px;
background: #ffd700;
border-radius: 50%;
pointer-events: none;
}
.lantern {
position: absolute;
width: 60px;
height: 80px;
background: radial-gradient(#ff6b6b, #feca57);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: 0 0 30px #ffd700;
animation: float 6s ease-in-out infinite;
}
.lantern::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 40px;
background: #ffd700;
}
.sparkle {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
animation: sparkle 2s linear infinite;
}
@keyframes glow {
from { filter: drop-shadow(0 0 10px #ffd700); }
to { filter: drop-shadow(0 0 30px #ff6b6b); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(5deg); }
}
@keyframes sparkle {
0% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0); }
}
.countdown {
font-size: 2rem;
margin-top: 40px;
opacity: 0;
animation: fadeInUp 1.5s forwards 2s;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="thai-pattern pattern1"></div>
<div class="thai-pattern pattern2"></div>
<div class="container">
<h1>สวัสดีปีใหม่</h1>
<p>ขอให้ปี 2569 เต็มไปด้วยความสุข ความเจริญ ร่ำรวยเงินทอง</p>
<div class="countdown">ปีใหม่มาถึงในอีกไม่ช้า...</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;
// สร้างโคมลวดลอย
function createLantern() {
const lantern = document.createElement('div');
lantern.className = 'lantern';
lantern.style.left = Math.random() * window.innerWidth + 'px';
lantern.style.top = window.innerHeight + 'px';
lantern.style.animationDelay = Math.random() * 5 + 's';
lantern.style.animationDuration = (Math.random() * 4 + 6) + 's';
body.appendChild(lantern);
setTimeout(() => {
lantern.remove();
}, 15000);
}
// สร้างดอกไม้ไฟ
function createFirework() {
const firework = document.createElement('div');
firework.className = 'firework';
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight * 0.6;
firework.style.left = x + 'px';
firework.style.top = y + 'px';
body.appendChild(firework);
for (let i = 0; i < 12; i++) {
const particle = document.createElement('div');
particle.className = 'firework';
particle.style.position = 'absolute';
particle.style.left = x + 'px';
particle.style.top = y + 'px';
const angle = i * 30;
const velocity = 5 + Math.random() * 5;
const vx = Math.cos(angle * Math.PI / 180) * velocity;
const vy = Math.sin(angle * Math.PI / 180) * velocity;
let px = x;
let py = y;
let opacity = 1;
const animate = () => {
px += vx;
py += vy;
vy += 0.2;
opacity -= 0.02;
particle.style.left = px + 'px';
particle.style.top = py + 'px';
particle.style.opacity = opacity;
if (opacity > 0) {
requestAnimationFrame(animate);
} else {
particle.remove();
}
};
body.appendChild(particle);
animate();
}
setTimeout(() => firework.remove(), 1000);
}
// สร้างประกายแสง
function createSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
sparkle.style.left = Math.random() * window.innerWidth + 'px';
sparkle.style.top = Math.random() * window.innerHeight + 'px';
sparkle.style.animationDelay = Math.random() * 2 + 's';
body.appendChild(sparkle);
setTimeout(() => sparkle.remove(), 2000);
}
// เริ่มลูกเล่น
setInterval(createLantern, 3000);
setInterval(createFirework, 4000);
setInterval(createSparkle, 800);
// สร้างโคมลอยเริ่มต้น
for (let i = 0; i < 5; i++) {
setTimeout(createLantern, i * 2000);
}
// เคานต์ดาวน์ปีใหม่ (แสดงผลแบบเรียลไทม์)
function updateCountdown() {
const now = new Date();
const nextYear = new Date(now.getFullYear() + 1, 0, 1);
const diff = nextYear - 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);
const countdownEl = document.querySelector('.countdown');
if (countdownEl) {
countdownEl.textContent = `อีก ${days} วัน ${hours} ชั่วโมง ${minutes} นาที ${seconds} วินาที`;
}
}
updateCountdown();
setInterval(updateCountdown, 1000);
});
</script>
</body>
</html>