-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
57 lines (52 loc) · 5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="web/img/favicon.ico" type="image/png">
<link rel="stylesheet" href="web/style.css">
<title>Cubestack - Online Interpreter</title>
</head>
<body>
<header>
<h1 class="title"><a href="https://github.com/tobyck/cubestack" target="_blank" title="Go to the GitHub repository">Cubestack</a></h1>
<div class="buttons">
<button class="clear" title="Clear all feilds">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M13.05 42Q11.85 42 10.95 41.1Q10.05 40.2 10.05 39V10.5H9.5Q8.85 10.5 8.425 10.075Q8 9.65 8 9Q8 8.35 8.425 7.925Q8.85 7.5 9.5 7.5H17.4Q17.4 6.85 17.825 6.425Q18.25 6 18.9 6H29.1Q29.75 6 30.175 6.425Q30.6 6.85 30.6 7.5H38.5Q39.15 7.5 39.575 7.925Q40 8.35 40 9Q40 9.65 39.575 10.075Q39.15 10.5 38.5 10.5H37.95V39Q37.95 40.2 37.05 41.1Q36.15 42 34.95 42ZM18.35 33.2Q18.35 33.85 18.775 34.275Q19.2 34.7 19.85 34.7Q20.5 34.7 20.925 34.275Q21.35 33.85 21.35 33.2V16.25Q21.35 15.6 20.925 15.175Q20.5 14.75 19.85 14.75Q19.2 14.75 18.775 15.175Q18.35 15.6 18.35 16.25ZM26.65 33.2Q26.65 33.85 27.075 34.275Q27.5 34.7 28.15 34.7Q28.8 34.7 29.225 34.275Q29.65 33.85 29.65 33.2V16.25Q29.65 15.6 29.225 15.175Q28.8 14.75 28.15 14.75Q27.5 14.75 27.075 15.175Q26.65 15.6 26.65 16.25Z"/></svg>
</button>
<button class="link" title="Get a link to this code" style="transform: scale(.95);">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M15 37.95Q13.75 37.95 12.875 37.075Q12 36.2 12 34.95V6.95Q12 5.7 12.875 4.825Q13.75 3.95 15 3.95H37Q38.25 3.95 39.125 4.825Q40 5.7 40 6.95V34.95Q40 36.2 39.125 37.075Q38.25 37.95 37 37.95ZM9 43.95Q7.75 43.95 6.875 43.075Q6 42.2 6 40.95V12.3Q6 11.65 6.425 11.225Q6.85 10.8 7.5 10.8Q8.15 10.8 8.575 11.225Q9 11.65 9 12.3V40.95Q9 40.95 9 40.95Q9 40.95 9 40.95H31.2Q31.85 40.95 32.275 41.375Q32.7 41.8 32.7 42.45Q32.7 43.1 32.275 43.525Q31.85 43.95 31.2 43.95Z"/></svg>
</button>
<button class="run" onclick="run()" title="Run code (cmd + enter)">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M19.15 18.25V29.75Q19.15 30.65 19.925 31.1Q20.7 31.55 21.45 31.05L30.5 25.25Q31.2 24.8 31.2 24Q31.2 23.2 30.5 22.75L21.45 16.95Q20.7 16.45 19.925 16.9Q19.15 17.35 19.15 18.25ZM24 44Q19.9 44 16.25 42.425Q12.6 40.85 9.875 38.125Q7.15 35.4 5.575 31.75Q4 28.1 4 24Q4 19.9 5.575 16.25Q7.15 12.6 9.875 9.875Q12.6 7.15 16.25 5.575Q19.9 4 24 4Q28.1 4 31.75 5.575Q35.4 7.15 38.125 9.875Q40.85 12.6 42.425 16.25Q44 19.9 44 24Q44 28.1 42.425 31.75Q40.85 35.4 38.125 38.125Q35.4 40.85 31.75 42.425Q28.1 44 24 44Z"/></svg>
</button>
</div>
</header>
<div class="container">
<div id="code" class="block">
<textarea id="code-textarea" spellcheck="false" placeholder="Code..." oninput="expand(this)"></textarea>
<div id="code-display"></div>
</div>
<div id="input" class="block">
<textarea id="input-textarea" spellcheck="false" placeholder="Inputs..." oninput="expand(this)"></textarea>
</div>
<div id="output" class="block"><span style="color:#666">Output...</span>
</div>
<div id="conversion" class="block">
<input type="text" placeholder="Number or string..." id="num-or-str">
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" class="arrow" fill="#999"><path d="M31.1 26.25 23.55 18.7Q23.3 18.45 23.2 18.2Q23.1 17.95 23.1 17.65Q23.1 17.35 23.2 17.1Q23.3 16.85 23.55 16.6L31.15 9Q31.55 8.6 32.15 8.6Q32.75 8.6 33.2 9.05Q33.65 9.5 33.65 10.1Q33.65 10.7 33.2 11.15L28.2 16.15H42.5Q43.15 16.15 43.575 16.575Q44 17 44 17.65Q44 18.3 43.575 18.725Q43.15 19.15 42.5 19.15H28.2L33.25 24.2Q33.65 24.6 33.65 25.2Q33.65 25.8 33.2 26.25Q32.75 26.7 32.15 26.7Q31.55 26.7 31.1 26.25ZM14.8 38.95Q15.25 39.4 15.85 39.4Q16.45 39.4 16.9 38.95L24.45 31.4Q24.7 31.15 24.8 30.9Q24.9 30.65 24.9 30.35Q24.9 30.05 24.8 29.8Q24.7 29.55 24.45 29.3L16.85 21.7Q16.45 21.3 15.85 21.3Q15.25 21.3 14.8 21.75Q14.35 22.2 14.35 22.8Q14.35 23.4 14.8 23.85L19.8 28.85H5.5Q4.85 28.85 4.425 29.275Q4 29.7 4 30.35Q4 31 4.425 31.425Q4.85 31.85 5.5 31.85H19.8L14.75 36.9Q14.35 37.3 14.35 37.9Q14.35 38.5 14.8 38.95Z"/></svg>
<input type="text" placeholder="Moves..." id="moves">
</div>
<div id="visualisation" class="block">
<canvas id="canvas" title="This is what a Rubiks Cube would look
like if the moves in your Cubestack code
were performed on a real Rubiks Cube."></canvas>
</div>
</div>
<div style="height: 150px;"></div>
</body>
<script src="cubestack/stdlib.js"></script>
<script src="cubestack/cubestack.js"></script>
<script src="web/highlight.js"></script>
<script src="web/visualise.js"></script>
<script src="web/main.js"></script>
</html>