-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
370 lines (370 loc) · 15.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="An open source tool to view and edit StepMania charts."
/>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-9ZL269JG6H"
></script>
<link rel="icon" type="image/mp4" href="/assets/icon/favicon.ico" />
<link rel="stylesheet" href="./index.css" />
<title>SMEditor</title>
</head>
<body>
<div class="banner">
<img class="banner-background" src="assets/preview/banner.png" />
<div class="banner-content">
<div class="banner-title">
<img src="assets/icon/logo.png" />
<h1>SMEditor</h1>
</div>
<p>An open source tool to view and edit StepMania charts.</p>
<div class="banner-button-container">
<div
style="display: flex; flex-direction: column; align-items: center"
>
<a id="download-link">
<button id="download-button" class="large">
<div class="button-content">
<svg
width="800px"
height="800px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke="currentColor"
d="M17 17H17.01M17.4 14H18C18.9319 14 19.3978 14 19.7654 14.1522C20.2554 14.3552 20.6448 14.7446 20.8478 15.2346C21 15.6022 21 16.0681 21 17C21 17.9319 21 18.3978 20.8478 18.7654C20.6448 19.2554 20.2554 19.6448 19.7654 19.8478C19.3978 20 18.9319 20 18 20H6C5.06812 20 4.60218 20 4.23463 19.8478C3.74458 19.6448 3.35523 19.2554 3.15224 18.7654C3 18.3978 3 17.9319 3 17C3 16.0681 3 15.6022 3.15224 15.2346C3.35523 14.7446 3.74458 14.3552 4.23463 14.1522C4.60218 14 5.06812 14 6 14H6.6M12 15V4M12 15L9 12M12 15L15 12"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="button-text">
<h3>Download the desktop app</h3>
<div id="version" style="font-size: 12px">-</div>
</div>
</div>
</button>
</a>
<a
id="other-downloads"
href="https://github.com/tillvit/smeditor/releases/"
target="_blank"
>All Downloads</a
>
</div>
<a href="app/">
<button id="web-button" class="large">
<div class="button-content">
<svg
width="800px"
height="800px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.83824 18.4467C10.0103 18.7692 10.1826 19.0598 10.3473 19.3173C8.59745 18.9238 7.07906 17.9187 6.02838 16.5383C6.72181 16.1478 7.60995 15.743 8.67766 15.4468C8.98112 16.637 9.40924 17.6423 9.83824 18.4467ZM11.1618 17.7408C10.7891 17.0421 10.4156 16.1695 10.1465 15.1356C10.7258 15.0496 11.3442 15 12.0001 15C12.6559 15 13.2743 15.0496 13.8535 15.1355C13.5844 16.1695 13.2109 17.0421 12.8382 17.7408C12.5394 18.3011 12.2417 18.7484 12 19.0757C11.7583 18.7484 11.4606 18.3011 11.1618 17.7408ZM9.75 12C9.75 12.5841 9.7893 13.1385 9.8586 13.6619C10.5269 13.5594 11.2414 13.5 12.0001 13.5C12.7587 13.5 13.4732 13.5593 14.1414 13.6619C14.2107 13.1384 14.25 12.5841 14.25 12C14.25 11.4159 14.2107 10.8616 14.1414 10.3381C13.4732 10.4406 12.7587 10.5 12.0001 10.5C11.2414 10.5 10.5269 10.4406 9.8586 10.3381C9.7893 10.8615 9.75 11.4159 9.75 12ZM8.38688 10.0288C8.29977 10.6478 8.25 11.3054 8.25 12C8.25 12.6946 8.29977 13.3522 8.38688 13.9712C7.11338 14.3131 6.05882 14.7952 5.24324 15.2591C4.76698 14.2736 4.5 13.168 4.5 12C4.5 10.832 4.76698 9.72644 5.24323 8.74088C6.05872 9.20472 7.1133 9.68686 8.38688 10.0288ZM10.1465 8.86445C10.7258 8.95042 11.3442 9 12.0001 9C12.6559 9 13.2743 8.95043 13.8535 8.86447C13.5844 7.83055 13.2109 6.95793 12.8382 6.2592C12.5394 5.69894 12.2417 5.25156 12 4.92432C11.7583 5.25156 11.4606 5.69894 11.1618 6.25918C10.7891 6.95791 10.4156 7.83053 10.1465 8.86445ZM15.6131 10.0289C15.7002 10.6479 15.75 11.3055 15.75 12C15.75 12.6946 15.7002 13.3521 15.6131 13.9711C16.8866 14.3131 17.9412 14.7952 18.7568 15.2591C19.233 14.2735 19.5 13.1679 19.5 12C19.5 10.8321 19.233 9.72647 18.7568 8.74093C17.9413 9.20477 16.8867 9.6869 15.6131 10.0289ZM17.9716 7.46178C17.2781 7.85231 16.39 8.25705 15.3224 8.55328C15.0189 7.36304 14.5908 6.35769 14.1618 5.55332C13.9897 5.23077 13.8174 4.94025 13.6527 4.6827C15.4026 5.07623 16.921 6.08136 17.9716 7.46178ZM8.67765 8.55325C7.61001 8.25701 6.7219 7.85227 6.02839 7.46173C7.07906 6.08134 8.59745 5.07623 10.3472 4.6827C10.1826 4.94025 10.0103 5.23076 9.83823 5.5533C9.40924 6.35767 8.98112 7.36301 8.67765 8.55325ZM15.3224 15.4467C15.0189 16.637 14.5908 17.6423 14.1618 18.4467C13.9897 18.7692 13.8174 19.0598 13.6527 19.3173C15.4026 18.9238 16.921 17.9186 17.9717 16.5382C17.2782 16.1477 16.3901 15.743 15.3224 15.4467ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
fill="#080341"
/>
</svg>
<div class="button-text">
<h3>Continue in web browser</h3>
</div>
</div>
</button>
</a>
</div>
</div>
</div>
<div class="feature-jumbo">
<h3>Features</h3>
<div id="feature-container">
<div class="feature">
<h3 class="title">SM5 Gimmick Support</h3>
<p class="description">
View and edit scroll and speed gimmicks directly in the editor.
</p>
<video
src="assets/preview/scrolls.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Time Signature Support</h3>
<p class="description">
Supports irregular time signatures and updates note colors
accordingly.
</p>
<img src="assets/preview/timesig.png" class="preview" />
</div>
<div class="feature">
<h3 class="title">Popup Editing</h3>
<p class="description">
Allows for easier moving and editing of timing events.
</p>
<video
src="assets/preview/popup.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Playtesting</h3>
<p class="description">
Playtest your chart with detailed timing feedback. Supports
Waterfall and FA+ timing windows.
</p>
<video
src="assets/preview/playtest.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Detailed Audio Analyzing</h3>
<p class="description">
Detect changing BPMs and identify tricky rhythms with onset
detection and a spectrogram.
</p>
<video
src="assets/preview/analyze.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Export Notedata to Lua</h3>
<p class="description">
Completely customize how notedata is exported.
</p>
<img src="assets/preview/exportlua.png" class="preview" />
</div>
<div class="feature">
<h3 class="title">Mouse Note Placement</h3>
<p class="description">
An alternative way to place notes by using the mouse.
</p>
<video
src="assets/preview/mouse.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Alternative Game Mode Support</h3>
<p class="description">Supports other gamemodes (in the future)</p>
<img src="assets/preview/mode.png" class="preview" />
</div>
<div class="feature">
<h3 class="title">Advanced Audio Filtering</h3>
<p class="description">
Includes a 7-band filter, allowing you to pick out hard to hear
sounds.
</p>
<video
src="assets/preview/eq.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Customizable Keybinds</h3>
<p class="description">
Bind any key combo to every control in the editor.
</p>
<video
src="assets/preview/pref.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div class="feature">
<h3 class="title">Embedding</h3>
<p class="description">
Embed SMEditor on your website!
<a href="embed/">Click here to start.</a>
</p>
<img src="assets/preview/embed.png" class="preview" />
</div>
<div class="feature">
<h3 class="title">ArrowVortex Clipboard Integration</h3>
<p class="description">Copy and paste to and from ArrowVortex.</p>
<video
src="assets/preview/av.mp4"
class="preview"
autoplay
muted
loop
></video>
</div>
<div id="feature-popups"></div>
</div>
</div>
<div class="open-source-container">
<div class="open-source-content">
<img class="open-source-background" src="assets/preview/git.png" />
<h1>Open Source</h1>
<p>
Found a bug or want to add a feature? Feel free to contribute on
SMEditor's GitHub page.
</p>
<a href="https://github.com/tillvit/smeditor" target="_blank">
<button id="github-button" class="large">
<div class="button-content">
<svg
width="800px"
height="800px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"
/>
</svg>
<div class="button-text">
<h3>View on GitHub</h3>
</div>
</div>
</button>
</a>
</div>
</div>
<script>
;(async () => {
const OS_NAMES = {
win: "Windows",
"mac-x64": "MacOS (Intel)",
"mac-arm": "MacOS (Apple Silicon)",
linux: "Linux",
}
const BUILD_TYPES = {
stable: 3,
beta: 2,
alpha: 1,
nightly: 0,
}
let os = "win"
if (navigator.userAgent.includes("Mac")) {
os = "mac-x64"
if (navigator.userAgentData) {
// Try to get architecture
const data = await navigator.userAgentData.getHighEntropyValues([
"architecture",
])
if (data.architecture === "arm") {
os = "mac-arm"
}
}
} else if (navigator.userAgent.includes("Linux")) {
os = "linux"
}
fetch("/smeditor/assets/app/versions.json")
.then(data => data.json())
.then(versions => {
versions = versions.sort((a, b) => {
if (BUILD_TYPES[a.type] != BUILD_TYPES[b.type])
return BUILD_TYPES[b.type] - BUILD_TYPES[a.type]
return b.date - a.date
})
const version = versions[0]
document.getElementById("version").innerText =
`${version.version} • ${OS_NAMES[os]}`
document.getElementById("download-link").href =
version.downloads[os]
})
document
.querySelectorAll("#feature-container .feature")
.forEach(element => {
const open = () => {
const clone = element.cloneNode(true)
clone.style.position = "absolute"
const elbr = element.getBoundingClientRect()
const ctbr = document
.getElementById("feature-container")
.getBoundingClientRect()
const imgCopy = clone.querySelector(".preview").cloneNode()
imgCopy.classList.remove("preview")
imgCopy.classList.add("hover")
clone.appendChild(imgCopy)
clone.style.left = elbr.left - ctbr.left + "px"
clone.style.top = elbr.top - ctbr.top + "px"
clone.style.width = elbr.width + "px"
clone.style.maxWidth = "none"
clone.style.height = elbr.height + "px"
clone.style.zIndex = "100"
clone.style.justifyContent = "normal"
clone.querySelector(".description").style.position = "absolute"
clone.querySelector(".description").style.top =
element.querySelector(".description").offsetTop + "px"
clone.querySelector(".title").style.position = "absolute"
clone.querySelector(".title").style.top =
element.querySelector(".title").offsetTop + "px"
clone.querySelector(".preview").style.position = "absolute"
clone.querySelector(".preview").style.top =
element.querySelector(".preview").offsetTop + "px"
imgCopy.style.position = "absolute"
imgCopy.style.top = elbr.height + "px"
clone.style.opacity = 1
element.style.opacity = 0
const close = () => {
clone.style.pointerEvents = "none"
window.removeEventListener("mousemove", mouseHandler)
clone.style.height = elbr.height + "px"
clone.classList.remove("hovered")
clone.style.pointerEvents = "none"
setTimeout(() => {
element.style.opacity = 1
clone.remove()
}, 500)
}
const mouseHandler = e => {
if (e.clientY - elbr.top > elbr.height + 2) close()
if (e.clientY - elbr.top < -2) close()
if (e.clientX - elbr.left > elbr.width + 2) close()
if (e.clientX - elbr.left < -2) close()
}
window.addEventListener("mousemove", mouseHandler)
setTimeout(() => {
clone.style.height =
elbr.height +
element.querySelector(".preview").clientHeight +
"px"
clone.classList.add("hovered")
})
document.getElementById("feature-popups").appendChild(clone)
}
element.onmouseenter = () => open()
element.onclick = () => open()
})
})()
</script>
</body>
</html>