feat: create room

bb-hackathon · May 22, 2024 · 8056a6d · 8056a6d
1 parent ec0a315
commit 8056a6d
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 4 deletions.
diff --git a/frontend/assets/background_auth.png b/frontend/assets/background_auth.png
diff --git a/frontend/css/auth.css b/frontend/css/auth.css
@@ -5,7 +5,7 @@
 }
 
 body {
-	background: #f6f5f7;
+	background:  url("../assets/background_auth.png") center/cover;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -22,6 +22,8 @@ h1 {
 }
 
 h2 {
+	color: #FFFFFF;
+	outline: #2E3440;
 	text-align: center;
 }
 

diff --git a/frontend/css/create_room.css b/frontend/css/create_room.css
@@ -0,0 +1,78 @@
+@font-face {
+    font-family: 'Doxent';
+    src: url('../media/fonts/doxent.otf') format('opentype');
+}
+@font-face {
+    font-family: 'Kreadon';
+    src: url('../media/fonts/kreadon.ttf') format('opentype');
+}
+
+#user-list {
+    max-height: 300px; /* Adjusted height for scrolling */
+    overflow-y: auto;
+}
+
+
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    background:  url("../assets/background_auth.png") center/cover;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: #fff;
+    padding: 40px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    margin-top: 0;
+    text-align: center;
+}
+
+.user-input {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.user-input input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.add-button {
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    padding: 10px 15px;
+    margin-left: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.add-button:hover {
+    background-color: #218838;
+}
+
+.create-button {
+    width: 100%;
+    padding: 15px;
+    background-color: #7366BD;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+.create-button:hover {
+    background-color: #0056b3;
+}
diff --git a/frontend/css/index.css b/frontend/css/index.css
@@ -308,4 +308,18 @@ main #send-message-panel textarea{
 }
 .send-msg-btn:focus {
     border: none;
+}
+
+.button {
+	display: inline-block;
+	padding: 16px 56px;
+	background-color: #4B46E3;
+	color: white;
+	margin-left: 28px;
+	margin-bottom: 14px;
+	border: none;
+	border-radius: 12px;
+	cursor: pointer;
+	font-size: 16px;
+	text-align: center; 
 }
diff --git a/frontend/css/signin.css b/frontend/css/signin.css
diff --git a/frontend/css/signup.css b/frontend/css/signup.css
diff --git a/frontend/scripts/create_room.js b/frontend/scripts/create_room.js
@@ -0,0 +1,30 @@
+function showAddButton(input) {
+    const addButton = input.nextElementSibling;
+    if (input.value.trim() !== "") {
+        addButton.style.display = "inline-block";
+    } else {
+        addButton.style.display = "none";
+    }
+}
+
+function addUserInput(button) {
+    const userInputDiv = document.createElement('div');
+    userInputDiv.classList.add('user-input');
+    userInputDiv.innerHTML = `
+        <input type="text" placeholder="Введите имя пользователя" oninput="showAddButton(this)">
+        <button class="add-button" style="display: none;" onclick="addUserInput(this)">+</button>
+    `;
+    document.getElementById('user-list').appendChild(userInputDiv);
+    button.style.display = "none";
+}
+
+function createChat() {
+    const userInputs = document.querySelectorAll('.user-input input');
+    const users = [];
+    userInputs.forEach(input => {
+        if (input.value.trim() !== "") {
+            users.push(input.value.trim());
+        }
+    });
+    alert("Чат создан с пользователями: " + users.join(', '));
+}
diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js
@@ -0,0 +1,4 @@
+const createChat = document.getElementById('create_room');
+createChat.addEventListener('click', () => {
+    window.location.href = "create_room.html";
+});
diff --git a/frontend/templates/auth.html b/frontend/templates/auth.html
@@ -2,7 +2,7 @@
 	<head>
 		<meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>TCP Chat | Auth</title>
+        <title>TCP Chat | Auth | Badybuilding</title>
         <link rel="stylesheet" href="../css/auth.css">
 	</head>
 	<body>

diff --git a/frontend/templates/create_room.html b/frontend/templates/create_room.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Создание чата</title>
+    <link rel="stylesheet" href="../css/create_room.css">
+</head>
+<body>
+    <div class="container">
+        <h2>Создание чата</h2>
+        <div id="user-list">
+            <div class="user-input">
+                <input type="text" placeholder="Введите имя пользователя" oninput="showAddButton(this)">
+                <button class="add-button" style="display: none;" onclick="addUserInput(this)">+</button>
+            </div>
+        </div>
+        <button class="create-button" onclick="createChat()">Создать</button>
+    </div>
+    <script src="../scripts/create_room.js"></script>
+</body>
+</html>
diff --git a/frontend/templates/index.html b/frontend/templates/index.html
@@ -9,13 +9,15 @@
     </head>
 
     <body>
-
         <div id="container">
             <aside>
                 <div id="logo">
                     <p class="name">TCP-CHAT</p>
                     <p class="authors">By Bodybuilding inc.</p>
                 </div>
+                <div>
+                    <div class="button" id="create_room">Создать чат</div>
+                </div>
                 <ul>
                     <li>
                         <div>
@@ -133,7 +135,7 @@ <h2>Vincent</h2>
                 </div>
             </main>
         </div>
-
+        <script src="../scripts/index.js"></script>
     </body>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>