Hugging Face's logo

Spaces:
Taf2023
/
year_progress
Running

App Files Community
Taf2023 commited on
Commit
77407b4
·
verified ·
1 Parent(s): f8ccbea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +118 -19
index.html CHANGED
@@ -1,19 +1,118 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>New Year Countdown</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
9
+
10
+ body {
11
+ font-family: 'Poppins', sans-serif;
12
+ background-color: #f0f0f0;
13
+ margin: 0;
14
+ padding: 0;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ height: 100vh;
19
+ }
20
+
21
+ .container {
22
+ text-align: center;
23
+ background-color: #fff;
24
+ padding: 40px;
25
+ border-radius: 10px;
26
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ .countdown {
30
+ display: flex;
31
+ justify-content: center;
32
+ margin-top: 30px;
33
+ }
34
+
35
+ .time-container {
36
+ margin: 0 20px;
37
+ }
38
+
39
+ .time-container span {
40
+ font-size: 48px;
41
+ font-weight: bold;
42
+ color: #333;
43
+ }
44
+
45
+ .time-container p {
46
+ font-size: 18px;
47
+ color: #666;
48
+ margin-top: 10px;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body>
53
+ <div class="container">
54
+ <h1>New Year Countdown <span id="current-year"></span></h1>
55
+ <div class="countdown">
56
+ <div class="time-container">
57
+ <span id="days">00</span>
58
+ <p>Days</p>
59
+ </div>
60
+ <div class="time-container">
61
+ <span id="hours">00</span>
62
+ <p>Hours</p>
63
+ </div>
64
+ <div class="time-container">
65
+ <span id="minutes">00</span>
66
+ <p>Minutes</p>
67
+ </div>
68
+ <div class="time-container">
69
+ <span id="seconds">00</span>
70
+ <p>Seconds</p>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <script>
76
+ const daysElement = document.getElementById('days');
77
+ const hoursElement = document.getElementById('hours');
78
+ const minutesElement = document.getElementById('minutes');
79
+ const secondsElement = document.getElementById('seconds');
80
+ const currentYearElement = document.getElementById('current-year');
81
+
82
+ // Get the current year
83
+ const currentYear = new Date().getFullYear();
84
+ currentYearElement.textContent = `(${currentYear})`;
85
+
86
+ // Set the date we're counting down to (New Year's Eve)
87
+ const countDownDate = new Date(`Jan 1, ${currentYear + 1} 00:00:00`).getTime();
88
+
89
+ // Update the count down every 1 second
90
+ const x = setInterval(function() {
91
+
92
+ // Get today's date and time
93
+ const now = new Date().getTime();
94
+
95
+ // Find the distance between now and the count down date
96
+ const distance = countDownDate - now;
97
+
98
+ // Time calculations for days, hours, minutes and seconds
99
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
100
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
101
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
102
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
103
+
104
+ // Output the result in an element with id="demo"
105
+ daysElement.textContent = days;
106
+ hoursElement.textContent = hours;
107
+ minutesElement.textContent = minutes;
108
+ secondsElement.textContent = seconds;
109
+
110
+ // If the count down is over, write some text
111
+ if (distance < 0) {
112
+ clearInterval(x);
113
+ document.getElementById("demo").innerHTML = "EXPIRED";
114
+ }
115
+ }, 1000);
116
+ </script>
117
+ </body>
118
+ </html>