Hugging Face's logo

Spaces:
cacode
/
gkjy
Running

App Files Community
cacode commited on
Commit
ef158f3
·
verified ·
1 Parent(s): 4f891cb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +261 -19
index.html CHANGED
@@ -1,19 +1,261 @@
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-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>2026高考倒计时</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Noto+Sans+SC:wght@300;400&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary-color: #00ffff; /* 主题色 - 青色 */
13
+ --glow-color: rgba(0, 255, 255, 0.75);
14
+ --bg-color: #020a1a; /* 深蓝背景色 */
15
+ --text-color: #e0e0e0;
16
+ }
17
+
18
+ body {
19
+ margin: 0;
20
+ font-family: 'Noto Sans SC', sans-serif;
21
+ background-color: var(--bg-color);
22
+ color: var(--text-color);
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ min-height: 100vh;
27
+ overflow: hidden; /* 隐藏溢出，防止背景动画的滚动条 */
28
+ position: relative;
29
+ }
30
+
31
+ /* 动态背景 */
32
+ .stars {
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ background-image:
39
+ radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)),
40
+ radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
41
+ radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)),
42
+ radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
43
+ radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
44
+ radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
45
+ background-repeat: repeat;
46
+ background-size: 200px 200px;
47
+ animation: zoom 15s infinite;
48
+ opacity: 0;
49
+ }
50
+
51
+ .stars:nth-child(2) {
52
+ background-position: 100px 100px;
53
+ animation-delay: 3s;
54
+ }
55
+
56
+ .stars:nth-child(3) {
57
+ background-position: 50px 50px;
58
+ animation-delay: 5s;
59
+ }
60
+
61
+ @keyframes zoom {
62
+ 0% {
63
+ opacity: 0;
64
+ transform: scale(0.5) translateY(100%);
65
+ }
66
+ 50% {
67
+ opacity: 0.7;
68
+ }
69
+ 100% {
70
+ opacity: 0;
71
+ transform: scale(1.5) translateY(-50%);
72
+ }
73
+ }
74
+
75
+
76
+ .container {
77
+ text-align: center;
78
+ z-index: 1;
79
+ background: rgba(10, 25, 47, 0.6);
80
+ padding: 40px 60px;
81
+ border-radius: 15px;
82
+ border: 1px solid rgba(0, 255, 255, 0.2);
83
+ backdrop-filter: blur(10px);
84
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
85
+ }
86
+
87
+ h1 {
88
+ font-size: 3em;
89
+ font-weight: 400;
90
+ color: var(--primary-color);
91
+ margin-bottom: 30px;
92
+ letter-spacing: 4px;
93
+ text-shadow:
94
+ 0 0 5px var(--glow-color),
95
+ 0 0 10px var(--glow-color),
96
+ 0 0 15px var(--glow-color);
97
+ }
98
+
99
+ #timer {
100
+ display: flex;
101
+ justify-content: center;
102
+ gap: 20px;
103
+ }
104
+
105
+ .time-box {
106
+ display: flex;
107
+ flex-direction: column;
108
+ align-items: center;
109
+ padding: 15px;
110
+ min-width: 100px;
111
+ }
112
+
113
+ .time-box span:first-child {
114
+ font-family: 'Orbitron', sans-serif;
115
+ font-size: 4.5em;
116
+ font-weight: 700;
117
+ color: var(--primary-color);
118
+ line-height: 1;
119
+ text-shadow:
120
+ 0 0 5px var(--glow-color),
121
+ 0 0 15px var(--glow-color),
122
+ 0 0 25px var(--glow-color);
123
+ }
124
+
125
+ .time-box span.label {
126
+ font-size: 1.2em;
127
+ margin-top: 10px;
128
+ color: var(--text-color);
129
+ font-weight: 300;
130
+ letter-spacing: 2px;
131
+ }
132
+
133
+ .motto {
134
+ margin-top: 40px;
135
+ font-size: 1.2em;
136
+ font-style: italic;
137
+ color: #aaa;
138
+ letter-spacing: 1px;
139
+ }
140
+
141
+ /* 响应式设计 */
142
+ @media (max-width: 768px) {
143
+ .container {
144
+ padding: 30px;
145
+ margin: 15px;
146
+ }
147
+ h1 {
148
+ font-size: 2em;
149
+ }
150
+ #timer {
151
+ flex-direction: column;
152
+ gap: 5px;
153
+ }
154
+ .time-box {
155
+ flex-direction: row;
156
+ justify-content: space-between;
157
+ align-items: baseline;
158
+ width: 100%;
159
+ padding: 10px 0;
160
+ }
161
+ .time-box span:first-child {
162
+ font-size: 3em;
163
+ }
164
+ .time-box span.label {
165
+ font-size: 1em;
166
+ margin-top: 0;
167
+ }
168
+ .motto {
169
+ font-size: 1em;
170
+ }
171
+ }
172
+ </style>
173
+ </head>
174
+ <body>
175
+
176
+ <div class="stars"></div>
177
+ <div class="stars"></div>
178
+ <div class="stars"></div>
179
+
180
+ <div class="container" id="countdown-container">
181
+ <h1 id="title">2026高考倒计时</h1>
182
+ <div id="timer">
183
+ <div class="time-box">
184
+ <span id="days">00</span>
185
+ <span class="label">天</span>
186
+ </div>
187
+ <div class="time-box">
188
+ <span id="hours">00</span>
189
+ <span class="label">时</span>
190
+ </div>
191
+ <div class="time-box">
192
+ <span id="minutes">00</span>
193
+ <span class="label">分</span>
194
+ </div>
195
+ <div class="time-box">
196
+ <span id="seconds">00</span>
197
+ <span class="label">秒</span>
198
+ </div>
199
+ </div>
200
+ <p class="motto">金榜题名，未来可期</p>
201
+ </div>
202
+
203
+ <script>
204
+ // 获取DOM元素
205
+ const daysEl = document.getElementById('days');
206
+ const hoursEl = document.getElementById('hours');
207
+ const minutesEl = document.getElementById('minutes');
208
+ const secondsEl = document.getElementById('seconds');
209
+ const titleEl = document.getElementById('title');
210
+ const timerEl = document.getElementById('timer');
211
+
212
+ function getTargetDate() {
213
+ const now = new Date();
214
+ let targetYear = now.getFullYear();
215
+
216
+ // 目标日期：6月7日 9:00 AM。月份在JS中是0-11，所以6月是5。
217
+ const targetDate = new Date(targetYear, 5, 7, 9, 0, 0);
218
+
219
+ // 如果当前时间已经超过了今年的高考时间，则目标设为明年
220
+ if (now > targetDate) {
221
+ targetYear++;
222
+ targetDate.setFullYear(targetYear);
223
+ }
224
+
225
+ return targetDate;
226
+ }
227
+
228
+ function updateCountdown() {
229
+ const targetDate = getTargetDate();
230
+ const now = new Date().getTime();
231
+ const distance = targetDate - now;
232
+
233
+ if (distance <= 0) {
234
+ // 倒计时结束
235
+ clearInterval(countdownInterval);
236
+ titleEl.textContent = "考试加油！";
237
+ timerEl.innerHTML = "<p style='font-size: 2em; color: var(--primary-color);'>祝君凯旋</p>";
238
+ return;
239
+ }
240
+
241
+ // 时间计算
242
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
243
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
244
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
245
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
246
+
247
+ // 更新页面显示，使用padStart来补零
248
+ daysEl.textContent = String(days).padStart(2, '0');
249
+ hoursEl.textContent = String(hours).padStart(2, '0');
250
+ minutesEl.textContent = String(minutes).padStart(2, '0');
251
+ secondsEl.textContent = String(seconds).padStart(2, '0');
252
+ }
253
+
254
+ // 立即执行一次，避免页面初始时显示00
255
+ updateCountdown();
256
+
257
+ // 每秒更新一次
258
+ const countdownInterval = setInterval(updateCountdown, 1000);
259
+ </script>
260
+ </body>
261
+ </html>