Hugging Face's logo

Spaces:
ApiCheck
/
BaiNian
Running

App Files Community
ApiCheck commited on
Commit
52636af
·
verified ·
1 Parent(s): 7549fe7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +352 -19
index.html CHANGED
@@ -1,19 +1,352 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>春节拜年 - LINUX DO</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ padding: 0;
12
+ overflow: hidden;
13
+ background-color: #ff4d4d; /* 红色背景 */
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 100vh;
18
+ position: relative;
19
+ }
20
+
21
+ canvas {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ pointer-events: none;
28
+ z-index: 0; /* 确保烟花在最底层 */
29
+ }
30
+
31
+ .red-envelope {
32
+ width: 200px;
33
+ height: 300px;
34
+ background-color: #d9534f;
35
+ border-radius: 15px;
36
+ position: absolute;
37
+ top: 50%;
38
+ left: 50%;
39
+ transform: translate(-50%, -50%);
40
+ overflow: hidden;
41
+ z-index: 2;
42
+ }
43
+
44
+ .red-envelope .top {
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 0;
50
+ background-color: #a92b29;
51
+ animation: openTop 2s ease-out forwards;
52
+ z-index: 1;
53
+ }
54
+
55
+ .red-envelope .top-text {
56
+ position: absolute;
57
+ top: 15%;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ font-size: 16px;
61
+ color: #fff;
62
+ font-weight: bold;
63
+ opacity: 0;
64
+ animation: showText 2s 1.5s forwards;
65
+ text-align: center;
66
+ }
67
+
68
+ .red-envelope .content {
69
+ position: absolute;
70
+ top: 50%;
71
+ left: 50%;
72
+ transform: translate(-50%, -50%);
73
+ color: #fff;
74
+ font-size: 24px;
75
+ font-weight: bold;
76
+ z-index: 0;
77
+ opacity: 0;
78
+ animation: showContent 2s 1.5s forwards;
79
+ }
80
+
81
+ @keyframes openTop {
82
+ 0% {
83
+ height: 0;
84
+ }
85
+ 100% {
86
+ height: 33%;
87
+ }
88
+ }
89
+
90
+ @keyframes showText {
91
+ 0% {
92
+ opacity: 0;
93
+ }
94
+ 100% {
95
+ opacity: 1;
96
+ }
97
+ }
98
+
99
+ @keyframes showContent {
100
+ 0% {
101
+ opacity: 0;
102
+ }
103
+ 100% {
104
+ opacity: 1;
105
+ }
106
+ }
107
+
108
+ .countdown {
109
+ position: absolute;
110
+ top: 10px;
111
+ left: 10px;
112
+ padding: 10px;
113
+ background-color: rgba(0, 0, 0, 0.5);
114
+ border-radius: 10px;
115
+ color: white;
116
+ font-size: 18px;
117
+ font-weight: bold;
118
+ backdrop-filter: blur(5px);
119
+ z-index: 4;
120
+ }
121
+
122
+ .logo-container {
123
+ position: absolute;
124
+ bottom: 5%;
125
+ text-align: center;
126
+ z-index: 3;
127
+ left: 50%;
128
+ transform: translateX(-50%);
129
+ }
130
+
131
+ .logo-container img {
132
+ width: 150px;
133
+ height: auto;
134
+ margin-bottom: 20px;
135
+ }
136
+
137
+ .logo-container .text {
138
+ font-size: 24px;
139
+ color: white;
140
+ font-weight: bold;
141
+ }
142
+
143
+ .emoji {
144
+ position: absolute;
145
+ font-size: 2rem;
146
+ pointer-events: none;
147
+ animation: floatUp 2s ease-out forwards;
148
+ }
149
+
150
+ @keyframes floatUp {
151
+ 0% {
152
+ opacity: 1;
153
+ transform: translateY(0);
154
+ }
155
+ 100% {
156
+ opacity: 0;
157
+ transform: translateY(-100px);
158
+ }
159
+ }
160
+
161
+ .spark {
162
+ width: 5px;
163
+ height: 5px;
164
+ border-radius: 50%;
165
+ position: absolute;
166
+ animation: explode 1s ease-out forwards;
167
+ }
168
+
169
+ @keyframes explode {
170
+ 0% {
171
+ opacity: 1;
172
+ transform: translate(0, 0);
173
+ }
174
+ 100% {
175
+ opacity: 0;
176
+ transform: translate(var(--dx), var(--dy));
177
+ }
178
+ }
179
+ </style>
180
+ </head>
181
+ <body>
182
+ <canvas id="fireworksCanvas"></canvas>
183
+ <div class="red-envelope">
184
+ <div class="top"></div>
185
+ <div class="top-text">富强民主文明和谐</div>
186
+ <div class="content">LINUX DO</div>
187
+ </div>
188
+ <div class="logo-container">
189
+ <img src="https://linux.do/uploads/default/original/3X/a/8/a8168bb80c93075aad7aa1f598eee063adef1cb0.png" alt="LINUX DO Logo">
190
+ <div class="text">LINUX DO</div>
191
+ </div>
192
+ <div class="countdown" id="countdown"></div>
193
+
194
+ <div id="fireworks-container" class="fixed top-0 left-0 w-full h-full pointer-events-none"></div>
195
+
196
+ <script>
197
+ // 获取 canvas 元素
198
+ const canvas = document.getElementById('fireworksCanvas');
199
+ const ctx = canvas.getContext('2d');
200
+ canvas.width = window.innerWidth;
201
+ canvas.height = window.innerHeight;
202
+
203
+ // 烟花效果
204
+ class Firework {
205
+ constructor(x, y) {
206
+ this.x = x;
207
+ this.y = y;
208
+ this.alpha = 1;
209
+ this.particles = [];
210
+ this.createParticles();
211
+ }
212
+
213
+ createParticles() {
214
+ const colors = ['#ffdf00', '#ff6347', '#32cd32', '#ff4500', '#00bfff', '#ff1493'];
215
+ for (let i = 0; i < 500; i++) {
216
+ this.particles.push(new Particle(this.x, this.y, colors[Math.floor(Math.random() * colors.length)]));
217
+ }
218
+ }
219
+
220
+ update() {
221
+ this.particles.forEach(particle => particle.update());
222
+ this.alpha -= 0.02;
223
+ }
224
+
225
+ draw() {
226
+ this.particles.forEach(particle => particle.draw());
227
+ }
228
+
229
+ isDead() {
230
+ return this.alpha <= 0;
231
+ }
232
+ }
233
+
234
+ class Particle {
235
+ constructor(x, y, color) {
236
+ this.x = x;
237
+ this.y = y;
238
+ this.color = color;
239
+ this.size = Math.random() * 6 + 3;
240
+ this.speedX = Math.random() * 12 - 6;
241
+ this.speedY = Math.random() * 12 - 6;
242
+ this.alpha = 1;
243
+ this.lifeTime = Math.random() * 2 + 1;
244
+ }
245
+
246
+ update() {
247
+ this.x += this.speedX;
248
+ this.y += this.speedY;
249
+ this.alpha -= 0.02;
250
+ this.size *= 0.98;
251
+ this.lifeTime -= 0.02;
252
+ }
253
+
254
+ draw() {
255
+ ctx.beginPath();
256
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
257
+ ctx.fillStyle = this.color;
258
+ ctx.globalAlpha = this.alpha;
259
+ ctx.fill();
260
+ }
261
+ }
262
+
263
+ const fireworks = [];
264
+ function createFirework(x, y) {
265
+ fireworks.push(new Firework(x, y));
266
+ }
267
+
268
+ function animate() {
269
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
270
+ fireworks.forEach((firework, index) => {
271
+ firework.update();
272
+ firework.draw();
273
+ if (firework.isDead()) {
274
+ fireworks.splice(index, 1);
275
+ }
276
+ });
277
+ requestAnimationFrame(animate);
278
+ }
279
+
280
+ setInterval(() => {
281
+ const randomX = Math.random() * canvas.width;
282
+ const randomY = Math.random() * canvas.height;
283
+ createFirework(randomX, randomY);
284
+ }, Math.random() * 300 + 200);
285
+ animate();
286
+
287
+ // 随机 emoji 列表
288
+ const emojis = ['🎉', '✨', '🎆', '🎇', '💥', '❤️', '🌟', '😊', '🥳', '🎊', '🎈', '🌸', '🌠', '🌈', '🔥'];
289
+
290
+ // 生成随机 emoji
291
+ function getRandomEmoji() {
292
+ return emojis[Math.floor(Math.random() * emojis.length)];
293
+ }
294
+
295
+ // 创建 emoji
296
+ function createEmoji(x, y) {
297
+ const emoji = document.createElement('div');
298
+ emoji.classList.add('emoji');
299
+ emoji.textContent = getRandomEmoji();
300
+ emoji.style.left = `${x}px`;
301
+ emoji.style.top = `${y}px`;
302
+ document.body.appendChild(emoji);
303
+
304
+ // 移除 emoji 元素
305
+ setTimeout(() => {
306
+ document.body.removeChild(emoji);
307
+ }, 2000);
308
+ }
309
+
310
+ // 用户按下任意键或点击鼠标发射随机 emoji
311
+ document.addEventListener('keydown', (event) => {
312
+ const x = Math.random() * window.innerWidth;
313
+ const y = Math.random() * window.innerHeight;
314
+ createEmoji(x, y);
315
+ });
316
+
317
+ document.addEventListener('click', (event) => {
318
+ createEmoji(event.clientX, event.clientY);
319
+ createFirework(event.clientX, event.clientY);
320
+ });
321
+
322
+ // 获取农历春节日期
323
+ function getChineseNewYearDate() {
324
+ return new Date('2025-01-29T00:00:00');
325
+ }
326
+
327
+ // 更新倒计时
328
+ function updateCountdown() {
329
+ const now = new Date();
330
+ const newYearDate = getChineseNewYearDate();
331
+ const timeDiff = newYearDate - now;
332
+
333
+ if (timeDiff > 0) {
334
+ const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
335
+ const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
336
+ const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
337
+ const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
338
+ document.getElementById('countdown').textContent = `距离新年还有 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
339
+ } else {
340
+ const daysSince = Math.floor(-timeDiff / (1000 * 60 * 60 * 24));
341
+ const hoursSince = Math.floor((-timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
342
+ const minutesSince = Math.floor((-timeDiff % (1000 * 60 * 60)) / (1000 * 60));
343
+ const secondsSince = Math.floor((-timeDiff % (1000 * 60)) / 1000);
344
+ document.getElementById('countdown').textContent = `新的一年已经开始了 ${daysSince}天 ${hoursSince}时 ${minutesSince}分 ${secondsSince}秒`;
345
+ }
346
+ }
347
+
348
+ setInterval(updateCountdown, 1000);
349
+ updateCountdown();
350
+ </script>
351
+ </body>
352
+ </html>