Skip to content

Add files via upload #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Robot-mitski wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 278 additions & 0 deletions main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deep Tech</title>
<style>
body, html {
height: 100%;
margin: 0;
background-color: white;
font-family: Arial, sans-serif;
color: black;
overflow: hidden;
}
.container {
display: flex;
height: calc(100% - 10%);
max-width: 1200px;
margin: auto;
border-radius: 15px;
}
.sidebar {
width: 12.5%;
height: calc(100% - 25%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 10px;
}
.button {
border: 2px solid black;
color: black;
background: white;
padding: 10px;
cursor: pointer;
text-align: center;
border-radius: 5px;
margin-bottom: 5px;
transition: transform 0.1s; /* Плавный переход */
text-decoration: none; /* Убираем подчеркивание */
display: inline-block; /* Чтобы кнопка вела себя как блок */
}
.button:active {
transform: scale(0.95); /* Уменьшение размера кнопки на 5% */
}
.header {
height: 12.5%;
background-color: white;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
}
.header h1 {
color: #8A2BE2;
font-weight: bold;
margin: 0;
padding-right: 12.5%;
}
.chat-area {
flex-grow: 1;
background-color: white;
border: 2px solid black;
border-radius: 15px;
padding: 10px;
display: flex;
flex-direction: column;
margin-bottom: 10%;
}
.message-input {
background-color: white;
color: black;
border: 2px solid black;
border-radius: 5px;
padding: 10px;
flex-grow: 1;
resize: none;
margin-bottom: 10px;
}
.message {
border: none;
background-color: #8A2BE2;
color: white;
padding: 10px;
margin: 5px 0;
border-radius: 10px;
white-space: pre-wrap;
}
.send-button {
background-color: #8A2BE2;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
transition: transform 0.1s; /* Плавный переход */
}
.send-button:active {
transform: scale(0.95); /* Уменьшение размера кнопки на 5% */
}
.chat-list-container {
border: 2px solid #8A2BE2;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
}
.chat-list {
margin-top: 10px;
color: black;
}
.chat-item {
border: 2px solid #8A2BE2; /* Контур для каждого чата */
border-radius: 10px; /* Закругленные углы */
padding: 10px; /* Отступ внутри элемента */
margin-bottom: 5px; /* Отступ между элементами */
cursor: pointer; /* Указатель на курсор */
}
.telegram-button {
text-decoration: none;
color: white;
background-color: #0088cc;
padding: 10px;
border-radius: 5px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
display: block;
transition: transform 0.1s; /* Плавный переход */
}
.telegram-button:active {
transform: scale(0.95); /* Уменьшение размера кнопки на 5% */
}
.loading {
display: none;
font-size: 14px;
color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header"><h1>Deep Tech</h1></div>
<div class="container">
<div class="sidebar">
<a href="#" class="button" onclick="addChat()">Добавить чат</a>
<a href="https://t.me/EasyDocsDeepTech_bot" class="telegram-button" target="_blank">Telegram bot</a>
<div class="chat-list-container">
<div class="chat-list" id="chatList"></div>
</div>
</div>
<div class="chat-area" id="currentChatArea">
<div id="messages" style="overflow-y: auto; flex-grow: 1; margin-bottom: 10px;"></div>
<div style="display: flex; align-items: center;">
<textarea class="message-input" id="messageInput" placeholder="Напишите сообщение..." onkeypress="checkEnter(event)"></textarea>
<button class="send-button" onclick="sendMessage()"> ↑ </button>
</div>
<div id="loading" class="loading">Ответ обрабатывается...</div>
</div>
</div>

<script>
const messagesContainer = document.getElementById('messages');
const chatList = document.getElementById('chatList');
const currentChatArea = document.getElementById('currentChatArea');
const loadingIndicator = document.getElementById('loading');
let chats = JSON.parse(localStorage.getItem('chats')) || [];

function loadChats() {
chatList.innerHTML = '';
chats.forEach((chat) => {
const chatElement = document.createElement('div');
chatElement.classList.add('chat-item'); // Применяем новый класс
chatElement.textContent = `${chat.messages.length > 0 ? chat.messages[chat.messages.length - 1] : 'Нет сообщений'}`;
chatElement.onclick = () => loadChat(chat.id);
chatList.appendChild(chatElement);
});
}

function loadChat(chatId) {
messagesContainer.innerHTML = '';
const chat = chats.find(c => c.id === chatId);
chat.messages.forEach(message => {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.textContent = message;
messagesContainer.appendChild(messageElement);
});
currentChatArea.scrollTop = messagesContainer.scrollHeight;
}

function addChat() {
// Проверяем, есть ли сообщения в текущем чате
const currentChat = chats[chats.length - 1];
if (currentChat && currentChat.messages.length === 0) {
alert('Невозможно создать новый чат без сообщений в текущем чате.');
return;
}

if (chats.length >= 5) {
chats.shift();
}
const newChat = { id: new Date().getTime(), messages: [] };
chats.push(newChat);
localStorage.setItem('chats', JSON.stringify(chats));
loadChats();
loadChat(newChat.id);
}

async function sendMessage() {
const input = document.getElementById('messageInput');
const messageText = input.value;

if (messageText.trim() !== "") {
const currentChat = chats[chats.length - 1];
currentChat.messages.push(messageText);
localStorage.setItem('chats', JSON.stringify(chats));

// Создание элемента сообщения для отправленного сообщения
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.textContent = messageText;
messagesContainer.appendChild(messageElement);

// Показать индикатор загрузки
loadingIndicator.style.display = 'block';

try {
// Отправка сообщения на сервер
const response = await fetch('/api/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: messageText })
});

if (response.ok) {
const data = await response.json();
const serverMessageElement = document.createElement('div');
serverMessageElement.classList.add('message');
serverMessageElement.textContent = data.reply; // Предполагается, что сервер возвращает поле 'reply'
messagesContainer.appendChild(serverMessageElement);
} else {
console.error('Ошибка при получении ответа от сервера');
}
} catch (error) {
console.error('Ошибка сети:', error);
} finally {
// Скрыть индикатор загрузки
loadingIndicator.style.display = 'none';
}

input.value = '';
messagesContainer.scrollTop = messagesContainer.scrollHeight;
loadChats();
}
}

function checkEnter(event) {
if (event.key === 'Enter') {
event.preventDefault();
sendMessage();
}
}

loadChats();
if (chats.length > 0) {
loadChat(chats[chats.length - 1].id);
}
</script>
</body>
</html>