From 6b0770844cf0fb44fdcc9b2a1114160b4af56c1a Mon Sep 17 00:00:00 2001
From: yakovlevanton <akovlevanton02@gmail.com>
Date: Sat, 10 Aug 2024 06:09:51 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D1=81=D0=B5=D1=85=20=D1=83=D1=87=D0=B0=D1=81?=
 =?UTF-8?q?=D1=82=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2=20=D0=B4=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D1=87=D0=B0=D1=82=D0=B0,=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=83=D1=87?=
 =?UTF-8?q?=D0=B0=D1=81=D1=82=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2=20=D0=B2=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B9=20=D1=87=D0=B0=D1=82,=20?=
 =?UTF-8?q?=D0=B0=20=D1=82=D0=B0=D0=BA=D0=B6=D0=B5=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D1=85=D0=BE=D0=B4=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D1=80=D0=B8=20=D0=BD=D0=B0=D0=B6=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B8=D0=B8=20=D0=BD=D0=B0=20username=20=D1=83=D1=87?=
 =?UTF-8?q?=D0=B0=D1=81=D1=82=D0=BD=D0=B8=D0=BA=D0=B0,=20=D1=83=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BB=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=B8=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA?=
 =?UTF-8?q?=D1=83=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB=D0=B5=D0=B9=20=D1=87?=
 =?UTF-8?q?=D0=B0=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/chat.css         | 91 +++++++++++++++++++++++++++++++++---
 assets/css/list-rooms.css   | 92 ++++++++++++++++++++++++++++++-------
 assets/css/profile.css      | 13 ++++++
 assets/html/chat.html       | 18 +++++++-
 assets/html/list-rooms.html | 82 ++++++++++++++++-----------------
 assets/html/profile.html    |  1 +
 assets/img/return.svg       | 15 ++++++
 assets/js/chat.js           |  8 ++++
 assets/js/list-rooms.js     | 46 ++++++++++---------
 9 files changed, 278 insertions(+), 88 deletions(-)
 create mode 100644 assets/img/return.svg

