Spaces:

saunu
/

mindscape-interface

Running

App Files Files Community

saunu commited on Oct 19, 2025

Commit

5f0e4fa

verified ·

1 Parent(s): 3a722d6

Make it functional

Browse files

Files changed (3) hide show

api-explorer.html +300 -0
explore.html +291 -0
index.html +134 -24

api-explorer.html ADDED Viewed

	@@ -0,0 +1,300 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FEI-Next - API Explorer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <style>
+        .api-endpoint {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .api-endpoint:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 16px -8px rgba(74, 144, 226, 0.3);
+        }
+        .response-area {
+            font-family: 'Courier New', monospace;
+            background: #1a202c;
+            border: 1px solid #2d3748;
+        }
+        .method-get { border-left: 4px solid #10b981; }
+        .method-post { border-left: 4px solid #3b82f6; }
+        .method-put { border-left: 4px solid #f59e0b; }
+        .method-delete { border-left: 4px solid #ef4444; }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden">
+    <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
+    <header class="gradient-mask px-6 py-8">
+        <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center mb-6 md:mb-0">
+                <div class="relative">
+                    <div class="absolute -inset-4 bg-blue-500 rounded-full opacity-20 blur-md"></div>
+                    <div class="relative bg-gradient-to-br from-blue-600 to-indigo-800 w-12 h-12 rounded-2xl flex items-center justify-center">
+                    <i data-feather="code" class="w-6 h-6"></i>
+                </div>
+                <h1 class="ml-4 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-300">
+                    API Explorer
+                </h1>
+            </div>
+            <nav class="flex space-x-6">
+                <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
+                    <i data-feather="home" class="w-4 h-4 mr-2"></i>
+                    Home
+                </a>
+                <a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
+                    <i data-feather="compass" class="w-4 h-4 mr-2"></i>
+                    Explore
+                </a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-6xl mx-auto px-6 pb-20">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- API Methods -->
+            <div class="lg:col-span-2 space-y-6">
+                <!-- GET Method -->
+                <div class="api-endpoint bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                    <div class="flex items-center mb-4">
+                        <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/50 text-green-300 border border-green-700/50 method-get p-4">
+                            <div class="flex items-center">
+                                <span class="px-2 py-1 rounded text-xs font-bold text-white bg-green-600 mr-3">
+                            GET
+                        </span>
+                        <code class="text-blue-300">/api/cognitive-data</code>
+                    </div>
+                    <p class="text-gray-300 mb-4">Retrieve cognitive patterns and reasoning traces</p>
+                        <div class="flex space-x-3">
+                            <button onclick="testGetAPI()" class="px-4 py-2 bg-green-600 hover:bg-green-500 rounded-lg text-white text-sm transition-colors" id="get-button">
+                            <span class="flex items-center">
+                                <span>Test Endpoint</span>
+                                <i data-feather="play" class="w-3 h-3 ml-2"></i>
+                        </button>
+                        <button onclick="showDocumentation('get')" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg text-gray-300 text-sm transition-colors">
+                            Documentation
+                        </button>
+                    </div>
+                    <div class="response-area mt-4 p-4 rounded-lg text-sm hidden" id="get-response">
+                        <div class="flex justify-between items-center mb-2">
+                                    <span class="text-green-400">✓ Success</span>
+                                    <span class="text-xs text-gray-400">Response will appear here</span>
+                                </div>
+                            </div>
+                        </div>
+            <!-- POST Method -->
+            <div class="api-endpoint bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                    <div class="flex items-center mb-4">
+                        <span class="px-2 py-1 rounded text-xs font-bold text-white bg-blue-600 mr-3">
+                            POST
+                        </span>
+                        <code class="text-blue-300">/api/cognitive-analysis</code>
+                    </div>
+                    <p class="text-gray-300 mb-4">Submit new cognitive data for analysis</p>
+                    <div class="flex space-x-3">
+                        <button onclick="testPostAPI()" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm transition-colors">
+                            <span class="flex items-center">
+                                <span>Test Endpoint</span>
+                                <i data-feather="play" class="w-3 h-3 ml-2"></i>
+                        </button>
+                        <button onclick="showDocumentation('post')" class="px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg text-gray-300 text-sm transition-colors">
+                            Documentation
+                        </button>
+                    </div>
+                    <div class="response-area mt-4 p-4 rounded-lg text-sm hidden" id="post-response">
+                            <div class="flex justify-between items-center mb-2">
+                                <span class="text-blue-400">↗ Submit</span>
+                            </div>
+                        </div>
+            <!-- Control Panel -->
+            <div class="lg:col-span-1 bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                <h3 class="text-lg font-bold mb-4">API Controls</h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Environment</label>
+                        <select class="w-full bg-gray-700/50 border border-gray-600/50 rounded-lg px-3 py-2 text-sm">
+                            <option>Development</option>
+                            <option>Staging</option>
+                            <option>Production</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Response Format</label>
+                        <select class="w-full bg-gray-700/50 border border-gray-600/50 rounded-lg px-3 py-2 text-sm">
+                            <option>JSON</option>
+                            <option>XML</option>
+                            <option>YAML</option>
+                        </select>
+                    </div>
+                    <button onclick="clearAllResponses()" class="w-full px-4 py-2 bg-gray-600 hover:bg-gray-500 rounded-lg text-gray-300 text-sm transition-colors">
+                            Clear All Responses
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="border-t border-gray-800 py-8 mt-12">
+        <div class="max-w-6xl mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i data-feather="activity" class="w-5 h-5 text-blue-400 mr-2"></i>
+                    <span class="text-sm text-gray-400">FEI-Next API Explorer v1.0</span>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors">
+                    <i data-feather="home"></i>
+                    </a>
+                    <a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors">
+                    <i data-feather="compass"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js background
+        if (typeof VANTA !== 'undefined') {
+            VANTA.NET({
+                el: "#vanta-bg",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                color: 0x3b82f6,
+                backgroundColor: 0x111827,
+                points: 12,
+                maxDistance: 20,
+                spacing: 18
+            });
+        }
+        // Initialize feather icons
+        feather.replace();
+        // API testing functions
+        window.testGetAPI = async () => {
+            const button = document.getElementById('get-button');
+            const responseArea = document.getElementById('get-response');
+            // Show loading state
+            responseArea.classList.remove('hidden');
+            responseArea.innerHTML = `
+                <div class="flex justify-between items-center mb-2">
+                    <span class="text-blue-400">⏳ Loading...</span>
+            `;
+            try {
+                const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
+                const data = await response.json();
+                responseArea.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-green-400">✓ Success</span>
+                        <span class="text-xs text-gray-400">Status: ${response.status}</span>
+                    </div>
+                    <pre class="text-green-300 overflow-auto">${JSON.stringify(data, null, 2)}</pre>
+                `;
+            } catch (error) {
+                responseArea.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-red-400">✗ Error</span>
+                    </div>
+                    <pre class="text-red-300">Request failed: ${error.message}</pre>
+                `;
+            }
+        };
+        window.testPostAPI = async () => {
+            const responseArea = document.getElementById('post-response');
+            // Show loading state
+            responseArea.classList.remove('hidden');
+            responseArea.innerHTML = `
+                <div class="flex justify-between items-center mb-2">
+                        <span class="text-blue-400">⏳ Processing...</span>
+            `;
+            try {
+                const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    title: 'Cognitive Analysis Request',
+                    body: 'Analyze this thought pattern for reasoning traces',
+                    userId: 1
+                })
+            });
+                const data = await response.json();
+                responseArea.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-green-400">✓ Success</span>
+                        <span class="text-xs text-gray-400">Status: ${response.status}</span>
+                </div>
+                <pre class="text-green-300 overflow-auto">${JSON.stringify(data, null, 2)}</pre>
+                `;
+            } catch (error) {
+                responseArea.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="text-green-400">✓ Created</span>
+                    </div>
+                    <pre class="text-green-300">Request failed: ${error.message}</pre>
+                `;
+            }
+        };
+        window.showDocumentation = (method) => {
+            const overlay = document.createElement('div');
+            overlay.className = 'fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center p-8';
+            overlay.innerHTML = `
+                <div class="relative max-w-4xl w-full bg-gray-800 rounded-2xl p-8 border border-gray-700 max-h-[90vh] overflow-auto">
+                <button class="absolute top-4 right-4 text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+                <h3 class="text-xl font-bold mb-4">${method.toUpperCase()} API Documentation</h3>
+                <div class="space-y-4">
+                    <div class="p-4 bg-gray-700/50 rounded-lg">
+                        <h4 class="font-medium mb-2">Endpoint</h4>
+                        <code class="bg-gray-600 p-2 rounded text-sm block">
+                        /api/cognitive-${method === 'get' ? 'data' : 'analysis'}</code>
+                    <div class="p-4 bg-gray-700/50 rounded-lg">
+                            <h4 class="font-medium mb-2">Description</h4>
+                            <p class="text-gray-300">
+                            ${method === 'get' ?
+                                'Retrieve cognitive patterns and reasoning traces from the system.' :
+                                'Submit new cognitive data for analysis and pattern recognition.'}
+                        </p>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(overlay);
+            feather.replace();
+            // Add close handler
+            overlay.querySelector('button').addEventListener('click', () => {
+                overlay.remove();
+            });
+        };
+        window.clearAllResponses = () => {
+            document.querySelectorAll('.response-area').forEach(area => {
+                area.classList.add('hidden');
+                area.innerHTML = '';
+            });
+        };
+    </script>
+</body>
+</html>

explore.html ADDED Viewed

	@@ -0,0 +1,291 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FEI-Next - Cognitive Exploration</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <style>
+        @keyframes synapsePulse {
+            0% { opacity: 0.3; }
+            50% { opacity: 0.8; }
+            100% { opacity: 0.3; }
+        }
+        .synapse {
+            animation: synapsePulse 4s infinite ease-in-out;
+        }
+        .gradient-mask {
+            mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+        }
+        .thought-bubble {
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .thought-bubble:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 24px -12px rgba(74, 144, 226, 0.4);
+        }
+        .proof-halo {
+            box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8);
+            animation: proofPulse 3s infinite;
+        }
+        @keyframes proofPulse {
+            0% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.8);
+            70% { box-shadow: 0 0 0 10px rgba(74, 144, 226, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
+        }
+        .data-node {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .data-node:hover {
+            transform: scale(1.05);
+            filter: brightness(1.2);
+        }
+        .cognitive-network {
+            background:
+                radial-gradient(circle at 20% 20%, rgba(74, 144, 226, 0.1) 0%,
+                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans overflow-x-hidden">
+    <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
+    <header class="gradient-mask px-6 py-8">
+        <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center mb-6 md:mb-0">
+                <div class="relative">
+                    <div class="absolute -inset-4 bg-blue-500 rounded-full opacity-20 blur-md"></div>
+                    <div class="relative bg-gradient-to-br from-blue-600 to-indigo-800 w-12 h-12 rounded-2xl flex items-center justify-center">
+                    <i data-feather="compass" class="w-6 h-6"></i>
+                </div>
+                <h1 class="ml-4 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-300">
+                    Cognitive Exploration
+                </h1>
+            </div>
+            <nav class="flex space-x-6">
+                <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
+                    <i data-feather="home" class="w-4 h-4 mr-2"></i>
+                    Home
+                </a>
+                <a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors flex items-center">
+                    <i data-feather="code" class="w-4 h-4 mr-2"></i>
+                    API Explorer
+                </a>
+            </nav>
+        </div>
+    </header>
+    <main class="max-w-6xl mx-auto px-6 pb-20">
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+            <!-- Control Panel -->
+            <div class="lg:col-span-1 bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                <h3 class="text-lg font-bold mb-4">Exploration Controls</h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Zoom Level</label>
+                        <input type="range" min="1" max="10" value="3" class="w-full" id="zoom-control">
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">Focus Area</label>
+                        <select class="w-full bg-gray-700/50 border border-gray-600/50 rounded-lg px-3 py-2 text-sm">
+                            <option>Memory Patterns</option>
+                            <option>Reasoning Traces</option>
+                            <option>Decision Pathways</option>
+                        </select>
+                    </div>
+                    <button onclick="generateNewData()" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm transition-colors">
+                            Generate New Data
+                        </button>
+                    </div>
+                </div>
+            <!-- Main Visualization -->
+            <div class="lg:col-span-3 cognitive-network bg-gray-800/20 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                <h3 class="text-lg font-bold mb-4">Cognitive Network</h3>
+                <div class="h-96 relative rounded-xl bg-gray-900/50 border border-gray-700/50">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="grid grid-cols-5 gap-6" id="network-container">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <!-- Data Explorer -->
+        <div class="mt-8 bg-gray-800/30 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+            <h3 class="text-lg font-bold mb-4">Live Data Stream</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="data-stream">
+                <div class="text-center text-gray-400 py-8">
+                    <i data-feather="refresh-cw" class="w-8 h-8 mx-auto mb-3 animate-spin"></i>
+                    <p>Loading cognitive patterns...</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="border-t border-gray-800 py-8 mt-12">
+        <div class="max-w-6xl mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i data-feather="activity" class="w-5 h-5 text-blue-400 mr-2"></i>
+                    <span class="text-sm text-gray-400">FEI-Next Explorer v1.0</span>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="index.html" class="text-gray-400 hover:text-blue-300 transition-colors">
+                    <i data-feather="home"></i>
+                    </a>
+                    <a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors">
+                    <i data-feather="code"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Vanta.js background
+        if (typeof VANTA !== 'undefined') {
+            VANTA.NET({
+                el: "#vanta-bg",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                color: 0x3b82f6,
+                backgroundColor: 0x111827,
+                points: 12,
+                maxDistance: 20,
+                spacing: 18
+            });
+        }
+        // Initialize feather icons
+        feather.replace();
+        // Cognitive network visualization
+        const createNetworkNodes = () => {
+            const container = document.getElementById('network-container');
+            container.innerHTML = '';
+            const nodes = 15;
+            const colors = ['blue', 'purple', 'green', 'yellow', 'red'];
+            for (let i = 0; i < nodes; i++) {
+                const node = document.createElement('div');
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                const size = Math.random() * 16 + 8;
+                const x = Math.random() * 80 + 10;
+                const y = Math.random() * 80 + 10;
+                const delay = Math.random() * 2;
+                node.className = `data-node absolute w-${Math.round(size/4)} h-${Math.round(size/4)} rounded-full bg-${color}-500/40 synapse';
+                node.style.left = `${x}%`;
+                node.style.top = `${y}%`;
+                node.style.width = `${size}px`;
+                node.style.height = `${size}px`;
+                node.style.animationDelay = `${delay}s`;
+                node.title = `Cognitive Node ${i+1}`;
+                node.addEventListener('click', () => {
+                    exploreNode(i+1);
+                });
+                container.appendChild(node);
+            }
+        };
+        // Load and display data
+        const loadDataStream = async () => {
+            try {
+                const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=6');
+                const posts = await response.json();
+                const streamContainer = document.getElementById('data-stream');
+                streamContainer.innerHTML = '';
+                posts.forEach(post => {
+                    const postElement = document.createElement('div');
+                    postElement.className = 'thought-bubble bg-gray-700/50 p-4 rounded-xl border border-gray-600/50';
+                    postElement.innerHTML = `
+                        <h4 class="font-medium text-sm mb-2">${post.title.substring(0, 25)}...</h4>
+                        <p class="text-xs text-gray-300">${post.body.substring(0, 60)}...</p>
+                        <button class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-xs transition-colors" onclick="exploreNode(${post.id})">
+                            Trace Pathway
+                        </button>
+                    `;
+                    streamContainer.appendChild(postElement);
+                });
+            } catch (error) {
+                console.log('Failed to load data stream:', error);
+            }
+        };
+        // Explore individual node
+        window.exploreNode = async (id) => {
+            try {
+                const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
+                const data = await response.json();
+                const overlay = document.createElement('div');
+                overlay.className = 'fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center p-8';
+                overlay.innerHTML = `
+                    <div class="relative max-w-4xl w-full bg-gray-800 rounded-2xl p-8 border border-gray-700 max-h-[90vh] overflow-auto">
+                    <button class="absolute top-4 right-4 text-gray-400 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                    <h3 class="text-xl font-bold mb-4">Cognitive Node #${id}</h3>
+                    <div class="space-y-4">
+                        <div class="p-4 bg-gray-700/50 rounded-lg">
+                        <h4 class="font-medium mb-2">${data.title}</h4>
+                        <p class="text-gray-300">${data.body}</p>
+                        <div class="mt-4 grid grid-cols-3 gap-4">
+                            <div class="text-center p-3 bg-gray-600/30 rounded">
+                            <i data-feather="cpu" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i>
+                            <span class="text-sm text-gray-300">Processing</span>
+                        </div>
+                        <div class="text-center p-3 bg-gray-600/30 rounded">
+                                <i data-feather="activity" class="w-5 h-5 text-purple-400 mx-auto mb-2"></i>
+                                <span class="text-sm text-gray-300">Memory</span>
+                            </div>
+                            <div class="text-center p-3 bg-gray-600/30 rounded">
+                                <i data-feather="check-circle" class="w-5 h-5 text-green-400 mx-auto mb-2"></i>
+                                <span class="text-sm text-gray-300">Verified</span>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                `;
+                document.body.appendChild(overlay);
+                feather.replace();
+                // Add close handler
+                overlay.querySelector('button').addEventListener('click', () => {
+                    overlay.remove();
+                });
+            } catch (error) {
+                console.log('Node exploration failed:', error);
+            }
+        };
+        // Generate new data
+        window.generateNewData = () => {
+            createNetworkNodes();
+            loadDataStream();
+        };
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            createNetworkNodes();
+            loadDataStream();
+            // Add zoom control functionality
+            document.getElementById('zoom-control').addEventListener('input', (e) => {
+                const zoomLevel = e.target.value / 3;
+                document.getElementById('network-container').style.transform = `scale(${zoomLevel})`;
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -292,35 +292,149 @@
                     <a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors">
                     <i data-feather="compass"></i>
                     </a>
-                </div>
 </div>
         </div>
     </footer>
     <script>
             // Initialize Vanta.js background with cognitive rhythm
-            VANTA.NET({
-                el: "#vanta-bg",
-                mouseControls: true,
-                touchControls: true,
-                gyroControls: false,
-                minHeight: 200.00,
-                minWidth: 200.00,
-                scale: 1.00,
-                scaleMobile: 1.00,
-                color: 0x3b82f6,
-                backgroundColor: 0x111827,
-                points: 12.00,
-                maxDistance: 20.00,
-                spacing: 18.00
-            });
 // Initialize feather icons
         feather.replace();
         // Add vascular flow animation to main sections
         document.querySelectorAll('.bg-gray-800/30').forEach(section => {
             section.classList.add('vascular-flow');
         });
 // System pulse animation
         const pulse = anime({
             targets: '#system-pulse',
@@ -481,22 +595,18 @@
                 `;
                     document.body.appendChild(ritualOverlay);
                     feather.replace();
                     // Handle consent acceptance
                     document.getElementById('accept-consent').addEventListener('click', () => {
                         ritualOverlay.remove();
                         text.textContent = 'Handshake Complete';
                         consentButton.classList.add('proof-halo');
                         setTimeout(() => {
-                            text.textContent = 'Begin Mutual Exploration';
-                            consentButton.classList.remove('cursor-not-allowed', 'proof-halo');
-                            consentButton.disabled = false;
-                            gradient.classList.add('opacity-0');
                         }, 1500);
                     });
-                    // Handle consent decline
                     document.getElementById('decline-consent').addEventListener('click', () => {
                         ritualOverlay.remove();
                         text.textContent = 'Ready for Mutual Exploration';

                     <a href="explore.html" class="text-gray-400 hover:text-blue-300 transition-colors">
                     <i data-feather="compass"></i>
                     </a>
+                    <a href="api-explorer.html" class="text-gray-400 hover:text-blue-300 transition-colors">
+                    <i data-feather="code"></i>
+                    </a>
+</div>
 </div>
         </div>
     </footer>
     <script>
             // Initialize Vanta.js background with cognitive rhythm
+            if (typeof VANTA !== 'undefined') {
+                VANTA.NET({
+                    el: "#vanta-bg",
+                    mouseControls: true,
+                    touchControls: true,
+                    gyroControls: false,
+                    minHeight: 200.00,
+                    minWidth: 200.00,
+                    scale: 1.00,
+                    scaleMobile: 1.00,
+                    color: 0x3b82f6,
+                    backgroundColor: 0x111827,
+                    points: 12.00,
+                    maxDistance: 20.00,
+                    spacing: 18.00
+                });
+            }
 // Initialize feather icons
         feather.replace();
         // Add vascular flow animation to main sections
         document.querySelectorAll('.bg-gray-800/30').forEach(section => {
             section.classList.add('vascular-flow');
         });
+        // Initialize data exploration functionality
+        const initDataExploration = async () => {
+            try {
+                // Fetch sample cognitive data for demonstration
+                const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
+                const posts = await response.json();
+                // Create data exploration section
+                const dataSection = document.createElement('div');
+                dataSection.className = 'mt-12 bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50';
+                dataSection.innerHTML = `
+                    <h3 class="text-xl font-bold mb-6">Cognitive Data Explorer</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    ${posts.map(post => `
+                        <div class="thought-bubble bg-gray-700/50 p-6 rounded-xl border border-gray-600/50">
+                        <h4 class="font-medium mb-2">${post.title.substring(0, 30)}...</h4>
+                        <p class="text-sm text-gray-300">${post.body.substring(0, 80)}...</p>
+                        <button class="mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm transition-colors" onclick="exploreData(${post.id})">
+                            Explore Trace
+                        </button>
+                    </div>
+                    `).join('')}
+                </div>
+                <div class="text-center">
+                    <button onclick="loadMoreData()" class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-xl text-gray-300 transition-colors">
+                        Load More Cognitive Patterns
+                    </button>
+                </div>
+                `;
+                document.querySelector('main').insertBefore(dataSection, document.querySelector('footer'));
+                feather.replace();
+            } catch (error) {
+                console.log('Data exploration initialization failed:', error);
+            }
+        };
+        // Data exploration functions
+        window.exploreData = async (id) => {
+            try {
+                const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
+                const data = await response.json();
+                // Show detailed view
+                const overlay = document.createElement('div');
+                overlay.className = 'fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center p-8';
+                overlay.innerHTML = `
+                    <div class="relative max-w-4xl w-full bg-gray-800 rounded-2xl p-8 border border-gray-700 max-h-[90vh] overflow-auto">
+                    <button class="absolute top-4 right-4 text-gray-400 hover:text-white">
+                        <i data-feather="x"></i>
+                    </button>
+                    <h3 class="text-xl font-bold mb-4">Cognitive Trace #${id}</h3>
+                    <div class="space-y-4">
+                        <div class="p-4 bg-gray-700/50 rounded-lg">
+                        <h4 class="font-medium mb-2">${data.title}</h4>
+                        <p class="text-gray-300">${data.body}</p>
+                        <div class="mt-4 grid grid-cols-2 gap-4">
+                            <div class="text-center p-3 bg-gray-600/30 rounded">
+                            <i data-feather="activity" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i>
+                            <span class="text-sm text-gray-300">TAI Verified</span>
+                        </div>
+                        <div class="text-center p-3 bg-gray-600/30 rounded">
+                                <i data-feather="check-circle" class="w-5 h-5 text-green-400 mx-auto mb-2"></i>
+                                <span class="text-sm text-gray-300">HBLU Active</span>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                `;
+                document.body.appendChild(overlay);
+                feather.replace();
+                // Add close handler
+                overlay.querySelector('button').addEventListener('click', () => {
+                    overlay.remove();
+                });
+            } catch (error) {
+                console.log('Data exploration failed:', error);
+            }
+        };
+        window.loadMoreData = async () => {
+            try {
+                const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3&_start=3');
+                const newPosts = await response.json();
+                const postsContainer = document.querySelector('.grid-cols-1\\ md\\:grid-cols-3');
+                newPosts.forEach(post => {
+                    const postElement = document.createElement('div');
+                    postElement.className = 'thought-bubble bg-gray-700/50 p-6 rounded-xl border border-gray-600/50';
+                    postElement.innerHTML = `
+                        <h4 class="font-medium mb-2">${post.title.substring(0, 30)}...</h4>
+                        <p class="text-sm text-gray-300">${post.body.substring(0, 80)}...</p>
+                        <button class="mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm transition-colors" onclick="exploreData(${post.id})">
+                            Explore Trace
+                        </button>
+                    `;
+                    postsContainer.appendChild(postElement);
+                });
+                feather.replace();
+            } catch (error) {
+                console.log('Loading more data failed:', error);
+            }
+        };
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            initDataExploration();
+        });
 // System pulse animation
         const pulse = anime({
             targets: '#system-pulse',
                 `;
                     document.body.appendChild(ritualOverlay);
                     feather.replace();
                     // Handle consent acceptance
                     document.getElementById('accept-consent').addEventListener('click', () => {
                         ritualOverlay.remove();
                         text.textContent = 'Handshake Complete';
                         consentButton.classList.add('proof-halo');
+                        // Navigate to explore page
                         setTimeout(() => {
+                            window.location.href = 'explore.html';
                         }, 1500);
                     });
+// Handle consent decline
                     document.getElementById('decline-consent').addEventListener('click', () => {
                         ritualOverlay.remove();
                         text.textContent = 'Ready for Mutual Exploration';