Changed Login Page & Added Mute functionality

CREDITS.md

@@ -3,9 +3,17 @@ AnandaNamasteRegular.ttf -> https://hindi-fonts.com/fonts/ananda-namaste-regular
 
 Graphics and icons
 https://www.svgrepo.com/
+End Call icon: https://www.svgrepo.com/collection/solar-bold-icons
+Mute, Unmute, Video on, Video off: https://www.svgrepo.com/collection/eva-ui-icons-filled
 
 Wallpaper
 <a href="https://www.youtube.com/watch?v=KJnupY2HPCg" target="_blank">
   <img src="./public/imgs/backgrounds/art-g04bb026c2_1920.jpg">
 </a>
-Image by <a href="https://pixabay.com/users/chenspec-7784448/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6653300">Chen</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6653300">Pixabay</a>
+Image by <a href="https://pixabay.com/users/chenspec-7784448/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6653300">Chen</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=6653300">Pixabay</a>
+
+Welcome modal Backdrop mandala
+https://www.peakpx.com/en/hd-wallpaper-desktop-oogyt
+
+Welcome modal mandala
+Image by <a href="https://pixabay.com/users/gdj-1086657/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6843995">Gordon Johnson</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=6843995">Pixabay</a>

public/css/darkMode.css

@@ -28,4 +28,5 @@
     #msg-container::-webkit-scrollbar-thumb:hover { background: var(--theme-color-light) }
 
     #send-container{ background-color: #191919 }
+    #loginModal .modalContentsContainer{ background-image: linear-gradient(45deg, var(--theme-color-dark) 35%, var(--theme-color-light)) }
 }

public/css/modal.css

@@ -42,6 +42,12 @@
 }
 
 /* For Login Modal */
+#loginModal .modalContentsContainer{
+    flex-direction: row;
+    align-items: center;
+    background-image: linear-gradient(45deg, #ff3d00 10%, #dcdc00);
+}
+
 .modalContentsContainer form{
     margin: auto 0;
     display: flex;
@@ -52,6 +58,29 @@
     width: 75%;
 }
 
+#welcomePoster{
+    height: 100%;
+    /* display: flex;
+    flex-wrap: wrap;
+    align-content: center; */
+    max-width: 50%;
+    border-radius: 0.5em;
+}
+
+.rotatingmandala{
+    position: fixed;
+    width: auto;
+    z-index: 3;
+    animation: rotate 25s linear infinite;
+}
+
+#credsArea{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+}
+
 .modalContentsContainer form input{
     margin: 1rem 0;
     padding: 1rem;
@@ -60,13 +89,19 @@
     border: none;
     width: 70%;
     color: #000000;
+    font-family: cursive;
 }
 
+.modalContentsContainer form input:hover{ transform: scale(1.05) }
+
+.modalContentsContainer form input:focus{ transform: scale(1.05) }
+
 .modalContentsContainer form input[type='submit']{
     width: 50%;
     cursor: pointer;
     transition: 500ms ease;
     font-size: larger;
+    font-family: cursive;
 }
 
 .modalContentsContainer form input[type='submit']:hover{
@@ -96,6 +131,12 @@
     flex-direction: row;
 }
 
