tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portada chakana 2x2: reticula, 4 cuadrantes 0x00-0x03, hover metadatos, canvas opaco atras

Browse Source
This commit is contained in:
Sergio
2026-05-24 02:17:34 +00:00
parent d8866897ea
commit 2545d3108d
2 changed files with 504 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/index.html
+148 -80
View File
@@ -3,122 +3,190 @@
<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>
<meta name="description" content="GioSer · arquitectura de sistemas distribuidos">
<title>GioSer · 0x00–0x03</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>
<!-- Canvas de fondo (opcional para portada, necesario para WASM) -->
<canvas id="gioser-canvas" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:0;" aria-hidden="true"></canvas>
<main id="tips" aria-label="Cuatro cardinales">
<!-- NORTE (aire): SOFTWARE · Tecnología — circuito + nodos -->
<a id="tip-aire" class="tip tip-aire" href="#aire" data-md="/md/aire.md" aria-label="Software · Tecnología">
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
<rect x="18" y="18" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.7" rx="1"/>
<circle cx="24" cy="24" r="2" fill="currentColor"/>
<path d="M22 18 V14 M26 18 V14 M22 30 V34 M26 30 V34 M18 22 H14 M18 26 H14 M30 22 H34 M30 26 H34"
stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<circle cx="10" cy="10" r="1.6" fill="currentColor" opacity="0.7"/>
<circle cx="38" cy="10" r="1.6" fill="currentColor" opacity="0.7"/>
<circle cx="10" cy="38" r="1.6" fill="currentColor" opacity="0.7"/>
<circle cx="38" cy="38" r="1.6" fill="currentColor" opacity="0.7"/>
<path d="M11 11 L17 17 M37 11 L31 17 M11 37 L17 31 M37 37 L31 31"
stroke="currentColor" stroke-width="1.1" opacity="0.45"/>
</svg>
<span class="tip-label">SOFTWARE</span>
<span class="tip-sub">Tecnología</span>
</a>
<!-- Portada: retícula 2×2 tipo chakana -->
<div id="portada" class="portada">
<!-- Líneas de la retícula -->
<div class="reticula-v" aria-hidden="true"></div>
<div class="reticula-h" aria-hidden="true"></div>
<div class="reticula-center" aria-hidden="true"></div>
<!-- ESTE (fuego): QUIÉN SOY · Bitácora — libro abierto -->
<a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="/md/fuego.md" aria-label="Quién Soy · Bitácora">
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
<path d="M8 14 L24 18 L40 14 V36 L24 32 L8 36 Z"
fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
<path d="M24 18 V32" stroke="currentColor" stroke-width="1.5"/>
<path d="M12 22 H21 M12 26 H21 M12 30 H19" stroke="currentColor" stroke-width="1.1" opacity="0.65" stroke-linecap="round"/>
<path d="M27 22 H36 M27 26 H36 M29 30 H36" stroke="currentColor" stroke-width="1.1" opacity="0.65" stroke-linecap="round"/>
</svg>
<span class="tip-label">QUIÉN SOY</span>
<span class="tip-sub">Bitácora</span>
</a>
<!-- Cuadrante I: 0x00 - Bare-Metal OS (sup-der) -->
<button class="cuadrante cuadrante-00" data-q="00" aria-label="0x00 Bare-Metal OS">
<div class="cuadrante-border"></div>
<div class="cuadrante-content">
<span class="cuadrante-hex">0x00</span>
<span class="cuadrante-title">Bare-Metal OS</span>
<span class="cuadrante-context">El control directo sobre el silicio y la secuencia de arranque.</span>
<div class="cuadrante-meta">
<span class="meta-cta">⏎ init</span>
<span class="meta-stat">init · boot · sovereign</span>
</div>
<ul class="cuadrante-crates">
<li>arjé (Init/Nivel 0)</li>
</ul>
</div>
</button>
<!-- SUR (tierra): MANIFIESTO · Invariantes — hexagrama + círculo -->
<a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="/md/tierra.md" aria-label="Manifiesto · Invariantes">
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
<circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="1.4" opacity="0.55"/>
<path d="M24 8 L39 32 L9 32 Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
<path d="M24 40 L9 16 L39 16 Z" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.85" stroke-linejoin="round"/>
<circle cx="24" cy="24" r="1.8" fill="currentColor"/>
</svg>
<span class="tip-label">MANIFIESTO</span>
<span class="tip-sub">Invariantes</span>
</a>
<!-- Cuadrante II: 0x01 - Systems & Compositors (sup-izq) -->
<button class="cuadrante cuadrante-01" data-q="01" aria-label="0x01 Systems & Compositors">
<div class="cuadrante-border"></div>
<div class="cuadrante-content">
<span class="cuadrante-hex">0x01</span>
<span class="cuadrante-title">Systems &amp; Compositors</span>
<span class="cuadrante-context">Entorno operativo intermedio para Linux libres de telemetría.</span>
<div class="cuadrante-meta">
<span class="meta-cta">⏎ shell</span>
<span class="meta-stat">compositor · launcher</span>
</div>
<ul class="cuadrante-crates">
<li>eidolon (Compositor Wayland)</li>
<li>shimi (Shell/Launcher)</li>
</ul>
</div>
</button>
<!-- OESTE (agua): MÍSTICA · Espiritualidad — ojo en triángulo -->
<a id="tip-agua" class="tip tip-agua" href="#agua" data-md="/md/agua.md" aria-label="Mística · Espiritualidad">
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
<path d="M24 6 L42 40 L6 40 Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M13 26 Q24 16 35 26 Q24 34 13 26 Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
<circle cx="24" cy="26" r="3.2" fill="currentColor"/>
<circle cx="22.5" cy="24.5" r="0.9" fill="rgba(255,255,255,0.55)"/>
</svg>
<span class="tip-label">MÍSTICA</span>
<span class="tip-sub">Espiritualidad</span>
</a>
<!-- Tips ocultos para navegación JS: cuerpo, sombra, cosmos, practica, olvido -->
<a id="tip-cuerpo" class="tip tip-cuerpo tip-hidden" href="#cuerpo" data-md="/md/cuerpo.md" aria-hidden="true"></a>
<a id="tip-sombra" class="tip tip-sombra tip-hidden" href="#sombra" data-md="/md/sombra.md" aria-hidden="true"></a>
<a id="tip-cosmos" class="tip tip-cosmos tip-hidden" href="#cosmos" data-md="/md/cosmos.md" aria-hidden="true"></a>
<a id="tip-practica" class="tip tip-practica tip-hidden" href="#practica" data-md="/md/practica.md" aria-hidden="true"></a>
<a id="tip-olvido" class="tip tip-olvido tip-hidden" href="#olvido" data-md="/md/olvido.md" aria-hidden="true"></a>
</main>
<!-- Cuadrante III: 0x02 - Simulators & Geometry (inf-izq) -->
<button class="cuadrante cuadrante-02" data-q="02" aria-label="0x02 Simulators & Geometry">
<div class="cuadrante-border"></div>
<div class="cuadrante-content">
<span class="cuadrante-hex">0x02</span>
<span class="cuadrante-title">Simulators &amp; Geometry</span>
<span class="cuadrante-context">Modelado del tiempo en bloque, frecuencias celestes, simulación determinista.</span>
<div class="cuadrante-meta">
<span class="meta-cta">⏎ simulate</span>
<span class="meta-stat">efemérides · orbital · mundos</span>
</div>
<ul class="cuadrante-crates">
<li>eternal (Efemérides analíticas)</li>
<li>cosmobiología (Canvas orbital)</li>
<li>dominium (Simulador de mundos)</li>
</ul>
</div>
</button>
<!-- 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>
<!-- Cuadrante IV: 0x03 - Core & Orchestration (inf-der) -->
<button class="cuadrante cuadrante-03" data-q="03" aria-label="0x03 Core & Orchestration">
<div class="cuadrante-border"></div>
<div class="cuadrante-content">
<span class="cuadrante-hex">0x03</span>
<span class="cuadrante-title">Core &amp; Orchestration</span>
<span class="cuadrante-context">Motor invisible: persistencia local-first, P2P, ERP, encriptación.</span>
<div class="cuadrante-meta">
<span class="meta-cta">⏎ orchestrate</span>
<span class="meta-stat">dht · p2p · erp</span>
</div>
<ul class="cuadrante-crates">
<li>brahman (Supervisor)</li>
<li>minga / minga-vfs (FS distribuido)</li>
<li>brahman-auth · nakui (ERP)</li>
</ul>
</div>
</button>
</div>
<!-- Controles fijos de página: minimizar y cerrar (siempre en el DOM,
ocultos por CSS hasta que el deck se abre) -->
<!-- DECK: contenedor para páginas md (oculto hasta expandir cuadrante) -->
<div id="deck" class="deck" aria-hidden="true">
<div id="deck-strip" class="deck-strip" role="region" aria-label="Vistas abiertas"></div>
</div>
<!-- Controles fijos -->
<div class="page-controls" id="global-page-controls" style="opacity:0;pointer-events:none;">
<button class="page-control-btn page-minimize" data-minimize="" type="button" aria-label="Minimizar">
<button class="page-control-btn page-minimize" data-minimize type="button" aria-label="Minimizar">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19 H19" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
</button>
<button class="page-control-btn page-close" data-close-page="" type="button" aria-label="Cerrar">×</button>
<button class="page-control-btn page-close" data-close-page type="button" aria-label="Cerrar">×</button>
</div>
<!-- TASKBAR estilo Windows: home + GioSer + tabs + copyleft -->
<!-- Taskbar -->
<nav class="taskbar" aria-label="Barra de vistas">
<button class="taskbar-home" data-home aria-label="Volver al home" type="button">
<button class="taskbar-home" data-home aria-label="Volver a la chakana" 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">
<a class="taskbar-brand" href="#" aria-label="GioSer">
<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">
<a class="taskbar-credit" href="https://sergio.gioser.net" target="_blank" rel="noopener noreferrer" aria-label="Copyleft sergio">
<span class="copyleft-mark" aria-hidden="true">©</span>
<span class="taskbar-credit-text">sergio@gioser.net</span>
</a>
</nav>
<!-- Tips ocultos para navegación WASM (se mantienen para compatibilidad) -->
<div id="tips" hidden aria-hidden="true">
<a id="tip-aire" href="#aire" data-md="/md/aire.md"></a>
<a id="tip-fuego" href="#fuego" data-md="/md/fuego.md"></a>
<a id="tip-tierra" href="#tierra" data-md="/md/tierra.md"></a>
<a id="tip-agua" href="#agua" data-md="/md/agua.md"></a>
<a id="tip-cuerpo" href="#cuerpo" data-md="/md/cuerpo.md"></a>
<a id="tip-sombra" href="#sombra" data-md="/md/sombra.md"></a>
<a id="tip-cosmos" href="#cosmos" data-md="/md/cosmos.md"></a>
<a id="tip-practica" href="#practica" data-md="/md/practica.md"></a>
<a id="tip-olvido" href="#olvido" data-md="/md/olvido.md"></a>
</div>
<script type="module">
// Mapa: cuadrante hex → camino md
const Q_TO_CAMINO = {
'00': 'aire', // Bare-Metal → Software
'01': 'fuego', // Systems → Quién Soy
'02': 'tierra', // Simulators → Manifiesto
'03': 'agua', // Core → Mística
};
// JS de portada: hover/click en cuadrantes
const portada = document.getElementById('portada');
const deck = document.getElementById('deck');
const controls = document.getElementById('global-page-controls');
document.querySelectorAll('.cuadrante').forEach(q => {
q.addEventListener('click', function(e) {
const hex = this.dataset.q;
const camino = Q_TO_CAMINO[hex] || 'aire';
// cerrar portada
portada.classList.add('portada-closing');
// mostrar deck
deck.removeAttribute('aria-hidden');
controls.style.opacity = '1';
controls.style.pointerEvents = 'auto';
// navegar vía hash para que el WASM lo atrape
// (el WASM escucha popstate + lee hash al boot)
history.pushState({}, '', '/estudio/' + camino);
window.dispatchEvent(new PopStateEvent('popstate'));
});
});
// Botón home en taskbar: volver a portada
document.querySelectorAll('[data-home]').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
portada.classList.remove('portada-closing');
deck.setAttribute('aria-hidden', 'true');
controls.style.opacity = '0';
controls.style.pointerEvents = 'none';
history.pushState({}, '', '/');
});
});
// Importar WASM existente
import init from "/pkg/gioser_web.js";
init().catch(err => {
console.error(err);
document.body.insertAdjacentHTML("beforeend",
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>');
});
crates/apps/gioser-web/styles.css
+356 -595
View File
File diff suppressed because it is too large Load Diff