Hugging Face's logo

Spaces:
TakaSystem
/
ancient
Running

App Files Community
ancient / atom.htm
dr-tkxx's picture
dr-tkxx
Rename atom.html to atom.htm
510abc1 verified
raw
history blame contribute delete
16.8 kB
<!DOCTYPE html>
<html lang="pt-br">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>O Livro dos Mortos de Ani | Monumental Matrix Decryptor</title>
 <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;800&display=swap" rel="stylesheet">
 <style>
 :root {
 --bg-color: #010204;
 --matrix-green: #00ff41;
 --accent-gold: #ffd700;
 --text-glow: 0 0 10px rgba(0, 255, 65, 0.4);
 --gold-glow: 0 0 20px rgba(255, 215, 0, 0.5);
 }
 * { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; font-family: 'JetBrains Mono', monospace; }
 body {
 background-color: var(--bg-color);
 color: var(--matrix-green);
 min-height: 100vh;
 overflow-x: hidden;
 display: flex;
 flex-direction: column;
 padding-top: 100px;
 }
 #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; }
 /* --- HEADER & NAVIGATION --- */
 header {
 width: 100%;
 height: 90px;
 background: rgba(1, 2, 4, 0.95);
 border-bottom: 2px solid var(--accent-gold);
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 40px;
 position: fixed;
 top: 0;
 z-index: 1000;
 backdrop-filter: blur(15px);
 }
 .logo { font-size: 1.4rem; color: var(--accent-gold); font-weight: 800; text-shadow: var(--gold-glow); }
 .logo span { font-size: 0.6rem; color: var(--matrix-green); letter-spacing: 4px; display: block; }
 nav { display: flex; gap: 8px; }
 .nav-btn {
 background: rgba(255, 215, 0, 0.05);
 color: var(--accent-gold);
 border: 1px solid var(--accent-gold);
 padding: 6px 10px;
 font-size: 0.65rem;
 border-radius: 4px;
 cursor: pointer;
 transition: 0.3s;
 }
 .nav-btn:hover, .nav-btn.active {
 background: var(--accent-gold);
 color: var(--bg-color);
 box-shadow: var(--gold-glow);
 }
 .osiris-btn {
 border-color: #fff;
 color: #fff;
 background: rgba(255, 255, 255, 0.1);
 font-weight: 800;
 }
 .aton-btn {
 border-color: var(--accent-gold);
 color: var(--accent-gold);
 background: rgba(255, 215, 0, 0.2);
 font-weight: 800;
 }
 .header-actions { display: flex; gap: 8px; }
 .action-btn {
 background: transparent;
 color: var(--matrix-green);
 border: 1px solid var(--matrix-green);
 padding: 8px 12px;
 font-size: 0.65rem;
 border-radius: 4px;
 text-transform: uppercase;
 cursor: pointer;
 }
 .action-btn:hover {
 background: var(--matrix-green);
 color: var(--bg-color);
 box-shadow: var(--text-glow);
 }
 .fractal-btn {
 border-color: var(--accent-gold);
 color: var(--accent-gold);
 background: rgba(255, 215, 0, 0.1);
 }
 /* --- CONTENT --- */
 main {
 width: 95%;
 max-width: 1300px;
 margin: 40px auto;
 background: rgba(0, 0, 0, 0.6);
 border-radius: 20px;
 padding: 50px;
 border: 1px solid rgba(255, 215, 0, 0.1);
 min-height: 600px;
 position: relative;
 }
 #spell-title {
 text-align: center;
 color: var(--accent-gold);
 font-size: 1.8rem;
 margin-bottom: 50px;
 text-shadow: var(--gold-glow);
 text-transform: uppercase;
 letter-spacing: 5px;
 }
 .coda-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 20px 30px;
 justify-content: center;
 line-height: 3;
 }
 /* --- MATRIX WORD ENGINE --- */
 .word-unit {
 display: inline-block;
 font-size: 2.8rem;
 color: var(--accent-gold);
 text-shadow: var(--gold-glow);
 transition: 0.3s;
 position: relative;
 min-width: 50px;
 text-align: center;
 }
 .word-unit:hover { color: #fff; transform: scale(1.1); }
 .word-unit.translated {
 font-size: 1.2rem;
 color: var(--matrix-green);
 text-shadow: var(--text-glow);
 font-weight: 500;
 }
 .word-unit.decoding { color: #fff; text-shadow: 0 0 15px #fff; }
 /* --- FRACTAL OVERLAY --- */
 #fractal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.95);
 z-index: 2000;
 display: none;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 }
 .fractal-content {
 text-align: center;
 color: var(--accent-gold);
 font-size: 2.5rem;
 line-height: 1.5;
 text-shadow: var(--gold-glow);
 animation: expand-fractal 4.2s ease-in-out forwards;
 }
 @keyframes expand-fractal {
 0% { transform: scale(0.05); opacity: 0; filter: blur(30px); }
 40% { transform: scale(1.2); opacity: 1; filter: blur(0); }
 100% { transform: scale(1); opacity: 1; }
 }
 footer {
 padding: 40px;
 text-align: center;
 font-size: 0.65rem;
 color: var(--text-dim);
 border-top: 1px solid rgba(255, 215, 0, 0.1);
 }
 @media (max-width: 1024px) {
 header { height: auto; padding: 20px; flex-direction: column; gap: 20px; }
 main { margin-top: 300px; }
 }
 </style>
</head>
<body>
<canvas id="bg-canvas"></canvas>
<div id="fractal-overlay">
 <div class="fractal-content" id="fractal-text">
 <!-- Intro Text injected here -->
 </div>
 <p style="margin-top: 40px; font-size: 0.7rem; color: var(--matrix-green); letter-spacing: 5px; opacity: 0.6;">[ PROCESSANDO SAUDAÇÃO SAGRADA ]</p>
 </div>
<header>
 <div class="logo">
 𓇓 <span>Ani's Monumental Codex</span>
 </div>
 <nav id="chapter-nav">
 <!-- Dynamic Buttons -->
 </nav>
 <div class="header-actions">
 <button class="nav-btn aton-btn" onclick="loadSpell('ATON')">ATON 𓇳</button>
 <button class="nav-btn osiris-btn" onclick="loadSpell('S125')">OSÍRIS π“‚€</button>
 <button class="action-btn fractal-btn" onclick="showFractal()">Mandala Fractal 𓇳</button>
 <button class="action-btn" onclick="globalAction('TRANSLATE')">Manifestar PT</button>
 <button class="action-btn" onclick="globalAction('RESET')" style="border-color: var(--accent-gold); color: var(--accent-gold);">Ocultar PT</button>
 </div>
 </header>
<main>
 <h1 id="spell-title">Carregando CΓ³dice...</h1>
 <div class="coda-grid" id="coda-grid">
 <!-- Hieroglyphs go here -->
 </div>
 </main>
<footer>
 TAKASYSTEM&trade; MONUMENTAL EDITION // PAPIRO DE ANI // UNIVERSIDADE DE BONN & BM DATABASE SYNC
 </footer>
<script>
 const spells = {
 "S1": {
 name: "CapΓ­tulo 1: O InΓ­cio do Caminho",
 data: [
 {eg: "𓏲", pt: "O"}, {eg: "π“‚‹π“ˆ–", pt: "NOME"}, {eg: "π“ˆ–", pt: "DE"}, {eg: "𓇓", pt: "ANI"},
 {eg: "π“‚‹", pt: "PARA"}, {eg: "𓂧𓍑𓏏", pt: "DUAT"}, {eg: "π“‹Ή", pt: "VIDA"}, {eg: "π“ˆ–", pt: "NA"},
 {eg: "𓇳", pt: "LUZ"}, {eg: "π“…“", pt: "DO"}, {eg: "π“ŠΉ", pt: "DIVINO."},
 {eg: "π“Š¨π“", pt: "ÍSIS"}, {eg: "π“…ƒ", pt: "HΓ“RUS"}, {eg: "π“…“", pt: "COM"}, {eg: "𓄿𓂋𓅓𓄿𓂧𓄿", pt: "A FORΓ‡A"}
 ]
 },
 "S17": {
 name: "CapΓ­tulo 17: Natureza dos Deuses",
 data: [
 {eg: "𓇋", pt: "SOU"}, {eg: "𓅓𓆣", pt: "ATOM"}, {eg: "π“…“", pt: "QUANDO"}, {eg: "𓇋", pt: "EU"},
 {eg: "𓋴𓍑", pt: "ESTAVA"}, {eg: "π“…±", pt: "SΓ“"}, {eg: "π“ˆ–", pt: "EM"}, {eg: "π“ˆ–π“…±π“ˆ–", pt: "NUN."},
 {eg: "𓇋", pt: "SOU"}, {eg: "𓇳", pt: "RÁ"}, {eg: "π“…“", pt: "EM"}, {eg: "π“‚‹π“ˆ–", pt: "SEU"},
 {eg: "π“²π“ƒ€π“ˆ–", pt: "SURGIR"}, {eg: "π“„Ώ", pt: "NO"}, {eg: "π“ˆ", pt: "CAMINHO."}
 ]
 },
 "S30B": {
 name: "Capítulo 30B: O Escaravelho do Coração",
 data: [
 {eg: "π“„£", pt: "CORAÇÃO"}, {eg: "π“ˆ–", pt: "DA"}, {eg: "𓅓𓅱𓏏", pt: "MΓƒE,"}, {eg: "π“ˆ–π“„Ώ", pt: "NΓƒO"},
 {eg: "𓏏𓇯", pt: "TE"}, {eg: "π“‹΄π“‡―π“ˆ–", pt: "LEVANTES"}, {eg: "π“‚‹", pt: "CONTRA"}, {eg: "𓇋", pt: "MIM"},
 {eg: "π“…“", pt: "NO"}, {eg: "π“ˆ–π“„Ώπ“‡―", pt: "TRIBUNAL"}, {eg: "π“ˆ–", pt: "DA"}, {eg: "π“Š¨π“‚‹π“‡―", pt: "JUSTIΓ‡A."}
 ]
 },
 "S125": {
 name: "Capítulo 125: Pesagem do Coração (Tribunal de Osíris)",
 data: [
 {eg: "π“‡‹π“ˆ–π“‚§", pt: "SAUDAÇÕES"}, {eg: "π“ŠΉ", pt: "DEUS"}, {eg: "𓅓𓄿𓂿𓏏", pt: "DA VERDADE."},
 {eg: "𓇋", pt: "EU"}, {eg: "π“‚‹π“ˆ–", pt: "CONHEΓ‡O"}, {eg: "π“‚‹π“ˆ–", pt: "TEU NOME."},
 {eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO"}, {eg: "𓇋𓂋𓇯", pt: "PRATIQUEI"}, {eg: "𓂧𓅱", pt: "O MAL."},
 {eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO"}, {eg: "π“Ž›π“ˆ–", pt: "ROUBEI."}, {eg: "𓇋", pt: "SOU"}, {eg: "𓃀𓅱", pt: "PURO."}
 ]
 },
 "ATON": {
 name: "CΓ³dice de Aton: A Luz Infinita",
 data: [
 { eg: "𓏲", pt: "O" }, { eg: "π“ŠΉ", pt: "DEUS" }, { eg: "𓇳", pt: "SOL" }, { eg: "π“‡‹π“π“ˆ–", pt: "ATON" },
 { eg: "π“‹΄π“Œ‰", pt: "ILUMINA" }, { eg: "π“„Ώ", pt: "A" }, { eg: "𓃀𓄿", pt: "ALMA" }, { eg: "π“ˆ–", pt: "NO" },
 { eg: "π“ˆ", pt: "CAMINHO" }, { eg: "𓂧𓄿", pt: "DA" }, { eg: "π“Ž›π“‡³π“Ž›", pt: "ETERNIDADE." },
 { eg: "π“„Ώ", pt: "A" }, { eg: "𓅓𓆣𓂋𓏏", pt: "MORTE" }, { eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO" }, { eg: "𓇋", pt: "Γ‰" },
 { eg: "𓏲", pt: "O" }, { eg: "𓆑𓇯𓅓", pt: "FIM," }, { eg: "π“…“π“„Ώπ“‹΄", pt: "MAS" }, { eg: "𓏲", pt: "O" },
 { eg: "π“‡‹π“ˆ–π“‡―π“‹΄π“‡―π“‘", pt: "INÍCIO" }, { eg: "𓂧𓄿", pt: "DA" }, { eg: "π“‹Ή", pt: "VIDA" }, { eg: "π“ˆ–π“„Ώ", pt: "NA" },
 { eg: "𓇳", pt: "LUZ" }, { eg: "π“‡‹π“ˆ–π“†‘π“‡‹π“ˆ–", pt: "INFINITA." }, { eg: "𓏲", pt: "O" }, { eg: "π“„£", pt: "CORAÇÃO" },
 { eg: "𓂧𓇋𓅱𓇋", pt: "DEVE" }, { eg: "𓋴𓇋𓂋", pt: "SER" }, { eg: "𓃭𓇋𓅱𓇋", pt: "LEVE" }, { eg: "π“Ž‘π“‘π“…“π“‘", pt: "COMO" },
 { eg: "π“…±π“…“π“„Ώ", pt: "UMA" }, { eg: "𓆄", pt: "PENA" }, { eg: "π“Šͺπ“„Ώπ“‚‹π“„Ώ", pt: "PARA" }, { eg: "𓄿𓏏𓂋𓄿𓅱", pt: "ATRAVESSAR" },
 { eg: "𓏲", pt: "O" }, { eg: "π“Šͺ𓍑𓂋𓏏𓄿𓃭", pt: "PORTAL" }, { eg: "𓂧𓍑", pt: "DO" }, { eg: "𓂧𓅱𓄿𓏏", pt: "DUAT." }
 ]
 }
 };
 const fractalIntro = "π“‡‹π“ˆ–π“‚§<br>π“ŠΉ<br>𓅓𓄿𓂿𓏏<br>𓇋<br>π“‚‹π“ˆ–<br>π“‚‹π“ˆ–<br>π“ˆ–π“„Ώπ“‘<br>𓇋𓂋𓇯<br>𓂧𓅱<br>π“ˆ–π“„Ώπ“‘<br>π“Ž›π“ˆ–<br>𓇋<br>𓃀𓅱";
 let currentSpell = "S1";
 const grid = document.getElementById('coda-grid');
 const title = document.getElementById('spell-title');
 const nav = document.getElementById('chapter-nav');
 const matrixChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*()<>[]{}π“€€π“€π“€‚π“€ƒπ“€„π“€…π“€†π“€‡π“€ˆπ“€‰π“€Š";
 function initNav() {
 nav.innerHTML = '';
 for(let key in spells) {
 if(key === "S125" || key === "ATON") continue;
const btn = document.createElement('button');
 btn.className = `nav-btn ${key === currentSpell ? 'active' : ''}`;
 btn.textContent = key;
 btn.onclick = () => loadSpell(key);
 nav.appendChild(btn);
 }
 }
 function loadSpell(key) {
 currentSpell = key;
 document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
 const btns = Array.from(document.querySelectorAll('.nav-btn'));
 const targetBtn = btns.find(b => b.textContent.includes(key));
 if(targetBtn) targetBtn.classList.add('active');
title.textContent = spells[key].name;
 grid.innerHTML = '';
spells[key].data.forEach(item => {
 const span = document.createElement('span');
 span.className = 'word-unit';
 span.textContent = item.eg;
 span.dataset.eg = item.eg;
 span.dataset.pt = item.pt;
 span.onclick = () => toggle(span);
 grid.appendChild(span);
 });
 }
 function toggle(el) {
 const isPT = el.classList.contains('translated');
 runMatrix(el, isPT ? el.dataset.eg : el.dataset.pt, !isPT);
 }
 function runMatrix(el, target, becomingPT) {
 if (el.dataset.anim === "true") return;
 el.dataset.anim = "true";
 el.classList.add('decoding');
 let it = 0; const max = 15;
 const interval = setInterval(() => {
 let res = "";
 for(let i=0; i<target.length; i++) {
 if(i < (it/max) * target.length) res += target[i];
 else res += matrixChars[Math.floor(Math.random()*matrixChars.length)];
 }
 el.textContent = res;
 if(++it > max) {
 clearInterval(interval);
 el.textContent = target;
 el.dataset.anim = "false";
 el.classList.remove('decoding');
 becomingPT ? el.classList.add('translated') : el.classList.remove('translated');
 }
 }, 40);
 }
 function globalAction(type) {
 document.querySelectorAll('.word-unit').forEach((w, i) => {
 setTimeout(() => {
 if(type === 'TRANSLATE' && !w.classList.contains('translated')) toggle(w);
 if(type === 'RESET' && w.classList.contains('translated')) toggle(w);
 }, i * 40);
 });
 }
 function showFractal() {
 const overlay = document.getElementById('fractal-overlay');
 const content = document.getElementById('fractal-text');
 content.innerHTML = fractalIntro;
 overlay.style.display = 'flex';
 setTimeout(() => {
 overlay.style.display = 'none';
 loadSpell('S125');
 globalAction('TRANSLATE');
 }, 4200);
 }
 const canvas = document.getElementById('bg-canvas');
 const ctx = canvas.getContext('2d');
 let w, h, cols, ypos;
 function resize() {
 w = canvas.width = window.innerWidth;
 h = canvas.height = window.innerHeight;
 cols = Math.floor(w / 20) + 1;
 ypos = Array(cols).fill(0);
 }
 window.addEventListener('resize', resize);
 resize();
 function draw() {
 ctx.fillStyle = 'rgba(1, 2, 4, 0.1)';
 ctx.fillRect(0, 0, w, h);
 ctx.fillStyle = '#00ff41';
 ctx.font = '12pt monospace';
 ypos.forEach((y, i) => {
 const char = String.fromCharCode(Math.random() * 128 + 0x13000);
 ctx.fillText(char, i * 20, y);
 if (y > 100 + Math.random() * 10000) ypos[i] = 0; else ypos[i] = y + 20;
 });
 }
 setInterval(draw, 50);
 initNav();
 loadSpell("S1");
 </script>
</body>
</html>