Spaces:

privateuserh
/

Geo-xhat

Paused

App Files Files Community

privateuserh commited on Apr 25, 2025

Commit

648e37a

verified ·

1 Parent(s): e6f2237

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +345 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Privgeoxhat
-emoji: 📊
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: privgeoxhat
+emoji: 🐳
+colorFrom: red
+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,345 @@
-<!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">
+    <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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Create a communications site in geometry use metadata and tags to allow synchronized communication between two users don't store records of conversations