sergio
fce630c8d0
Visual de la chacana retrabajado contra chakana.png de referencia:
- Sol detrás (gauss + corona, masked al interior de la chacana — sólo
asoma por la superficie de la cruz, no se cuela afuera).
- Doble outline dorado (línea principal + paralela offset 0.020), color
CHACANA_LINE pasa de cyan helado a dorado-ámbar del logo.
- Interior con niebla violeta-noche (u_dark_color) y rayos radiales
sutiles desde el centro, modulados por sin(t * 0.3).
- Aro doble exterior: ring fino interior + ring grueso con 4 grupos de
3 puntos cardinales (calculados angularmente, no rayos largos).
- WORLD_SCALE 1.45→1.05, MAX_TILT 35°→28° (más sólido, menos caricaturesco).
Título "GioSer" centrado dentro de la superficie de la chacana, sin
subtítulo. Se inclina junto con la chacana vía CSS perspective +
rotateX/rotateY desde u-tilt-x/y inyectadas cada frame por WASM.
Botones (4 tips):
- Reposicionados a `arm_extent * 1.32` (entre punta y aro grueso).
- Bigger: min-width 168px, glyph 54px, label Cinzel 0.95rem.
- Doble anillo en hover (::before con border + glow).
- Cuando un drawer se abre, fade-out de tips + canvas + brand.
Drawers MD (uno por elemento):
- `<aside class="drawer drawer-{element}">` con transform-origin desde
CSS vars (--origin-x/y) seteadas por WASM al click — crece desde la
posición exacta del botón hasta fullscreen en 700ms con cubic-bezier.
- Ambience por elemento: AIRE (radial drift), FUEGO (flicker keyframe),
AGUA (tide vertical), TIERRA (warm earth gradient).
- Cerrado con botón X, Escape o data-close-drawer.
- Carga MD desde ./md/{element}.md via spawn_local + Reader::open_url.
Pluma (visor MD agnóstico, dos crates nuevos):
- `crates/modules/pluma/pluma-md` — wrapper sobre pulldown-cmark 0.12.
API: to_html(), to_themed_html(md, theme) con sanitización del theme,
events() para AST stream. GFM completo. No deps web. 5 tests.
- `crates/modules/pluma/pluma-reader-web` — toma HtmlElement, expone
open_url async (fetch via wasm-bindgen-futures), render_md sync,
show_loading/show_error. NO inyecta CSS — el host estiliza
`.pluma-doc[data-pluma-theme="..."]` con sus colores.
CSS pluma-doc completo: h1/h2/h3, code/pre con border-left accent,
blockquote, tables, lists, hr gradient. Loader spinner + error state.
Placeholders en md/{aire,fuego,tierra,agua}.md con texto seed.
Workspace verde + 18 tests (6 geom + 4 palette + 3 physics + 5 pluma-md).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
119 lines
5.9 KiB
HTML
119 lines
5.9 KiB
HTML
<!doctype html>
|
||
<html lang="es">
|
||
<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>
|
||
<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>
|
||
|
||
<header id="brand" class="brand">
|
||
<h1 class="brand-title">Gio<span class="brand-dot">·</span>Ser</h1>
|
||
</header>
|
||
|
||
<main id="tips" aria-label="Cuatro elementos">
|
||
<a id="tip-aire" class="tip tip-aire" href="#aire" data-md="./md/aire.md" aria-label="Aire — Software e IA">
|
||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||
<path d="M6 18 q 9 -12 18 0 t 18 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
||
<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"/>
|
||
<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"/>
|
||
</svg>
|
||
<span class="tip-label">AIRE</span>
|
||
<span class="tip-sub">Software · IA</span>
|
||
</a>
|
||
|
||
<a id="tip-fuego" class="tip tip-fuego" href="#fuego" data-md="./md/fuego.md" aria-label="Fuego — Inspiración">
|
||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||
<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"
|
||
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
||
<circle cx="24" cy="28" r="3" fill="currentColor" opacity="0.5"/>
|
||
</svg>
|
||
<span class="tip-label">FUEGO</span>
|
||
<span class="tip-sub">Inspiración</span>
|
||
</a>
|
||
|
||
<a id="tip-tierra" class="tip tip-tierra" href="#tierra" data-md="./md/tierra.md" aria-label="Tierra — Cuerpo">
|
||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||
<path d="M4 36 l 12 -16 l 8 9 l 6 -12 l 14 19 z"
|
||
fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
|
||
<path d="M24 36 v 8 M19 38 l -4 5 M29 38 l 4 5 M24 44 v 2"
|
||
fill="none" stroke="currentColor" stroke-width="1.3" opacity="0.7"/>
|
||
</svg>
|
||
<span class="tip-label">TIERRA</span>
|
||
<span class="tip-sub">Cuerpo</span>
|
||
</a>
|
||
|
||
<a id="tip-agua" class="tip tip-agua" href="#agua" data-md="./md/agua.md" aria-label="Agua — Espiritualidad aplicada">
|
||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||
<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"/>
|
||
<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"/>
|
||
<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"/>
|
||
</svg>
|
||
<span class="tip-label">AGUA</span>
|
||
<span class="tip-sub">Espiritualidad</span>
|
||
</a>
|
||
</main>
|
||
|
||
<!-- DRAWERS: uno por elemento. Cada uno crece desde la posición del tip
|
||
clickeado (origin set via CSS vars desde WASM) hasta fullscreen. -->
|
||
<aside id="drawer-aire" class="drawer drawer-aire" data-element="aire" aria-hidden="true">
|
||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Aire">×</button>
|
||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||
<header class="drawer-head">
|
||
<span class="drawer-mark">aire</span>
|
||
<h2 class="drawer-title">Aire</h2>
|
||
<span class="drawer-tag">Software · IA · Aspiración</span>
|
||
</header>
|
||
<section class="drawer-content" id="drawer-aire-content"></section>
|
||
</aside>
|
||
|
||
<aside id="drawer-fuego" class="drawer drawer-fuego" data-element="fuego" aria-hidden="true">
|
||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Fuego">×</button>
|
||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||
<header class="drawer-head">
|
||
<span class="drawer-mark">fuego</span>
|
||
<h2 class="drawer-title">Fuego</h2>
|
||
<span class="drawer-tag">Inspiración</span>
|
||
</header>
|
||
<section class="drawer-content" id="drawer-fuego-content"></section>
|
||
</aside>
|
||
|
||
<aside id="drawer-tierra" class="drawer drawer-tierra" data-element="tierra" aria-hidden="true">
|
||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Tierra">×</button>
|
||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||
<header class="drawer-head">
|
||
<span class="drawer-mark">tierra</span>
|
||
<h2 class="drawer-title">Tierra</h2>
|
||
<span class="drawer-tag">Cuerpo</span>
|
||
</header>
|
||
<section class="drawer-content" id="drawer-tierra-content"></section>
|
||
</aside>
|
||
|
||
<aside id="drawer-agua" class="drawer drawer-agua" data-element="agua" aria-hidden="true">
|
||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Agua">×</button>
|
||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||
<header class="drawer-head">
|
||
<span class="drawer-mark">agua</span>
|
||
<h2 class="drawer-title">Agua</h2>
|
||
<span class="drawer-tag">Espiritualidad aplicada</span>
|
||
</header>
|
||
<section class="drawer-content" id="drawer-agua-content"></section>
|
||
</aside>
|
||
|
||
<script type="module">
|
||
import init from "./pkg/gioser_web.js";
|
||
init().catch(err => {
|
||
console.error(err);
|
||
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>');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|