vail/static/index.html

350 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">
<meta property="og:url" content="https://vail.woozle.org/">
<meta property="og:type" content="website">
<meta property="og:title" content="Vail: Internet Morse Code">
<meta property="og:description" content="Send and recieve with just a computer or smartphone">
<meta property="og:image" content="https://vail.woozle.org/key.jpg">
<!-- Image from https://www.flickr.com/photos/nationalmuseumofamericanhistory/14448709921
-- Used with permission (CC-BY-NC) -->
<!-- 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">
<link rel="stylesheet" href="dark.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 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="50"
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="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">
<span data-i18n="label.rx-delay">rx delay:</span>
<output for="rx-delay"></output>s
</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>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">
<span data-i18n="label.gain">volume:</span>
<output for="masterGain"></output>%
<i class="mdi mdi-volume-off muted"></i>
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
id="masterGain"
type="range"
min="0"
max="100"
value="100"
step="1">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">
<span data-i18n="label.tx-tone">tx tone:</span>
<output for="tx-tone"></output>
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
id="tx-tone"
type="range"
min="0"
max="127"
value="72"
step="1"
list="tones">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">
<span data-i18n="label.rx-tone">rx tone:</span>
<output for="rx-tone"></output>
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input
id="rx-tone"
type="range"
min="0"
max="127"
value="69"
step="1"
list="tones">
</div>
</div>
</div>
</div>
<datalist id="tones">
<option value="0" label="C-1"></option>
<option value="12" label="C0"></option>
<option value="24" label="C1"></option>
<option value="36" label="C2"></option>
<option value="48" label="C3"></option>
<option value="60" label="C4"></option>
<option value="72" label="C5"></option>
<option value="84" label="C6"></option>
<option value="96" label="C7"></option>
<option value="108" label="C8"></option>
<option value="120" label="C9"></option>
</datalist>
<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 : -->