|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="chatScreen" class="hidden h-screen flex flex-col bg-white"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 bg-gray-50"> |
|
|
<div id="messagesList" class="space-y-4"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
let currentUser = null; |
|
|
let currentChat = null; |
|
|
let xmppConnection = null; |
|
|
|
|
|
|
|
|
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(() => { |
|
|
|
|
|
resolve(); |
|
|
}, 500); |
|
|
}); |
|
|
} |
|
|
|
|
|
disconnect() { |
|
|
this.connected = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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, ''); |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
xmppConnection = new MockXMPPConnection(fullNumber, 'secure_password'); |
|
|
await xmppConnection.connect(); |
|
|
|
|
|
currentUser = { |
|
|
phoneNumber: fullNumber, |
|
|
countryCode: countryCode |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('loginScreen').classList.add('hidden'); |
|
|
document.getElementById('chatScreen').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
addMessage('system', 'Welcome to B-Chats! Your messages are end-to-end encrypted and not stored on our servers.'); |
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
messageInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') sendMessage(); |
|
|
}); |
|
|
|
|
|
|
|
|
backBtn.addEventListener('click', () => { |
|
|
document.getElementById('chatScreen').classList.add('hidden'); |
|
|
document.getElementById('loginScreen').classList.remove('hidden'); |
|
|
xmppConnection?.disconnect(); |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
addMessage('self', message); |
|
|
messageInput.value = ''; |
|
|
|
|
|
|
|
|
document.querySelector('.typing-indicator').classList.add('active'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.querySelector('.typing-indicator').classList.remove('active'); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
