Spaces:

Waternoose
/

anycoder-d31b60fa

Running

App Files Files Community

anycoder-d31b60fa / index.html

Waternoose

Upload folder using huggingface_hub

0125981 verified 5 months ago

raw

history blame contribute delete

18.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SecureChat - Private Chatroom</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	:root {
	--primary: #6366f1;
	--primary-dark: #4f46e5;
	--secondary: #10b981;
	--dark: #1f2937;
	--light: #f9fafb;
	--gray: #6b7280;
	--danger: #ef4444;
	--success: #10b981;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	body {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	}

	.container {
	display: flex;
	width: 100%;
	max-width: 1200px;
	height: 90vh;
	background: white;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}

	.login-section {
	flex: 1;
	background: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px;
	position: relative;
	}

	.chat-section {
	flex: 2;
	background: #f8fafc;
	display: none;
	flex-direction: column;
	position: relative;
	}

	.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
	}

	.logo i {
	font-size: 2.5rem;
	color: var(--primary);
	}

	.logo h1 {
	font-size: 2rem;
	color: var(--dark);
	font-weight: 700;
	}

	.login-form {
	width: 100%;
	max-width: 400px;
	}

	.form-group {
	margin-bottom: 24px;
	}

	.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--dark);
	}

	.form-control {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	font-size: 1rem;
	transition: all 0.3s ease;
	}

	.form-control:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
	}

	.btn {
	padding: 14px 24px;
	border: none;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	}

	.btn-primary {
	background: var(--primary);
	color: white;
	}

	.btn-primary:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	}

	.btn-secondary {
	background: var(--secondary);
	color: white;
	margin-top: 12px;
	}

	.btn-secondary:hover {
	background: #0da271;
	transform: translateY(-2px);
	}

	.chat-header {
	background: white;
	padding: 20px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid #e5e7eb;
	}

	.chat-header h2 {
	color: var(--dark);
	font-size: 1.5rem;
	}

	.user-info {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	}

	.chat-messages {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	}

	.message {
	max-width: 70%;
	padding: 14px 18px;
	border-radius: 18px;
	position: relative;
	animation: fadeIn 0.3s ease;
	}

	.message.sent {
	align-self: flex-end;
	background: var(--primary);
	color: white;
	border-bottom-right-radius: 6px;
	}

	.message.received {
	align-self: flex-start;
	background: white;
	color: var(--dark);
	border-bottom-left-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.message-time {
	font-size: 0.75rem;
	opacity: 0.8;
	margin-top: 4px;
	text-align: right;
	}

	.message-input {
	padding: 20px 30px;
	background: white;
	border-top: 1px solid #e5e7eb;
	display: flex;
	gap: 12px;
	}

	.message-input input {
	flex: 1;
	padding: 14px 16px;
	border: 2px solid #e5e7eb;
	border-radius: 24px;
	font-size: 1rem;
	outline: none;
	transition: all 0.3s ease;
	}

	.message-input input:focus {
	border-color: var(--primary);
	}

	.message-input button {
	background: var(--primary);
	color: white;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.message-input button:hover {
	background: var(--primary-dark);
	transform: scale(1.05);
	}

	.login-tabs {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
	}

	.tab {
	padding: 12px 24px;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.tab.active {
	background: var(--primary);
	color: white;
	}

	.tab:not(.active) {
	color: var(--gray);
	}

	.tab:not(.active):hover {
	color: var(--dark);
	}

	.signup-form {
	display: none;
	}

	.built-with {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--gray);
	font-size: 0.9rem;
	}

	.built-with a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
	}

	.built-with a:hover {
	text-decoration: underline;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}

	@media (max-width: 768px) {
	.container {
	flex-direction: column;
	height: auto;
	}

	.login-section, .chat-section {
	flex: none;
	width: 100%;
	}

	.message {
	max-width: 85%;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<!-- Login Section -->
	<div class="login-section" id="loginSection">
	<div class="logo">
	<i class="fas fa-comment-dots"></i>
	<h1>SecureChat</h1>
	</div>

	<div class="login-tabs">
	<div class="tab active" id="loginTab">Login</div>
	<div class="tab" id="signupTab">Sign Up</div>
	</div>

	<form class="login-form" id="loginForm">
	<div class="form-group">
	<label for="loginUsername">Username</label>
	<input type="text" id="loginUsername" class="form-control" placeholder="Enter your username" required>
	</div>

	<div class="form-group">
	<label for="loginPassword">Password</label>
	<input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required>
	</div>

	<button type="submit" class="btn btn-primary">Login to Chatroom</button>
	</form>

	<form class="signup-form" id="signupForm">
	<div class="form-group">
	<label for="signupUsername">Username</label>
	<input type="text" id="signupUsername" class="form-control" placeholder="Choose a username" required>
	</div>

	<div class="form-group">
	<label for="signupEmail">Email</label>
	<input type="email" id="signupEmail" class="form-control" placeholder="Enter your email" required>
	</div>

	<div class="form-group">
	<label for="signupPassword">Password</label>
	<input type="password" id="signupPassword" class="form-control" placeholder="Create a password" required>
	</div>

	<div class="form-group">
	<label for="confirmPassword">Confirm Password</label>
	<input type="password" id="confirmPassword" class="form-control" placeholder="Confirm your password" required>
	</div>

	<button type="submit" class="btn btn-secondary">Create Account</button>
	</form>

	<div class="built-with">
	Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
	</div>
	</div>

	<!-- Chat Section -->
	<div class="chat-section" id="chatSection">
	<div class="chat-header">
	<h2>Private Chatroom</h2>
	<div class="user-info">
	<div class="user-avatar" id="userAvatar">U</div>
	<div>
	<div id="usernameDisplay">User</div>
	<div style="font-size: 0.75rem; color: var(--gray);">Online</div>
	</div>
	<button class="btn" id="logoutBtn" style="background: var(--danger); color: white; padding: 8px 16px; border-radius: 8px;">Logout</button>
	</div>
	</div>

	<div class="chat-messages" id="chatMessages">
	<!-- Messages will be added here dynamically -->
	</div>

	<div class="message-input">
	<input type="text" id="messageInput" placeholder="Type your message...">
	<button type="button" id="sendMessageBtn">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>

	<script>
	// DOM Elements
	const loginSection = document.getElementById('loginSection');
	const chatSection = document.getElementById('chatSection');
	const loginForm = document.getElementById('loginForm');
	const signupForm = document.getElementById('signupForm');
	const loginTab = document.getElementById('loginTab');
	const signupTab = document.getElementById('signupTab');
	const chatMessages = document.getElementById('chatMessages');
	const messageInput = document.getElementById('messageInput');
	const sendMessageBtn = document.getElementById('sendMessageBtn');
	const usernameDisplay = document.getElementById('usernameDisplay');
	const userAvatar = document.getElementById('userAvatar');
	const logoutBtn = document.getElementById('logoutBtn');

	// Tab switching
	loginTab.addEventListener('click', () => {
	loginTab.classList.add('active');
	signupTab.classList.remove('active');
	loginForm.style.display = 'block';
	signupForm.style.display = 'none';
	});

	signupTab.addEventListener('click', () => {
	signupTab.classList.add('active');
	loginTab.classList.remove('active');
	signupForm.style.display = 'block';
	loginForm.style.display = 'none';
	});

	// Login functionality
	loginForm.addEventListener('submit', (e) => {
	e.preventDefault();
	const username = document.getElementById('loginUsername').value;
	const password = document.getElementById('loginPassword').value;

	// Simple validation (in a real app, this would connect to a backend)
	if (username && password) {
	// Simulate successful login
	handleSuccessfulLogin(username);
	} else {
	alert('Please enter both username and password');
	}
	});

	// Signup functionality
	signupForm.addEventListener('submit', (e) => {
	e.preventDefault();
	const username = document.getElementById('signupUsername').value;
	const email = document.getElementById('signupEmail').value;
	const password = document.getElementById('signupPassword').value;
	const confirmPassword = document.getElementById('confirmPassword').value;

	// Simple validation
	if (password !== confirmPassword) {
	alert('Passwords do not match');
	return;
	}

	if (username && email && password) {
	// Simulate successful signup and login
	handleSuccessfulLogin(username);
	} else {
	alert('Please fill in all fields');
	}
	});

	// Handle successful login
	function handleSuccessfulLogin(username) {
	// Update UI
	loginSection.style.display = 'none';
	chatSection.style.display = 'flex';
	usernameDisplay.textContent = username;
	userAvatar.textContent = username.charAt(0).toUpperCase();

	// Add welcome message
	addMessage('System', `Welcome to the private chatroom, ${username}!`, 'received');

	// Simulate other users joining
	setTimeout(() => {
	addMessage('System', 'User "Jane" has joined the chatroom', 'received');
	}, 1000);

	setTimeout(() => {
	addMessage('Jane', 'Hi everyone! How are you doing today?', 'received');
	}, 2000);
	}

	// Logout functionality
	logoutBtn.addEventListener('click', () => {
	// Reset forms
	loginForm.reset();
	signupForm.reset();

	// Show login section
	chatSection.style.display = 'none';
	loginSection.style.display = 'flex';

	// Clear chat messages
	chatMessages.innerHTML = '';
	});

	// Send message functionality
	sendMessageBtn.addEventListener('click', sendMessage);
	messageInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	sendMessage();
	}
	});

	function sendMessage() {
	const message = messageInput.value.trim();
	if (message) {
	// Add message to chat
	addMessage(usernameDisplay.textContent, message, 'sent');

	// Clear input
	messageInput.value = '';

	// Simulate response after a delay
	setTimeout(() => {
	const responses = [
	"That's interesting!",
	"I see what you mean.",
	"Tell me more about that.",
	"I agree with you.",
	"That's a good point!"
	];

	const randomResponse = responses[Math.floor(Math.random() * responses.length)];
	addMessage('Jane', randomResponse, 'received');
	}, 1000 + Math.random() * 2000);
	}
	}

	// Add message to chat
	function addMessage(sender, text, type) {
	const messageDiv = document.createElement('div');
	messageDiv.classList.add('message', type);

	const messageText = document.createElement('div');
	messageText.textContent = text;

	const messageTime = document.createElement('div');
	messageTime.classList.add('message-time');
	messageTime.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

	messageDiv.appendChild(messageText);
	messageDiv.appendChild(messageTime);

	chatMessages.appendChild(messageDiv);

	// Scroll to bottom
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}
	</script>
	</body>
	</html>