html: add classes to fret tds and trs, rejigger

1 files changed, 33 insertions, 19 deletions

diff --git a/index.html b/index.html
index a73af92..99258e2 100644
--- a/index.html
+++ b/index.html
@@ -12,70 +12,84 @@
       <table>
         <thead>
           <tr>
-            <td>open</td>
-            <td>fret 1</td>
-            <td>fret 2</td>
-            <td>fret 3</td>
-            <td>fret 4</td>
-            <td>fret 5</td>
-            <td>selected</td>
+            <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>
 
         <tbody>
-          <tr>
+          <tr class='string1'>
             <td class='open'>E</td>
             <td><input type='radio' name='string1' value='fret1'></td>
             <td><input type='radio' name='string1' value='fret2'></td>
             <td><input type='radio' name='string1' value='fret3'></td>
             <td><input type='radio' name='string1' value='fret4'></td>
             <td><input type='radio' name='string1' value='fret5'></td>
-            <td><p class='string1'></p></td>
+            <td><input type='radio' name='string1' value='fret6'></td>
+            <td><input type='radio' name='string1' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string2'>
             <td class='open'>A</td>
             <td><input type='radio' name='string2' value='fret1'></td>
             <td><input type='radio' name='string2' value='fret2'></td>
             <td><input type='radio' name='string2' value='fret3'></td>
             <td><input type='radio' name='string2' value='fret4'></td>
             <td><input type='radio' name='string2' value='fret5'></td>
-            <td><p class='string2'></p></td>
+            <td><input type='radio' name='string2' value='fret6'></td>
+            <td><input type='radio' name='string2' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string3'>
             <td class='open'>D</td>
             <td><input type='radio' name='string3' value='fret1'></td>
             <td><input type='radio' name='string3' value='fret2'></td>
             <td><input type='radio' name='string3' value='fret3'></td>
             <td><input type='radio' name='string3' value='fret4'></td>
             <td><input type='radio' name='string3' value='fret5'></td>
-            <td><p class='string3'></p></td>
+            <td><input type='radio' name='string3' value='fret6'></td>
+            <td><input type='radio' name='string3' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string4'>
             <td class='open'>G</td>
             <td><input type='radio' name='string4' value='fret1'></td>
             <td><input type='radio' name='string4' value='fret2'></td>
             <td><input type='radio' name='string4' value='fret3'></td>
             <td><input type='radio' name='string4' value='fret4'></td>
             <td><input type='radio' name='string4' value='fret5'></td>
-            <td><p class='string4'></p></td>
+            <td><input type='radio' name='string4' value='fret6'></td>
+            <td><input type='radio' name='string4' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string5'>
             <td class='open'>B</td>
             <td><input type='radio' name='string5' value='fret1'></td>
             <td><input type='radio' name='string5' value='fret2'></td>
             <td><input type='radio' name='string5' value='fret3'></td>
             <td><input type='radio' name='string5' value='fret4'></td>
             <td><input type='radio' name='string5' value='fret5'></td>
-            <td><p class='string5'></p></td>
+            <td><input type='radio' name='string5' value='fret6'></td>
+            <td><input type='radio' name='string5' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string6'>
             <td class='open'>E</td>
             <td><input type='radio' name='string6' value='fret1'></td>
             <td><input type='radio' name='string6' value='fret2'></td>
             <td><input type='radio' name='string6' value='fret3'></td>
             <td><input type='radio' name='string6' value='fret4'></td>
             <td><input type='radio' name='string6' value='fret5'></td>
-            <td><p class='string6'></p></td>
+            <td><input type='radio' name='string6' value='fret6'></td>
+            <td><input type='radio' name='string6' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
         </tbody>
       </table>