feat(gioser): shake on click, mouseleave rebound, element particles, taskbar
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 <header id="brand" class="brand">
16 <h1 class="brand-title">Gio<span class="brand-dot">·</span>Ser</h1>
17 </header>
18
19 <main id="tips" aria-label="Cuatro elementos">
20 <a id="tip-aire" class="tip tip-aire" href="#aire" data-md="./md/aire.md" aria-label="Aire — Software e IA">
21 <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
22 <path d="M6 18 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
23 <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"/>
24 <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"/>
25 </svg>
26 <span class="tip-label">AIRE</span>
27 <span class="tip-sub">Software · IA</span>
28 </a>
29
30 <a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="./md/fuego.md" aria-label="Fuego — Inspiración">
31 <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
32 <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"
33 fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
34 <circle cx="24" cy="28" r="3" fill="currentColor" opacity="0.5"/>
35 </svg>
36 <span class="tip-label">FUEGO</span>
37 <span class="tip-sub">Inspiración</span>
38 </a>
39
40 <a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="./md/tierra.md" aria-label="Tierra — Cuerpo">
41 <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
42 <path d="M4 36 l 12 -16 l 8 9 l 6 -12 l 14 19 z"
43 fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
44 <path d="M24 36 v 8 M19 38 l -4 5 M29 38 l 4 5 M24 44 v 2"
45 fill="none" stroke="currentColor" stroke-width="1.3" opacity="0.7"/>
46 </svg>
47 <span class="tip-label">TIERRA</span>
48 <span class="tip-sub">Cuerpo</span>
49 </a>
50
51 <a id="tip-agua" class="tip tip-agua" href="#agua" data-md="./md/agua.md" aria-label="Agua — Espiritualidad aplicada">
52 <svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
53 <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"/>
54 <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"/>
55 <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"/>
56 </svg>
57 <span class="tip-label">AGUA</span>
58 <span class="tip-sub">Espiritualidad</span>
59 </a>
60 </main>
61
62 <!-- DRAWERS: uno por elemento. Cada uno crece desde la posición del tip
63 clickeado (origin set via CSS vars desde WASM) hasta fullscreen. -->
64 <aside id="drawer-aire" class="drawer drawer-aire" data-element="aire" aria-hidden="true">
65 <button class="drawer-close" data-close-drawer aria-label="Cerrar Aire">×</button>
66 <div class="drawer-ambience" aria-hidden="true"></div>
67 <header class="drawer-head">
68 <span class="drawer-mark">aire</span>
69 <h2 class="drawer-title">Aire</h2>
70 <span class="drawer-tag">Software · IA · Aspiración</span>
71 </header>
72 <section class="drawer-content" id="drawer-aire-content"></section>
73 </aside>
74
75 <aside id="drawer-fuego" class="drawer drawer-fuego" data-element="fuego" aria-hidden="true">
76 <button class="drawer-close" data-close-drawer aria-label="Cerrar Fuego">×</button>
77 <div class="drawer-ambience" aria-hidden="true"></div>
78 <header class="drawer-head">
79 <span class="drawer-mark">fuego</span>
80 <h2 class="drawer-title">Fuego</h2>
81 <span class="drawer-tag">Inspiración</span>
82 </header>
83 <section class="drawer-content" id="drawer-fuego-content"></section>
84 </aside>
85
86 <aside id="drawer-tierra" class="drawer drawer-tierra" data-element="tierra" aria-hidden="true">
87 <button class="drawer-close" data-close-drawer aria-label="Cerrar Tierra">×</button>
88 <div class="drawer-ambience" aria-hidden="true"></div>
89 <header class="drawer-head">
90 <span class="drawer-mark">tierra</span>
91 <h2 class="drawer-title">Tierra</h2>
92 <span class="drawer-tag">Cuerpo</span>
93 </header>
94 <section class="drawer-content" id="drawer-tierra-content"></section>
95 </aside>
96
97 <aside id="drawer-agua" class="drawer drawer-agua" data-element="agua" aria-hidden="true">
98 <button class="drawer-close" data-close-drawer aria-label="Cerrar Agua">×</button>
99 <div class="drawer-ambience" aria-hidden="true"></div>
100 <header class="drawer-head">
101 <span class="drawer-mark">agua</span>
102 <h2 class="drawer-title">Agua</h2>
103 <span class="drawer-tag">Espiritualidad aplicada</span>
104 </header>
105 <section class="drawer-content" id="drawer-agua-content"></section>
106 </aside>
107
108 <!-- TASKBAR estilo Windows: home a la izquierda + cajitas dinámicas
109 de las vistas MD abiertas. Sincronizada por WASM. -->
110 <nav class="taskbar" aria-label="Vistas abiertas">
111 <button class="taskbar-home" data-home aria-label="Volver al home" type="button">
112 <svg viewBox="0 0 24 24" class="taskbar-home-glyph" aria-hidden="true">
113 <path d="M3 12 L12 3 L21 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
114 <path d="M5 11 V20 H10 V14 H14 V20 H19 V11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
115 <circle cx="12" cy="17" r="0.8" fill="currentColor"/>
116 </svg>
117 </button>
118 <span class="taskbar-divider" aria-hidden="true"></span>
119 <ul class="taskbar-list" id="taskbar-list" role="presentation"></ul>
120 </nav>
121
122 <script type="module">
123 import init from "./pkg/gioser_web.js";
124 init().catch(err => {
125 console.error(err);
126 document.body.insertAdjacentHTML("beforeend",
127 '<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace;z-index:9999">' +
128 String(err) + '</pre>');
129 });
130 </script>
131</body>
132</html>