242 lines
12 KiB
HTML
242 lines
12 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 — Seguimiento de Progreso</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
|
|
|
|
:root {
|
|
--tokyo-bg: #1a1b26;
|
|
--tokyo-surface: #24283b;
|
|
--tokyo-border: #414868;
|
|
--tokyo-purple: #bb9af7;
|
|
--tokyo-blue: #7aa2f7;
|
|
--tokyo-yellow: #e0af68;
|
|
--tokyo-text: #c0caf5;
|
|
--tokyo-muted: #565f89;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system_ui, sans-serif;
|
|
background-color: var(--tokyo-bg);
|
|
color: var(--tokyo-text);
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tokyo-card {
|
|
background-color: var(--tokyo-surface);
|
|
border: 1px solid var(--tokyo-border);
|
|
}
|
|
|
|
.section-header {
|
|
font-family: 'Space Grotesk', 'Inter', sans-serif;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.station {
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.milestone {
|
|
position: relative;
|
|
}
|
|
|
|
.milestone::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0;
|
|
bottom: -24px;
|
|
width: 2px;
|
|
background: var(--tokyo-border);
|
|
}
|
|
|
|
.milestone:last-child::before {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<div class="max-w-5xl mx-auto px-6 py-12">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-4 mb-10">
|
|
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#bb9af7] to-[#7aa2f7] flex items-center justify-center">
|
|
<span class="text-3xl">🔨</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-display text-5xl font-semibold tracking-tighter">Forja</h1>
|
|
<p class="text-[#565f89] text-xl">Seguimiento de Progreso</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Vision -->
|
|
<div class="tokyo-card rounded-3xl p-8 mb-10">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="px-3 py-1 bg-[#bb9af7]/10 text-[#bb9af7] rounded-full text-sm font-medium">Visión Actual</div>
|
|
</div>
|
|
<h2 class="text-3xl font-semibold tracking-tight mb-3">Cadena de Montaje (Assembly Line)</h2>
|
|
<p class="text-[#c0caf5]/80 text-lg max-w-3xl">
|
|
La interfaz se ha transformado en una <strong>vista única de fábrica</strong>.
|
|
El objetivo es que el usuario entienda de un vistazo cómo se "forja" un agente,
|
|
mostrando solo los bloques que generan <strong>inputs configurables</strong> o
|
|
<strong>outputs significativos</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Timeline -->
|
|
<div class="mb-12">
|
|
<h3 class="font-display text-2xl font-semibold tracking-tight mb-6">Evolución Principal</h3>
|
|
|
|
<div class="space-y-6">
|
|
|
|
<!-- Milestone 1 -->
|
|
<div class="milestone flex gap-4">
|
|
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">1</div>
|
|
<div class="tokyo-card rounded-2xl p-5 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<div class="font-semibold">Eliminación de la Navbar</div>
|
|
<div class="text-sm text-[#565f89] mt-1">Se eliminó completamente la navegación superior tradicional.</div>
|
|
</div>
|
|
<div class="text-xs text-[#565f89] font-mono">Paso 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milestone 2 -->
|
|
<div class="milestone flex gap-4">
|
|
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">2</div>
|
|
<div class="tokyo-card rounded-2xl p-5 flex-1">
|
|
<div class="font-semibold">Paso a Vista Única de Fábrica</div>
|
|
<div class="text-sm text-[#565f89] mt-1">Toda la experiencia se concentra en una "cadena de montaje" visual en lugar de páginas separadas.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milestone 3 -->
|
|
<div class="milestone flex gap-4">
|
|
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">3</div>
|
|
<div class="tokyo-card rounded-2xl p-5 flex-1">
|
|
<div class="font-semibold">Eliminación de las Cajas de Fases</div>
|
|
<div class="text-sm text-[#565f89] mt-1">Se quitaron los contenedores grandes que englobaban cada fase. Ahora solo quedan los encabezados de fase + las estaciones sueltas.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milestone 4 -->
|
|
<div class="milestone flex gap-4">
|
|
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">4</div>
|
|
<div class="tokyo-card rounded-2xl p-5 flex-1">
|
|
<div class="font-semibold">Unificación de Fondo + Colores Llamativos en Texto</div>
|
|
<div class="text-sm text-[#565f89] mt-1">Todas las cajas de la línea de ensamblado usan el mismo gris. Los títulos tienen colores muy saturados y distintos (cyan, púrpura, amarillo, verde, rojo).</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Milestone 5 -->
|
|
<div class="milestone flex gap-4">
|
|
<div class="w-8 h-8 rounded-full bg-[#bb9af7] flex-shrink-0 flex items-center justify-center text-[#1a1b26] font-bold text-sm">5</div>
|
|
<div class="tokyo-card rounded-2xl p-5 flex-1">
|
|
<div class="font-semibold">Limpieza de Estaciones sin Valor de I/O</div>
|
|
<div class="text-sm text-[#565f89] mt-1">
|
|
Se eliminaron los bloques que no generan inputs configurables ni outputs significativos:
|
|
<span class="font-medium text-[#e0af68]">Input Intake</span> y
|
|
<span class="font-medium text-[#e0af68]">Audit & Logging</span>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Assembly Line -->
|
|
<div class="mb-12">
|
|
<h3 class="font-display text-2xl font-semibold tracking-tight mb-6">Estado Actual de la Cadena de Montaje</h3>
|
|
|
|
<div class="tokyo-card rounded-3xl p-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- Phase 1 -->
|
|
<div>
|
|
<div class="text-[#bb9af7] text-xs tracking-[1.5px] font-semibold mb-2">FASE 1 — PREPARACIÓN</div>
|
|
<div class="space-y-2">
|
|
<div class="bg-[#24283b] border border-[#bb9af7]/40 rounded-xl px-4 py-3 text-sm">1. Agent Definition</div>
|
|
<div class="bg-[#24283b] border border-[#bb9af7]/40 rounded-xl px-4 py-3 text-sm">2. Policy Application</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 2 -->
|
|
<div>
|
|
<div class="text-[#7aa2f7] text-xs tracking-[1.5px] font-semibold mb-2">FASE 2 — LÍNEA DE ENSAMBLADO</div>
|
|
<div class="space-y-2">
|
|
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
|
|
<span class="text-[#bb9af7]">3.</span> Input Guardrails
|
|
</div>
|
|
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
|
|
<span class="text-[#e0af68]">4.</span> LLM Reasoning
|
|
</div>
|
|
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
|
|
<span class="text-[#9ece6a]">5.</span> Output Guardrails
|
|
</div>
|
|
<div class="bg-[#24283b] border border-[#7aa2f7]/40 rounded-xl px-4 py-3 text-sm">
|
|
<span class="text-[#f7768e]">6.</span> Action Proposal
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3 -->
|
|
<div>
|
|
<div class="text-[#e0af68] text-xs tracking-[1.5px] font-semibold mb-2">FASE 3 — SUPERVISIÓN HUMANA</div>
|
|
<div class="space-y-2">
|
|
<div class="bg-[#24283b] border border-[#e0af68]/40 rounded-xl px-4 py-3 text-sm">7. Human Approval Gate</div>
|
|
<div class="bg-[#24283b] border border-[#9ece6a]/40 rounded-xl px-4 py-3 text-sm">8. Finalization</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-6 pt-6 border-t border-[#414868] text-xs text-[#565f89]">
|
|
Total de estaciones activas: <span class="font-semibold text-[#c0caf5]">8</span>
|
|
(todas producen inputs configurables o outputs significativos)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Principles -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="tokyo-card rounded-3xl p-6">
|
|
<div class="text-sm font-medium text-[#bb9af7] mb-2">PRINCIPIOS APLICADOS</div>
|
|
<ul class="space-y-2 text-sm">
|
|
<li class="flex gap-2">• <span>Strict adherence to <strong>karpathy.md</strong> guidelines</span></li>
|
|
<li class="flex gap-2">• <span>Simplicity First</span></li>
|
|
<li class="flex gap-2">• <span>Surgical changes (solo tocar lo necesario)</span></li>
|
|
<li class="flex gap-2">• <span>Eliminar lo que no aporta valor al flujo visual</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tokyo-card rounded-3xl p-6">
|
|
<div class="text-sm font-medium text-[#bb9af7] mb-2">PRÓXIMOS PASOS (SUGERIDOS)</div>
|
|
<div class="text-sm text-[#565f89]">
|
|
<p class="mb-3">Este documento puede servir como registro vivo del proyecto.</p>
|
|
<p>Añade aquí nuevas decisiones, experimentos visuales o cambios de rumbo cuando ocurran.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center text-xs text-[#565f89]">
|
|
Documento generado para seguimiento del proyecto Forja •
|
|
<span class="font-mono">Tokyo Night Theme</span>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |