3 files changed, 123 insertions, 0 deletions

diff --git a/static/fretboard.png b/static/fretboard.png
new file mode 100644
index 0000000..eab2b88
--- /dev/null
+++ b/static/fretboard.png
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..63f6bc7
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,94 @@
+.fretboard-container {
+    position: relative;
+    padding: 30px;
+    padding-left: 50px;
+}
+
+.fretboard-container div {
+    position: absolute;
+    height: 20px;
+    width: 30px;
+}
+
+.fretboard-container div div {
+    width:100%;
+    height: 100%;
+    float:left;
+    position: relative;
+}
+
+.e {
+    top: 20px
+}
+
+.b {
+    top: 60px;
+}
+
+.g {
+    top: 100px;
+}
+
+.d {
+    top: 140px;
+}
+
+.a {
+    top: 180px;
+}
+
+.E {
+    top: 220px;
+}
+
+.zero {
+    left: 10px;
+}
+
+.one {
+    left: 70px;
+}
+
+.two {
+    left: 125px
+}
+
+.three {
+    left: 177px;
+}
+
+.four {
+    left: 230px;
+}
+
+.five {
+    left: 282px;
+}
+
+.six {
+    left: 335px;
+}
+
+.seven {
+    left: 385px;
+}
+
+.eight {
+    left: 438px;
+}
+
+.nine {
+    left: 491px;
+}
+
+.ten {
+    left: 542px;
+}
+
+.eleven {
+    left: 597px;
+}
+
+.twelve {
+    left: 647px;
+}
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 0000000..4fcb1bd
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,29 @@
+var colors = ['red', 'green', 'blue', 'grey']
+var stats = document.getElementById("stats")
+
+function generateFretMarkers(chordMap, counts) {
+    var chordCount = 0;
+    for (const [chord, notes] of Object.entries(chordMap)) {
+        for (let i = 0; i < notes.length; i++) {
+            var fret = document.getElementById(notes[i]);
+            var fretMarker = document.createElement("div");
+            fretMarker.style.backgroundColor = colors[chordCount]
+
+            if (counts[notes[i]] == 2) {
+                fretMarker.style.width = "50%"
+            }
+
+            if (counts[notes[i]] == 3) {
+                fretMarker.style.width = "33%"
+            }
+
+            if (counts[notes[i]] == 4) {
+                fretMarker.style.width = "25%"
+            }
+
+            fret.appendChild(fretMarker)
+        }
+    stats.innerHTML += '<button style="height:20px; width:20px; background-color:' + colors[chordCount] + ';"></button>' + chord + '     ';
+    chordCount++
+    }
+}