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