Hugging Face's logo

Spaces:
spwotton
/
quantum-reality-engine
Running

App Files Community
quantum-reality-engine
File size: 11,766 Bytes 
8cf499b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37dbe07
fe40be0
774be0c
fe40be0
37dbe07
8cf499b
 
 
b913fb4
 
 
8cf499b
 
 
 
b913fb4
8cf499b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dd637ec
8cf499b
 
 
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
<!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. | Quantum Portal</title>
    <meta name="description" content="Ψ-Initialized Contact Portal for Reality Engineering Solutions">
    
    <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>
</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">MODE:</span>
            <span id="mode-value" class="text-quantum-100">CONTACT_INIT</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">GOS 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>
                <a href="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
</div>
</div>
    </nav>
    <!-- QUANTUM FORM SECTION -->
    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
        <!-- 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>
        
        <!-- Quantum Noise Background -->
        <div class="absolute inset-0 z-0 opacity-20">
            <div class="w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-quantum-100 via-transparent to-transparent"></div>
        </div>
<div class="relative z-20 w-full max-w-2xl mx-auto px-6">
            <div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-8 md:p-12">
                <!-- Header -->
                <div class="text-center mb-10">
                    <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-4 animate-wave-interference">
                        Portal <span class="text-psi-green">Cuántico</span>
                    </h2>
                    <p class="text-lg text-quantum-50">
                        Inicialice su <strong>Ψ-conexión</strong> con los expertos en continuidad eléctrica
                    </p>
                </div>

                <!-- Contact Form -->
                <form id="quantum-form" class="space-y-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-sm text-ψ-green">Nombre Completo</label>
                            <input type="text" required 
                                   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"
                                   placeholder="John Doe">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm text-ψ-green">Empresa</label>
                            <input type="text" required 
                                   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"
                                   placeholder="ACME Corp">
                        </div>
                    </div>

                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-sm text-ψ-green">Email</label>
                            <input type="email" required 
                                   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"
                                   placeholder="john@example.com">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm text-ψ-green">Teléfono</label>
                            <input type="tel" required 
                                   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"
                                   placeholder="+506 8888-8888">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm text-ψ-green">Servicio Requerido</label>
                        <select required 
                                class="w-full px-4 py-3 bg-void-black/50 border border-quantum-900 rounded-lg text-quantum-100 focus:border-psi-green focus:outline-none transition-all duration-273">
                            <option value="">Seleccione un servicio</option>
                            <option value="venta">Venta de Generadores</option>
                            <option value="alquiler">Alquiler de Equipos</option>
                            <option value="mantenimiento">Mantenimiento Preventivo</option>
                            <option value="monitoreo">Monitoreo Cuántico</option>
                            <option value="todos">Todos los servicios</option>
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm text-ψ-green">Mensaje Ψ-Codificado</label>
                        <textarea required rows="4"
                                  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="Describa sus necesidades de continuidad eléctrica..."></textarea>
                    </div>

                    <!-- Ψ-CAPTCHA -->
                    <div class="bg-void-black/30 rounded-lg p-4 border border-quantum-900">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm text-psi-green">Verificación Ψ-Cuántica</span>
                            <button type="button" onclick="generateCaptcha()" class="text-quantum-100 hover:text-psi-green transition-colors">
                                <i data-feather="refresh-cw" class="w-4 h-4"></i>
                            </button>
                        </div>
                        <div class="flex items-center gap-4">
                            <span id="psi-captcha" class="text-2xl font-bold text-κ-gold"></span>
                            <input type="text" required 
                                   id="captcha-input"
                                   class="flex-1 px-4 py-2 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"
                                   placeholder="Result">
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" 
                            class="w-full py-4 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border-2 border-ψ-green hover:border-κ-gold transition-all duration-273 flex items-center justify-center gap-3 group">
                        <i data-feather="send" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-273"></i>
                        <span class="text-quantum-100 font-semibold">Inicializar Transmisión Ψ</span>
                    </button>
                </form>

                <!-- Success Message (Hidden) -->
                <div id="success-message" class="hidden text-center py-8">
                    <div class="text-6xl mb-4 text-psi-green animate-kappa-pulse">✓</div>
                    <h3 class="text-2xl font-bold text-quantum-100 mb-2">Ψ-Conexión Establecida</h3>
                    <p class="text-quantum-50">Su transmisión ha sido inicializada exitosamente.</p>
                    <p class="text-quantum-50 mt-2">Nos contactaremos dentro de <span class="text-κ-gold">24/π horas</span>.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="bg-void-black border-t border-quantum-900 py-8">
        <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>
    <script src="script.js"></script>
</body>
</html>