alro65
deb04c9315
Sprint 0 completo del producto VMS-Sailor (Vessel Management System integrado para buques 30-40m). Brief de referencia en VMS_Sailor_v2_Parte_*.md (intacto). Core (vmssailor.core, 95.17% coverage, 99 tests verde): - ShipCoord: sistema naval x_pp/y_cl/z_bl frozen - Vessel, Deck, Bulkhead - Equipment, EquipmentModel, Sensor, EquipmentSpec - Tag, AlarmConfig, TagBinding, Scaling - CardInstance, Bus, Topology con validacion 21 puntos I/O AR-NMEA-IO-v1.0 - Alarm, PermissiveRule, Condition - Project agregado raiz con validacion cross-entity - Persistencia portable .vmsproj (SQLite) con roundtrip verificable Biblioteca curada seed (vmssailor.library): - systems_catalog.json completo (catalogo maestro Parte 1 sec 7) - 2 vessels: Sunseeker 76, Ferretti 850 - 2 motores: MTU 12V 2000 M96, Volvo D13-900 - 1 genset: Northern Lights M65C13 - yacht_motor_planeo.yaml (reglas heuristicas) - TODO marcado data_source=seed_estimate - requiere validacion datasheets Tools: - vms-validate-library: CLI valida biblioteca completa - vms-generate-test-project: CLI demo + verificacion roundtrip persistencia Design System + 8 mockups HTML estaticos: - docs/design_system.md (paleta Deep Ocean, gradientes, typography, motion) - docs/brand/ (logo + variantes SVG) - docs/mockups/splash, studio_main, runtime_overview, runtime_mimic_fuel (P&ID animado), runtime_alarms, runtime_trim (panel estrella con horizonte artificial), mobile_overview, mobile_trim - docs/mockups/index.html (galeria) Firmware (Sprint 12+ implementacion): - firmware/ar_nmea_io_v1/src/config/pinout.h con macros GPIO Decisiones autonomas documentadas en docs/decisions_sprint0.md. Stack: Python 3.11 + uv + Pydantic v2 + SQLite stdlib + hatchling + pytest 9 + ruff + mypy. Sin PySide6, FastAPI, Flutter ni firmware funcional (entran en sprints siguientes). Criterio de aceptacion Sprint 0: cumplido. - uv sync: OK - pytest: 99/99 verde - cov vmssailor.core: 95.17% (objetivo >=80%) - ruff: clean - vms-validate-library: OK - vms-generate-test-project: INTEGRIDAD OK Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
281 lines
9.5 KiB
HTML
281 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VMS-Sailor · Galería de mockups</title>
|
|
<link rel="icon" type="image/svg+xml" href="../brand/favicon.svg">
|
|
<link rel="stylesheet" href="_tokens.css">
|
|
<style>
|
|
.hero {
|
|
padding: var(--s-9) var(--s-7) var(--s-7);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: ""; position: absolute;
|
|
top: -120px; left: 50%; transform: translateX(-50%);
|
|
width: 800px; height: 800px;
|
|
background: radial-gradient(circle, rgba(0,217,255,0.18), transparent 60%);
|
|
filter: blur(40px);
|
|
pointer-events: none;
|
|
}
|
|
.hero img { width: 120px; height: 120px; position: relative; z-index: 2; filter: drop-shadow(0 8px 32px rgba(0,217,255,0.3)); }
|
|
.hero h1 {
|
|
font-family: var(--f-display);
|
|
font-size: 72px;
|
|
font-weight: 700;
|
|
margin: var(--s-4) 0 var(--s-2);
|
|
letter-spacing: -2px;
|
|
color: var(--c-foam);
|
|
position: relative; z-index: 2;
|
|
}
|
|
.hero h1 .accent { color: var(--c-cyan); font-weight: 300; }
|
|
.hero h1 .light { font-weight: 400; }
|
|
.hero .tagline {
|
|
font-size: 14px;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--c-horizon);
|
|
position: relative; z-index: 2;
|
|
margin-bottom: var(--s-3);
|
|
}
|
|
.hero p {
|
|
max-width: 640px;
|
|
margin: var(--s-4) auto 0;
|
|
color: var(--c-sand);
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
position: relative; z-index: 2;
|
|
}
|
|
.badges {
|
|
display: flex; justify-content: center;
|
|
gap: var(--s-3);
|
|
margin-top: var(--s-6);
|
|
flex-wrap: wrap;
|
|
position: relative; z-index: 2;
|
|
}
|
|
.grid {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--s-7) var(--s-9);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
|
gap: var(--s-5);
|
|
}
|
|
.card-mockup {
|
|
background: var(--c-midnight);
|
|
border: 1px solid var(--c-steel);
|
|
border-radius: var(--r-4);
|
|
overflow: hidden;
|
|
box-shadow: var(--e-2);
|
|
transition: transform 200ms var(--ease-standard),
|
|
box-shadow 200ms var(--ease-standard),
|
|
border-color 200ms var(--ease-standard);
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.card-mockup:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--c-cyan);
|
|
box-shadow: var(--e-4), var(--glow-cyan);
|
|
}
|
|
.preview {
|
|
aspect-ratio: 16 / 10;
|
|
background: var(--c-abyss);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.preview .iframe-wrap {
|
|
width: 200%;
|
|
height: 200%;
|
|
transform: scale(0.5);
|
|
transform-origin: top left;
|
|
pointer-events: none;
|
|
}
|
|
.preview iframe {
|
|
width: 100%; height: 100%;
|
|
border: 0;
|
|
}
|
|
.preview .label {
|
|
position: absolute;
|
|
top: var(--s-3); left: var(--s-3);
|
|
padding: 4px 10px;
|
|
background: rgba(4,17,31,0.9);
|
|
border: 1px solid var(--c-iron);
|
|
border-radius: var(--r-pill);
|
|
font-family: var(--f-mono);
|
|
font-size: 10px;
|
|
color: var(--c-cyan);
|
|
letter-spacing: 1px;
|
|
z-index: 2;
|
|
}
|
|
.info {
|
|
padding: var(--s-4) var(--s-5);
|
|
}
|
|
.info h3 {
|
|
font-family: var(--f-display);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0 0 var(--s-2);
|
|
color: var(--c-foam);
|
|
}
|
|
.info p {
|
|
margin: 0;
|
|
color: var(--c-fog);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.sprint-tag {
|
|
display: inline-block;
|
|
margin-top: var(--s-3);
|
|
padding: 2px 10px;
|
|
background: var(--c-steel);
|
|
border-radius: var(--r-pill);
|
|
font-family: var(--f-mono);
|
|
font-size: 11px;
|
|
color: var(--c-cyan);
|
|
}
|
|
.footer {
|
|
padding: var(--s-6) var(--s-7);
|
|
text-align: center;
|
|
border-top: 1px solid var(--c-steel);
|
|
color: var(--c-fog);
|
|
font-size: 12px;
|
|
font-family: var(--f-mono);
|
|
}
|
|
.footer strong { color: var(--c-sand); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-root">
|
|
|
|
<header class="hero">
|
|
<img src="../brand/logo-mark.svg" alt="VMS-Sailor">
|
|
<p class="tagline">Vessel Management System</p>
|
|
<h1>VMS<span class="accent"> · </span><span class="light">Sailor</span></h1>
|
|
<p>
|
|
Sprint 0 visual reference. 8 mockups HTML estáticos que muestran el aspecto futuro de Studio, Runtime desktop y Mobile.
|
|
Mismo design system (tokens en <code>_tokens.css</code>) aplicará en Sprint 1 (PySide6), Sprint 6 (PySide6) y Sprint 11 (Flutter).
|
|
</p>
|
|
<div class="badges">
|
|
<span class="chip"><span class="dot ok"></span> 99/99 tests · 95% cov</span>
|
|
<span class="chip"><span class="dot cyan"></span> Python 3.11 · uv</span>
|
|
<span class="chip"><span class="dot cyan"></span> Pydantic v2</span>
|
|
<span class="chip"><span class="dot cyan"></span> SQLite portable</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid">
|
|
|
|
<a href="splash.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">SPLASH</span>
|
|
<div class="iframe-wrap"><iframe src="splash.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Splash · Bienvenida</h3>
|
|
<p>Pantalla de arranque con logo, olas animadas, loading scan y certificaciones (IEC, IACS, NMEA 2000).</p>
|
|
<span class="sprint-tag">Studio + Runtime · todos los sprints</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="studio_main.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">STUDIO</span>
|
|
<div class="iframe-wrap"><iframe src="studio_main.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Studio · Topología</h3>
|
|
<p>Shell del Studio con wizard 8 pasos, sidebar de sistemas habilitados, canvas con silueta del buque y inspector de tarjetas AR-NMEA-IO.</p>
|
|
<span class="sprint-tag">Sprint 1-3</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="runtime_overview.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">RUNTIME · OVERVIEW</span>
|
|
<div class="iframe-wrap"><iframe src="runtime_overview.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Dashboard del buque</h3>
|
|
<p>Vista general con estado de motores, gensets, tanques, alarmas recientes y horizonte artificial con roll/pitch en vivo.</p>
|
|
<span class="sprint-tag">Sprint 6</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="runtime_mimic_fuel.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">MÍMICO · COMBUSTIBLE</span>
|
|
<div class="iframe-wrap"><iframe src="runtime_mimic_fuel.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>P&ID animado</h3>
|
|
<p>Mímico del sistema de combustible con flujo animado en tuberías, bomba rotando, tanques con gradiente de nivel.</p>
|
|
<span class="sprint-tag">Sprint 3 + 6</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="runtime_alarms.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">ALARMAS</span>
|
|
<div class="iframe-wrap"><iframe src="runtime_alarms.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Panel de alarmas</h3>
|
|
<p>Lista cronológica con prioridades IMO (Emergency / High / Low / Info), ACK por alarma, filtros y escalación.</p>
|
|
<span class="sprint-tag">Sprint 4 + 6</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="runtime_trim.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">⭐ TRIM & MANIOBRA</span>
|
|
<div class="iframe-wrap"><iframe src="runtime_trim.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Trim & Maniobra</h3>
|
|
<p>Pantalla destacada. Horizonte artificial con bandas de seguridad, 4 sliders de trim, predicción de envelope, botón reset emergencia y modo manual owner.</p>
|
|
<span class="sprint-tag">Sprint 8</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="mobile_overview.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">MOBILE · OVERVIEW</span>
|
|
<div class="iframe-wrap"><iframe src="mobile_overview.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Mobile · iOS overview</h3>
|
|
<p>App nativa Flutter con dashboard del buque, motores, horizonte mini y alarmas. WiFi local del buque.</p>
|
|
<span class="sprint-tag">Sprint 11</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="mobile_trim.html" class="card-mockup">
|
|
<div class="preview">
|
|
<span class="label">MOBILE · TRIM</span>
|
|
<div class="iframe-wrap"><iframe src="mobile_trim.html" loading="lazy" scrolling="no"></iframe></div>
|
|
</div>
|
|
<div class="info">
|
|
<h3>Mobile · Trim del owner</h3>
|
|
<p>Panel destacado en móvil. Sliders táctiles grandes, FaceID para modo manual, botón reset emergencia siempre visible.</p>
|
|
<span class="sprint-tag">Sprint 11</span>
|
|
</div>
|
|
</a>
|
|
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<strong>VMS-Sailor</strong> v0.1.0.dev0 · Sprint 0 · 2026<br>
|
|
Propiedad intelectual de Álvaro · Todos los derechos reservados
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|