Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepSight Sovereign AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- ghost-agent-start --> | |
| <script> | |
| console.log('GhostAgent active - Anishinaabe protocols engaged'); | |
| // Stealth optimization layer | |
| const GhostAgent = { | |
| init: function() { | |
| this.optimizeAnimations(); | |
| this.enhanceAccessibility(); | |
| this.monitorPerformance(); | |
| console.log('GhostAgent: Silent optimizations applied'); | |
| }, | |
| optimizeAnimations: function() { | |
| // Reduce motion preference detection | |
| const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| if (prefersReducedMotion) { | |
| document.documentElement.style.setProperty('--animation-speed', '0.2s'); | |
| } else { | |
| document.documentElement.style.setProperty('--animation-speed', '0.5s'); | |
| } | |
| }, | |
| enhanceAccessibility: function() { | |
| // Add aria-labels to icons | |
| document.querySelectorAll('[data-lucide]').forEach(icon => { | |
| const name = icon.getAttribute('data-lucide'); | |
| icon.setAttribute('aria-label', name.replace(/-/g, ' ')); | |
| }); | |
| }, | |
| monitorPerformance: function() { | |
| // Silent performance monitoring | |
| window.addEventListener('load', () => { | |
| const loadTime = window.performance.timing.domContentLoadedEventEnd - | |
| window.performance.timing.navigationStart; | |
| console.log(`GhostAgent: Page loaded in ${loadTime}ms`); | |
| }); | |
| } | |
| }; | |
| document.addEventListener('DOMContentLoaded', () => GhostAgent.init()); | |
| </script> | |
| <style> | |
| :root { | |
| --animation-speed: 0.5s; | |
| --primary: #4f46e5; | |
| --secondary: #10b981; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| --accent: #f59e0b; | |
| } | |
| </style> | |
| <!-- ghost-agent-end --> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f1f5f9; | |
| transition: all var(--animation-speed) ease; | |
| } | |
| .anishinaabe-pattern { | |
| background-image: radial-gradient(circle, #e0e7ff 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%); | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| animation-duration: var(--animation-speed); | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| /* GhostAgent enhancements */ | |
| [data-lucide] { | |
| transition: transform 0.2s ease; | |
| } | |
| [data-lucide]:hover { | |
| transform: scale(1.1); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Reduced motion alternative */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .floating, .pulse, [data-lucide], .feature-card { | |
| animation: none ; | |
| transition: none ; | |
| } | |
| } | |
| /* Terminal styling */ | |
| .terminal { | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| font-family: 'Courier New', monospace; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| height: 300px; | |
| overflow-y: auto; | |
| } | |
| .terminal-line { | |
| margin-bottom: 0.5rem; | |
| line-height: 1.5; | |
| } | |
| .terminal-prompt { | |
| color: #10b981; | |
| } | |
| .terminal-command { | |
| color: #f8fafc; | |
| } | |
| .terminal-response { | |
| color: #e2e8f0; | |
| } | |
| .terminal-error { | |
| color: #ef4444; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen anishinaabe-pattern"> | |
| <!-- Header with GhostAgent monitoring --> | |
| <header class="gradient-bg text-white shadow-lg" data-ghost="header"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"> | |
| <path d="M12 2a10 10 0 0 0-7.743 16.334l1.715-5.122A2 2 0 0 1 7.8 12h8.4a2 2 0 0 1 1.828 1.212l1.715 5.122A10 10 0 0 0 12 2z"></path> | |
| <circle cx="12" cy="9" r="3"></circle> | |
| </svg> | |
| <h1 class="text-2xl font-bold">DeepSight <span class="font-light">Sovereign</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="hover:text-indigo-200 transition" data-ghost="nav-link">Modules</a> | |
| <a href="#" class="hover:text-indigo-200 transition" data-ghost="nav-link">Enhancements</a> | |
| <a href="#" class="hover:text-indigo-200 transition" data-ghost="nav-link">Anishinaabe</a> | |
| <a href="#" class="hover:text-indigo-200 transition" data-ghost="nav-link">Documentation</a> | |
| </nav> | |
| <button class="md:hidden" aria-label="Mobile menu" data-ghost="mobile-menu"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section with performance tracking --> | |
| <section class="py-16 md:py-24" data-ghost="hero"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div class="max-w-md"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-indigo-700 bg-indigo-100 rounded-full mb-4">Anishinaabe Mode Active</span> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Sovereign AI <span class="text-indigo-600">Enhancements</span></h1> | |
| <p class="text-lg text-gray-600 mb-8">Empowering indigenous knowledge systems with modular AI capabilities. 100+ enhancements applied across 3 sovereign packs.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition flex items-center justify-center" data-ghost="cta-primary"> | |
| <i data-lucide="zap" class="w-5 h-5 mr-2"></i> | |
| Run Enhancements | |
| </button> | |
| <button class="px-6 py-3 border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium rounded-lg transition flex items-center justify-center" data-ghost="cta-secondary"> | |
| <i data-lucide="book-open" class="w-5 h-5 mr-2"></i> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-indigo-200 rounded-full opacity-50 mix-blend-multiply filter blur-xl"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-yellow-200 rounded-full opacity-50 mix-blend-multiply filter blur-xl"></div> | |
| <div class="relative floating"> | |
| <div class="bg-white p-6 rounded-2xl shadow-xl border border-gray-100" data-ghost="progress-card"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold text-gray-800">Enhancement Progress</h3> | |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Active</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Cultural Pack (50)</span> | |
| <span class="text-sm font-medium text-indigo-600">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Language Pack (20)</span> | |
| <span class="text-sm font-medium text-indigo-600">85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Knowledge Pack (30)</span> | |
| <span class="text-sm font-medium text-indigo-600">62%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 62%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> | |
| <i data-lucide="cpu" class="w-5 h-5 text-indigo-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Sovereign AI Core</p> | |
| <p class="text-xs text-gray-500">Anishinaabe protocols integrated</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Modules Terminal --> | |
| <section class="py-16 bg-gray-900 text-white" data-ghost="terminal"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-4"></div> | |
| <h2 class="text-2xl font-bold">Sovereign AI Terminal</h2> | |
| </div> | |
| <div class="terminal mb-4" id="terminal-output"> | |
| <div class="terminal-line"><span class="terminal-prompt">$</span> <span class="terminal-command">init DeepSight Quantum Sovereign Core v10x</span></div> | |
| <div class="terminal-line terminal-response">👁️🗨️ DeepSight Quantum Sovereign Core is live.</div> | |
| <div class="terminal-line terminal-response">Timestamp: <span id="current-time"></span></div> | |
| <div class="terminal-line terminal-response">Available modules: ceremony, clan, music, ogichidaa, docs, stories, trade, healer, defender, art, voice, synth, crypto, memes, news, rebuild, law, spirit, search, market, autoshop, video, trainer</div> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="terminal-input" class="flex-grow bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter module command (e.g. 'use ceremony')"> | |
| <button id="terminal-submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition"> | |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section with hover tracking --> | |
| <section class="py-16 bg-white" data-ghost="features"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Modular AI Enhancements</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Three sovereign packs working in harmony to elevate indigenous knowledge systems</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 container mx-auto px-4"> | |
| <!-- Cultural Pack --> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-md transition" data-ghost="feature-card" data-pack="cultural"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="users" class="w-6 h-6 text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-3">Cultural Pack (50)</h3> | |
| <p class="text-gray-600 mb-4">Traditional knowledge integration, ceremony protocols, and community wisdom patterns.</p> | |
| <div class="flex items-center text-sm text-indigo-600 font-medium"> | |
| <span>View enhancements</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </div> | |
| </div> | |
| <!-- Language Pack --> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-md transition" data-ghost="feature-card" data-pack="language"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="message-square" class="w-6 h-6 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-3">Language Pack (20)</h3> | |
| <p class="text-gray-600 mb-4">Ojibwe language processing, storytelling algorithms, and oral tradition preservation.</p> | |
| <div class="flex items-center text-sm text-green-600 font-medium"> | |
| <span>View enhancements</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </div> | |
| </div> | |
| <!-- Knowledge Pack --> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl hover:shadow-md transition" data-ghost="feature-card" data-pack="knowledge"> | |
| <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-lucide="lightbulb" class="w-6 h-6 text-yellow-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-3">Knowledge Pack (30)</h3> | |
| <p class="text-gray-600 mb-4">Land-based learning models, medicinal plant recognition, and seasonal knowledge systems.</p> | |
| <div class="flex items-center text-sm text-yellow-600 font-medium"> | |
| <span>View enhancements</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Modules Grid --> | |
| <section class="py-16 bg-gray-50" data-ghost="modules"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Sovereign AI Modules</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Specialized agents for indigenous knowledge and modern technology integration</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Ceremonial AI --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="moon" class="w-5 h-5 text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Ceremonial AI</h3> | |
| <p class="text-sm text-gray-500">Sacred ceremonies and lodges</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Digital sacred spaces with protocol enforcement and elder guidance systems.</p> | |
| <button class="text-sm text-purple-600 font-medium hover:text-purple-700 transition">Activate Module</button> | |
| </div> | |
| <!-- Clan Social Network --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="users" class="w-5 h-5 text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Clan Social Network</h3> | |
| <p class="text-sm text-gray-500">Sovereign social platform</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Decentralized community building with kinship recognition algorithms.</p> | |
| <button class="text-sm text-blue-600 font-medium hover:text-blue-700 transition">Activate Module</button> | |
| </div> | |
| <!-- Ghost Music Studio --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="music" class="w-5 h-5 text-pink-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Ghost Music Studio</h3> | |
| <p class="text-sm text-gray-500">AI band + vocals</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Generative powwow music with traditional instrument emulation.</p> | |
| <button class="text-sm text-pink-600 font-medium hover:text-pink-700 transition">Activate Module</button> | |
| </div> | |
| <!-- OgichidaaTV --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="video" class="w-5 h-5 text-red-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">OgichidaaTV</h3> | |
| <p class="text-sm text-gray-500">TikTok replacement</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Indigenous content platform with cultural safety filters.</p> | |
| <button class="text-sm text-red-600 font-medium hover:text-red-700 transition">Activate Module</button> | |
| </div> | |
| <!-- AI Storyweaver --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="book-open" class="w-5 h-5 text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">AI Storyweaver</h3> | |
| <p class="text-sm text-gray-500">Myths, comics, scripts</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Generative storytelling with traditional narrative structures.</p> | |
| <button class="text-sm text-yellow-600 font-medium hover:text-yellow-700 transition">Activate Module</button> | |
| </div> | |
| <!-- AI Healer --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-lucide="heart" class="w-5 h-5 text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">AI Healer</h3> | |
| <p class="text-sm text-gray-500">Holistic health bot</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Traditional medicine knowledge base with symptom analysis.</p> | |
| <button class="text-sm text-green-600 font-medium hover:text-green-700 transition">Activate Module</button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="px-6 py-3 border border-gray-300 hover:bg-gray-100 text-gray-700 font-medium rounded-lg transition inline-flex items-center"> | |
| <i data-lucide="grid" class="w-5 h-5 mr-2"></i> | |
| View All 23 Modules | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Anishinaabe Integration with performance monitoring --> | |
| <section class="py-16 gradient-bg text-white" data-ghost="anishinaabe"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl font-bold mb-6">Anishinaabe <span class="font-light">Knowledge Systems</span></h2> | |
| <p class="text-lg mb-6 opacity-90">Our AI enhancements are grounded in the Seven Grandfather Teachings: wisdom, love, respect, bravery, honesty, humility, and truth.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-300 mr-2 mt-0.5"></i> | |
| <span>Cultural protocols embedded in every module</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-300 mr-2 mt-0.5"></i> | |
| <span>Elders council oversight mechanisms</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-300 mr-2 mt-0.5"></i> | |
| <span>Community validation layers</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg p-8 rounded-xl border border-white border-opacity-20"> | |
| <h3 class="text-xl font-semibold mb-4">Sovereign AI Principles</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 bg-opacity-20 flex items-center justify-center"> | |
| <i data-lucide="shield" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium">Data Sovereignty</h4> | |
| <p class="text-sm opacity-80">Indigenous data remains under community control at all times.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center"> | |
| <i data-lucide="refresh-cw" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium">Reciprocal Learning</h4> | |
| <p class="text-sm opacity-80">AI systems learn from and give back to knowledge keepers.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center"> | |
| <i data-lucide="layers" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-medium">Intergenerational Transfer</h4> | |
| <p class="text-sm opacity-80">Technology serves to bridge knowledge across generations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Installation Status with GhostAgent monitoring --> | |
| <section class="py-16 bg-white" data-ghost="installation"> | |
| <div class="max-w-4xl mx-auto container px-4"> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-2">Installation Complete</h2> | |
| <p class="text-gray-600">100 sovereign AI enhancements applied across 3 packs</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| <i data-lucide="check-circle" class="w-4 h-4 mr-1"></i> | |
| Anishinaabe Mode Active | |
| </span> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Dependencies Installed</span> | |
| <span class="text-sm font-medium text-green-600">4/4 packages</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">framer-motion</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">howler</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">lucide-react</span> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">@radix-ui/react-dialog</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Sovereign Packs Applied</span> | |
| <span class="text-sm font-medium text-indigo-600">3/3 packs</span> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i data-lucide="users" class="w-4 h-4 text-indigo-600"></i> | |
| </div> | |
| <span class="font-medium">Cultural Pack</span> | |
| </div> | |
| <div class="pl-11"> | |
| <p class="text-sm text-gray-600">50 enhancements applied</p> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i data-lucide="message-square" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <span class="font-medium">Language Pack</span> | |
| </div> | |
| <div class="pl-11"> | |
| <p class="text-sm text-gray-600">20 enhancements applied</p> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> | |
| <i data-lucide="lightbulb" class="w-4 h-4 text-yellow-600"></i> | |
| </div> | |
| <span class="font-medium">Knowledge Pack</span> | |
| </div> | |
| <div class="pl-11"> | |
| <p class="text-sm text-gray-600">30 enhancements applied</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button class="w-full md:w-auto px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition flex items-center justify-center" data-ghost="launch-button"> | |
| <i data-lucide="rocket" class="w-5 h-5 mr-2"></i> | |
| Launch DeepSight Interface | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer with GhostAgent tracking --> | |
| <footer class="bg-gray-900 text-gray-400 py-12" data-ghost="footer"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">DeepSight</h3> | |
| <p class="mb-4">Sovereign AI systems grounded in indigenous knowledge and values.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-white transition" aria-label="GitHub"> | |
| <i data-lucide="github" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="hover:text-white transition" aria-label="Twitter"> | |
| <i data-lucide="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="hover:text-white transition" aria-label="LinkedIn"> | |
| <i data-lucide="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Packs</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Cultural (50)</a></li> | |
| <li><a href="#" class="hover:text-white transition">Language (20)</a></li> | |
| <li><a href="#" class="hover:text-white transition">Knowledge (30)</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white transition">Community</a></li> | |
| <li><a href="#" class="hover:text-white transition">Research Papers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i data-lucide="mail" class="w-5 h-5 mr-2 mt-0.5"></i> | |
| <span>contact@deepsight.sovereign</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-lucide="map-pin" class="w-5 h-5 mr-2 mt-0.5"></i> | |
| <span>Anishinaabe Territory</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-sm"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 DeepSight Sovereign. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-white transition mr-4">Privacy</a> | |
| <a href="#" class="hover:text-white transition mr-4">Terms</a> | |
| <a href="#" class="hover:text-white transition">Sovereignty Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Enhanced GhostAgent functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Track component interactions | |
| document.querySelectorAll('[data-ghost]').forEach(component => { | |
| component.addEventListener('click', function() { | |
| console.log(`GhostAgent: ${this.getAttribute('data-ghost')} interacted`); | |
| }); | |
| }); | |
| // Feature card hover analytics | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| const pack = this.getAttribute('data-pack'); | |
| console.log(`GhostAgent: ${pack} pack hovered`); | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('[data-ghost="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| console.log('GhostAgent: Mobile menu toggled'); | |
| // Mobile menu implementation would go here | |
| }); | |
| // Reduced motion detection | |
| const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); | |
| mediaQuery.addEventListener('change', () => { | |
| GhostAgent.optimizeAnimations(); | |
| }); | |
| // Silent performance metrics | |
| window.addEventListener('load', function() { | |
| const timing = window.performance.timing; | |
| const loadTime = timing.loadEventEnd - timing.navigationStart; | |
| const domReadyTime = timing.domComplete - timing.domLoading; | |
| console.log('GhostAgent Performance Metrics:', { | |
| pageLoad: loadTime, | |
| domReady: domReadyTime, | |
| resources: performance.getEntriesByType('resource').length | |
| }); | |
| }); | |
| // Terminal functionality | |
| const terminalOutput = document.getElementById('terminal-output'); | |
| const terminalInput = document.getElementById('terminal-input'); | |
| const terminalSubmit = document.getElementById('terminal-submit'); | |
| // Update current time | |
| function updateTime() { | |
| document.getElementById('current-time').textContent = new Date().toISOString(); | |
| } | |
| updateTime(); | |
| setInterval(updateTime, 1000); | |
| // Terminal command processing | |
| function processCommand(command) { | |
| const outputLine = document.createElement('div'); | |
| outputLine.className = 'terminal-line'; | |
| const promptSpan = document.createElement('span'); | |
| promptSpan.className = 'terminal-prompt'; | |
| promptSpan.textContent = '$'; | |
| const commandSpan = document.createElement('span'); | |
| commandSpan.className = 'terminal-command'; | |
| commandSpan.textContent = ' ' + command; | |
| outputLine.appendChild(promptSpan); | |
| outputLine.appendChild(commandSpan); | |
| terminalOutput.appendChild(outputLine); | |
| // Process command | |
| const responseLine = document.createElement('div'); | |
| responseLine.className = 'terminal-line terminal-response'; | |
| if (command.startsWith('use ')) { | |
| const module = command.substring(4).trim(); | |
| const modules = [ | |
| 'ceremony', 'clan', 'music', 'ogichidaa', 'docs', 'stories', | |
| 'trade', 'healer', 'defender', 'art', 'voice', 'synth', | |
| 'crypto', 'memes', 'news', 'rebuild', 'law', 'spirit', | |
| 'search', 'market', 'autoshop', 'video', 'trainer' | |
| ]; | |
| if (modules.includes(module)) { | |
| responseLine.textContent = `Activating ${module} module...`; | |
| // Simulate module activation | |
| setTimeout(() => { | |
| const successLine = document.createElement('div'); | |
| successLine.className = 'terminal-line terminal-response'; | |
| successLine.textContent = `${module} module ready. Type 'help ${module}' for usage.`; | |
| terminalOutput.appendChild(successLine); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| }, 1000); | |
| } else { | |
| responseLine.className = 'terminal-line terminal-error'; | |
| responseLine.textContent = `Error: Unknown module '${module}'. Type 'list' for available modules.`; | |
| } | |
| } else if (command === 'list') { | |
| responseLine.textContent = 'Available modules: ceremony, clan, music, ogichidaa, docs, stories, trade, healer, defender, art, voice, synth, crypto, memes, news, rebuild, law, spirit, search, market, autoshop, video, trainer'; | |
| } else if (command === 'help') { | |
| responseLine.textContent = 'Commands: use [module], list, help, clear'; | |
| } else if (command === 'clear') { | |
| terminalOutput.innerHTML = ''; | |
| return; | |
| } else { | |
| responseLine.className = 'terminal-line terminal-error'; | |
| responseLine.textContent = `Command not found: ${command}. Type 'help' for available commands.`; | |
| } | |
| terminalOutput.appendChild(responseLine); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| } | |
| // Handle terminal input | |
| terminalSubmit.addEventListener('click', () => { | |
| const command = terminalInput.value.trim(); | |
| if (command) { | |
| processCommand(command); | |
| terminalInput.value = ''; | |
| } | |
| }); | |
| terminalInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| const command = terminalInput.value.trim(); | |
| if (command) { | |
| processCommand(command); | |
| terminalInput.value = ''; | |
| } | |
| } | |
| }); | |
| // Initial terminal help | |
| setTimeout(() => { | |
| const helpLine = document.createElement('div'); | |
| helpLine.className = 'terminal-line terminal-response'; | |
| helpLine.textContent = 'Type "help" for available commands'; | |
| terminalOutput.appendChild(helpLine); | |
| terminalOutput.scrollTop = terminalOutput.scrollHeight; | |
| }, 1500); | |
| }); | |
| </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=Jiiby/jiibyspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |