diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 100 |
1 files changed, 12 insertions, 88 deletions
@@ -8,95 +8,19 @@ </head> <body> - <x-fretboard> - <form id='fretboard'> - <table> - <thead> - <tr> - <td class='open'>open</td> - <td class='fret1'></td> - <td class='fret2'></td> - <td class='fret3'>•</td> - <td class='fret4'></td> - <td class='fret5'>••</td> - <td class='fret6'></td> - <td class='fret7'>•</td> - <td class='selected'>selected</td> - </tr> - </thead> + <x-fretboard strings='6' frets='7'> + <template class='string'> + <x-string tonic='' frets='' slot='string'> + <li><input type='checkbox' name='muted'></li> + <li class='fret open'><slot name='open'></slot></li> + <template> + <li class='fret'><slot name='fret'></slot></li> + </template> + <li class='selected'><slot name='selected'>selected</slot></li> + </x-string> + </template> - <tbody> - <tr class='string1'> - <td class='open' x-data-note='E'>E</td> - <td x-data-note='F'><input type='radio' name='string1' value='fret1'></td> - <td x-data-note='F♯'><input type='radio' name='string1' value='fret2'></td> - <td x-data-note='G'><input type='radio' name='string1' value='fret3'></td> - <td x-data-note='G♯'><input type='radio' name='string1' value='fret4'></td> - <td x-data-note='A'><input type='radio' name='string1' value='fret5'></td> - <td x-data-note='A♯'><input type='radio' name='string1' value='fret6'></td> - <td x-data-note='B'><input type='radio' name='string1' value='fret7'></td> - <td class='selected'></td> - </tr> - <tr class='string2'> - <td class='open' x-data-note='A'>A</td> - <td x-data-note='A♯'><input type='radio' name='string2' value='fret1'></td> - <td x-data-note='B'><input type='radio' name='string2' value='fret2'></td> - <td x-data-note='C'><input type='radio' name='string2' value='fret3'></td> - <td x-data-note='C♯'><input type='radio' name='string2' value='fret4'></td> - <td x-data-note='D'><input type='radio' name='string2' value='fret5'></td> - <td x-data-note='D♯'><input type='radio' name='string2' value='fret6'></td> - <td x-data-note='E'><input type='radio' name='string2' value='fret7'></td> - <td class='selected'></td> - </tr> - <tr class='string3'> - <td class='open' x-data-note='D'>D</td> - <td x-data-note='D♯'><input type='radio' name='string3' value='fret1'></td> - <td x-data-note='E'><input type='radio' name='string3' value='fret2'></td> - <td x-data-note='F'><input type='radio' name='string3' value='fret3'></td> - <td x-data-note='F♯'><input type='radio' name='string3' value='fret4'></td> - <td x-data-note='G'><input type='radio' name='string3' value='fret5'></td> - <td x-data-note='G♯'><input type='radio' name='string3' value='fret6'></td> - <td x-data-note='A'><input type='radio' name='string3' value='fret7'></td> - <td class='selected'></td> - </tr> - <tr class='string4'> - <td class='open' x-data-note='G'>G</td> - <td x-data-note='G♯'><input type='radio' name='string4' value='fret1'></td> - <td x-data-note='A'><input type='radio' name='string4' value='fret2'></td> - <td x-data-note='A♯'><input type='radio' name='string4' value='fret3'></td> - <td x-data-note='B'><input type='radio' name='string4' value='fret4'></td> - <td x-data-note='C'><input type='radio' name='string4' value='fret5'></td> - <td x-data-note='C♯'><input type='radio' name='string4' value='fret6'></td> - <td x-data-note='D'><input type='radio' name='string4' value='fret7'></td> - <td class='selected'></td> - </tr> - <tr class='string5'> - <td class='open' x-data-note='B'>B</td> - <td x-data-note='C'><input type='radio' name='string5' value='fret1'></td> - <td x-data-note='C♯'><input type='radio' name='string5' value='fret2'></td> - <td x-data-note='D'><input type='radio' name='string5' value='fret3'></td> - <td x-data-note='D♯'><input type='radio' name='string5' value='fret4'></td> - <td x-data-note='E'><input type='radio' name='string5' value='fret5'></td> - <td x-data-note='F'><input type='radio' name='string5' value='fret6'></td> - <td x-data-note='F♯'><input type='radio' name='string5' value='fret7'></td> - <td class='selected'></td> - </tr> - <tr class='string6'> - <td class='open' x-data-note='E'>E</td> - <td x-data-note='F'><input type='radio' name='string6' value='fret1'></td> - <td x-data-note='F♯'><input type='radio' name='string6' value='fret2'></td> - <td x-data-note='G'><input type='radio' name='string6' value='fret3'></td> - <td x-data-note='G♯'><input type='radio' name='string6' value='fret4'></td> - <td x-data-note='A'><input type='radio' name='string6' value='fret5'></td> - <td x-data-note='A♯'><input type='radio' name='string6' value='fret6'></td> - <td x-data-note='B'><input type='radio' name='string6' value='fret7'></td> - <td class='selected'></td> - </tr> - </tbody> - </table> - - <button class='save'>+</button> - </form> + <button class='save'>+</button> </x-fretboard> <x-key-picker> |