File size: 7,869 Bytes
37dbe07
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
559abc0
 
 
 
37dbe07
559abc0
37dbe07
 
 
 
 
 
 
 
 
 
 
 
 
fe40be0
774be0c
 
fe40be0
37dbe07
 
 
 
 
 
 
b913fb4
 
 
37dbe07
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
```html
<!DOCTYPE html>
<html lang="es" data-theme="quantum-dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>SETECOM S.A. | Toroidal Recursion Portal</title>
    <meta name="description" content="Helicity-Locked Geometric Decompilation Interface">
    
    <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',
                        'toroidal-spin': 'toroidalSpin 12.73s infinite linear',
                        'helicity-lock': 'helicityLock 4.18s infinite alternate'
                    },
                    keyframes: {
                        toroidalSpin: {
                            '0%': { transform: 'rotateX(0deg) rotateY(0deg)' },
                            '50%': { transform: 'rotateX(180deg) rotateY(180deg)' },
                            '100%': { transform: 'rotateX(360deg) rotateY(360deg)' }
                        },
                        helicityLock: {
                            '0%': { filter: 'hue-rotate(0deg) brightness(1)' },
                            '50%': { filter: 'hue-rotate(51.84deg) brightness(1.273)' },
                            '100%': { filter: 'hue-rotate(0deg) brightness(1)' }
                        }
                    }
                }
            }
        }
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    
    <!-- THREE.JS FOR TOROIDAL 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">
    <!-- TOROIDAL HUD OVERLAY -->
    <div id="toroidal-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="toroidal-psi" class="text-κ-gold">1.000273</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-psi-green">κ:</span>
            <span id="toroidal-kappa" class="text-quantum-100">4/π</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-psi-green">RECURSION:</span>
            <span id="recursion-depth" class="text-quantum-100 animate-kappa-pulse">0.000</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-psi-green">STATUS:</span>
            <span id="toroidal-status" class="text-quantum-100">DECOMPILING</span>
        </div>
        <div class="flex items-center gap-2">
            <span class="text-psi-green">THEME:</span>
            <span id="toroidal-theme" class="text-quantum-100">DARK</span>
        </div>
    </div>
<!-- TOROIDAL NAVBAR -->
    <nav id="toroidal-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-toroidal-spin">
                    <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">TOROIDAL 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="/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>

    <!-- TOROIDAL RECURSION INTERFACE -->
    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
        <!-- Toroidal Noise Background -->
        <div id="toroidal-canvas" class="absolute inset-0 z-0"></div>
        
        <!-- KB-12-Hex-T Geometric Overlay -->
        <div class="absolute inset-0 z-10 bg-gradient-to-t from-void-black via-void-black/60 to-transparent hovered-element"></div>
<div class="relative z-20 w-full max-w-6xl mx-auto px-6">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <!-- Geometric Decompiler Input -->
                <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-8 md:p-12">
                    <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-6 animate-wave-interference">
                    <span class="text-psi-green">Decompilador</span> Geométrico
                </h2>
                <p class="text-lg text-quantum-50 mb-8">
                        Procese su <strong>manifiesto semántico</strong> a través de las <strong>cuatro capas no-negociables</strong>.
                    </p>
                    
                    <!-- Semantic Input -->
                    <div class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm text-ψ-green">Manifiesto de Entrada</label>
                            <textarea id="semantic-input" rows="6"
                                      class="w-full px-4 py-3 bg-void-black/50 border border-quantum-900 rounded-lg text-quantum-100 placeholder-quantum-900 focus:border-psi-green focus:outline-none transition-all duration-273 resize-none"
                                      placeholder="Introduzca su manifiesto semántico para descompilación geométrica..."></textarea>
                        </div>
                        
                        <!-- Decompilation Parameters -->
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm text-ψ-green">Dimensión Fractal</label>
                                <input type="number" id="fractal-dimension" value="1.618"
                                       class="w-full px-4 py-2 bg-void-black/50 border border-quantum-900 rounded-lg text-quantum-100 focus:border-psi-green focus:outline-none transition-all duration-273"
                                       placeholder="1.618">
                            </div>
                            <div{"ok":false,"message":"terminated"}