-
Oraclia Un sistema simbólico vivo.
Crea tu GLIFO
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ORACLIA · Lector de glifos</title>
<style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.4;margin:0;background:#fff;color:#111}
header{padding:28px 20px 10px}
h1{font-size:28px;margin:0 0 6px}
p.sub{margin:0;color:#666}
main{padding:16px 20px 60px;max-width:820px}
.panel{border:1px solid #e6e6e6;border-radius:12px;padding:16px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input[type=text]{flex:1;border:1px solid #ddd;border-radius:10px;padding:12px 14px;font-size:18px}
button{border:1px solid #ddd;background:#fafafa;border-radius:10px;padding:10px 12px;font-size:16px;cursor:pointer}
button:hover{background:#f2f2f2}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid #ddd;border-radius:999px;padding:8px 12px;font-size:16px;background:#fff}
.chip b{font-weight:600}
.muted{color:#666}
.result{margin-top:16px;border-top:1px dashed #e3e3e3;padding-top:14px}
.card{padding:10px 0}
.card h3{margin:0 0 4px;font-size:18px}
.card .sym{font-family:Menlo,Consolas,monospace;background:#f7f7f7;border:1px solid #eee;border-radius:8px;padding:2px 8px}
.foot{margin-top:16px;color:#777;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.alias{font-size:13px;color:#777}
</style>
</head>
<body>
<header>
<h1>ORACLIA · Lector de glifos</h1>
<p class="sub">Escribe símbolos (p. ej. <b>◉ ≋ ∞ ↤ |||</b>) y verás su lectura. Puedes pegar un glifo de un post.</p>
</header>
<main>
<div class="panel">
<div class="row">
<input id="glifo" type="text" placeholder="Escribe símbolos de Oraclia… (◉ ≋ ∞ ↤ |||)">
<button onclick="leerGlifo()">Leer</button>
<button onclick="limpiar()">Limpiar</button>
</div>
<!-- Botones rápidos para ayudar a teclear -->
<div class="chips" id="quick"></div>
<div id="resultado" class="result muted">Escribe un glifo arriba para ver la lectura…</div>
<div class="foot">
Cartas soportadas (símbolo → carta): Ojo Abierto <b>◉</b>, Sombra Viva <b>≡</b>, Sin Norte <b>▯</b>, Infinito <b>∞</b>,
Desaprender <b>↤</b>, Reflejo Fluido <b>≋</b>, Arca de Y <b>Y</b>, Tercer Espacio <b>|||</b>, Energía <b>*</b>, VERBATEM <b>()</b>,
Carne <b>+</b>, Templanza <b>≈</b>, Último Gesto <b>÷</b>, Duda <b>?</b>, Límite <b>▭</b>, Silencio <b>◦</b>,
Propulsión <b>↦</b>, Ritmo <b>∿</b>, Árbol de la Vida <b>↑</b>, Cruz <b>†</b>.
(Puedes editar/añadir símbolos en el diccionario de abajo).
</div>
</div>
<h2 style="margin:22px 0 8px">Ejemplos</h2>
<div class="grid" id="ejemplos"></div>
</main>
<script>
/* ========= DICCIONARIO DE CARTAS =========
- clave: símbolo oficial (o alias)
- name: nombre de la carta
- brief: frase breve (aparece en la lectura)
- aliases: símbolos alternativos aceptados (opcional)
Ajusta aquí lo que quieras. */
const CARTAS = [
{sym:"∞", name:"El Arca del Infinito", brief:"lo que nunca termina; evolución constante."},
{sym:"†", name:"El Arca de la Cruz", brief:"cruce de fuerzas; decisión y sentido."},
{sym:"◉", name:"El Arca del Ojo Abierto", brief:"ver sin dormir; conciencia que enfoca."},
{sym:"↑", name:"El Árbol de la Vida", brief:"raíces y ramas; crecimiento vivo."},
{sym:"▭", name:"El Arca del Límite", brief:"marco, frontera, cuidado de la forma."},
{sym:"◦", name:"El Arca del Silencio", brief:"vacío fértil; escucha que gesta."},
{sym:"↦", name:"El Arca de la Propulsión", brief:"impulso que empuja hacia adelante."},
{sym:"∿", name:"La Danza del Ritmo", brief:"pulso, compás, alternancia que ordena."},
{sym:"?", name:"El Arca de la Duda", brief:"pregunta viva que amplía la mirada."},
{sym:"><", name:"El Arca de DESTEM", brief:"tensión creativa; contraste que revela."},
{sym:"≡", name:"El Arca de la Sombra Viva", brief:"lo negado que pide integración.", aliases:["☲"]},
{sym:"▯", name:"El Arca sin Norte", brief:"desorientación útil; perderse para hallarse."},
{sym:"÷", name:"El Arca del Último Gesto", brief:"cierre limpio; lo que termina bien."},
{sym:"≈", name:"El Arca de la Templanza", brief:"equilibrio que regula la intensidad."},
{sym:"+", name:"El Arca de la Carne", brief:"cuerpo, materia, lo que necesita cuidado."},
{sym:"↤", name:"El Arca del Desaprender", brief:"soltar saberes para ver lo real."},
{sym:"*", name:"El Arca de la Energía", brief:"chispa, carga vital, inicio."},
{sym:"≋", name:"El Arca del Reflejo Fluido", brief:"lo que cambia según quién mira."},
{sym:"()", name:"El Arca del VERBATEM", brief:"verdad desnuda; palabra exacta."},
{sym:"Y", name:"El Arca de Y", brief:"bifurcación que une; elegir sin cortar."},
{sym:"|||",name:"El Arca del Tercer Espacio", brief:"espacio entre; lo posible que nace."}
];
/* ---------- Construimos índice con aliases ---------- */
const INDEX = new Map();
for (const c of CARTAS){
INDEX.set(c.sym, c);
(c.aliases||[]).forEach(a=>INDEX.set(a, c));
}
/* ---------- UI: botones rápidos ---------- */
const quickSymbols = ["◉","≋","∞","↤","|||","Y","▭","?","≈","+","▯","≡","*","()","↦","∿","◦","↑","÷","†","><"];
const quickContainer = document.getElementById('quick');
quickSymbols.forEach(s=>{
const b=document.createElement('button'); b.textContent=s;
b.title="Añadir "+s; b.onclick=()=>insertSymbol(s);
quickContainer.appendChild(b);
});
function insertSymbol(s){
const i=document.getElementById('glifo');
i.value = (i.value.trim()+" "+s).trim();
i.focus();
}
/* ---------- Lógica de lectura ---------- */
function tokenize(input){
// Ordenamos por longitud para capturar tokens de varios chars primero (|||, (), ><)
const keys = Array.from(INDEX.keys()).sort((a,b)=>b.length-a.length);
let s = input.trim();
const out=[];
while(s.length){
let matched=false;
for(const k of keys){
if(s.startsWith(k)){
out.push(k);
s = s.slice(k.length).trimStart();
matched=true; break;
}
}
if(!matched){
// separadores o carácter suelto
const ch = s[0];
if(/\s|,|·|\||-/.test(ch)){ s = s.slice(1).trimStart(); }
else { out.push(ch); s = s.slice(1).trimStart(); }
}
}
return out;
}
function leerGlifo(){
const input = document.getElementById('glifo').value;
if(!input.trim()){
document.getElementById('resultado').innerHTML = '<span class="muted">Escribe un glifo arriba…</span>';
return;
}
const tokens = tokenize(input);
const bloques = tokens.map(t=>{
const c = INDEX.get(t);
if(!c) return `<div class="card"><h3><span class="sym">${escapeHTML(t)}</span> → <span class="muted">símbolo no reconocido</span></h3></div>`;
return `<div class="card">
<h3><span class="sym">${c.sym}</span> → ${c.name}</h3>
<div class="muted">${c.brief}</div>
${c.aliases?`<div class="alias">Alias: ${c.aliases.join(", ")}</div>`:""}
</div>`;
}).join("");
document.getElementById('resultado').innerHTML = bloques || '<span class="muted">Sin símbolos…</span>';
}
function limpiar(){
document.getElementById('glifo').value="";
document.getElementById('resultado').innerHTML='<span class="muted">Escribe un glifo arriba…</span>';
}
function escapeHTML(s){return s.replace(/[&<>"']/g,m=>({ '&':'&','<':'<','>':'>','"':'"',"'":'''}[m]))}
/* ---------- Ejemplos clicables ---------- */
const ejemplos = [
"◉ ≋ ∞ ↤ |||",
"▭ ? ≋",
"Y () ≈",
"≡ ▯ +",
"↦ ∿ *",
"÷ ◦ †",
];
const zona = document.getElementById('ejemplos');
ejemplos.forEach(e=>{
const b=document.createElement('button');
b.className='chip'; b.innerHTML=`<b>${e}</b>`;
b.onclick=()=>{ document.getElementById('glifo').value=e; leerGlifo(); };
zona.appendChild(b);
});
</script>
</body>
</html>
Enviat des del meu iPhone¿Quieres recomendar algún libro?