Hugging Face's logo

Spaces:
D110
/
b-chats
Running

App Files Community
b-chats / index.html
D110's picture
D110
Build me a secure and non traceable chatting app that uses https and XMPP. The app uses phone number to chat. The theme of the app should be in white,blue and violet.the apps name is B-Chats.the app should be connected to all countries network servers - Initial Deployment
56d37fd verified
Raw
History Blame Contribute Delete
15.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>B-Chats</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">
 <style>
 :root {
 --primary-blue: #3B82F6;
 --primary-violet: #8B5CF6;
 --light-violet: #A78BFA;
 --bg-white: #FFFFFF;
 --bg-gray: #F8FAFC;
 --text-gray: #64748B;
 }
.gradient-bg {
 background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-violet) 100%);
 }
.pulse-animation {
 animation: pulse 2s infinite;
 }
@keyframes pulse {
 0% { opacity: 1; }
 50% { opacity: 0.5; }
 100% { opacity: 1; }
 }
.message-bubble {
 max-width: 70%;
 word-wrap: break-word;
 }
.typing-indicator {
 display: none;
 }
.typing-indicator.active {
 display: flex;
 }
.country-flag {
 width: 24px;
 height: 16px;
 margin-right: 8px;
 }
.secure-lock {
 color: var(--primary-violet);
 font-size: 12px;
 }
.hidden {
 display: none;
 }
.fade-in {
 animation: fadeIn 0.3s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 </style>
</head>
<body class="bg-gray-50">
 <!-- Login Screen -->
 <div id="loginScreen" class="min-h-screen flex items-center justify-center gradient-bg">
 <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
 <div class="text-center mb-8">
 <div class="w-20 h-20 gradient-bg rounded-full mx-auto mb-4 flex items-center justify-center">
 <i class="fas fa-comments text-white text-3xl"></i>
 </div>
 <h1 class="text-3xl font-bold text-gray-800 mb-2">B-Chats</h1>
 <p class="text-gray-600">Secure & Private Messaging</p>
 </div>
<form id="loginForm" class="space-y-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
 <div class="flex">
 <select id="countryCode" class="border border-gray-300 rounded-l-lg px-3 py-2 bg-gray-50">
 <option value="+1">🇺🇸 +1</option>
 <option value="+44">🇬🇧 +44</option>
 <option value="+91">🇮🇳 +91</option>
 <option value="+86">🇨🇳 +86</option>
 <option value="+81">🇯🇵 +81</option>
 <option value="+49">🇩🇪 +49</option>
 <option value="+33">🇫🇷 +33</option>
 <option value="+7">🇷🇺 +7</option>
 <option value="+61">🇦🇺 +61</option>
 <option value="+55">🇧🇷 +55</option>
 </select>
 <input type="tel" id="phoneNumber" placeholder="Enter your phone number"
class="flex-1 border border-l-0 border-gray-300 rounded-r-lg px-4 py-2" required>
 </div>
 </div>
<button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition">
 <i class="fas fa-lock mr-2"></i>Connect Securely
 </button>
 </form>
<div class="mt-6 text-center">
 <p class="text-xs text-gray-500">
 <i class="fas fa-shield-alt mr-1"></i>
 End-to-end encrypted • No tracking • No data storage
 </p>
 </div>
 </div>
 </div>
<!-- Chat Screen -->
 <div id="chatScreen" class="hidden h-screen flex flex-col bg-white">
 <!-- Header -->
 <header class="bg-white shadow-sm border-b border-gray-200">
 <div class="flex items-center justify-between px-4 py-3">
 <div class="flex items-center">
 <button id="backBtn" class="mr-4 text-gray-600">
 <i class="fas fa-arrow-left text-xl"></i>
 </button>
 <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center">
 <i class="fas fa-user text-white text-sm"></i>
 </div>
 <div class="ml-3">
 <h2 id="chatName" class="font-semibold text-gray-800">+1 234 567 8900</h2>
 <p id="onlineStatus" class="text-xs text-green-500">Online</p>
 </div>
 </div>
 <div class="flex items-center space-x-3">
 <button class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-phone"></i>
 </button>
 <button class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-video"></i>
 </button>
 <button class="text-gray-600 hover:text-gray-800">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Messages Area -->
 <div id="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 bg-gray-50">
 <div id="messagesList" class="space-y-4">
 <!-- Messages will be dynamically added here -->
 </div>
<div class="typing-indicator ml-auto">
 <div class="bg-white rounded-lg px-4 py-2 shadow-sm">
 <div class="flex space-x-1">
 <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation"></div>
 <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation" style="animation-delay: 0.2s"></div>
 <div class="w-2 h-2 bg-gray-400 rounded-full pulse-animation" style="animation-delay: 0.4s"></div>
 </div>
 </div>
 </div>
 </div>
<!-- Input Area -->
 <div class="bg-white border-t border-gray-200 px-4 py-3">
 <div class="flex items-center space-x-2">
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-plus-circle text-xl"></i>
 </button>
 <input type="text" id="messageInput" placeholder="Type a secure message..."
 class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:border-violet-500">
 <button id="sendBtn" class="gradient-bg text-white rounded-full w-10 h-10 flex items-center justify-center hover:opacity-90 transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 <div class="mt-1 flex items-center text-xs text-gray-500">
 <i class="fas fa-lock secure-lock mr-1"></i>
 <span>End-to-end encrypted</span>
 </div>
 </div>
 </div>
<script>
 // Global variables
 let currentUser = null;
 let currentChat = null;
 let xmppConnection = null;
// Mock XMPP connection (in real app, use proper XMPP library)
 class MockXMPPConnection {
 constructor(username, password) {
 this.username = username;
 this.password = password;
 this.connected = false;
 }
connect() {
 return new Promise((resolve) => {
 setTimeout(() => {
 this.connected = true;
 resolve();
 }, 1000);
 });
 }
sendMessage(to, message) {
 return new Promise((resolve) => {
 setTimeout(() => {
 // In real app, send via XMPP
 resolve();
 }, 500);
 });
 }
disconnect() {
 this.connected = false;
 }
 }
 // Login functionality
 document.getElementById('loginForm').addEventListener('submit', async (e) => {
 e.preventDefault();
const countryCode = document.getElementById('countryCode').value;
 const phoneNumber = document.getElementById('phoneNumber').value;
 const fullNumber = countryCode + phoneNumber.replace(/\D/g, '');
// Show loading state
 const button = e.target.querySelector('button[type="submit"]');
 const originalText = button.innerHTML;
 button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Connecting...';
 button.disabled = true;
try {
 // Mock XMPP connection
 xmppConnection = new MockXMPPConnection(fullNumber, 'secure_password');
 await xmppConnection.connect();
currentUser = {
 phoneNumber: fullNumber,
 countryCode: countryCode
 };
// Show chat screen
 document.getElementById('loginScreen').classList.add('hidden');
 document.getElementById('chatScreen').classList.remove('hidden');
// Initialize chat
 initializeChat();
} catch (error) {
 alert('Connection failed. Please try again.');
 } finally {
 button.innerHTML = originalText;
 button.disabled = false;
 }
 });
 function initializeChat() {
 const messagesList = document.getElementById('messagesList');
 const messageInput = document.getElementById('messageInput');
 const sendBtn = document.getElementById('sendBtn');
 const backBtn = document.getElementById('backBtn');
// Add welcome message
 addMessage('system', 'Welcome to B-Chats! Your messages are end-to-end encrypted and not stored on our servers.');
// Send message
 sendBtn.addEventListener('click', sendMessage);
 messageInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter') sendMessage();
 });
