-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.hbs
86 lines (83 loc) · 4.34 KB
/
index.hbs
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BF in CSS</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="first-element"></div>
<a class="view-on-github" href="https://github.com/JoshuaDraxten/bf-in-css">
<span> View on GitHub </span>
<svg version="1.1" width="20" height="20" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
<h2>💾 Memory:</h2>
<b>Operation: </b>
<input contenteditable="" type="radio" name="mt" id="mt0" checked> Noop
<input contenteditable="" type="radio" name="mt" id="mt1"> <
<input contenteditable="" type="radio" name="mt" id="mt2"> +
<input contenteditable="" type="radio" name="mt" id="mt3"> >
<div style="clear: both; height: 0.5em;"></div>
{{#each memory}}
<input contenteditable="" type="checkbox" name="p_v" id="p_v{{@index}}">
<input contenteditable="" type="radio" name="p" id="p{{@index}}" {{#if (isEqual @index 0)}}checked{{/if}}>
<div class="trigger">
<label for="p{{add @index -1}}" class="prev-p"></label>
<label for="p{{add @index 1}}" class="next-p"></label>
<label for="p_v{{@index}}" class="flip"></label>
</div>
<label for="p_v{{@index}}"></label>
{{/each}}
<label for="p0" style="color: blue; margin-top: 12px; display: block;">Reset to first cell in tape</label>
<h2>🔭 Code Scope:</h2>
<b>State: </b>
<input contenteditable="" type="radio" name="loop-state" id="eb" checked> exit block
<input contenteditable="" type="radio" name="loop-state" id="rb"> repeat block
<br />
<b>Level: </b>
<input contenteditable="" type="radio" name="indent" id="i0" checked>
<input contenteditable="" type="radio" name="indent" id="i1">
<input contenteditable="" type="radio" name="indent" id="i2">
<input contenteditable="" type="radio" name="indent" id="i3">
<h2>👨🏻💻 Commands:</h2>
{{#each commands}}
<input contenteditable="" type="radio" name="l" id="l{{@index}}"{{#if (isEqual @index 0)}} checked{{/if}}>
<input name="cmd-{{@index}}" id="v{{@index}}-0" type="radio"{{#if (isEqual this "")}} checked{{/if}}/>
<input name="cmd-{{@index}}" id="v{{@index}}-1" type="radio"{{#if (isEqual this "[")}} checked{{/if}}/>
<input name="cmd-{{@index}}" id="v{{@index}}-2" type="radio"{{#if (isEqual this "<")}} checked{{/if}}/>
<input name="cmd-{{@index}}" id="v{{@index}}-3" type="radio"{{#if (isEqual this "+")}} checked{{/if}}/>
<input name="cmd-{{@index}}" id="v{{@index}}-4" type="radio"{{#if (isEqual this ">")}} checked{{/if}}/>
<input name="cmd-{{@index}}" id="v{{@index}}-5" type="radio"{{#if (isEqual this "]")}} checked{{/if}}/>
<div class="cmd">
<label for="v{{@index}}-0"> </label>
<label for="v{{@index}}-1">[</label>
<label for="v{{@index}}-2"><</label>
<label for="v{{@index}}-3">+</label>
<label for="v{{@index}}-4">></label>
<label for="v{{@index}}-5">]</label>
<label for="l{{@index}}">@</label>
</div>
<div class="trigger">
<label for="i0"></label>
<label for="i1"></label>
<label for="i2"></label>
<label for="i3"></label>
<label class="sb"></label>
<label for="l{{add @index -1}}" class="prev"></label>
<label for="l{{add @index 1}}" class="next"></label>
</div>
{{/each}}
{{! Global actions }}
<div class="trigger global">
<label for="mt0" class="memory-noop"></label>
<label for="mt1" class="memory-prev"></label>
<label for="mt2" class="toggle"></label>
<label for="mt3" class="memory-next"></label>
<label for="eb" class="exit-block"></label>
<label for="rb" class="repeat-block"></label>
</div>
<div class="trigger-mask left"></div>
<div class="trigger-mask behind"></div>
<div class="trigger-mask right"></div>
</body>
</html>