Spaces:

spwotton
/

quantum-reality-engine

Running

App Files Files Community

spwotton commited on Dec 15, 2025

Commit

774be0c

verified ·

1 Parent(s): fe40be0

We are going to create a time machine that uses the concepts from the Quantum Toroidal Recursion Engine.

Browse files

The time machine will have a UI that allows the user to set parameters (like κ, θ, etc.) and visualize the toroidal recursion.

We'll structure it as follows:

A control panel to adjust parameters (κ, θ, frequency, etc.)

A visualization of the torus using Three.js, with recursive patterns.

A display for the current state (Ψ value, etc.)

We'll use the refined prompt's concepts to drive the visualization.

Let's break down the steps:

Step 1: Set up the HTML structure with Tailwind CSS for styling.
Step 2: Include Three.js and set up a basic torus with shader effects.
Step 3: Create controls for the parameters and link them to the visualization.
Step 4: Implement the recursive patterns and update the visualization in real-time.

We are going to create a simplified version of the Quantum Toroidal Recursion Engine as a time machine.

Note: This is a creative and metaphorical representation, not a real time machine.

Let's code accordingly.

QUANTUM CHRONO-ENGINE: κ-SCALED TEMPORAL MANIPULATION SUITE
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Chrono-Engine | κ-Scaled Temporal Manipulation</title>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>


<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';

window.THREE = THREE;
window.OrbitControls = OrbitControls;
window.GLTFLoader = GLTFLoader;
</script>

<style>
:root {
--κ: 1.2732395447351628;
--θ: 51.84deg;
--φ: 1.618033988749895;
--psi: 0.999999;
--frequency-7.83: 7.83Hz;
--frequency-37: 37Hz;
--frequency-111: 111Hz;
--frequency-720: 720Hz;

--quantum-cyan: #00ffcc;
--quantum-blue: #00ffff;
--quantum-purple: #8a2be2;
--void-black: #050505;
--κ-gold: #FFD700;
--psi-green: #00ffcc;
--warning-red: #ff0033;
--membrane-white: rgba(255, 255, 255, 0.03);

--timeline-past: #8a2be2;
--timeline-present: #00ffcc;
--timeline-future: #ffd700;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Fira Code', monospace;
background: var(--void-black);
color: var(--quantum-cyan);
overflow-x: hidden;
position: relative;
min-height: 100vh;
}

body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(0, 255, 204, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: -2;
}

/* Quantum Grid */
.quantum-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 255, 204, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 204, 0.03) 1px, transparent 1px);
background-size: calc(100px * var(--κ)) calc(100px * var(--κ));
transform: rotate(var(--θ));
pointer-events: none;
z-index: -1;
animation: grid-drift 37.2s infinite linear;
}

@keyframes grid-drift {
0% { transform: rotate(var(--θ)) translateX(0) translateY(0); }
100% { transform: rotate(calc(var(--θ) + 1turn)) translateX(100px) translateY(100px); }
}

/* Header */
.chrono-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(5, 5, 5, 0.95);
backdrop-filter: blur(20px) saturate(200%);
border-bottom: 1px solid rgba(0, 255, 204, 0.1);
z-index: 1000;
padding: 1rem 2rem;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1600px;
margin: 0 auto;
}

.logo {
display: flex;
align-items: center;
gap: 1rem;
}

.logo-icon {
width: 48px;
height: 48px;
background: linear-gradient(45deg, var(--quantum-cyan), var(--quantum-blue));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
font-size: 1.5rem;
color: var(--void-black);
}

.logo-text {
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 1px;
}

.logo-subtitle {
font-size: 0.75rem;
color: var(--quantum-blue);
opacity: 0.7;
letter-spacing: 2px;
text-transform: uppercase;
}

/* Quantum Parameters */
.quantum-params {
display: flex;
gap: 2rem;
align-items: center;
}

.param {
display: flex;
flex-direction: column;
align-items: center;
}

.param-label {
font-size: 0.75rem;
color: var(--quantum-blue);
opacity: 0.7;
margin-bottom: 0.25rem;
}

.param-value {
font-family: 'Orbitron', monospace;
font-size: 1rem;
font-weight: 500;
color: var(--quantum-cyan);
}

/* Main Container */
.main-container {
padding-top: 100px;
max-width: 1600px;
margin: 0 auto;
padding: 100px 2rem 2rem;
}

