@personnn/personnnkit
Version:
🇵 PersonnnKit - El Agente Kit Universal. Framework revolucionario para crear agentes de IA con HTML + Python. Simplicidad radical vs frameworks gigantes.
3 lines • 18.8 kB
TypeScript
export declare const indexHtmlTemplate = "\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>PersonnnKit - The Future of AI Agent Development</title>\n <link href=\"./css/tailwind.css\" rel=\"stylesheet\">\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <link rel=\"icon\" href=\"data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\uD83C\uDDF5</text></svg>\">\n <style>\n :root {\n --primary-hue: 200;\n --secondary-hue: 270;\n --primary: hsl(var(--primary-hue), 95%, 58%);\n --primary-light: hsl(var(--primary-hue), 95%, 68%);\n --primary-dark: hsl(var(--primary-hue), 95%, 48%);\n --secondary: hsl(var(--secondary-hue), 75%, 65%);\n --accent: hsl(45, 100%, 70%);\n --surface: hsl(225, 25%, 15%);\n --surface-light: hsl(225, 20%, 25%);\n --text: hsl(220, 15%, 85%);\n --text-muted: hsl(220, 10%, 65%);\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\n line-height: 1.6;\n background: linear-gradient(135deg, var(--surface) 0%, hsl(235, 30%, 20%) 100%);\n color: var(--text);\n min-height: 100vh;\n }\n \n .glass {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n }\n \n .glow {\n box-shadow: 0 4px 32px rgba(var(--primary), 0.3);\n }\n \n .gradient-text {\n background: linear-gradient(135deg, var(--primary-light), var(--secondary));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n }\n \n .btn {\n padding: 12px 24px;\n border: none;\n border-radius: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n position: relative;\n overflow: hidden;\n }\n \n .btn-primary {\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n color: white;\n }\n \n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(var(--primary), 0.4);\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n padding: 16px 0;\n }\n \n .hero {\n padding: 120px 0 80px;\n text-align: center;\n }\n \n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 800;\n margin-bottom: 24px;\n line-height: 1.1;\n }\n \n .hero p {\n font-size: 1.25rem;\n margin-bottom: 40px;\n color: var(--text-muted);\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n \n .buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 60px;\n }\n \n .features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 32px;\n margin: 80px 0;\n }\n \n .feature {\n padding: 32px;\n text-align: center;\n transition: transform 0.3s ease;\n }\n \n .feature:hover {\n transform: translateY(-8px);\n }\n \n .feature-icon {\n font-size: 3rem;\n margin-bottom: 16px;\n display: block;\n }\n \n .feature h3 {\n font-size: 1.5rem;\n margin-bottom: 16px;\n color: var(--primary-light);\n }\n \n .demo-section {\n margin: 80px 0;\n }\n \n .demo-section h2 {\n font-size: 2.5rem;\n text-align: center;\n margin-bottom: 48px;\n color: var(--primary-light);\n }\n \n .demo-controls {\n display: flex;\n gap: 16px;\n margin-bottom: 32px;\n flex-wrap: wrap;\n }\n \n .demo-output {\n background: rgba(0, 0, 0, 0.3);\n padding: 24px;\n border-radius: 12px;\n font-family: 'JetBrains Mono', 'Fira Code', monospace;\n font-size: 0.875rem;\n line-height: 1.6;\n min-height: 200px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n position: relative;\n }\n \n .log-message {\n margin-bottom: 8px;\n padding: 8px 12px;\n border-radius: 6px;\n border-left: 4px solid;\n }\n \n .log-success {\n background: rgba(34, 197, 94, 0.1);\n border-color: #22c55e;\n color: #86efac;\n }\n \n .log-error {\n background: rgba(239, 68, 68, 0.1);\n border-color: #ef4444;\n color: #fca5a5;\n }\n \n .log-warning {\n background: rgba(245, 158, 11, 0.1);\n border-color: #f59e0b;\n color: #fde047;\n }\n \n .log-info {\n background: rgba(59, 130, 246, 0.1);\n border-color: #3b82f6;\n color: #93c5fd;\n }\n \n footer {\n margin-top: 120px;\n padding: 40px 0;\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n color: var(--text-muted);\n }\n \n @media (max-width: 768px) {\n .buttons {\n flex-direction: column;\n align-items: center;\n }\n \n .demo-controls {\n flex-direction: column;\n }\n }\n </style>\n</head>\n<body>\n <!-- Navigation -->\n <nav class=\"glass\">\n <div class=\"container\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; height: 64px;\">\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <span style=\"font-size: 2rem;\">\uD83E\uDDE0</span>\n <span style=\"font-size: 1.25rem; font-weight: 700;\">PersonnnKit Agent</span>\n </div>\n <div style=\"display: none; gap: 32px;\" id=\"nav-links\">\n <a href=\"#features\" style=\"color: var(--text-muted); text-decoration: none; transition: color 0.3s;\">Features</a>\n <a href=\"#demo\" style=\"color: var(--text-muted); text-decoration: none; transition: color 0.3s;\">Demo</a>\n <a href=\"#about\" style=\"color: var(--text-muted); text-decoration: none; transition: color 0.3s;\">About</a>\n </div>\n </div>\n </div>\n </nav>\n\n <!-- Hero Section -->\n <section class=\"hero\">\n <div class=\"container\">\n <h1 class=\"gradient-text\">The Future of AI Agents</h1>\n <p>PersonnnKit - El WordPress para Agentes de IA. Crea agentes inteligentes con Python y despliega con un solo comando.</p>\n \n <div class=\"buttons\">\n <button onclick=\"runMainTask()\" class=\"btn btn-primary glow\">\n \uD83D\uDE80 Ejecutar Tarea Principal\n </button>\n <button onclick=\"runAnalysis()\" class=\"btn glass\">\n \uD83D\uDCCA Ejecutar An\u00E1lisis\n </button>\n <button onclick=\"testConnection()\" class=\"btn glass\">\n \uD83D\uDD0C Probar Conexi\u00F3n\n </button>\n </div>\n </div>\n </section>\n\n <!-- Features Section -->\n <section id=\"features\">\n <div class=\"container\">\n <div class=\"features\">\n <div class=\"feature glass\">\n <span class=\"feature-icon\">\uD83E\uDD16</span>\n <h3>IA Avanzada</h3>\n <p>Procesamiento de IA avanzado con integraci\u00F3n nativa de Python y librer\u00EDas de machine learning.</p>\n </div>\n <div class=\"feature glass\">\n <span class=\"feature-icon\">\u26A1</span>\n <h3>Tiempo Real</h3>\n <p>Respuestas instant\u00E1neas y procesamiento de datos en vivo con APIs REST autom\u00E1ticas.</p>\n </div>\n <div class=\"feature glass\">\n <span class=\"feature-icon\">\uD83D\uDD12</span>\n <h3>Local-First</h3>\n <p>Tus datos permanecen en tu m\u00E1quina. Control total sobre tu informaci\u00F3n y privacidad.</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Demo Section -->\n <section id=\"demo\" class=\"demo-section\">\n <div class=\"container\">\n <h2>Demo en Vivo</h2>\n <div class=\"glass\" style=\"padding: 32px;\">\n <div class=\"demo-controls\">\n <button onclick=\"testConnection()\" class=\"btn\" style=\"background: #22c55e; color: white;\">\n \uD83D\uDD0C Test Connection\n </button>\n <button onclick=\"runMainTask()\" class=\"btn\" style=\"background: #3b82f6; color: white;\">\n \uD83D\uDE80 Main Task\n </button>\n <button onclick=\"runAnalysis()\" class=\"btn\" style=\"background: #8b5cf6; color: white;\">\n \uD83D\uDCCA Analysis\n </button>\n </div>\n \n <div id=\"output\" class=\"demo-output\">\n <div class=\"log-message log-info\">\n <strong>PersonnnKit Agent Ready</strong><br>\n Haz clic en cualquier bot\u00F3n para ver el agente en acci\u00F3n...\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer>\n <div class=\"container\">\n <p>Construido con \u2764\uFE0F usando <strong>PersonnnKit</strong></p>\n <p style=\"margin-top: 8px; font-size: 0.875rem;\">El WordPress para Agentes de IA</p>\n </div>\n </footer>\n\n <script>\n async function runScript(scriptName) {\n const output = document.getElementById('output');\n output.innerHTML = `<div class=\"log-message log-warning\">\u23F3 Ejecutando ${scriptName}...</div>`;\n \n try {\n const response = await fetch('/api/run-script', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ script: scriptName })\n });\n \n const result = await response.json();\n \n if (response.ok) {\n output.innerHTML = `\n <div class=\"log-message log-success\">\u2705 Ejecuci\u00F3n de ${scriptName} completada exitosamente</div>\n <div style=\"background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #22c55e;\">\n <pre style=\"white-space: pre-wrap; color: #d1fae5;\">${result.output || 'Sin salida retornada.'}</pre>\n </div>\n `;\n } else {\n output.innerHTML = `\n <div class=\"log-message log-error\">\u274C Fallo en la ejecuci\u00F3n de ${scriptName}</div>\n <div style=\"background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #ef4444;\">\n <pre style=\"white-space: pre-wrap; color: #fecaca;\">${result.error || 'Error desconocido.'}</pre>\n </div>\n `;\n }\n } catch (error) {\n output.innerHTML = `\n <div class=\"log-message log-error\">\u274C Error de conexi\u00F3n durante ${scriptName}</div>\n <div style=\"background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #ef4444;\">\n <pre style=\"white-space: pre-wrap; color: #fecaca;\">${error.message}</pre>\n </div>\n `;\n }\n }\n \n function runMainTask() {\n runScript('main_task.py');\n }\n \n function runAnalysis() {\n runScript('analysis.py');\n }\n \n async function testConnection() {\n const output = document.getElementById('output');\n output.innerHTML = '<div class=\"log-message log-warning\">\u23F3 Probando conexi\u00F3n API...</div>';\n \n try {\n const response = await fetch('/api/ping');\n const result = await response.text();\n output.innerHTML = `\n <div class=\"log-message log-success\">\u2705 Conexi\u00F3n API exitosa</div>\n <div style=\"background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #22c55e;\">\n <pre style=\"color: #d1fae5;\">${result}</pre>\n </div>\n `;\n } catch (error) {\n output.innerHTML = `\n <div class=\"log-message log-error\">\u274C Fallo en conexi\u00F3n API</div>\n <div style=\"background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; margin-top: 12px; border-left: 4px solid #ef4444;\">\n <pre style=\"color: #fecaca;\">${error.message}</pre>\n </div>\n `;\n }\n }\n\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n\n // Show navigation links on larger screens\n if (window.innerWidth >= 768) {\n document.getElementById('nav-links').style.display = 'flex';\n }\n </script>\n</body>\n</html>";
export declare const contactHtmlTemplate = "\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Contact - PersonnnKit Agent</title>\n <link href=\"./css/tailwind.css\" rel=\"stylesheet\">\n <style>\n .gradient-bg {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n .glass {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n </style>\n</head>\n<body class=\"gradient-bg min-h-screen text-white\">\n <div class=\"max-w-2xl mx-auto px-4 py-16\">\n <div class=\"glass p-8 rounded-xl\">\n <h1 class=\"text-4xl font-bold mb-6 text-center\">\uD83D\uDCDE Contact</h1>\n <p class=\"text-xl text-blue-100 mb-8 text-center\">\u00BFNecesitas ayuda con este agente?</p>\n \n <div class=\"space-y-4\">\n <div class=\"glass p-4 rounded-lg\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-2xl\">\uD83D\uDCE7</span>\n <div>\n <h3 class=\"font-semibold\">Email</h3>\n <p class=\"text-blue-200\">tu@email.com</p>\n </div>\n </div>\n </div>\n \n <div class=\"glass p-4 rounded-lg\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-2xl\">\uD83C\uDF10</span>\n <div>\n <h3 class=\"font-semibold\">Website</h3>\n <p class=\"text-blue-200\">https://tu-sitio-web.com</p>\n </div>\n </div>\n </div>\n \n <div class=\"glass p-4 rounded-lg\">\n <div class=\"flex items-center space-x-3\">\n <span class=\"text-2xl\">\uD83D\uDCAC</span>\n <div>\n <h3 class=\"font-semibold\">WhatsApp</h3>\n <p class=\"text-blue-200\">+1234567890</p>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"text-center mt-8\">\n <a href=\"/\" class=\"glass px-6 py-3 rounded-lg font-semibold hover:bg-white/20 transition-all inline-block\">\n \u2190 Volver al inicio\n </a>\n </div>\n </div>\n </div>\n</body>\n</html>";
//# sourceMappingURL=html.d.ts.map