summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html2
-rw-r--r--style.css2
-rw-r--r--tape-deck.html73
3 files changed, 40 insertions, 37 deletions
diff --git a/index.html b/index.html
index 93462bc..d0a6e15 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
index 8aacd4c..bed5407 100644
--- a/style.css
+++ b/style.css
@@ -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>