-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (84 loc) · 4.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>
<meta content="no-cache" http-equiv="Pragma"/>
<meta content="0" http-equiv="Expires"/>
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
<link rel="icon" href="favicon.ico" type=“image/x-icon”>
<link rel="shortcut icon" href="./favicon.ico" type=“image/x-icon”>
<link rel="preload" href="./fonts/Open_Sans/static/OpenSans/OpenSans-Regular.ttf" as="font" type="font/ttf"
crossorigin>
<link href="./bin/main.css" rel="stylesheet"/>
<script src="./bin/main.js" type="module"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" display="none">
<defs>
<symbol id="move" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" fill="currentColor"
d="m130.412 323.98-51.883-51.882H240v161.47l-51.882-51.881-22.628 22.626 90.51 90.51 90.51-90.51-22.628-22.626L272 433.568v-161.47h160.667l-51.883 51.882 22.628 22.627 90.509-90.509-90.509-90.51-22.628 22.627 51.883 51.883H272V79.432l51.882 51.881 22.628-22.626L256 18.177l-90.51 90.51 22.628 22.626L240 79.432v160.666H78.529l51.883-51.883-22.628-22.627-90.51 90.51 90.511 90.51 22.627-22.628z"/>
</symbol>
<symbol id="line" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<line stroke="currentColor" stroke-width="20" fill="none" x1="64" y1="448" x2="448" y2="64"/>
</symbol>
<symbol id="circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<circle stroke="currentColor" stroke-width="20" fill="none" cx="256" cy="256" r="224"/>
</symbol>
<svg id="curve" viewBox="16 12 48 56" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" stroke-width="2" fill="none"
d="M58 18s-25 6-25 15 13 8 13 12-24 10-28 11l1 3s30-6 30-14-13-5-13-12 23-12 23-12l-1-3Z"/>
</svg>
<symbol id="play" viewBox="0 0 156 156" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" fill="currentColor"
d="M143.878 58.015 46.02 6.45c-9.816-5.172-21.348-4.838-30.848.894S0 23.122 0 34.218v87.473c0 11.096 5.672 21.142 15.172 26.874 5.018 3.028 10.601 4.549 16.2 4.549 5.001 0 10.016-1.215 14.647-3.655l97.858-51.566c7.42-3.91 12.03-11.55 12.03-19.938s-4.609-16.029-12.029-19.94zm-8.392 23.953-97.858 51.566c-4.249 2.239-9.045 2.101-13.157-.381-4.113-2.482-6.471-6.66-6.471-11.463V34.218c0-4.803 2.358-8.981 6.471-11.462C26.64 21.447 29 20.79 31.369 20.79c2.122 0 4.251.527 6.259 1.585l97.858 51.565c2.186 1.152 2.422 3.191 2.422 4.014s-.236 2.862-2.422 4.014z"/>
</symbol>
</defs>
</svg>
<main class="invisible">
<nav id="app-menu">
<button data-menu="file">File</button>
<button data-menu="edit">Edit</button>
<button data-menu="loops">Loops</button>
</nav>
<div class="radar">
<canvas></canvas>
<form class="tools" data-component="tools">
<label class="separator-after">
<input type="checkbox" data-checkbox="transport">
<svg><use href="#play"></use></svg>
</label>
<label>
<input type="radio" name="tool" value="move" checked>
<svg><use href="#move"></use></svg>
</label>
<label>
<input type="radio" name="tool" value="line">
<svg><use href="#line"></use></svg>
</label>
<label>
<input type="radio" name="tool" value="arc">
<svg><use href="#circle"></use></svg>
</label>
<label>
<input type="radio" name="tool" value="curve">
<svg><use href="#curve"></use></svg>
</label>
</form>
<div class="controls" data-component="controls">
<div class="two-columns" data-component="pattern"></div>
<div class="two-columns" data-component="snapping"></div>
</div>
</div>
</main>
<svg class="preloader" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle r="7" cx="10" cy="10" fill="none" stroke="#21242D" stroke-width="5"></circle>
<circle r="7" cx="10" cy="10" fill="none" stroke="#666D91" stroke-width="5" class="progress"></circle>
</svg>
</body>
</html>