Scribd
Upload
43 views8 pages

chat app

Uploaded by

962amandeepsingh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views8 pages

chat app

Uploaded by

962amandeepsingh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ChatApp</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>

body {

font-family: 'Inter', sans-serif;

.chat-height {

height: calc(100vh - 8rem);

.message-input {

height: 4rem;

.typing-indicator::after {

content: '';

animation: typing 1s infinite;

@keyframes typing {

0% { content: ''; }

25% { content: '.'; }

50% { content: '..'; }


75% { content: '...'; }

100% { content: ''; }

</style>

</head>

<body class="bg-gray-50">

<div id="app" class="h-screen flex">

<!-- Login/Register Screen -->

<div id="auth-screen" class="w-full h-full flex items-center justify-center">

<div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">

<h1 class="text-2xl font-bold mb-6 text-center">ChatApp</h1>

<div class="space-y-4">

<div id="login-form">

<input type="email" placeholder="Email" class="w-full p-3 border rounded mb-3">

<input type="password" placeholder="Password" class="w-full p-3 border rounded mb-3">

<button onclick="login()" class="w-full bg-blue-500 text-white p-3 rounded font-


medium">Log In</button>

<p class="text-center mt-4 text-gray-600">Don't have an account? <a href="#"


onclick="toggleAuth()" class="text-blue-500">Sign up</a></p>

</div>

<div id="register-form" class="hidden">

<input type="text" placeholder="Username" class="w-full p-3 border rounded mb-3">

<input type="email" placeholder="Email" class="w-full p-3 border rounded mb-3">

<input type="password" placeholder="Password" class="w-full p-3 border rounded mb-3">

<button onclick="register()" class="w-full bg-blue-500 text-white p-3 rounded font-


medium">Sign Up</button>

<p class="text-center mt-4 text-gray-600">Already have an account? <a href="#"


onclick="toggleAuth()" class="text-blue-500">Log in</a></p>

</div>

</div>
</div>

</div>

<!-- Main Chat Screen -->

<div id="chat-screen" class="hidden w-full h-full flex">

<!-- Sidebar -->

<div class="w-1/4 border-r bg-white">

<div class="p-4 border-b">

<div class="flex items-center justify-between">

<h2 class="text-xl font-semibold">Messages</h2>

<button onclick="showNewMessage()" class="text-blue-500"><i class="bi bi-pencil-square


text-xl"></i></button>

</div>

<div class="mt-4">

<input type="text" placeholder="Search messages" class="w-full p-2 border rounded bg-


gray-50">

</div>

</div>

<div class="overflow-y-auto h-[calc(100vh-120px)]" id="conversations-list">

<!-- Conversation items will be added here -->

</div>

</div>

<!-- Chat Area -->

<div class="w-3/4 flex flex-col">

<!-- Chat Header -->

<div class="p-4 border-b bg-white">

<div class="flex items-center">

<div class="w-10 h-10 rounded-full bg-gray-300"></div>


<div class="ml-3">

<h3 class="font-semibold">User Name</h3>

<p class="text-sm text-gray-500">Active now</p>

</div>

</div>

</div>

<!-- Messages Area -->

<div class="flex-1 overflow-y-auto p-4 bg-gray-50" id="messages-container">

<!-- Messages will be added here -->

</div>

<!-- Message Input -->

<div class="p-4 border-t bg-white">

<div class="flex items-center gap-2">

<button class="p-2 hover:bg-gray-100 rounded"><i class="bi bi-image"></i></button>

<button class="p-2 hover:bg-gray-100 rounded"><i class="bi bi-emoji-smile"></i></button>

<input type="text" placeholder="Message..." class="flex-1 p-2 border rounded"


id="message-input">

<button onclick="sendMessage()" class="p-2 text-blue-500 font-medium">Send</button>

</div>

</div>

</div>

</div>

</div>

<script>

// Simulated data

let currentUser = null;


const conversations = [

{ id: 1, name: 'John Doe', lastMessage: 'Hello there!', time: '2m ago' },

{ id: 2, name: 'Jane Smith', lastMessage: 'How are you?', time: '1h ago' }

];

const messages = [];

// Auth functions

function toggleAuth() {

document.getElementById('login-form').classList.toggle('hidden');

document.getElementById('register-form').classList.toggle('hidden');

function login() {

// Simulate login

currentUser = { id: 1, name: 'Demo User' };

document.getElementById('auth-screen').classList.add('hidden');

document.getElementById('chat-screen').classList.remove('hidden');

loadConversations();

function register() {

// Simulate registration

alert('Registration successful! Please login.');

toggleAuth();

// Chat functions

function loadConversations() {
const conversationsList = document.getElementById('conversations-list');

conversationsList.innerHTML = conversations.map(conv => `

<div class="p-4 border-b hover:bg-gray-50 cursor-pointer" onclick="loadChat(${conv.id})">

<div class="flex items-center">

<div class="w-12 h-12 rounded-full bg-gray-300"></div>

<div class="ml-3 flex-1">

<div class="flex justify-between">

<h4 class="font-semibold">${conv.name}</h4>

<span class="text-sm text-gray-500">${conv.time}</span>

</div>

<p class="text-sm text-gray-600">${conv.lastMessage}</p>

</div>

</div>

</div>

`).join('');

function loadChat(conversationId) {

const messagesContainer = document.getElementById('messages-container');

messagesContainer.innerHTML = messages.map(msg => `

<div class="flex ${msg.senderId === currentUser.id ? 'justify-end' : 'justify-start'} mb-4">

<div class="max-w-[70%] ${msg.senderId === currentUser.id ? 'bg-blue-500 text-white' : 'bg-


white'} rounded-lg p-3 shadow">

${msg.text}

<div class="text-xs ${msg.senderId === currentUser.id ? 'text-blue-100' : 'text-gray-500'} mt-


1">

${msg.time}

${msg.senderId === currentUser.id ? '<i class="bi bi-check2-all ml-1"></i>' : ''}

</div>
</div>

</div>

`).join('');

messagesContainer.scrollTop = messagesContainer.scrollHeight;

function sendMessage() {

const input = document.getElementById('message-input');

if (input.value.trim()) {

messages.push({

senderId: currentUser.id,

text: input.value,

time: 'Just now'

});

input.value = '';

loadChat(1);

function showNewMessage() {

alert('New message functionality will be implemented here');

// Event listeners

document.getElementById('message-input').addEventListener('keypress', (e) => {

if (e.key === 'Enter') {

sendMessage();

});
</script>

</body>

</html>

You might also like