ACEBasicJS/index.html at main · dbenn/ACEBasicJS · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ACEBasicJS</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="src/ui/styles.css" />
    <link rel="icon" href="public/ace.gif" type="image/gif" />
  </head>
  <body>
    <header class="topbar">
      <a class="brand" href="https://github.com/dbenn/ACEBasicJS" title="ACEBasicJS">
        <img
          class="brand-logo"
          src="public/ace.gif"
          width="249"
          height="125"
          alt="ACE Basic"
        />
        <span class="brand-text">ACEBasic<span class="brand-js">JS</span></span>
      </a>
      <div class="controls">
        <label for="program-picker">Program</label>
        <select id="program-picker" aria-label="Program picker"></select>
        <button type="button" class="primary" id="run">Run</button>
        <button type="button" id="stop" disabled>Stop</button>
      </div>
    </header>

    <main class="main">
      <section class="panel editor-panel" id="source-panel" aria-label="ACE source">
        <h1 class="panel-title">ACE source (always visible · editable)</h1>
        <textarea id="source" spellcheck="false" aria-label="ACE program source"></textarea>
      </section>
      <div
        class="splitter"
        id="splitter"
        role="separator"
        aria-orientation="horizontal"
        aria-label="Resize source and display panes"
        aria-controls="source-panel display-panel"
        tabindex="0"
      ></div>
      <section class="panel output-panel" aria-label="Program display" id="display-panel">
        <h2 class="panel-title">Display</h2>
        <div
          id="screens"
          class="screens"
          hidden
          aria-hidden="true"
          aria-label="Intuition screens"
          tabindex="0"
        ></div>
        <div
          id="console"
          class="console"
          tabindex="0"
          role="log"
          aria-label="Program console"
          aria-live="polite"
        ><pre id="output" class="console-output"></pre><span
            id="live-input"
            class="live-input"
            aria-hidden="true"
          ></span><span id="caret" class="caret" hidden aria-hidden="true"></span><input
            id="console-input"
            class="console-input"
            type="text"
            autocomplete="off"
            spellcheck="false"
            aria-label="Program input (Enter to submit)"
            tabindex="-1"
            disabled
          /></div>
        <!--
          Real text field for INKEY$ / SLEEP quit keys. Required on iOS/Android:
          the soft keyboard only opens for <input>/<textarea>, and many mobile
          browsers deliver characters via the input event (not keydown).
        -->
        <div id="inkey-bar" class="inkey-bar" hidden>
          <label class="inkey-label" for="inkey-capture">Keys</label>
          <input
            id="inkey-capture"
            class="inkey-capture"
            type="text"
            inputmode="text"
            autocomplete="off"
            autocapitalize="off"
            autocorrect="off"
            spellcheck="false"
            enterkeyhint="done"
            placeholder="Tap here, then q to quit"
            aria-label="Program keys (tap to open keyboard, then press q to quit)"
          />
        </div>
      </section>
    </main>

    <div class="status" id="status" role="status"></div>

    <!-- Cache-bust query so Pages/CDN deploys are not stuck on an old compiler.js -->
    <script src="src/runtime/runtime.js?v=39"></script>
    <script src="src/compiler/compiler.js?v=39"></script>
    <script src="src/ui/app.js?v=39"></script>
  </body>
</html>