vail/static/index.html

268 lines
9.0 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">
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
<!-- Vail stuff -->
<link rel="manifest" href="manifest.json">
<link rel="icon" href="assets/vail.png" sizes="256x256" type="image/png">
<link rel="icon" href="assets/vail.svg" sizes="any" type="image/svg+xml">
<script type="module" src="scripts/vail.mjs"></script>
<script type="module" src="scripts/ui.mjs"></script>
<link rel="stylesheet" href="vail.css">
</head>
<body>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item">
<img class="" src="assets/vail.svg" alt="">
<div class="block">Vail</div>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="https://discord.gg/GBzj8cBat7" target="_blank" title="Text/voice chat on Discord"><i class="mdi mdi-discord"></i></a>
<a class="navbar-item" href="https://github.com/nealey/vail/wiki" target="_blank" title="Vail Wiki">Help</a>
</div>
</div>
</nav>
<section class="section">
<div class="columns is-multiline">
<div class="column">
<div class="box" id="transciever">
<div class="level">
<div class="level-left">
<div class="level-item">
<h1 class="title" data-i18n="heading.repeater">Repeater</h1>
</div>
</div>
<div class="level-right">
<div class="level-item">
<!-- This appears as a little light that turns on when someone's sending -->
<span class="tag recv-lamp">
<output class="has-text-info" id="note"></output>
<i class="mdi mdi-volume-off" id="muted"></i>
</span>
</div>
</div>
</div>
<div class="block is-flex">
<input class="input" type="text" id="repeater" list="repeater-list">
<datalist id="repeater-list"></datalist>
<div class="dropdown is-right is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="stock-repeaters">
<span class="icon is-small">
<i class="mdi mdi-chevron-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="stock-repeaters" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" data-value="">General</a>
<a class="dropdown-item" data-value="1">Channel 1</a>
<a class="dropdown-item" data-value="2">Channel 2</a>
<a class="dropdown-item" data-value="3">Channel 3</a>
<hr class="dropdown-divider">
<a class="dropdown-item" data-value="Null">Null (no transmit)</a>
<a class="dropdown-item">Echo</a>
<a class="dropdown-item">Fortunes</a>
<a class="dropdown-item">Fortunes: Pauses ×2</a>
<a class="dropdown-item">Fortunes: Pauses ×4</a>
<a class="dropdown-item">Fortunes: Pauses ×8</a>
</div>
</div>
</div>
</div>
<div class="block">
<div class="" id="charts">
<canvas class="chart" id="rxChart" data-color="orange"></canvas>
<canvas class="chart" id="txChart" data-color="teal"></canvas>
<canvas class="chart" id="key0Chart" data-color="olive"></canvas>
<canvas class="chart" id="key1Chart" data-color="purple"></canvas>
</div>
</div>
<div class="block">
<table class="wide">
<tr>
<td>
<button class="button key is-primary" data-key="0" title="right click for Key">
Key
</button>
<div class="shortcuts">
<kbd title="keyboard button">.</kbd>
<kbd title="keyboard button">x</kbd>
<i class="mdi mdi-gamepad-circle-left" title="Gamepad Left Button"></i>
</div>
</td>
<td>
<button class="button key is-primary" data-key="1" title="right click for Key">
Key
</button>
<div class="shortcuts">
<kbd title="keyboard button">/</kbd>
<kbd title="keyboard button">z</kbd>
<i class="mdi mdi-gamepad-circle-up" title="Gamepad Top Button"></i>
</div>
</td>
</tr>
</table>
</div>
<div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label" data-i18n="heading.mode">Mode</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select">
<select id="keyer-mode">
<option value="cootie" data-i18n="keyer.cootie">Straight Key / Cootie</option>
<option value="bug" data-i18n="keyer.bug">Bug</option>
<option value="elbug" data-i18n="keyer.elbug">ElBug</option>
<option value="singledot" data-i18n="keyer.singledot">Single Dot</option>
<option value="ultimatic" data-i18n="keyer.ultimatic">Ultimatic</option>
<option value="iambic" data-i18n="keyer.iambic">Iambic (Plain)</option>
<option value="iambica" data-i18n="keyer.iambica">Iambic A</option>
<option value="iambicb" data-i18n="keyer.iambicb">Iambic B</option>
<option value="keyahead" data-i18n="keyer.keyahead">Keyahead</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">
<output for="keyer-rate"></output>&nbsp;<span data-i18n="label.wpm">WPM</span>
/
<span data-fill="keyer-ms"></span><span data-i18n="label:ms">ms</span>
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
id="keyer-rate"
type="range"
min="5"
max="40"
step="1"
value="12">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box">
<h2 class="title" data-i18n="heading.notes" data-i18n="heading.notes"></h2>
<textarea class="textarea" data-i18n-placeholder="description.notes" id="notes"></textarea>
<nav class="breadcrumb has-bullet-separator">
<ul>
<li><a href="https://discord.gg/GBzj8cBat7" target="_blank" data-i18n-title="title.discord"><i class="mdi mdi-discord"></i></a></li>
<li><a href="https://github.com/nealey/vail/wiki" target="_blank" data-i18n-title="title.wiki">Help</a></li>
</ul>
</nav>
</div>
</div>
<div class="column">
<div class="box">
<h2 class="title" data-i18n="heading.knobs">Knobs</h2>
<div class="block">
<div class="control">
<button id="ck" class="button is-primary">
CK
</button>
</div>
<div class="" data-i18n="description.ck">
Send <code>CK</code> (check) to the repeater, and play when it comes back.
</div>
</div>
<div class="block">
<div class="control">
<button id="reset" class="button" data-i18n="label.reset">
Reset
</button>
</div>
<div data-i18n="description.reset">
Reset all Vail preferences to default.
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">
<output for="rx-delay"></output>s
<span data-i18n="label.rx-delay">rx delay</span>
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
id="rx-delay"
type="range"
min="0"
max="10"
value="4"
step="0.1"
list="rx-delays">
<datalist id="rx-delays">
<option value="0"></option>
<option value="1"></option>
<option value="2" label="2s"></option>
<option value="3"></option>
<option value="4" label="4s"></option>
<option value="5"></option>
<option value="6" label="6s"></option>
<option value="7"></option>
<option value="8" label="8s"></option>
<option value="9"></option>
<option value="10"></option>
</datalist>
</div>
</div>
</div>
</div>
<p>
<label class="checkbox">
<input type="checkbox" id="telegraph-buzzer">
<span data-i18n="label.telegraph-sounds">Telegraph sounds</span>
</label>
</p>
</div>
</div>
</div>
</section>
<div class="columns is-centered bottom">
<div class="column is-half" id="errors"></div>
</div>
</body>
</html>
<!-- vim: set noet ts=2 sw=2 : -->