Добавил кнопки для отображения всех участников данного чата, добавления участников в данный чат, а также переход на страницу профиля при нажатии на username участника, убрал создание и проверку паролей чатов

assets/css/chat.css

@@ -21,13 +21,33 @@ body {
 }
 
 .chat-header {
-    background-color: #0088cc;
+    background-color: #007bb5;
     color: white;
-    padding: 15px;
+    padding: 25px;
-    text-align: center;
+    display: flex;
-    font-size: 20px;
+    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;
 }

assets/css/list-rooms.css

@@ -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;
 }
@@ -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;

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;

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>

assets/html/list-rooms.html

@@ -7,31 +7,16 @@
 	<link rel="stylesheet" href="/assets/css/list-rooms.css">
 </head>
 <body>
-    <div class="container">
+<div class="container">
 	<h1 style="color: white;">Выберите Чат-Комнату</h1>
 	<ul class="room-list">
 		<!-- Здесь будет список комнат -->
 	</ul>
 	<button class="create-room-button" onclick="openCreateRoomModal()">Создать Комнату</button>
-    </div>
+</div>
 
-    <div id="passwordModal" class="modal">
+<!-- Модальное окно для создания комнаты -->
-        <div class="modal-content">
+<div id="createRoomModal" class="modal">
-            <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>
@@ -39,14 +24,29 @@
 		</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>
-	</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>

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">

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>

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();

assets/js/list-rooms.js

@@ -1,21 +1,24 @@
 let rooms = {};
 
-function openModal(roomName) {
+function openRoom(currentRoom) {
-    currentRoom = roomName;
-    document.getElementById('passwordModal').style.display = 'block';
-}
-
-function closeModal() {
-    document.getElementById('passwordModal').style.display = 'none';
-}
-
-function validatePassword() {
-    const enteredPassword = document.getElementById('roomPassword').value;
-    if (enteredPassword === rooms[currentRoom]) {
     alert('Вы вошли в комнату: ' + currentRoom);
-        closeModal();
+}
+
+function closeAdd() {
+    document.getElementById('add_members').style.display = 'none';
+}
+
+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 === '') {
-    
-    if (roomName === '' || roomPassword === '') {
         alert('Пожалуйста, заполните все поля.');
         return;
     }
-
     if (rooms[roomName]) {
         alert('Комната с таким названием уже существует.');
         return;
     }
-
+    rooms[roomName] = true;
-    rooms[roomName] = roomPassword;
     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();
+    }
+});