Spaces:

ultronek01
/

gomegle

Running

File size: 26,554 Bytes


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gomegle - Chat s náhodnými ľuďmi</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>
        .typing-indicator::after {
            content: "...";
            animation: typing 1.5s infinite;
            display: inline-block;
            width: 0;
        }
        
        @keyframes typing {
            0% { content: "."; }
            33% { content: ".."; }
            66% { content: "..."; }
        }
        
        .chat-messages {
            scrollbar-width: thin;
            scrollbar-color: #4B5563 #1F2937;
        }
        
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }
        
        .chat-messages::-webkit-scrollbar-track {
            background: #1F2937;
        }
        
        .chat-messages::-webkit-scrollbar-thumb {
            background-color: #4B5563;
            border-radius: 3px;
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
    <!-- Header -->
    <header class="bg-gray-800 py-4 px-6 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-comments text-[#ae00eb] text-2xl"></i>
                <h1 class="text-xl font-bold">Gomegle</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="text-gray-300 hover:text-white">
                    <i class="fas fa-moon"></i>
                </button>
                <button id="info-btn" class="text-gray-300 hover:text-white">
                    <i class="fas fa-info-circle"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-8 flex flex-col">
        <!-- Connection Status -->
        <div id="status-container" class="mb-6 text-center">
            <div id="disconnected-view" class="bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex flex-col items-center">
                    <i class="fas fa-user-friends text-5xl text-blue-400 mb-4"></i>
                    <h2 class="text-2xl font-bold mb-2">Chcete chatovať?</h2>
                    <p class="text-gray-400 mb-6">Kliknite na tlačidlo nižšie pre spojenie s náhodným človekom</p>
                    <button id="connect-btn" class="bg-[#ae00eb] hover:bg-[#9a00d1] text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 flex items-center">
                        <i class="fas fa-random mr-2"></i> Nájsť partnera
                    </button>
                </div>
            </div>
            
            <div id="connecting-view" class="hidden bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex flex-col items-center">
                    <div class="relative mb-4">
                        <div class="w-16 h-16 rounded-full bg-blue-900 opacity-60 pulse-animation"></div>
                        <div class="w-16 h-16 rounded-full bg-blue-700 opacity-80 pulse-animation absolute top-0 left-0" style="animation-delay: 0.5s;"></div>
                        <div class="w-16 h-16 rounded-full bg-blue-500 pulse-animation absolute top-0 left-0" style="animation-delay: 1s;"></div>
                        <i class="fas fa-search absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold mb-2">Hľadáme niekoho...</h2>
                    <p class="text-gray-400 mb-4">Čakajte kým vás spojíme s náhodným partnerom</p>
                    <button id="cancel-connect-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-full transition-all">
                        Zrušiť
                    </button>
                </div>
            </div>
            
            <div id="connected-view" class="hidden bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex flex-col items-center">
                    <div class="relative mb-4">
                        <div class="w-16 h-16 rounded-full bg-green-900 opacity-60"></div>
                        <div class="w-16 h-16 rounded-full bg-green-700 opacity-80 absolute top-0 left-0"></div>
                        <div class="w-16 h-16 rounded-full bg-green-500 absolute top-0 left-0"></div>
                        <i class="fas fa-check absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold mb-2">Pripojené!</h2>
                    <p class="text-gray-400 mb-4">Teraz chatujete s náhodným človekom</p>
                    <div class="flex space-x-4">
                        <button id="disconnect-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition-all">
                            <i class="fas fa-times mr-2"></i> Odpojiť
                        </button>
                        <button id="new-partner-btn" class="bg-[#ae00eb] hover:bg-[#9a00d1] text-white font-bold py-2 px-6 rounded-full transition-all">
                            <i class="fas fa-sync-alt mr-2"></i> Nový partner
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Chat Container -->
        <div id="chat-container" class="hidden flex-grow flex flex-col bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <!-- Messages -->
            <div id="chat-messages" class="flex-grow p-4 overflow-y-auto chat-messages max-h-96">
                <!-- Messages will be inserted here by JavaScript -->
                <div id="welcome-message" class="text-center py-8 text-gray-400">
                    <i class="fas fa-comment-dots text-4xl mb-4"></i>
                    <p class="text-lg">Pozdravte svojho nového chatovacieho partnera!</p>
                    <p class="text-sm mt-2">Správy sú end-to-end šifrované</p>
                </div>
            </div>
            
            <!-- Typing Indicator -->
            <div id="typing-indicator" class="hidden bg-gray-700 px-4 py-2 text-sm text-gray-400">
                <span class="typing-indicator">Partner píše...</span>
            </div>
            
            <!-- Message Input -->
            <div class="bg-gray-700 p-4">
                <div class="flex items-center">
                    <input type="text" id="message-input" placeholder="Napíšte svoju správu..." class="flex-grow bg-gray-600 text-white rounded-l-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-[#ae00eb]">
                    <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-r-full transition-all">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <div class="flex justify-between mt-2 text-xs text-gray-400">
                    <div>
                        <button id="emoji-btn" class="hover:text-blue-400 mr-3">
                            <i class="far fa-smile"></i> Emoji
                        </button>
                        <button id="attachment-btn" class="hover:text-[#ae00eb]">
                            <i class="fas fa-paperclip"></i> Attach
                        </button>
                    </div>
                    <div>
                        <span id="char-count">0/500</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Interests Selection (Hidden by default) -->
        <div id="interests-container" class="hidden mt-6 bg-gray-800 rounded-lg p-6 shadow-lg">
            <h3 class="text-xl font-bold mb-4">Select your interests to find better matches</h3>
            <div class="flex flex-wrap gap-2 mb-6">
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Music
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Gaming
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Movies
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Sports
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Technology
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Travel
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Food
                </button>
                <button class="interest-tag bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full transition-all">
                    Art
                </button>
            </div>
            <div class="flex justify-end">
                <button id="save-interests-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition-all">
                    Save Interests
                </button>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 py-4 px-6">
        <div class="container mx-auto text-center text-gray-400 text-sm">
            <p>Gomegle &copy; 2023 | <a href="#" class="hover:text-[#ae00eb]">Podmienky</a> | <a href="#" class="hover:text-[#ae00eb]">Ochrana súkromia</a> | <a href="#" class="hover:text-[#ae00eb]">Bezpečnosť</a></p>
            <p class="mt-2">Spojte sa s náhodnými  ľuďmi po celom svete</p>
        </div>
    </footer>

    <!-- Info Modal -->
    <div id="info-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">O Gomegle</h3>
                <button id="close-info-modal" class="text-gray-400 hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <p>Gomegle vás spája s náhodnými ľuďmi pre anonymné konverzácie.</p>
                <p><strong>Ako to funguje:</strong></p>
                <ol class="list-decimal list-inside space-y-2">
                    <li>Kliknite na "Nájsť partnera" pre začatie vyhľadávania</li>
                    <li>Spojíme vás s náhodným používateľom</li>
                    <li>Chatujte anonymne (žiadne osobné údaje sa nezdieľajú)</li>
                    <li>Kliknite na "Odpojiť" pre ukončenie chatu</li>
                </ol>
                <div class="bg-gray-700 p-3 rounded-lg">
                    <p class="text-sm"><i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i> Pamätajte byť zdvorilí a dodržiavať pravidlá komunity.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // DOM Elements
        const connectBtn = document.getElementById('connect-btn');
        const cancelConnectBtn = document.getElementById('cancel-connect-btn');
        const disconnectBtn = document.getElementById('disconnect-btn');
        const newPartnerBtn = document.getElementById('new-partner-btn');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');
        const chatMessages = document.getElementById('chat-messages');
        const typingIndicator = document.getElementById('typing-indicator');
        const charCount = document.getElementById('char-count');
        const emojiBtn = document.getElementById('emoji-btn');
        const attachmentBtn = document.getElementById('attachment-btn');
        const infoBtn = document.getElementById('info-btn');
        const closeInfoModal = document.getElementById('close-info-modal');
        const infoModal = document.getElementById('info-modal');
        const themeToggle = document.getElementById('theme-toggle');
        const interestsContainer = document.getElementById('interests-container');
        const saveInterestsBtn = document.getElementById('save-interests-btn');
        
        // Status views
        const disconnectedView = document.getElementById('disconnected-view');
        const connectingView = document.getElementById('connecting-view');
        const connectedView = document.getElementById('connected-view');
        const chatContainer = document.getElementById('chat-container');
        const welcomeMessage = document.getElementById('welcome-message');
        
        // State
        let isConnected = false;
        let isTyping = false;
        let typingTimeout;
        let partnerTyping = false;
        let partnerTypingInterval;
        
        // WebSocket connection
        let socket;
        let userId = Math.random().toString(36).substring(2, 15);
        let partnerId = null;
        
        // Initialize
        function init() {
            // Set up event listeners
            connectBtn.addEventListener('click', startConnection);
            cancelConnectBtn.addEventListener('click', cancelConnection);
            disconnectBtn.addEventListener('click', disconnect);
            newPartnerBtn.addEventListener('click', findNewPartner);
            messageInput.addEventListener('input', handleTyping);
            messageInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && messageInput.value.trim() !== '') {
                    sendMessage();
                }
            });
            sendBtn.addEventListener('click', sendMessage);
            infoBtn.addEventListener('click', () => infoModal.classList.remove('hidden'));
            closeInfoModal.addEventListener('click', () => infoModal.classList.add('hidden'));
            themeToggle.addEventListener('click', toggleTheme);
            saveInterestsBtn.addEventListener('click', saveInterests);
            
            // Set up character count
            messageInput.addEventListener('input', updateCharCount);
            updateCharCount();
            
            // Set up interest tags
            document.querySelectorAll('.interest-tag').forEach(tag => {
                tag.addEventListener('click', () => {
                    tag.classList.toggle('bg-gray-700');
                    tag.classList.toggle('bg-blue-600');
                });
            });
            
            // Check for saved theme preference
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                document.documentElement.classList.remove('dark');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        }
        
        // Theme toggle
        function toggleTheme() {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            }
        }
        
        // Start connection
        function startConnection() {
            disconnectedView.classList.add('hidden');
            connectingView.classList.remove('hidden');
            
            // Connect to public demo WebSocket server
            socket = new WebSocket('wss://ws.ifelse.io');
            
            socket.onopen = function(e) {
                console.log("Connected to WebSocket server");
                connectingView.classList.add('hidden');
                connectedView.classList.remove('hidden');
                chatContainer.classList.remove('hidden');
                isConnected = true;
                
                // Send connection request
                socket.send(JSON.stringify({
                    type: 'connect',
                    userId: userId
                }));
            };
            
            socket.onmessage = function(event) {
                // This demo server just echoes messages back
                // In a real app you'd parse JSON and handle different message types
                if (event.data.startsWith('{')) {
                    const message = JSON.parse(event.data);
                    // Handle JSON messages
                } else {
                    // Show echoed messages as from "Partner"
                    addMessage("Partner", event.data, false);
                }
            };
            
            socket.onclose = function(event) {
                if (event.wasClean) {
                    addSystemMessage(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
                } else {
                    addSystemMessage('Connection died');
                }
                disconnect();
            };
            
            socket.onerror = function(error) {
                addSystemMessage(`WebSocket error: ${error.message}`);
                disconnect();
            };
        }
        
        // Cancel connection
        function cancelConnection() {
            connectingView.classList.add('hidden');
            disconnectedView.classList.remove('hidden');
        }
        
        // Disconnect
        function disconnect() {
            isConnected = false;
            
            // Notify server about disconnection
            if (socket) {
                socket.send(JSON.stringify({
                    type: 'disconnect',
                    partnerId: partnerId
                }));
                socket.close();
            }
            
            connectedView.classList.add('hidden');
            chatContainer.classList.add('hidden');
            disconnectedView.classList.remove('hidden');
            
            // Clear chat messages
            while (chatMessages.firstChild) {
                chatMessages.removeChild(chatMessages.firstChild);
            }
            
            // Reset welcome message
            welcomeMessage.classList.remove('hidden');
            
            // Clear typing indicators
            clearTimeout(typingTimeout);
            typingIndicator.classList.add('hidden');
            
            // Reset partner ID
            partnerId = null;
        }
        
        // Find new partner
        function findNewPartner() {
            disconnect();
            startConnection();
        }
        
        // Handle typing
        function handleTyping() {
            if (!isTyping && isConnected && socket) {
                isTyping = true;
                socket.send(JSON.stringify({
                    type: 'typing',
                    isTyping: true,
                    to: partnerId
                }));
            }
            
            // Reset the typing indicator after 3 seconds of inactivity
            clearTimeout(typingTimeout);
            typingTimeout = setTimeout(() => {
                if (isTyping) {
                    isTyping = false;
                    socket.send(JSON.stringify({
                        type: 'typing',
                        isTyping: false,
                        to: partnerId
                    }));
                }
            }, 3000);
        }
        
        // Simulate partner typing (for demo purposes)
        function simulatePartnerTyping() {
            partnerTypingInterval = setInterval(() => {
                if (Math.random() > 0.7) { // 30% chance partner starts typing
                    partnerTyping = true;
                    typingIndicator.classList.remove('hidden');
                    
                    setTimeout(() => {
                        if (partnerTyping) {
                            partnerTyping = false;
                            typingIndicator.classList.add('hidden');
                            
                            // Add a random message from the partner
                            const messages = [
                                "Hi there! How are you?",
                                "What brings you to RandomChat today?",
                                "Nice to meet you!",
                                "Do you come here often? 😄",
                                "What are your interests?",
                                "The weather is nice today, isn't it?",
                                "Have you tried the new chat features?"
                            ];
                            
                            addMessage(mockUsers[Math.floor(Math.random() * mockUsers.length)].name, messages[Math.floor(Math.random() * messages.length)], false);
                        }
                    }, 1000 + Math.random() * 3000);
                }
            }, 8000); // Check every 8 seconds
        }
        
        // Send message
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message === '' || !isConnected || !socket) return;
            
            // Add message to chat
            addMessage("You", message, true);
            
            // Send message via WebSocket
            socket.send(JSON.stringify({
                type: 'message',
                text: message,
                to: partnerId
            }));
            
            // Clear input
            messageInput.value = '';
            updateCharCount();
        }
        
        // Add message to chat
        function addMessage(sender, text, isUser) {
            // Hide welcome message if it's the first message
            if (welcomeMessage && !welcomeMessage.classList.contains('hidden')) {
                welcomeMessage.classList.add('hidden');
            }
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `mb-4 flex ${isUser ? 'justify-end' : 'justify-start'}`;
            
            const messageContent = document.createElement('div');
            messageContent.className = `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${isUser ? 'bg-blue-600 rounded-tr-none' : 'bg-gray-700 rounded-tl-none'}`;
            
            if (!isUser) {
                const senderName = document.createElement('div');
                senderName.className = 'text-xs font-semibold text-blue-300 mb-1';
                senderName.textContent = sender;
                messageContent.appendChild(senderName);
            }
            
            const messageText = document.createElement('div');
            messageText.className = 'text-white';
            messageText.textContent = text;
            messageContent.appendChild(messageText);
            
            const time = document.createElement('div');
            time.className = `text-xs mt-1 text-right ${isUser ? 'text-blue-200' : 'text-gray-400'}`;
            
            const now = new Date();
            time.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            messageContent.appendChild(time);
            
            messageDiv.appendChild(messageContent);
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // Update character count
        function updateCharCount() {
            const count = messageInput.value.length;
            charCount.textContent = `${count}/500`;
            
            if (count > 450) {
                charCount.classList.add('text-yellow-400');
                charCount.classList.remove('text-gray-400');
            } else if (count > 490) {
                charCount.classList.add('text-red-400');
                charCount.classList.remove('text-yellow-400');
            } else {
                charCount.classList.add('text-gray-400');
                charCount.classList.remove('text-yellow-400', 'text-red-400');
            }
        }
        
        // Save interests
        function saveInterests() {
            interestsContainer.classList.add('hidden');
            // In a real app, we'd save the selected interests to the server
        }
        
        // 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=ultronek01/gomegle" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>