neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add alphabet as a list

This commit is contained in:
Neale Pickett 2020-05-17 16:58:07 -06:00
parent 29cf0461a5
commit c8c1b14796
2 changed files with 119 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
static/index.html
View File

@ -36,9 +36,9 @@
<span class="mdl-layout-title">Repeaters</span> <span class="mdl-layout-title">Repeaters</span>
<nav class="mdl-navigation"> <nav class="mdl-navigation">
<a class="mdl-navigation__link" href="?repeater=">General Chaos</a> <a class="mdl-navigation__link" href="?repeater=">General Chaos</a>
<a class="mdl-navigation__link" href="?repeater=beg">1-15 WPM</a> <a class="mdl-navigation__link" href="?repeater=1-15+WPM">1-15 WPM</a>
<a class="mdl-navigation__link" href="?repeater=int">16-20 WPM</a> <a class="mdl-navigation__link" href="?repeater=16-20+WPM">16-20 WPM</a>
<a class="mdl-navigation__link" href="?repeater=adv">21-99 WPM</a> <a class="mdl-navigation__link" href="?repeater=21-99+WPM">21-99 WPM</a>
</nav> </nav>
<hr> <hr>
<nav class="mdl-navigation"> <nav class="mdl-navigation">
@ -130,75 +130,111 @@
<div class="mdl-card mdl-shadow--4dp"> <div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h2 class="mdl-card__title-text">Dichotomous Key</h2> <h2 class="mdl-card__title-text">Alphabet</h2>
</div> </div>
<table class="mdl-card__supporting-text long morsetree"> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<tbody> <div class="mdl-tabs__tab-bar">
<tr> <a href="#morse-tree" class="mdl-tabs__tab is-active">Dichotomous Key</a>
<td rowspan="8">e ·</td> <a href="#morse-list" class="mdl-tabs__tab">List</a>
<td rowspan="4">i ··</td> </div>
<td rowspan="2">s ···</td> <div class="mdl-tabs__panel is-active" id="morse-tree">
<td rowspan="1">h ····</td> <table>
</tr> <tbody>
<tr> <tr>
<td rowspan="1">v ···–</td> <td rowspan="8">e .</td>
</tr> <td rowspan="4">i ..</td>
<tr> <td rowspan="2">s ...</td>
<td rowspan="2">u ··–</td> <td rowspan="1">h ....</td>
<td rowspan="1">f ··–·</td> </tr>
</tr> <tr>
<tr> <td rowspan="1">v ...-</td>
<td rowspan="1"></td> </tr>
</tr> <tr>
<tr> <td rowspan="2">u ..-</td>
<td rowspan="4">a ·–</td> <td rowspan="1">f ..-.</td>
<td rowspan="2">r ·–·</td> </tr>
<td rowspan="1">l ·–··</td> <tr>
</tr> <td rowspan="1"></td>
<tr> </tr>
<td rowspan="1">j ·–––</td> <tr>
</tr> <td rowspan="4">a .-</td>
<tr> <td rowspan="2">r .-.</td>
<td rowspan="2">w ·––</td> <td rowspan="1">l .-..</td>
<td rowspan="1">p ·––·</td> </tr>
</tr> <tr>
<tr> <td rowspan="1">j .---</td>
<td rowspan="1"></td> </tr>
</tr> <tr>
<td rowspan="2">w .--</td>
<td rowspan="1">p .--.</td>
</tr>
<tr>
<td rowspan="1"></td>
</tr>
<tr> <tr>
<td rowspan="8">t –</td> <td rowspan="8">t -</td>
<td rowspan="4">n –·</td> <td rowspan="4">n -.</td>
<td rowspan="2">d –··</td> <td rowspan="2">d -..</td>
<td rowspan="1">b –···</td> <td rowspan="1">b -...</td>
</tr> </tr>
<tr> <tr>
<td rowspan="1">x –··–</td> <td rowspan="1">x -..-</td>
</tr> </tr>
<tr> <tr>
<td rowspan="2">k –·–</td> <td rowspan="2">k -.-</td>
<td rowspan="1">c –·–·</td> <td rowspan="1">c -.-.</td>
</tr> </tr>
<tr> <tr>
<td rowspan="1">y –·––</td> <td rowspan="1">y -.--</td>
</tr> </tr>
<tr> <tr>
<td rowspan="4">m ––</td> <td rowspan="4">m --</td>
<td rowspan="2">g ––·</td> <td rowspan="2">g --.</td>
<td rowspan="1">z ––··</td> <td rowspan="1">z --..</td>
</tr> </tr>
<tr> <tr>
<td rowspan="1">q ––·–</td> <td rowspan="1">q --.-</td>
</tr> </tr>
<tr> <tr>
<td rowspan="2">o –––</td> <td rowspan="2">o ---</td>
<td rowspan="1"></td> <td rowspan="1"></td>
</tr> </tr>
<tr> <tr>
<td rowspan="1"></td> <td rowspan="1"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="mdl-tabs__panel" id="morse-list">
<span>a .-</span>
<span>b -...</span>
<span>c -.-.</span>
<span>d -..</span>
<span>e .</span>
<span>f ..-.</span>
<span>g --.</span>
<span>h ....</span>
<span>i ..</span>
<span>j .---</span>
<span>k -.-</span>
<span>l .-..</span>
<span>m --</span>
<span>n -.</span>
<span>o ---</span>
<span>p .--.</span>
<span>q --.-</span>
<span>r .-.</span>
<span>s ...</span>
<span>t -</span>
<span>u ..-</span>
<span>v ...-</span>
<span>w .--</span>
<span>x -..-</span>
<span>y -.--</span>
<span>z --..</span>
</div>
</div>
</div> </div>
<div class="mdl-card mdl-shadow--4dp"> <div class="mdl-card mdl-shadow--4dp">
@ -265,9 +301,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<hr>
<p>Errors</p>
<div id="errors"></div>
</div> </div>
</div> </div>

19
static/vail.css
View File

@ -76,18 +76,25 @@ img {
} }
.morsetree { #morse-tree table {
width: 100%; width: 100%;
} }
.morsetree tr { #morse-tree tr {
height: 1.4em; height: 1.4em;
text-align: center; text-align: center;
font-family: monospace; font-family: monospace;
} }
.morsetree tr, #morse-tree tr,
.morsetree td:nth-child(n+2) { #morse-tree td:nth-child(n+2) {
background: #eee; background: #eee;
} }
.morsetree tr:nth-child(n+2) { #morse-tree tr:nth-child(n+2) {
background: #ddd; background: #ddd;
} }
#morse-list span {
display: inline-block;
background: #eee;
margin: 1px;
padding: 0.4em;
width: 3em;