diff options
| author | Dominic DiTaranto <domdit@gmail.com> | 2024-09-22 21:30:28 -0400 |
|---|---|---|
| committer | Dominic DiTaranto <domdit@gmail.com> | 2024-09-22 21:30:28 -0400 |
| commit | 75e802e5b27425db95d000f714e3b3363a5e1a9c (patch) | |
| tree | 1ed046b10702a9340934adeb6859f5322ef4920b /templates/index.html | |
Diffstat (limited to 'templates/index.html')
| -rw-r--r-- | templates/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..6da1376 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Chord Tone</title> + <link rel="stylesheet" href="/static/main.css"> +</head> +<body> + <h1>Chord Tone Map Generator</h1> + <hr> + <p>This will map the notes of multiple chords on the fretboard in different colors. + Use this to map out chord tones for improvisation, melody construction, + and whatever else you can think of. If this has helped you at all, + please consider <a href="https://www.domdit.com/donate" target="_blank">donating</a>!</p> + + <form method="post"> + + <datalist id="chords"> + {% for chord in chords %} + <option value="{{chord}}">{{chord}}</option> + {% endfor %} + </datalist> + + <label for="chord_1">Chord 1:</label> + <input list="chords" name="chord_1" id="chord_1"> + + <label for="chord_2">Chord 2:</label> + <input list="chords" name="chord_2" id="chord_2"> + <br> + <label for="chord_3">Chord 3:</label> + <input list="chords" name="chord_3" id="chord_3"> + + <label for="chord_4">Chord 4:</label> + <input list="chords" name="chord_4" id="chord_4"> + + <br><br> + <input type="submit" value="Submit"> + </form> + + <br> + + <div class="fretboard-container"> + + <img src="{{ url_for('static', filename='fretboard.png') }}"> + + <div id="e0" class="e zero"></div> + <div id="e1" class="e one"></div> + <div id="e2" class="e two"></div> + <div id="e3" class="e three"></div> + <div id="e4" class="e four"></div> + <div id="e5" class="e five"></div> + <div id="e6" class="e six"></div> + <div id="e7" class="e seven"></div> + <div id="e8" class="e eight"></div> + <div id="e9" class="e nine"></div> + <div id="e10" class="e ten"></div> + <div id="e11" class="e eleven"></div> + <div id="e12" class="e twelve"></div> + + <div id="b0" class="b zero"></div> + <div id="b1" class="b one"></div> + <div id="b2" class="b two"></div> + <div id="b3" class="b three"></div> + <div id="b4" class="b four"></div> + <div id="b5" class="b five"></div> + <div id="b6" class="b six"></div> + <div id="b7" class="b seven"></div> + <div id="b8" class="b eight"></div> + <div id="b9" class="b nine"></div> + <div id="b10" class="b ten"></div> + <div id="b11" class="b eleven"></div> + <div id="b12" class="b twelve"></div> + + <div id="g0" class="g zero"></div> + <div id="g1" class="g one"></div> + <div id="g2" class="g two"></div> + <div id="g3" class="g three"></div> + <div id="g4" class="g four"></div> + <div id="g5" class="g five"></div> + <div id="g6" class="g six"></div> + <div id="g7" class="g seven"></div> + <div id="g8" class="g eight"></div> + <div id="g9" class="g nine"></div> + <div id="g10" class="g ten"></div> + <div id="g11" class="g eleven"></div> + <div id="g12" class="g twelve"></div> + + <div id="d0" class="d zero"></div> + <div id="d1" class="d one"></div> + <div id="d2" class="d two"></div> + <div id="d3" class="d three"></div> + <div id="d4" class="d four"></div> + <div id="d5" class="d five"></div> + <div id="d6" class="d six"></div> + <div id="d7" class="d seven"></div> + <div id="d8" class="d eight"></div> + <div id="d9" class="d nine"></div> + <div id="d10" class="d ten"></div> + <div id="d11" class="d eleven"></div> + <div id="d12" class="d twelve"></div> + + <div id="a0" class="a zero"></div> + <div id="a1" class="a one"></div> + <div id="a2" class="a two"></div> + <div id="a3" class="a three"></div> + <div id="a4" class="a four"></div> + <div id="a5" class="a five"></div> + <div id="a6" class="a six"></div> + <div id="a7" class="a seven"></div> + <div id="a8" class="a eight"></div> + <div id="a9" class="a nine"></div> + <div id="a10" class="a ten"></div> + <div id="a11" class="a eleven"></div> + <div id="a12" class="a twelve"></div> + + <div id="ee0" class="E zero"></div> + <div id="ee1" class="E one"></div> + <div id="ee2" class="E two"></div> + <div id="ee3" class="E three"></div> + <div id="ee4" class="E four"></div> + <div id="ee5" class="E five"></div> + <div id="ee6" class="E six"></div> + <div id="ee7" class="E seven"></div> + <div id="ee8" class="E eight"></div> + <div id="ee9" class="E nine"></div> + <div id="ee10" class="E ten"></div> + <div id="ee11" class="E eleven"></div> + <div id="ee12" class="E twelve"></div> + </div> + + <div id="stats"></div> + + <hr> + <h4>Upcoming Features:</h4> + <ul> + <li>Select Your Own Colors</li> + <li>Fix the fret dots so they are more visible</li> + <li>Add up to 24 frets</li> + <li>Add option to choose your which frets you want to see</li> + <li>Improve the overall look of the app</li> + </ul> + <hr> + <small>Version 1.0 | Created By <a href="https://www.domdit.com" target="_blank">Dominic DiTaranto</a> | Questions/Suggestions: me@domdit.com | Last Update 09/22/2024</small> + + <script src="static/main.js"></script> + <script> + generateFretMarkers(JSON.parse('{{chord_map | tojson}}'), JSON.parse('{{counts | tojson}}')) + </script> + +</body> +</html>
\ No newline at end of file |