Hugging Face's logo

Spaces:
MakiAi
/
CuteCatStopwatch
Running

App Files Community
MakiAi commited on
Commit
38cc018
路
verified 路
1 Parent(s): ce506fe

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +81 -19
index.html CHANGED
@@ -1,19 +1,81 @@
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="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>銇嬨倧銇勩亜鐚伄銈广儓銉冦儣銈︺偐銉冦儊</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ text-align: center;
11
+ background-color: #f0f8ff;
12
+ padding: 20px;
13
+ }
14
+ #timer {
15
+ font-size: 48px;
16
+ margin: 20px;
17
+ }
18
+ button {
19
+ padding: 10px 20px;
20
+ font-size: 16px;
21
+ margin: 5px;
22
+ cursor: pointer;
23
+ background-color: #ffb6c1;
24
+ border: none;
25
+ border-radius: 5px;
26
+ }
27
+ button:hover {
28
+ background-color: #ff9999;
29
+ }
30
+ #catDisplay {
31
+ font-size: 36px;
32
+ margin-top: 20px;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1>銇嬨倧銇勩亜鐚伄銈广儓銉冦儣銈︺偐銉冦儊</h1>
38
+ <div id="timer">00:00:00</div>
39
+ <button onclick="startTimer()">銈广偪銉笺儓</button>
40
+ <button onclick="stopTimer()">銈广儓銉冦儣</button>
41
+ <button onclick="resetTimer()">銉偦銉冦儓</button>
42
+ <div id="catDisplay">馃惥</div>
43
+
44
+ <script>
45
+ let timer;
46
+ let time = 0;
47
+ const timerDisplay = document.getElementById('timer');
48
+ const catDisplay = document.getElementById('catDisplay');
49
+ const catEmojis = ['馃惐', '馃樅', '馃樃', '馃惥', '馃悎'];
50
+
51
+ function updateTimer() {
52
+ const hours = Math.floor(time / 3600);
53
+ const minutes = Math.floor((time % 3600) / 60);
54
+ const seconds = time % 60;
55
+ timerDisplay.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
56
+ time++;
57
+ }
58
+
59
+ function startTimer() {
60
+ if (!timer) {
61
+ timer = setInterval(updateTimer, 1000);
62
+ catDisplay.textContent = catEmojis[Math.floor(Math.random() * catEmojis.length)];
63
+ }
64
+ }
65
+
66
+ function stopTimer() {
67
+ clearInterval(timer);
68
+ timer = null;
69
+ catDisplay.textContent = catEmojis[Math.floor(Math.random() * catEmojis.length)];
70
+ }
71
+
72
+ function resetTimer() {
73
+ clearInterval(timer);
74
+ timer = null;
75
+ time = 0;
76
+ timerDisplay.textContent = '00:00:00';
77
+ catDisplay.textContent = '馃惥';
78
+ }
79
+ </script>
80
+ </body>
81
+ </html>