[feat] remove format string & preview from GUI

Personal opinion: being able to change the format in the GUI,
 but not the fingering, felt misleading.
 I think the user should either be directed to the Fingering.js file
 or we should have a complete editor of fingerings in the GUI.
Since adding more elements to the GUI would be a lot of work,
 I opted for the first option.

- Removed all references to the format string and preview window
- Also fixed some wordings/indentation

woodwind_tab_generator/Fingering.js

@@ -0,0 +1,148 @@
+// +--------+
+// | COLORS |
+// +--------+
+// You can change the color of the fingering chart here.
+// Colors can be hex codes ("#123456") or names ("green")
+
+function getColor(note) {
+  const colorMap = {
+    C: "#ed1c24",
+    "C#": "#f37021",
+    D: "#f8931e",
+    "D#": "#ffc20e",
+    E: "#fff200",
+    F: "#bed630",
+    "F#": "#72bf44",
+    G: "#00a29d",
+    "G#": "#007dc5",
+    A: "#49479d",
+    "A#": "#8d5ca6",
+    B: "#c9277d",
+  }
+  return colorMap[note] || "gray"
+}
+
+//---------------------------------------------------------
+// INSTRUMENTS
+//---------------------------------------------------------
+
+// Each woodwind has the form:
+// {
+//  name:
+//  fingering:
+//  format:
+// },
+//
+// NAME: can be anything descriptive.
+// 
+// FINGERING:
+// Each note that can be played, then its holes.
+// Holes are listed starting from the mouthpiece.
+// You can use these symbols to represent whether the holes are covered:
+//      0 = ○
+//      o = ⦶
+//      1 = ●
+//      | = ◐
+//      - = ◒
+//
+// FORMAT:
+// Decide how the fingering will be displayed.
+// "$note" will be replaced with the name of the note,
+// "$1" "$2" etc. will be replaced by the hole symbols, with $1 being closest to the mouthpiece.
+
+
+const woodwinds = [
+    {
+      name: "Soprano Recorder",
+      fingering: {
+            "C5":  "11111111",
+            "C#5": "1111111|",
+            "D5":  "11111110",
+            "D#5": "111111|o",
+            "E5":  "111111oo",
+            "F5":  "11110011",
+            "F#5": "1111011o",
+            "G5":  "111100oo",
+            "G#5": "111011|o",
+            "A5":  "111000oo",
+            "A#5": "110110oo",
+            "B5":  "110000oo",
+            "C6":  "101000oo",
+            "C#6": "011000oo",
+            "D6":  "001000oo",
+            "D#6": "0011111o",
+            "E6":  "-11111oo",
+            "F6":  "-111101o",
+            "F#6": "-11101oo",
+            "G6":  "-11100oo",
+            "G#6": "-11010oo",
+            "A6":  "-11000oo",
+            "A#6": "-110011|",
+            "B6":  "-11011oo",
+            "C7":  "-10011oo",
+            "C#7": "-1011011",
+            "D7":  "-1011011",
+            "D#7": "-011011o",
+      },
+      format:
+`$note
+
+$1
+—
+$2
+$3
+$4
+—
+$5
+$6
+$7
+$8`
+    },
+
+    {
+      name: "Alto Recorder",
+      fingering: {
+             "F4": "11111111",
+             "F#4":"1111111|",
+             "G4": "11111110",
+             "G#4":"111111|o",
+             "A4": "111111oo",
+             "A#4":"11110011",
+             "B4": "1111011o",
+             "C5": "111100oo",
+             "C#5":"111011|o",
+             "D5": "111000oo",
+             "D#5":"110110oo",
+             "E5": "110000oo",
+             "F5": "101000oo",
+             "F#5":"011000oo",
+             "G5": "001000oo",
+             "G#5":"0011111o",
+             "A5": "-11111oo",
+             "A#5":"-111101o",
+             "B5": "-11101oo",
+             "C6": "-11100oo",
+             "C#6":"-11010oo",
+             "D6": "-11000oo",
+             "D#6":"-110011|",
+             "E6": "-11011oo",
+             "F6": "-10011oo",
+             "F#6": "-1011011",
+             "G6": "-1011011",
+             "G#6": "-011011o",
+      },
+      format:
+`$note
+
+$1
+—
+$2
+$3
+$4
+—
+$5
+$6
+$7
+$8`
+    },
+];