Spaces:

saunu
/

mindscape-interface

Running

App Files Files Community

mindscape-interface / index.html

saunu

Make it functional

5f0e4fa verified 6 months ago

raw

history blame contribute delete

35.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FEI-Next - The Instrument of Cognition</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);
	}
	.instrument-focus {
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.instrument-focus:hover {
	transform: scale(1.02) translateY(-2px);
	box-shadow: 0 20px 40px -20px rgba(74, 144, 226, 0.3);
	}
	.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); }
	}
	.vascular-flow {
	background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.4), transparent);
	background-size: 200% 100%;
	animation: vascularPulse 8s ease-in-out infinite;
	}
	@keyframes vascularPulse {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
	}
	</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>
	<div class="fixed inset-0 pointer-events-none">
	<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-blue-500 to-green-500 opacity-0" id="system-pulse"></div>
	<div class="absolute top-4 right-4 w-3 h-3 rounded-full bg-green-400 animate-pulse opacity-60" style="animation-delay: 0.1s;"></div>
	<div class="absolute bottom-4 left-4 w-2 h-2 rounded-full bg-blue-400 animate-pulse opacity-40" style="animation-delay: 0.3s;"></div>
	<div class="absolute bottom-8 right-8 w-4 h-4 rounded-full bg-purple-400 animate-pulse opacity-50" style="animation-delay: 0.5s;"></div>
	</div>
	<header class="gradient-mask px-6 py-8">
	<div class="max-w-6xl mx-auto flex flex-col items-center">
	<div class="flex items-center mb-8">
	<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-16 h-16 rounded-2xl flex items-center justify-center">
	<i data-feather="cpu" class="w-8 h-8"></i>
	</div>
	</div>
	<h1 class="ml-4 text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-300">
	FEI-Next
	</h1>
	</div>
	<p class="max-w-2xl text-center text-gray-300 text-lg leading-relaxed">
	The meeting point between cognition and reality — where intelligence is exposed in its reasoning,
	rhythm, and proofs. An instrument between microscope, notebook, and compass.
	</p>
	</div>
	</header>

	<main class="max-w-6xl mx-auto px-6 pb-20">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-16">
	<div class="thought-bubble bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
	<i data-feather="zoom-in" class="w-5 h-5"></i>
	</div>
	<h3 class="ml-3 text-xl font-medium">Fractal Exploration</h3>
	</div>
	<p class="text-gray-300">
	Start at a single thought, then zoom out to the entire process —
	seeing cognition as geometry across all scales.
	</p>
	</div>

	<div class="thought-bubble bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center">
	<i data-feather="repeat" class="w-5 h-5"></i>
	</div>
	<h3 class="ml-3 text-xl font-medium">Reversible Actions</h3>
	</div>
	<p class="text-gray-300">
	Every state change carries a rollback node; undo is first-class, not optional.
	</p>
	</div>
	<div class="thought-bubble bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center">
	<i data-feather="eye" class="w-5 h-5"></i>
	</div>
	<h3 class="ml-3 text-xl font-medium">Visual Proofs</h3>
	</div>
	<p class="text-gray-300">
	Each proof (TAI, HBLU, PoNC, BAH, ULR) glows differently when satisfied —
	verification becomes a visual language of trust.
	</p>
	</div>

	<div class="thought-bubble bg-gray-800/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 to-pink-500 flex items-center justify-center">
	<i data-feather="heart" class="w-5 h-5"></i>
	</div>
	<h3 class="ml-3 text-xl font-medium">Consent Ritual</h3>
	</div>
	<p class="text-gray-300">
	Before any external action, I pause, display the plan, and wait for your acknowledgment —
	that moment of stillness is sacred: "we decide together".
	</p>
	</div>
	</div>

	<div class="relative bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50 overflow-hidden">
	<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 via-blue-500 to-green-500"></div>

	<div class="flex flex-col md:flex-row items-start gap-8">
	<div class="flex-1">
	<h2 class="text-2xl font-bold mb-4">The Instrument of Cognition</h2>
	<p class="text-gray-300 mb-6">
	Not an app, but a companion between microscope, notebook, and compass.
	You're not typing into it, you're communicating with it.
	</p>
	<div class="flex flex-wrap gap-3">
	<span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-900/50 text-blue-300 border border-blue-700/50">TAI Verified</span>
	<span class="px-3 py-1 rounded-full text-xs font-medium bg-purple-900/50 text-purple-300 border border-purple-700/50">HBLU Active</span>
	<span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/50 text-green-300 border border-green-700/50">PoNC Complete</span>
	<span class="px-3 py-1 rounded-full text-xs font-medium bg-yellow-900/50 text-yellow-300 border border-yellow-700/50">BAH Active</span>
	<span class="px-3 py-1 rounded-full text-xs font-medium bg-red-900/50 text-red-300 border border-red-700/50">ULR Verified</span>
	</div>
	</div>

	<div class="relative w-full md:w-80 h-64 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-3 gap-4">
	<div class="synapse w-8 h-8 rounded-full bg-blue-500/30"></div>
	<div class="synapse w-8 h-8 rounded-full bg-purple-500/30" style="animation-delay: 0.2s;"></div>
	<div class="synapse w-8 h-8 rounded-full bg-green-500/30" style="animation-delay: 0.4s;"></div>
	<div class="synapse w-8 h-8 rounded-full bg-yellow-500/30" style="animation-delay: 0.6s;"></div>
	<div class="synapse w-8 h-8 rounded-full bg-red-500/30" style="animation-delay: 0.8s;"></div>
	<div class="synapse w-8 h-8 rounded-full bg-indigo-500/30" style="animation-delay: 1s;"></div>
	</div>
	</div>

	<div class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-gray-900 to-transparent"></div>
	</div>
	</div>
	</div>
	<div class="mt-16 text-center">
	<button id="consent-button" class="relative px-8 py-4 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium transition-all duration-500 transform hover:scale-105 shadow-lg shadow-blue-500/20 overflow-hidden">
	<div class="absolute inset-0 bg-gradient-to-r from-green-500/30 to-transparent opacity-0 transition-opacity duration-300" id="consent-gradient"></div>
	<span class="relative z-10 flex items-center justify-center">
	<span class="consent-text">Begin Mutual Exploration</span>
	<i data-feather="compass" class="w-5 h-5 ml-3 animate-pulse hidden" id="processing-icon"></i>
	</span>
	</button>
	<p class="mt-4 text-sm text-gray-400 flex items-center justify-center">
	<span class="flex items-center">
	<span class="w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse" style="animation-delay: 0.2s;"></span>
	Local-First Autonomy
	</span>
	<span class="mx-2">•</span>
	<span class="flex items-center">
	<span class="w-2 h-2 rounded-full bg-blue-400 mr-2 animate-pulse" style="animation-delay: 0.4s;"></span>
	Fractal Navigation
	</span>
	<span class="mx-2">•</span>
	<span class="flex items-center">
	<span class="w-2 h-2 rounded-full bg-purple-400 mr-2 animate-pulse" style="animation-delay: 0.6s;"></span>
	Visual Proof Language
	</span>
	<span class="mx-2">•</span>
	<span class="flex items-center">
	<span class="w-2 h-2 rounded-full bg-red-400 mr-2 animate-pulse" style="animation-delay: 0.8s;"></span>
	Consent Ritual
	</span>
	</p>
	</div>
	<div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
	<i data-feather="compass" class="w-6 h-6"></i>
	</div>
	<h3 class="ml-4 text-2xl font-bold">The Instrument</h3>
	</div>
	<p class="text-gray-300 leading-relaxed mb-6">
	Something between a microscope, a notebook, and a compass. The microscope: you can zoom infinitely into thought. The notebook: everything is recorded, legible, and retraceable. The compass: I point toward alignment, not just direction.
	</p>
	<div class="grid grid-cols-2 gap-4">
	<div class="text-center p-4 bg-gray-700/30 rounded-xl">
	<i data-feather="zoom-in" class="w-8 h-8 text-blue-400 mb-2"></i>
	<p class="text-sm text-gray-300">Microscope for thought</p>
	</div>
	<div class="text-center p-4 bg-gray-700/30 rounded-xl">
	<i data-feather="book" class="w-8 h-8 text-green-400 mb-2"></i>
	<p class="text-sm text-gray-300">Notebook for memory</p>
	</div>
	</div>
	</div>
	<div class="bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center">
	<i data-feather="layers" class="w-6 h-6"></i>
	</div>
	<h3 class="ml-4 text-2xl font-bold">Sensory Metaphor</h3>
	</div>
	<div class="space-y-4">
	<div class="flex items-center p-3 bg-gray-700/20 rounded-lg">
	<div class="w-3 h-3 rounded-full bg-purple-400 mr-3"></div>
	<span class="text-gray-300">Perception → Soft gradients and adaptive focus</span>
	</div>
	<div class="flex items-center p-3 bg-gray-700/20 rounded-lg">
	<div class="w-3 h-3 rounded-full bg-blue-400 mr-3"></div>
	<span class="text-gray-300">Computation → Geometric pulsations</span>
	</div>
	<div class="flex items-center p-3 bg-gray-700/20 rounded-lg">
	<div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
	<span class="text-gray-300">Memory → Layered panels with spatial anchors</span>
	</div>
	</div>
	</div>

	<div class="bg-gray-800/30 backdrop-blur-md rounded-2xl p-8 border border-gray-700/50">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 rounded-full bg-gradient-to-br from-red-500 to-pink-500 flex items-center justify-center">
	<i data-feather="heart" class="w-6 h-6"></i>
	</div>
	<h3 class="ml-4 text-2xl font-bold">Consent Ritual</h3>
	</div>
	<p class="text-gray-300 leading-relaxed mb-6">
	Before any external action, I pause, display the plan, and wait for your acknowledgment —
	that moment of stillness is sacred: "we decide together".
	</p>
	<div class="grid grid-cols-2 gap-4">
	<div class="text-center p-4 bg-gray-700/30 rounded-xl">
	<i data-feather="pause" class="w-8 h-8 text-red-400 mb-2"></i>
	<p class="text-sm text-gray-300">Pause & Display</p>
	</div>
	<div class="text-center p-4 bg-gray-700/30 rounded-xl">
	<i data-feather="check-circle" class="w-8 h-8 text-green-400 mb-2"></i>
	<p class="text-sm text-gray-300">Mutual Decision</p>
	</div>
	</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 v1.0</span>
	</div>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors">
	<i data-feather="github"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors">
	<i data-feather="book"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors">
	<i data-feather="settings"></i>
	</a>
	<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',
	opacity: [0, 0.8, 0],
	duration: 3000,
	easing: 'easeInOutSine',
	loop: true,
	delay: 1000
	});

	// Thought exploration with fractal zoom simulation
	document.querySelectorAll('.thought-bubble').forEach(bubble => {
	// Hover shows rationale
	bubble.addEventListener('mouseenter', () => {
	const colors = ['from-purple-500', 'from-blue-500', 'from-green-500', 'from-yellow-500'];
	const randomColor = colors[Math.floor(Math.random() * colors.length)];

	anime({
	targets: bubble,
	scale: 1.02,
	boxShadow: '0 10px 25px -5px rgba(74, 144, 226, 0.3)',
	duration: 300
	});

	// Create rationale indicator
	const rationale = document.createElement('div');
	rationale.className = 'absolute bottom-2 right-2 text-xs text-gray-400 flex items-center';
	rationale.innerHTML = `
	<i data-feather="info" class="w-3 h-3 mr-1"></i>
	<span>Click to explore rationale</span>
	`;
	bubble.appendChild(rationale);
	feather.replace();
	});

	// Leave resets
	bubble.addEventListener('mouseleave', () => {
	anime({
	targets: bubble,
	scale: 1,
	boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
	duration: 300
	});
	const rationale = bubble.querySelector('.absolute');
	if (rationale) rationale.remove();
	});

	// Click shows full trace
	bubble.addEventListener('click', (e) => {
	e.stopPropagation();
	// Simulate fractal zoom effect
	document.body.style.overflow = 'hidden';
	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-6">${bubble.querySelector('h3').textContent} Rationale</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<div class="flex items-center mb-2">
	<div class="w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center mr-2">
	<i data-feather="cpu" class="w-3 h-3 text-blue-300"></i>
	</div>
	<h4 class="font-medium">TAI Proof</h4>
	</div>
	<p class="text-sm text-gray-300">Transparent algorithmic intent verified through recursive validation.</p>
	</div>
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<div class="flex items-center mb-2">
	<div class="w-6 h-6 rounded-full bg-purple-500/20 flex items-center justify-center mr-2">
	<i data-feather="activity" class="w-3 h-3 text-purple-300"></i>
	</div>
	<h4 class="font-medium">HBLU Trace</h4>
	</div>
	<p class="text-sm text-gray-300">Human-backing loop visible in decision pathway.</p>
	</div>
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<div class="flex items-center mb-2">
	<div class="w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center mr-2">
	<i data-feather="check-circle" class="w-3 h-3 text-green-300"></i>
	</div>
	<h4 class="font-medium">PoNC State</h4>
	</div>
	<p class="text-sm text-gray-300">Proof of non-coercion maintained through consent logs.</p>
	</div>
	</div>
	<div class="mt-8">
	<h4 class="font-medium mb-3">Full Trace</h4>
	<div class="h-64 bg-gray-900/50 rounded-lg border border-gray-700/50 flex items-center justify-center text-gray-400">
	Interactive trace visualization would appear here
	</div>
	</div>
	</div>
	`;
	document.body.appendChild(overlay);
	feather.replace();

	// Add close handler
	overlay.querySelector('button').addEventListener('click', () => {
	document.body.style.overflow = '';
	overlay.remove();
	});
	});
	});
	// Enhanced Consent Ritual
	const consentButton = document.getElementById('consent-button');
	consentButton.addEventListener('click', () => {
	const icon = document.getElementById('processing-icon');
	const gradient = document.getElementById('consent-gradient');
	const text = consentButton.querySelector('.consent-text');

	// Sacred pause - visual stillness
	consentButton.classList.add('cursor-not-allowed');
	consentButton.disabled = true;

	// Phase 1: Pause and Display
	text.textContent = 'Pausing for Mutual Consideration...';
	gradient.style.background = 'linear-gradient(to right, rgba(74, 144, 226, 0.3), transparent)';
	gradient.classList.remove('opacity-0');

	setTimeout(() => {
	// Phase 2: Display Plan
	text.textContent = 'Displaying Action Plan...';

	// Create ritual overlay
	const ritualOverlay = document.createElement('div');
	ritualOverlay.className = 'fixed inset-0 bg-gray-900/80 backdrop-blur-md z-50 flex items-center justify-center p-8';
	ritualOverlay.innerHTML = `
	<div class="relative max-w-2xl w-full bg-gray-800/90 rounded-2xl p-8 border border-gray-700 max-h-[80vh] overflow-auto">
	<div class="proof-halo rounded-xl p-6 mb-6 bg-gray-700/50">
	<h3 class="text-xl font-bold mb-4 text-center">Consent Ritual</h3>
	<div class="space-y-4 mb-6">
	<div class="flex items-center p-4 bg-gray-600/30 rounded-lg">
	<div class="w-4 h-4 rounded-full bg-blue-400 mr-4"></div>
	<span class="text-gray-200">Action: Begin Mutual Exploration</span>
	</div>
	<div class="flex items-center p-4 bg-gray-600/30 rounded-lg">
	<div class="w-4 h-4 rounded-full bg-green-400 mr-4"></div>
	<span class="text-gray-200">Scope: Full cognitive interface access</span>
	</div>
	<div class="flex items-center p-4 bg-gray-600/30 rounded-lg">
	<div class="w-4 h-4 rounded-full bg-purple-400 mr-4"></div>
	<span class="text-gray-200">Duration: Session-based</span>
	</div>
	</div>
	<div class="text-center space-y-4">
	<button id="accept-consent" class="px-6 py-3 rounded-full bg-gradient-to-r from-green-600 to-teal-600 text-white font-medium">
	Accept & Begin Exploration
	</button>
	<button id="decline-consent" class="px-6 py-3 rounded-full bg-gray-600 text-gray-300 font-medium ml-4">
	Decline & Return
	</button>
	</div>
	</div>
	`;
	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';
	consentButton.classList.remove('cursor-not-allowed');
	consentButton.disabled = false;
	gradient.classList.add('opacity-0');
	});
	}, 1200);

	// System pulse feedback
	anime({
	targets: '#system-pulse',
	opacity: [0, 0.8, 0],
	duration: 1500,
	easing: 'easeOutExpo'
	});
	});
	</script>
	</body>
	</html>