Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SMS Messenger | Secure Numbers</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> | |
| .message-item:hover { | |
| transform: translateY(-2px); | |
| transition: transform 0.2s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .outgoing-bubble { | |
| background-color: #3b82f6; | |
| color: white; | |
| border-radius: 18px 18px 0 18px; | |
| } | |
| .incoming-bubble { | |
| background-color: #e2e8f0; | |
| color: #1e293b; | |
| border-radius: 18px 18px 18px 0; | |
| } | |
| .contact-code { | |
| background-color: #e2e8f0; | |
| color: #3b82f6; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.375rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| margin-left: 0.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="max-w-md mx-auto min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white p-4 shadow-md"> | |
| <div class="flex items-center justify-between"> | |
| <button id="backBtn" class="text-white hover:text-blue-200"> | |
| <i class="fas fa-arrow-left text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-bold">Secure SMS</h1> | |
| <button id="newMsgBtn" class="text-white hover:text-blue-200"> | |
| <i class="fas fa-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 p-4 flex flex-col" id="contentArea"> | |
| <!-- Contacts List (Default View) --> | |
| <div id="contactsView" class="flex-1"> | |
| <div class="mb-4 flex items-center"> | |
| <div class="relative flex-1"> | |
| <input type="text" placeholder="Search contacts..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <ul id="contactsList" class="divide-y divide-gray-100 custom-scrollbar" style="max-height: 70vh; overflow-y: auto;"> | |
| <!-- Contacts will be added here dynamically --> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Conversation View (Hidden by default) --> | |
| <div id="conversationView" class="hidden flex-1 flex flex-col"> | |
| <div class="bg-white rounded-t-xl p-4 shadow-sm flex items-center"> | |
| <img id="contactAvatar" src="https://ui-avatars.com/api/?name=J+D&background=3b82f6&color=fff&rounded=true" alt="Contact" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h2 id="contactName" class="font-semibold">John Doe</h2> | |
| <p id="contactCode" class="text-xs text-gray-500">Code: #123456789</p> | |
| </div> | |
| <button id="contactOptions" class="ml-auto text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div id="messagesArea" class="flex-1 p-4 bg-gray-50 custom-scrollbar" style="overflow-y: auto;"> | |
| <div class="flex flex-col space-y-2"> | |
| <!-- Messages will be added here dynamically --> | |
| <div class="text-center text-xs text-gray-400 my-4"> | |
| Start of conversation | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-3 border-t border-gray-200 rounded-b-xl shadow-sm"> | |
| <div class="flex items-center"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i class="fas fa-paperclip text-xl"></i> | |
| </button> | |
| <input type="text" id="messageInput" placeholder="Type a message" class="flex-1 py-2 px-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="sendBtn" class="ml-2 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition-colors"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Message View (Hidden by default) --> | |
| <div id="newMessageView" class="hidden flex-1"> | |
| <div class="mb-4"> | |
| <h2 class="text-lg font-bold text-gray-800 mb-2">New Message</h2> | |
| <div class="relative"> | |
| <label for="recipientInput" class="block text-sm font-medium text-gray-700 mb-1">To:</label> | |
| <input type="text" id="recipientInput" placeholder="Contact name or code (e.g. #123456789)" class="w-full pl-3 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button id="addRecipientBtn" class="absolute right-3 top-8 text-blue-600"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="newMessageText" class="block text-sm font-medium text-gray-700 mb-1">Message:</label> | |
| <textarea id="newMessageText" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Type your message here..."></textarea> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span id="charCount" class="text-sm text-gray-500">160 characters left</span> | |
| <button id="sendNewMessageBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> | |
| Send Message | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // UI Elements | |
| const contactsView = document.getElementById('contactsView'); | |
| const conversationView = document.getElementById('conversationView'); | |
| const newMessageView = document.getElementById('newMessageView'); | |
| const backBtn = document.getElementById('backBtn'); | |
| const newMsgBtn = document.getElementById('newMsgBtn'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const sendNewMessageBtn = document.getElementById('sendNewMessageBtn'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const recipientInput = document.getElementById('recipientInput'); | |
| const newMessageText = document.getElementById('newMessageText'); | |
| const charCount = document.getElementById('charCount'); | |
| const messagesArea = document.getElementById('messagesArea'); | |
| const contactsList = document.getElementById('contactsList'); | |
| // Number coding system | |
| const numberToCodeMap = new Map(); | |
| const codeToNumberMap = new Map(); | |
| // Generate a 9-digit code from a phone number | |
| function generateContactCode(phoneNumber) { | |
| // Simple hash function to generate consistent codes for demo | |
| let hash = 0; | |
| for (let i = 0; i < phoneNumber.length; i++) { | |
| hash = ((hash << 5) - hash) + phoneNumber.charCodeAt(i); | |
| hash = hash & hash; // Convert to 32bit integer | |
| } | |
| const code = String(Math.abs(hash)).padStart(9, '0').substring(0, 9); | |
| // Store the mappings | |
| numberToCodeMap.set(phoneNumber, code); | |
| codeToNumberMap.set(code, phoneNumber); | |
| return code; | |
| } | |
| // Get a contact's code (generates if doesn't exist) | |
| function getContactCode(phoneNumber) { | |
| if (numberToCodeMap.has(phoneNumber)) { | |
| return numberToCodeMap.get(phoneNumber); | |
| } | |
| return generateContactCode(phoneNumber); | |
| } | |
| // Find a contact by name or code | |
| function findContact(identifier) { | |
| // Check if it's a code (starts with # and 9 digits) | |
| if (identifier.startsWith('#') && identifier.length === 10) { | |
| const code = identifier.substring(1); | |
| if (codeToNumberMap.has(code)) { | |
| const phoneNumber = codeToNumberMap.get(code); | |
| return contacts.find(c => c.number === phoneNumber); | |
| } | |
| return null; | |
| } | |
| // Search by name | |
| const lowerIdentifier = identifier.toLowerCase(); | |
| return contacts.find(c => | |
| c.name.toLowerCase().includes(lowerIdentifier) || | |
| c.number.includes(identifier) | |
| ); | |
| } | |
| // Sample contacts data | |
| const contacts = [ | |
| { id: 1, name: "John Doe", number: "+15551234567", lastMessage: "See you tomorrow!", time: "10:30 AM" }, | |
| { id: 2, name: "Jane Smith", number: "+15559876543", lastMessage: "Thanks for the info", time: "Yesterday" }, | |
| { id: 3, name: "Mike Johnson", number: "+15554567890", lastMessage: "Call me when you can", time: "Monday" }, | |
| { id: 4, name: "Sarah Williams", number: "+15553334444", lastMessage: "Let's meet at 5pm", time: "Last week" }, | |
| { id: 5, name: "David Brown", number: "+15557778888", lastMessage: "Did you see the news?", time: "5/20/23" } | |
| ]; | |
| // Pre-generate codes for all contacts | |
| contacts.forEach(contact => { | |
| getContactCode(contact.number); | |
| }); | |
| // Sample messages data with timestamps | |
| const sampleMessages = { | |
| "John Doe": [ | |
| { text: "Hey, how are you doing?", sent: false, time: "10:25 AM" }, | |
| { text: "I'm good, thanks! How about you?", sent: true, time: "10:27 AM" }, | |
| { text: "Pretty good. Want to grab lunch tomorrow?", sent: false, time: "10:29 AM" }, | |
| { text: "Sure, sounds great! See you tomorrow.", sent: true, time: "10:30 AM" } | |
| ], | |
| "Jane Smith": [ | |
| { text: "Did you get the report I sent?", sent: false, time: "Yesterday 2:45 PM" }, | |
| { text: "Yes, I received it. Thanks for sending it over.", sent: true, time: "Yesterday 2:50 PM" }, | |
| { text: "Great! Let me know if you need anything else.", sent: false, time: "Yesterday 2:51 PM" }, | |
| { text: "Will do. The info was very helpful.", sent: true, time: "Yesterday 3:00 PM" } | |
| ] | |
| }; | |
| // Current conversation | |
| let currentConversation = null; | |
| // Initialize the app | |
| function init() { | |
| renderContacts(); | |
| setupEventListeners(); | |
| updateCharCount(); | |
| } | |
| // Render contacts list | |
| function renderContacts() { | |
| contactsList.innerHTML = ''; | |
| contacts.forEach(contact => { | |
| const code = getContactCode(contact.number); | |
| const li = document.createElement('li'); | |
| li.className = 'message-item p-3 hover:bg-gray-50 cursor-pointer transition-colors'; | |
| li.innerHTML = ` | |
| <div class="flex items-center"> | |
| <img src="https://ui-avatars.com/api/?name=${contact.name.split(' ').join('+')}&background=3b82f6&color=fff&rounded=true" alt="${contact.name}" class="w-12 h-12 rounded-full mr-3"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-medium text-gray-800">${contact.name}</h3> | |
| <span class="text-xs text-gray-500">${contact.time}</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm text-gray-500 truncate">${contact.lastMessage}</p> | |
| <span class="contact-code">#${code}</span> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| li.addEventListener('click', () => openConversation(contact)); | |
| contactsList.appendChild(li); | |
| }); | |
| } | |
| // Open conversation with a contact | |
| function openConversation(contact) { | |
| currentConversation = contact; | |
| // Update contact info in conversation view | |
| document.getElementById('contactName').textContent = contact.name; | |
| const code = numberToCodeMap.get(contact.number); | |
| document.getElementById('contactCode').textContent = `Code: #${code}`; | |
| document.getElementById('contactAvatar').src = `https://ui-avatars.com/api/?name=${contact.name.split(' ').join('+')}&background=3b82f6&color=fff&rounded=true`; | |
| // Switch views | |
| contactsView.classList.add('hidden'); | |
| newMessageView.classList.add('hidden'); | |
| conversationView.classList.remove('hidden'); | |
| // Load messages | |
| loadMessages(contact.name); | |
| // Scroll to bottom of messages | |
| setTimeout(() => { | |
| messagesArea.scrollTop = messagesArea.scrollHeight; | |
| }, 100); | |
| } | |
| // Load messages for a contact | |
| function loadMessages(contactName) { | |
| messagesArea.querySelector('div').innerHTML = '<div class="text-center text-xs text-gray-400 my-4">Start of conversation</div>'; | |
| const messages = sampleMessages[contactName] || []; | |
| messages.forEach(msg => { | |
| addMessageToView(msg.text, msg.sent, msg.time); | |
| }); | |
| } | |
| // Add message to the conversation view | |
| function addMessageToView(text, isOutgoing, timestamp) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isOutgoing ? 'justify-end' : 'justify-start'} fade-in`; | |
| const bubbleClass = isOutgoing ? 'outgoing-bubble' : 'incoming-bubble'; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-xs md:max-w-md"> | |
| <div class="${bubbleClass} px-4 py-2 shadow-sm"> | |
| <p class="text-sm">${text}</p> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1 ${isOutgoing ? 'text-right' : 'text-left'}">${timestamp || getCurrentTime()}</div> | |
| </div> | |
| `; | |
| messagesArea.querySelector('div').appendChild(messageDiv); | |
| messagesArea.scrollTop = messagesArea.scrollHeight; | |
| } | |
| // Open new message view | |
| function openNewMessageView() { | |
| contactsView.classList.add('hidden'); | |
| conversationView.classList.add('hidden'); | |
| newMessageView.classList.remove('hidden'); | |
| recipientInput.focus(); | |
| } | |
| // Go back to previous view | |
| function goBack() { | |
| if (!contactsView.classList.contains('hidden')) { | |
| // Already in contacts view, maybe minimize app in a real scenario | |
| return; | |
| } | |
| if (!conversationView.classList.contains('hidden')) { | |
| // Returning from conversation to contacts | |
| conversationView.classList.add('hidden'); | |
| contactsView.classList.remove('hidden'); | |
| } else if (!newMessageView.classList.contains('hidden')) { | |
| // Returning from new message view | |
| newMessageView.classList.add('hidden'); | |
| contactsView.classList.remove('hidden'); | |
| } | |
| } | |
| // Send a new message | |
| function sendMessage() { | |
| const messageText = messageInput.value.trim(); | |
| if (messageText === '') return; | |
| // In a real app, this would send via SMS API (using actual number) | |
| console.log(`Sending message to ${currentConversation.number}: ${messageText}`); | |
| // Add to conversation view | |
| addMessageToView(messageText, true); | |
| // Add auto-reply for demo purposes | |
| setTimeout(() => { | |
| const replies = [ | |
| "Got it, thanks!", | |
| "Sure, I'll be there!", | |
| "Can we talk later?", | |
| "I'll get back to you soon.", | |
| "Thanks for letting me know." | |
| ]; | |
| const randomReply = replies[Math.floor(Math.random() * replies.length)]; | |
| addMessageToView(randomReply, false); | |
| }, 1000 + Math.random() * 2000); | |
| // Clear input | |
| messageInput.value = ''; | |
| } | |
| // Send a new message from new message view | |
| function sendNewMessage() { | |
| const recipientIdentifier = recipientInput.value.trim(); | |
| const message = newMessageText.value.trim(); | |
| if (recipientIdentifier === '' || message === '') { | |
| alert('Please enter a recipient and message'); | |
| return; | |
| } | |
| // Find contact by name or code | |
| const contact = findContact(recipientIdentifier); | |
| if (!contact) { | |
| alert('Contact not found. Please enter a valid name or code (e.g. #123456789)'); | |
| return; | |
| } | |
| // In a real app, this would send via SMS API (using contact.number) | |
| console.log(`Sending message to ${contact.number}: ${message}`); | |
| // Show success message | |
| alert(`Message sent to ${contact.name} (Code: #${numberToCodeMap.get(contact.number)})`); | |
| // Clear form | |
| recipientInput.value = ''; | |
| newMessageText.value = ''; | |
| // Go back to contacts view | |
| goBack(); | |
| } | |
| // Update character count | |
| function updateCharCount() { | |
| const maxLength = 160; | |
| const currentLength = newMessageText.value.length; | |
| const remaining = maxLength - currentLength; | |
| charCount.textContent = `${remaining} characters left`; | |
| if (remaining < 0) { | |
| charCount.classList.add('text-red-500'); | |
| charCount.classList.remove('text-gray-500'); | |
| } else { | |
| charCount.classList.add('text-gray-500'); | |
| charCount.classList.remove('text-red-500'); | |
| } | |
| } | |
| // Get current time in HH:MM AM/PM format | |
| function getCurrentTime() { | |
| const now = new Date(); | |
| let hours = now.getHours(); | |
| const ampm = hours >= 12 ? 'PM' : 'AM'; | |
| hours = hours % 12; | |
| hours = hours ? hours : 12; // the hour '0' should be '12' | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| return `${hours}:${minutes} ${ampm}`; | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| backBtn.addEventListener('click', goBack); | |
| newMsgBtn.addEventListener('click', openNewMessageView); | |
| sendBtn.addEventListener('click', sendMessage); | |
| sendNewMessageBtn.addEventListener('click', sendNewMessage); | |
| // Send message on Enter key | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Update character count as user types | |
| newMessageText.addEventListener('input', updateCharCount); | |
| // Prevent Enter key from creating new line when Shift is not pressed | |
| newMessageText.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendNewMessage(); | |
| } | |
| }); | |
| // Tab completion for contact codes | |
| recipientInput.addEventListener('input', function(e) { | |
| if (e.target.value.startsWith('#') && e.target.value.length > 1) { | |
| const codeInput = e.target.value.substring(1); | |
| const matchingCode = Array.from(codeToNumberMap.keys()).find(k => k.startsWith(codeInput)); | |
| if (matchingCode && matchingCode !== codeInput && document.activeElement === recipientInput) { | |
| const currentPos = e.target.selectionStart; | |
| // Set timeout to allow the current input to be processed | |
| setTimeout(() => { | |
| e.target.value = `#${matchingCode}`; | |
| e.target.setSelectionRange(currentPos, currentPos); | |
| }, 0); | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize the app | |
| init(); | |
| }); | |
| </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=privateuserh/private-xlma" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |