Download index.html from Timon2414/messenger: direct link, hf CLI and curl.
- Browser
- Download file 34 kB
-
https://huggingface.co/spaces/Timon2414/messenger/resolve/main/index.html
- Command line
-
hf download hf://spaces/Timon2414/messenger/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Timon2414/messenger/resolve/main/index.html
34 kB
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Real Messenger - Настоящий мессенджер</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <style> | |
| /* Кастомные стили */ | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator:after { | |
| content: '...'; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: '.'; } | |
| 33% { content: '..'; } | |
| 66% { content: '...'; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Модальное окно авторизации --> | |
| <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-bold text-lg">Вход / Регистрация</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Логин</label> | |
| <input type="text" id="auth-username" class="w-full px-4 py-2 border rounded"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-1">Пароль</label> | |
| <input type="password" id="auth-password" class="w-full px-4 py-2 border rounded"> | |
| </div> | |
| <div class="mb-4 hidden" id="auth-name-field"> | |
| <label class="block text-sm font-medium mb-1">Ваше имя</label> | |
| <input type="text" id="auth-name" class="w-full px-4 py-2 border rounded"> | |
| </div> | |
| <div class="text-red-500 text-sm mb-4 hidden" id="auth-error"></div> | |
| </div> | |
| <div class="p-4 border-t flex justify-between"> | |
| <button id="auth-toggle" class="text-purple-600 hover:underline">Создать аккаунт</button> | |
| <div> | |
| <button id="auth-cancel" class="px-4 py-2 bg-gray-200 rounded mr-2 hover:bg-gray-300">Отмена</button> | |
| <button id="auth-submit" class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700">Войти</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Главный контейнер --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Боковая панель --> | |
| <div class="w-20 md:w-80 bg-white shadow-lg flex flex-col"> | |
| <!-- Заголовок --> | |
| <div class="p-4 gradient-bg text-white flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-yellow-300 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold hidden md:block">Quantum</span> | |
| </div> | |
| <button id="new-chat-btn" class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <!-- Поиск пользователей --> | |
| <div class="p-3 border-b"> | |
| <div class="relative"> | |
| <input type="text" id="user-search" placeholder="Найти пользователя..." | |
| class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div id="search-results" class="absolute z-10 mt-1 w-full md:w-80 bg-white shadow-lg rounded-md hidden"> | |
| <!-- Результаты поиска будут здесь --> | |
| </div> | |
| </div> | |
| <!-- Список чатов --> | |
| <div class="flex-1 overflow-y-auto scrollbar-hide" id="chat-list"> | |
| <!-- Чат будет добавляться динамически --> | |
| </div> | |
| <!-- Профиль пользователя --> | |
| <div class="p-3 border-t flex items-center justify-between bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold"> | |
| U | |
| </div> | |
| <div class="ml-3 hidden md:block"> | |
| <div class="font-medium">Пользователь</div> | |
| <div class="text-xs text-gray-500">Онлайн</div> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Основное содержимое --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Заголовок чата --> | |
| <div class="p-4 border-b flex items-center justify-between bg-white"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold"> | |
| М | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Максим</div> | |
| <div class="text-xs text-gray-500" id="typing-status">Онлайн</div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-video"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-info-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Область сообщений --> | |
| <div class="flex-1 overflow-y-auto p-4 bg-gray-50" id="message-area"> | |
| <!-- Сообщения будут добавляться динамически --> | |
| <div class="text-center text-gray-500 text-sm py-10"> | |
| Начните новый чат или выберите существующий | |
| </div> | |
| </div> | |
| <!-- Панель ввода сообщения --> | |
| <div class="p-3 border-t bg-white"> | |
| <!-- Инструменты --> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex space-x-3"> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-gift"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="p-2 text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-magic"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Поле ввода --> | |
| <div class="relative"> | |
| <textarea id="message-input" rows="1" placeholder="Напишите сообщение..." | |
| class="w-full pl-4 pr-12 py-3 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none max-h-32"></textarea> | |
| <button id="send-btn" class="absolute right-3 bottom-3 p-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <!-- Дополнительные функции --> | |
| <div class="mt-2 flex justify-between items-center text-xs text-gray-500"> | |
| <div> | |
| <button class="hover:text-purple-600 mr-3"> | |
| <i class="fas fa-smile"></i> Эмодзи | |
| </button> | |
| <button class="hover:text-purple-600"> | |
| <i class="fas fa-keyboard"></i> Голосовой ввод | |
| </button> | |
| </div> | |
| <div> | |
| <span class="mr-2">Шифрование E2E</span> | |
| <i class="fas fa-lock text-green-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Правая панель (скрыта на мобильных) --> | |
| <div class="hidden lg:block w-80 bg-white border-l"> | |
| <!-- Заголовок --> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-bold text-lg">Информация о чате</h3> | |
| </div> | |
| <!-- Информация о пользователе --> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-20 h-20 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-3xl mb-3"> | |
| М | |
| </div> | |
| <h4 class="font-bold text-lg">Максим</h4> | |
| <p class="text-sm text-gray-500 mb-3">Онлайн</p> | |
| <button class="px-4 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition text-sm"> | |
| Профиль | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Медиафайлы --> | |
| <div class="p-4 border-b"> | |
| <h4 class="font-bold mb-3">Медиафайлы</h4> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| <div class="aspect-square bg-gray-200 rounded"></div> | |
| </div> | |
| <button class="mt-3 text-sm text-purple-600 hover:underline">Показать все</button> | |
| </div> | |
| <!-- Дополнительные функции --> | |
| <div class="p-4"> | |
| <h4 class="font-bold mb-3">Функции</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full flex items-center p-2 hover:bg-gray-100 rounded transition"> | |
| <i class="fas fa-users mr-3 text-purple-600"></i> | |
| <span>Создать группу</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 hover:bg-gray-100 rounded transition"> | |
| <i class="fas fa-star mr-3 text-purple-600"></i> | |
| <span>Избранные сообщения</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 hover:bg-gray-100 rounded transition"> | |
| <i class="fas fa-moon mr-3 text-purple-600"></i> | |
| <span>Темный режим</span> | |
| </button> | |
| <button class="w-full flex items-center p-2 hover:bg-gray-100 rounded transition"> | |
| <i class="fas fa-bell-slash mr-3 text-purple-600"></i> | |
| <span>Отключить уведомления</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Модальное окно нового чата --> | |
| <div id="new-chat-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-white rounded-lg w-full max-w-md mx-4"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">Новый чат</h3> | |
| <button id="close-modal" class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <input type="text" placeholder="Поиск контактов..." | |
| class="w-full px-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 mb-4"> | |
| <div class="max-h-96 overflow-y-auto"> | |
| <!-- Контакты будут добавляться динамически --> | |
| <div class="p-3 hover:bg-gray-100 rounded cursor-pointer flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3"> | |
| А | |
| </div> | |
| <div> | |
| <div class="font-medium">Алексей</div> | |
| <div class="text-xs text-gray-500">Онлайн</div> | |
| </div> | |
| </div> | |
| <div class="p-3 hover:bg-gray-100 rounded cursor-pointer flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-bold mr-3"> | |
| М | |
| </div> | |
| <div> | |
| <div class="font-medium">Мария</div> | |
| <div class="text-xs text-gray-500">Был(а) 5 мин назад</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t flex justify-end"> | |
| <button class="px-4 py-2 bg-gray-200 rounded mr-2 hover:bg-gray-300">Отмена</button> | |
| <button class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700">Создать</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Глобальные переменные | |
| let currentUser = null; | |
| let currentChat = null; | |
| let users = {}; | |
| let socket = null; | |
| // Инициализация приложения | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Показать модальное окно авторизации | |
| document.getElementById('auth-modal').classList.remove('hidden'); | |
| // Обработчики авторизации | |
| document.getElementById('auth-toggle').addEventListener('click', function() { | |
| const nameField = document.getElementById('auth-name-field'); | |
| const isRegister = nameField.classList.contains('hidden'); | |
| nameField.classList.toggle('hidden', !isRegister); | |
| this.textContent = isRegister ? 'Уже есть аккаунт' : 'Создать аккаунт'; | |
| document.getElementById('auth-submit').textContent = isRegister ? 'Зарегистрироваться' : 'Войти'; | |
| }); | |
| document.getElementById('auth-submit').addEventListener('click', authSubmit); | |
| document.getElementById('auth-cancel').addEventListener('click', function() { | |
| document.getElementById('auth-modal').classList.add('hidden'); | |
| }); | |
| // Поиск пользователей | |
| document.getElementById('user-search').addEventListener('input', function() { | |
| const query = this.value.trim(); | |
| if (query.length > 1) { | |
| searchUsers(query); | |
| } else { | |
| document.getElementById('search-results').classList.add('hidden'); | |
| } | |
| }); | |
| // Элементы интерфейса | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const messageArea = document.getElementById('message-area'); | |
| const chatList = document.getElementById('chat-list'); | |
| const newChatBtn = document.getElementById('new-chat-btn'); | |
| const newChatModal = document.getElementById('new-chat-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const typingStatus = document.getElementById('typing-status'); | |
| // Авторазмер текстового поля | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Отправка сообщения | |
| function sendMessage() { | |
| const text = messageInput.value.trim(); | |
| if (text) { | |
| // Добавление сообщения в чат | |
| addMessage('outgoing', text); | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| // Уведомление о доставке | |
| setTimeout(() => { | |
| const messageDivs = messageArea.querySelectorAll('.flex.justify-end'); | |
| const lastMessage = messageDivs[messageDivs.length - 1]; | |
| const checkIcon = lastMessage.querySelector('.fa-check'); | |
| if (checkIcon) { | |
| checkIcon.classList.add('fa-check-double'); | |
| checkIcon.classList.add('text-blue-300'); | |
| } | |
| }, 1500); | |
| } | |
| } | |
| // Добавление сообщения в чат | |
| function addMessage(type, text) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex mb-4 message-animation ${type === 'outgoing' ? 'justify-end' : 'justify-start'}`; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-xs md:max-w-md lg:max-w-lg rounded-lg px-4 py-2 ${type === 'outgoing' ? 'bg-purple-600 text-white' : 'bg-white border'}"> | |
| <div class="text-sm">${text}</div> | |
| <div class="text-right mt-1"> | |
| <span class="text-xs ${type === 'outgoing' ? 'text-purple-200' : 'text-gray-500'}">${formatTime()}</span> | |
| ${type === 'outgoing' ? '<i class="fas fa-check ml-1 text-xs text-purple-200"></i>' : ''} | |
| </div> | |
| </div> | |
| `; | |
| messageArea.appendChild(messageDiv); | |
| messageArea.scrollTop = messageArea.scrollHeight; | |
| } | |
| // Форматирование времени | |
| function formatTime() { | |
| const now = new Date(); | |
| return now.getHours().toString().padStart(2, '0') + ':' + | |
| now.getMinutes().toString().padStart(2, '0'); | |
| } | |
| // Добавление чата в список | |
| function addChat(name, lastMessage, time, unread) { | |
| const chatDiv = document.createElement('div'); | |
| chatDiv.className = 'p-3 border-b hover:bg-gray-50 cursor-pointer flex items-center'; | |
| chatDiv.innerHTML = ` | |
| <div class="w-10 h-10 rounded-full bg-${getRandomColor()}-500 flex items-center justify-center text-white font-bold mr-3"> | |
| ${name.charAt(0)} | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="font-medium truncate">${name}</div> | |
| <div class="text-xs text-gray-500 truncate">${lastMessage}</div> | |
| </div> | |
| <div class="ml-2 flex flex-col items-end"> | |
| <span class="text-xs text-gray-500">${time}</span> | |
| ${unread ? '<span class="mt-1 w-5 h-5 bg-purple-600 text-white text-xs rounded-full flex items-center justify-center">'+unread+'</span>' : ''} | |
| </div> | |
| `; | |
| chatList.appendChild(chatDiv); | |
| } | |
| // Генерация случайного цвета | |
| function getRandomColor() { | |
| const colors = ['purple', 'blue', 'green', 'red', 'yellow', 'indigo', 'pink']; | |
| return colors[Math.floor(Math.random() * colors.length)]; | |
| } | |
| // Начальный чат с другом | |
| addChat('Максим', 'Начните общение', 'только что', 0); | |
| // Обработчики событий | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| newChatBtn.addEventListener('click', function() { | |
| newChatModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', function() { | |
| newChatModal.classList.add('hidden'); | |
| }); | |
| // Клик по пустому месту закрывает модальное окно | |
| newChatModal.addEventListener('click', function(e) { | |
| if (e.target === newChatModal) { | |
| newChatModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Демонстрация функций | |
| setTimeout(() => { | |
| // Добавляем демонстрационное сообщение | |
| addMessage('incoming', 'Привет! Добро пожаловать в Quantum Messenger - самый современный мессенджер!'); | |
| // Показываем статус "печатает" | |
| setTimeout(() => { | |
| typingStatus.textContent = 'Дмитрий печатает...'; | |
| typingStatus.classList.add('typing-indicator'); | |
| setTimeout(() => { | |
| typingStatus.textContent = 'Онлайн'; | |
| typingStatus.classList.remove('typing-indicator'); | |
| addMessage('incoming', 'Здесь ты можешь отправлять текстовые сообщения, фото, видео, голосовые и многое другое!'); | |
| }, 2000); | |
| }, 1500); | |
| }, 1000); | |
| // Подключение к WebSocket | |
| function connectWebSocket() { | |
| socket = new WebSocket('wss://your-server.com/ws'); | |
| socket.onopen = function() { | |
| console.log('WebSocket connected'); | |
| // Отправляем данные аутентификации | |
| socket.send(JSON.stringify({ | |
| type: 'auth', | |
| token: localStorage.getItem('messenger_token') | |
| })); | |
| }; | |
| socket.onmessage = function(event) { | |
| const message = JSON.parse(event.data); | |
| handleSocketMessage(message); | |
| }; | |
| socket.onclose = function() { | |
| console.log('WebSocket disconnected'); | |
| setTimeout(connectWebSocket, 5000); // Переподключение через 5 сек | |
| }; | |
| } | |
| // Обработка сообщений WebSocket | |
| function handleSocketMessage(message) { | |
| switch(message.type) { | |
| case 'message': | |
| if (message.chatId === currentChat?.id) { | |
| addMessage('incoming', message.text, message.sender); | |
| } | |
| break; | |
| case 'user_status': | |
| updateUserStatus(message.userId, message.status); | |
| break; | |
| case 'typing': | |
| if (message.chatId === currentChat?.id) { | |
| showTypingIndicator(message.userId); | |
| } | |
| break; | |
| } | |
| } | |
| // Авторизация/регистрация | |
| async function authSubmit() { | |
| const username = document.getElementById('auth-username').value; | |
| const password = document.getElementById('auth-password').value; | |
| const isRegister = !document.getElementById('auth-name-field').classList.contains('hidden'); | |
| const name = isRegister ? document.getElementById('auth-name').value : ''; | |
| try { | |
| const response = await axios.post(isRegister ? '/api/register' : '/api/login', { | |
| username, | |
| password, | |
| name | |
| }); | |
| localStorage.setItem('messenger_token', response.data.token); | |
| currentUser = response.data.user; | |
| document.getElementById('auth-modal').classList.add('hidden'); | |
| connectWebSocket(); | |
| loadUserData(); | |
| } catch (error) { | |
| document.getElementById('auth-error').textContent = error.response?.data?.message || 'Ошибка'; | |
| document.getElementById('auth-error').classList.remove('hidden'); | |
| } | |
| } | |
| // Поиск пользователей | |
| async function searchUsers(query) { | |
| try { | |
| const response = await axios.get(`/api/users/search?q=${query}`); | |
| const results = document.getElementById('search-results'); | |
| results.innerHTML = ''; | |
| if (response.data.length > 0) { | |
| response.data.forEach(user => { | |
| const userDiv = document.createElement('div'); | |
| userDiv.className = 'p-3 hover:bg-gray-100 cursor-pointer flex items-center'; | |
| userDiv.innerHTML = ` | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mr-3"> | |
| ${user.name.charAt(0)} | |
| </div> | |
| <div> | |
| <div class="font-medium">${user.name}</div> | |
| <div class="text-xs text-gray-500">@${user.username}</div> | |
| </div> | |
| `; | |
| userDiv.addEventListener('click', () => startChat(user)); | |
| results.appendChild(userDiv); | |
| }); | |
| results.classList.remove('hidden'); | |
| } else { | |
| results.innerHTML = '<div class="p-3 text-gray-500">Ничего не найдено</div>'; | |
| results.classList.remove('hidden'); | |
| } | |
| } catch (error) { | |
| console.error('Search error:', error); | |
| } | |
| } | |
| // Начать новый чат | |
| function startChat(user) { | |
| currentChat = { | |
| id: generateChatId(currentUser.id, user.id), | |
| user: user | |
| }; | |
| document.getElementById('search-results').classList.add('hidden'); | |
| document.getElementById('user-search').value = ''; | |
| loadChatMessages(); | |
| } | |
| // Генерация ID чата | |
| function generateChatId(userId1, userId2) { | |
| return [userId1, userId2].sort().join('_'); | |
| } | |
| // Загрузка сообщений чата | |
| async function loadChatMessages() { | |
| try { | |
| const response = await axios.get(`/api/messages?chatId=${currentChat.id}`); | |
| const messageArea = document.getElementById('message-area'); | |
| messageArea.innerHTML = ''; | |
| response.data.forEach(msg => { | |
| const type = msg.senderId === currentUser.id ? 'outgoing' : 'incoming'; | |
| addMessage(type, msg.text, msg.sender); | |
| }); | |
| } catch (error) { | |
| console.error('Error loading messages:', error); | |
| } | |
| } | |
| // Отправка сообщения | |
| async function sendMessage() { | |
| const text = document.getElementById('message-input').value.trim(); | |
| if (text && currentChat) { | |
| try { | |
| await axios.post('/api/messages', { | |
| chatId: currentChat.id, | |
| text: text, | |
| recipientId: currentChat.user.id | |
| }); | |
| // Отправка через WebSocket | |
| if (socket) { | |
| socket.send(JSON.stringify({ | |
| type: 'message', | |
| chatId: currentChat.id, | |
| text: text, | |
| recipientId: currentChat.user.id | |
| })); | |
| } | |
| addMessage('outgoing', text, currentUser); | |
| document.getElementById('message-input').value = ''; | |
| } catch (error) { | |
| console.error('Error sending message:', error); | |
| } | |
| } | |
| } | |
| // Загрузка данных пользователя | |
| async function loadUserData() { | |
| try { | |
| const response = await axios.get('/api/user'); | |
| currentUser = response.data; | |
| // Обновление UI с данными пользователя | |
| } catch (error) { | |
| console.error('Error loading user data:', error); | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Timon2414/messenger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |