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

101
static/index.html
View File

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

17
static/vail.css
View File

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