sergio
62058ab193
Nuevo módulo agnóstico: - `crates/modules/vista/vista-web` — Deck::mount(strip) instala swipe horizontal con snap a la página más cercana, estilo Flutter PageView. goto(idx, smooth) navega programáticamente. on_change(cb) fires tras snap. Drag decision: horizontal si dx > 8px y > 1.3*dy; sino cede al pan-y nativo (scroll vertical del contenido). resize listener ajusta --vista-offset sin animar usando .vista-instant un frame. App rediseñada: - Brand "GioSer" sacado del centro de la chacana → ahora en la taskbar junto al botón home (data-home). brand-dot dorado entre Gio·Ser. El centro de la chacana queda con sol limpio. - Copyleft + sergio@gioser.net a la derecha de la taskbar, abre https://sergio.gioser.net en nueva pestaña (target=_blank rel=noopener). - 4 drawers separados → reemplazados por un único `.deck` con `.deck-strip` vista-web manejado. Las páginas se crean dinámicamente al abrir un elemento por primera vez (`ensure_page_dom`). - Cada página tiene controles minimizar (─) y cerrar (×) arriba a la derecha, con ambience animada por elemento. - Click minimize → active=None, deck scale(0) hacia la cajita del taskbar (origin = bounding rect del taskbar-item). Página queda en memoria, tab sigue en la barra. - Click cajita del taskbar: - Si está activa → minimize (toggle). - Si está minimizada → restore con scale-up desde la cajita. - Click home / brand → minimize all (estilo Show Desktop, no destruye). - Swipe horizontal o click cajita → deck.goto(idx, smooth=true) con snap animado por vista-web. on_swipe sync de taskbar active state. - Cerrar página → remueve del strip + del Vec pages; si era activa, reemplaza por neighbor o hide deck si era la última. CSS: - Eliminado `.brand` fixed center y `.drawer` × 4 individuales. - `.deck` único + `.deck-strip` con `transform: translate3d(--vista-offset)` y transition transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1). - `.deck-strip.vista-dragging` / `.vista-instant` → transition: none. - `.deck-page[data-element]` cada una con su page-ambience animada (aire-drift, fuego-flicker, agua-tide, tierra static). - `.taskbar-brand` Cinzel 1.3rem dorado + .brand-dot. - `.taskbar-credit` con `.copyleft-mark` (© con scaleX(-1) = copyleft visual). - `.taskbar-spacer { flex:1 }` empuja credit a la derecha. - `.taskbar-item.active` glow del color del elemento + border-bottom. - `body.deck-visible` baja opacity del canvas + esconde tips y brand. Workspace verde + 18 tests (geom 6 + palette 4 + physics 3 + pluma-md 5). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
99 lines
5.2 KiB
HTML
99 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>GioSer · En el centro, el ser</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@300;500;600&family=JetBrains+Mono:wght@400;600&display=swap">
|
|
</head>
|
|
<body>
|
|
<canvas id="gioser-canvas" aria-hidden="true"></canvas>
|
|
|
|
<main id="tips" aria-label="Cuatro elementos">
|
|
<a id="tip-aire" class="tip tip-aire" href="#aire" data-md="./md/aire.md" aria-label="Aire — Software e IA">
|
|
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
|
<path d="M6 18 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
<path d="M6 28 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
|
|
<path d="M6 38 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.45"/>
|
|
</svg>
|
|
<span class="tip-label">AIRE</span>
|
|
<span class="tip-sub">Software · IA</span>
|
|
</a>
|
|
|
|
<a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="./md/fuego.md" aria-label="Fuego — Inspiración">
|
|
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
|
<path d="M24 4 q -12 12 -6 24 q 3 -6 6 -6 q 1 10 6 12 q 10 -10 0 -22 q -4 6 -6 -8 z"
|
|
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
<circle cx="24" cy="28" r="3" fill="currentColor" opacity="0.5"/>
|
|
</svg>
|
|
<span class="tip-label">FUEGO</span>
|
|
<span class="tip-sub">Inspiración</span>
|
|
</a>
|
|
|
|
<a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="./md/tierra.md" aria-label="Tierra — Cuerpo">
|
|
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
|
<path d="M4 36 l 12 -16 l 8 9 l 6 -12 l 14 19 z"
|
|
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
|
<path d="M24 36 v 8 M19 38 l -4 5 M29 38 l 4 5 M24 44 v 2"
|
|
fill="none" stroke="currentColor" stroke-width="1.3" opacity="0.7"/>
|
|
</svg>
|
|
<span class="tip-label">TIERRA</span>
|
|
<span class="tip-sub">Cuerpo</span>
|
|
</a>
|
|
|
|
<a id="tip-agua" class="tip tip-agua" href="#agua" data-md="./md/agua.md" aria-label="Agua — Espiritualidad aplicada">
|
|
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
|
<path d="M6 22 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
<path d="M6 30 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
|
|
<path d="M6 38 q 6 -10 12 0 t 12 0 t 12 0" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" opacity="0.5"/>
|
|
</svg>
|
|
<span class="tip-label">AGUA</span>
|
|
<span class="tip-sub">Espiritualidad</span>
|
|
</a>
|
|
</main>
|
|
|
|
<!-- DECK: contenedor único con strip horizontal. Las páginas se inyectan
|
|
dinámicamente desde WASM. vista-web maneja swipe + snap. -->
|
|
<div id="deck" class="deck vista-deck" aria-hidden="true">
|
|
<div id="deck-strip" class="deck-strip vista-strip" role="region" aria-label="Vistas abiertas"></div>
|
|
</div>
|
|
|
|
<!-- TASKBAR estilo Windows: home + GioSer + tabs + copyleft -->
|
|
<nav class="taskbar" aria-label="Barra de vistas">
|
|
<button class="taskbar-home" data-home aria-label="Volver al home" type="button">
|
|
<svg viewBox="0 0 24 24" class="taskbar-home-glyph" aria-hidden="true">
|
|
<path d="M3 12 L12 3 L21 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
|
|
<path d="M5 11 V20 H10 V14 H14 V20 H19 V11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="17" r="0.8" fill="currentColor"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<a class="taskbar-brand" data-home href="#home" aria-label="GioSer · home">
|
|
<span>Gio</span><span class="brand-dot">·</span><span>Ser</span>
|
|
</a>
|
|
|
|
<span class="taskbar-divider" aria-hidden="true"></span>
|
|
<ul class="taskbar-list" id="taskbar-list" role="presentation"></ul>
|
|
<span class="taskbar-spacer" aria-hidden="true"></span>
|
|
|
|
<a class="taskbar-credit" href="https://sergio.gioser.net" target="_blank" rel="noopener noreferrer" aria-label="Copyleft sergio arroba gioser punto net">
|
|
<span class="copyleft-mark" aria-hidden="true">©</span>
|
|
<span class="taskbar-credit-text">sergio@gioser.net</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<script type="module">
|
|
import init from "./pkg/gioser_web.js";
|
|
init().catch(err => {
|
|
console.error(err);
|
|
document.body.insertAdjacentHTML("beforeend",
|
|
'<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace;z-index:9999">' +
|
|
String(err) + '</pre>');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|