// Back button
 backBtn.addEventListener('click', () => {
 document.getElementById('chatScreen').classList.add('hidden');
 document.getElementById('loginScreen').classList.remove('hidden');
 xmppConnection?.disconnect();
 });
// Auto-responses for demo
 setTimeout(() => {
 addMessage('other', 'Hello! This is a secure chat demo. Your messages are encrypted and private.');
 }, 2000);
 }
 function addMessage(type, text) {
 const messagesList = document.getElementById('messagesList');
 const messageDiv = document.createElement('div');
 messageDiv.className = 'fade-in';
if (type === 'system') {
 messageDiv.innerHTML = `
 <div class="text-center">
 <span class="text-xs text-gray-500 bg-gray-100 px-3 py-1 rounded-full">${text}</span>
 </div>
 `;
 } else if (type === 'self') {
 messageDiv.innerHTML = `
 <div class="flex justify-end">
 <div class="message-bubble bg-gradient-to-r from-blue-500 to-violet-500 text-white rounded-l-lg rounded-br-lg px-4 py-2">
 <p>${text}</p>
 <p class="text-xs opacity-75 mt-1">${new Date().toLocaleTimeString()}</p>
 </div>
 </div>
 `;
 } else {
 messageDiv.innerHTML = `
 <div class="flex justify-start">
 <div class="message-bubble bg-white border border-gray-200 rounded-r-lg rounded-bl-lg px-4 py-2">
 <p>${text}</p>
 <p class="text-xs text-gray-500 mt-1">${new Date().toLocaleTimeString()}</p>
 </div>
 </div>
 `;
 }
messagesList.appendChild(messageDiv);
 messagesList.scrollTop = messagesList.scrollHeight;
 }
 async function sendMessage() {
 const messageInput = document.getElementById('messageInput');
 const message = messageInput.value.trim();
if (!message) return;
// Add user's message
 addMessage('self', message);
 messageInput.value = '';
// Show typing indicator
 document.querySelector('.typing-indicator').classList.add('active');
// Send via XMPP (mock)
 setTimeout(() => {
 document.querySelector('.typing-indicator').classList.remove('active');
// Auto-response for demo
 const responses = [
 'Thanks for your message! This is a secure demo.',
 'Your privacy is our priority. All messages are encrypted.',
 'This chat is not traceable and uses HTTPS + XMPP.',
 'Feel free to continue messaging securely!'
 ];
setTimeout(() => {
 addMessage('other', responses[Math.floor(Math.random() * responses.length)]);
 }, 1000);
 }, 1500);
 }
 // Simulate online status changes
 setInterval(() => {
 const status = document.getElementById('onlineStatus');
 if (Math.random() > 0.8) {
 status.textContent = 'Typing...';
 setTimeout(() => {
 status.textContent = 'Online';
 }, 3000);
 }
 }, 10000);
 </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=D110/b-chats" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>