461 lines
14 KiB
HTML
461 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Secure Chat</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: #2c2c2c;
|
|
color: #d4d4d4;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.chat-container {
|
|
background: #3a3a3a;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
background: #2f2f2f;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #4a4a4a;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.chat-header h1 {
|
|
color: #e0e0e0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.chat-header .status {
|
|
color: #888;
|
|
font-size: 12px;
|
|
background: #3f3f3f;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid #4a4a4a;
|
|
}
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
background: #333;
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-track {
|
|
background: #2c2c2c;
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb {
|
|
background: #555;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.chat-messages::-webkit-scrollbar-thumb:hover {
|
|
background: #666;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.message-ip {
|
|
font-size: 11px;
|
|
color: #888;
|
|
margin-bottom: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.message-content {
|
|
background: #404040;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
border-left: 3px solid #666;
|
|
word-wrap: break-word;
|
|
line-height: 1.5;
|
|
position: relative;
|
|
padding-right: 60px;
|
|
}
|
|
|
|
.message-content .timestamp {
|
|
font-size: 10px;
|
|
color: #777;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.message-actions {
|
|
margin-top: 4px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.message-actions button {
|
|
background: #4a4a4a;
|
|
border: none;
|
|
color: #aaa;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
.message-actions button:hover {
|
|
background: #555;
|
|
color: #ddd;
|
|
border-color: #666;
|
|
}
|
|
|
|
.message-actions button.delete-btn:hover {
|
|
background: #5a3a3a;
|
|
border-color: #8a4a4a;
|
|
color: #ff8888;
|
|
}
|
|
|
|
.message-input-area {
|
|
background: #2f2f2f;
|
|
padding: 20px;
|
|
border-top: 1px solid #4a4a4a;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.message-input-area input {
|
|
flex: 1;
|
|
padding: 10px 14px;
|
|
background: #3f3f3f;
|
|
border: 1px solid #4a4a4a;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
min-width: 150px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.message-input-area input:focus {
|
|
outline: none;
|
|
border-color: #666;
|
|
background: #454545;
|
|
}
|
|
|
|
.message-input-area input::placeholder {
|
|
color: #777;
|
|
}
|
|
|
|
.message-input-area button {
|
|
padding: 10px 24px;
|
|
background: #4a4a4a;
|
|
border: 1px solid #5a5a5a;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.message-input-area button:hover {
|
|
background: #555;
|
|
border-color: #666;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.message-input-area button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.loading {
|
|
color: #666;
|
|
text-align: center;
|
|
padding: 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.empty-state {
|
|
color: #666;
|
|
text-align: center;
|
|
padding: 40px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #4a4a4a;
|
|
color: #e0e0e0;
|
|
padding: 10px 24px;
|
|
border-radius: 8px;
|
|
border: 1px solid #5a5a5a;
|
|
font-size: 14px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toast.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.toast.success {
|
|
border-color: #5a8a5a;
|
|
background: #3a5a3a;
|
|
}
|
|
|
|
.toast.error {
|
|
border-color: #8a5a5a;
|
|
background: #5a3a3a;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.chat-container {
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.message-input-area {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.message-input-area input {
|
|
min-width: unset;
|
|
}
|
|
|
|
.message-input-area button {
|
|
width: 100%;
|
|
}
|
|
|
|
.chat-header h1 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.message-content {
|
|
padding-right: 50px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<h1>🔒 Secure Chat</h1>
|
|
<span class="status">● Encrypted</span>
|
|
</div>
|
|
|
|
<div class="chat-messages" id="messageContainer">
|
|
<div class="loading">Loading messages...</div>
|
|
</div>
|
|
|
|
<div class="message-input-area">
|
|
<input
|
|
type="text"
|
|
id="messageInput"
|
|
placeholder="Type your message..."
|
|
maxlength="500"
|
|
autocomplete="off"
|
|
>
|
|
<button id="sendButton">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
class ChatApp {
|
|
constructor() {
|
|
this.messageContainer = document.getElementById('messageContainer');
|
|
this.messageInput = document.getElementById('messageInput');
|
|
this.sendButton = document.getElementById('sendButton');
|
|
this.toast = document.getElementById('toast');
|
|
this.toastTimeout = null;
|
|
this.encryptionEnabled = true;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.loadMessages();
|
|
this.setupEventListeners();
|
|
|
|
// Auto-refresh every 10 seconds
|
|
setInterval(() => this.loadMessages(), 10000);
|
|
}
|
|
|
|
setupEventListeners() {
|
|
this.sendButton.addEventListener('click', () => this.sendMessage());
|
|
this.messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') this.sendMessage();
|
|
});
|
|
}
|
|
|
|
async sendMessage() {
|
|
const message = this.messageInput.value.trim();
|
|
if (!message) {
|
|
this.showToast('Please enter a message', 'error');
|
|
return;
|
|
}
|
|
|
|
this.sendButton.disabled = true;
|
|
this.sendButton.textContent = 'Sending...';
|
|
|
|
try {
|
|
const response = await fetch('/api/messages', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ message })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.messageInput.value = '';
|
|
this.showToast('Message sent! ✓', 'success');
|
|
this.loadMessages(); // Refresh messages
|
|
} else {
|
|
this.showToast('Error: ' + (data.error || 'Unknown error'), 'error');
|
|
}
|
|
} catch (error) {
|
|
this.showToast('Network error: ' + error.message, 'error');
|
|
} finally {
|
|
this.sendButton.disabled = false;
|
|
this.sendButton.textContent = 'Send';
|
|
}
|
|
}
|
|
|
|
async loadMessages() {
|
|
try {
|
|
const response = await fetch('/api/messages?limit=50');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.renderMessages(data.messages || []);
|
|
} else {
|
|
this.showToast('Failed to load messages', 'error');
|
|
}
|
|
} catch (error) {
|
|
this.showToast('Network error loading messages', 'error');
|
|
}
|
|
}
|
|
|
|
renderMessages(messages) {
|
|
if (messages.length === 0) {
|
|
this.messageContainer.innerHTML = `
|
|
<div class="empty-state">💬 No messages yet. Start the conversation!</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
// Show newest messages at bottom
|
|
messages.slice().reverse().forEach(msg => {
|
|
const time = new Date(msg.timestamp).toLocaleTimeString('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
|
|
html += `
|
|
<div class="message" data-id="${msg.id}">
|
|
<div class="message-ip">🔑 ${msg.ip}</div>
|
|
<div class="message-content">
|
|
${this.escapeHtml(msg.content)}
|
|
<span class="timestamp">${time}</span>
|
|
</div>
|
|
<div class="message-actions">
|
|
<button onclick="chatApp.deleteMessage(${msg.id})" class="delete-btn">Delete</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
this.messageContainer.innerHTML = html;
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
async deleteMessage(id) {
|
|
if (!confirm('Delete this message?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/messages/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.showToast('Message deleted ✓', 'success');
|
|
this.loadMessages();
|
|
} else {
|
|
this.showToast('Failed to delete message', 'error');
|
|
}
|
|
} catch (error) {
|
|
this.showToast('Network error deleting message', 'error');
|
|
}
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.messageContainer.scrollTop = this.messageContainer.scrollHeight;
|
|
}
|
|
|
|
showToast(message, type = 'info') {
|
|
this.toast.textContent = message;
|
|
this.toast.className = 'toast visible ' + type;
|
|
|
|
if (this.toastTimeout) {
|
|
clearTimeout(this.toastTimeout);
|
|
}
|
|
|
|
this.toastTimeout = setTimeout(() => {
|
|
this.toast.classList.remove('visible');
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// Initialize the chat app
|
|
const chatApp = new ChatApp();
|
|
</script>
|
|
</body>
|
|
</html> |