-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (70 loc) · 2.37 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Glyphs</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Roboto+Mono">
<script src="dist/index.js"></script>
</head>
<body>
<div id="editor-container">
<div class="controls">
<button id="clear-button" title="Clear">
<i class="fa fa-trash"></i>
</button>
<button id="stop-button" title="Stop">
<i class="fa fa-stop"></i>
</button>
<button id="step-button" title="Step">
<i class="fa fa-step-forward"></i>
</button>
<button id="start-button" title="Start">
<i class="fa fa-play"></i>
</button>
<button id="fast-button" title="Fast">
<i class="fa fa-forward"></i>
</button>
<button id="help-button" title="Help">
<i class="fa fa-question-circle"></i>
</button>
<label>
<input id="dark-theme-checkbox" type="checkbox">
<span>Dark theme</span>
</label>
</div>
<table id="editor-grid" class="glyph-grid"></table>
<div id="console">
<pre class="output"></pre>
</div>
</div>
<div id="selector-container" hidden>
<table id="selector-grid" class="glyph-grid"></table>
</div>
<div id="modal-container">
<div class="modal" id="help-modal">
<div class="close-button">
<i class="fa fa-close"></i>
</div>
<h3>Basics</h3>
<p>
This is an editor for two-dimensional programs made of glyphs, each of which has an alias (plaintext name) and
an effect. You can click on a cell in the grid to change (or clear) its glyph. The current program is stored
in the hash fragment of the URL, allowing for easy sharing and undo/redo.
</p>
<p>
Program execution is controlled by a cursor, which starts at the top left cell and moves to the right,
executing each glyph it passes over. Some glyphs change the direction of the cursor, facilitating control flow,
while others modify the stack or perform I/O.
</p>
<h3>Examples</h3>
<ul class="programs"></ul>
<h3>Glyphs</h3>
<dl class="glyphs"></dl>
</div>
</div>
</body>
</html>