Spaces:

Timon2414
/

messenger

Running

messenger / index.html

Почему опять нельзя писать другу???? Почему опять ненастоящие чаты??? Мне нужен мессенджер, чтобы реально переписываться с другим пользователем мессенджера, который зарегестрируется в нем, я с ним хочу общаться. Ники сделай, реальный глобальный поиск - Initial Deployment

3c009cb verified 8 months ago

raw

history blame contribute delete

34 kB

	<!DOCTYPE html>
	<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>