diff --git a/assets/css/chat.css b/assets/css/chat.css
index d408af1..353c44f 100644
--- a/assets/css/chat.css
+++ b/assets/css/chat.css
@@ -21,13 +21,33 @@ body {
 }
 
 .chat-header {
-    background-color: #0088cc;
+    background-color: #007bb5;
     color: white;
-    padding: 15px;
-    text-align: center;
-    font-size: 20px;
+    padding: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.room-name {
+    position: absolute;
+    left: 50%;
+    font-size: 24px;
+}
+.members {
+    border: none;
+    position: absolute;
+    left: 80%;
+    border-radius: 10px;
+    cursor: pointer;
+    width: 150px;
+    background-color: #f7f7f7;
+    height: 25px;
+    transition: background-color 0.3s ease;
+}
+.members:hover {
+    background-color: #218838;
 }
-
 .chat-messages {
     flex: 1;
     padding: 15px;
@@ -97,7 +117,66 @@ body {
     cursor: pointer;
     outline: none;
 }
-
+.members-list {
+    display: none;
+    position: fixed;
+    background-color: #fff;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 400px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+.members-list-header {
+    display: flex;
+}
+.all-members {
+    position: absolute;
+    left: 32%;
+    top: 0%;
+    margin-bottom: 30px;
+    font-family: Arial, sans-serif;
+}
+.close {
+    position: absolute;
+    right: 5%;
+    font-size: 24px;
+    font-weight: bold;
+}
+.members-list span {
+    cursor: pointer;
+}
+.members-list-body ul {
+    list-style-type: none;
+    left: 0%;
+}
+.members-list-body img {
+    margin-top: 10px;
+    left: 0%;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+}
+.members-list-body a {
+    margin-left: 5px;
+    margin-top: 10px;
+    text-decoration: none;
+    color: black;
+}
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
 .chat-send-button:hover {
     background-color: #007bb5;
 }
\ No newline at end of file
diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css
index 4a4643a..3d87cf8 100644
--- a/assets/css/list-rooms.css
+++ b/assets/css/list-rooms.css
@@ -7,7 +7,7 @@ body {
 
 .container {
     max-width: 800px;
-    margin: 30px auto; 
+    margin: 30px auto;
     padding: 20px;
     background-color: #007bff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -16,7 +16,7 @@ body {
 
 h1 {
     text-align: center;
-    color: #fff; 
+    color: #fff;
 }
 
 .room-list {
@@ -55,7 +55,47 @@ h1 {
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
-
+.add-members-header {
+    text-align: center;
+}
+.add-members-footer {
+    text-align: right;
+    margin-top: 5px;
+}
+.add-members-button {
+    background-color: #218838;
+    padding: 10px 15px;
+    font-size: 16px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    position: absolute;
+    margin-left: 500px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.add-members-button:hover {
+    background-color: #006509
+}
+#newMemberLogin {
+    width: 93.5%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+.add-member-button {
+    background-color: #218838;
+    padding: 10px 15px;
+    font-size: 16px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    position: absolute;
+    margin-left: -105px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
 .join-button:hover {
     background-color: #0056b3;
 }
@@ -74,7 +114,7 @@ h1 {
 
 .modal-content {
     background-color: #fff;
-    margin: 10% auto; 
+    margin: 10% auto;
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
@@ -96,19 +136,6 @@ h1 {
     text-align: right;
 }
 
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover, .close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
-}
-
 .modal input {
     width: 93.5%;
     padding: 10px;
@@ -134,3 +161,34 @@ h1 {
 .create-room-button:hover {
     background-color: #218838;
 }
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.overlay .add-members {
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 100%;
+    height: 18%;
+    position: fixed;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
diff --git a/assets/css/profile.css b/assets/css/profile.css
index 47c1390..6147869 100644
--- a/assets/css/profile.css
+++ b/assets/css/profile.css
@@ -24,6 +24,19 @@ body {
     border-color: antiquewhite;
     background-color: #0088cc;
     border-radius: 10px;
+    position: relative;
+}
+.return {
+    background-image: url("/assets/img/return.svg");
+    background-repeat: no-repeat;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    position: absolute;
+    left: 20px;
+    top: 30px;
+    border: none;
 }
 form {
     display: flex;
diff --git a/assets/html/chat.html b/assets/html/chat.html
index 809d6b4..056cce1 100644
--- a/assets/html/chat.html
+++ b/assets/html/chat.html
@@ -9,7 +9,8 @@
 <body>
     <div class="chat-container">
         <div class="chat-header">
-            Веб чат
+            <span class="room-name">Веб чат</span>
+            <button class="members" onclick="openMembersList()">Показать участников</button>
         </div>
         <div class="chat-messages" id="chat-messages">
             <!-- Сообщения чата будут здесь -->
@@ -19,7 +20,20 @@
             <button class="chat-send-button" onclick="sendMessage()">Отправить</button>
         </div>
     </div>
-
+    <div class="overlay" id="overlay">
+    <div class="members-list" id="members-list">
+        <div class="members-list-header">
+            <span class="close" onclick="closeMembersList()">&times;</span>
+            <h2 class="all-members">Все участники</h2>
+        </div>
+        <div class="members-list-body">
+            <ul>
+                <li><img src="https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album">
+                    <a href="profile.html">Адель</a></li>
+            </ul>
+        </div>
+    </div>
+    </div>
     <script src="/assets/js/chat.js"></script>
 </body>
 </html>
diff --git a/assets/html/list-rooms.html b/assets/html/list-rooms.html
index 390359f..e1dbf92 100644
--- a/assets/html/list-rooms.html
+++ b/assets/html/list-rooms.html
@@ -1,52 +1,52 @@
 <!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="/assets/css/list-rooms.css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Список Чат-Комнат</title>
+	<link rel="stylesheet" href="/assets/css/list-rooms.css">
 </head>
 <body>
-    <div class="container">
-        <h1 style="color: white;">Выберите Чат-Комнату</h1>
-        <ul class="room-list">
-            <!-- Здесь будет список комнат -->
-        </ul>
-        <button class="create-room-button" onclick="openCreateRoomModal()">Создать Комнату</button>
-    </div>
+<div class="container">
+	<h1 style="color: white;">Выберите Чат-Комнату</h1>
+	<ul class="room-list">
+		<!-- Здесь будет список комнат -->
+	</ul>
+	<button class="create-room-button" onclick="openCreateRoomModal()">Создать Комнату</button>
+</div>
 
-    <div id="passwordModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-header">
-                <span class="close" onclick="closeModal()">&times;</span>
-                <h2>Введите Пароль</h2>
-            </div>
-            <div class="modal-body">
-                <input type="password" id="roomPassword" placeholder="Пароль">
-            </div>
-            <div class="modal-footer">
-                <button class="join-button" onclick="validatePassword()">Подтвердить</button>
-            </div>
-        </div>
-    </div>
-	
-	<!-- Модальное окно для создания комнаты -->
-	<div id="createRoomModal" class="modal">
-		<div class="modal-content">
-			<div class="modal-header">
-				<span class="close" onclick="closeCreateRoomModal()">&times;</span>
-				<h2>Создать Комнату</h2>
-			</div>
-			<div class="modal-body">
-				<input type="text" id="newRoomName" placeholder="Название комнаты">
-				<input type="password" id="newRoomPassword" placeholder="Пароль">
-			</div>
-			<div class="modal-footer">
-				<button class="join-button" onclick="createRoom()">Создать</button>
-			</div>
+<!-- Модальное окно для создания комнаты -->
+<div id="createRoomModal" class="modal">
+	<div class="modal-content">
+		<div class="modal-header">
+			<span class="close" onclick="closeCreateRoomModal()">&times;</span>
+			<h2>Создать Комнату</h2>
+		</div>
+		<div class="modal-body">
+			<input type="text" id="newRoomName" placeholder="Название комнаты">
+		</div>
+		<div class="modal-footer">
+			<button class="join-button" onclick="createRoom()">Создать</button>
 		</div>
 	</div>
+</div>
 
-    <script src="/assets/js/list-rooms.js"></script>
+<!-- Модальное окно для добавления участников -->
+<div class="overlay" id="add_members">
+	<div class="add-members">
+		<div class="add-members-header">
+			<span class="close" onclick="closeAdd()">&times;</span>
+			<h2>Добавить участников</h2>
+		</div>
+		<div class="add-members-body">
+			<input type="text" id="newMemberLogin" placeholder="Логин пользователя">
+		</div>
+		<div class="add-members-footer">
+			<button class="add-member-button" onclick="addMember()">Добавить</button>
+		</div>
+	</div>
+</div>
+
+<script src="/assets/js/list-rooms.js"></script>
 </body>
 </html>
diff --git a/assets/html/profile.html b/assets/html/profile.html
index 31523d2..bec192a 100644
--- a/assets/html/profile.html
+++ b/assets/html/profile.html
@@ -9,6 +9,7 @@
 <div class="main-container">
     <div class="profile-header">
     <h1 style="color: white; text-align: center;">Профиль пользователя</h1>
+        <button class="return" type="button"></button>
     </div>
     <form>
         <div class="columns">
diff --git a/assets/img/return.svg b/assets/img/return.svg
new file mode 100644
index 0000000..d39efd4
--- /dev/null
+++ b/assets/img/return.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 489.394 489.394"
+	 xml:space="preserve">
+<g>
+	<path d="M375.789,92.867H166.864l17.507-42.795c3.724-9.132,1-19.574-6.691-25.744c-7.701-6.166-18.538-6.508-26.639-0.879
+		L9.574,121.71c-6.197,4.304-9.795,11.457-9.563,18.995c0.231,7.533,4.261,14.446,10.71,18.359l147.925,89.823
+		c8.417,5.108,19.18,4.093,26.481-2.499c7.312-6.591,9.427-17.312,5.219-26.202l-19.443-41.132h204.886
+		c15.119,0,27.418,12.536,27.418,27.654v149.852c0,15.118-12.299,27.19-27.418,27.19h-226.74c-20.226,0-36.623,16.396-36.623,36.622
+		v12.942c0,20.228,16.397,36.624,36.623,36.624h226.74c62.642,0,113.604-50.732,113.604-113.379V206.709
+		C489.395,144.062,438.431,92.867,375.789,92.867z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/assets/js/chat.js b/assets/js/chat.js
index 12cb5a4..d5005d4 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -36,7 +36,15 @@ function sendMessage() {
         chatMessages.scrollTop = chatMessages.scrollHeight;
     }
 }
+function openMembersList() {
+    document.getElementById("members-list").style.display = "block";
+    document.getElementById("overlay").style.display = "flex";
 
+}
+function closeMembersList() {
+    document.getElementById("members-list").style.display = "none";
+    document.getElementById("overlay").style.display = "none";
+}
 document.getElementById('chat-input').addEventListener('keydown', function (event) {
     if (event.key === 'Enter') {
         sendMessage();
diff --git a/assets/js/list-rooms.js b/assets/js/list-rooms.js
index 081634c..e1b2745 100644
--- a/assets/js/list-rooms.js
+++ b/assets/js/list-rooms.js
@@ -1,21 +1,24 @@
 let rooms = {};
 
-function openModal(roomName) {
-    currentRoom = roomName;
-    document.getElementById('passwordModal').style.display = 'block';
+function openRoom(currentRoom) {
+    alert('Вы вошли в комнату: ' + currentRoom);
 }
 
-function closeModal() {
-    document.getElementById('passwordModal').style.display = 'none';
+function closeAdd() {
+    document.getElementById('add_members').style.display = 'none';
 }
 
-function validatePassword() {
-    const enteredPassword = document.getElementById('roomPassword').value;
-    if (enteredPassword === rooms[currentRoom]) {
-        alert('Вы вошли в комнату: ' + currentRoom);
-        closeModal();
+function openAdd() {
+    document.getElementById('add_members').style.display = 'flex';
+}
+
+function addMember() {
+    const login = document.getElementById('newMemberLogin').value;
+    if (login) {
+        alert(`Участник с никнеймом '${login}' добавлен`);
+        closeAdd();
     } else {
-        alert('Неверный пароль. Попробуйте снова.');
+        alert('Пожалуйста, введите логин участника');
     }
 }
 
@@ -29,26 +32,21 @@ function closeCreateRoomModal() {
 
 function createRoom() {
     const roomName = document.getElementById('newRoomName').value.trim();
-    const roomPassword = document.getElementById('newRoomPassword').value.trim();
-    
-    if (roomName === '' || roomPassword === '') {
+    if (roomName === '') {
         alert('Пожалуйста, заполните все поля.');
         return;
     }
-
     if (rooms[roomName]) {
         alert('Комната с таким названием уже существует.');
         return;
     }
-
-    rooms[roomName] = roomPassword;
+    rooms[roomName] = true;
     addRoomToList(roomName);
     closeCreateRoomModal();
 }
 
 function addRoomToList(roomName) {
     const roomList = document.querySelector('.room-list');
-    
     const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
     if (existingRoomItem) {
         existingRoomItem.remove();
@@ -59,7 +57,8 @@ function addRoomToList(roomName) {
 
     roomItem.innerHTML = `
         <span class="room-name">${roomName}</span>
-        <button class="join-button" onclick="openModal('${roomName}')">Войти</button>
+        <button class="add-members-button" onclick="openAdd()">Добавить участников</button>
+        <button class="join-button" onclick="openRoom('${roomName}')">Войти</button>
     `;
 
     roomList.appendChild(roomItem);
@@ -74,10 +73,13 @@ function initializeRoomList() {
 initializeRoomList();
 
 window.onclick = function(event) {
-    if (event.target === document.getElementById('passwordModal')) {
-        closeModal();
-    }
     if (event.target === document.getElementById('createRoomModal')) {
         closeCreateRoomModal();
     }
 }
+
+document.getElementById('newRoomName').addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        createRoom();
+    }
+});