203 lines
10 KiB
HTML
203 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Autotest • Seguimiento del Proyecto</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>
|
||
body { font-family: 'Inter', system_ui, sans-serif; }
|
||
.font-display { font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif; }
|
||
.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #64748b; }
|
||
.progress-bar { height: 8px; background: linear-gradient(to right, #f97316, #fb923c); border-radius: 9999px; }
|
||
.milestone { transition: all 0.2s ease; }
|
||
.milestone:hover { transform: translateX(4px); }
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-950 text-slate-200">
|
||
<div class="max-w-5xl mx-auto px-6 py-8">
|
||
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between mb-8">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 bg-orange-500 rounded-2xl flex items-center justify-center">
|
||
<i class="fa-solid fa-robot text-white text-4xl"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-4xl font-display tracking-tighter">Autotest</h1>
|
||
<p class="text-slate-400 -mt-1">Seguimiento del proyecto</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-sm text-slate-400">Última actualización</div>
|
||
<div class="font-medium">25 de mayo de 2026</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Overall Status -->
|
||
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-8 mb-8">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div>
|
||
<div class="section-title">Estado actual</div>
|
||
<div class="text-4xl font-semibold tracking-tighter mt-1">Fase 3 completada</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-5xl font-semibold text-emerald-400">58%</div>
|
||
<div class="text-xs text-slate-400">del proyecto reestructurado</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="h-3 bg-slate-800 rounded-full mt-4 overflow-hidden">
|
||
<div class="progress-bar" style="width: 58%"></div>
|
||
</div>
|
||
|
||
<div class="flex justify-between text-xs text-slate-500 mt-2">
|
||
<div>Reestructuración + Base técnica</div>
|
||
<div>Funcionalidad completa (Test Plans + Export)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
||
<!-- Completado -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-4 px-1">
|
||
<i class="fa-solid fa-check-double text-emerald-400"></i>
|
||
<div class="section-title">Completado</div>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">Reestructuración del proyecto</div>
|
||
<div class="text-sm text-slate-400 mt-1">Estructura limpia: <span class="font-mono">server/</span> + <span class="font-mono">web/</span></div>
|
||
</div>
|
||
<div class="text-emerald-400 text-xs font-medium">Fase 1</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">Docker Compose listo</div>
|
||
<div class="text-sm text-slate-400 mt-1">Despliegue con un solo comando + bind mounts para YAMLs</div>
|
||
</div>
|
||
<div class="text-emerald-400 text-xs font-medium">Fase 2</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">Limpieza final</div>
|
||
<div class="text-sm text-slate-400 mt-1">Carpeta antigua <span class="font-mono">editor/</span> eliminada</div>
|
||
</div>
|
||
<div class="text-emerald-400 text-xs font-medium">Fase 3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">YAML como fuente de verdad</div>
|
||
<div class="text-sm text-slate-400 mt-1">Lectura y escritura de testcases en YAML</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">Edición por paso</div>
|
||
<div class="text-sm text-slate-400 mt-1">Cada paso puede marcarse como automatizable o no</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
|
||
<div class="flex items-start justify-between">
|
||
<div>
|
||
<div class="font-semibold">Mejora del navbar</div>
|
||
<div class="text-sm text-slate-400 mt-1">Botones más compactos con icono + palabra corta</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pendiente -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-4 px-1">
|
||
<i class="fa-solid fa-list-check text-amber-400"></i>
|
||
<div class="section-title">Pendiente</div>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<div class="bg-slate-900 border border-amber-900/50 rounded-2xl p-5">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="font-semibold">Fase C – Gestión de Test Plans</div>
|
||
<span class="text-[10px] px-2 py-0.5 bg-amber-500/10 text-amber-400 rounded-full">Alta</span>
|
||
</div>
|
||
<div class="text-sm text-slate-400">
|
||
Crear, editar y componer planes de prueba desde la interfaz.<br>
|
||
Seleccionar testcases por ID y definir dependencias.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-slate-900 border border-amber-900/50 rounded-2xl p-5">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="font-semibold">Fase D – Exportación de planes</div>
|
||
<span class="text-[10px] px-2 py-0.5 bg-amber-500/10 text-amber-400 rounded-full">Alta</span>
|
||
</div>
|
||
<div class="text-sm text-slate-400">
|
||
Exportar un testplan compuesto generando:<br>
|
||
• HTML para pruebas manuales<br>
|
||
• Fichero .spec.ts para Playwright + MCP
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-slate-900 border border-slate-700 rounded-2xl p-5">
|
||
<div class="font-semibold mb-1">Mejoras en Docker</div>
|
||
<div class="text-sm text-slate-400">Healthcheck, variables de entorno, logging mejorado, multi-stage más optimizado.</div>
|
||
</div>
|
||
|
||
<div class="bg-slate-900 border border-slate-700 rounded-2xl p-5">
|
||
<div class="font-semibold mb-1">Limpieza legacy</div>
|
||
<div class="text-sm text-slate-400">Eliminar referencias al JSON antiguo y los scripts que todavía lo usan.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Start -->
|
||
<div class="mt-8 bg-slate-900 border border-slate-800 rounded-3xl p-8">
|
||
<div class="section-title mb-3">Cómo ejecutar el proyecto</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<div class="text-xs text-emerald-400 font-medium mb-2">RECOMENDADO</div>
|
||
<div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 font-mono text-sm">
|
||
docker compose up -d --build
|
||
</div>
|
||
<div class="text-xs text-slate-400 mt-1.5">Accede en <span class="font-medium">http://localhost:4321</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs text-slate-400 font-medium mb-2">LOCAL (sin Docker)</div>
|
||
<div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 font-mono text-sm">
|
||
npm run web
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-6 text-center text-xs text-slate-500">
|
||
Proyecto en buen estado. Base técnica sólida.<br>
|
||
Próximo foco recomendado: <span class="text-amber-400 font-medium">Fase C (Test Plans)</span>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|