Добавлены кнопки удаления чатов, участников чата, изменен дизайн некоторых элементов, добавлено api

assets/css/chat.css

@@ -164,6 +164,26 @@ body {
     margin-top: 10px;
     text-decoration: none;
     color: black;
+
+}
+.members-list-body a:hover {
+    text-decoration: underline;
+    color: #0088cc;
+}
+.members-list-body button {
+    padding: 5px 10px;
+    border: none;
+    background-color: #dc2e45;
+    color: white;
+    border-radius: 20px;
+    position: absolute;
+    left: 300px;
+    margin-top: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.members-list-body button:hover {
+    background-color: #881527;
 }
 .overlay {
     display: none;

assets/css/list-rooms.css

@@ -70,13 +70,28 @@ h1 {
     border: none;
     border-radius: 5px;
     position: absolute;
-    margin-left: 500px;
+    margin-left: 502px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 .add-members-button:hover {
     background-color: #006509
 }
+.delete-chat-button {
+    background-color: #dc2e45;
+    border: none;
+    color: white;
+    font-size: 16px;
+    border-radius: 5px;
+    position: absolute;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    padding: 10px 15px;
+    margin-left: 380px;
+}
+.delete-chat-button:hover {
+    background-color: #881527;
+}
 #newMemberLogin {
     width: 93.5%;
     padding: 10px;
@@ -185,13 +200,49 @@ h1 {
     height: 18%;
     position: fixed;
 }
-
+.overlay .delete-chat {
-#error {
+    background-color: white;
-    color: red;
+    padding: 30px;
-    font-size: 15px;
+    border-radius: 10px;
-    margin-top: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    max-width: 400px;
+    width: 100%;
+    height: 18%;
+    position: fixed;
+}
+.delete-close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.delete-chat-header {
     text-align: center;
-    display: none; 
+}
+.confirm {
+    background-color: #1609ab;
+    padding: 20px 70px;
+    font-size: 16px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    position: absolute;
+    margin-left: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+.cancel {
+    background-color: #1609ab;
+    padding: 20px 70px;
+    font-size: 16px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    position: absolute;
+    margin-left: 220px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 .close {
     color: #aaa;
@@ -199,3 +250,4 @@ h1 {
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
+}

assets/css/profile.css

@@ -27,17 +27,25 @@ body {
     position: relative;
 }
 .return {
-    background-image: url("/assets/img/return.svg");
+    background-color: #f0f0f0;
-    background-repeat: no-repeat;
     cursor: pointer;
-    width: 30px;
+    width: 100px;
+    text-decoration: none;
+    color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     height: 30px;
     border-radius: 10px;
     position: absolute;
     left: 20px;
-    top: 30px;
+    top: 25px;
     border: none;
 }
+.return:hover{
+    text-decoration: underline;
+    color: #0088cc;
+}
 form {
     display: flex;
     flex-direction: column;
@@ -58,14 +66,16 @@ form {
     align-items: center;
 }
 .add {
-    background-image: url("/assets/img/add_photo.svg");
+    width: 100px;
-    background-size: cover;
+    height: 40px;
-    width: 30px;
+    border-width: 2px;
-    height: 30px;
-    border: none;
     cursor: pointer;
+    font-size: 16px;
     border-radius: 10px;
 }
+.add:hover {
+    background-color: #007bb5;
+}
 .image-button:hover {
     opacity: 0.8;
 }
@@ -108,10 +118,11 @@ form {
     border-radius: 15px;
     border-color: #2F4F4F;
     height: 40px;
-    color: white;
-    background-color: #0088cc;
     width: 150px;
 }
+.save:hover {
+    background-color: #007bb5;
+}
 .avatar {
     border-radius: 50%;
     object-fit: cover;

assets/html/chat.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="/assets/css/chat.css">
 </head>
 <body>
-    <div class="chat-container">
+<div class="chat-container">
     <div class="chat-header">
         <span class="room-name">Веб чат</span>
         <button class="members" onclick="openMembersList()">Показать участников</button>
@@ -19,21 +19,20 @@
         <input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение...">
         <button class="chat-send-button" onclick="sendMessage()">Отправить</button>
     </div>
-    </div>
+</div>
-    <div class="overlay" id="overlay">
+<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>
+            <ul id="members-list-body">
-                <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>
+</div>
-    <script src="/assets/js/chat.js"></script>
+<script src="/assets/js/chat.js"></script>
 </body>
 </html>

assets/html/list-rooms.html

@@ -48,7 +48,18 @@
         </div>
     </div>
 </div>
-
+<div class="overlay" id="delete-chat">
+    <div class="delete-chat">
+        <div class="delete-chat-header">
+            <span class="delete-close" onclick="closeConfirm()">&times;</span>
+            <h2>Вы уверены, что хотите удалить чат?</h2>
+        </div>
+        <div class="delete-chat-body">
+            <button class="confirm" onclick="deleteChat()">Да</button>
+            <button class="cancel" onclick="closeConfirm()">Нет</button>
+        </div>
+    </div>
+</div>
 <script src="/assets/js/list-rooms.js"></script>
 </body>
 </html>

assets/html/profile.html

@@ -9,14 +9,14 @@
 <div class="main-container">
     <div class="profile-header">
         <h1 style="color: white; text-align: center;">Профиль пользователя</h1>
-        <button class="return" type="button"></button>
+        <a class="return" href="chat.html">Назад</a>
     </div>
     <form>
         <div class="columns">
             <div class="column">
                 <img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br>
                 <input type="file" id="fileInput" style="display:none">
-                <button class="add" type="button" onclick="document.getElementById('fileInput').click();"></button><br>
+                <button class="add" type="button" onclick="document.getElementById('fileInput').click();">Изменить фото</button><br>
             </div>
             <div class="column">
                 <input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br>

assets/html/registration.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Страница Регистрации</title>
-    <link rel="stylesheet" href="assets/css/registration.css">
+    <link rel="stylesheet" href="/assets/css/registration.css">
 
 </head>
 
 <body>
-    <div class="form-container">
+<div class="form-container">
     <h1 class="hide-cursor no-select">Вход</h1>
     <form action="assets/html/list-rooms.html" method="post">
         <input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
@@ -18,8 +18,8 @@
         <button type="submit" class="hide-cursor no-select">Зарегистрироваться</button>
         <div id="error"></div>
     </form>
-    </div>
+</div>
 
-    <script src="assets/js/registration.js"></script>
+<script src="assets/js/registration.js"></script>
 </body>
 </html>

assets/js/chat.js

@@ -1,11 +1,31 @@
+let members = [
+    { username: 'Адель', nickname: 'cold_siemens52', avatar: 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album' },
+    { username: 'Антон', nickname: 'antyak_01', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' },
+    { username: 'Владимир', nickname: 'kkrkk2006', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' }
+];
 let currentHistoryId = 0;
-    let currentChatID = null;
+let currentChatID = null;
+function renderMembersList() {
+    const membersListBody = document.getElementById('members-list-body');
+    membersListBody.innerHTML = '';
 
-    document.addEventListener("DOMContentLoaded", async function() {
+    members.forEach((member, index) => {
-        currentChatID = await getChatID();
+        const memberItem = document.createElement('li');
+        memberItem.innerHTML = `
+            <img src="${member.avatar}" alt="${member.username}">
+            <a href="profile.html">${member.username}</a>
+            <button class="delete-member" onclick="deleteMember(${index})">Удалить из чата</button>
+        `;
+        membersListBody.appendChild(memberItem);
     });
+}
 
-    async function sendMessage() {
+function deleteMember(index) {
+    members.splice(index, 1);
+    renderMembersList();
+}
+
+async function sendMessage() {
     const chatMessages = document.getElementById('chat-messages');
     const chatInput = document.getElementById('chat-input');
     const message = chatInput.value;
@@ -66,33 +86,26 @@ let currentHistoryId = 0;
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
     }
-    }
+}
 
-    document.getElementById('chat-input').addEventListener('keydown', function (event) {
+function openMembersList() {
+    renderMembersList();
+    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();
     }
-    });
+});
 
-    async function getUserName() {
+async function getUserID() {
-        const userID = await getUserID();
-        const request = {
-            "id": userID
-        };
-
-        const response = await fetch('/internalapi/getUserInfo', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(request)
-        });
-
-        const res = await response.json();
-        return res.content.name;
-    }
-
-    async function getUserID() {
     const response = await fetch('/internalapi/mirror', {
         method: 'POST',
         headers: {
@@ -103,9 +116,8 @@ let currentHistoryId = 0;
 
     const res = await response.json();
     return res.id;
-    }
+}
-
+async function getChatID() {
-    async function getChatID() {
     const chatNickname = window.location.pathname.split('/').pop();
     const response = await fetch('/internalapi/getChatList', {
         method: 'POST',
@@ -122,9 +134,8 @@ let currentHistoryId = 0;
         }
     }
     return -1;
-    }
+}
-
+async function editMessage(new_message) {
-    async function editMessage(new_message) {
     const req = {
         'chatId': currentChatID,
         'LocalHistoryId': currentHistoryId,
@@ -145,19 +156,7 @@ let currentHistoryId = 0;
     if (response.update) {
         currentHistoryId = response.update[0].HistoryId;
     }
-    }
-
-function openMembersList() {
-    document.getElementById("members-list").style.display = "block";
-    document.getElementById("overlay").style.display = "flex";
-
 }
-function closeMembersList() {
+document.addEventListener("DOMContentLoaded", async function() {
-    document.getElementById("members-list").style.display = "none";
+    currentChatID = await getChatID();
-    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,24 +1,59 @@
+let rooms = {};
+let roomToDelete = null;
 let currentRoom = null;
-    let currentHistoryId = 0;
+let currentHistoryId = 0;
 
-    function openModal(roomName) {
+function openRoom(currentRoom) {
-        currentRoom = roomName;
+    alert('Вы вошли в комнату: ' + currentRoom);
-        document.getElementById('passwordModal').style.display = 'block';
+}
+
+function closeAdd() {
+    document.getElementById('add_members').style.display = 'none';
+}
+
+function openAdd() {
+    document.getElementById('add_members').style.display = 'flex';
+}
+
+function openConfirm(roomNickname) {
+    roomToDelete = roomNickname;
+    document.getElementById("delete-chat").style.display = "flex";
+}
+
+function closeConfirm() {
+    roomToDelete = null;
+    document.getElementById("delete-chat").style.display = "none";
+}
+
+function deleteChat() {
+    if (roomToDelete && rooms[roomToDelete]) {
+        delete rooms[roomToDelete];
+        removeRoomFromList(roomToDelete);
+        closeConfirm();
+    } else {
+        alert("Не удалось найти выбранную комнату.");
     }
+}
 
-    function closeModal() {
+function addMember() {
-        document.getElementById('passwordModal').style.display = 'none';
+    const login = document.getElementById('newMemberLogin').value;
+    if (login) {
+        alert(`Участник с никнеймом '${login}' добавлен`);
+        closeAdd();
+    } else {
+        alert('Пожалуйста, введите логин участника');
     }
+}
 
-    function openCreateRoomModal() {
+function openCreateRoomModal() {
     document.getElementById('createRoomModal').style.display = 'block';
-    }
+}
 
-    function closeCreateRoomModal() {
+function closeCreateRoomModal() {
     document.getElementById('createRoomModal').style.display = 'none';
-    }
+}
 
-    async function createRoom() {
+async function createRoom() {
     const errorElement = document.getElementById('error');
     const roomName = document.getElementById('newRoomName').value.trim();
     const roomNickname = document.getElementById('newRoomNickname').value.trim();
@@ -54,6 +89,7 @@ let currentRoom = null;
 
         if (res.status === 0) {
             addRoomToList(roomName, roomNickname);
+            rooms[roomNickname] = true;
             closeCreateRoomModal();
             currentHistoryId = res.update.LocalHistoryId;
             window.location.href = '/chat/' + roomNickname;
@@ -63,11 +99,10 @@ let currentRoom = null;
     } catch (error) {
         alert('Ошибка создания чата: ' + error.message);
     }
-    }
+}
 
-    function addRoomToList(roomName, roomNickname) {
+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();
@@ -75,14 +110,26 @@ let currentRoom = null;
 
     const roomItem = document.createElement('li');
     roomItem.classList.add('room-item');
+
     roomItem.innerHTML = `
         <span class="room-name">${roomName}</span>
+        <button class="delete-chat-button" onclick="openConfirm('${roomNickname}')">Удалить чат</button>
+        <button class="add-members-button" onclick="openAdd()">Добавить участников</button>
         <button class="join-button" onclick="window.location.href = '/chat/${roomNickname}'">Войти</button>
     `;
-        roomList.appendChild(roomItem);
-    }
 
-    async function initializeRoomList() {
+    roomList.appendChild(roomItem);
+}
+
+function removeRoomFromList(roomName, roomNickname) {
+    const roomList = document.querySelector('.room-list');
+    const roomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
+    if (roomItem) {
+        roomList.removeChild(roomItem);
+    }
+}
+
+async function initializeRoomList() {
     try {
         const response = await fetch('/internalapi/getChatList', {
             method: 'POST',
@@ -104,9 +151,10 @@ let currentRoom = null;
     } catch (error) {
         alert('Ошибка загрузки списка чатов: ' + error.message);
     }
-    }
+}
 
-    async function getChatID() {
+
+async function getChatID() {
     const chatNickname = window.location.pathname.split('/').pop();
     const response = await fetch('/internalapi/getChatList', {
         method: 'POST',
@@ -123,6 +171,16 @@ let currentRoom = null;
         }
     }
     return -1;
+}
+window.onclick = function(event) {
+    if (event.target === document.getElementById('createRoomModal')) {
+        closeCreateRoomModal();
     }
+}
 
-    document.addEventListener('DOMContentLoaded', initializeRoomList);
+document.getElementById('newRoomName').addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        createRoom();
+    }
+});
+document.addEventListener('DOMContentLoaded', initializeRoomList);

assets/js/profile.js

@@ -7,4 +7,4 @@ document.getElementById('fileInput').addEventListener('change', function(event)
         };
         reader.readAsDataURL(file);
     }
-    });
+});

assets/js/registration.js

@@ -65,4 +65,4 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
     }
-    });
+});