collarbone-annihilation/iu9-ca-web-chat
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
yakovlevanton 2024-08-10 06:09:51 +03:00
parent 3a8d1207b1
commit 6b0770844c
9 changed files with 278 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
assets/css/chat.css
View File

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

86
assets/css/list-rooms.css
View File

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

13
assets/css/profile.css
View File

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

18
assets/html/chat.html
View File

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

82
assets/html/list-rooms.html
View File

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

1
assets/html/profile.html
View File

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

15
assets/img/return.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

8
assets/js/chat.js
View File

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

46
assets/js/list-rooms.js
View File

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