npm - blackcoffee2 - Versions diffs - 2.1.0 → 2.1.2 - Mend

blackcoffee2 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/test-aplicacion.con-logisession/public/blackcoffee-welcome/index.html DELETED Viewed

@@ -1,1339 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BlackCoffee - Servidor Full-Stack</title>
-  <meta name="description" content="BlackCoffee es un servidor full-stack de código abierto construido sobre el framework insitu-js.">
-  <style>
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    :root {
-      --bg-primary: #0f0f0f;
-      --bg-secondary: #1a1a1a;
-      --bg-tertiary: #242424;
-      --accent: #c0a062;
-      --accent-hover: #d4b476;
-      --text-primary: #e0e0e0;
-      --text-secondary: #a0a0a0;
-      --text-muted: #707070;
-      --code-bg: #0d0d0d;
-      --border: #333333;
-      --shadow: rgba(0, 0, 0, 0.4);
-      --transition: all 0.3s ease;
-    }
-    html {
-      scroll-behavior: smooth;
-    }
-    body {
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      background-color: var(--bg-primary);
-      color: var(--text-primary);
-      line-height: 1.6;
-      min-height: 100vh;
-    }
-    /* Header */
-    .header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: rgba(15, 15, 15, 0.95);
-      backdrop-filter: blur(10px);
-      border-bottom: 1px solid var(--border);
-      z-index: 1000;
-      padding: 1rem 2rem;
-    }
-    .header-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      text-decoration: none;
-      color: var(--text-primary);
-    }
-    .logo-icon {
-      width: 40px;
-      height: 40px;
-    }
-    .logo-text {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--accent);
-    }
-    .version-badge {
-      background: var(--bg-tertiary);
-      color: var(--accent);
-      padding: 0.25rem 0.75rem;
-      border-radius: 20px;
-      font-size: 0.8rem;
-      font-weight: 500;
-      border: 1px solid var(--border);
-    }
-    .nav {
-      display: flex;
-      gap: 2rem;
-      align-items: center;
-    }
-    .nav-link {
-      color: var(--text-secondary);
-      text-decoration: none;
-      font-weight: 500;
-      transition: var(--transition);
-    }
-    .nav-link:hover {
-      color: var(--accent);
-    }
-    .status-indicator {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: #4ade80;
-      font-size: 0.9rem;
-    }
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      background: #4ade80;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    /* Hero Section */
-    .hero {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 8rem 2rem 4rem;
-      position: relative;
-      overflow: hidden;
-    }
-    .hero::before {
-      content: '';
-      position: absolute;
-      top: -50%;
-      left: -50%;
-      width: 200%;
-      height: 200%;
-      background: radial-gradient(circle at 30% 30%, rgba(192, 160, 98, 0.03) 0%, transparent 50%),
-                  radial-gradient(circle at 70% 70%, rgba(192, 160, 98, 0.02) 0%, transparent 50%);
-      pointer-events: none;
-    }
-    .hero-content {
-      max-width: 800px;
-      text-align: center;
-      position: relative;
-      z-index: 1;
-    }
-    .hero-icon {
-      width: 120px;
-      height: 120px;
-      margin: 0 auto 2rem;
-      opacity: 0.9;
-    }
-    .hero h1 {
-      font-size: 3.5rem;
-      font-weight: 800;
-      margin-bottom: 1rem;
-      background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    .hero-subtitle {
-      font-size: 1.25rem;
-      color: var(--text-secondary);
-      margin-bottom: 2.5rem;
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    .hero-code {
-      background: var(--code-bg);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 1.5rem;
-      text-align: left;
-      position: relative;
-      margin-bottom: 2rem;
-    }
-    .hero-code-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1rem;
-    }
-    .hero-code-label {
-      color: var(--text-muted);
-      font-size: 0.85rem;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .copy-btn {
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      color: var(--text-secondary);
-      padding: 0.4rem 0.8rem;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 0.8rem;
-      transition: var(--transition);
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-    }
-    .copy-btn:hover {
-      background: var(--accent);
-      color: var(--bg-primary);
-      border-color: var(--accent);
-    }
-    .hero-code code {
-      font-family: 'Fira Code', Consolas, 'Courier New', monospace;
-      color: var(--accent);
-      font-size: 0.95rem;
-      line-height: 1.8;
-    }
-    .hero-code .comment {
-      color: var(--text-muted);
-    }
-    .hero-code .keyword {
-      color: #c792ea;
-    }
-    .hero-code .string {
-      color: #c3e88d;
-    }
-    .hero-actions {
-      display: flex;
-      gap: 1rem;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    .btn {
-      padding: 0.875rem 1.75rem;
-      border-radius: 8px;
-      font-weight: 600;
-      text-decoration: none;
-      transition: var(--transition);
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      cursor: pointer;
-      border: none;
-      font-size: 1rem;
-    }
-    .btn-primary {
-      background: var(--accent);
-      color: var(--bg-primary);
-    }
-    .btn-primary:hover {
-      background: var(--accent-hover);
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(192, 160, 98, 0.3);
-    }
-    .btn-secondary {
-      background: var(--bg-tertiary);
-      color: var(--text-primary);
-      border: 1px solid var(--border);
-    }
-    .btn-secondary:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    /* Features Section */
-    .features {
-      padding: 6rem 2rem;
-      background: var(--bg-secondary);
-    }
-    .section-header {
-      text-align: center;
-      max-width: 600px;
-      margin: 0 auto 4rem;
-    }
-    .section-header h2 {
-      font-size: 2.5rem;
-      font-weight: 700;
-      margin-bottom: 1rem;
-      color: var(--text-primary);
-    }
-    .section-header p {
-      color: var(--text-secondary);
-      font-size: 1.1rem;
-    }
-    .features-grid {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-      gap: 1.5rem;
-    }
-    .feature-card {
-      background: var(--bg-primary);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 2rem;
-      transition: var(--transition);
-      position: relative;
-      overflow: hidden;
-    }
-    .feature-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: var(--accent);
-      transform: scaleX(0);
-      transition: var(--transition);
-    }
-    .feature-card:hover {
-      transform: translateY(-5px);
-      border-color: var(--accent);
-      box-shadow: 0 20px 40px var(--shadow);
-    }
-    .feature-card:hover::before {
-      transform: scaleX(1);
-    }
-    .feature-icon {
-      width: 56px;
-      height: 56px;
-      background: var(--bg-tertiary);
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 1.5rem;
-      color: var(--accent);
-    }
-    .feature-card h3 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 0.75rem;
-      color: var(--text-primary);
-    }
-    .feature-card p {
-      color: var(--text-secondary);
-      font-size: 0.95rem;
-      line-height: 1.7;
-    }
-    /* Architecture Section */
-    .architecture {
-      padding: 6rem 2rem;
-    }
-    .architecture-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 4rem;
-      align-items: center;
-    }
-    .architecture-text h2 {
-      font-size: 2.5rem;
-      font-weight: 700;
-      margin-bottom: 1.5rem;
-      color: var(--text-primary);
-    }
-    .architecture-text p {
-      color: var(--text-secondary);
-      font-size: 1.1rem;
-      margin-bottom: 2rem;
-    }
-    .architecture-list {
-      list-style: none;
-    }
-    .architecture-list li {
-      display: flex;
-      align-items: flex-start;
-      gap: 1rem;
-      margin-bottom: 1.25rem;
-      color: var(--text-secondary);
-    }
-    .architecture-list .icon {
-      width: 24px;
-      height: 24px;
-      color: var(--accent);
-      flex-shrink: 0;
-      margin-top: 0.2rem;
-    }
-    .architecture-diagram {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 16px;
-      padding: 2rem;
-    }
-    .diagram-flow {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-    .diagram-row {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-    }
-    .diagram-node {
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 1rem 1.5rem;
-      text-align: center;
-      min-width: 120px;
-      transition: var(--transition);
-    }
-    .diagram-node:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    .diagram-node.primary {
-      background: var(--accent);
-      color: var(--bg-primary);
-      border-color: var(--accent);
-      font-weight: 600;
-    }
-    .diagram-arrow {
-      display: flex;
-      justify-content: center;
-      color: var(--accent);
-      padding: 0.5rem 0;
-    }
-    /* Examples Section */
-    .examples {
-      padding: 6rem 2rem;
-      background: var(--bg-secondary);
-    }
-    .examples-container {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    .tabs {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 2rem;
-      border-bottom: 1px solid var(--border);
-      padding-bottom: 0.5rem;
-      overflow-x: auto;
-    }
-    .tab-btn {
-      background: transparent;
-      border: none;
-      color: var(--text-secondary);
-      padding: 0.75rem 1.5rem;
-      font-size: 0.95rem;
-      cursor: pointer;
-      border-radius: 8px 8px 0 0;
-      transition: var(--transition);
-      white-space: nowrap;
-    }
-    .tab-btn:hover {
-      color: var(--text-primary);
-      background: var(--bg-tertiary);
-    }
-    .tab-btn.active {
-      color: var(--accent);
-      background: var(--bg-tertiary);
-      border-bottom: 2px solid var(--accent);
-    }
-    .tab-content {
-      display: none;
-      animation: fadeIn 0.3s ease;
-    }
-    .tab-content.active {
-      display: block;
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .code-block {
-      background: var(--code-bg);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      overflow: hidden;
-    }
-    .code-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem 1.5rem;
-      background: var(--bg-tertiary);
-      border-bottom: 1px solid var(--border);
-    }
-    .code-lang {
-      color: var(--text-muted);
-      font-size: 0.85rem;
-    }
-    .code-body {
-      padding: 1.5rem;
-      overflow-x: auto;
-    }
-    .code-body pre {
-      font-family: 'Fira Code', Consolas, 'Courier New', monospace;
-      font-size: 0.9rem;
-      line-height: 1.8;
-      color: var(--text-primary);
-      margin: 0;
-    }
-    .code-body .comment { color: var(--text-muted); }
-    .code-body .keyword { color: #c792ea; }
-    .code-body .function { color: #82aaff; }
-    .code-body .string { color: #c3e88d; }
-    .code-body .property { color: #ffcb6b; }
-    .code-body .method { color: #82aaff; }
-    .code-body .param { color: #f78c6c; }
-    /* Directory Structure */
-    .structure {
-      padding: 6rem 2rem;
-    }
-    .structure-content {
-      max-width: 900px;
-      margin: 0 auto;
-    }
-    .structure-tree {
-      background: var(--code-bg);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 2rem;
-      font-family: 'Fira Code', Consolas, 'Courier New', monospace;
-      font-size: 0.9rem;
-      line-height: 2;
-    }
-    .folder {
-      color: var(--accent);
-    }
-    .file {
-      color: var(--text-primary);
-    }
-    .comment-line {
-      color: var(--text-muted);
-    }
-    /* Footer */
-    .footer {
-      padding: 4rem 2rem 2rem;
-      background: var(--bg-secondary);
-      border-top: 1px solid var(--border);
-    }
-    .footer-content {
-      max-width: 1200px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 3rem;
-    }
-    .footer-section h4 {
-      color: var(--text-primary);
-      font-size: 1rem;
-      margin-bottom: 1.5rem;
-      font-weight: 600;
-    }
-    .footer-links {
-      list-style: none;
-    }
-    .footer-links li {
-      margin-bottom: 0.75rem;
-    }
-    .footer-links a {
-      color: var(--text-secondary);
-      text-decoration: none;
-      transition: var(--transition);
-      font-size: 0.9rem;
-    }
-    .footer-links a:hover {
-      color: var(--accent);
-    }
-    .footer-bottom {
-      max-width: 1200px;
-      margin: 3rem auto 0;
-      padding-top: 2rem;
-      border-top: 1px solid var(--border);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 1rem;
-    }
-    .footer-bottom p {
-      color: var(--text-muted);
-      font-size: 0.9rem;
-    }
-    .social-links {
-      display: flex;
-      gap: 1rem;
-    }
-    .social-link {
-      width: 40px;
-      height: 40px;
-      background: var(--bg-tertiary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text-secondary);
-      transition: var(--transition);
-    }
-    .social-link:hover {
-      border-color: var(--accent);
-      color: var(--accent);
-    }
-    /* Responsive */
-    @media (max-width: 768px) {
-      .header {
-        padding: 1rem;
-      }
-      .nav {
-        display: none;
-      }
-      .hero {
-        padding: 6rem 1rem 3rem;
-      }
-      .hero h1 {
-        font-size: 2.5rem;
-      }
-      .hero-subtitle {
-        font-size: 1.1rem;
-      }
-      .architecture-content {
-        grid-template-columns: 1fr;
-      }
-      .features-grid {
-        grid-template-columns: 1fr;
-      }
-      .section-header h2,
-      .architecture-text h2 {
-        font-size: 2rem;
-      }
-      .footer-bottom {
-        flex-direction: column;
-        text-align: center;
-      }
-    }
-    /* Scrollbar */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: var(--bg-primary);
-    }
-    ::-webkit-scrollbar-thumb {
-      background: var(--border);
-      border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--accent);
-    }
-  </style>
-</head>
-<body>
-  <!-- Header -->
-  <header class="header">
-    <div class="header-content">
-      <a href="#" class="logo">
-        <svg class="logo-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="20" cy="20" r="18" stroke="#c0a062" stroke-width="2"/>
-          <path d="M12 20 C12 15, 15 12, 20 12 C25 12, 28 15, 28 20" stroke="#c0a062" stroke-width="2" fill="none"/>
-          <path d="M28 20 C28 25, 25 28, 20 28 C15 28, 12 25, 12 20" stroke="#c0a062" stroke-width="2" fill="none"/>
-          <circle cx="20" cy="20" r="4" fill="#c0a062"/>
-        </svg>
-        <span class="logo-text">BlackCoffee</span>
-      </a>
-      <nav class="nav">
-        <a href="#features" class="nav-link">Características</a>
-        <a href="#architecture" class="nav-link">Arquitectura</a>
-        <a href="#examples" class="nav-link">Ejemplos</a>
-        <a href="#docs" class="nav-link">Documentación</a>
-      </nav>
-      <div class="status-indicator">
-        <span class="status-dot"></span>
-        <span>Running</span>
-      </div>
-    </div>
-  </header>
-  <!-- Hero Section -->
-  <section class="hero">
-    <div class="hero-content">
-      <svg class="hero-icon" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="60" cy="60" r="55" stroke="#c0a062" stroke-width="3"/>
-        <circle cx="60" cy="60" r="40" stroke="#c0a062" stroke-width="2" opacity="0.5"/>
-        <circle cx="60" cy="60" r="25" stroke="#c0a062" stroke-width="2" opacity="0.3"/>
-        <circle cx="60" cy="60" r="10" fill="#c0a062"/>
-        <path d="M60 10 L60 25 M60 95 L60 110 M10 60 L25 60 M95 60 L110 60" stroke="#c0a062" stroke-width="2" opacity="0.5"/>
-        <path d="M22 22 L42 42 M78 78 L98 98 M22 98 L42 78 M78 42 L98 22" stroke="#c0a062" stroke-width="2" opacity="0.3"/>
-      </svg>
-      <h1>BlackCoffee está sirviendo</h1>
-      <p class="hero-subtitle">
-        Servidor full-stack de código abierto construido sobre el framework insitu-js.
-        Una solución ligera y flexible para construir aplicaciones web completas.
-      </p>
-      <div class="hero-code">
-        <div class="hero-code-header">
-          <span class="hero-code-label">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-              <polyline points="14 2 14 8 20 8"/>
-              <line x1="16" y1="13" x2="8" y2="13"/>
-              <line x1="16" y1="17" x2="8" y2="17"/>
-              <polyline points="10 9 9 9 8 9"/>
-            </svg>
-            Inicio Rápido
-          </span>
-          <button class="copy-btn" onclick="copyCode(this)">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-            </svg>
-            Copiar
-          </button>
-        </div>
-        <code>
-          <span class="comment"># Instalar BlackCoffee</span><br>
-          npm install -g blackcoffee<br><br>
-          <span class="comment"># Crear nuevo proyecto</span><br>
-          blackcoffee create mi-proyecto<br><br>
-          <span class="comment"># Iniciar servidor</span><br>
-          cd mi-proyecto && node BlackCoffee.js
-        </code>
-      </div>
-      <div class="hero-actions">
-        <a href="#examples" class="btn btn-primary">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polygon points="5 3 19 12 5 21 5 3"/>
-          </svg>
-          Ver Ejemplos
-        </a>
-        <a href="#docs" class="btn btn-secondary">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
-            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-          </svg>
-          Documentación
-        </a>
-      </div>
-    </div>
-  </section>
-  <!-- Features Section -->
-  <section id="features" class="features">
-    <div class="section-header">
-      <h2>Características Principales</h2>
-      <p>Todo lo que necesitas para construir aplicaciones web modernas de manera eficiente y escalable.</p>
-    </div>
-    <div class="features-grid">
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="16 18 22 12 16 6"/>
-            <polyline points="8 6 2 12 8 18"/>
-          </svg>
-        </div>
-        <h3>Framework insitu-js</h3>
-        <p>Construido sobre el potente framework insitu-js que proporciona una arquitectura modular y extensible para tus aplicaciones.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="3"/>
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
-          </svg>
-        </div>
-        <h3>Sistema de Hooks</h3>
-        <p>Implementa un sistema de hooks flexible para extender funcionalidades y personalizar el comportamiento del servidor en puntos específicos.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/>
-            <line x1="2" y1="12" x2="22" y2="12"/>
-            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-          </svg>
-        </div>
-        <h3>Gestión de Rutas</h3>
-        <p>Sistema flexible para definir rutas mediante archivos JSON configurables, facilitando la organización y mantenimiento del código.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-            <line x1="3" y1="9" x2="21" y2="9"/>
-            <line x1="9" y1="21" x2="9" y2="9"/>
-          </svg>
-        </div>
-        <h3>Arquitectura MVC</h3>
-        <p>Soporte completo para el patrón MVC con controladores, modelos y vistas para un desarrollo organizado y mantenible.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-            <line x1="8" y1="21" x2="16" y2="21"/>
-            <line x1="12" y1="17" x2="12" y2="21"/>
-          </svg>
-        </div>
-        <h3>Backend y Frontend</h3>
-        <p>Capacidad completa para manejar tanto la lógica del servidor como la presentación de interfaces web en un solo framework.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-            <polyline points="14 2 14 8 20 8"/>
-            <line x1="16" y1="13" x2="8" y2="13"/>
-            <line x1="16" y1="17" x2="8" y2="17"/>
-            <polyline points="10 9 9 9 8 9"/>
-          </svg>
-        </div>
-        <h3>Registro de Actividad</h3>
-        <p>Sistema de logging detallado con diferentes niveles para monitorear todas las interacciones del servidor de manera eficiente.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-          </svg>
-        </div>
-        <h3>Archivos Estáticos</h3>
-        <p>Servidor de contenido estático integrado para recursos como CSS, imágenes y JavaScript del lado del cliente.</p>
-      </div>
-    </div>
-  </section>
-  <!-- Architecture Section -->
-  <section id="architecture" class="architecture">
-    <div class="architecture-content">
-      <div class="architecture-text">
-        <h2>Arquitectura Modular</h2>
-        <p>BlackCoffee sigue una arquitectura modular que facilita la comprensión, extensión y mantenimiento del código.</p>
-        <ul class="architecture-list">
-          <li>
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-            <span><strong>Servidor API:</strong> Basado en el módulo APIServer de insitu-js para gestión eficiente de conexiones.</span>
-          </li>
-          <li>
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-            <span><strong>Sistema de Logging:</strong> Diferentes niveles de detalle ajustables según el entorno.</span>
-          </li>
-          <li>
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-            <span><strong>Cargador de Rutas:</strong> Carga dinámica de rutas desde archivos JSON configurables.</span>
-          </li>
-          <li>
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-            <span><strong>Controladores y Modelos:</strong> Clases extensibles para lógica de negocio y acceso a datos.</span>
-          </li>
-          <li>
-            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-            <span><strong>Motor de Vistas:</strong> Sistema de plantillas para generación de contenido HTML dinámico.</span>
-          </li>
-        </ul>
-      </div>
-      <div class="architecture-diagram">
-        <svg viewBox="0 0 400 350" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <!-- Request -->
-          <rect x="125" y="10" width="150" height="50" rx="10" fill="#c0a062"/>
-          <text x="200" y="42" text-anchor="middle" fill="#0f0f0f" font-weight="600" font-size="14">Request</text>
-          <!-- Arrow -->
-          <path d="M200 60 L200 85" stroke="#c0a062" stroke-width="2" marker-end="url(#arrowhead)"/>
-          <!-- Router -->
-          <rect x="125" y="85" width="150" height="50" rx="10" fill="#1a1a1a" stroke="#c0a062" stroke-width="2"/>
-          <text x="200" y="117" text-anchor="middle" fill="#e0e0e0" font-weight="500" font-size="14">Router</text>
-          <!-- Arrow -->
-          <path d="M200 135 L200 160" stroke="#c0a062" stroke-width="2"/>
-          <!-- Controller -->
-          <rect x="125" y="160" width="150" height="50" rx="10" fill="#1a1a1a" stroke="#c0a062" stroke-width="2"/>
-          <text x="200" y="192" text-anchor="middle" fill="#e0e0e0" font-weight="500" font-size="14">Controller</text>
-          <!-- Branch to Model and View -->
-          <path d="M200 210 L200 230 M200 230 L100 260" stroke="#c0a062" stroke-width="2"/>
-          <path d="M200 230 L300 260" stroke="#c0a062" stroke-width="2"/>
-          <!-- Model -->
-          <rect x="50" y="260" width="100" height="40" rx="8" fill="#1a1a1a" stroke="#333" stroke-width="1"/>
-          <text x="100" y="285" text-anchor="middle" fill="#a0a0a0" font-size="12">Model</text>
-          <!-- View -->
-          <rect x="250" y="260" width="100" height="40" rx="8" fill="#1a1a1a" stroke="#333" stroke-width="1"/>
-          <text x="300" y="285" text-anchor="middle" fill="#a0a0a0" font-size="12">View</text>
-          <!-- Merge -->
-          <path d="M100 300 L100 310 L300 310 L300 300" stroke="#c0a062" stroke-width="2"/>
-          <path d="M200 310 L200 325" stroke="#c0a062" stroke-width="2"/>
-          <!-- Response -->
-          <rect x="125" y="325" width="150" height="40" rx="10" fill="#c0a062"/>
-          <text x="200" y="350" text-anchor="middle" fill="#0f0f0f" font-weight="600" font-size="14">Response</text>
-          <!-- Arrow marker -->
-          <defs>
-            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-              <polygon points="0 0, 10 3.5, 0 7" fill="#c0a062"/>
-            </marker>
-          </defs>
-        </svg>
-      </div>
-    </div>
-  </section>
-  <!-- Examples Section -->
-  <section id="examples" class="examples">
-    <div class="section-header">
-      <h2>Ejemplos de Código</h2>
-      <p>Descubre cómo utilizar BlackCoffee con estos ejemplos prácticos y rápidos de implementar.</p>
-    </div>
-    <div class="examples-container">
-      <div class="tabs">
-        <button class="tab-btn active" data-tab="routes">Definir Rutas</button>
-        <button class="tab-btn" data-tab="controller">Controladores</button>
-        <button class="tab-btn" data-tab="hooks">Hooks</button>
-        <button class="tab-btn" data-tab="config">Configuración</button>
-      </div>
-      <div class="tab-content active" data-tab="routes">
-        <div class="code-block">
-          <div class="code-header">
-            <span class="code-lang">routes.json</span>
-            <button class="copy-btn" onclick="copyCodeBlock(this)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
-              Copiar
-            </button>
-          </div>
-          <div class="code-body">
-            <pre><span class="comment">// Definición de rutas en routes.json</span>
-<span class="keyword">[</span>
-  <span class="keyword">{</span>
-    <span class="property">"method"</span>: <span class="string">"GET"</span>,
-    <span class="property">"path"</span>: <span class="string">"/api/users"</span>,
-    <span class="property">"controller"</span>: <span class="string">"UserController"</span>,
-    <span class="property">"action"</span>: <span class="string">"list"</span>
-  <span class="keyword">}</span>,
-  <span class="keyword">{</span>
-    <span class="property">"method"</span>: <span class="string">"POST"</span>,
-    <span class="property">"path"</span>: <span class="string">"/api/users"</span>,
-    <span class="property">"controller"</span>: <span class="string">"UserController"</span>,
-    <span class="property">"action"</span>: <span class="string">"create"</span>
-  <span class="keyword">}</span>,
-  <span class="keyword">{</span>
-    <span class="property">"method"</span>: <span class="string">"GET"</span>,
-    <span class="property">"path"</span>: <span class="string">"/api/coffee"</span>,
-    <span class="property">"controller"</span>: <span class="string">"CoffeeController"</span>,
-    <span class="property">"action"</span>: <span class="string">"brew"</span>
-  <span class="keyword">}</span>
-<span class="keyword">]</span></pre>
-          </div>
-        </div>
-      </div>
-      <div class="tab-content" data-tab="controller">
-        <div class="code-block">
-          <div class="code-header">
-            <span class="code-lang">controllers/UserController.js</span>
-            <button class="copy-btn" onclick="copyCodeBlock(this)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
-              Copiar
-            </button>
-          </div>
-          <div class="code-body">
-            <pre><span class="keyword">const</span> <span class="function">ControllerBase</span> = <span class="keyword">require</span>(<span class="string">'@blackcoffee/core'</span>).ControllerBase;
-<span class="keyword">class</span> <span class="function">UserController</span> <span class="keyword">extends</span> <span class="function">ControllerBase</span> <span class="keyword">{</span>
-  <span class="function">async</span> <span class="function">list</span>(<span class="param">req</span>, <span class="param">res</span>) <span class="keyword">{</span>
-    <span class="keyword">const</span> users = <span class="keyword">await</span> <span class="function">this</span>.<span class="function">model</span>(<span class="string">'User'</span>).<span class="function">findAll</span>();
-    <span class="keyword">return</span> <span class="function">res</span>.<span class="function">json</span>(<span class="function">users</span>);
-  <span class="keyword">}</span>
-  <span class="function">async</span> <span class="function">create</span>(<span class="param">req</span>, <span class="param">res</span>) <span class="keyword">{</span>
-    <span class="keyword">const</span> user = <span class="keyword">await</span> <span class="function">this</span>.<span class="function">model</span>(<span class="string">'User'</span>).<span class="function">create</span>(<span class="param">req</span>.<span class="function">body</span>);
-    <span class="keyword">return</span> <span class="function">res</span>.<span class="function">status</span>(<span class="string">201</span>).<span class="function">json</span>(<span class="function">user</span>);
-  <span class="keyword">}</span>
-<span class="keyword">}</span>
-<span class="keyword">module</span>.<span class="function">exports</span> = <span class="function">UserController</span>;</pre>
-          </div>
-        </div>
-      </div>
-      <div class="tab-content" data-tab="hooks">
-        <div class="code-block">
-          <div class="code-header">
-            <span class="code-lang">hooks/auth.js</span>
-            <button class="copy-btn" onclick="copyCodeBlock(this)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
-              Copiar
-            </button>
-          </div>
-          <div class="code-body">
-            <pre><span class="comment">// hooks/auth.js - Sistema de autenticación</span>
-<span class="keyword">const</span> <span class="function">app</span> = <span class="keyword">require</span>(<span class="string">'@blackcoffee/core'</span>);
-<span class="comment">// Hook ejecutado antes de cada petición</span>
-<span class="function">app</span>.<span class="function">hook</span>(<span class="string">'request_received'</span>, <span class="keyword">async</span> (<span class="param">req</span>) <span class="keyword">=></span> <span class="keyword">{</span>
-  <span class="function">console</span>.<span class="function">log</span>(<span class="string">`Petición recibida: ${req.method} ${req.path}`</span>);
-<span class="keyword">}</span>);
-<span class="comment">// Validación de token JWT</span>
-<span class="function">app</span>.<span class="function">hook</span>(<span class="string">'token_validation_pre'</span>, <span class="keyword">async</span> (<span class="param">req</span>, <span class="param">res</span>) <span class="keyword">=></span> <span class="keyword">{</span>
-  <span class="keyword">const</span> token = <span class="param">req</span>.<span class="function">headers</span>.<span class="function">authorization</span>;
-  <span class="keyword">if</span> (!token) <span class="keyword">return</span> <span class="function">res</span>.<span class="function">status</span>(<span class="string">401</span>);
-<span class="keyword">}</span>);
-<span class="comment">// Hook ejecutado después de cada petición</span>
-<span class="function">app</span>.<span class="function">hook</span>(<span class="string">'request_completed'</span>, (<span class="param">req</span>, <span class="param">res</span>) <span class="keyword">=></span> <span class="keyword">{</span>
-  <span class="function">console</span>.<span class="function">log</span>(<span class="string">`Respuesta: ${res.statusCode}`</span>);
-<span class="keyword">}</span>);</pre>
-          </div>
-        </div>
-      </div>
-      <div class="tab-content" data-tab="config">
-        <div class="code-block">
-          <div class="code-header">
-            <span class="code-lang">.env - Configuración</span>
-            <button class="copy-btn" onclick="copyCodeBlock(this)">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
-              Copiar
-            </button>
-          </div>
-          <div class="code-body">
-            <pre><span class="comment"># Puerto del servidor (por defecto: 3000)</span>
-PORT=<span class="string">3000</span>
-<span class="comment"># Tiempo máximo de espera para peticiones</span>
-REQUEST_TIMEOUT=<span class="string">300000</span>
-<span class="comment"># Tiempo máximo de conexión</span>
-CONNECTION_TIMEOUT=<span class="string">300000</span>
-<span class="comment"># Ruta personalizada para archivo de rutas</span>
-CUSTOM_ROUTES_PATH=<span class="string">./config/routes.json</span>
-<span class="comment"># Usar rutas por defecto (false por defecto)</span>
-USE_DEFAULT_ROUTES=<span class="string">false</span>
-<span class="comment"># Nivel de logging (debug, info, warn, error)</span>
-LOG_LEVEL=<span class="string">info</span>
-<span class="comment"># Configuración de base de datos</span>
-DB_HOST=<span class="string">localhost</span>
-DB_PORT=<span class="string">5432</span>
-DB_NAME=<span class="string">myapp</span>
-DB_USER=<span class="string">postgres</span>
-DB_PASSWORD=<span class="string">your_password</span></pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!-- Directory Structure -->
-  <section class="structure">
-    <div class="section-header">
-      <h2>Estructura del Proyecto</h2>
-      <p>Organización clara de directorios para mantener tu código estructurado y mantenible.</p>
-    </div>
-    <div class="structure-content">
-      <div class="structure-tree">
-        <span class="comment-line"># Estructura de directorios de BlackCoffee</span><br><br>
-        <span class="folder">blackcoffee/</span><br>
-        ├── <span class="file">BlackCoffee.js</span>          <span class="comment-line"># Punto de entrada principal</span><br>
-        ├── <span class="file">routes.json</span>             <span class="comment-line"># Definición de rutas</span><br>
-        ├── <span class="file">.env</span>                     <span class="comment-line"># Variables de entorno</span><br>
-        ├── <span class="file">package.json</span>             <span class="comment-line"># Dependencias del proyecto</span><br>
-        ├── <span class="folder">controllers/</span>            <span class="comment-line"># Controladores de la aplicación</span><br>
-        │   └── <span class="file">UserController.js</span><br>
-        ├── <span class="folder">models/</span>                 <span class="comment-line"># Modelos de datos</span><br>
-        │   └── <span class="file">User.js</span><br>
-        ├── <span class="folder">views/</span>                  <span class="comment-line"># Plantillas de vistas</span><br>
-        │   └── <span class="file">index.html</span><br>
-        ├── <span class="folder">public/</span>                 <span class="comment-line"># Recursos estáticos</span><br>
-        │   ├── <span class="file">css/</span><br>
-        │   ├── <span class="file">js/</span><br>
-        │   └── <span class="file">images/</span><br>
-        ├── <span class="folder">utils/</span>                  <span class="comment-line"># Utilidades varias</span><br>
-        │   └── <span class="file">helpers.js</span><br>
-        └── <span class="folder">hooks/</span>                  <span class="comment-line"># Hooks personalizados</span><br>
-            └── <span class="file">auth.js</span>
-      </div>
-    </div>
-  </section>
-  <!-- Footer -->
-  <footer id="docs" class="footer">
-    <div class="footer-content">
-      <div class="footer-section">
-        <h4>BlackCoffee</h4>
-        <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem;">
-          Servidor full-stack de código abierto construido sobre insitu-js.
-        </p>
-        <p class="version-badge" style="display: inline-block;">v1.0.0</p>
-      </div>
-      <div class="footer-section">
-        <h4>Documentación</h4>
-        <ul class="footer-links">
-          <li><a href="#">Guía de Inicio</a></li>
-          <li><a href="#">API Reference</a></li>
-          <li><a href="#">Tutoriales</a></li>
-          <li><a href="#">Ejemplos</a></li>
-        </ul>
-      </div>
-      <div class="footer-section">
-        <h4>Recursos</h4>
-        <ul class="footer-links">
-          <li><a href="#">GitHub</a></li>
-          <li><a href="#">NPM</a></li>
-          <li><a href="#">Issues</a></li>
-          <li><a href="#">Releases</a></li>
-        </ul>
-      </div>
-      <div class="footer-section">
-        <h4>Comunidad</h4>
-        <ul class="footer-links">
-          <li><a href="#">Discord</a></li>
-          <li><a href="#">Twitter</a></li>
-          <li><a href="#">Stack Overflow</a></li>
-          <li><a href="#">Blog</a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="footer-bottom">
-      <p>Licenciado bajo MIT - Código abierto y libre</p>
-      <div class="social-links">
-        <a href="#" class="social-link" title="GitHub">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-          </svg>
-        </a>
-        <a href="#" class="social-link" title="NPM">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M1.328 12.766h6.672v10.795h-6.672v-10.795zm3.336-6.383h3.336v3.383h-3.336v-3.383zm6.672 0h3.336v3.383h-3.336v-3.383zm-3.336 6.383h3.336v10.795h-3.336v-10.795zm3.336-6.383h3.336v3.383h-3.336v-3.383zm6.672 0h3.336v3.383h-3.336v-3.383zm-6.672 6.383h6.672v10.795h-6.672v-10.795zm3.336-6.383h3.336v3.383h-3.336v-3.383z"/>
-          </svg>
-        </a>
-        <a href="#" class="social-link" title="Twitter">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-          </svg>
-        </a>
-      </div>
-    </div>
-  </footer>
-  <script>
-    // Tab functionality
-    document.querySelectorAll('.tab-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const tabId = btn.dataset.tab;
-        // Update active tab button
-        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        // Update active tab content
-        document.querySelectorAll('.tab-content').forEach(content => {
-          content.classList.remove('active');
-          if (content.dataset.tab === tabId) {
-            content.classList.add('active');
-          }
-        });
-      });
-    });
-    // Copy code functionality
-    function copyCode(btn) {
-      const codeBlock = btn.closest('.hero-code').querySelector('code');
-      const text = codeBlock.textContent.trim();
-      navigator.clipboard.writeText(text).then(() => {
-        const originalHTML = btn.innerHTML;
-        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copiado';
-        setTimeout(() => {
-          btn.innerHTML = originalHTML;
-        }, 2000);
-      });
-    }
-    function copyCodeBlock(btn) {
-      const codeBody = btn.closest('.code-block').querySelector('.code-body pre');
-      const text = codeBody.textContent.trim();
-      navigator.clipboard.writeText(text).then(() => {
-        const originalHTML = btn.innerHTML;
-        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copiado';
-        setTimeout(() => {
-          btn.innerHTML = originalHTML;
-        }, 2000);
-      });
-    }
-    // Smooth scroll for anchor 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'
-          });
-        }
-      });
-    });
-    // Add scroll effect to header
-    window.addEventListener('scroll', () => {
-      const header = document.querySelector('.header');
-      if (window.scrollY > 50) {
-        header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
-      } else {
-        header.style.boxShadow = 'none';
-      }
-    });
-  </script>
-</body>
-</html>
-</parameter>