Added chat deleting without API

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,10 +200,54 @@ h1 {
     height: 18%;
     position: fixed;
 }
-
+.overlay .delete-chat {
+    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;
+}
+.delete-close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+.delete-chat-header {
+    text-align: center;
+}
+.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;
     float: right;
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
+}

assets/html/list-rooms.html

@@ -46,7 +46,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/js/list-rooms.js

@@ -1,4 +1,5 @@
 let rooms = {};
+let roomToDelete = null;
 
 function openRoom(currentRoom) {
     alert('Вы вошли в комнату: ' + currentRoom);
@@ -12,6 +13,26 @@ function openAdd() {
     document.getElementById('add_members').style.display = 'flex';
 }
 
+function openConfirm(roomName) {
+    roomToDelete = roomName;
+    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 addMember() {
     const login = document.getElementById('newMemberLogin').value;
     if (login) {
@@ -57,6 +78,7 @@ function addRoomToList(roomName) {
 
     roomItem.innerHTML = `
         <span class="room-name">${roomName}</span>
+        <button class="delete-chat-button" onclick="openConfirm('${roomName}')">Удалить чат</button>
         <button class="add-members-button" onclick="openAdd()">Добавить участников</button>
         <button class="join-button" onclick="openRoom('${roomName}')">Войти</button>
     `;
@@ -64,6 +86,14 @@ function addRoomToList(roomName) {
     roomList.appendChild(roomItem);
 }
 
+function removeRoomFromList(roomName) {
+    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);
+    }
+}
+
 function initializeRoomList() {
     Object.keys(rooms).forEach(roomName => {
         addRoomToList(roomName);