-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
444 lines (385 loc) · 17.2 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<html>
<head>
<title>Fenrir Training</title>
<link rel="stylesheet" href="./styles.css" />
<script type="text/javascript">
let notepadMessageTimeout;
function handleFTChange() {
const selectElement = document.getElementById("selection");
if (selectElement.value) {
const type = selectElement.value;
const elements = document.getElementsByTagName("section");
for (let i = 0; i < elements.length; i++) {
if (!elements[i].classList.contains(type)) {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
}
}
function showNotepad() {
const notepad = document.getElementById("notepad-container").style.display = "flex";
}
function hideNotepad() {
const notepad = document.getElementById("notepad-container").style.display = "none";
}
function clearNotepad() {
const notepad = document.getElementById("notepad").value = "";
showNotepadMessage("Notes cleared");
}
function showNotepadMessage(message) {
const element = document.getElementById("notepad-message");
element.style.display = "block";
element.innerHTML = message;
clearTimeout(notepadMessageTimeout);
notepadMessageTimeout = setTimeout(() => {
element.style.display = "none";
element.innerHTML = "";
}, 3000);
}
function saveNotepad() {
const notepad = document.getElementById("notepad");
const data = notepad.value;
localStorage.setItem("notepadData", data);
showNotepadMessage("Your notes have been saved");
}
function loadNotepad() {
const notepad = document.getElementById("notepad");
const data = localStorage.getItem("notepadData");
notepad.value = data;
showNotepadMessage("Your notes have been loaded");
}
</script>
</head>
<body onload="handleFTChange()">
<div class="ft">
<h1>Fenrir Training</h1>
<div class="selection-container">
<label for="selection">Please select a training:</label>
<select id="selection" onchange="handleFTChange()">
<option value="aa">Anti-Vehicle</option>
<option value="medical">CLS</option>
<option value="observation">Observation</option>
<option value="signaller" selected>Signaller</option>
</select>
<button onclick="showNotepad()">Show Notepad</button>
</div>
<main>
<!----------------------------------------------
Anti-Armour / Anti-Air
----------------------------------------------->
<section class="aa">
<h2>Anti-Vehicle</h2>
<!------------------------------------------
Procedure
------------------------------------------->
<div class="block procedure">
<header>Procedure</header>
<div class="grow">
<div class="item" title="Lock on to the target, if possible">Lock-On</div>
<div class="item" title="Wait for acknowledgement or check you are clear to fire. Do not turn after you have been cleared or your backblast could hit a nearby unit">Clear Backblast!</div>
<div class="item" title="Inform nearby units that a rocket is being fired and to stay clear">Rocket! Rocket! Rocket!</div>
<div class="item" title="Kaboom!">Fire!</div>
</div>
</div>
</section>
<!----------------------------------------------
COMBAT LIFE SAVER
----------------------------------------------->
<section class="medical">
<h2>Combat Life Saver</h2>
<!------------------------------------------
Wound Management
------------------------------------------->
<div class="block wound-management">
<header title="Bandages, tourniquets, and splints">Wound Management</header>
<div class="grow">
<div class="item" title="Apply tourniquets to limbs, if necessary. Bandage the Head and Torso. Stitch wounds shut">Heal Head & Torso</div>
<div class="item" title="Bandage limbs and stitch wounds shut">Heal Limbs</div>
<div class="item" title="Apply splints to broken limbs">Apply Splints</div>
<div class="item" title="Remove tourniquets">Remove Tourniquets</div>
</div>
</div>
<!------------------------------------------
Blood Management
------------------------------------------->
<div class="block blood-management">
<header title="Bloodloss">Blood Management</header>
<div class="grow">
<div class="item" title="Fatal: 1000ml. Large = 1000ml. A lot = 500ml. Some = 250ml">Give IV</div>
<div class="item" title="Give CPR if heart rate is 0">CPR</div>
</div>
</div>
<!------------------------------------------
Airway Management
------------------------------------------->
<div class="block airway-management">
<header>Airway Management</header>
<div class="grow">
<div class="item" title="Check their status of their airways">Check Airways</div>
<div class="item" title="Head Turning or Accuvac">Remove Occlusion</div>
<div class="item" title="Check for, and Chest Seal, a Pneumothorax">Pneumothorax</div>
<div class="item" title="Hyperextend Head / Guedel Tube / King LT">Prevent Obstruction</div>
</div>
</div>
<!------------------------------------------
Vitals Management
------------------------------------------->
<div class="block vitals-management">
<header>Vitals Management</header>
<div class="grow">
<div class="item" title="Give CPR or use defibrillator">No Heart Rate</div>
<div class="item" title="Give Epinephrine (Increases HR and blood pressure) or wait if stable">Low Heart Rate</div>
<div class="item" title="Give Adenosine (Lowers HR) or wait if stable">High Heart Rate</div>
<div class="item" title="Give Painkillers (Lowers blood pressure, and pain) or wait">In Pain</div>
<div class="item" title="Give Morphine if HR >= 90 (Lowers HR, blood pressure, and pain) or Painkillers (Lowers blood pressure, and pain)">In Severe Pain</div>
</div>
</div>
</section>
<!----------------------------------------------
Observation
----------------------------------------------->
<section class="observation">
<h2>Observation</h2>
<div class="block">
<header>Visibility</header>
<div class="grow">
<div class="item">Shape</div>
<div class="item">Silhouette</div>
<div class="item">Shine</div>
<div class="item">Shadow</div>
<div class="item">Spacing</div>
<div class="item">Sudden Movement</div>
<div class="item">Signature</div>
</div>
</div>
<div class="block">
<header>Judging Distance</header>
<div>
<div class="item">100m</div>
<div class="options">
<div>Body and equipment clear in detail</div>
</div>
</div>
<div>
<div class="item">200m</div>
<div class="options">
<div>Colour of skin and equipment identifiable</div>
</div>
</div>
<div>
<div class="item">300m</div>
<div class="options">
<div>Clear body outline with remaining details blurry</div>
</div>
</div>
<div>
<div class="item">400m</div>
<div class="options">
<div>Clear body outline with face colour identifiable</div>
</div>
</div>
<div>
<div class="item">500m</div>
<div class="options">
<div>Body begins to taper with head indistinct</div>
</div>
</div>
<div>
<div class="item">600m</div>
<div class="options">
<div>Body is wedge shaped with no head apparent</div>
</div>
</div>
</div>
</section>
<!----------------------------------------------
SIGNALLER
----------------------------------------------->
<section class="signaller">
<h2>Signaller</h2>
<!------------------------------------------
Protocol
------------------------------------------->
<div class="block protocol">
<header title="How to speak on Long Range Radio">Protocol</header>
<div class="grow">
<div class="item optional" title="Break current comms on radio. Only to be used in an emergency">BREAK BREAK BREAK</div>
<div class="item" title="The name of the receiver"><em>Receiver</em></div>
<div class="item" title="The name of the sender">This is <em>Sender</em></div>
<div class="options">
<div title="Report an incoming message">Message</div>
<div title="Acknowledge incoming message and ready to receive">Send Message</div>
<div title="One of the following message types"><em>Message</em></div>
</div>
<div class="options">
<div title="Message has finished. Awaiting response">Over</div>
<div title="Message has finished. End of message">Out</div>
<div title="Wait for further messages">Wait Out</div>
</div>
</div>
</div>
<!------------------------------------------
Bomb Damage Assessment
------------------------------------------->
<div class="block">
<header title="Report effectiveness of most recent fire mission">Bomb Damage Assessment</header>
</div>
<!------------------------------------------
Contact Report
------------------------------------------->
<div class="block contact-report">
<header title="Report a contact to FIC">Contact Report</header>
<div class="grow">
<div class="item" title="When did the contact happen?">When</div>
<div class="item" title="Where did the contact occur?">Where</div>
<div class="item" title="What units were involved with the contact?">What</div>
<div class="item" title="What is OPFOR doing?">Enemy Action</div>
<div class="item" title="What is BLUFOR doing?">Friendly Action</div>
</div>
</div>
<!------------------------------------------
Contact Assessment
------------------------------------------->
<div class="block">
<header title="Report your current status after a contact engagement">Contact Assessment</header>
<div>
<div class="item" title="Ammunition">Alpha</div>
<div class="options">
<div title="Ammunition supplies are good">Green</div>
<div title="Ammunition supplies are satisfactory but a resupply may be required soon">Amber</div>
<div title="Ammunition supplies are very low and a resupply is needed urgently">Red</div>
<div title="No ammunition remaining">Black</div>
</div>
</div>
<div>
<div class="item" title="Health">Hotel</div>
<div class="options">
<div title="Health in good condition">Green</div>
<div title="Partially wounded but otherwise operational">Amber</div>
<div title="One or more unconscious or critically wounded">Red</div>
<div title="Multiple critically wounded - Medevac likely required">Black</div>
</div>
</div>
<div>
<div class="item" title="Operation">Omega</div>
<div class="options">
<div title="Continuing with assigned orders">Advancing</div>
<div title="Holding position until further notice">Holding</div>
<div title="Withdrawing from current position">Withdrawing</div>
</div>
</div>
</div>
<!------------------------------------------
Contact - Wait Out
------------------------------------------->
<div class="block">
<header title="Report that you are currently engaged with a contact and to wait for further information">Contact - Wait Out</header>
</div>
<!------------------------------------------
Mass Casualty / Medical Evacuation
------------------------------------------->
<div class="block">
<header title="Report a mass-cas (multiple casualties) and request a medevac (medical evacuation)">Mass-Cas / Medevac (5-Liner)</header>
<div>
<div class="item" title="One">1</div>
<div class="item" title="Location for medevac">Location</div>
<div class="options">
<div title="Grid reference">Grid</div>
<div title="Map marker">Marker <em>Name</em></div>
</div>
</div>
<div>
<div class="item" title="Two">2</div>
<div class="item" title="Call sign of injured units">Call Sign</div>
</div>
<div>
<div class="item" title="Three">3</div>
<div class="item" title="Total number of injured units and specify total unconscious units">Number of Injured</div>
</div>
<div>
<div class="item" title="Four">4</div>
<div class="item" title="Enemy presence at the specified location">Enemy Presence</div>
<div class="options">
<div title="No hostile presence at location">None</div>
<div title="Possible hostile presence at location">Possible</div>
<div title="Confirmed hostiles at location">Enemy in Area</div>
<div title="Confirmed hostiles at location; reinforcements are required">Armed Escort Required</div>
</div>
</div>
<div>
<div class="item" title="Five">5</div>
<div class="item">Marker</div>
<div class="options">
<div title="Friendly position marked with (purple) smoke">Smoke</div>
<div title="Friendlies are positioned within specified structure">Structure</div>
</div>
</div>
</div>
<!------------------------------------------
Fire Mission
------------------------------------------->
<div class="block">
<header title="Request an indirect fire mission (mortar/artillery)">Fire Mission (5-Liner)</header>
<div>
<div class="item" title="One">1</div>
<div class="item" title="The type of target">Target Type</div>
<div class="options">
<div>Infantry</div>
<div title="Armoured (e.g. APC, Tank, etc.)">Armoured</div>
<div title="Air (e.g. Helicopter, Jet, etc.)">Air</div>
<div title="Name the different type of target">etc.</div>
</div>
</div>
<div>
<div class="item" title="Two">2</div>
<div class="item" title="Where to target the fire mission">Target Position</div>
<div class="options">
<div title="Bearing and distance from current position">Bearing & Distance</div>
<div title="Grid reference">Grid</div>
<div title="Map marker">Marker <em>Name</em></div>
<div title="Smoke grenade">Smoke</div>
</div>
</div>
<div>
<div class="item" title="Three">3</div>
<div class="item" title="The type of fire mission to execute">Fire Mission Type</div>
<div class="options">
<div title="Direct fire on marker position">Barrage</div>
<div title="Around the marker position">Screening</div>
<div title="Trailing barrage towards indicated position (e.g. 'Trailing North to South')">Trailing</div>
</div>
</div>
<div>
<div class="item" title="Four">4</div>
<div class="item" title="The amount of rounds to fire">Amount</div>
</div>
<div>
<div class="item" title="Five">5</div>
<div class="item" title="The type of fire mission to execute">Round Type</div>
<div class="options">
<div title="Air-to-Ground missile">ATG Missile</div>
<div title="High Explosive">HE</div>
<div title="Smoke rounds">Smoke</div>
</div>
</div>
</div>
</section>
</main>
</div>
<div id="notepad-container">
<header>
<h2>Notes</h2>
<div id="notepad-message"></div>
</header>
<textarea id="notepad" placeholder="Enter notes"></textarea>
<footer>
<button onclick="saveNotepad()">Save</button>
<button onclick="loadNotepad()">Load</button>
<button onclick="clearNotepad()">Clear</button>
<button onclick="hideNotepad()">Hide</button>
</footer>
</div>
</body>
</html>