diff options
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | style.css | 2 | ||||
| -rw-r--r-- | tape-deck.html | 73 |
3 files changed, 40 insertions, 37 deletions
@@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <link rel="stylesheet" type="text/css" href="style.css"> + <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>Tapes</title> </head> @@ -1,6 +1,8 @@ body { background: lightblue; font-family: "UnifontMedium"; + font-weight: normal; + font-style: normal; } p { diff --git a/tape-deck.html b/tape-deck.html index fec8fe7..cf0fc92 100644 --- a/tape-deck.html +++ b/tape-deck.html @@ -1,39 +1,40 @@ <!DOCTYPE html> <html lang=en> - <head> - <meta charset=UTF-8> - <link rel="stylesheet" type="text/css" href="style.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> + <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> |