portada: reticula 3px #777, z-index 30, canvas z-index -1, hover via reticula-lit
1<!doctype html>
2<html lang="es">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6 <meta name="description" content="GioSer · arquitectura de sistemas distribuidos">
7 <title>GioSer · 0x00–0x03</title>
8 <link rel="stylesheet" href="/styles.css">
9</head>
10<body>
11 <!-- Canvas de fondo (opcional para portada, necesario para WASM) -->
12 <canvas id="gioser-canvas" style="position:fixed;inset:0;width:1px;height:1px;pointer-events:none;z-index:-1;" aria-hidden="true"></canvas>
13
14 <!-- Portada: retícula 2×2 tipo chakana -->
15 <div id="portada" class="portada">
16 <!-- Cuadrante I: 0x01 - Systems & Compositors (sup-izq) -->
17 <button class="cuadrante cuadrante-01" data-q="01" aria-label="0x01 Systems & Compositors">
18 <div class="cuadrante-border"></div>
19 <div class="cuadrante-content">
20 <span class="cuadrante-hex">0x01</span>
21 <span class="cuadrante-title">Systems & Compositors</span>
22 <span class="cuadrante-context">Entorno operativo intermedio para Linux libres de telemetría.</span>
23 <div class="cuadrante-meta">
24 <span class="meta-cta">⏎ shell</span>
25 <span class="meta-stat">compositor · launcher</span>
26 </div>
27 <ul class="cuadrante-crates">
28 <li>eidolon (Compositor Wayland)</li>
29 <li>shimi (Shell/Launcher)</li>
30 </ul>
31 </div>
32 </button>
33
34 <!-- Cuadrante II: 0x00 - Bare-Metal OS (sup-der) -->
35 <button class="cuadrante cuadrante-00" data-q="00" aria-label="0x00 Bare-Metal OS">
36 <div class="cuadrante-border"></div>
37 <div class="cuadrante-content">
38 <span class="cuadrante-hex">0x00</span>
39 <span class="cuadrante-title">Bare-Metal OS</span>
40 <span class="cuadrante-context">El control directo sobre el silicio y la secuencia de arranque.</span>
41 <div class="cuadrante-meta">
42 <span class="meta-cta">⏎ init</span>
43 <span class="meta-stat">init · boot · sovereign</span>
44 </div>
45 <ul class="cuadrante-crates">
46 <li>arjé (Init/Nivel 0)</li>
47 </ul>
48 </div>
49 </button>
50
51 <!-- Cuadrante III: 0x02 - Simulators & Geometry (inf-izq) -->
52 <button class="cuadrante cuadrante-02" data-q="02" aria-label="0x02 Simulators & Geometry">
53 <div class="cuadrante-border"></div>
54 <div class="cuadrante-content">
55 <span class="cuadrante-hex">0x02</span>
56 <span class="cuadrante-title">Simulators & Geometry</span>
57 <span class="cuadrante-context">Modelado del tiempo en bloque, frecuencias celestes, simulación determinista.</span>
58 <div class="cuadrante-meta">
59 <span class="meta-cta">⏎ simulate</span>
60 <span class="meta-stat">efemérides · orbital · mundos</span>
61 </div>
62 <ul class="cuadrante-crates">
63 <li>eternal (Efemérides analíticas)</li>
64 <li>cosmobiología (Canvas orbital)</li>
65 <li>dominium (Simulador de mundos)</li>
66 </ul>
67 </div>
68 </button>
69
70 <!-- Cuadrante IV: 0x03 - Core & Orchestration (inf-der) -->
71 <button class="cuadrante cuadrante-03" data-q="03" aria-label="0x03 Core & Orchestration">
72 <div class="cuadrante-border"></div>
73 <div class="cuadrante-content">
74 <span class="cuadrante-hex">0x03</span>
75 <span class="cuadrante-title">Core & Orchestration</span>
76 <span class="cuadrante-context">Motor invisible: persistencia local-first, P2P, ERP, encriptación.</span>
77 <div class="cuadrante-meta">
78 <span class="meta-cta">⏎ orchestrate</span>
79 <span class="meta-stat">dht · p2p · erp</span>
80 </div>
81 <ul class="cuadrante-crates">
82 <li>brahman (Supervisor)</li>
83 <li>minga / minga-vfs (FS distribuido)</li>
84 <li>brahman-auth · nakui (ERP)</li>
85 </ul>
86 </div>
87 </button>
88
89 <!-- Líneas de retícula (después de cuadrantes para hover via JS) -->
90 <div class="reticula-v" aria-hidden="true"></div>
91 <div class="reticula-h" aria-hidden="true"></div>
92 <div class="reticula-center" aria-hidden="true"></div>
93 </div>
94
95 <!-- DECK: contenedor para páginas md (oculto hasta expandir cuadrante) -->
96 <div id="deck" class="deck" aria-hidden="true">
97 <div id="deck-strip" class="deck-strip" role="region" aria-label="Vistas abiertas"></div>
98 </div>
99
100 <!-- Controles fijos -->
101 <div class="page-controls" id="global-page-controls" style="opacity:0;pointer-events:none;">
102 <button class="page-control-btn page-minimize" data-minimize type="button" aria-label="Minimizar">
103 <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>
104 </button>
105 <button class="page-control-btn page-close" data-close-page type="button" aria-label="Cerrar">×</button>
106 </div>
107
108 <!-- Taskbar -->
109 <nav class="taskbar" aria-label="Barra de vistas">
110 <button class="taskbar-home" data-home aria-label="Volver a la chakana" type="button">
111 <svg viewBox="0 0 24 24" class="taskbar-home-glyph" aria-hidden="true">
112 <path d="M3 12 L12 3 L21 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
113 <path d="M5 11 V20 H10 V14 H14 V20 H19 V11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
114 <circle cx="12" cy="17" r="0.8" fill="currentColor"/>
115 </svg>
116 </button>
117 <a class="taskbar-brand" href="#" aria-label="GioSer">
118 <span>Gio</span><span class="brand-dot">·</span><span>Ser</span>
119 </a>
120 <span class="taskbar-divider" aria-hidden="true"></span>
121 <ul class="taskbar-list" id="taskbar-list" role="presentation"></ul>
122 <span class="taskbar-spacer" aria-hidden="true"></span>
123 <a class="taskbar-credit" href="https://sergio.gioser.net" target="_blank" rel="noopener noreferrer" aria-label="Copyleft sergio">
124 <span class="copyleft-mark" aria-hidden="true">©</span>
125 <span class="taskbar-credit-text">sergio@gioser.net</span>
126 </a>
127 </nav>
128
129 <!-- Tips ocultos para navegación WASM (se mantienen para compatibilidad) -->
130 <div id="tips" hidden aria-hidden="true">
131 <a id="tip-aire" href="#aire" data-md="/md/aire.md"></a>
132 <a id="tip-fuego" href="#fuego" data-md="/md/fuego.md"></a>
133 <a id="tip-tierra" href="#tierra" data-md="/md/tierra.md"></a>
134 <a id="tip-agua" href="#agua" data-md="/md/agua.md"></a>
135 <a id="tip-cuerpo" href="#cuerpo" data-md="/md/cuerpo.md"></a>
136 <a id="tip-sombra" href="#sombra" data-md="/md/sombra.md"></a>
137 <a id="tip-cosmos" href="#cosmos" data-md="/md/cosmos.md"></a>
138 <a id="tip-practica" href="#practica" data-md="/md/practica.md"></a>
139 <a id="tip-olvido" href="#olvido" data-md="/md/olvido.md"></a>
140 </div>
141
142 <script type="module">
143 // Mapa: cuadrante hex → camino md
144 const Q_TO_CAMINO = {
145 '00': 'aire', // Bare-Metal → Software
146 '01': 'fuego', // Systems → Quién Soy
147 '02': 'tierra', // Simulators → Manifiesto
148 '03': 'agua', // Core → Mística
149 };
150
151 // JS de portada: hover/click en cuadrantes
152 const portada = document.getElementById('portada');
153 const deck = document.getElementById('deck');
154 const controls = document.getElementById('global-page-controls');
155 const reticulaV = document.querySelector('.reticula-v');
156 const reticulaH = document.querySelector('.reticula-h');
157 const reticulaC = document.querySelector('.reticula-center');
158
159 // Hover en cuadrantes ilumina retícula
160 document.querySelectorAll('.cuadrante').forEach(q => {
161 q.addEventListener('mouseenter', () => {
162 reticulaV.classList.add('reticula-lit');
163 reticulaH.classList.add('reticula-lit');
164 reticulaC.classList.add('reticula-lit');
165 });
166 q.addEventListener('mouseleave', () => {
167 reticulaV.classList.remove('reticula-lit');
168 reticulaH.classList.remove('reticula-lit');
169 reticulaC.classList.remove('reticula-lit');
170 });
171 q.addEventListener('click', function(e) {
172 const hex = this.dataset.q;
173 const camino = Q_TO_CAMINO[hex] || 'aire';
174 // cerrar portada
175 portada.classList.add('portada-closing');
176 // mostrar deck
177 deck.removeAttribute('aria-hidden');
178 controls.style.opacity = '1';
179 controls.style.pointerEvents = 'auto';
180 // navegar vía hash para que el WASM lo atrape
181 history.pushState({}, '', '/estudio/' + camino);
182 window.dispatchEvent(new PopStateEvent('popstate'));
183 });
184 });
185
186 // Botón home en taskbar: volver a portada
187 document.querySelectorAll('[data-home]').forEach(btn => {
188 btn.addEventListener('click', function(e) {
189 e.preventDefault();
190 portada.classList.remove('portada-closing');
191 deck.setAttribute('aria-hidden', 'true');
192 controls.style.opacity = '0';
193 controls.style.pointerEvents = 'none';
194 history.pushState({}, '', '/');
195 });
196 });
197
198 // Importar WASM existente
199 import init from "/pkg/gioser_web.js";
200 init().catch(err => {
201 console.error(err);
202 document.body.insertAdjacentHTML('beforeend',
203 '<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace;z-index:9999">' +
204 String(err) + '</pre>');
205 });
206 </script>
207</body>
208</html>