make 404 page have multiple GIFs

modified: 404.html
Freakybob-Team · Oct 19, 2024 · 5677a3a · 5677a3a
1 parent 5b307d5
commit 5677a3a
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/404.html b/404.html
@@ -9,15 +9,29 @@
     <meta content="https://raw.githubusercontent.com/Freakybob-Team/Freakybob.site/main/images/Freaky_Bob_404.png" property="og:image" />
     <meta content="#006b79" data-react-helmet="true" name="theme-color" />
     <title>404</title>
-    <link rel="icon" type="image/png" href="/images/Freaky_Bob_404.png">
-    <link rel="stylesheet" href="/css/404.css">
+    <link rel="icon" type="image/png" href="images/Freaky_Bob_404.png">
+    <link rel="stylesheet" href="css/404.css">
 </head>
-<body>
+<body onload="getRandomImage()">
 <h1>Oops! A 404 Page!</h1>
     <p>How the fuck did you get here?</p>
+    <span id="result" align="center"> </span>
     <a href="https://freakybob.site"><button>Go to main page</button></a>
     <a href="https://github.com/Freakybob-Team/Freakybob.site/issues/new"><button>Make an issue</button></a>
-    <img class="gif" src="https://media.tenor.com/2h9xhpYLKooAAAAi/furro.gif"    width="400" height="400">
-    <audio autoplay loop><source src="/audio/EEK!.ogg" type="audio/ogg"></audio>
+    <audio autoplay loop><source src="audio/EEK!.ogg" type="audio/ogg"></audio>
+    <script>
+        function getRandomImage() {
+    //declare an array to store images
+    var randomImage = new Array();
+    //0,1,2,3,4,5
+    randomImage[0] = "https://media.tenor.com/2h9xhpYLKooAAAAi/furro.gif";
+    randomImage[1] = "https://media1.tenor.com/m/J3sih0hnKLwAAAAC/borzoi-siren.gif";
+
+// genrate a number and provide to genrate image accordingly
+var number = Math.floor(Math.random()*randomImage.length); 
+ // return the images which are genrated
+ return document.getElementById('result').innerHTML = '<img src="' + randomImage[number]+'" />'; 
+} 
+    </script>
 </body>
 </html>