Neomorphic buttons

public/chat.html

@@ -5,6 +5,7 @@
     <title>Neon Chat</title>
     <link rel="shortcut icon" href="images/logo.svg">
     <link rel="stylesheet" href="../css/chat.css">
+    <script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
     <meta property="og:title" content="Join your friends call - Neonchat">
     <meta property="og:description" content="Click the link to join this chat room using Neonchat">
@@ -14,7 +15,11 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
         gtag('js', new Date());
         gtag('config', 'UA-162048272-1');
     </script>
@@ -28,12 +33,30 @@
 </div>
 
 
-<div class="buttons" id="buttons">
-    <div class="center">
-        <a href="/" class="round-button">Back</a>
-        <a class="round-button" onclick="{openFullscreen()}">Fullscreen</a>
-        <a class="round-button" onclick="{muteMicrophone()}" id="muteButton">Mute </a>
-        <a class="round-button" onclick="{pauseVideo()}" id="videoPauseButton">Pause </a>
+<div class="multi-button">
+    <div class="buttonContainer">
+        <button class="hoverButton" onclick="{muteMicrophone()}">
+            <i id="mic-icon" class="fas fa-microphone fa-xs"></i>
+        </button>
+        <div class="HoverState" id="mic-text">Mute</div>
+    </div>
+    <div class="buttonContainer">
+        <button class="hoverButton" onclick="{openFullscreen()}">
+            <i class="fas fa-compress fa-xs"></i>
+        </button>
+        <div class="HoverState">Fullscreen</div>
+    </div>
+    <div class="buttonContainer">
+        <button class="hoverButton" onclick="{pauseVideo()}">
+            <i class="fas fa-video fa-xs" id="video-icon"></i>
+        </button>
+        <div class="HoverState" id="video-text">Pause Video</div>
+    </div>
+    <div class="buttonContainer">
+        <button class="hoverButton" onclick="{window.location.href = '/newroom'}">
+            <i class="fas fa-phone-slash fa-xs"></i>
+        </button>
+        <div class="HoverState">End Call</div>
     </div>
 </div>
 

public/css/chat.css

@@ -7,32 +7,29 @@
     margin: 0;
     padding: 0;
     align-items: center;
-    /*padding: 0 50px;*/
 }
 
 body {
     background: #16171B;
     margin: 0;
     padding: 0;
-    /*background: #ececec;*/
 }
 
 video {
     background: #292B32;
-    /*background: white;*/
     margin: 0 5%;
     box-sizing: border-box;
     border-radius: 10px;
     padding: 0;
-    /*box-shadow: rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;*/
-
 }
 
+
 #local-video {
     width: 20%;
     height: auto;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
+    background: #16171a;
 }
 
 #remote-video {
@@ -45,42 +42,8 @@ video {
 }
 
 
-.buttons {
-    width: 700px;
-    margin-left: -350px;
-    bottom: 0px;
-    position: absolute;
-    left: 50%;
-}
-
-.buttons a {
-    cursor: pointer;
-}
-
-
-.round-button {
-    display: block;
-    width: 100px;
-    height: 60px;
-    line-height: 60px;
-    border-radius: 4px;
-    background: #292B32;
-    text-align: center;
-    text-decoration: none;
-    color: white;
-    transition: 0.2s;
-    margin: 20px;
-    font-family: "Heebo", sans-serif;
-    font-weight: 400;
-    float: left;
-}
-
-.round-button:hover {
-    background: #3d3f47;
-}
-
-
 .snackbar-container {
+    box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
     transition: all .5s ease;
     transition-property: top, right, bottom, left, opacity;
     font-family: "Heebo", sans-serif;
@@ -173,4 +136,57 @@ video {
         left: 0;
         transform: none
     }
-}
+}
+
+
+/*Neomorphic buttons*/
+button {
+    border: none;
+    font-size: 2rem;
+    transition: all .3s ease-in-out;
+    color: gray;
+    background: transparent;
+    cursor: pointer;
+    padding: 10px;
+}
+
+button:hover {
+    color: white;
+    border-radius: 100px;
+    background: #16171a;
+    /*box-shadow:  9px 9px 16px #1e1f21, -9px -9px 16px #2f3035;*/
+
+}
+
+.multi-button {
+    position: absolute;
+    right: 50px;
+    top: 50px;
+    z-index: 999;
+    /*border-radius: 50px;*/
+    border-radius: 10px;
+    background: #16171a;
+    box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
+    padding: 15px;
+    display: grid;
+    grid-gap: 0.5rem;
+    width: 50px;
+    margin-left: 200px;
+}
+
+.HoverState {
+    color: white;
+    font-family: "Heebo", sans-serif;
+    position: absolute;
+    right: 70px;
+    white-space: nowrap;
+    top: 25px;
+    font-weight: bold;
+}
+
+.buttonContainer {
+    position: relative;
+    margin: 0 auto;
+}
+
+/*Neomorphic buttons*/

public/js/chat.js

@@ -282,39 +282,49 @@ function openFullscreen() {
 function muteMicrophone() {
     var muted = VideoChat.localStream.getAudioTracks()[0].enabled;
     VideoChat.localStream.getAudioTracks()[0].enabled = !muted;
-    const mutedButton = document.getElementById("muteButton");
+    const micIcon = document.getElementById("mic-icon");
+    const micText = document.getElementById("mic-text");
     if (muted) {
-        mutedButton.innerText = "Unmute"
+        micIcon.classList.remove("fa-microphone");
+        micIcon.classList.add("fa-microphone-slash");
+        micText.innerText = "Unmute"
     } else {
-        mutedButton.innerText = "Mute"
+        micIcon.classList.add("fa-microphone");
+        micIcon.classList.remove("fa-microphone-slash");
+        micText.innerText = "Mute"
     }
 }
 
 function pauseVideo() {
     var paused = VideoChat.localStream.getVideoTracks()[0].enabled;
     VideoChat.localStream.getVideoTracks()[0].enabled = !paused;
-    const pausedButton = document.getElementById("videoPauseButton");
+    const micIcon = document.getElementById("video-icon");
+    const micText = document.getElementById("video-text");
     if (paused) {
-        pausedButton.innerText = "Unpause"
+        micIcon.classList.remove("fa-video");
+        micIcon.classList.add("fa-video-slash");
+        micText.innerText = "Unpause Video"
     } else {
-        pausedButton.innerText = "Pause"
+        micIcon.classList.add("fa-video");
+        micIcon.classList.remove("fa-video-slash");
+        micText.innerText = "Pause Video"
     }
-
 }
 
+
 //Show and hide buttons automatically
 var timedelay = 1;
 
 function delayCheck() {
     if (timedelay === 5) {
-        $('#buttons').fadeOut();
+        $('.multi-button').fadeOut();
         timedelay = 1;
     }
     timedelay = timedelay + 1;
 }
 
 $(document).mousemove(function () {
-    $('#buttons').fadeIn();
+    $('.multi-button').fadeIn();
     timedelay = 1;
     clearInterval(_delay);
     _delay = setInterval(delayCheck, 500);
@@ -342,3 +352,15 @@ Snackbar.show({
 VideoChat.requestMediaStream();
 
 
+//Neomorphic buttons
+$(".HoverState").hide();
+$(document).ready(function () {
+    $(".hoverButton").mouseover(function () {
+        $(".HoverState").hide();
+        $(this).next().show();
+    });
+    $(".hoverButton").mouseout(function () {
+        $(".HoverState").hide();
+    });
+});
+//Neomorphic buttons