Spaces:

privateuserh
/

private-xlma

Running

App Files Files Community

privateuserh commited on Apr 2

Commit

0875f24

verified ·

1 Parent(s): 8dbda24

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +513 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Private Xlma
-emoji: 📈
-colorFrom: pink
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: private-xlma
+emoji: 🐳
+colorFrom: yellow
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,513 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>