<!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()" class="touch-button">
<img class="play-button" id="rewind-button" src="images/rewind-button-up.jpg">
</button>
<button onclick="play()" class="touch-button">
<img class="play-button" id="play-button" src="images/play-button-up.jpg">
</button>
<button onclick="ff()" class="touch-button">
<img class="play-button" id="ff-button" src="images/ff-button-up.jpg">
</button>
</div>
<div class="notes">
<p id="notes"></p>
</div>
<button onclick="reset()"> reset tape </button>
</div>
<script type="module" src="tape-deck.js"></script>
</body>
</html>