tawasuyu/brahman

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  <title>GioSer · En el centro, el ser</title>
7  <link rel="stylesheet" href="/styles.css">
8  <link rel="preconnect" href="https://fonts.googleapis.com">
9  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10  <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">
11</head>
12<body>
13  <canvas id="gioser-canvas" aria-hidden="true"></canvas>
14
15  <main id="tips" aria-label="Cuatro cardinales">
16    <!-- NORTE (aire): SOFTWARE · Tecnología — circuito + nodos -->
17    <a id="tip-aire" class="tip tip-aire" href="#aire" data-md="/md/aire.md" aria-label="Software · Tecnología">
18      <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
19        <rect x="18" y="18" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.7" rx="1"/>
20        <circle cx="24" cy="24" r="2" fill="currentColor"/>
21        <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"
22              stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
23        <circle cx="10" cy="10" r="1.6" fill="currentColor" opacity="0.7"/>
24        <circle cx="38" cy="10" r="1.6" fill="currentColor" opacity="0.7"/>
25        <circle cx="10" cy="38" r="1.6" fill="currentColor" opacity="0.7"/>
26        <circle cx="38" cy="38" r="1.6" fill="currentColor" opacity="0.7"/>
27        <path d="M11 11 L17 17 M37 11 L31 17 M11 37 L17 31 M37 37 L31 31"
28              stroke="currentColor" stroke-width="1.1" opacity="0.45"/>
29      </svg>
30      <span class="tip-label">SOFTWARE</span>
31      <span class="tip-sub">Tecnología</span>
32    </a>
33
34    <!-- ESTE (fuego): QUIÉN SOY · Bitácora — libro abierto -->
35    <a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="/md/fuego.md" aria-label="Quién Soy · Bitácora">
36      <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
37        <path d="M8 14 L24 18 L40 14 V36 L24 32 L8 36 Z"
38              fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
39        <path d="M24 18 V32" stroke="currentColor" stroke-width="1.5"/>
40        <path d="M12 22 H21 M12 26 H21 M12 30 H19" stroke="currentColor" stroke-width="1.1" opacity="0.65" stroke-linecap="round"/>
41        <path d="M27 22 H36 M27 26 H36 M29 30 H36" stroke="currentColor" stroke-width="1.1" opacity="0.65" stroke-linecap="round"/>
42      </svg>
43      <span class="tip-label">QUIÉN SOY</span>
44      <span class="tip-sub">Bitácora</span>
45    </a>
46
47    <!-- SUR (tierra): MANIFIESTO · Invariantes — hexagrama + círculo -->
48    <a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="/md/tierra.md" aria-label="Manifiesto · Invariantes">
49      <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
50        <circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="1.4" opacity="0.55"/>
51        <path d="M24 8 L39 32 L9 32 Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
52        <path d="M24 40 L9 16 L39 16 Z" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.85" stroke-linejoin="round"/>
53        <circle cx="24" cy="24" r="1.8" fill="currentColor"/>
54      </svg>
55      <span class="tip-label">MANIFIESTO</span>
56      <span class="tip-sub">Invariantes</span>
57    </a>
58
59    <!-- OESTE (agua): MÍSTICA · Espiritualidad — ojo en triángulo -->
60    <a id="tip-agua" class="tip tip-agua" href="#agua" data-md="/md/agua.md" aria-label="Mística · Espiritualidad">
61      <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
62        <path d="M24 6 L42 40 L6 40 Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
63        <path d="M13 26 Q24 16 35 26 Q24 34 13 26 Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
64        <circle cx="24" cy="26" r="3.2" fill="currentColor"/>
65        <circle cx="22.5" cy="24.5" r="0.9" fill="rgba(255,255,255,0.55)"/>
66      </svg>
67      <span class="tip-label">MÍSTICA</span>
68      <span class="tip-sub">Espiritualidad</span>
69    </a>
70    <!-- Tips ocultos para navegación JS: cuerpo, sombra, cosmos, practica, olvido -->
71    <a id="tip-cuerpo" class="tip tip-cuerpo tip-hidden" href="#cuerpo" data-md="/md/cuerpo.md" aria-hidden="true"></a>
72    <a id="tip-sombra" class="tip tip-sombra tip-hidden" href="#sombra" data-md="/md/sombra.md" aria-hidden="true"></a>
73    <a id="tip-cosmos" class="tip tip-cosmos tip-hidden" href="#cosmos" data-md="/md/cosmos.md" aria-hidden="true"></a>
74    <a id="tip-practica" class="tip tip-practica tip-hidden" href="#practica" data-md="/md/practica.md" aria-hidden="true"></a>
75    <a id="tip-olvido" class="tip tip-olvido tip-hidden" href="#olvido" data-md="/md/olvido.md" aria-hidden="true"></a>
76  </main>
77
78  <!-- DECK: contenedor único con strip horizontal. Las páginas se inyectan
79       dinámicamente desde WASM. vista-web maneja swipe + snap. -->
80  <div id="deck" class="deck vista-deck" aria-hidden="true">
81    <div id="deck-strip" class="deck-strip vista-strip" role="region" aria-label="Vistas abiertas"></div>
82  </div>
83
84  <!-- Controles fijos de página: minimizar y cerrar (siempre en el DOM,
85       ocultos por CSS hasta que el deck se abre) -->
86  <div class="page-controls" id="global-page-controls" style="opacity:0;pointer-events:none;">
87    <button class="page-control-btn page-minimize" data-minimize="" type="button" aria-label="Minimizar">
88      <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>
89    </button>
90    <button class="page-control-btn page-close" data-close-page="" type="button" aria-label="Cerrar">×</button>
91  </div>
92
93  <!-- TASKBAR estilo Windows: home + GioSer + tabs + copyleft -->
94  <nav class="taskbar" aria-label="Barra de vistas">
95    <button class="taskbar-home" data-home aria-label="Volver al home" type="button">
96      <svg viewBox="0 0 24 24" class="taskbar-home-glyph" aria-hidden="true">
97        <path d="M3 12 L12 3 L21 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
98        <path d="M5 11 V20 H10 V14 H14 V20 H19 V11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
99        <circle cx="12" cy="17" r="0.8" fill="currentColor"/>
100      </svg>
101    </button>
102
103    <a class="taskbar-brand" data-home href="#home" aria-label="GioSer · home">
104      <span>Gio</span><span class="brand-dot">·</span><span>Ser</span>
105    </a>
106
107    <span class="taskbar-divider" aria-hidden="true"></span>
108    <ul class="taskbar-list" id="taskbar-list" role="presentation"></ul>
109    <span class="taskbar-spacer" aria-hidden="true"></span>
110
111    <a class="taskbar-credit" href="https://sergio.gioser.net" target="_blank" rel="noopener noreferrer" aria-label="Copyleft sergio arroba gioser punto net">
112      <span class="copyleft-mark" aria-hidden="true">©</span>
113      <span class="taskbar-credit-text">sergio@gioser.net</span>
114    </a>
115  </nav>
116
117  <script type="module">
118    import init from "/pkg/gioser_web.js";
119    init().catch(err => {
120      console.error(err);
121      document.body.insertAdjacentHTML("beforeend",
122        '<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace;z-index:9999">' +
123        String(err) + '</pre>');
124    });
125  </script>
126</body>
127</html>