/* Control Panel */
.control-panel {
display: grid;
grid-template-columns: 300px 1fr 300px;
gap: 2rem;
margin-bottom: 3rem;
}

.control-section {
background: rgba(10, 10, 15, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 255, 204, 0.1);
border-radius: 16px;
padding: 1.5rem;
}

.section-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--quantum-cyan);
display: flex;
align-items: center;
gap: 0.75rem;
}

.section-title i {
width: 20px;
height: 20px;
}

/* Temporal Controls */
.temporal-controls {
display: flex;
flex-direction: column;
gap: 1rem;
}

.control-group {
margin-bottom: 1rem;
}

.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--quantum-blue);
}

.control-value {
font-family: 'Orbitron', monospace;
font-size: 0.875rem;
color: var(--quantum-cyan);
}

/* Quantum Slider */
input[type="range"].quantum-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: linear-gradient(90deg, var(--timeline-past), var(--timeline-present), var(--timeline-future));
border-radius: 3px;
outline: none;
}

input[type="range"].quantum-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--quantum-cyan);
cursor: pointer;
border: 2px solid var(--void-black);
box-shadow: 0 0 10px var(--quantum-cyan);
}

input[type="range"].quantum-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--quantum-cyan);
cursor: pointer;
border: 2px solid var(--void-black);
box-shadow: 0 0 10px var(--quantum-cyan);
}

