| <!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 { |
| 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); |
| } |
| |
| |
| 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; |
| } |
| |
| |
| .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 { |
| 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"> |
| |
| </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"> |
| |
| </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"> |
| |
| </div> |
| </main> |
|
|
| <footer> |
| TAKASYSTEM™ 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> |
