death.html

<!DOCTYPE html>
<html>
<head>
    <title>Game Over</title>
    <link rel="shortcut icon" type="image/jpg" href="/pictures/favicon.jpg"/>
    <script>
        var audio = new Audio('/sounds/clubbed to death.mp3');
        audio.loop = true;
        //audio.play();
        audio.volume = 0.1; // sets the volume to 50%
    </script>
    <style>

        /* Add some basic styling for the body */
        body {
            background-color: black;
            font-family: "Courier New", Courier, monospace;
            color: white;
            text-align: center;
            padding: 20px;
        }

        a {
      color: #fff;
      text-decoration: none;
    }

        /* Add some CSS styles for the game over title */
        h1 {
            font-size: 50px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px #000000;
        }

        /* Add some CSS styles for the game over message */
        p {
            font-size: 25px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px #000000;
        }

        /* Add some CSS styles for the restart button */
        button {
            background-color: white;
            color: black;
            font-size: 20px;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            text-shadow: 2px 2px 4px #000000;
        }

        /* Add some CSS styles for hover effect for the restart button*/
        button:hover {
            background-color: black;
            color: white;
        }
        .center {
            display: block;
            margin: auto;
            width: 640px;
            height: 480px;
        }
        
        footer a:hover {
  color: #ccc;
  border: 1px solid #ccc;
}

    </style>
</head>
<body>
    
<audio id="idAudio">
    <source src="/sounds/Frogger Coin Insert Tone.mp3" type="audio/ogg">
</audio>
<h1>Game Over</h1>
<p>Alas, the computer has claimed victory this time!</p>
<p>If you didn't finish reading, you will need to start again</p>
<button id="restart-button">Insert another coin</button>
<img class="center" src="/pictures/skull.gif" alt="skull">
</body>
<script>
    var GFG = document.getElementById("idAudio");
    var restartButton = document.getElementById("restart-button");
    restartButton.addEventListener("click", function() {
        GFG.play();
        setTimeout(() => { window.location.href = "letsplayagame.html"; }, 1250);  // Redirect to game.html
    });
</script>

<footer style="background-color: black; color: white; text-align: center; padding: 1em;">
    <p><a href="/index.html" >Main page</a> - <a href="blog/posts.html">Blog</a> - <a href="/links.html">Links</a> - <a href="/contact.html">Contact</a></p>
  </footer>

</html>