First commit

divanov11 · Apr 20, 2022 · 9f764a4 · 9f764a4
commit 9f764a4
Show file tree

Hide file tree

Showing 42 changed files with 2,360 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/Starter Template/.vscode/settings.json b/Starter Template/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/Starter Template/images/1.png b/Starter Template/images/1.png
diff --git a/Starter Template/images/2.PNG b/Starter Template/images/2.PNG
diff --git a/Starter Template/images/3.PNG b/Starter Template/images/3.PNG
diff --git a/Starter Template/images/4.PNG b/Starter Template/images/4.PNG
diff --git a/Starter Template/images/hero.svg b/Starter Template/images/hero.svg
diff --git a/Starter Template/images/icons/arrow-right.svg b/Starter Template/images/icons/arrow-right.svg
diff --git a/Starter Template/images/logo.png b/Starter Template/images/logo.png
diff --git a/Starter Template/images/stream-1.png b/Starter Template/images/stream-1.png
diff --git a/Starter Template/images/stream-2.png b/Starter Template/images/stream-2.png
diff --git a/Starter Template/images/stream-3.png b/Starter Template/images/stream-3.png
diff --git a/Starter Template/images/stream-thumbnail.png b/Starter Template/images/stream-thumbnail.png
diff --git a/Starter Template/js/lobby.js b/Starter Template/js/lobby.js
diff --git a/Starter Template/js/room.js b/Starter Template/js/room.js
@@ -0,0 +1,32 @@
+let messagesContainer = document.getElementById('messages');
+messagesContainer.scrollTop = messagesContainer.scrollHeight;
+
+const memberContainer = document.getElementById('members__container');
+const memberButton = document.getElementById('members__button');
+
+const chatContainer = document.getElementById('messages__container');
+const chatButton = document.getElementById('chat__button');
+
+let activeMemberContainer = false;
+
+memberButton.addEventListener('click', () => {
+  if (activeMemberContainer) {
+    memberContainer.style.display = 'none';
+  } else {
+    memberContainer.style.display = 'block';
+  }
+
+  activeMemberContainer = !activeMemberContainer;
+});
+
+let activeChatContainer = false;
+
+chatButton.addEventListener('click', () => {
+  if (activeChatContainer) {
+    chatContainer.style.display = 'none';
+  } else {
+    chatContainer.style.display = 'block';
+  }
+
+  activeChatContainer = !activeChatContainer;
+});
diff --git a/Starter Template/lobby.html b/Starter Template/lobby.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Room</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='styles/main.css'>
+    <link rel='stylesheet' type='text/css' media='screen' href='styles/lobby.css'>
+</head>
+<body>
+
+        <header id="nav">
+       <div class="nav--list">
+            <a href="lobby.html"/>
+                <h3 id="logo">
+                    <img src="./images/logo.png" alt="Site Logo">
+                    <span>Mumble</span>
+                </h3>
+            </a>
+       </div>
+
+        <div id="nav__links">
+            <a class="nav__link" href="/">
+                Lobby
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ede0e0" viewBox="0 0 24 24"><path d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"/></svg>
+            </a>
+            <a class="nav__link" id="create__room__btn" href="lobby.html">
+                Create Room
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ede0e0" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>
+            </a>
+        </div>
+    </header>
+
+    <main id="room__lobby__container">
+        <div id="form__container">
+             <div id="form__container__header">
+                 <p>👋 Create or Join Room</p>
+             </div>
+
+
+            <form id="lobby__form">
+
+                 <div class="form__field__wrapper">
+                     <label>Your Name</label>
+                     <input type="text" name="name" required placeholder="Enter your display name..." />
+                 </div>
+
+                 <div class="form__field__wrapper">
+                     <label>Room Name</label>
+                     <input type="text" name="room" required placeholder="Enter room name..." />
+                 </div>
+
+                 <div class="form__field__wrapper">
+                     <button type="submit">Go to Room 
+                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/></svg>
+                    </button>
+                 </div>
+            </form>
+        </div>
+     </main>
+
+</body>
+<script type="text/javascript" src="js/lobby.js"></script>
+</html>