Spaces:

ApiCheck
/

NY

Running

App Files Files Community

ApiCheck commited on Dec 29, 2024

Commit

82d1101

verified ·

1 Parent(s): d48d14a

Update index.html

Browse files

Files changed (1) hide show

index.html +358 -18

index.html CHANGED Viewed

@@ -1,19 +1,359 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>中国春节倒计时</title>
+    <!-- 引入Google Fonts的Ma Shan Zheng字体 -->
+    <link href="https://ooo.0x0.ooo/2024/12/25/OEFMXM.jpg" rel="stylesheet">
+    <style>
+        /* 全局样式 */
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            font-family: 'Ma Shan Zheng', cursive;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+        }
+        /* 背景图片样式 */
+        .background {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: url('https://s2.loli.net/2024/12/29/eMjyY6b1lQgdPGN.png') no-repeat center center/cover;
+            z-index: -3;
+            opacity: 1.2;
+        }
+        /* 烟花画布 */
+        #fireworks-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1; /* 确保烟花在背景之上，内容之下 */
+            pointer-events: none; /* 确保点击事件不被烟花遮挡 */
+        }
+        /* 主容器样式 */
+        .container {
+            text-align: center;
+            padding: 30px 40px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 20px;
+            box-shadow: 0 0 30px rgba(0,0,0,0.7);
+            animation: fadeIn 1s ease-out;
+            z-index: 1; /* 确保内容在烟花之上 */
+        }
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.8); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 15px;
+            font-weight: bold;
+            color: #FFD700;
+            text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
+            animation: glow 2s infinite alternate;
+        }
+        .time, .cny-date, .countdown {
+            font-size: 2em; /* 增大时钟字体 */
+            margin: 15px 0;
+            animation: fadeInUp 1.5s ease-out;
+        }
+        /* 文字动画 */
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* 文字发光效果 */
+        @keyframes glow {
+            from { text-shadow: 2px 2px 8px rgba(255,215,0,0.7); }
+            to { text-shadow: 2px 2px 20px rgba(255,215,0,1); }
+        }
+        /* 响应式设计 */
+        @media (max-width: 600px) {
+            h1 {
+                font-size: 1.8em;
+            }
+            .time, .cny-date, .countdown {
+                font-size: 1.5em; /* 移动端适当减小字体 */
+            }
+            .container {
+                padding: 20px 25px;
+            }
+        }
+        /* 底部滚动字幕 */
+        .scrolling-message {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            font-size: 65px;
+            color: yellow;
+            background-color: rgba(0, 0, 0, 0.4);
+            padding: 10px 0;
+            white-space: nowrap;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        .scrolling-message span {
+            display: inline-block;
+            padding-left: 100%; /* 初始位置在屏幕右侧 */
+            animation: scrollText 26s linear infinite; /* 减慢滚动速度 */
+        }
+        @keyframes scrollText {
+            0% {
+                transform: translateX(0); /* 从屏幕右侧边缘开始 */
+            }
+            100% {
+                transform: translateX(-100%); /* 滚动到屏幕左侧 */
+            }
+        }
+        /* 禁止声音按钮 */
+        .sound-btn {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 10;
+        }
+        .sound-btn svg {
+            fill: white;
+            width: 24px;
+            height: 24px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 背景图片 -->
+    <div class="background"></div>
+    <!-- 烟花画布 -->
+    <canvas id="fireworks-canvas"></canvas>
+    <!-- 主内容 -->
+    <div class="container">
+        <h1>中国春节倒计时</h1>
+        <div class="time">当前时间：<span id="currentTime">--:--:--</span></div>
+        <div class="cny-date">中国春节日期：<span id="cnyDate">--</span></div>
+        <div class="countdown">倒计时：<span id="countdown">--天 --小时 --分钟 --秒</span></div>
+    </div>
+    <!-- 在页面底部添加滚动字幕 -->
+    <div class="scrolling-message">
+        <span>LINUX DO年度寄语：愿新的一年，我们继续在技术海洋中携手成长！我为人人，人人为我，真诚、友善地对待他人，不以一己私利为重，这就是LINUX DO！</span>
+    </div>
+    <script>
+        // 当前时间和倒计时
+        const currentTimeEl = document.getElementById('currentTime');
+        const cnyDateEl = document.getElementById('cnyDate');
+        const countdownEl = document.getElementById('countdown');
+        // 中国春节日期（2020-2030）
+        const cnyDates = {
+            2020: '2020-01-25',
+            2021: '2021-02-12',
+            2022: '2022-02-01',
+            2023: '2023-01-22',
+            2024: '2024-02-10',
+            2025: '2025-01-29',
+            2026: '2026-02-17',
+            2027: '2027-02-06',
+            2028: '2028-01-26',
+            2029: '2029-02-13',
+            2030: '2030-02-03'
+        };
+        function updateTime() {
+            const now = new Date();
+            const year = now.getFullYear();
+            const month = String(now.getMonth() + 1).padStart(2, '0');
+            const date = String(now.getDate()).padStart(2, '0');
+            const hours = String(now.getHours()).padStart(2, '0');
+            const minutes = String(now.getMinutes()).padStart(2, '0');
+            const seconds = String(now.getSeconds()).padStart(2, '0');
+            currentTimeEl.textContent = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
+            // 获取中国春节日期
+            let cnyYear = year;
+            let cnyDateStr = cnyDates[cnyYear];
+            let cnyDate = cnyDateStr ? new Date(cnyDateStr + 'T00:00:00') : null;
+            // 如果今年的中国春节已经过去，使用明年的
+            if (cnyDate && now > cnyDate) {
+                cnyYear += 1;
+                cnyDateStr = cnyDates[cnyYear];
+                if(cnyDateStr){
+                   cnyDate = new Date(cnyDateStr + 'T00:00:00');
+                } else {
+                    // 如果超出预设年份，提示无法计算
+                    cnyDateEl.textContent = '无法计算';
+                    countdownEl.textContent = '--';
+                    return;
+                }
+            }
+             if (cnyDate) {
+                  const cnyMonth = String(cnyDate.getMonth() + 1).padStart(2, '0');
+                  const cnyDay = String(cnyDate.getDate()).padStart(2, '0');
+                  cnyDateEl.textContent = `${cnyYear}-${cnyMonth}-${cnyDay}`;
+                 // 计算倒计时
+                 const diff = cnyDate - now;
+                   if(diff <=0){
+                   countdownEl.textContent = '今天是中国春节！';
+                    return;
+                 }
+                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+                 const hoursLeft = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                 const minutesLeft = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                const secondsLeft = Math.floor((diff % (1000 * 60)) / 1000);
+                countdownEl.textContent = `${days}天 ${hoursLeft}小时 ${minutesLeft}分钟 ${secondsLeft}秒`;
+            } else {
+                // 如果无法获取中国春节日期
+                cnyDateEl.textContent = '无法计算';
+                countdownEl.textContent = '--';
+            }
+        }
+        // 更新每秒
+        updateTime();
+        setInterval(updateTime, 1000);
+        // 烟花效果
+        const canvas = document.getElementById('fireworks-canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        // 烟花粒子类
+        class Particle {
+            constructor(x, y, color) {
+                this.x = x;
+                this.y = y;
+                this.color = color;
+                this.radius = Math.random() * 2 + 1;
+                this.velocity = {
+                    x: (Math.random() - 0.5) * 5,
+                    y: (Math.random() - 0.5) * 5
+                };
+                this.alpha = 1;
+            }
+            draw() {
+                ctx.save();
+                ctx.globalAlpha = this.alpha;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
+                ctx.fillStyle = this.color;
+                ctx.fill();
+                ctx.restore();
+            }
+            update() {
+                this.draw();
+                this.x += this.velocity.x;
+                this.y += this.velocity.y;
+                this.alpha -= 0.01;
+            }
+        }
+        // 烟花类
+        class Firework {
+            constructor(x, y, color) {
+                this.x = x;
+                this.y = y;
+                this.color = color;
+                this.particles = [];
+                for (let i = 0; i < 100; i++) {
+                    this.particles.push(new Particle(this.x, this.y, this.color));
+                }
+            }
+            update() {
+                this.particles.forEach((particle, index) => {
+                    if (particle.alpha <= 0) {
+                        this.particles.splice(index, 1);
+                    } else {
+                        particle.update();
+                    }
+                });
+            }
+        }
+        // 烟花数组
+        let fireworks = [];
+        // 动画循环
+        function animate() {
+            requestAnimationFrame(animate);
+            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布，保留背景
+            fireworks.forEach((firework, index) => {
+                if (firework.particles.length === 0) {
+                    fireworks.splice(index, 1);
+                } else {
+                    firework.update();
+                }
+            });
+        }
+        // 随机生成烟花
+        function createFirework() {
+            const x = Math.random() * canvas.width;
+            const y = Math.random() * canvas.height;
+            const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
+            fireworks.push(new Firework(x, y, color));
+        }
+        // 每 500 毫秒生成一个烟花
+        setInterval(createFirework, 500);
+        // 开始动画
+        animate();
+        // 禁止声音按钮逻辑
+        //const soundBtn = document.querySelector('.sound-btn');
+        //let isSoundOn = true;
+        //soundBtn.addEventListener('click', () => {
+         //   isSoundOn = !isSoundOn;
+         //   soundBtn.innerHTML = isSoundOn
+         //       ? '<path id="icon-sound-on" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>'
+         //       : '<path id="icon-sound-off" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
+        //});
+    </script>
+<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8f992b9bee3fd049","version":"2024.10.5","r":1,"token":"2a84cf81469744fabd107d17169c271a","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}}}' crossorigin="anonymous"></script>
+</body>
 </html>