diff --git a/assets/css/list-rooms.css b/assets/css/list-rooms.css index 3d87cf8..4603a16 100644 --- a/assets/css/list-rooms.css +++ b/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; +} diff --git a/assets/html/list-rooms.html b/assets/html/list-rooms.html index e1dbf92..0067744 100644 --- a/assets/html/list-rooms.html +++ b/assets/html/list-rooms.html @@ -46,7 +46,18 @@ - +
+
+
+ × +

Вы уверены, что хотите удалить чат?

+
+
+ + +
+
+
diff --git a/assets/js/list-rooms.js b/assets/js/list-rooms.js index e1b2745..97f62f3 100644 --- a/assets/js/list-rooms.js +++ b/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 = ` ${roomName} + `; @@ -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);