VectorScore/index.html at master · DrakeB1234/VectorScore · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>vector-score</title>
  <script type="module" src="/src/dev/main.ts"></script>
  <link rel="icon" href="/public/vector-score-icon.svg" />
</head>

<body data-theme="light">
  <div class="staffs-container">
    <div id="staff-root-grand"></div>
    <div id="staff-root-treble"></div>
    <div id="staff-root-bass"></div>
    <div id="staff-root-alto"></div>
    <div id="staff-root-scrolling"></div>
    <div id="staff-root-rhythm"></div>
  </div>

  <div class="card-wrapper">
    <div class="controls-card">
      <div class="header">
        <h3>Controls</h3>
        <button class="icon" id="button-theme-toggle">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
            <path
              d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z" />
          </svg>
        </button>
      </div>
      <div class="input-stack">
        <label>
          Staff Selection
          <select id="input-select-staff">
            <option value="grand">Grand</option>
            <option value="treble">Treble</option>
            <option value="bass">Bass</option>
            <option value="alto">Alto</option>
            <option value="scrolling">Scrolling</option>
            <option value="rhythm">Rhythm</option>
          </select>
        </label>
        <label>
          Note Index
          <input type="number" id="input-number-index" value="0" min="0">
        </label>
        <label>
          Note Input
          <input type="text" id="input-text-notes" placeholder="e.g. C#4w/B3q..." autocomplete="off">
        </label>
      </div>
      <hr>
      <div class="button-grid">
        <button id="button-draw">Draw Notes</button>
        <button id="button-draw-chord">Draw Chord</button>
        <button id="button-draw-beam">Draw Beamed Note</button>
        <button id="button-draw-rest">Draw rest</button>
      </div>
      <hr>
      <div class="button-grid">
        <button id="button-change-note">Change Note</button>
        <button id="button-change-chord">Change Chord</button>
        <button id="button-justify">Justify Notes</button>
        <button id="button-error">Set Error Note</button>
        <button id="button-clear" class="danger">Clear Notes</button>
      </div>
      <hr>
      <div class="button-grid">
        <button id="button-test">Test</button>
        <button id="button-advance">Advance</button>
      </div>
      <hr>
      <div class="button-grid">
        <button id="button-increment-beat">Increment Current Beat UI</button>
        <button id="button-reset-beat">Reset Current Beat UI</button>
        <button id="button-compare">Compare Notes</button>
        <button id="button-reset-compare">Reset Compare Notes</button>
      </div>
    </div>
  </div>

</body>

</html>