Hugging Face's logo

Spaces:
justinxzhao
/
tempo_estimator
Running

App Files Community
justinxzhao commited on
Commit
1885d21
·
verified ·
1 Parent(s): 48d37f3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +175 -19
index.html CHANGED
@@ -1,19 +1,175 @@
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>Tempo Estimator</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --bg-color-light: #f0f0f0;
14
+ --text-color-light: #000;
15
+ --bg-color-dark: #2c2c2c;
16
+ --text-color-dark: #fff;
17
+ }
18
+ body {
19
+ display: flex;
20
+ flex-direction: column;
21
+ align-items: center;
22
+ justify-content: center;
23
+ height: 100vh;
24
+ margin: 0;
25
+ font-family: 'Roboto', sans-serif;
26
+ transition: background-color 0.3s, color 0.3s;
27
+ text-align: center;
28
+ }
29
+ body.light-mode {
30
+ background-color: var(--bg-color-light);
31
+ color: var(--text-color-light);
32
+ }
33
+ body.dark-mode {
34
+ background-color: var(--bg-color-dark);
35
+ color: var(--text-color-dark);
36
+ }
37
+ .btn-custom {
38
+ padding: 30px 60px;
39
+ font-size: 36px;
40
+ margin: 10px;
41
+ border-radius: 50px;
42
+ position: relative;
43
+ }
44
+ .btn-reset {
45
+ padding: 15px 30px;
46
+ font-size: 18px;
47
+ margin: 10px;
48
+ border-radius: 50px;
49
+ position: relative;
50
+ }
51
+ #tempoDisplay {
52
+ font-size: 36px;
53
+ margin-bottom: 20px;
54
+ }
55
+ .toggle-button {
56
+ display: flex;
57
+ align-items: center;
58
+ cursor: pointer;
59
+ margin-top: 20px;
60
+ }
61
+ .toggle-button input {
62
+ display: none;
63
+ }
64
+ .toggle-label {
65
+ display: flex;
66
+ align-items: center;
67
+ background-color: #ccc;
68
+ border-radius: 50px;
69
+ padding: 5px;
70
+ width: 40px;
71
+ justify-content: space-between;
72
+ position: relative;
73
+ }
74
+ .toggle-label .ball {
75
+ background-color: #fff;
76
+ border-radius: 50%;
77
+ width: 20px;
78
+ height: 20px;
79
+ position: absolute;
80
+ left: 0;
81
+ transition: transform 0.3s;
82
+ }
83
+ input:checked + .toggle-label .ball {
84
+ transform: translateX(20px);
85
+ }
86
+ .sparkle {
87
+ position: absolute;
88
+ width: 20px;
89
+ height: 20px;
90
+ background: orange;
91
+ border-radius: 50%;
92
+ animation: sparkle 0.5s ease-out;
93
+ }
94
+ @keyframes sparkle {
95
+ from {
96
+ transform: scale(0);
97
+ opacity: 1;
98
+ }
99
+ to {
100
+ transform: scale(1.5);
101
+ opacity: 0;
102
+ }
103
+ }
104
+ </style>
105
+ </head>
106
+ <body class="light-mode">
107
+ <div id="tempoDisplay">-- BPM</div>
108
+ <button id="tapButton" class="btn btn-primary btn-custom">Tap</button>
109
+ <button id="resetButton" class="btn btn-secondary btn-reset">Reset</button>
110
+ <div class="toggle-button">
111
+ <input type="checkbox" id="modeToggle">
112
+ <label for="modeToggle" class="toggle-label">
113
+ <div class="ball"></div>
114
+ </label>
115
+ </div>
116
+
117
+ <script>
118
+ let tapTimes = [];
119
+
120
+ document.getElementById('tapButton').addEventListener('click', (e) => {
121
+ const currentTime = new Date().getTime();
122
+ tapTimes.push(currentTime);
123
+
124
+ if (tapTimes.length > 1) {
125
+ const timeIntervals = [];
126
+ for (let i = 1; i < tapTimes.length; i++) {
127
+ timeIntervals.push(tapTimes[i] - tapTimes[i - 1]);
128
+ }
129
+
130
+ const averageInterval = timeIntervals.reduce((a, b) => a + b) / timeIntervals.length;
131
+ const tempo = Math.round(60000 / averageInterval);
132
+
133
+ document.getElementById('tempoDisplay').innerText = `Tempo: ${tempo} BPM`;
134
+ }
135
+
136
+ if (tapTimes.length > 10) {
137
+ tapTimes.shift();
138
+ }
139
+
140
+ // Sparkle effect
141
+ const sparkle = document.createElement('div');
142
+ sparkle.className = 'sparkle';
143
+ sparkle.style.left = `${e.clientX - e.target.offsetLeft - 10}px`;
144
+ sparkle.style.top = `${e.clientY - e.target.offsetTop - 10}px`;
145
+ e.target.appendChild(sparkle);
146
+
147
+ setTimeout(() => {
148
+ sparkle.remove();
149
+ }, 500);
150
+ });
151
+
152
+ document.getElementById('resetButton').addEventListener('click', () => {
153
+ tapTimes = [];
154
+ document.getElementById('tempoDisplay').innerText = '-- BPM';
155
+ });
156
+
157
+ document.getElementById('modeToggle').addEventListener('change', () => {
158
+ const body = document.body;
159
+ if (body.classList.contains('light-mode')) {
160
+ body.classList.remove('light-mode');
161
+ body.classList.add('dark-mode');
162
+ } else {
163
+ body.classList.remove('dark-mode');
164
+ body.classList.add('light-mode');
165
+ }
166
+ });
167
+
168
+ document.addEventListener('keydown', (event) => {
169
+ if (event.key === ' ') {
170
+ document.getElementById('tapButton').click();
171
+ }
172
+ });
173
+ </script>
174
+ <!-- Bootstrap JS and dependencies -->
175
+ <script src="https://code.jquery.com/jquery-3.5.1.s