<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<!-- Import Google Fonts: Permanent Marker and Montserrat for the logo -->
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Montserrat:wght@700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message-bubble {
animation: fadeIn 0.3s ease-out;
}
/* Hide scrollbar but keep functionality */
#messages::-webkit-scrollbar, #user-list::-webkit-scrollbar {
display: none;
}
#messages, #user-list {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Mobile layout */
@media (max-width: 1023px) {
#chat-container {
min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
margin-top: env(safe-area-inset-top);
margin-bottom: env(safe-area-inset-bottom);
border-radius: 0;
}
#chat-area {
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
#user-list {
max-height: 150px;
flex-shrink: 0;
}
}
/* Logo styling */
.app-name-vibe {
font-family: 'Permanent Marker', cursive;
font-size: 100px;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.app-name-chat {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 700;
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-start pt-4 md:pt-8">
<!-- VibeChat logo at the top center with mixed fonts -->
<div class="w-full text-center mb-4 md:mb-6">
<h1 class="inline-flex items-baseline">
<span class="app-name-vibe">Vibechat</span>
</h1>
</div>
{% if is_index %}
<div id="create-channel-form" class="bg-white rounded-2xl shadow-lg p-6 w-full max-w-md m-4">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Create New Channel</h2>
<div id="error-create" class="text-red-500 text-sm mb-4"></div>
<input type="text" id="channel-name-create" placeholder="Channel name" class="w-full p-3 mb-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="password" id="channel-password" placeholder="Password (optional)" class="w-full p-3 mb-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button onclick="createChannel()" class="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition">Create Channel</button>
</div>
{% else %}
<div id="join-form" class="bg-white rounded-2xl shadow-lg p-6 w-full max-w-md m-4">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Join Channel: {{ channel }}</h2>
<div id="error-join" class="text-red-500 text-sm mb-4"></div>
<input type="text" id="username" placeholder="Your username" class="w-full p-3 mb-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="password" id="password" placeholder="Channel password (if required)" class="w-full p-3 mb-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button onclick="joinChannel()" class="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition">Join</button>
</div>
<div id="chat-container" style="display: none;" class="bg-white shadow-lg w-full flex flex-col lg:flex-row h-[calc(100vh-2rem)] md:rounded-2xl">
<div id="chat-area" class="flex-1 flex flex-col p-4 lg:p-6">
<div id="messages" class="flex-1 overflow-y-auto mb-4 space-y-2"></div>
<div id="input-container" class="flex items-center px-2">
<input type="text" id="message-input" placeholder="Type a message..." class="flex-1 p-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
<button onclick="sendMessage()" class="ml-2 bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600 transition w-10 h-10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</button>
</div>
</div>
<div id="user-list" class="w-full lg:w-80 bg-gray-50 p-4 lg:p-6 border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto">
<h3 class="text-base font-semibold text-gray-800 mb-3">Connected Users</h3>
<div id="users" class="text-gray-600 text-sm"></div>
</div>
</div>
{% endif %}
<script>
const socket = io();
let currentChannel = {% if channel %}'{{ channel }}'{% else %}null{% endif %};
let currentUsername = null;
// Pre-fill username input with stored username
const storedUsername = localStorage.getItem('chatUsername');
if (storedUsername && document.getElementById('username')) {
document.getElementById('username').value = storedUsername;
}
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('error', (data) => {
const errorDiv = document.getElementById(currentChannel ? 'error-join' : 'error-create');
errorDiv.textContent = data.message;
setTimeout(() => errorDiv.textContent = '', 3000);
});
socket.on('message', (data) => {
const messages = document.getElementById('messages');
const messageDiv = document.createElement('div');
const isOwnMessage = currentUsername && data.username === currentUsername;
messageDiv.className = `message-bubble max-w-[80%] p-3 rounded-2xl ${isOwnMessage ? 'bg-blue-500 text-white ml-auto' : 'bg-gray-200 text-gray-800 mr-auto'}`;
messageDiv.innerHTML = `
<div class="text-sm">${data.username}: ${data.message}</div>
<div class="text-xs ${isOwnMessage ? 'text-blue-200' : 'text-gray-500'} mt-1">${new Date(data.timestamp).toLocaleTimeString()}</div>
`;
messages.appendChild(messageDiv);
messages.scrollTop = messages.scrollHeight;
});
socket.on('user_list', (users) => {
const usersDiv = document.getElementById('users');
if (users && Array.isArray(users)) {
usersDiv.innerHTML = users.length > 0
? users.map(user => `<div class="py-1">${user}</div>`).join('')
: '<div class="text-gray-500">No users connected</div>';
} else {
usersDiv.innerHTML = '<div class="text-gray-500">No users connected</div>';
}
console.log('Updated user list:', users);
});
socket.on('channel_created', (data) => {
window.location.href = `/channel/${encodeURIComponent(data.channel)}`;
});
socket.on('join_success', () => {
currentUsername = document.getElementById('username').value.trim();
localStorage.setItem('chatUsername', currentUsername);
document.getElementById('join-form').style.display = 'none';
document.getElementById('chat-container').style.display = 'flex';
console.log('Successfully joined channel:', currentChannel, 'as', currentUsername);
});
function createChannel() {
const channel = document.getElementById('channel-name-create').value.trim();
const password = document.getElementById('channel-password').value;
if (channel) {
socket.emit('create_channel', { channel, password });
} else {
const errorDiv = document.getElementById('error-create');
errorDiv.textContent = 'Channel name cannot be empty';
setTimeout(() => errorDiv.textContent = '', 3000);
}
}
function joinChannel() {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
if (!username) {
const errorDiv = document.getElementById('error-join');
errorDiv.textContent = 'Username cannot be empty';
setTimeout(() => errorDiv.textContent = '', 3000);
return;
}
currentUsername = username; // Set username immediately for past messages
socket.emit('join_channel', {
channel: currentChannel,
username,
password
});
}
function sendMessage() {
const messageInput = document.getElementById('message-input');
const message = messageInput.value.trim();
if (message && currentChannel) {
socket.emit('message', { channel: currentChannel, message });
messageInput.value = '';
}
}
// Allow sending message with Enter key
document.getElementById('message-input')?.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>
