151 lines
No EOL
5.4 KiB
HTML
151 lines
No EOL
5.4 KiB
HTML
<!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> |