blob: cf0fc92f03ea7aadf383bd45b8d18b14a47f9dc1 (
plain)
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
|
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css?version=2">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/gnu-unifont" type="text/css"/>
<title>Tape Deck</title>
</head>
<body>
<div class="tape-deck-container">
<div class="tape-deck">
<img id="tape-deck" class="tape-deck-img" src="images/cool-deck.png">
</div>
<div class="button-container">
<button onclick="rewind()" id="rewind" class="touch-button">
<img class="play-button" id="rewind-img" src="images/rewind-button-up.jpg">
</button>
<button onclick="play()" id="play" class="touch-button">
<img class="play-button" id="play-img" src="images/play-button-up.jpg">
</button>
<button onclick="ff()" id="ff" class="touch-button">
<img class="play-button" id="ff-img" src="images/ff-button-up.jpg">
</button>
</div>
<div class="notes">
<p id="notes"></p>
</div>
<p>
Start the tape with the play button, press it again to pause.
Fast-Forward and Rewind buttons are meant to be pressed once,
they'll advance the tape by 20s and then continue playing.
Hit the reset tape button to start it from the beginning, the
website will store your current position on the tape in your
browser, so it should resume the next time you play the tape.
</p>
<button onclick="reset()"> reset tape </button>
</div>
<script type="module" src="tape-deck.js"></script>
</body>
</html>
|
