Skip to content

Commit bbe3985

Browse files
shyn2910shyn2910
authored
Add files via upload
1 parent 93630c5 commit bbe3985

File tree

4 files changed

+231
-0
lines changed

4 files changed

+231
-0
lines changed

‎2026/bg.jpg‎

173 KB
Loading

‎2026/index.html‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
<!DOCTYPE html>
2+
<html lang="vi">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Happy Lunar New Year 2026</title>
6+
7+
<style>
8+
html,body{
9+
margin:0;
10+
height:100%;
11+
overflow:hidden;
12+
font-family:'Segoe UI',sans-serif;
13+
}
14+
15+
body{
16+
background:url('bg.jpg') center/cover no-repeat;
17+
color:#ffd700;
18+
}
19+
20+
.overlay{
21+
position:absolute;
22+
inset:0;
23+
background:rgba(0,0,0,0.55);
24+
}
25+
26+
.logo{
27+
position:absolute;
28+
top:20px;
29+
left:20px;
30+
width:90px;
31+
}
32+
33+
.container{
34+
position:relative;
35+
z-index:2;
36+
height:100%;
37+
display:flex;
38+
justify-content:center;
39+
align-items:center;
40+
}
41+
42+
.card{
43+
background:rgba(0,0,0,0.6);
44+
padding:40px 70px;
45+
border-radius:20px;
46+
text-align:center;
47+
box-shadow:0 0 30px gold;
48+
}
49+
50+
h1{
51+
font-size:38px;
52+
letter-spacing:2px;
53+
margin-bottom:10px;
54+
}
55+
56+
.time{
57+
font-size:48px;
58+
margin:10px 0;
59+
}
60+
61+
.date,.lunar{
62+
font-size:18px;
63+
margin:5px;
64+
}
65+
66+
.days{
67+
font-size:52px;
68+
font-weight:bold;
69+
color:#ff4444;
70+
}
71+
72+
.wish{
73+
margin-top:20px;
74+
font-size:22px;
75+
animation:blink 2s infinite;
76+
}
77+
78+
@keyframes blink{
79+
0%,100%{opacity:1}
80+
50%{opacity:0.4}
81+
}
82+
83+
#musicBtn{
84+
position:absolute;
85+
top:20px;
86+
right:20px;
87+
background:#b30000;
88+
color:gold;
89+
border:none;
90+
padding:10px 18px;
91+
border-radius:8px;
92+
cursor:pointer;
93+
}
94+
95+
canvas{
96+
position:absolute;
97+
inset:0;
98+
z-index:1;
99+
}
100+
</style>
101+
</head>
102+
103+
<body>
104+
105+
<div class="overlay"></div>
106+
<canvas id="firework"></canvas>
107+
108+
<img src="logo.png" class="logo">
109+
110+
<button id="musicBtn">🔊 Bật nhạc</button>
111+
112+
<audio id="music" loop>
113+
<source src="music.mp3" type="audio/mpeg">
114+
</audio>
115+
116+
<div class="container">
117+
<div class="card">
118+
119+
<h1>🎊 ĐẾM NGÀY TẾT 2026 🎊</h1>
120+
<div class="time" id="clock"></div>
121+
<div class="date" id="solar"></div>
122+
<div class="lunar" id="lunar"></div>
123+
124+
<div>Còn <span class="days" id="days"></span> ngày nữa</div>
125+
126+
<div class="wish">
127+
🌸 Chúc Mừng Năm Mới 2026 – An Khang Thịnh Vượng – Vạn Sự Như Ý 🌸
128+
</div>
129+
130+
</div>
131+
</div>
132+
133+
<script>
134+
// ================= CLOCK =================
135+
function update(){
136+
let now=new Date();
137+
138+
clock.innerHTML=
139+
String(now.getHours()).padStart(2,0)+":"+
140+
String(now.getMinutes()).padStart(2,0)+":"+
141+
String(now.getSeconds()).padStart(2,0);
142+
143+
solar.innerHTML=
144+
"Dương lịch: "+now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getFullYear();
145+
146+
// Lunar simple
147+
function jd(d,m,y){
148+
let a=Math.floor((14-m)/12);
149+
y=y+4800-a; m=m+12*a-3;
150+
return d+Math.floor((153*m+2)/5)+365*y+
151+
Math.floor(y/4)-Math.floor(y/100)+Math.floor(y/400)-32045;
152+
}
153+
function newMoon(k){
154+
let T=k/1236.85;
155+
let jd=2415020.75933+29.53058868*k;
156+
return Math.floor(jd+0.5);
157+
}
158+
let j=jd(now.getDate(),now.getMonth()+1,now.getFullYear());
159+
let k=Math.floor((j-2415021)/29.53);
160+
let m=newMoon(k);
161+
if(m>j) m=newMoon(k-1);
162+
let lunarDay=j-m+1;
163+
let lunarMonth=(k%12)+1;
164+
lunar.innerHTML="Âm lịch: "+lunarDay+"/"+lunarMonth;
165+
166+
let tet=new Date("2026-02-17");
167+
let diff=Math.ceil((tet-now)/(1000*60*60*24));
168+
days.innerHTML= diff>0?diff:"Hôm nay là Tết 🎉";
169+
}
170+
setInterval(update,1000);
171+
update();
172+
173+
// ================= MUSIC =================
174+
const music=document.getElementById("music");
175+
const btn=document.getElementById("musicBtn");
176+
let playing=false;
177+
178+
btn.onclick=()=>{
179+
if(!playing){
180+
music.play();
181+
btn.innerText="🔇 Tắt nhạc";
182+
}else{
183+
music.pause();
184+
btn.innerText="🔊 Bật nhạc";
185+
}
186+
playing=!playing;
187+
}
188+
189+
// ================= FIREWORK =================
190+
const canvas=document.getElementById("firework");
191+
const ctx=canvas.getContext("2d");
192+
canvas.width=innerWidth;
193+
canvas.height=innerHeight;
194+
195+
let particles=[];
196+
197+
function spawn(){
198+
let x=Math.random()*canvas.width;
199+
let y=Math.random()*canvas.height/2;
200+
for(let i=0;i<60;i++){
201+
particles.push({
202+
x,y,
203+
vx:(Math.random()-0.5)*6,
204+
vy:(Math.random()-0.5)*6,
205+
life:60
206+
});
207+
}
208+
}
209+
210+
function draw(){
211+
ctx.fillStyle="rgba(0,0,0,0.2)";
212+
ctx.fillRect(0,0,canvas.width,canvas.height);
213+
214+
particles.forEach((p,i)=>{
215+
ctx.fillStyle="gold";
216+
ctx.fillRect(p.x,p.y,3,3);
217+
p.x+=p.vx;
218+
p.y+=p.vy;
219+
p.life--;
220+
if(p.life<=0) particles.splice(i,1);
221+
});
222+
223+
requestAnimationFrame(draw);
224+
}
225+
226+
setInterval(spawn,800);
227+
draw();
228+
</script>
229+
230+
</body>
231+
</html>

‎2026/logo.png‎

2 MB
Loading

‎2026/music.mp3‎

7.62 MB
Binary file not shown.

0 commit comments

Comments
 (0)