431 lines
24 KiB
HTML
431 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Forja — Progreso y Próximos Pasos</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
|
|
|
|
:root {
|
|
--primary: #0ea5e9;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system_ui, sans-serif;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-header {
|
|
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.125rem 0.625rem;
|
|
border-radius: 9999px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.forja-gradient {
|
|
background: linear-gradient(135deg, #0ea5e9, #3b82f6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.card {
|
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
|
box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
|
|
}
|
|
|
|
.metric {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.nav-active {
|
|
border-bottom: 3px solid #0ea5e9;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.mono {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-zinc-950 text-zinc-200">
|
|
<!-- Header -->
|
|
<div class="border-b border-zinc-800 bg-zinc-900/70 backdrop-blur-lg sticky top-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-6 py-5 flex items-center justify-between">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-sky-500 flex items-center justify-center shadow-inner">
|
|
<i class="fa-solid fa-hammer text-white text-3xl"></i>
|
|
</div>
|
|
<div>
|
|
<span class="font-display text-3xl font-semibold tracking-tighter">Forja</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-x-2 text-sm">
|
|
<div class="px-3 py-1.5 bg-zinc-900 border border-zinc-800 rounded-2xl flex items-center gap-x-2">
|
|
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
|
|
<span class="font-medium text-emerald-400 text-xs tracking-wider">v0.2 — EN PRODUCCIÓN</span>
|
|
</div>
|
|
<div class="text-zinc-500 text-xs px-2">23 mayo 2026</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto px-6 pt-10 pb-24">
|
|
|
|
<!-- Hero -->
|
|
<div class="flex flex-col lg:flex-row gap-8 items-start">
|
|
<div class="flex-1">
|
|
<div class="inline-flex items-center gap-x-2 px-3 py-1 rounded-3xl bg-zinc-900 border border-zinc-800 text-xs mb-4">
|
|
<i class="fa-solid fa-sync fa-spin-pulse text-sky-400"></i>
|
|
<span class="font-semibold tracking-widest">GRAN REFACTORIZACIÓN COMPLETADA</span>
|
|
</div>
|
|
|
|
<h1 class="font-display text-6xl lg:text-7xl font-semibold tracking-tighter leading-none">
|
|
Forja<br>
|
|
<span class="forja-gradient">está lista</span>
|
|
</h1>
|
|
|
|
<p class="mt-4 max-w-lg text-xl text-zinc-400">
|
|
Plataforma de gobernanza genérica para agentes IA de cualquier tipo.
|
|
Renombrada, generalizada y con editores gráficos completos.
|
|
</p>
|
|
|
|
<div class="flex items-center gap-x-3 mt-8">
|
|
<a href="https://github.com/anomalyco/opencode"
|
|
class="inline-flex items-center gap-x-2 px-5 py-3 rounded-3xl bg-white text-zinc-950 font-semibold text-sm hover:bg-zinc-100 transition-colors">
|
|
<i class="fa-brands fa-github"></i>
|
|
<span>Ver en GitHub</span>
|
|
</a>
|
|
<button onclick="document.getElementById('proximos-pasos').scrollIntoView({behavior:'smooth'})"
|
|
class="inline-flex items-center gap-x-2 px-5 py-3 rounded-3xl border border-zinc-700 hover:bg-zinc-900 text-sm font-medium transition-colors">
|
|
<span>Ver próximos pasos</span>
|
|
<i class="fa-solid fa-arrow-down"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-80 w-full">
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-5">
|
|
<div class="text-xs uppercase tracking-[1px] text-zinc-500 mb-3 font-medium">Progreso general</div>
|
|
|
|
<div class="flex items-baseline gap-x-2">
|
|
<div class="text-6xl font-semibold tabular-nums tracking-tighter">82</div>
|
|
<div class="text-2xl font-medium text-zinc-400">/100</div>
|
|
</div>
|
|
|
|
<div class="h-2.5 bg-zinc-800 rounded-full mt-3 overflow-hidden">
|
|
<div class="h-2.5 bg-gradient-to-r from-sky-400 to-blue-500 rounded-full progress-bar" style="width: 82%"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-4 mt-6 text-center">
|
|
<div>
|
|
<div class="text-xs text-zinc-500">Core</div>
|
|
<div class="font-semibold text-xl">100%</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-zinc-500">UI Gráfica</div>
|
|
<div class="font-semibold text-xl">68%</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-zinc-500">Docs</div>
|
|
<div class="font-semibold text-xl">65%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Métricas rápidas -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-12">
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-4">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="feature-icon bg-emerald-500/10 text-emerald-400"><i class="fa-solid fa-check-double"></i></div>
|
|
<div>
|
|
<div class="text-xs text-zinc-400">Renombrado global</div>
|
|
<div class="font-semibold">483 → 0 referencias antiguas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-4">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="feature-icon bg-amber-500/10 text-amber-400"><i class="fa-solid fa-edit"></i></div>
|
|
<div>
|
|
<div class="text-xs text-zinc-400">Editores gráficos</div>
|
|
<div class="font-semibold">2 páginas nuevas funcionales</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-4">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="feature-icon bg-violet-500/10 text-violet-400"><i class="fa-solid fa-globe"></i></div>
|
|
<div>
|
|
<div class="text-xs text-zinc-400">Generalización</div>
|
|
<div class="font-semibold">Cualquier tipo de agente</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-4">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="feature-icon bg-emerald-500/10 text-emerald-400"><i class="fa-solid fa-palette"></i></div>
|
|
<div>
|
|
<div class="text-xs text-zinc-400">Modernización de interfaz</div>
|
|
<div class="font-semibold">Migración Streamlit → NiceGUI</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-4">
|
|
<div class="flex items-center gap-x-3">
|
|
<div class="feature-icon bg-sky-500/10 text-sky-400"><i class="fa-solid fa-database"></i></div>
|
|
<div>
|
|
<div class="text-xs text-zinc-400">Write APIs</div>
|
|
<div class="font-semibold">POST /versions + upsert</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Qué se hizo -->
|
|
<div class="mt-16">
|
|
<h2 class="section-header text-3xl font-semibold tracking-tight mb-6 flex items-center gap-x-3">
|
|
<span>Lo que se completó</span>
|
|
<span class="text-xs px-3 py-1 bg-emerald-400/10 text-emerald-400 rounded-2xl font-mono tracking-wider">FASE 1 + 2 + 3</span>
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<!-- Columna 1 -->
|
|
<div class="space-y-4">
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-6">
|
|
<div class="font-semibold flex items-center gap-x-2 text-lg">
|
|
<i class="fa-solid fa-sync text-sky-400"></i>
|
|
<span>Renombrado completo a "Forja"</span>
|
|
</div>
|
|
<ul class="mt-4 text-sm space-y-2 text-zinc-300">
|
|
<li class="flex gap-x-2"><span class="text-sky-400 mt-0.5">•</span> Paquetes Python: <span class="mono font-medium">forja_core</span> y <span class="mono font-medium">forja_dashboard</span></li>
|
|
<li class="flex gap-x-2"><span class="text-sky-400 mt-0.5">•</span> Imágenes Docker, contenedores y URLs (<code>forja-core:dev</code>)</li>
|
|
<li class="flex gap-x-2"><span class="text-sky-400 mt-0.5">•</span> Variables de entorno (<code>FORJA_CORE_URL</code>)</li>
|
|
<li class="flex gap-x-2"><span class="text-sky-400 mt-0.5">•</span> pyproject, Dockerfiles, docker-compose, Makefile</li>
|
|
<li class="flex gap-x-2"><span class="text-sky-400 mt-0.5">•</span> 300+ archivos actualizados (código + docs activos)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-6">
|
|
<div class="font-semibold flex items-center gap-x-2 text-lg">
|
|
<i class="fa-solid fa-universal-access text-violet-400"></i>
|
|
<span>Generalización para cualquier tipo de agente</span>
|
|
</div>
|
|
<div class="mt-4 text-sm text-zinc-300">
|
|
<div class="flex flex-wrap gap-2">
|
|
<div class="px-3 py-1 bg-zinc-800 rounded-2xl text-xs">Campos UI opcionales en AgentDefinition</div>
|
|
<div class="px-3 py-1 bg-zinc-800 rounded-2xl text-xs">input_label / placeholder / category / tags / icon</div>
|
|
<div class="px-3 py-1 bg-zinc-800 rounded-2xl text-xs">Execute page 100% genérico</div>
|
|
<div class="px-3 py-1 bg-zinc-800 rounded-2xl text-xs">Posicionamiento como plano de control reutilizable</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Columna 2 -->
|
|
<div class="space-y-4">
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-6">
|
|
<div class="font-semibold flex items-center gap-x-2 text-lg">
|
|
<i class="fa-solid fa-pencil-ruler text-amber-400"></i>
|
|
<span>Editores gráficos completos (la gran novedad)</span>
|
|
</div>
|
|
|
|
<div class="mt-4 grid grid-cols-1 gap-3">
|
|
<div class="bg-zinc-950 border border-zinc-800 p-4 rounded-2xl">
|
|
<div class="font-medium text-amber-300 flex items-center gap-x-2">
|
|
<i class="fa-solid fa-hammer"></i>
|
|
<span>6_🔨_Forjar_Agente.py</span>
|
|
</div>
|
|
<div class="text-xs text-zinc-400 mt-1">Form completo + LLM config + schema JSON + multiselect de guardrails + fork + versionado</div>
|
|
</div>
|
|
|
|
<div class="bg-zinc-950 border border-zinc-800 p-4 rounded-2xl">
|
|
<div class="font-medium text-amber-300 flex items-center gap-x-2">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
<span>7_🛡️_Forjar_Politica.py</span>
|
|
</div>
|
|
<div class="text-xs text-zinc-400 mt-1">Constructor dinámico de validadores (input/output) + /validators endpoint + configs JSON</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-6">
|
|
<div class="font-semibold text-lg">Backend de escritura</div>
|
|
<div class="text-sm mt-3 space-y-1.5 text-zinc-300">
|
|
<div>✓ <code class="mono text-xs">POST /agents/{name}/versions</code> + upsert</div>
|
|
<div>✓ <code class="mono text-xs">POST /policies/{name}/versions</code> + upsert simétrico</div>
|
|
<div>✓ <code class="mono text-xs">GET /policies/validators</code> (metadata para UI)</div>
|
|
<div>✓ <code class="mono text-xs">FileSystemPolicyStore.upsert_version()</code></div>
|
|
<div>✓ Docker mounts cambiados a <strong>:rw</strong></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estado actual -->
|
|
<div class="mt-16">
|
|
<h2 class="section-header text-3xl font-semibold tracking-tight mb-6">Estado actual (23 mayo 2026)</h2>
|
|
|
|
<div class="bg-zinc-900 border border-zinc-800 rounded-3xl p-7">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div>
|
|
<div class="uppercase text-xs font-semibold tracking-wider text-emerald-400">Compila y funciona</div>
|
|
<ul class="mt-3 space-y-2 text-sm">
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-emerald-400 mt-0.5"></i> <span>Todos los imports y paquetes renombrados</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-emerald-400 mt-0.5"></i> <span>py_compile 100% limpio</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-emerald-400 mt-0.5"></i> <span>Editores guardan YAMLs reales</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-emerald-400 mt-0.5"></i> <span>Execute page usa metadata del agente</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="uppercase text-xs font-semibold tracking-wider text-amber-400">Listo para usar</div>
|
|
<ul class="mt-3 space-y-2 text-sm">
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-amber-400 mt-0.5"></i> <span><code>docker compose up</code> (con :rw)</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-amber-400 mt-0.5"></i> <span>Registro + Ejecución + Aprobaciones</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-amber-400 mt-0.5"></i> <span>Editores en barra lateral (páginas 6 y 7)</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-check text-amber-400 mt-0.5"></i> <span>README y docs principales actualizados</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="uppercase text-xs font-semibold tracking-wider text-zinc-400">Pendiente de verificación completa</div>
|
|
<ul class="mt-3 space-y-2 text-sm text-zinc-400">
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-clock mt-0.5"></i> <span>make test-all (requiere deps pesadas)</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-clock mt-0.5"></i> <span>Smoke test con Docker real (guardrails-ai)</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-clock mt-0.5"></i> <span>Actualización de walkthrough.html</span></li>
|
|
<li class="flex items-start gap-x-2"><i class="fa-solid fa-clock mt-0.5"></i> <span>Tests específicos de los nuevos endpoints</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Próximos pasos -->
|
|
<div id="proximos-pasos" class="mt-16">
|
|
<h2 class="section-header text-3xl font-semibold tracking-tight mb-6">Próximos pasos recomendados</h2>
|
|
|
|
<div class="space-y-3">
|
|
<!-- Paso 1 -->
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-5 flex gap-5 items-start">
|
|
<div class="w-7 h-7 flex-shrink-0 rounded-2xl bg-blue-500 flex items-center justify-center text-xs font-bold text-white mt-0.5">1</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Verificación completa de calidad</div>
|
|
<div class="text-sm text-zinc-400 mt-1">Ejecutar <span class="mono bg-zinc-950 px-1.5 py-px rounded">make install && make lint && make test-all</span> + smoke con docker compose en entorno limpio.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 2 -->
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-5 flex gap-5 items-start">
|
|
<div class="w-7 h-7 flex-shrink-0 rounded-2xl bg-blue-500 flex items-center justify-center text-xs font-bold text-white mt-0.5">2</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Mejora de los editores (UX)</div>
|
|
<div class="text-sm text-zinc-400 mt-1">Añadir editor JSON más amigable (ace o monaco), validación en tiempo real de schemas, preview de agente antes de guardar, y botón “Probar inmediatamente”.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paso 3 -->
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-5 flex gap-5 items-start">
|
|
<div class="w-7 h-7 flex-shrink-0 rounded-2xl bg-blue-500 flex items-center justify-center text-xs font-bold text-white mt-0.5">3</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Añadir más plantillas de agentes</div>
|
|
<div class="text-sm text-zinc-400 mt-1">Crear 2-3 agentes genéricos de ejemplo (resumidor, revisor de código, chatbot con guardrails) + sus políticas base.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-5 flex gap-5 items-start">
|
|
<div class="w-7 h-7 flex-shrink-0 rounded-2xl bg-blue-500 flex items-center justify-center text-xs font-bold text-white mt-0.5">4</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Soporte de namespaces / multi-proyecto</div>
|
|
<div class="text-sm text-zinc-400 mt-1">Estructura opcional <span class="mono text-xs">agents/<proyecto>/<agente></span> para que una sola instancia de Forja sirva a múltiples equipos.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-zinc-900 border border-zinc-800 rounded-3xl p-5 flex gap-5 items-start">
|
|
<div class="w-7 h-7 flex-shrink-0 rounded-2xl bg-blue-500 flex items-center justify-center text-xs font-bold text-white mt-0.5">5</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold">Documentación y walkthrough actualizado</div>
|
|
<div class="text-sm text-zinc-400 mt-1">Regenerar o actualizar <span class="mono">docs/walkthrough.html</span> y <span class="mono">docs/explicacion.md</span> con los editores y el nuevo nombre.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notas técnicas -->
|
|
<div class="mt-16 text-xs text-zinc-500 border-t border-zinc-800 pt-8">
|
|
<div class="flex flex-wrap gap-x-8 gap-y-2">
|
|
<div><strong>Paquetes:</strong> <span class="mono">forja_core</span> / <span class="mono">forja_web</span> (NiceGUI) + <span class="mono">forja_common</span></div>
|
|
<div><strong>Python:</strong> 3.11+</div>
|
|
<div><strong>UI:</strong> NiceGUI (reemplazo moderno de Streamlit) + Tailwind</div>
|
|
<div><strong>Runtime:</strong> LangGraph + FastAPI</div>
|
|
<div><strong>Persistencia:</strong> YAML versionado + SQLite checkpoints</div>
|
|
</div>
|
|
<div class="mt-3 text-[10px] text-zinc-600">Actualizado el 23 de mayo de 2026 — Migración a NiceGUI iniciada, CLI removido por decisión de producto.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Tailwind script
|
|
function initializeTailwind() {
|
|
document.documentElement.style.setProperty('--accent', '#0ea5e9');
|
|
}
|
|
|
|
// Simple confetti on load for celebration
|
|
function celebrate() {
|
|
if (Math.random() > 0.7) {
|
|
console.log('%c[Forja] ¡Refactorización completada con éxito!', 'color:#64748b;font-size:9px');
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
initializeTailwind();
|
|
celebrate();
|
|
};
|
|
|
|
// Keyboard hint
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === '/' && document.activeElement.tagName === 'BODY') {
|
|
e.preventDefault();
|
|
const next = document.getElementById('proximos-pasos');
|
|
if (next) next.scrollIntoView({behavior: 'smooth'});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|