ok

siroshimadenagasaki · Oct 15, 2024 · 4565d08 · 4565d08
1 parent e45f9e0
commit 4565d08
Show file tree

Hide file tree

Showing 8 changed files with 946 additions and 0 deletions.
diff --git a/trash/.DS_Store b/trash/.DS_Store
diff --git a/trash/<head>.html b/trash/<head>.html
@@ -0,0 +1,73 @@
+<head>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+</head>
+
+<canvas id="stars"></canvas>
+<h1>Guitar Fretboard Trainer</h1> 
+<div class="main">
+  <div id="controls" class="fullscreen">
+    <div id="start" class="button">Start</div>
+    <div id="reset" class="button">Reset</div>
+    <div id="score">
+      <span>Score</span>
+      <span></span>
+    </div>
+    <div id="play_again" class="button">Play Again</div>
+  </div>
+
+  <div class="guitar-neck">
+
+    <div class="fret first"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+    <div class="fret"></div>
+
+    <ul class="dots">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+    <ul class="strings">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+
+
+    <div id="note">? </div>
+
+    <div id="options">
+      <h2>Choose Note:</h2>
+      <ul>
+        <li>A</li>
+        <li>A#</li>
+        <li>B</li>
+        <li>C</li>
+        <li>C#</li>
+        <li>D</li>
+        <li>D#</li>
+        <li>E</li>
+        <li>F</li>
+        <li>F#</li>
+        <li>G</li>
+        <li>G#</li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div id="score_board"></div>
diff --git a/trash/fretboard-diagram-creator-main.zip b/trash/fretboard-diagram-creator-main.zip
diff --git a/trash/fretboard-diagram-creator-main/LICENSE b/trash/fretboard-diagram-creator-main/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Tobias Kolditz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/trash/fretboard-diagram-creator-main/README.md b/trash/fretboard-diagram-creator-main/README.md
@@ -0,0 +1,13 @@
+# Fretboard Diagram Creator
+
+A simple online tool with which you can create fretboard diagrams for the guitar. 
+
+Demo: https://verzettelung.com/20/12/22/
+
+## Features
+
+* Freely select notes for scale or chord diagrams
+* Edit note labels (to indicate fingerings, intervals etc.)
+* Color notes
+* Select part of the fretboard
+* Save diagram as SVG
diff --git a/trash/fretboard-diagram-creator-main/fretboard.css b/trash/fretboard-diagram-creator-main/fretboard.css
@@ -0,0 +1,207 @@
+/* Diagram */
+
+g.note.transparent:hover {
+    opacity: 1;
+}
+
+g.note {
+    fill: white;
+    stroke-width: 1px;
+    stroke: black;
+}
+
+g.note.selected>circle {
+    opacity: 1;
+    stroke-dasharray: 4, 4;
+    stroke-width: 3px;
+    stroke: black;
+}
+
+g.note.hidden {
+    opacity: 0;
+}
+
+g.note.transparent {
+    opacity: 0.3;
+}
+
+g.note.visible {
+    opacity: 1;
+    fill: white;
+}
+
+g.note.blue {
+    fill: steelblue;
+}
+
+g.note.blue>text {
+    stroke: white;
+    fill: white;
+}
+
+g.note.black {
+    fill: black;
+}
+
+g.note.black>text {
+    stroke: white;
+    fill: white;
+}
+
+g.note.red {
+    fill: indianred;
+}
+
+g.note.red>text {
+    stroke: white;
+    fill: white;
+}
+
+g.note.green {
+    fill: teal;
+}
+
+g.note.green>text {
+    stroke: white;
+    fill: white;
+}
+
+path.string {
+    stroke: black;
+    fill: none;
+}
+
+path.frets {
+    stroke: black;
+    stroke-width: 1px;
+    fill: none;
+}
+
+g.note>text {
+    stroke: black;
+    stroke-width: 0px;
+    fill: black;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-size: 18px;
+}
+
+#editable-div {
+    text-align: center;
+    font-size: 18px;
+}
+
+#fretboard-diagram-creator {
+    padding-top: 10px;
+    /* border: 1px solid; */
+}
+
+div.menu {
+    text-align: center;
+    /* text-align: center; */
+}
+
+text.marker {
+    text-anchor: middle;
+    font-size: 16px;
+    fill: black;
+}
+
+
+/* Controls */
+
+/* Actions on nodes */
+
+#color-selector {
+    /* background-color: lightgray; */
+    margin: auto;
+    padding-bottom: 10px;
+    width: 280px;
+    display: flex;
+    justify-content: space-between;
+}
+
+button.color {
+    width: 44px;
+}
+
+button {
+    height: 25px;
+}
+
+button.color:hover {
+    transform: scale(1.1);
+}
+
+.color.blue {
+    background-color: steelblue;
+}
+
+.color.black {
+    background-color: black;
+}
+
+.color.green {
+    background-color: teal;
+}
+
+.color.red {
+    background-color: indianred;
+}
+
+.color.white {
+    background-color: white;
+}
+
+/* Global actions */
+
+#global-actions {
+    margin: auto;
+    width: 280px;
+    display: flex;
+    justify-content: space-between;
+}
+
+@supports (width: 100vw) {
+    figure.half-full {
+        max-width: 100vw;
+        width: 1200px;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -600px;
+        margin-right: -600px;
+    }
+    @media only screen and (max-width: 1200px) {
+        figure.half-full {
+            max-width: 100vw;
+            width: 1000px;
+            position: relative;
+            left: 50%;
+            right: 50%;
+            margin-left: -500px;
+            margin-right: -500px;
+            overflow-y: auto;
+        }
+    }
+    @media only screen and (max-width: 1000px) {
+        figure.half-full {
+            max-width: 100vw;
+            width: 100%;
+            left: 0;
+            right: 0;
+            margin: 0;
+            overflow-y: auto;
+        }
+    }
+}
+
+.num-input {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum";
+}
+
+.error {
+    font-size: 18px;
+    text-anchor: middle;
+}
diff --git a/trash/fretboard-diagram-creator-main/fretboard.html b/trash/fretboard-diagram-creator-main/fretboard.html
@@ -0,0 +1,42 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+
+    <title>Fretboard Diagram Creator</title>
+    <link rel="stylesheet" href="fretboard.css">
+
+</head>
+
+<body>
+    <figure id="fretboard-diagram-creator" class="half-full">
+        <svg xmlns="http://www.w3.org/2000/svg" id="fretboard" width=900 height=280 style="background-color: white;">
+        </svg>
+    </figure>
+    <div class="menu">
+        <div id="color-selector">
+            <button title="blue" class="color blue"></button>
+            <button title="green" class="color green"></button>
+            <button title="red" class="color red"></button>
+            <button title="white" class="color white"></button>
+            <button title="black" class="color black"></button>
+            <button title="delete" id="delete-note">X</button>
+        </div>
+        <div id="global-actions">
+            <input id="start-fret" type="number" class="num-input" value="1" name="startFret" min=1 max=22 maxlength="2"
+                style="width: 5ch" autocomplete=off>
+            <button id="enharmonic" style="width: 25px; text-align: center;">♭</button>
+            <button id="visibility" class="button">Toggle</button>
+            <button id="save-svg" class="button">Save</button>
+            <button id="reset" class="button">Reset</button>
+            <input id="end-fret" type="number" class="num-input" value="12" name="startFret" min=1 max=22 maxlength="2"
+                style="width: 5ch" autocomplete=off>
+            <a id="svg-link" download="fretboard-diagram.svg"></a>
+        </div>
+    </div>
+    <script src="fretboard.js"></script>
+</body>
+
+</html>