Merged with anton_branch
This commit is contained in:
commit
5314ffef1f
|
|
@ -7,19 +7,32 @@
|
||||||
<link rel="stylesheet" href="/assets/css/chat.css">
|
<link rel="stylesheet" href="/assets/css/chat.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="chat-container">
|
<div class="chat-container">
|
||||||
<div class="chat-header">
|
<div class="chat-header">
|
||||||
Веб чат
|
<span class="room-name">Веб чат</span>
|
||||||
|
<button class="members" onclick="openMembersList()">Показать участников</button>
|
||||||
|
</div>
|
||||||
|
<div class="chat-messages" id="chat-messages">
|
||||||
|
<!-- Сообщения чата будут здесь -->
|
||||||
|
</div>
|
||||||
|
<div class="chat-footer">
|
||||||
|
<input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение...">
|
||||||
|
<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()">×</span>
|
||||||
|
<h2 class="all-members">Все участники</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-messages" id="chat-messages">
|
<div class="members-list-body">
|
||||||
<!-- Сообщения чата будут здесь -->
|
<ul id="members-list-body">
|
||||||
</div>
|
<!-- Список участников будет добавлен динамически -->
|
||||||
<div class="chat-footer">
|
</ul>
|
||||||
<input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение...">
|
|
||||||
<button class="chat-send-button" onclick="sendMessage()">Отправить</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<script src="/assets/js/chat.js"></script>
|
<script src="/assets/js/chat.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
65
assets/HypertextPages/list-rooms.html
Normal file
65
assets/HypertextPages/list-rooms.html
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
<!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">
|
||||||
|
</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 id="createRoomModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<span class="close" onclick="closeCreateRoomModal()">×</span>
|
||||||
|
<h2>Создать Комнату</h2>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<input type="text" id="newRoomName" placeholder="Название комнаты">
|
||||||
|
<input type="password" id="newRoomNickname" placeholder="Никнейм комнаты">
|
||||||
|
</div>
|
||||||
|
<div id="error"></div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="join-button" onclick="createRoom()">Создать</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Модальное окно для добавления участников -->
|
||||||
|
<div class="overlay" id="add_members">
|
||||||
|
<div class="add-members">
|
||||||
|
<div class="add-members-header">
|
||||||
|
<span class="close" onclick="closeAdd()">×</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>
|
||||||
|
<div class="overlay" id="delete-chat">
|
||||||
|
<div class="delete-chat">
|
||||||
|
<div class="delete-chat-header">
|
||||||
|
<span class="delete-close" onclick="closeConfirm()">×</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>
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
{% ELDEF main JSON pres %}
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>{% WRITE pres.phr.decl.list-of-chat-rooms %}</title>
|
|
||||||
<link rel="stylesheet" href="/assets/css/list-rooms.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1 style="color: white;">{% WRITE pres.phr.decl.select-chat-room %}</h1>
|
|
||||||
<ul class="room-list">
|
|
||||||
<!-- Здесь будет список комнат -->
|
|
||||||
</ul>
|
|
||||||
<button class="create-room-button" onclick="openCreateRoomModal()">{% WRITE pres.phr.act.create-room %}</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="passwordModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<span class="close" onclick="closeModal()">×</span>
|
|
||||||
<h2>VVedite parol</h2> <!-- Nam ne nuzhen parol ot komnat -->
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<input type="password" id="roomPassword" placeholder="Пароль">
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="join-button" onclick="validatePassword()">{% WRITE pres.phr.act.confirm %}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Модальное окно для создания комнаты -->
|
|
||||||
<div id="createRoomModal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<span class="close" onclick="closeCreateRoomModal()">×</span>
|
|
||||||
<h2>{% WRITE pres.phr.decl.create-room %}</h2>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<input type="text" id="newRoomName" placeholder="{% WRITE pres.phr.decl.name-of-room %}">
|
|
||||||
<input type="password" id="newRoomPassword" placeholder="Пароль"> <!-- Fedya, nam ne nuzhen parol -->
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="join-button" onclick="createRoom()">{% WRITE pres.phr.act.create %}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/assets/js/list-rooms.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% ENDELDEF %}
|
|
||||||
|
|
@ -8,14 +8,15 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<div class="profile-header">
|
<div class="profile-header">
|
||||||
<h1 style="color: white; text-align: center;">Профиль пользователя</h1>
|
<h1 style="color: white; text-align: center;">Профиль пользователя</h1>
|
||||||
|
<a class="return" href="chat.html">Назад</a>
|
||||||
</div>
|
</div>
|
||||||
<form>
|
<form>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br>
|
<img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br>
|
||||||
<input type="file" id="fileInput" style="display:none">
|
<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>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br>
|
<input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br>
|
||||||
|
|
|
||||||
|
|
@ -4,22 +4,22 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Страница Регистрации</title>
|
<title>Страница Регистрации</title>
|
||||||
<link rel="stylesheet" href="assets/css/registration.css">
|
<link rel="stylesheet" href="/assets/css/registration.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<h1 class="hide-cursor no-select">Вход</h1>
|
<h1 class="hide-cursor no-select">Вход</h1>
|
||||||
<form action="assets/html/list-rooms.html" method="post">
|
<form action="assets/html/list-rooms.html" method="post">
|
||||||
<input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
|
<input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
|
||||||
<input type="text" name="login" placeholder="Логин" id="login"><br>
|
<input type="text" name="login" placeholder="Логин" id="login"><br>
|
||||||
<input type="password" name="password" placeholder="Пароль" id="password"><br>
|
<input type="password" name="password" placeholder="Пароль" id="password"><br>
|
||||||
<button type="submit" class="hide-cursor no-select">Зарегистрироваться</button>
|
<button type="submit" class="hide-cursor no-select">Зарегистрироваться</button>
|
||||||
<div id="error"></div>
|
<div id="error"></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="assets/js/registration.js"></script>
|
<script src="assets/js/registration.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -21,13 +21,33 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-header {
|
.chat-header {
|
||||||
background-color: #0088cc;
|
background-color: #007bb5;
|
||||||
color: white;
|
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 {
|
.chat-messages {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|
@ -97,7 +117,86 @@ body {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
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 {
|
.chat-send-button:hover {
|
||||||
background-color: #007bb5;
|
background-color: #007bb5;
|
||||||
}
|
}
|
||||||
|
|
@ -55,7 +55,62 @@ h1 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s ease;
|
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: 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;
|
||||||
|
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 {
|
.join-button:hover {
|
||||||
background-color: #0056b3;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
@ -96,19 +151,6 @@ h1 {
|
||||||
text-align: right;
|
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 {
|
.modal input {
|
||||||
width: 93.5%;
|
width: 93.5%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -134,3 +176,78 @@ h1 {
|
||||||
.create-room-button:hover {
|
.create-room-button:hover {
|
||||||
background-color: #218838;
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -24,6 +24,27 @@ body {
|
||||||
border-color: antiquewhite;
|
border-color: antiquewhite;
|
||||||
background-color: #0088cc;
|
background-color: #0088cc;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.return {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
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: 25px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.return:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #0088cc;
|
||||||
}
|
}
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -45,14 +66,16 @@ form {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.add {
|
.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;
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
.add:hover {
|
||||||
|
background-color: #007bb5;
|
||||||
|
}
|
||||||
.image-button:hover {
|
.image-button:hover {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
@ -95,10 +118,11 @@ form {
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
border-color: #2F4F4F;
|
border-color: #2F4F4F;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
color: white;
|
|
||||||
background-color: #0088cc;
|
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
.save:hover {
|
||||||
|
background-color: #007bb5;
|
||||||
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-63 313 512 640" style="enable-background:new -63 313 512 512;" xml:space="preserve"><g><path d="M163.9,571.5l63.7,47.8l31.9-15.9l63.7,38.2v25.5H132v-63.7L163.9,571.5z"/><path d="M323.3,563.5c0,13.2-10.7,23.9-23.9,23.9c-13.2,0-23.9-10.7-23.9-23.9c0-13.2,10.7-23.9,23.9-23.9 C312.6,539.6,323.3,550.3,323.3,563.5z"/><g><path d="M63,407.2h42.7v170.7H63L63,407.2L63,407.2z"/><path d="M-1,471.2h170.7v42.7H-1V471.2L-1,471.2z"/></g><path d="M355.2,475.9H206.3v31.9h148.9V699h-255v-84.1H68.3V699c0,17.5,14.3,31.9,31.9,31.9h255c17.5,0,31.9-14.3,31.9-31.9V507.7 C387,490.2,372.7,475.9,355.2,475.9z"/></g><text x="-63" y="840" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by VM</text><text x="-63" y="845" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,44 +1,162 @@
|
||||||
function sendMessage() {
|
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;
|
||||||
|
function renderMembersList() {
|
||||||
|
const membersListBody = document.getElementById('members-list-body');
|
||||||
|
membersListBody.innerHTML = '';
|
||||||
|
|
||||||
|
members.forEach((member, index) => {
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteMember(index) {
|
||||||
|
members.splice(index, 1);
|
||||||
|
renderMembersList();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
const chatMessages = document.getElementById('chat-messages');
|
const chatMessages = document.getElementById('chat-messages');
|
||||||
const chatInput = document.getElementById('chat-input');
|
const chatInput = document.getElementById('chat-input');
|
||||||
const message = chatInput.value;
|
const message = chatInput.value;
|
||||||
|
|
||||||
if (message.trim() !== '') {
|
if (message.trim() !== '') {
|
||||||
const messageElement = document.createElement('div');
|
const request = {
|
||||||
messageElement.classList.add('chat-message');
|
'chatId': currentChatID,
|
||||||
|
'LocalHistoryId': currentHistoryId,
|
||||||
|
'content': {
|
||||||
|
'text': message
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const avatarElement = document.createElement('div');
|
const response = await fetch("/internalapi/sendMessage", {
|
||||||
avatarElement.classList.add('avatar');
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(request)
|
||||||
|
});
|
||||||
|
|
||||||
const avatarImage = document.createElement('img');
|
const res = await response.json();
|
||||||
avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album';
|
|
||||||
avatarElement.appendChild(avatarImage);
|
|
||||||
|
|
||||||
const messageContentElement = document.createElement('div');
|
if (res.update) {
|
||||||
messageContentElement.classList.add('message-content');
|
const update = res.update[0];
|
||||||
|
currentHistoryId = update.HistoryId;
|
||||||
|
|
||||||
const usernameElement = document.createElement('div');
|
const messageElement = document.createElement('div');
|
||||||
usernameElement.classList.add('username');
|
messageElement.classList.add('chat-message');
|
||||||
usernameElement.textContent = 'Адель';
|
|
||||||
|
|
||||||
const textElement = document.createElement('div');
|
const avatarElement = document.createElement('div');
|
||||||
textElement.classList.add('text');
|
avatarElement.classList.add('avatar');
|
||||||
textElement.textContent = message;
|
|
||||||
|
|
||||||
messageContentElement.appendChild(usernameElement);
|
const avatarImage = document.createElement('img');
|
||||||
messageContentElement.appendChild(textElement);
|
avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album';
|
||||||
|
avatarElement.appendChild(avatarImage);
|
||||||
|
|
||||||
messageElement.appendChild(avatarElement);
|
const messageContentElement = document.createElement('div');
|
||||||
messageElement.appendChild(messageContentElement);
|
messageContentElement.classList.add('message-content');
|
||||||
|
|
||||||
chatMessages.appendChild(messageElement);
|
const usernameElement = document.createElement('div');
|
||||||
|
usernameElement.classList.add('username');
|
||||||
|
usernameElement.textContent = await getUserName();
|
||||||
|
|
||||||
chatInput.value = '';
|
const textElement = document.createElement('div');
|
||||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
textElement.classList.add('text');
|
||||||
|
textElement.textContent = message;
|
||||||
|
|
||||||
|
messageContentElement.appendChild(usernameElement);
|
||||||
|
messageContentElement.appendChild(textElement);
|
||||||
|
|
||||||
|
messageElement.appendChild(avatarElement);
|
||||||
|
messageElement.appendChild(messageContentElement);
|
||||||
|
|
||||||
|
chatMessages.appendChild(messageElement);
|
||||||
|
|
||||||
|
chatInput.value = '';
|
||||||
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) {
|
document.getElementById('chat-input').addEventListener('keydown', function (event) {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
sendMessage();
|
sendMessage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
async function getUserID() {
|
||||||
|
const response = await fetch('/internalapi/mirror', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({})
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await response.json();
|
||||||
|
return res.id;
|
||||||
|
}
|
||||||
|
async function getChatID() {
|
||||||
|
const chatNickname = window.location.pathname.split('/').pop();
|
||||||
|
const response = await fetch('/internalapi/getChatList', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({})
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await response.json();
|
||||||
|
for (const chat of res.chats) {
|
||||||
|
if (chat.content.nickname === chatNickname) {
|
||||||
|
return chat.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
async function editMessage(new_message) {
|
||||||
|
const req = {
|
||||||
|
'chatId': currentChatID,
|
||||||
|
'LocalHistoryId': currentHistoryId,
|
||||||
|
'id': getUserID(),
|
||||||
|
'content': {
|
||||||
|
'text': new_message
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const res = await fetch('/internalapi/editMessage', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(req)
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await res.json();
|
||||||
|
if (response.update) {
|
||||||
|
currentHistoryId = response.update[0].HistoryId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener("DOMContentLoaded", async function() {
|
||||||
|
currentChatID = await getChatID();
|
||||||
|
});
|
||||||
|
|
@ -1,21 +1,47 @@
|
||||||
let rooms = {};
|
let rooms = {};
|
||||||
|
let roomToDelete = null;
|
||||||
|
let currentRoom = null;
|
||||||
|
let currentHistoryId = 0;
|
||||||
|
|
||||||
function openModal(roomName) {
|
function openRoom(currentRoom) {
|
||||||
currentRoom = roomName;
|
alert('Вы вошли в комнату: ' + currentRoom);
|
||||||
document.getElementById('passwordModal').style.display = 'block';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeModal() {
|
function closeAdd() {
|
||||||
document.getElementById('passwordModal').style.display = 'none';
|
document.getElementById('add_members').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
function validatePassword() {
|
function openAdd() {
|
||||||
const enteredPassword = document.getElementById('roomPassword').value;
|
document.getElementById('add_members').style.display = 'flex';
|
||||||
if (enteredPassword === rooms[currentRoom]) {
|
}
|
||||||
alert('Вы вошли в комнату: ' + currentRoom);
|
|
||||||
closeModal();
|
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 {
|
} else {
|
||||||
alert('Неверный пароль. Попробуйте снова.');
|
alert("Не удалось найти выбранную комнату.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMember() {
|
||||||
|
const login = document.getElementById('newMemberLogin').value;
|
||||||
|
if (login) {
|
||||||
|
alert(`Участник с никнеймом '${login}' добавлен`);
|
||||||
|
closeAdd();
|
||||||
|
} else {
|
||||||
|
alert('Пожалуйста, введите логин участника');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -27,28 +53,56 @@ function closeCreateRoomModal() {
|
||||||
document.getElementById('createRoomModal').style.display = 'none';
|
document.getElementById('createRoomModal').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
function createRoom() {
|
async function createRoom() {
|
||||||
|
const errorElement = document.getElementById('error');
|
||||||
const roomName = document.getElementById('newRoomName').value.trim();
|
const roomName = document.getElementById('newRoomName').value.trim();
|
||||||
const roomPassword = document.getElementById('newRoomPassword').value.trim();
|
const roomNickname = document.getElementById('newRoomNickname').value.trim();
|
||||||
|
|
||||||
if (roomName === '' || roomPassword === '') {
|
|
||||||
alert('Пожалуйста, заполните все поля.');
|
errorElement.style.display = 'none';
|
||||||
|
errorElement.textContent = '';
|
||||||
|
|
||||||
|
if (roomName === '' || roomNickname === '') {
|
||||||
|
errorElement.textContent = 'Пожалуйста, заполните все поля';
|
||||||
|
errorElement.style.display = 'block';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (rooms[roomName]) {
|
const request = {
|
||||||
alert('Комната с таким названием уже существует.');
|
LocalHistoryId: currentHistoryId,
|
||||||
return;
|
content: {
|
||||||
}
|
name: roomName,
|
||||||
|
nickname: roomNickname
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
rooms[roomName] = roomPassword;
|
try {
|
||||||
addRoomToList(roomName);
|
const response = await fetch('/internalapi/createChat', {
|
||||||
closeCreateRoomModal();
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(request)
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await response.json();
|
||||||
|
|
||||||
|
if (res.status === 0) {
|
||||||
|
addRoomToList(roomName, roomNickname);
|
||||||
|
rooms[roomNickname] = true;
|
||||||
|
closeCreateRoomModal();
|
||||||
|
currentHistoryId = res.update.LocalHistoryId;
|
||||||
|
window.location.href = '/chat/' + roomNickname;
|
||||||
|
} else {
|
||||||
|
throw new Error(res.error || 'Ошибка');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка создания чата: ' + error.message);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRoomToList(roomName) {
|
function addRoomToList(roomName) {
|
||||||
const roomList = document.querySelector('.room-list');
|
const roomList = document.querySelector('.room-list');
|
||||||
|
|
||||||
const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
|
const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
|
||||||
if (existingRoomItem) {
|
if (existingRoomItem) {
|
||||||
existingRoomItem.remove();
|
existingRoomItem.remove();
|
||||||
|
|
@ -59,25 +113,74 @@ function addRoomToList(roomName) {
|
||||||
|
|
||||||
roomItem.innerHTML = `
|
roomItem.innerHTML = `
|
||||||
<span class="room-name">${roomName}</span>
|
<span class="room-name">${roomName}</span>
|
||||||
<button class="join-button" onclick="openModal('${roomName}')">Войти</button>
|
<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);
|
roomList.appendChild(roomItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
function initializeRoomList() {
|
function removeRoomFromList(roomName, roomNickname) {
|
||||||
Object.keys(rooms).forEach(roomName => {
|
const roomList = document.querySelector('.room-list');
|
||||||
addRoomToList(roomName);
|
const roomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
|
||||||
});
|
if (roomItem) {
|
||||||
|
roomList.removeChild(roomItem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initializeRoomList();
|
async function initializeRoomList() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/internalapi/getChatList', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({})
|
||||||
|
});
|
||||||
|
|
||||||
window.onclick = function(event) {
|
const res = await response.json();
|
||||||
if (event.target === document.getElementById('passwordModal')) {
|
|
||||||
closeModal();
|
if (res.status === 0) {
|
||||||
|
res.chats.forEach(chat => {
|
||||||
|
addRoomToList(chat.content.name, chat.content.nickname);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
throw new Error(res.error || 'Неизвестная ошибка');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
alert('Ошибка загрузки списка чатов: ' + error.message);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function getChatID() {
|
||||||
|
const chatNickname = window.location.pathname.split('/').pop();
|
||||||
|
const response = await fetch('/internalapi/getChatList', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({})
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await response.json();
|
||||||
|
for (const chat of res.chats) {
|
||||||
|
if (chat.content.nickname === chatNickname) {
|
||||||
|
return chat.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
window.onclick = function(event) {
|
||||||
if (event.target === document.getElementById('createRoomModal')) {
|
if (event.target === document.getElementById('createRoomModal')) {
|
||||||
closeCreateRoomModal();
|
closeCreateRoomModal();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.getElementById('newRoomName').addEventListener('keydown', function(event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
createRoom();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('DOMContentLoaded', initializeRoomList);
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
document.getElementById('fileInput').addEventListener('change', function(event) {
|
document.getElementById('fileInput').addEventListener('change', function(event) {
|
||||||
const file = event.target.files[0];
|
const file = event.target.files[0];
|
||||||
if (file) {
|
if (file) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = function(e) {
|
reader.onload = function(e) {
|
||||||
document.getElementById('avatar').src = e.target.result;
|
document.getElementById('avatar').src = e.target.result;
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1,50 +1,68 @@
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const form = document.querySelector('form');
|
const form = document.querySelector('form');
|
||||||
const submitButton = form.querySelector('button[type="submit"]');
|
const submitButton = form.querySelector('button[type="submit"]');
|
||||||
const errorElement = document.getElementById('error');
|
const errorElement = document.getElementById('error');
|
||||||
|
|
||||||
form.addEventListener('keydown', function(event) {
|
form.addEventListener('keydown', function(event) {
|
||||||
const activeElement = document.activeElement;
|
const activeElement = document.activeElement;
|
||||||
const formElements = Array.from(form.elements);
|
const formElements = Array.from(form.elements);
|
||||||
const currentIndex = formElements.indexOf(activeElement);
|
const currentIndex = formElements.indexOf(activeElement);
|
||||||
|
|
||||||
if (activeElement.tagName === 'INPUT') {
|
if (activeElement.tagName === 'INPUT') {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (currentIndex === formElements.length - 1) {
|
if (currentIndex === formElements.length - 1) {
|
||||||
submitButton.focus();
|
submitButton.focus();
|
||||||
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
|
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
|
||||||
formElements[currentIndex + 1].focus();
|
formElements[currentIndex + 1].focus();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
submitButton.addEventListener('focus', function() {
|
|
||||||
submitButton.classList.add('focus-visible');
|
|
||||||
});
|
|
||||||
|
|
||||||
submitButton.addEventListener('blur', function() {
|
|
||||||
submitButton.classList.remove('focus-visible');
|
|
||||||
});
|
|
||||||
|
|
||||||
form.addEventListener('submit', function(event) {
|
|
||||||
if (!validateForm()) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function validateForm() {
|
|
||||||
const username = document.getElementById('username').value.trim();
|
|
||||||
const login = document.getElementById('login').value.trim();
|
|
||||||
const password = document.getElementById('password').value.trim();
|
|
||||||
|
|
||||||
if (username === '' || login === '' || password === '') {
|
|
||||||
errorElement.textContent = 'Пожалуйста, заполните все поля';
|
|
||||||
errorElement.style.display = 'block';
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
submitButton.addEventListener('focus', function() {
|
||||||
|
submitButton.classList.add('focus-visible');
|
||||||
|
});
|
||||||
|
|
||||||
|
submitButton.addEventListener('blur', function() {
|
||||||
|
submitButton.classList.remove('focus-visible');
|
||||||
|
});
|
||||||
|
|
||||||
|
form.addEventListener('submit', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
validateForm();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function validateForm() {
|
||||||
|
const name = document.getElementById('name').value.trim();
|
||||||
|
const nickname = document.getElementById('nickname').value.trim();
|
||||||
|
|
||||||
|
if (name === '' || nickname === '') {
|
||||||
|
errorElement.textContent = 'Пожалуйста, заполните все поля';
|
||||||
|
errorElement.style.display = 'block';
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
// Отправка данных для регистрации
|
||||||
|
let response = await fetch('/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({name, nickname})
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.status === 0) {
|
||||||
|
window.location.href = '/';
|
||||||
|
} else {
|
||||||
|
throw Error(result.error);
|
||||||
|
}
|
||||||
|
} catch(error) {
|
||||||
|
errorElement.textContent = 'Попробуйте еще раз';
|
||||||
|
errorElement.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ namespace iu9cawebchat {
|
||||||
een9::StaticAssetManagerSlaveModule samI;
|
een9::StaticAssetManagerSlaveModule samI;
|
||||||
samI.update({
|
samI.update({
|
||||||
een9::StaticAssetManagerRule{assets_dir + "/css", "/assets/css", {{".css", "text/css"}} },
|
een9::StaticAssetManagerRule{assets_dir + "/css", "/assets/css", {{".css", "text/css"}} },
|
||||||
een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/js"}} },
|
een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/javascript"}} },
|
||||||
een9::StaticAssetManagerRule{assets_dir + "/img", "/assets/img", {
|
een9::StaticAssetManagerRule{assets_dir + "/img", "/assets/img", {
|
||||||
{".jpg", "image/jpg"}, {".png", "image/png"}, {".svg", "image/svg+xml"}
|
{".jpg", "image/jpg"}, {".png", "image/png"}, {".svg", "image/svg+xml"}
|
||||||
} },
|
} },
|
||||||
|
|
@ -70,7 +70,7 @@ namespace iu9cawebchat {
|
||||||
return een9::form_http_server_response_200("text/html", page);
|
return een9::form_http_server_response_200("text/html", page);
|
||||||
};
|
};
|
||||||
if (req.uri_path == "/" || req.uri_path == "/list-rooms") {
|
if (req.uri_path == "/" || req.uri_path == "/list-rooms") {
|
||||||
return rteee("list-rooms", true);
|
return rteee("list-rooms", false);
|
||||||
}
|
}
|
||||||
if (req.uri_path == "/chat") {
|
if (req.uri_path == "/chat") {
|
||||||
return rteee("chat", false);
|
return rteee("chat", false);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user