Spaces:

privateuserh
/

Honeycomb-xhat00

Running

File size: 24,807 Bytes

aec7513

<!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="Honeycomb Chat - Synchronized communication between prefectures">
    <meta name="theme-color" content="#3b82f6">
    <meta property="og:title" content="Honeycomb Chat">
    <meta property="og:description" content="Real-time synchronized communication with geometric prefectures">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://example.com">
    <meta property="og:image" content="https://example.com/honeycomb-chat-preview.png">
    <title>Honeycomb 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%);
        }
        .octagon {
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        }
        .diamond {
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
        .honeycomb-bg {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L84 25V75L50 100L16 75V25L50 0Z' fill='none' stroke='%23e5e7eb' stroke-width='0.5'/%3E%3C/svg%3E");
            background-size: 60px 60px;
        }
        .honeycomb-cell {
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        }
        .prefecture-diligence {
            background: linear-gradient(135deg, #f59e0b, #d97706);
        }
        .prefecture-industry {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .prefecture-harmony {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
        }
        .prefecture-aquapod {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
        }
        .prefecture-archive {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        }
        .message-diligence {
            background-color: #f59e0b;
            color: white;
        }
        .message-industry {
            background-color: #10b981;
            color: white;
        }
        .message-harmony {
            background-color: #3b82f6;
            color: white;
        }
        .message-aquapod {
            background-color: #06b6d4;
            color: white;
        }
        .message-archive {
            background-color: #8b5cf6;
            color: white;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-blue-50 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="honeycomb-cell 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">Honeycomb Chat</h1>
            </div>
            <p class="text-gray-600 text-center max-w-md">Synchronized communication between prefectures. 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 honeycomb-bg">
                <div class="octagon bg-white w-8 h-8 flex items-center justify-center mr-3">
                    <i class="fas fa-users text-blue-500 text-sm"></i>
                </div>
                <h2 class="text-white font-semibold">Prefecture 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 honeycomb-bg">
                <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 Honeycomb 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>
                        <button id="prefectureBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
                            <i class="fas fa-flag 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>
                    <button data-shape="octagon" class="w-10 h-10 bg-pink-500 hover:bg-pink-600 transition octagon"></button>
                    <button data-shape="diamond" class="w-10 h-10 bg-indigo-500 hover:bg-indigo-600 transition diamond"></button>
                </div>
                <div id="prefectureOptions" class="hidden mt-3 grid grid-cols-5 gap-2">
                    <button data-prefecture="diligence" class="px-3 py-2 rounded-md prefecture-diligence text-white text-sm font-medium">Diligence</button>
                    <button data-prefecture="industry" class="px-3 py-2 rounded-md prefecture-industry text-white text-sm font-medium">Industry</button>
                    <button data-prefecture="harmony" class="px-3 py-2 rounded-md prefecture-harmony text-white text-sm font-medium">Harmony</button>
                    <button data-prefecture="aquapod" class="px-3 py-2 rounded-md prefecture-aquapod text-white text-sm font-medium">Aquapod</button>
                    <button data-prefecture="archive" class="px-3 py-2 rounded-md prefecture-archive text-white text-sm font-medium">Archive</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">Prefecture Identification</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 id="currentPrefecture" class="mt-2 text-sm font-medium text-gray-600">
                    Current Prefecture: <span class="text-blue-500">None selected</span>
                </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 class="absolute top-1/5 right-1/6 w-18 h-18 bg-yellow-200 opacity-20 octagon floating shape-transition" style="animation-delay: 1.5s;"></div>
            <div class="absolute bottom-1/5 left-1/5 w-16 h-16 bg-green-200 opacity-20 diamond floating shape-transition" style="animation-delay: 2.5s;"></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 prefectureBtn = document.getElementById('prefectureBtn');
            const prefectureOptions = document.getElementById('prefectureOptions');
            const userShape = document.getElementById('userShape');
            const usernameInput = document.getElementById('usernameInput');
            const connectionStatus = document.getElementById('connectionStatus');
            const currentPrefectureDisplay = document.getElementById('currentPrefecture').querySelector('span');
            
            // State
            let currentShape = 'circle';
            let currentPrefecture = null;
            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);
            prefectureBtn.addEventListener('click', togglePrefectureOptions);
            
            // Shape selection
            document.querySelectorAll('#shapeOptions button').forEach(btn => {
                btn.addEventListener('click', function() {
                    currentShape = this.dataset.shape;
                    updateUserShape();
                    toggleShapeOptions();
                });
            });
            
            // Prefecture selection
            document.querySelectorAll('#prefectureOptions button').forEach(btn => {
                btn.addEventListener('click', function() {
                    currentPrefecture = this.dataset.prefecture;
                    currentPrefectureDisplay.textContent = this.textContent;
                    currentPrefectureDisplay.className = `text-${getColorForPrefecture(currentPrefecture)}-500`;
                    togglePrefectureOptions();
                });
            });
            
            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, currentPrefecture, true);
                
                // In a real app, this would broadcast to the other user
                // For demo purposes, we'll simulate a response
                setTimeout(() => {
                    if (isConnected) {
                        const randomPrefecture = getRandomPrefecture();
                        displayMessage(
                            `${getPrefectureResponse(message, randomPrefecture)}`, 
                            `Prefecture ${randomPrefecture.charAt(0).toUpperCase() + randomPrefecture.slice(1)}`, 
                            getRandomShape(), 
                            randomPrefecture, 
                            false
                        );
                    }
                }, 1000 + Math.random() * 2000);
                
                // Clear input
                messageInput.value = '';
            }
            
            function displayMessage(text, sender, shape, prefecture, 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 ${prefecture ? 'message-' + prefecture : 'bg-blue-500 text-white'}`;
                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 prefecture network. Messages are now synchronized.');
                } else {
                    displaySystemMessage('Disconnected from prefecture network. 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');
                // Hide prefecture options if visible
                if (!prefectureOptions.classList.contains('hidden')) {
                    prefectureOptions.classList.add('hidden');
                }
            }
            
            function togglePrefectureOptions() {
                prefectureOptions.classList.toggle('hidden');
                // Hide shape options if visible
                if (!shapeOptions.classList.contains('hidden')) {
                    shapeOptions.classList.add('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', 'octagon', 'diamond'];
                return shapes[Math.floor(Math.random() * shapes.length)];
            }
            
            function getRandomPrefecture() {
                const prefectures = ['diligence', 'industry', 'harmony', 'aquapod', 'archive'];
                return prefectures[Math.floor(Math.random() * prefectures.length)];
            }
            
            function getColorForShape(shape) {
                const colors = {
                    'circle': 'blue',
                    'triangle': 'green',
                    'square': 'purple',
                    'hexagon': 'yellow',
                    'pentagon': 'red',
                    'octagon': 'pink',
                    'diamond': 'indigo'
                };
                return colors[shape] || 'blue';
            }
            
            function getColorForPrefecture(prefecture) {
                const colors = {
                    'diligence': 'orange',
                    'industry': 'emerald',
                    'harmony': 'blue',
                    'aquapod': 'cyan',
                    'archive': 'violet'
                };
                return colors[prefecture] || 'blue';
            }
            
            function getPrefectureResponse(message, prefecture) {
                const responses = {
                    'diligence': `Regarding "${message}", our workers are already on it with maximum efficiency.`,
                    'industry': `"${message}" noted. Our factories will process this request immediately.`,
                    'harmony': `We appreciate your message about "${message}". Let's work together peacefully.`,
                    'aquapod': `"${message}" received. Our marine systems are analyzing this input.`,
                    'archive': `"${message}" has been recorded in our permanent knowledge banks.`
                };
                return responses[prefecture] || `Prefecture acknowledges: "${message}"`;
            }
            
            // 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/privhoneycombxhat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>