-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdecoder.html
More file actions
114 lines (107 loc) · 5.58 KB
/
Copy pathdecoder.html
File metadata and controls
114 lines (107 loc) · 5.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decoder — Marvel Computer Fun, Program 13</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<style>
:root { --phos:#33ff66; --phos-dim:#1f9c3f; --amber:#ffcc00; --red:#ff5a3c; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:#0a0a0a; min-height:100%;
color:var(--phos); font-family:"Courier New",monospace; }
body { display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 12px 40px; }
.title { text-align:center; line-height:1.3; }
.title .marvel { color:var(--amber); letter-spacing:3px; font-weight:bold; font-size:13px; }
.title .prog { color:var(--red); font-size:22px; font-weight:bold; letter-spacing:1px;
text-shadow:0 0 6px rgba(255,90,60,.5); }
.crt { position:relative; background:#020602; border:14px solid #2b2b2b; border-radius:18px;
padding:16px; box-shadow:0 0 0 2px #000,0 12px 40px rgba(0,0,0,.8),inset 0 0 60px rgba(0,0,0,.9); }
.crt::after { content:""; position:absolute; inset:16px; border-radius:6px;
background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 3px 4px);
pointer-events:none; animation:flicker 5s infinite; }
@keyframes flicker { 0%,100%{opacity:.85} 50%{opacity:1} 92%{opacity:.78} }
.screen { margin:0; font-size:15px; line-height:18px; white-space:pre-wrap;
color:var(--phos); text-shadow:0 0 4px var(--phos),0 0 8px var(--phos-dim);
background:radial-gradient(ellipse at center,#031003 0%,#010401 100%);
padding:12px 14px; border-radius:6px; width:52ch; max-height:380px; overflow-y:auto; min-height:220px; }
.inputrow { display:flex; gap:8px; align-items:center; width:52ch; max-width:90vw; }
.inputrow input { flex:1; font-family:inherit; font-size:15px; background:#021002; color:var(--phos);
border:1px solid var(--phos-dim); border-radius:5px; padding:6px 10px; text-transform:uppercase; }
button { font-family:inherit; font-size:14px; background:#021002; color:var(--phos);
border:1px solid var(--phos-dim); border-radius:5px; padding:6px 14px; cursor:pointer; }
button:hover { background:#03220a; box-shadow:0 0 8px var(--phos-dim); }
button.quick { font-size:12px; padding:4px 8px; }
.quickrow { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:52ch; }
.hint { font-size:11px; color:var(--phos-dim); text-align:center; max-width:52ch; }
</style>
</head>
<body>
<div class="title">
<div class="marvel">MARVEL SUPER HEROES • COMPUTER FUN</div>
<div class="prog">PROGRAM 13 — DECODER</div>
</div>
<div class="crt"><pre class="screen" id="screen">ENTER MESSAGE
</pre></div>
<div class="inputrow">
<input type="text" id="inp" autocomplete="off" autofocus placeholder="paste a coded line (5-char blocks) — STOP to finish">
<button id="send">DECODE</button>
<button id="clear">CLEAR</button>
</div>
<div class="quickrow">
<span style="font-size:11px;color:var(--phos-dim);align-self:center">IRON MAN'S MESSAGE:</span>
<button class="quick" data-q="ICASR *R*I* WEDOY IAINO LTV*U LEEF. **RO+">LINE 1</button>
<button class="quick" data-q="T*AEN HCK*T EA*BR NNIAA **NCN YS*KC ONT*E UEHE.">LINE 2</button>
<button class="quick" data-q="I*IFU *IOTT WNNEE I**ES LPIN. LON*+ *S*M- BIFI@ ETIN#">LINE 3</button>
<button class="quick" data-q="GL*** OUFIM OCRRA DKOON **MN+">LINE 4</button>
<button class="quick" id="decall">DECODE ALL 4</button>
</div>
<div class="hint">Strip blanks, swap <b>*</b>→space, then for I=1..5 and J=0..MM-1 read MM$[I+J*5]: rebuilds the original by walking the 5-char column blocks down each row.</div>
<script>
const BOOK_LINES = [
"ICASR *R*I* WEDOY IAINO LTV*U LEEF. **RO+",
"T*AEN HCK*T EA*BR NNIAA **NCN YS*KC ONT*E UEHE.",
"I*IFU *IOTT WNNEE I**ES LPIN. LON*+ *S*M- BIFI@ ETIN#",
"GL*** OUFIM OCRRA DKOON **MN+"
];
const screenEl = document.getElementById('screen');
const inp = document.getElementById('inp');
function decode(M) { // lines 170-300
let MM = "";
for (const ch of M) { // 170-220
if (ch === " ") continue; // 190 (strip blanks)
MM += (ch === "*" ? " " : ch); // 200 (* -> space)
}
const mm = Math.floor(MM.length / 5); // 230
let A = "";
for (let I = 1; I <= 5; I++) { // 240
for (let J = 0; J <= mm - 1; J++) { // 250
A += MM.charAt(I + J * 5 - 1); // 260 (1-based MID$ -> 0-based index)
}
}
return A;
}
function send(raw) {
const txt = (raw === undefined ? inp.value : raw).trim().toUpperCase();
inp.value = '';
if (!txt) return;
if (txt === "STOP") { // 160
screenEl.textContent += "\n*** PROGRAM ENDED ***\n";
inp.disabled = true; return;
}
screenEl.textContent += "INPUT:\n " + txt + "\n\nDECODED MESSAGE:\n " + decode(txt) + "\n\n";
screenEl.scrollTop = screenEl.scrollHeight;
}
document.getElementById('send').addEventListener('click', () => send());
document.getElementById('clear').addEventListener('click', () => {
screenEl.textContent = "ENTER MESSAGE\n\n\n"; inp.disabled = false; inp.focus();
});
inp.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); send(); } });
document.querySelectorAll('.quick[data-q]').forEach(b =>
b.addEventListener('click', () => send(b.dataset.q)));
document.getElementById('decall').addEventListener('click', () => {
for (const ln of BOOK_LINES) send(ln);
});
</script>
</body>
</html>