Spaces:
Runtime error
Runtime error
| <html lang="es" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>MAXIQUEEN OS — Command Center Showcase 👑</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| background: radial-gradient(circle at top, #0b0f1a, #05070f); | |
| color: #e5e7eb; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: auto; | |
| padding: 2rem; | |
| } | |
| .center { | |
| text-align: center; | |
| } | |
| .card { | |
| background: rgba(255,255,255,0.04); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 205, 0, 0.1); /* Toque sutil amarillo */ | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 0 40px rgba(0, 48, 135, 0.15); /* Resplandor azul profundo */ | |
| } | |
| /* Botones principales - Degradado Amarillo, Azul, Rojo */ | |
| button { | |
| background: linear-gradient(135deg, #FFCD00, #003087, #C8102E); | |
| border: none; | |
| border-radius: 10px; | |
| padding: 0.75rem 1.25rem; | |
| color: white; | |
| font-weight: bold; | |
| cursor: pointer; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| transition: opacity 0.3s ease; | |
| } | |
| button:hover { | |
| opacity: 0.9; | |
| } | |
| input { | |
| background: rgba(255,255,255,0.06); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| border-radius: 10px; | |
| padding: 0.6rem 0.8rem; | |
| color: white; | |
| width: 100%; | |
| outline: none; | |
| } | |
| input:focus { | |
| border-color: #FFCD00; | |
| } | |
| .chat { | |
| max-width: 700px; | |
| margin: 2rem auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .messages { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.6rem; | |
| max-height: 420px; | |
| overflow-y: auto; | |
| padding-right: 0.25rem; | |
| } | |
| .msg { | |
| padding: 0.6rem 0.8rem; | |
| border-radius: 12px; | |
| max-width: 85%; | |
| line-height: 1.4; | |
| white-space: pre-wrap; | |
| } | |
| .msg.user { | |
| align-self: flex-end; | |
| background: linear-gradient(135deg, #003087, #C8102E); /* Azul a Rojo */ | |
| color: white; | |
| } | |
| .msg.bot { | |
| align-self: flex-start; | |
| background: rgba(255,255,255,0.08); | |
| color: #e5e7eb; | |
| } | |
| .input-row { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* ================= UI DE SUGERENCIAS (NUEVO) ================= */ | |
| .suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| justify-content: flex-end; | |
| margin-top: 0.2rem; | |
| } | |
| .suggestion-btn { | |
| background: rgba(255, 205, 0, 0.1); /* Fondo amarillo tenue */ | |
| border: 1px solid rgba(255, 205, 0, 0.4); | |
| color: #FFCD00; | |
| border-radius: 20px; | |
| padding: 0.4rem 0.8rem; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .suggestion-btn:hover { | |
| background: rgba(255, 205, 0, 0.25); | |
| transform: translateY(-2px); | |
| } | |
| footer { | |
| margin-top: 4rem; | |
| padding: 2rem 1rem; | |
| border-top: 1px solid rgba(255,255,255,0.08); | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: #9ca3af; | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 0.35rem 0.6rem; | |
| border-radius: 999px; | |
| background: rgba(255, 205, 0, 0.15); | |
| color: #FFCD00; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| } | |
| /* Navegación extra */ | |
| .top-nav { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| } | |
| .top-nav button { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.8rem; | |
| background: rgba(255,255,255,0.1); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top-nav"> | |
| <button onclick="goBack()">⬅ Volver</button> | |
| </div> | |
| <div class="container center"> | |
| <span class="badge">MAXIQUEEN OS 👑</span> | |
| <h1>Showcase Vivo: Centro de Mando</h1> | |
| <p>Un sistema modular cognitivo, estratégico y técnico para escalar sin fragmentación.</p> | |
| </div> | |
| <div class="chat card glow"> | |
| <div class="messages" id="messages"></div> | |
| <div id="suggestions" class="suggestions"></div> | |
| <div class="input-row"> | |
| <input id="input" type="text" placeholder="Escribe aquí o selecciona una opción..." autocomplete="off"/> | |
| <button onclick="handleSend()">Enviar</button> | |
| </div> | |
| </div> | |
| <footer> | |
| <div style="margin-top:0.75rem;"> | |
| © <span id="year"></span> MaxiQueen OS. Todos los derechos reservados. | |
| </div> | |
| </footer> | |
| <script> | |
| document.getElementById("year").textContent = new Date().getFullYear(); | |
| const messagesEl = document.getElementById("messages"); | |
| const suggestionsEl = document.getElementById("suggestions"); | |
| const input = document.getElementById("input"); | |
| // Lógica para guardar puntaje/estado que tenías al final | |
| let score = localStorage.getItem("score") || 0; | |
| function addPoint() { | |
| score++; | |
| localStorage.setItem("score", score); | |
| } | |
| function goBack() { | |
| window.location.href = "/apps.html"; | |
| } | |
| /* ================= RENDERIZADO DE UI ================= */ | |
| function appendMessage(role, text) { | |
| const div = document.createElement("div"); | |
| div.className = "msg " + role; | |
| div.textContent = text; | |
| messagesEl.appendChild(div); | |
| messagesEl.scrollTop = messagesEl.scrollHeight; | |
| } | |
| function renderSuggestions(options) { | |
| suggestionsEl.innerHTML = ""; // Limpiar opciones anteriores | |
| if (!options || options.length === 0) return; | |
| options.forEach(opt => { | |
| const btn = document.createElement("button"); | |
| btn.className = "suggestion-btn"; | |
| btn.textContent = opt; | |
| btn.onclick = () => { | |
| input.value = opt; | |
| handleSend(); | |
| }; | |
| suggestionsEl.appendChild(btn); | |
| }); | |
| } | |
| /* ================= MOTOR COGNITIVO (ESTADO Y LÓGICA) ================= */ | |
| const state = { | |
| etapa: "inicio" | |
| }; | |
| // La función ahora devuelve un objeto con { text, options } | |
| function getCognitiveResponse(message) { | |
| const text = message.toLowerCase(); | |
| // FLUJO DE CONTACTO | |
| if (state.etapa === "contacto") { | |
| if (text.includes("whatsapp")) { | |
| return { | |
| text: "Perfecto 👑\nConectemos directo por WhatsApp. Haz clic aquí:\n👉 https://api.whatsapp.com/send/?phone=573016625921", | |
| options: ["Volver al inicio", "Ver módulos técnicos"] | |
| }; | |
| } | |
| if (text.includes("instagram")) { | |
| return { | |
| text: "Perfecto 👑\nEscríbenos a nuestro Instagram:\n👉 https://www.instagram.com/maxiqueen_store", | |
| options: ["Volver al inicio", "Ver módulos técnicos"] | |
| }; | |
| } | |
| } | |
| // FLUJO DE RECOMENDACIÓN/DIAGNÓSTICO | |
| if (state.etapa === "diagnostico") { | |
| if (text.includes("persona") || text.includes("mental")) { | |
| state.etapa = "contacto"; | |
| return { | |
| text: "El orden empieza en la mente del fundador. Una vez claro tu foco, la estructura técnica se diseña sola.\n\nPara agendar tu sesión de diagnóstico humano, ¿por dónde prefieres hablar?", | |
| options: ["Por WhatsApp", "Por Instagram"] | |
| }; | |
| } | |
| if (text.includes("negocio") || text.includes("proyecto")) { | |
| return { | |
| text: "Entendido. Diseñaremos una estructura mínima viable para que dejes de apagar incendios y empieces a escalar.\n\n¿Quieres ver el panorama completo o avanzamos paso a paso?", | |
| options: ["Panorama completo", "Paso a paso", "Contactar a un humano"] | |
| }; | |
| } | |
| } | |
| // PALABRAS CLAVE GLOBALES | |
| if (text.includes("precio") || text.includes("coste")) { | |
| return { | |
| text: "MaxiQueen OS es un sistema modular, no un enlatado.\nConstruimos la estructura según lo que tu centro de mando necesite hoy.", | |
| options: ["¿Cómo empezamos?", "Contactar a un humano"] | |
| }; | |
| } | |
| if (text.includes("volver") || text.includes("inicio")) { | |
| state.etapa = "inicio"; | |
| return { | |
| text: "Sistema reiniciado. ¿Por dónde continuamos?", | |
| options: ["Ver precios", "¿Cómo funciona?", "Contactar a un humano"] | |
| }; | |
| } | |
| if (text.includes("contacto") || text.includes("humano")) { | |
| state.etapa = "contacto"; | |
| return { | |
| text: "Comprendido. Nada reemplaza a una conversación real.\n¿Prefieres que hablemos por WhatsApp o por Instagram?", | |
| options: ["WhatsApp", "Instagram"] | |
| }; | |
| } | |
| // RESPUESTA POR DEFECTO / INICIO DE DIAGNÓSTICO | |
| state.etapa = "diagnostico"; | |
| return { | |
| text: "Buen punto. Lo importante aquí no es lanzarte información, es entender tu contexto para construir contigo.\n\nHoy, ¿tu cuello de botella está en ti como persona (orden, enfoque) o en la estructura técnica de tu proyecto?", | |
| options: ["En mí como persona", "En el proyecto/negocio", "Solo quiero ver precios"] | |
| }; | |
| } | |
| /* ================= CONTROLADOR DE MENSAJES ================= */ | |
| function handleSend() { | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| // 1. Mostrar mensaje del usuario | |
| appendMessage("user", message); | |
| input.value = ""; | |
| suggestionsEl.innerHTML = ""; // Limpiar sugerencias al enviar | |
| // 2. Procesar respuesta del bot simulando tiempo de carga "cognitivo" | |
| setTimeout(() => { | |
| const responseData = getCognitiveResponse(message); | |
| appendMessage("bot", responseData.text); | |
| renderSuggestions(responseData.options); | |
| }, 400); | |
| } | |
| input.addEventListener("keydown", e => { | |
| if (e.key === "Enter") handleSend(); | |
| }); | |
| // Inicialización del sistema | |
| setTimeout(() => { | |
| appendMessage("bot", "Sistema en línea 👑\nBienvenido a la consola del MaxiQueen OS.\n¿Qué módulo deseas explorar hoy?"); | |
| renderSuggestions(["¿Cómo funciona?", "Ver precios", "Contactar a un humano"]); | |
| }, 200); | |
| </script> | |
| </body> | |
| </html> | |