Spaces:
Running
Running
File size: 11,448 Bytes
fe40be0 774be0c 559abc0 fe40be0 b913fb4 fe40be0 b913fb4 fe40be0 |
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 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 |
<!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 AI Assistant</title>
<meta name="description" content="Helicity-Locked AI Assistant with Pinecone Vector Database Integration">
<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'
}
}
}
}
</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">AI_ASSISTANT</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">AI 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="/timemachine.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Time Machine</a>
</div>
</div>
</nav>
<!-- CHATBOT INTERFACE -->
<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>
<div class="relative z-20 w-full max-w-4xl mx-auto px-6">
<div class="bg-slate-900/30 backdrop-blur-lg border border-quantum-900 rounded-3xl p-6">
<!-- Chat Header -->
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-black text-quantum-100 mb-2 animate-wave-interference">
Asistente <span class="text-psi-green">Cuántico</span>
</h2>
<p class="text-quantum-50">
Conectado a <strong>Pinecone Vector DB</strong> y <strong>Gemini API</strong>
</p>
</div>
<!-- Chat Messages Container -->
<div id="chat-messages" class="h-96 overflow-y-auto mb-4 space-y-4 p-4 bg-void-black/50 rounded-lg">
<!-- Welcome Message -->
<div class="flex justify-start">
<div class="max-w-xs md:max-w-md bg-quantum-900/50 rounded-2xl p-4 border border-quantum-900">
<p class="text-quantum-50">Hola, soy tu asistente cuántico. ¿En qué puedo ayudarte hoy?</p>
</div>
</div>
</div>
<!-- User Input Area -->
<div class="flex gap-2">
<input type="text" id="user-input"
class="flex-1 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="Escribe tu pregunta sobre generadores eléctricos...">
<button id="send-button"
class="px-6 py-3 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 gap-2">
<i data-feather="send" class="w-4 h-4"></i>
</button>
</div>
<!-- Connection Status -->
<div class="mt-4 text-center">
<div id="connection-status" class="flex items-center justify-center gap-2">
<div class="w-2 h-2 rounded-full bg-psi-green animate-pulse"></div>
<span class="text-xs text-quantum-100">
<span id="db-status">Pinecone: CONNECTED</span>
<span class="text-xs text-quantum-100">|</span>
<span id="ai-status">Gemini: ACTIVE</span>
</div>
</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>
// Initialize Feather Icons
feather.replace();
// Real-time Ψ-Monitor
setInterval(() => {
const psi = (1 + Math.sin(Date.now() / 1273) * 0.001).toFixed(6);
document.getElementById('psi-value').textContent = psi;
}, 127);
// Chatbot functionality
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
function addMessage(message, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
const bubbleDiv = document.createElement('div');
bubbleDiv.className = `max-w-xs md:max-w-md rounded-2xl p-4 border ${
isUser ? 'border-κ-gold' : 'border-quantum-900'
} bg-${
isUser ? 'quantum-900/50' : 'void-black/50'
}`;
bubbleDiv.innerHTML = `<p class="text-quantum-50">${message}</p>`;
messageDiv.appendChild(bubbleDiv);
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
// Add user message
addMessage(message, true);
userInput.value = '';
// Show typing indicator
const typingDiv = document.createElement('div');
typingDiv.className = 'flex justify-start';
typingDiv.innerHTML = `
<div class="max-w-xs md:max-w-md bg-void-black/50 rounded-2xl p-4 border border-quantum-900">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-psi-green animate-pulse"></div>
<p class="text-quantum-50">El asistente está procesando tu consulta...</p>
</div>
`;
chatMessages.appendChild(typingDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
// Simulate AI response (replace with actual API calls)
setTimeout(() => {
typingDiv.remove();
// Mock responses based on keywords
let response = "He procesado tu consulta. Para información específica sobre generadores eléctricos, mantenimiento o servicios de monitoreo, puedes contactarnos al 2566-0303 o visitar nuestras instalaciones.";
if (message.toLowerCase().includes('generador') || message.toLowerCase().includes('venta')) {
response = "Ofrecemos generadores eléctricos de última tecnología. Representamos marcas como Deep Sea Electronics y Onis Visa. ¿Te gustaría que te contacte un especialista?";
} else if (message.toLowerCase().includes('alquiler') || message.toLowerCase().includes('renta')) {
response = "Tenemos soluciones temporales de energía para eventos, emergencias o proyectos específicos. El alquiler incluye instalación y soporte técnico.";
} else if (message.toLowerCase().includes('mantenimiento') || message.toLowerCase().includes('reparación')) {
response = "Ofrecemos planes de mantenimiento preventivo y correctivo. Garantizamos la continuidad operativa de tus equipos las 24 horas.";
} else if (message.toLowerCase().includes('monitoreo') || message.toLowerCase().includes('remoto')) {
response = "Nuestro servicio de monitoreo cuántico permite supervisión en tiempo real y alertas automáticas.";
}
addMessage(response, false);
}, 2000);
}
// Event listeners
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html> |