Implemented Medal alert system for cloaky smh

api/public/assets/css/main.css

@@ -0,0 +1,51 @@
+body {
+  font-family: 'Teko', sans-serif;
+}
+
+h3{
+  color:gray;
+}
+
+  .center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 40%;
+  }
+
+  #container {
+    display: none;
+  }
+
+  #img {
+    padding-top:20px;
+    animation: fadeIn 1s;
+    -webkit-animation: fadeIn 1s;
+    -moz-animation: fadeIn 1s;
+    -o-animation: fadeIn 1s;
+    -ms-animation: fadeIn 1s;
+  }
+  @keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+  
+  @-moz-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+  
+  @-webkit-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+  
+  @-o-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }
+  
+  @-ms-keyframes fadeIn {
+    0% {opacity:0;}
+    100% {opacity:1;}
+  }

api/public/assets/javascript/check.js

@@ -0,0 +1,20 @@
+async function recievedAlert(follower) {
+    var audio = document.getElementById('audio');
+
+    // Play the Medal intro audio & gif
+    setTimeout(function() {
+        var gif = document.getElementById(`gif`)
+        var img = document.getElementById(`img`)
+        img.style.display = `block`;
+        gif.setAttribute(`width`, `350`)
+        gif.setAttribute(`src`, `assets/img/medal-gif.gif`)
+        var text = document.getElementById(`text`);
+        text.innerText = `CloakyBrokey was followed by ${follower} on Medal.tv!`
+        audio.play();
+    }, 1000);
+
+    setTimeout(function() {
+        document.getElementById(`img`).innerHTML = ``;
+    }, 15000)
+
+}

api/public/index.html

@@ -0,0 +1,39 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="/assets/css/main.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        
+    <div id="container" style="text-align:center;">
+        <div id="img">
+            <img class="center" width="350" id="gif" src="/assets/img/medal-gif.gif">
+                <h3 id="text" style="font-size:50px;"></h3>
+        </div>
+    </div>
+        <audio src="/assets/img/medal-novideo.mp3" id="audio"></audio>
+
+        <script src="/socket.io/socket.io.js"></script>
+        <script>
+            var socket = io();
+        
+          socket.on('event', function(msg) {
+            var audio = document.getElementById('audio');
+
+            // Play the Medal intro audio & gif
+            setTimeout(function() {
+                document.getElementById(`container`).style.display = `block`;
+                text.innerText = `CloakyBrokey was followed by ${msg} on Medal.tv!`
+                console.log(msg)
+                audio.play();
+            }, 1000);
+
+            setTimeout(function() {
+                document.getElementById(`container`).style.display = `none`;
+            }, 9000)
+          });
+    </script>
+    </body>
+</html>