patchNet/index.html at main · jarretttthompson/patchNet · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>patchNet</title>
    <link rel="stylesheet" href="/src/fonts.css" />
    <link rel="stylesheet" href="/src/tokens.css" />
    <link rel="stylesheet" href="/src/shell.css" />
  </head>
  <body>
    <div id="app">
      <div class="toolbar toolbar--logo">
        <img class="app-title" src="/patchnet-logo.png" alt="patchNet" />
        <span style="flex: 1"></span>
        <button
          id="toolbar-collapse-btn"
          class="toolbar-collapse-btn"
          title="Expand toolbar"
          aria-label="Expand toolbar"
          aria-expanded="false"
        >▾</button>
      </div>
      <div class="toolbar toolbar--controls toolbar--collapsed" id="toolbar-controls">
        <!-- Audio controls -->
        <button id="audio-toggle-btn" class="toolbar-audio-btn" title="Toggle audio (DSP on/off)" aria-pressed="false">
          <span class="toolbar-audio-icon">▶</span>
          <span class="toolbar-audio-label">DSP</span>
        </button>
        <select id="audio-device-select" class="toolbar-audio-device" title="Audio output device">
          <option value="">default output</option>
        </select>
        <select id="audio-input-select" class="toolbar-audio-device" title="Audio input device (adc~)">
          <option value="">default input</option>
        </select>
        <div class="toolbar-vol-wrap" title="Master volume">
          <span class="toolbar-vol-label">vol</span>
          <input id="master-vol" class="toolbar-vol-slider" type="range" min="0" max="1" step="0.01" value="0.75" />
          <span id="master-vol-readout" class="toolbar-vol-readout">75</span>
        </div>

        <div class="toolbar-separator"></div>

        <button
          id="save-btn"
          class="toolbar-icon-btn"
          aria-label="Save patch"
          title="Save patch (download .patchnet)"
          >↓</button>
        <button
          id="load-btn"
          class="toolbar-icon-btn"
          aria-label="Load patch"
          title="Load patch (upload .patchnet)"
          >↑</button>

        <button
          id="share-btn"
          class="toolbar-icon-btn"
          aria-label="Share patch"
          title="Share patch (copy link to clipboard)"
          >⇑</button>

        <div class="toolbar-separator"></div>

        <button
          id="patch-mode-btn"
          class="toolbar-icon-btn toolbar-icon-btn--toggle"
          type="button"
          aria-pressed="true"
          title="Patch mode (P) — toggle cable drawing/interaction"
          aria-label="Toggle patch mode"
        ><svg viewBox="0 0 24 12" width="20" height="10" aria-hidden="true"><circle cx="3" cy="6" r="2.5" fill="currentColor"/><circle cx="21" cy="6" r="2.5" fill="currentColor"/><line x1="5.5" y1="6" x2="18.5" y2="6" stroke="currentColor" stroke-width="1.5"/></svg></button>

        <button
          id="snap-btn"
          class="toolbar-icon-btn toolbar-icon-btn--toggle"
          type="button"
          aria-pressed="true"
          title="Snap to grid (on)"
          aria-label="Toggle snap to grid"
        ><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4 v8 a6 6 0 0 0 12 0 v-8"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="14" y1="8" x2="18" y2="8"/></svg></button>

        <div class="toolbar-separator"></div>

        <button
          id="shortcuts-btn"
          class="toolbar-icon-btn"
          aria-label="Keyboard shortcuts"
          title="Keyboard shortcuts"
          >?</button>
        <input type="file" id="load-file-input" accept=".patchnet,.txt" style="display:none" />
      </div>
      <div class="pn-tab-row">
        <div id="pn-tab-bar"></div>
        <div class="patch-name-wrap">
          <span
            id="patch-name-input"
            class="patch-name-input"
            contenteditable="plaintext-only"
            spellcheck="false"
            autocomplete="off"
            role="textbox"
            aria-label="Patch name"
            data-placeholder="untitled patch"
          ></span><span class="patch-name-caret" aria-hidden="true"></span>
        </div>
      </div>
      <div class="workspace">
        <div class="canvas-area" data-canvas-root>
          <div class="canvas-grid"></div>
        </div>
        <div class="divider"></div>
        <div class="text-panel text-panel--collapsed" id="console-panel">
          <div class="text-panel-header">
            <span>console</span>
            <button id="console-collapse-btn" class="console-collapse-btn" title="Expand console" aria-label="Expand console">‹</button>
          </div>
          <textarea data-text-panel placeholder="#N canvas;" spellcheck="false"></textarea>
        </div>
      </div>
      <div class="status-bar">
        <span class="status-mode" data-status-mode>EDIT</span>
        <span data-object-count>0 objects</span>
        <span id="audio-status">audio: off</span>
      </div>
    </div>
    <div class="crt-overlay" aria-hidden="true"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>