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&display=swap">
11</head>
12<body>
13 <canvas id="gioser-canvas" aria-hidden="true"></canvas>
14
15 <header class="brand">
16 <h1 class="brand-title">Gio<span class="brand-dot">·</span>Ser</h1>
17 <p class="brand-sub">EN EL CENTRO · EL SER</p>
18 </header>
19
20 <main id="tips" aria-label="Cuatro elementos">
21 <a id="tip-aire" class="tip tip-aire" href="#aire" aria-label="Aire">
22 <svg viewBox="0 0 40 40" class="tip-glyph">
23 <path d="M6 14 q 7 -10 14 0 t 14 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
24 <path d="M6 22 q 7 -10 14 0 t 14 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" opacity="0.75"/>
25 <circle cx="32" cy="9" r="2.2" fill="none" stroke="currentColor" stroke-width="1.2"/>
26 </svg>
27 <span class="tip-label">AIRE</span>
28 <span class="tip-sub">Software · IA</span>
29 </a>
30
31 <a id="tip-fuego" class="tip tip-fuego" href="#fuego" aria-label="Fuego">
32 <svg viewBox="0 0 40 40" class="tip-glyph">
33 <path d="M20 4 q -10 10 -5 20 q 3 -5 5 -5 q 1 8 5 10 q 8 -8 0 -18 q -4 5 -5 -7 z"
34 fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
35 <circle cx="20" cy="22" r="2.5" fill="currentColor" opacity="0.55"/>
36 </svg>
37 <span class="tip-label">FUEGO</span>
38 <span class="tip-sub">Inspiración</span>
39 </a>
40
41 <a id="tip-tierra" class="tip tip-tierra" href="#tierra" aria-label="Tierra">
42 <svg viewBox="0 0 40 40" class="tip-glyph">
43 <path d="M4 30 l 10 -14 l 6 7 l 5 -10 l 11 17 z"
44 fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
45 <path d="M20 30 v 6 M16 32 l -3 4 M24 32 l 3 4 M20 36 v 1"
46 fill="none" stroke="currentColor" stroke-width="1.1" opacity="0.7"/>
47 </svg>
48 <span class="tip-label">TIERRA</span>
49 <span class="tip-sub">Cuerpo</span>
50 </a>
51
52 <a id="tip-agua" class="tip tip-agua" href="#agua" aria-label="Agua">
53 <svg viewBox="0 0 40 40" class="tip-glyph">
54 <path d="M5 20 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
55 <path d="M5 27 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" opacity="0.75"/>
56 <path d="M5 34 q 5 -8 10 0 t 10 0 t 10 0" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
57 </svg>
58 <span class="tip-label">AGUA</span>
59 <span class="tip-sub">Espiritualidad</span>
60 </a>
61 </main>
62
63 <footer class="quote">aire · agua · fuego · tierra</footer>
64
65 <script type="module">
66 import init from "./pkg/gioser_web.js";
67 init().catch(err => {
68 console.error(err);
69 document.body.insertAdjacentHTML("beforeend",
70 '<pre style="color:#f59056;position:fixed;left:1rem;bottom:1rem;max-width:90vw;white-space:pre-wrap;font-family:monospace">' +
71 String(err) + '</pre>');
72 });
73 </script>
74</body>
75</html>