-
Notifications
You must be signed in to change notification settings - Fork 1
/
playground.html
116 lines (104 loc) · 2.37 KB
/
playground.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
<!DOCTYPE html>
<html lang="en">
<style>
h1 {
margin-top: 0;
margin-bottom: 0;
color: white;
letter-spacing: 1px;
}
.vidcanvas {
height: 100vh;
display: block;
}
.editor {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.container {
max-width: fit-content;
max-height: 100vh;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.console-bar {
position: absolute;
bottom: 0px;
font-family: Menlo, Monaco, "Courier New";
font-size: 12px;
color: white;
width: 100%;
background-color: #0007;
z-index: 2;
}
.video {
background: white;
display: block;
}
.error-char {
background-color: #9c0000 !important;
}
.error-line {
text-decoration: underline;
text-decoration-color: red;
}
html,
body {
margin: 0px;
font-family: Helvetica, sans-serif;
background-color: black;
}
.console-window {
max-height: 200px;
overflow: scroll;
}
.bottom-bar {
display: flex;
justify-content: space-between;
}
/** background color for monaco is broken since 2016! this is a workaround */
.mtk1,
.mtk22,
.mtk23,
.mtk24,
.mtk25,
.mtk26,
.mtk27,
.mtk28,
.mtk29 {
background-color: black;
}
</style>
<head>
<meta charset="utf-8" />
<title>tinsl playground</title>
</head>
<body>
<div class="container">
<div class="video" id="video">
<div id="editor" class="editor"></div>
<div class="console-bar">
<div class="console-window" id="console-window"></div>
<div class="bottom-bar" id="bottom-bar">
<div>
<input type="checkbox" id="vim-mode" name="vim-mode" />
<label>vim mode</label>
</div>
<button id="run">run</button>
<canvas id="fft" width="128" height="16"></canvas>
<select name="demos" id="demos"></select>
</div>
<div id="statusbar"></div>
</div>
</div>
<canvas id="gl" class="vidcanvas" width="640" height="480"></canvas>
</div>
</body>
<script src="playground-bundle/bundle.js"></script>
</html>