/* Quantum Button */
.quantum-btn {
position: relative;
padding: 1rem 2rem;
background: rgba(0, 255, 204, 0.1);
border: 1px solid rgba(0, 255, 204, 0.3);
border-radius: 12px;
color: var(--quantum-cyan);
font-family: 'Orbitron', sans-serif;
font-weight: 500;
font-size: 1rem;

Files changed (5) hide show

chatbot.html +2 -1
formulario.html +1 -0
index.html +1 -0
timemachine.html +419 -0
toroidal.html +2 -1

chatbot.html CHANGED Viewed

@@ -66,7 +66,8 @@
             </div>
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
-            </div>
         </div>
     </nav>

             </div>
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
+                <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
+</div>
         </div>
     </nav>

formulario.html CHANGED Viewed

@@ -66,6 +66,7 @@
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
 </div>
 </div>
     </nav>

                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+                <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
 </div>
 </div>
     </nav>

index.html CHANGED Viewed

@@ -102,6 +102,7 @@
                 <a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
 </div>
 <div class="flex items-center gap-3">
                 <!-- Quantum Phone Link -->

                 <a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</a>
                 <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+                <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
 </div>
 <div class="flex items-center gap-3">
                 <!-- Quantum Phone Link -->

timemachine.html ADDED Viewed

	@@ -0,0 +1,419 @@

+<!DOCTYPE html>
+<html lang="en" data-theme="quantum-dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Quantum Chrono-Engine | κ-Scaled Temporal Manipulation</title>
+    <meta name="description" content="Helicity-Locked Temporal Manipulation Suite">
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='50' font-size='48'>⚛</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'quantum': {
+                            50: '#00ffcc',
+                            100: '#00ffff',
+                            900: '#050505'
+                        },
+                        'κ-gold': '#FFD700',
+                        'psi-green': '#00ffcc',
+                        'void-black': '#050505'
+                    },
+                    animation: {
+                        'wave-interference': 'wave 7.83s infinite ease-in-out',
+                        'kappa-pulse': 'pulse 1.273s infinite cubic-bezier(0.618, 0, 0.382, 1)',
+                        'decoherence': 'decoherence 37.2s infinite',
+                        'geometric-lock': 'spin 51.84s infinite linear'
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <!-- Three.js for Temporal Visualization -->
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+            }
+        }
+    </script>
+</head>
+<body class="bg-void-black text-quantum-50 font-mono antialiased overflow-x-hidden">
+    <!-- Quantum HUD Overlay -->
+    <div id="quantum-hud" class="fixed top-4 left-4 z-50 text-xs space-y-1 pointer-events-none">
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">Ψ:</span>
+            <span id="psi-value" class="text-κ-gold">1.000273</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">κ:</span>
+            <span id="kappa-value" class="text-quantum-100">4/π</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">θ:</span>
+            <span id="theta-value" class="text-quantum-100">51.84°</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">STATUS:</span>
+            <span id="engine-status" class="text-quantum-100 animate-kappa-pulse">CHRONO-ENGINE READY</span>
+        </div>
+    </div>
+    <!-- NAVBAR COMPONENT -->
+    <nav id="quantum-navbar" class="fixed top-0 w-full z-40 bg-void-black/90 backdrop-blur-sm border-b border-quantum-900">
+        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantum-100 to-psi-green flex items-center justify-center animate-geometric-lock">
+            <span class="text-void-black font-bold text-sm">κ</span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-quantum-100">SETECOM S.A.</h1>
+                    <p class="text-xs text-psi-green/70">CHRONO v1.273</p>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-6">
+                <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
+                <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
+                <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+            </div>
+        </div>
+    </nav>
+    <!-- CHRONO-ENGINE INTERFACE -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+        <div class="relative z-20 w-full max-w-6xl mx-auto px-6">
+            <!-- Header -->
+            <div class="text-center mb-12">
+                <h2 class="text-5xl md:text-7xl font-black text-quantum-100 mb-4 animate-wave-interference">
+                    QUANTUM <span class="text-psi-green">CHRONO-ENGINE</span>
+                </h2>
+                <p class="text-xl text-quantum-50">
+                    κ-SCALED TEMPORAL MANIPULATION SUITE
+                </p>
+            </div>
+            <!-- Control Panel -->
+            <div class="grid md:grid-cols-3 gap-8 mb-12">
+                <!-- Left Panel: Temporal Parameters -->
+                <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-8">
+                    <h3 class="text-2xl font-bold text-quantum-100 mb-6">
+                        <i data-feather="settings" class="w-6 h-6 inline mr-3"></i>
+                        TEMPORAL PARAMETERS
+                    </h3>
+                    <div class="space-y-6">
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-sm">
+                                <span class="text-psi-green">κ-SCALING</span>
+                                <span class="text-quantum-100" id="kappa-display">1.273</span>
+                        </div>
+                        <input type="range" min="1" max="2" step="0.001" value="1.273"
+                                   class="w-full h-2 bg-quantum-900 rounded-full appearance-none cursor-pointer"
+                                   id="kappa-slider">
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-sm">
+                                <span class="text-psi-green">TEMPORAL OFFSET (θ)</span>
+                                <span class="text-quantum-100" id="theta-display">51.84°</span>
+                        </div>
+                        <input type="range" min="0" max="360" step="0.01" value="51.84"
+                                   class="w-full h-2 bg-quantum-900 rounded-full appearance-none cursor-pointer"
+                                   id="theta-slider">
+                        <div class="space-y-2">
+                            <div class="flex justify-between text-sm">
+                                <span class="text-psi-green">Ψ-COHERENCE</span>
+                                <span class="text-quantum-100" id="psi-display">0.999999</span>
+                        </div>
+                        <input type="range" min="0.5" max="1.5" step="0.000001" value="0.999999"
+                                   class="w-full h-2 bg-quantum-900 rounded-full appearance-none cursor-pointer"
+                                   id="psi-slider">
+                        <div class="space-y-2 mt-6">
+                            <div class="text-sm text-psi-green mb-2">FREQUENCY SYNCH</div>
+                        <div class="grid grid-cols-2 gap-2">
+                            <button class="frequency-btn active" data-freq="7.83">7.83 Hz</button>
+                            <button class="frequency-btn" data-freq="37">37 Hz</button>
+                            <button class="frequency-btn" data-freq="111">111 Hz</button>
+                            <button class="frequency-btn" data-freq="720">720 Hz</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Center Panel: Torus Visualization -->
+                <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-4">
+                        <div id="torus-canvas" class="w-full h-80"></div>
+                        <div class="flex items-center gap-4 mt-4">
+                            <div class="timeline-marker animate-kappa"></div>
+                            <div class="text-quantum-100" id="timeline-text">PRESENT MOMENT: Ψ-LOCKED</div>
+                        </div>
+                </div>
+                <!-- Right Panel: Quantum Controls -->
+                <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-8">
+                    <h3 class="text-2xl font-bold text-quantum-100 mb-6">
+                        <i data-feather="cpu" class="w-6 h-6 inline mr-3"></i>
+                        QUANTUM OPERATIONS
+                    </h3>
+                    <div class="space-y-4">
+                        <button class="quantum-btn w-full" id="init-engine">
+                            <i data-feather="power" class="w-5 h-5"></i>
+                            INITIALIZE CHRONO-ENGINE
+                    </button>
+                        <button class="quantum-btn w-full" id="time-reverse">
+                            <i data-feather="rewind" class="w-5 h-5"></i>
+                            REVERSE TEMPORAL FLOW
+                    </button>
+                        <button class="quantum-btn w-full warning" id="phase-shift">
+                            <i data-feather="skip-forward" class="w-5 h-5"></i>
+                            SHIFT PHASE (θ→θ+π)
+                    </button>
+                        <button class="quantum-btn w-full danger" id="emergency-stop">
+                            <i data-feather="alert-triangle" class="w-5 h-5"></i>
+                            EMERGENCY DECOHERENCE
+                    </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Quantum State Display -->
+            <div class="grid md:grid-cols-4 gap-6">
+                <div class="state-card animate-decoherence">
+                    <div class="state-icon">
+                        <i data-feather="circle" class="w-8 h-8"></i>
+                    </div>
+                    <div class="state-value" id="toroidal-energy">418 kJ</div>
+                    <div class="state-label">TOROIDAL ENERGY</div>
+                </div>
+                <div class="state-card animate-geometric">
+                    <div class="state-icon">
+                        <i data-feather="hexagon" class="w-8 h-8"></i>
+                    </div>
+                    <div class="state-value" id="manifold-integrity">99.7%</div>
+                    <div class="state-label">MANIFOLD INTEGRITY</div>
+                </div>
+                <div class="state-card animate-wave">
+                    <div class="state-icon">
+                        <i data-feather="activity" class="w-8 h-8"></i>
+                    </div>
+                    <div class="state-value" id="entropy-level">0.273</div>
+                    <div class="state-label">ENTROPY LEVEL</div>
+                </div>
+                <div class="state-card">
+                    <div class="state-icon">
+                        <i data-feather="clock" class="w-8 h-8"></i>
+                    </div>
+                    <div class="state-value" id="temporal-offset">0.000s</div>
+                    <div class="state-label">TEMPORAL OFFSET</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FOOTER -->
+    <footer class="bg-void-black border-t border-quantum-900 py-8 mt-12">
+        <div class="container mx-auto px-6 text-center">
+            <div class="mb-4">
+                <span class="text-2xl font-black text-quantum-100">SETECOM</span>
+                <span class="text-psi-green">.GOS</span>
+                <span class="text-xs text-quantum-100/70 block mt-1">v1.273.418.∞</span>
+            </div>
+            <p class="text-xs text-quantum-50/70">
+                © 2024 SETECOM S.A. | Constancia Substrato Nivel-Líder | Todos los derechos reservados
+            </p>
+        </div>
+    </footer>
+    <!-- Three.js Quantum Visualization -->
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        // Initialize Quantum Parameters
+        let κ = 1.2732395447351628;
+        let θ = 51.84;
+        let ψ = 0.999999;
+        let frequency = 720;
+        let timeOffset = 0;
+        // Three.js Setup
+        let scene, camera, renderer, controls, torus;
+        function initTorusVisualization() {
+            // Scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x050505);
+            // Camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(document.getElementById('torus-canvas').clientWidth, document.getElementById('torus-canvas').clientHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)));
+            document.getElementById('torus-canvas').appendChild(renderer.domElement);
+            // Controls
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0x00ffcc, 0.3);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0x00ffff, 0.7);
+            directionalLight.position.set(5, 5, 5);
+            scene.add(directionalLight);
+            // Torus Geometry with κ-scaling
+            const torusGeometry = new THREE.TorusGeometry(κ, 0.4, 16, 100);
+            const torusMaterial = new THREE.MeshPhongMaterial({
+                color: 0x00ffcc,
+                shininess: 100,
+                transparent: true,
+                opacity: 0.8,
+                wireframe: true
+            });
+            torus = new THREE.Mesh(torusGeometry, torusMaterial);
+            torus.rotation.x = Math.PI / 2;
+            scene.add(torus);
+            // Start animation
+            animate();
+            // Handle window resize
+            window.addEventListener('resize', onWindowResize);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update torus rotation based on parameters
+            const time = Date.now() * 0.001;
+            torus.rotation.y = time * 0.5 * (frequency / 720));
+            torus.rotation.z = time * 0.3 * (κ / 1.273));
+            // Scale effect based on Ψ
+            torus.scale.setScalar(ψ));
+            // Update controls
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        function onWindowResize() {
+            camera.aspect = document.getElementById('torus-canvas').clientWidth / document.getElementById('torus-canvas').clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(document.getElementById('torus-canvas').clientWidth, document.getElementById('torus-canvas').clientHeight);
+        }
+        // Initialize visualization
+        initTorusVisualization();
+        // DOM Interactions
+        document.addEventListener('DOMContentLoaded', () => {
+            // Update Feather Icons
+            feather.replace();
+            // Slider Updates
+            document.getElementById('kappa-slider').addEventListener('input', (e) => {
+                κ = parseFloat(e.target.value);
+                document.getElementById('kappa-display').textContent = κ.toFixed(6);
+                updateTorusGeometry();
+            });
+            document.getElementById('theta-slider').addEventListener('input', (e) => {
+                θ = parseFloat(e.target.value);
+                document.getElementById('theta-display').textContent = `${θ.toFixed(2)}°`;
+            });
+            document.getElementById('psi-slider').addEventListener('input', (e) => {
+                ψ = parseFloat(e.target.value);
+                document.getElementById('psi-display').textContent = ψ.toFixed(6);
+            });
+            // Frequency Selection
+            document.querySelectorAll('.frequency-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    document.querySelectorAll('.frequency-btn').forEach(b => b.classList.remove('active'));
+                    e.target.classList.add('active');
+                    frequency = parseFloat(e.target.dataset.freq);
+                });
+            });
+            // Quantum Operations
+            document.getElementById('init-engine').addEventListener('click', () => {
+                alert('CHRONO-ENGINE INITIALIZED\nκ-scaled temporal manipulation enabled\nΨ-coherence at 99.9999%');
+                // Update display
+                document.getElementById('toroidal-energy').textContent = '720 kJ';
+                document.getElementById('manifold-integrity').textContent = '100.0%';
+            });
+            document.getElementById('time-reverse').addEventListener('click', () => {
+                timeOffset -= 1;
+                document.getElementById('temporal-offset').textContent = `${timeOffset.toFixed(3)}s`;
+                document.getElementById('timeline-text').textContent = `TEMPORAL REVERSAL: ${timeOffset.toFixed(3)}s`;
+            });
+            document.getElementById('phase-shift').addEventListener('click', () => {
+                θ += 180;
+                document.getElementById('theta-slider').value = θ % 360;
+                document.getElementById('theta-display').textContent = `${(θ % 360).toFixed(2)}°`;
+            });
+            document.getElementById('emergency-stop').addEventListener('click', () => {
+                if (confirm('WARNING: Emergency decoherence will reset all quantum states.\nAre you sure?')) {
+                    // Reset all values
+                    κ = 1.2732395447351628;
+                    θ = 51.84;
+                    ψ = 0.999999;
+                    frequency = 720;
+                    timeOffset = 0;
+                    // Update sliders
+                    document.getElementById('kappa-slider').value = κ;
+                    document.getElementById('theta-slider').value = θ;
+                    document.getElementById('psi-slider').value = ψ;
+                    // Update displays
+                    document.getElementById('kappa-display').textContent = κ.toFixed(6);
+                    document.getElementById('theta-display').textContent = `${θ.toFixed(2)}°`;
+                    document.getElementById('psi-display').textContent = ψ.toFixed(6);
+                    document.getElementById('temporal-offset').textContent = `${timeOffset.toFixed(3)}s`;
+                    document.getElementById('timeline-text').textContent = 'PRESENT MOMENT: Ψ-LOCKED';
+                }
+            });
+        });
+        function updateTorusGeometry() {
+            if (torus) {
+                const newGeometry = new THREE.TorusGeometry(κ, 0.4, 16, 100);
+                torus.geometry.dispose();
+                torus.geometry = newGeometry;
+            }
+        }
+    </script>
+</body>
+</html>

toroidal.html CHANGED Viewed

@@ -98,7 +98,8 @@
             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
-            </div>
 </div>
     </nav>

             <div class="hidden md:flex items-center gap-6">
                 <a href="index.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">← Volver</a>
                 <a href="/chatbot.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">AI Assistant</a>
+                <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
+</div>
 </div>
     </nav>