vail/static/index.html

326 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>Vail</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-purple.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Vail stuff -->
<link rel="manifest" href="manifest.json">
<link rel="icon" href="vail.png" sizes="256x256" type="image/png">
<link rel="icon" href="vail.svg" sizes="any" type="image/svg+xml">
<script type="module" src="vail.mjs"></script>
<link rel="stylesheet" href="vail.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Vail</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://github.com/nealey/vail">Source Code</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Repeaters</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">General</a>
<a class="mdl-navigation__link" href="#1">Channel 1</a>
<a class="mdl-navigation__link" href="#2">Channel 2</a>
<a class="mdl-navigation__link" href="#3">Channel 3</a>
</nav>
<hr>
<span class="mdl-layout-title">Local Practice</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#Echo">Echo</a>
<a class="mdl-navigation__link" href="#Fortunes">Fortunes</a>
<a class="mdl-navigation__link" href="#Fortunes: Pauses ×2">Fortunes (slow)</a>
<a class="mdl-navigation__link" href="#Fortunes: Pauses ×4">Fortunes (very slow)</a>
<a class="mdl-navigation__link" href="#Fortunes: Pauses ×6">Fortunes (very very slow)</a>
<a class="mdl-navigation__link" href="#Fortunes: Pauses ×10">Fortunes (crazy slow)</a>
</nav>
<hr>
<span class="mdl-layout-title">Resources</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://github.com/nealey/vail/wiki" target="_blank">Wiki</a>
<a class="mdl-navigation__link" href="https://discord.gg/GBzj8cBat7" target="_blank">Discord</a>
</nav>
</div>
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
<main class="mdl-layout__content">
<div class="flex">
<div class="mdl-card mdl-shadow--4dp input-methods mashable-area">
<div id="recv">
<!-- This div appears as a little light that turns on when someone's sending -->
<i class="material-icons" id="muted">volume_off</i>
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="repeater" list="repeater-list">
<datalist id="repeater-list">
<option value="">General</option>
<option value="1">Channel 1</option>
<option value="2">Channel 2</option>
<option value="3">Channel 3</option>
<option value="Null">Null (dummy load)</option>
<option>Echo</option>
<option>Echo 5s</option>
<option>Echo 10s</option>
<option>Fortunes</option>
<option>Fortunes: Pauses ×2</option>
<option>Fortunes: Pauses ×4</option>
<option>Fortunes: Pauses ×8</option>
</datalist>
<label class="mdl-textfield__label" for="repeater">Repeater</label>
</div>
</h2>
</div>
<output id="note"></output>
<div id="charts">
<canvas class="chart" id="rxChart" data-color="orange"></canvas>
<canvas class="chart" id="txChart" data-color="teal"></canvas>
<canvas class="chart" id="ditChart" data-color="olive"></canvas>
<canvas class="chart" id="dahChart" data-color="purple"></canvas>
</div>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#straight" class="mdl-tabs__tab is-active" data-singlekey="straight">Straight Key</a>
<a href="#iambic" class="mdl-tabs__tab" data-singlekey="iambic">Iambic</a>
<a href="#tools" class="mdl-tabs__tab">Tools</a>
</div>
<div class="mdl-tabs__panel is-active" id="straight">
<table class="center wide">
<tr>
<td colspan="2">
<button id="key" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Key
</button>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>c</kbd>
<kbd>,</kbd>
<kbd>Enter</kbd>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<img class="gamepad b0" title="Gamepad Bottom Button" src="b0.svg" alt="Bottom button">
<img class="gamepad b1" title="Gamepad Right Button" src="b1.svg" alt="Right button">
</td>
</tr>
</table>
</div>
<div class="mdl-tabs__panel" id="iambic">
<table class="center wide">
<tr>
<td colspan="2">
<button id="dit" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Dit
</button>
</td>
<td colspan="2">
<button id="dah" class="key mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Dah
</button>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>.</kbd>
<kbd>x</kbd>
</td>
<td>
<i class="material-icons" role="presentation">keyboard</i>
</td>
<td>
<kbd>/</kbd>
<kbd>z</kbd>
</td>
</tr>
<tr>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<img class="gamepad b2" title="Gamepad Left Button" src="b2.svg" alt="Left Button">
<kbd class="gamepad" title="Gamepad Left Shoulder Button">L1</kbd>
</td>
<td>
<i class="material-icons" role="presentation">gamepad</i>
</td>
<td>
<img class="gamepad b3" title="Gamepad Top Button" src="b3.svg" alt="Top Button">
<kbd class="gamepad" title="Gamepad Right Shoulder Button">R1</kbd>
</td>
</tr>
<tr>
<td colspan="4" class="mdl-card__supporting-text" style="text-align: center;">
Second mouse button switches dah and dit
</td>
</tr>
</table>
</div>
<div class="mdl-tabs__panel" id="tools">
<div class="flex mdl-card__supporting-text">
<button id="ck" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
CK
</button>
<p>
Send <code>CK</code> (check) to the repeater, and play when it comes back.
</p>
</div>
<div class="flex mdl-card__supporting-text">
<button id="reset" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Reset
</button>
<p>
Reset all Vail preferences to default.
</p>
</div>
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored maximize" title="maximize">
<i class="material-icons mdl-color-text--white" role="presentation">aspect_ratio</i>
</button>
</div>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Notes</h2>
</div>
<div class="mdl-card__supporting-text">
<textarea class="notes" placeholder="Enter your own notes here"></textarea>
<a href="https://github.com/nealey/vail/wiki" target="_blank">Vail Wiki</a>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Knobs</h2>
</div>
<div class="mdl-card__supporting-text">
<p>
Iambic Dit length:
<output id="iambic-duration-value"></output>ms
/
<output id="iambic-duration-wpm"></output> WPM
<input
id="iambic-duration"
class="mdl-slider mdl-js-slider"
type="range"
min="40"
max="255"
value="100">
</p>
<p>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="iambic-mode-b">
<input type="checkbox" id="iambic-mode-b" class="mdl-switch__input">
<span class="mdl-switch__label">Iambic mode B</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="iambic-typeahead">
<input type="checkbox" id="iambic-typeahead" class="mdl-switch__input">
<span class="mdl-switch__label">Iambic typeahead</span>
</label>
</p>
<p>
Receive delay:
<output id="rx-delay-value"></output>ms
<input
id="rx-delay"
class="mdl-slider mdl-js-slider"
type="range"
min="0"
max="9999"
value="4000">
</p>
<p>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="telegraph-buzzer">
<input type="checkbox" id="telegraph-buzzer" class="mdl-switch__input">
<span class="mdl-switch__label">Telegraph sounds</span>
</label>
</p>
<p>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="timing-chart">
<input type="checkbox" id="timing-chart" class="mdl-switch__input">
<span class="mdl-switch__label">Timing chart</span>
</label>
</p>
<hr>
<table>
<tbody>
<tr>
<td>
Suggested receive delay:
</td>
<td>
<output id="suggested-delay-value">0</output>ms
</td>
</tr>
<tr>
<td>
Average round-trip time:
</td>
<td>
<output id="lag-value">0</output>ms
</td>
</tr>
<tr>
<td>
Longest recent transmission:
</td>
<td>
<output id="longest-rx-value">0</output>ms
</td>
</tr>
<tr>
<td>
Your clock is off by:
</td>
<td>
<output id="clock-off-value">??</output>ms
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
<!-- vim: set noet ts=2 sw=2 : -->