Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Geometric Chat - Synchronized communication between two users"> | |
| <meta name="theme-color" content="#3b82f6"> | |
| <meta property="og:title" content="Geometric Chat"> | |
| <meta property="og:description" content="Real-time synchronized communication with geometric shapes"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://example.com"> | |
| <meta property="og:image" content="https://example.com/geometric-chat-preview.png"> | |
| <title>Geometric Chat</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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .shape-transition { | |
| transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); | |
| } | |
| .chat-bubble { | |
| clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); | |
| } | |
| .triangle { | |
| clip-path: polygon(50% 0%, 0% 100%, 100% 100%); | |
| } | |
| .hexagon { | |
| clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); | |
| } | |
| .pentagon { | |
| clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col items-center mb-8"> | |
| <div class="flex items-center justify-center mb-4"> | |
| <div class="hexagon bg-blue-500 w-12 h-12 flex items-center justify-center mr-3"> | |
| <i class="fas fa-comment-alt text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-800">Geometric Chat</h1> | |
| </div> | |
| <p class="text-gray-600 text-center max-w-md">Synchronized communication between two users with geometric shapes. No records stored.</p> | |
| </header> | |
| <!-- Connection Status --> | |
| <div class="flex justify-center mb-6"> | |
| <div id="connectionStatus" class="flex items-center bg-white rounded-full px-4 py-2 shadow-md"> | |
| <div class="w-3 h-3 rounded-full bg-gray-400 mr-2"></div> | |
| <span class="text-sm font-medium text-gray-600">Disconnected</span> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-4 flex items-center"> | |
| <div class="triangle bg-white w-8 h-8 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-blue-500 text-sm"></i> | |
| </div> | |
| <h2 class="text-white font-semibold">Synchronized Channel</h2> | |
| <div class="ml-auto flex space-x-2"> | |
| <button id="clearBtn" class="p-1 rounded-full hover:bg-blue-400 transition"> | |
| <i class="fas fa-trash-alt text-white"></i> | |
| </button> | |
| <button id="syncBtn" class="p-1 rounded-full hover:bg-blue-400 transition"> | |
| <i class="fas fa-sync-alt text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Area --> | |
| <div id="messages" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50"> | |
| <div class="flex justify-center"> | |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center"> | |
| <p>Welcome to Geometric Chat! Messages disappear when you close the window.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-gray-200 bg-white"> | |
| <div class="flex items-center"> | |
| <div class="flex-1 relative"> | |
| <input id="messageInput" type="text" placeholder="Type a message..." | |
| class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <button id="sendBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="ml-3 flex space-x-2"> | |
| <button id="shapeBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition"> | |
| <i class="fas fa-shapes text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="shapeOptions" class="hidden mt-3 flex justify-center space-x-3"> | |
| <button data-shape="circle" class="w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 transition"></button> | |
| <button data-shape="triangle" class="w-10 h-10 bg-green-500 hover:bg-green-600 transition triangle"></button> | |
| <button data-shape="square" class="w-10 h-10 bg-purple-500 hover:bg-purple-600 transition"></button> | |
| <button data-shape="hexagon" class="w-10 h-10 bg-yellow-500 hover:bg-yellow-600 transition hexagon"></button> | |
| <button data-shape="pentagon" class="w-10 h-10 bg-red-500 hover:bg-red-600 transition pentagon"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Identification --> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="bg-white rounded-lg shadow-md p-4 max-w-md w-full"> | |
| <h3 class="font-medium text-gray-700 mb-3">Identify Yourself</h3> | |
| <div class="flex items-center space-x-3"> | |
| <div id="userShape" class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <input id="usernameInput" type="text" placeholder="Your name" | |
| class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Shapes --> | |
| <div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden z-0"> | |
| <div class="absolute top-1/4 left-1/6 w-16 h-16 bg-blue-200 opacity-20 rounded-full floating shape-transition"></div> | |
| <div class="absolute top-1/3 right-1/5 w-12 h-12 bg-indigo-200 opacity-20 triangle floating shape-transition" style="animation-delay: 1s;"></div> | |
| <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-purple-200 opacity-20 hexagon floating shape-transition" style="animation-delay: 2s;"></div> | |
| <div class="absolute bottom-1/3 right-1/4 w-14 h-14 bg-pink-200 opacity-20 pentagon floating shape-transition" style="animation-delay: 3s;"></div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const messages = document.getElementById('messages'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const syncBtn = document.getElementById('syncBtn'); | |
| const shapeBtn = document.getElementById('shapeBtn'); | |
| const shapeOptions = document.getElementById('shapeOptions'); | |
| const userShape = document.getElementById('userShape'); | |
| const usernameInput = document.getElementById('usernameInput'); | |
| const connectionStatus = document.getElementById('connectionStatus'); | |
| // State | |
| let currentShape = 'circle'; | |
| let username = 'User' + Math.floor(Math.random() * 1000); | |
| let isConnected = false; | |
| let channel = null; | |
| // Initialize | |
| usernameInput.value = username; | |
| updateConnectionStatus(false); | |
| // Event Listeners | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| clearBtn.addEventListener('click', clearMessages); | |
| syncBtn.addEventListener('click', toggleConnection); | |
| shapeBtn.addEventListener('click', toggleShapeOptions); | |
| // Shape selection | |
| document.querySelectorAll('#shapeOptions button').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| currentShape = this.dataset.shape; | |
| updateUserShape(); | |
| toggleShapeOptions(); | |
| }); | |
| }); | |
| usernameInput.addEventListener('change', function() { | |
| username = this.value || 'Anonymous'; | |
| }); | |
| // Functions | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Create and display message | |
| displayMessage(message, username, currentShape, true); | |
| // In a real app, this would broadcast to the other user | |
| // For demo purposes, we'll simulate a response | |
| setTimeout(() => { | |
| if (isConnected) { | |
| displayMessage(`Reply to "${message}"`, 'Partner', getRandomShape(), false); | |
| } | |
| }, 1000 + Math.random() * 2000); | |
| // Clear input | |
| messageInput.value = ''; | |
| } | |
| function displayMessage(text, sender, shape, isCurrentUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`; | |
| const shapeDiv = document.createElement('div'); | |
| shapeDiv.className = `w-8 h-8 flex-shrink-0 flex items-center justify-center mr-2 ${isCurrentUser ? 'order-last ml-2' : 'mr-2'}`; | |
| // Apply shape | |
| shapeDiv.classList.add('bg-' + getColorForShape(shape) + '-500'); | |
| if (shape !== 'circle') { | |
| shapeDiv.classList.add(shape); | |
| } else { | |
| shapeDiv.classList.add('rounded-full'); | |
| } | |
| const icon = document.createElement('i'); | |
| icon.className = `fas fa-${shape === 'circle' ? 'user' : 'shapes'} text-white text-xs`; | |
| shapeDiv.appendChild(icon); | |
| const contentDiv = document.createElement('div'); | |
| contentDiv.className = `max-w-xs ${isCurrentUser ? 'text-right' : 'text-left'}`; | |
| const senderSpan = document.createElement('span'); | |
| senderSpan.className = `text-xs font-medium ${isCurrentUser ? 'text-blue-600' : 'text-gray-600'}`; | |
| senderSpan.textContent = sender; | |
| const textDiv = document.createElement('div'); | |
| textDiv.className = `mt-1 px-4 py-2 rounded-lg ${isCurrentUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`; | |
| textDiv.textContent = text; | |
| contentDiv.appendChild(senderSpan); | |
| contentDiv.appendChild(textDiv); | |
| messageDiv.appendChild(isCurrentUser ? contentDiv : shapeDiv); | |
| messageDiv.appendChild(isCurrentUser ? shapeDiv : contentDiv); | |
| messages.appendChild(messageDiv); | |
| messages.scrollTop = messages.scrollHeight; | |
| } | |
| function clearMessages() { | |
| messages.innerHTML = ` | |
| <div class="flex justify-center"> | |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg max-w-xs text-center"> | |
| <p>Chat cleared. Start a new conversation!</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| function toggleConnection() { | |
| isConnected = !isConnected; | |
| updateConnectionStatus(isConnected); | |
| if (isConnected) { | |
| // In a real app, this would establish a connection | |
| displaySystemMessage('Connected to partner. Messages are now synchronized.'); | |
| } else { | |
| displaySystemMessage('Disconnected. Messages are no longer synchronized.'); | |
| } | |
| } | |
| function updateConnectionStatus(connected) { | |
| const statusDot = connectionStatus.querySelector('div'); | |
| const statusText = connectionStatus.querySelector('span'); | |
| if (connected) { | |
| statusDot.className = 'w-3 h-3 rounded-full bg-green-500 mr-2'; | |
| statusText.textContent = 'Connected'; | |
| syncBtn.innerHTML = '<i class="fas fa-unlink text-white"></i>'; | |
| } else { | |
| statusDot.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2'; | |
| statusText.textContent = 'Disconnected'; | |
| syncBtn.innerHTML = '<i class="fas fa-link text-white"></i>'; | |
| } | |
| } | |
| function toggleShapeOptions() { | |
| shapeOptions.classList.toggle('hidden'); | |
| } | |
| function updateUserShape() { | |
| // Clear all shape classes | |
| userShape.className = 'w-10 h-10 flex items-center justify-center'; | |
| userShape.classList.add('bg-' + getColorForShape(currentShape) + '-500'); | |
| // Apply shape | |
| if (currentShape !== 'circle') { | |
| userShape.classList.add(currentShape); | |
| } else { | |
| userShape.classList.add('rounded-full'); | |
| } | |
| // Update icon | |
| const icon = userShape.querySelector('i') || document.createElement('i'); | |
| icon.className = `fas fa-${currentShape === 'circle' ? 'user' : 'shapes'} text-white`; | |
| if (!userShape.querySelector('i')) { | |
| userShape.appendChild(icon); | |
| } | |
| } | |
| function displaySystemMessage(text) { | |
| const div = document.createElement('div'); | |
| div.className = 'flex justify-center'; | |
| div.innerHTML = ` | |
| <div class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg max-w-xs text-center text-sm"> | |
| <p>${text}</p> | |
| </div> | |
| `; | |
| messages.appendChild(div); | |
| messages.scrollTop = messages.scrollHeight; | |
| } | |
| function getRandomShape() { | |
| const shapes = ['circle', 'triangle', 'square', 'hexagon', 'pentagon']; | |
| return shapes[Math.floor(Math.random() * shapes.length)]; | |
| } | |
| function getColorForShape(shape) { | |
| const colors = { | |
| 'circle': 'blue', | |
| 'triangle': 'green', | |
| 'square': 'purple', | |
| 'hexagon': 'yellow', | |
| 'pentagon': 'red' | |
| }; | |
| return colors[shape] || 'blue'; | |
| } | |
| // Simulate metadata synchronization (in a real app, this would use WebRTC or similar) | |
| setInterval(() => { | |
| if (isConnected) { | |
| // Update metadata tags to simulate synchronization | |
| document.querySelector('meta[name="theme-color"]').content = | |
| `#${Math.floor(Math.random()*16777215).toString(16)}`; | |
| } | |
| }, 5000); | |
| }); | |
| </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/privgeoxhat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |