Hugging Face's logo

Spaces:
dr-tkxx
/
ancient
Running

App Files Community
dr-tkxx commited on
Commit
4e0ddd6
Β·
verified Β·
1 Parent(s): 3dd1c22

Create atom.htm

Browse files
Files changed (1) hide show
  1. atom.htm +415 -0
atom.htm ADDED
@@ -0,0 +1,415 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-br">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>O Livro dos Mortos de Ani | Monumental Matrix Decryptor</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;800&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --bg-color: #010204;
11
+ --matrix-green: #00ff41;
12
+ --accent-gold: #ffd700;
13
+ --text-glow: 0 0 10px rgba(0, 255, 65, 0.4);
14
+ --gold-glow: 0 0 20px rgba(255, 215, 0, 0.5);
15
+ }
16
+
17
+ * { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; font-family: 'JetBrains Mono', monospace; }
18
+
19
+ body {
20
+ background-color: var(--bg-color);
21
+ color: var(--matrix-green);
22
+ min-height: 100vh;
23
+ overflow-x: hidden;
24
+ display: flex;
25
+ flex-direction: column;
26
+ padding-top: 100px;
27
+ }
28
+
29
+ #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; }
30
+
31
+ /* --- HEADER & NAVIGATION --- */
32
+ header {
33
+ width: 100%;
34
+ height: 90px;
35
+ background: rgba(1, 2, 4, 0.95);
36
+ border-bottom: 2px solid var(--accent-gold);
37
+ display: flex;
38
+ justify-content: space-between;
39
+ align-items: center;
40
+ padding: 0 40px;
41
+ position: fixed;
42
+ top: 0;
43
+ z-index: 1000;
44
+ backdrop-filter: blur(15px);
45
+ }
46
+
47
+ .logo { font-size: 1.4rem; color: var(--accent-gold); font-weight: 800; text-shadow: var(--gold-glow); }
48
+ .logo span { font-size: 0.6rem; color: var(--matrix-green); letter-spacing: 4px; display: block; }
49
+
50
+ nav { display: flex; gap: 8px; }
51
+
52
+ .nav-btn {
53
+ background: rgba(255, 215, 0, 0.05);
54
+ color: var(--accent-gold);
55
+ border: 1px solid var(--accent-gold);
56
+ padding: 6px 10px;
57
+ font-size: 0.65rem;
58
+ border-radius: 4px;
59
+ cursor: pointer;
60
+ transition: 0.3s;
61
+ }
62
+
63
+ .nav-btn:hover, .nav-btn.active {
64
+ background: var(--accent-gold);
65
+ color: var(--bg-color);
66
+ box-shadow: var(--gold-glow);
67
+ }
68
+
69
+ .osiris-btn {
70
+ border-color: #fff;
71
+ color: #fff;
72
+ background: rgba(255, 255, 255, 0.1);
73
+ font-weight: 800;
74
+ }
75
+
76
+ .aton-btn {
77
+ border-color: var(--accent-gold);
78
+ color: var(--accent-gold);
79
+ background: rgba(255, 215, 0, 0.2);
80
+ font-weight: 800;
81
+ }
82
+
83
+ .header-actions { display: flex; gap: 8px; }
84
+
85
+ .action-btn {
86
+ background: transparent;
87
+ color: var(--matrix-green);
88
+ border: 1px solid var(--matrix-green);
89
+ padding: 8px 12px;
90
+ font-size: 0.65rem;
91
+ border-radius: 4px;
92
+ text-transform: uppercase;
93
+ cursor: pointer;
94
+ }
95
+
96
+ .action-btn:hover {
97
+ background: var(--matrix-green);
98
+ color: var(--bg-color);
99
+ box-shadow: var(--text-glow);
100
+ }
101
+
102
+ .fractal-btn {
103
+ border-color: var(--accent-gold);
104
+ color: var(--accent-gold);
105
+ background: rgba(255, 215, 0, 0.1);
106
+ }
107
+
108
+ /* --- CONTENT --- */
109
+ main {
110
+ width: 95%;
111
+ max-width: 1300px;
112
+ margin: 40px auto;
113
+ background: rgba(0, 0, 0, 0.6);
114
+ border-radius: 20px;
115
+ padding: 50px;
116
+ border: 1px solid rgba(255, 215, 0, 0.1);
117
+ min-height: 600px;
118
+ position: relative;
119
+ }
120
+
121
+ #spell-title {
122
+ text-align: center;
123
+ color: var(--accent-gold);
124
+ font-size: 1.8rem;
125
+ margin-bottom: 50px;
126
+ text-shadow: var(--gold-glow);
127
+ text-transform: uppercase;
128
+ letter-spacing: 5px;
129
+ }
130
+
131
+ .coda-grid {
132
+ display: flex;
133
+ flex-wrap: wrap;
134
+ gap: 20px 30px;
135
+ justify-content: center;
136
+ line-height: 3;
137
+ }
138
+
139
+ /* --- MATRIX WORD ENGINE --- */
140
+ .word-unit {
141
+ display: inline-block;
142
+ font-size: 2.8rem;
143
+ color: var(--accent-gold);
144
+ text-shadow: var(--gold-glow);
145
+ transition: 0.3s;
146
+ position: relative;
147
+ min-width: 50px;
148
+ text-align: center;
149
+ }
150
+
151
+ .word-unit:hover { color: #fff; transform: scale(1.1); }
152
+
153
+ .word-unit.translated {
154
+ font-size: 1.2rem;
155
+ color: var(--matrix-green);
156
+ text-shadow: var(--text-glow);
157
+ font-weight: 500;
158
+ }
159
+
160
+ .word-unit.decoding { color: #fff; text-shadow: 0 0 15px #fff; }
161
+
162
+ /* --- FRACTAL OVERLAY --- */
163
+ #fractal-overlay {
164
+ position: fixed;
165
+ top: 0;
166
+ left: 0;
167
+ width: 100%;
168
+ height: 100%;
169
+ background: rgba(0,0,0,0.95);
170
+ z-index: 2000;
171
+ display: none;
172
+ justify-content: center;
173
+ align-items: center;
174
+ flex-direction: column;
175
+ }
176
+
177
+ .fractal-content {
178
+ text-align: center;
179
+ color: var(--accent-gold);
180
+ font-size: 2.5rem;
181
+ line-height: 1.5;
182
+ text-shadow: var(--gold-glow);
183
+ animation: expand-fractal 4.2s ease-in-out forwards;
184
+ }
185
+
186
+ @keyframes expand-fractal {
187
+ 0% { transform: scale(0.05); opacity: 0; filter: blur(30px); }
188
+ 40% { transform: scale(1.2); opacity: 1; filter: blur(0); }
189
+ 100% { transform: scale(1); opacity: 1; }
190
+ }
191
+
192
+ footer {
193
+ padding: 40px;
194
+ text-align: center;
195
+ font-size: 0.65rem;
196
+ color: var(--text-dim);
197
+ border-top: 1px solid rgba(255, 215, 0, 0.1);
198
+ }
199
+
200
+ @media (max-width: 1024px) {
201
+ header { height: auto; padding: 20px; flex-direction: column; gap: 20px; }
202
+ main { margin-top: 300px; }
203
+ }
204
+ </style>
205
+ </head>
206
+ <body>
207
+
208
+ <canvas id="bg-canvas"></canvas>
209
+
210
+ <div id="fractal-overlay">
211
+ <div class="fractal-content" id="fractal-text">
212
+ <!-- Intro Text injected here -->
213
+ </div>
214
+ <p style="margin-top: 40px; font-size: 0.7rem; color: var(--matrix-green); letter-spacing: 5px; opacity: 0.6;">[ PROCESSANDO SAUDAÇÃO SAGRADA ]</p>
215
+ </div>
216
+
217
+ <header>
218
+ <div class="logo">
219
+ 𓇓 <span>Ani's Monumental Codex</span>
220
+ </div>
221
+ <nav id="chapter-nav">
222
+ <!-- Dynamic Buttons -->
223
+ </nav>
224
+ <div class="header-actions">
225
+ <button class="nav-btn aton-btn" onclick="loadSpell('ATON')">ATON 𓇳</button>
226
+ <button class="nav-btn osiris-btn" onclick="loadSpell('S125')">OSÍRIS π“‚€</button>
227
+ <button class="action-btn fractal-btn" onclick="showFractal()">Mandala Fractal 𓇳</button>
228
+ <button class="action-btn" onclick="globalAction('TRANSLATE')">Manifestar PT</button>
229
+ <button class="action-btn" onclick="globalAction('RESET')" style="border-color: var(--accent-gold); color: var(--accent-gold);">Ocultar PT</button>
230
+ </div>
231
+ </header>
232
+
233
+ <main>
234
+ <h1 id="spell-title">Carregando CΓ³dice...</h1>
235
+ <div class="coda-grid" id="coda-grid">
236
+ <!-- Hieroglyphs go here -->
237
+ </div>
238
+ </main>
239
+
240
+ <footer>
241
+ TAKASYSTEM&trade; MONUMENTAL EDITION // PAPIRO DE ANI // UNIVERSIDADE DE BONN & BM DATABASE SYNC
242
+ </footer>
243
+
244
+ <script>
245
+ const spells = {
246
+ "S1": {
247
+ name: "CapΓ­tulo 1: O InΓ­cio do Caminho",
248
+ data: [
249
+ {eg: "𓏲", pt: "O"}, {eg: "π“‚‹π“ˆ–", pt: "NOME"}, {eg: "π“ˆ–", pt: "DE"}, {eg: "𓇓", pt: "ANI"},
250
+ {eg: "π“‚‹", pt: "PARA"}, {eg: "𓂧𓍑𓏏", pt: "DUAT"}, {eg: "π“‹Ή", pt: "VIDA"}, {eg: "π“ˆ–", pt: "NA"},
251
+ {eg: "𓇳", pt: "LUZ"}, {eg: "π“…“", pt: "DO"}, {eg: "π“ŠΉ", pt: "DIVINO."},
252
+ {eg: "π“Š¨π“", pt: "ÍSIS"}, {eg: "π“…ƒ", pt: "HΓ“RUS"}, {eg: "π“…“", pt: "COM"}, {eg: "𓄿𓂋𓅓𓄿𓂧𓄿", pt: "A FORΓ‡A"}
253
+ ]
254
+ },
255
+ "S17": {
256
+ name: "CapΓ­tulo 17: Natureza dos Deuses",
257
+ data: [
258
+ {eg: "𓇋", pt: "SOU"}, {eg: "𓅓𓆣", pt: "ATOM"}, {eg: "π“…“", pt: "QUANDO"}, {eg: "𓇋", pt: "EU"},
259
+ {eg: "𓋴𓍑", pt: "ESTAVA"}, {eg: "π“…±", pt: "SΓ“"}, {eg: "π“ˆ–", pt: "EM"}, {eg: "π“ˆ–π“…±π“ˆ–", pt: "NUN."},
260
+ {eg: "𓇋", pt: "SOU"}, {eg: "𓇳", pt: "RÁ"}, {eg: "π“…“", pt: "EM"}, {eg: "π“‚‹π“ˆ–", pt: "SEU"},
261
+ {eg: "π“²π“ƒ€π“ˆ–", pt: "SURGIR"}, {eg: "π“„Ώ", pt: "NO"}, {eg: "π“ˆ", pt: "CAMINHO."}
262
+ ]
263
+ },
264
+ "S30B": {
265
+ name: "Capítulo 30B: O Escaravelho do Coração",
266
+ data: [
267
+ {eg: "π“„£", pt: "CORAÇÃO"}, {eg: "π“ˆ–", pt: "DA"}, {eg: "𓅓𓅱𓏏", pt: "MΓƒE,"}, {eg: "π“ˆ–π“„Ώ", pt: "NΓƒO"},
268
+ {eg: "𓏏𓇯", pt: "TE"}, {eg: "π“‹΄π“‡―π“ˆ–", pt: "LEVANTES"}, {eg: "π“‚‹", pt: "CONTRA"}, {eg: "𓇋", pt: "MIM"},
269
+ {eg: "π“…“", pt: "NO"}, {eg: "π“ˆ–π“„Ώπ“‡―", pt: "TRIBUNAL"}, {eg: "π“ˆ–", pt: "DA"}, {eg: "π“Š¨π“‚‹π“‡―", pt: "JUSTIΓ‡A."}
270
+ ]
271
+ },
272
+ "S125": {
273
+ name: "Capítulo 125: Pesagem do Coração (Tribunal de Osíris)",
274
+ data: [
275
+ {eg: "π“‡‹π“ˆ–π“‚§", pt: "SAUDAÇÕES"}, {eg: "π“ŠΉ", pt: "DEUS"}, {eg: "𓅓𓄿𓂿𓏏", pt: "DA VERDADE."},
276
+ {eg: "𓇋", pt: "EU"}, {eg: "π“‚‹π“ˆ–", pt: "CONHEΓ‡O"}, {eg: "π“‚‹π“ˆ–", pt: "TEU NOME."},
277
+ {eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO"}, {eg: "𓇋𓂋𓇯", pt: "PRATIQUEI"}, {eg: "𓂧𓅱", pt: "O MAL."},
278
+ {eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO"}, {eg: "π“Ž›π“ˆ–", pt: "ROUBEI."}, {eg: "𓇋", pt: "SOU"}, {eg: "𓃀𓅱", pt: "PURO."}
279
+ ]
280
+ },
281
+ "ATON": {
282
+ name: "CΓ³dice de Aton: A Luz Infinita",
283
+ data: [
284
+ { eg: "𓏲", pt: "O" }, { eg: "π“ŠΉ", pt: "DEUS" }, { eg: "𓇳", pt: "SOL" }, { eg: "π“‡‹π“π“ˆ–", pt: "ATON" },
285
+ { eg: "π“‹΄π“Œ‰", pt: "ILUMINA" }, { eg: "π“„Ώ", pt: "A" }, { eg: "𓃀𓄿", pt: "ALMA" }, { eg: "π“ˆ–", pt: "NO" },
286
+ { eg: "π“ˆ", pt: "CAMINHO" }, { eg: "𓂧𓄿", pt: "DA" }, { eg: "π“Ž›π“‡³π“Ž›", pt: "ETERNIDADE." },
287
+ { eg: "π“„Ώ", pt: "A" }, { eg: "𓅓𓆣𓂋𓏏", pt: "MORTE" }, { eg: "π“ˆ–π“„Ώπ“‘", pt: "NΓƒO" }, { eg: "𓇋", pt: "Γ‰" },
288
+ { eg: "𓏲", pt: "O" }, { eg: "𓆑𓇯𓅓", pt: "FIM," }, { eg: "π“…“π“„Ώπ“‹΄", pt: "MAS" }, { eg: "𓏲", pt: "O" },
289
+ { eg: "π“‡‹π“ˆ–π“‡―π“‹΄π“‡―π“‘", pt: "INÍCIO" }, { eg: "𓂧𓄿", pt: "DA" }, { eg: "π“‹Ή", pt: "VIDA" }, { eg: "π“ˆ–π“„Ώ", pt: "NA" },
290
+ { eg: "𓇳", pt: "LUZ" }, { eg: "π“‡‹π“ˆ–π“†‘π“‡‹π“ˆ–", pt: "INFINITA." }, { eg: "𓏲", pt: "O" }, { eg: "π“„£", pt: "CORAÇÃO" },
291
+ { eg: "𓂧𓇋𓅱𓇋", pt: "DEVE" }, { eg: "𓋴𓇋𓂋", pt: "SER" }, { eg: "𓃭𓇋𓅱𓇋", pt: "LEVE" }, { eg: "π“Ž‘π“‘π“…“π“‘", pt: "COMO" },
292
+ { eg: "π“…±π“…“π“„Ώ", pt: "UMA" }, { eg: "𓆄", pt: "PENA" }, { eg: "π“Šͺπ“„Ώπ“‚‹π“„Ώ", pt: "PARA" }, { eg: "𓄿𓏏𓂋𓄿𓅱", pt: "ATRAVESSAR" },
293
+ { eg: "𓏲", pt: "O" }, { eg: "π“Šͺ𓍑𓂋𓏏𓄿𓃭", pt: "PORTAL" }, { eg: "𓂧𓍑", pt: "DO" }, { eg: "𓂧𓅱𓄿𓏏", pt: "DUAT." }
294
+ ]
295
+ }
296
+ };
297
+
298
+ const fractalIntro = "π“‡‹π“ˆ–π“‚§<br>π“ŠΉ<br>𓅓𓄿𓂿𓏏<br>𓇋<br>π“‚‹π“ˆ–<br>π“‚‹π“ˆ–<br>π“ˆ–π“„Ώπ“‘<br>𓇋𓂋𓇯<br>𓂧𓅱<br>π“ˆ–π“„Ώπ“‘<br>π“Ž›π“ˆ–<br>𓇋<br>𓃀𓅱";
299
+
300
+ let currentSpell = "S1";
301
+ const grid = document.getElementById('coda-grid');
302
+ const title = document.getElementById('spell-title');
303
+ const nav = document.getElementById('chapter-nav');
304
+ const matrixChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*()<>[]{}π“€€π“€π“€‚π“€ƒπ“€„π“€…π“€†π“€‡π“€ˆπ“€‰π“€Š";
305
+
306
+ function initNav() {
307
+ nav.innerHTML = '';
308
+ for(let key in spells) {
309
+ if(key === "S125" || key === "ATON") continue;
310
+ const btn = document.createElement('button');
311
+ btn.className = `nav-btn ${key === currentSpell ? 'active' : ''}`;
312
+ btn.textContent = key;
313
+ btn.onclick = () => loadSpell(key);
314
+ nav.appendChild(btn);
315
+ }
316
+ }
317
+
318
+ function loadSpell(key) {
319
+ currentSpell = key;
320
+ document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
321
+ const btns = Array.from(document.querySelectorAll('.nav-btn'));
322
+ const targetBtn = btns.find(b => b.textContent.includes(key));
323
+ if(targetBtn) targetBtn.classList.add('active');
324
+
325
+ title.textContent = spells[key].name;
326
+ grid.innerHTML = '';
327
+
328
+ spells[key].data.forEach(item => {
329
+ const span = document.createElement('span');
330
+ span.className = 'word-unit';
331
+ span.textContent = item.eg;
332
+ span.dataset.eg = item.eg;
333
+ span.dataset.pt = item.pt;
334
+ span.onclick = () => toggle(span);
335
+ grid.appendChild(span);
336
+ });
337
+ }
338
+
339
+ function toggle(el) {
340
+ const isPT = el.classList.contains('translated');
341
+ runMatrix(el, isPT ? el.dataset.eg : el.dataset.pt, !isPT);
342
+ }
343
+
344
+ function runMatrix(el, target, becomingPT) {
345
+ if (el.dataset.anim === "true") return;
346
+ el.dataset.anim = "true";
347
+ el.classList.add('decoding');
348
+ let it = 0; const max = 15;
349
+ const interval = setInterval(() => {
350
+ let res = "";
351
+ for(let i=0; i<target.length; i++) {
352
+ if(i < (it/max) * target.length) res += target[i];
353
+ else res += matrixChars[Math.floor(Math.random()*matrixChars.length)];
354
+ }
355
+ el.textContent = res;
356
+ if(++it > max) {
357
+ clearInterval(interval);
358
+ el.textContent = target;
359
+ el.dataset.anim = "false";
360
+ el.classList.remove('decoding');
361
+ becomingPT ? el.classList.add('translated') : el.classList.remove('translated');
362
+ }
363
+ }, 40);
364
+ }
365
+
366
+ function globalAction(type) {
367
+ document.querySelectorAll('.word-unit').forEach((w, i) => {
368
+ setTimeout(() => {
369
+ if(type === 'TRANSLATE' && !w.classList.contains('translated')) toggle(w);
370
+ if(type === 'RESET' && w.classList.contains('translated')) toggle(w);
371
+ }, i * 40);
372
+ });
373
+ }
374
+
375
+ function showFractal() {
376
+ const overlay = document.getElementById('fractal-overlay');
377
+ const content = document.getElementById('fractal-text');
378
+ content.innerHTML = fractalIntro;
379
+ overlay.style.display = 'flex';
380
+ setTimeout(() => {
381
+ overlay.style.display = 'none';
382
+ loadSpell('S125');
383
+ globalAction('TRANSLATE');
384
+ }, 4200);
385
+ }
386
+
387
+ const canvas = document.getElementById('bg-canvas');
388
+ const ctx = canvas.getContext('2d');
389
+ let w, h, cols, ypos;
390
+ function resize() {
391
+ w = canvas.width = window.innerWidth;
392
+ h = canvas.height = window.innerHeight;
393
+ cols = Math.floor(w / 20) + 1;
394
+ ypos = Array(cols).fill(0);
395
+ }
396
+ window.addEventListener('resize', resize);
397
+ resize();
398
+ function draw() {
399
+ ctx.fillStyle = 'rgba(1, 2, 4, 0.1)';
400
+ ctx.fillRect(0, 0, w, h);
401
+ ctx.fillStyle = '#00ff41';
402
+ ctx.font = '12pt monospace';
403
+ ypos.forEach((y, i) => {
404
+ const char = String.fromCharCode(Math.random() * 128 + 0x13000);
405
+ ctx.fillText(char, i * 20, y);
406
+ if (y > 100 + Math.random() * 10000) ypos[i] = 0; else ypos[i] = y + 20;
407
+ });
408
+ }
409
+ setInterval(draw, 50);
410
+
411
+ initNav();
412
+ loadSpell("S1");
413
+ </script>
414
+ </body>
415
+ </html>