+.modalContentsContainer .miscCallInfo{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
 .modalContentsContainer .callControls{
     display: flex;
     flex-direction: row;    
@@ -120,6 +161,11 @@
     animation: flash 1000ms linear 0ms infinite alternate none;
 }
 
+@keyframes rotate {
+    0% { rotate: 0deg }
+    100% { rotate: 360deg }
+}
+
 @keyframes flash {
     0% { opacity: 0.65 }
     100% { opacity: 1 }

public/css/style.css

@@ -82,7 +82,7 @@ a{ color: #0000ff }
     left: -100vw;
     bottom: 0;
     top: 0;
-    width: 90vw;
+    width: 55vw;
     overflow-y: scroll;
     color: #ffffff;
     background-color: #000000f0;

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
     <title>Namaste</title>
-    <meta name="description" content="Chat with your friends, securely 🔒">
+    <meta name="description" content="Chat with your friends, securely 🔒✨">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/modal.css">
     <link rel="stylesheet" href="css/darkMode.css">
@@ -17,26 +17,41 @@
 
     <div id="loginModal" class="modalBackGround">
         <div class="modalContentsContainer">
-            <h1 class="namasteTextLogo" title="Namaste">Namaste</h1>
-            <form onsubmit="passCreds(event)">
-                <input type="text" id="login_username" title="Username" required placeholder="Username"/>
-                <input type="text" id="login_passcode" title="PassCode" required placeholder="Passcode (min. 8 letters)" minlength="8"/>
-                <input type="submit" disabled id="login_btn" disabled value="Enter">
-            </form>
+            <div id="welcomePoster">
+                <img style="filter: grayscale(0.8)" src="./imgs/backgrounds/mandala-backdrop.jpg" alt="Mandala">
+                <img class="rotatingmandala" style="top: -0.5em; left: 7.5em; height: 30vmin;" src="./imgs/backgrounds/mandala-main.png" alt="Rotating Mandala">
+                <img class="rotatingmandala" style="top: 15em; left: 1.5em; height: 50vmin; animation-direction: reverse;" src="./imgs/backgrounds/mandala-main.png" alt="Rotating Mandala">
+                <img class="rotatingmandala" style="top: 1.5em; left: 22em; height: 50vmin;" src="./imgs/backgrounds/mandala-main.png" alt="Rotating Mandala">
+                <img class="rotatingmandala" style="top: 27em; left: 26em; height: 35vmin;" src="./imgs/backgrounds/mandala-main.png" alt="Rotating Mandala">
+            </div>
+            <div id="credsArea">
+                <h1 style="font-size: 65px;" class="namasteTextLogo" title="Namaste">Namaste</h1>
+                <div style="height: 100px"></div>
+                <form onsubmit="passCreds(event)">
+                    <input type="text" id="login_username" title="Username" required placeholder="Username"/>
+                    <input type="password" id="login_passcode" title="PassCode" required placeholder="Passcode (min. 8 letters)" minlength="8"/>
+                    <input type="submit" disabled id="login_btn" disabled value="Enter">
+                </form>
+            </div>
         </div>
     </div>
 
     <img id="videoCallModalFloatBtn" class="floatingBtn hide" data-target-modal="videoCallModal" src="./imgs/app/video-call.svg" alt="Return to Call" title="[Double Click] Return to Call Window" ondblclick="toggleView([this], [document.getElementById(this.dataset.targetModal)])"/>
     <div id="videoCallModal" class="modalBackGround hide" data-target-float-btn="videoCallModalFloatBtn">
         <img class="closeModalBtn" src="./imgs/app/close.svg" alt="Close" title="Close" onclick="toggleView([this.parentElement], [document.getElementById(this.parentElement.dataset.targetFloatBtn)])">
         <div class="modalContentsContainer">
+            <!-- <div class="miscCallInfo">
+                <span id="callTimer">00:00:00</span>
+            </div> -->
             <div class="videoContainer">
                 <video id="myVideo" muted autoplay poster="./imgs/app/no-connection.jpeg"></video>
                 <video id="remoteVideo" autoplay poster="./imgs/app/no-connection.jpeg"></video>
             </div>
             <div class="callControls">
                 <canvas id="myWaveform"></canvas>
+                <img src="./imgs/app/mic-on.svg" alt="Mute Toggle" id="micToggle">
                 <img src="./imgs/app/call-end.svg" alt="End Call" onclick="endCall()">
+                <img src="./imgs/app/video-on.svg" alt="Camera Toggle" id="videoToggle">
                 <canvas id="remoteWaveform" style="transform: rotate(180deg);"></canvas>
             </div>
         </div>

public/js/DOM.js

@@ -12,10 +12,13 @@ const DOMElements = {
 	activeUserList: document.getElementById("activeUsers"),
 	videoCallModal: document.getElementById("videoCallModal"),
 	videoCallModalFloatBtn: document.getElementById("videoCallModalFloatBtn"),
+	callTimer: document.getElementById("callTimer"),
 	myVideo: document.getElementById("myVideo"),
 	myWaveform: document.getElementById("myWaveform"),
 	remoteVideo: document.getElementById("remoteVideo"),
 	remoteWaveform: document.getElementById("remoteWaveform"),
+	micToggle: document.getElementById("micToggle"),
+	videoToggle: document.getElementById("videoToggle"),
 };
 
 function openUsersList(){ DOMElements.activeUsersListContainer.classList.add('activeUsersListContainer-open') }
@@ -52,7 +55,7 @@ function toggleView(toHide=[], toShow=[]){
 	toShow.forEach((DOMElement) => DOMElement.classList.remove('hide'));
 }
 
-function toastNotification(message="", options={ notificationDuration: 2500, neverExpire: false, expireNow: false }){
+function toastNotification(message="", options={ notificationDuration: 3000, neverExpire: false, expireNow: false }){
 	DOMElements.toastNotification.innerText = String(message);
 	if (options.expireNow) {
 		DOMElements.toastNotification.classList.remove('showToast');
@@ -124,6 +127,7 @@ function listUsers(users=allUsers, clearTable=false){
 
 function appendMessage(message=null, options={ alignment:0, username:null, userId:null, timeStamp:null }){
 	if (message==null) return;
+	if (!DOMElements.videoCallModal.classList.contains('hide')) toastNotification(`${options.username ?? "Someone"}: ${message}`);
 	function isValidURL(string) {
 		try { new URL(string); return true }
 		catch (err) { return false }
@@ -380,6 +384,9 @@ window.document.addEventListener('contextmenu', (e) => {
 	DOMElements.contextMenu.style.left = `${(e.x + DOMElements.contextMenu.offsetWidth > window.innerWidth) ? window.innerWidth - DOMElements.contextMenu.offsetWidth : e.x}px`;
 });
 
+let imageElements = document.getElementsByTagName('img');
+for (i=0; i<imageElements.length; i++) imageElements.item(i).draggable = false;
+
 //Execution
 toggleView([DOMElements.videoCallModal, DOMElements.videoCallModalFloatBtn], [DOMElements.loginModal]);
 DOMElements.loginUsername.addEventListener('input', (e) => { DOMElements.loginButton.disabled = (DOMElements.loginPasscode.validity.valid === false) || (DOMElements.loginUsername.value === '') });