-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
187 lines (178 loc) · 8.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Morse Code Transmitter | morsecode.tools</title>
<meta name="description" content="A Morse Code transmitter. Works offline for remote adventures.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="icons/logo-opt.svg" type="image/svg">
<link rel="icon" href="icons/logo-180.png" sizes="180x180" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/logo-apple.png"/>
<meta name="theme-color" content="#f5df4d">
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@simonmales" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://morsecode.tools" />
<meta property="og:title" content="Morse Code Transmitter" />
<meta property="og:description" content="Offline Morse Code Transmitter. Works anywhere." />
<meta property="og:image" content="https://morsecode.tools/icons/logo-180.png" />
<base href="/">
<link rel="manifest" href="app.webmanifest">
<link rel="stylesheet" href="style/index.css">
<script type="module" src="js/index.mjs"></script>
<link rel="modulepreload" type="module" href="js/elements.mjs">
<link rel="modulepreload" type="module" href="js/lib.mjs">
<link rel="modulepreload" type="module" href="js/install.mjs">
<link rel="modulepreload" type="module" href="js/morse-table.mjs">
<link rel="preload" as="font" href="style/Poppins/Poppins-Regular.ttf" type="font/ttf" crossorigin>
</head>
<body>
<audio id="sound-output"></audio>
<!-- App Shell -->
<div id="screen-flash"></div>
<main>
<h1>Morse Code App</h1>
<section id="message">
<label>
<span class="for-screen-reader">Message to transmit</span>
<textarea placeholder="Type your message here">Hello World</textarea>
</label>
</section>
<section id="encoded">
<label>
<div>Code:</div>
<output>
<code id="translated"></code>
</output>
</label>
</section>
<section id="settings">
<div id="output-modes">
<div class="card">
<input type="checkbox" id="audio-on" checked>
<label for="audio-on">
<svg width="22" height="18" viewBox="0 0 22 18" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2L5 6H1V12H5L10 16V2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.07 1.93005C19.9447 3.80533 20.9979 6.34841 20.9979 9.00005C20.9979 11.6517 19.9447 14.1948 18.07 16.0701M14.54 5.46005C15.4774 6.39769 16.004 7.66923 16.004 8.99505C16.004 10.3209 15.4774 11.5924 14.54 12.5301" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Audio</span>
</label>
</div>
<div class="card">
<input type="checkbox" id="torch-on" disabled>
<label for="torch-on">
<svg width="26" height="28" viewBox="0 0 26 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3333 1L1 16.6H13L11.6667 27L25 11.4H13L14.3333 1Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Flash</span>
</label>
</div>
<div class="card">
<input type="checkbox" id="screen-on">
<label for="screen-on">
<svg width="18" height="25" viewBox="0 0 18 25" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14.5 1H3.25C2.00736 1 1 2.00736 1 3.25V21.25C1 22.4926 2.00736 23.5 3.25 23.5H14.5C15.7426 23.5 16.75 22.4926 16.75 21.25V3.25C16.75 2.00736 15.7426 1 14.5 1Z M9.375 7.75L9.375 7.75L8.87 11.75H13.375L8.375 17.75L8.875 13.75H4.375Z" stroke="none" />
<path d="M14.5 1H3.25C2.00736 1 1 2.00736 1 3.25V21.25C1 22.4926 2.00736 23.5 3.25 23.5H14.5C15.7426 23.5 16.75 22.4926 16.75 21.25V3.25C16.75 2.00736 15.7426 1 14.5 1Z" fill="none" stroke-width="2" />
<path stroke="none" fill="var(--lightning-color)" d="M9.375 7.75L4.375 13.75H8.875L8.375 17.75L13.375 11.75H8.875L9.375 7.75Z" />
</svg>
<span>Screen Flash</span>
</label>
</div>
</div>
<div id="transmit">
<div>
<input id="repeat-on" type="checkbox">
<label for="repeat-on">
<svg stroke="currentcolor" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
<rect stroke="none" width="60" height="60" rx="29" />
<g clip-path="url(#clip0)" fill="none">
<path d="M34.5833 19.9166L38.2499 23.5833L34.5833 27.25" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21.75 29.0834V27.25C21.75 26.2776 22.1363 25.3449 22.8239 24.6573C23.5116 23.9697 24.4442 23.5834 25.4167 23.5834H38.25" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M25.4167 40.0833L21.75 36.4167L25.4167 32.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M38.25 30.9166V32.75C38.25 33.7224 37.8637 34.6551 37.1761 35.3427C36.4884 36.0303 35.5558 36.4166 34.5833 36.4166H21.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0">
<rect width="22" height="22" fill="white" transform="translate(19 19)" />
</clipPath>
</defs>
</svg>
<span class="for-screen-reader">Repeat</span>
</label>
</div>
<button disabled>Transmit</button>
</div>
<details>
<summary>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentcolor">
<path d="M2.33325 12.25V8.16663" stroke-linecap="round" stroke-linejoin="round" />
<path d="M2.33325 5.83333V1.75" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7 12.25V7" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7 4.66667V1.75" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.6667 12.25V9.33337" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.6667 7V1.75" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.583252 8.16663H4.08325" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.25 4.66663H8.75" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.91675 9.33337H13.4168" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Advanced Settings
</summary>
<div>
<label for="wpm">Words per minute</label>
<div>
<span class="fake-btn" aria-hidden="true">-</span>
<input id="wpm" type="number" min="1" disabled>
<span class="fake-btn aria-hidden=" true">+</span>
</div>
</div>
<div>
<label for="dot-duration">
<div>Dot Duration</div>
<small>in milliseconds</small>
</label>
<div>
<span class="fake-btn" aria-hidden="true">-</span>
<input id="dot-duration" type="number" min="10" max="2000" value="100">
<span class="fake-btn" aria-hidden="true">+</span>
</div>
</div>
<div>
<label for="waveform">Audio waveform</label>
<select id="waveform">
<option selected>sine</option>
<option>triangle</option>
<option>sawtooth</option>
<option>square</option>
</select>
</div>
<div>
<label for="frequency">Audio frequency</label>
<div>
<span class="fake-btn" aria-hidden="true">-</span>
<input id="frequency" type="number" value="440">
<span class="fake-btn" aria-hidden="true">+</span>
</div>
</div>
<div>
<label>
<a href="https://github.com/sime/morse-transmitter" target="_blank" rel="noopener">Source Code</a>
<svg xmlns="http://www.w3.org/2000/svg" height="13px" viewBox="0 0 24 24" width="13px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
</label>
</div>
</details>
</section>
<section id="install">
<button style="display: none;">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentcolor" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="17" height="17" rx="3.5" />
<path d="M9 5.35132V12.6486" />
<path d="M12.6487 9L5.35138 9" />
</svg>
Add App to Homescreen
</button>
</section>
</main>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "331e326e23bb493a96ab40ed8f8e4cbf"}'></script>
</body>
</html>