Files
alexandrev-tibco 5d4b339b33 Interfaz web de Kotej, con la misma UX y branding que la app de macOS
Mismo layout que la ventana de escritorio: los dos lados arriba, barra de
control, árbol y, debajo, las diferencias del fichero seleccionado. Mismas
cadenas (inglés y español, según el idioma del navegador), mismos colores de
estado y el mismo logo.

- pestañas, atajos (⌘T/⌘W/⌘F, siguiente/anterior diferencia) y ventana Acerca de
- árbol con chevron a ambos lados, tamaño por lado e icono del modo aplicado
- filtros, búsqueda, modos de comparación y tolerancias de texto
- diff lado a lado con resaltado de los caracteres que cambian y leyenda por
  tipo de cambio (contenido / comentarios / espacios)
- carpetas y ficheros por selector o arrastrando; soltar dos rellena ambos lados
- comparar texto pegado sin ficheros

El árbol y el diff sólo tienen en el DOM las filas visibles: un EAR se aplana a
decenas de miles y dibujarlas todas hace que el scroll se arrastre.

Prueba en Chrome real (tests/smoke.mjs, 26 comprobaciones) porque compilar no
demuestra que la página funcione. Encontró dos fallos de layout reales: sin
min-height:0 la comparación se montaba sobre las pestañas, y un `display: flex`
propio ganaba al atributo `hidden`, dejando paneles invisibles ocupando sitio.

Closes #7

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015hEAYuHRKMYz9sSa9zmbzz
2026-07-31 20:40:32 +02:00

17 lines
571 B
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kotej</title>
<meta name="description" content="Compare folders, files and archives (ZIP, JAR, EAR) in your browser. Nothing is uploaded." />
<meta name="color-scheme" content="light dark" />
<link rel="icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>