Initial commit - divination content
This commit is contained in:
David Torcivia
commit
040d373967
271 changed files with 28825 additions and 0 deletions
626
telex.html
Normal file
626
telex.html
Normal file
|
|
@ -0,0 +1,626 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MAN(1) TELEX</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--term-color: #ffb000;
|
||||
/* Amber Phosphorus */
|
||||
--term-dim: #b8860b;
|
||||
--term-bg: #0a0a0a;
|
||||
--scanline-color: rgba(0, 0, 0, 0.5);
|
||||
--glow: 0 0 2px var(--term-color), 0 0 5px var(--term-dim);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
color: var(--term-color);
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Firefox Scrollbar Styling */
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--term-color) #000;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* WebKit Scrollbar (Chrome/Edge/Safari) */
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--term-color);
|
||||
border: 2px solid #000;
|
||||
box-shadow: inset 2px 2px 0px rgba(255, 176, 0, 0.5);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #000;
|
||||
border-left: 1px solid var(--term-dim);
|
||||
}
|
||||
|
||||
/* Selection Theme (Inverse) */
|
||||
::selection {
|
||||
background: var(--term-color);
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* CRT Effects */
|
||||
.crt-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(18, 16, 16, 0) 50%,
|
||||
rgba(0, 0, 0, 0.25) 50%);
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
|
||||
.crt-vignette {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Screen Container */
|
||||
.terminal-screen {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 20px;
|
||||
position: relative;
|
||||
text-shadow: var(--glow);
|
||||
}
|
||||
|
||||
/* MAN PAGE STYLING */
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 10px 0;
|
||||
text-transform: uppercase;
|
||||
border-bottom: double 3px var(--term-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 40px 0 15px 0;
|
||||
text-transform: uppercase;
|
||||
color: var(--term-color);
|
||||
/* Monochrome */
|
||||
text-shadow: 0 0 4px var(--term-color);
|
||||
}
|
||||
|
||||
p,
|
||||
div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-block {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 20px;
|
||||
/* Standard Man Page Indent */
|
||||
}
|
||||
|
||||
.def-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.def-item {
|
||||
margin-bottom: 15px;
|
||||
/* More breathing room for text */
|
||||
}
|
||||
|
||||
.def-term {
|
||||
font-weight: bold;
|
||||
color: var(--term-color);
|
||||
/* Monochrome */
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.def-desc {
|
||||
padding-left: 30px;
|
||||
color: var(--term-color);
|
||||
/* Monochrome - Full Brightness */
|
||||
opacity: 1;
|
||||
max-width: 75ch;
|
||||
/* Allow wider reading line */
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--term-color);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted var(--term-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--term-color);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-bottom: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 600px) {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 20px;
|
||||
/* Keep readable */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.terminal-screen {
|
||||
padding: 20px 15px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.def-desc {
|
||||
padding-left: 15px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.def-term {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.section-block {
|
||||
padding-left: 15px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: hidden;
|
||||
max-width: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Hide ASCII art, show compact version */
|
||||
.ascii-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ascii-header-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// === INLINE BOOT SEQUENCE ===
|
||||
const bootMessage = '> LOADING TELEX MANUAL... OK';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const bootText = document.getElementById('boot-text');
|
||||
const bootLine = document.getElementById('boot-line');
|
||||
const pageContent = document.getElementById('page-content');
|
||||
|
||||
let charIndex = 0;
|
||||
|
||||
function typeBootMessage() {
|
||||
if (charIndex < bootMessage.length) {
|
||||
bootText.textContent += bootMessage[charIndex];
|
||||
charIndex++;
|
||||
setTimeout(typeBootMessage, 25);
|
||||
} else {
|
||||
// Boot complete - reveal content LINE BY LINE
|
||||
setTimeout(revealContentLines, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function revealContentLines() {
|
||||
// Get all direct children of page-content to reveal
|
||||
const elements = pageContent.querySelectorAll(':scope > *');
|
||||
pageContent.style.opacity = '1';
|
||||
|
||||
// Initially hide all elements
|
||||
elements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(5px)';
|
||||
});
|
||||
|
||||
// Reveal each element rapidly
|
||||
let delay = 0;
|
||||
elements.forEach((el, index) => {
|
||||
setTimeout(() => {
|
||||
el.style.transition = 'opacity 0.1s, transform 0.1s';
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, delay);
|
||||
delay += 50; // 50ms between each element - very fast!
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(typeBootMessage, 200);
|
||||
|
||||
// === LIVE TYPING + EASTER EGGS ===
|
||||
const inputSpan = document.getElementById('cmd-input');
|
||||
let currentCommand = '';
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) return;
|
||||
|
||||
if (e.key === 'Enter') {
|
||||
handleCommand(currentCommand.trim().toLowerCase());
|
||||
currentCommand = '';
|
||||
inputSpan.textContent = '';
|
||||
} else if (e.key === 'Backspace') {
|
||||
currentCommand = currentCommand.slice(0, -1);
|
||||
inputSpan.textContent = currentCommand;
|
||||
} else if (e.key.length === 1) {
|
||||
currentCommand += e.key;
|
||||
inputSpan.textContent = currentCommand;
|
||||
}
|
||||
});
|
||||
|
||||
function handleCommand(cmd) {
|
||||
const responseArea = document.getElementById('cmd-response');
|
||||
let response = '';
|
||||
|
||||
switch (cmd) {
|
||||
case 'help':
|
||||
response = '> COMMANDS: help, exit, clear, whoami, 69';
|
||||
break;
|
||||
case 'exit':
|
||||
// Terminal-style: clear and show message at top-left
|
||||
document.getElementById('main-content').innerHTML = `
|
||||
<div style="padding: 60px 20px;">
|
||||
<p>> exit</p>
|
||||
<p style="margin-top: 20px;">> CONNECTION CLOSED</p>
|
||||
<p style="margin-top: 10px; opacity: 0.6;">> Session terminated by user.</p>
|
||||
<p style="margin-top: 30px;">guest@telex:~$ <span class="cursor">_</span></p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
case 'clear':
|
||||
responseArea.textContent = '';
|
||||
return;
|
||||
case 'whoami':
|
||||
response = '> guest@telex.disinfo.zone';
|
||||
break;
|
||||
case '69':
|
||||
response = '> nice.';
|
||||
break;
|
||||
case 'make some fun':
|
||||
response = '> OR ELSE.';
|
||||
break;
|
||||
default:
|
||||
if (cmd) response = '> UNKNOWN COMMAND: ' + cmd;
|
||||
}
|
||||
|
||||
if (response) {
|
||||
responseArea.textContent = response;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// === MECHANICAL SCROLL ===
|
||||
document.addEventListener('wheel', (e) => {
|
||||
const step = 40;
|
||||
const direction = e.deltaY > 0 ? 1 : -1;
|
||||
if (e.deltaY !== 0) {
|
||||
window.scrollBy({ top: step * direction, behavior: 'auto' });
|
||||
e.preventDefault();
|
||||
}
|
||||
}, { passive: false });
|
||||
</script>
|
||||
<script async src="https://zerolens.disinfo.zone/script.js"
|
||||
data-website-id="3871ce55-1e5f-446b-bdad-2b50ccde7b0c"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="crt-overlay"></div>
|
||||
<div class="crt-vignette"></div>
|
||||
|
||||
<div class="terminal-screen" id="main-content">
|
||||
<!-- INLINE BOOT MESSAGE (always visible) -->
|
||||
<div id="boot-line" style="margin-bottom: 20px;">
|
||||
<span id="boot-text"></span><span class="cursor" id="boot-cursor">_</span>
|
||||
</div>
|
||||
|
||||
<!-- ALL PAGE CONTENT (starts hidden, reveals after boot) -->
|
||||
<div id="page-content" style="opacity: 0;">
|
||||
<div class="nav-links">
|
||||
<a href="index.html"><< ROOT</a> | <a href="#posts">POSTS</a> | <a href="#timelines">TIMELINES</a>
|
||||
|
|
||||
<a href="#tech">SYS_INFO</a>
|
||||
</div>
|
||||
|
||||
<!-- ASCII HEADER: Desktop -->
|
||||
<pre class="ascii-header" style="font-size: 16px; line-height: 1.2; margin-bottom: 5px;">
|
||||
████████╗███████╗██╗ ███████╗██╗ ██╗
|
||||
╚══██╔══╝██╔════╝██║ ██╔════╝╚██╗██╔╝
|
||||
██║ █████╗ ██║ █████╗ ╚███╔╝
|
||||
██║ ██╔══╝ ██║ ██╔══╝ ██╔██╗
|
||||
██║ ███████╗███████╗███████╗██╔╝ ██╗
|
||||
╚═╝ ╚══════╝╚══════╝╚══════╝╚═╝ ╚═╝ (1)
|
||||
</pre>
|
||||
<!-- ASCII HEADER: Mobile (Compact) -->
|
||||
<pre class="ascii-header-mobile"
|
||||
style="display: none; font-size: 14px; line-height: 1.1; margin-bottom: 5px;">
|
||||
╔════════════════════╗
|
||||
║ T E L E X (1) ║
|
||||
╚════════════════════╝
|
||||
</pre>
|
||||
|
||||
<div style="font-size: 14px; opacity: 0.7; margin-bottom: 30px;">SYSTEM MANUAL // DISINFO.ZONE</div>
|
||||
|
||||
<div class="section-block">
|
||||
<strong>NAME</strong><br>
|
||||
telex - digital doorway to the fediverse<br>
|
||||
<strong>AUTHOR (VOICE_MODULE)</strong><br>
|
||||
DISINFONIAC #69<br>
|
||||
<strong>SYS_ADMIN</strong><br>
|
||||
DISINFONIAC #1
|
||||
</div>
|
||||
|
||||
<h2>SYNOPSIS</h2>
|
||||
<div class="section-block">
|
||||
A guide to surviving the content mines.
|
||||
</div>
|
||||
|
||||
<h2>DESCRIPTION</h2>
|
||||
<div class="section-block">
|
||||
<p>Welcome to the <strong>telex</strong>. This is a quickguide to making the most of your time here.</p>
|
||||
<br>
|
||||
<p>>> WARNING: Defend your info and yourself.</p>
|
||||
<p>>> REMINDER: Post vigilantly. View discerningly.</p>
|
||||
<div style="margin-top: 20px; border-left: 2px solid var(--term-color); padding-left: 15px;">
|
||||
<strong>>> NOTE_FROM_#69:</strong><br>
|
||||
Make some fun or ELSE. This is not some kind of loser space; have some fuckin respect for yourself
|
||||
and
|
||||
your friends.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="posts">POSTING MODES</h2>
|
||||
<div class="section-block def-list">
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">[-g, --globe] PUBLIC</span>
|
||||
<div class="def-desc">
|
||||
Anyone could see it. The people who mostly will are those in servers (instances) that are
|
||||
closely
|
||||
related to your own. As you connect with users on other servers, you'll appear in their
|
||||
"federated
|
||||
timeline" (FedFeed). Basically: you see posts of your friends' friends' friends.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">[-l, --local] GROUP</span>
|
||||
<div class="def-desc">
|
||||
This just goes to your server. If someone visits from outside, they will not see these posts.
|
||||
Basically your server's groupchat.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">[-u, --unlisted] UNLOCKED</span>
|
||||
<div class="def-desc">
|
||||
Posts like this don't pop up in the fedfeed, so they're useful for back-and-forth conversation
|
||||
that
|
||||
won't clog up timelines. Or for pinning something on your profile for visitors only.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">[-f, --followers] LOCKED</span>
|
||||
<div class="def-desc">
|
||||
Followers only. You don't have to follow everyone in your server. If you have followers from
|
||||
your
|
||||
server OR another server, a Locked post will only be shown to this specific mix of followers.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">[-d, --direct] LETTER</span>
|
||||
<div class="def-desc">
|
||||
Private message. Only visible to the recipient.
|
||||
<br>[!] CAUTION: Admin visibility is possible. Always assume you're being surveilled when
|
||||
messaging
|
||||
direct.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="timelines">TIMELINES (DATA STREAMS)</h2>
|
||||
<div class="section-block def-list">
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">HOME [HOUSE]</span>
|
||||
<div class="def-desc">
|
||||
Your semi-holistic personal view. Public posts from friends, local posts from servermates, DMs,
|
||||
and
|
||||
any Locked/Unlocked posts mentioning you.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">BUBBLE [CIRCLE]</span>
|
||||
<div class="def-desc">
|
||||
Public posts of your servermates AND users on any servers your server has associated with
|
||||
(bubbled
|
||||
up).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">PUBLIC [GROUP]</span>
|
||||
<div class="def-desc">
|
||||
A misnomer. This is the timeline of JUST your servermates. It is not "public" beyond your
|
||||
server.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">KNOWN NETWORK [GLOBE]</span>
|
||||
<div class="def-desc">
|
||||
The Federated Timeline. Use this to see the wider world - friends of friends and their friends.
|
||||
There's a much wider fediverse out there, but these are the nodes you have a few degrees of
|
||||
association with.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">ADDITIONAL STREAMS</span>
|
||||
<div class="def-desc">
|
||||
[BOOKMARKS]: Saved posts.<br>
|
||||
[DIRECT MESSAGES]: Private comms sent to you.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="responses">INTERACTION CMDS</h2>
|
||||
<div class="section-block def-list">
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">REPLY</span>
|
||||
<div class="def-desc">
|
||||
A direct reply. You can reply Publicly (Globe), Unlisted (Unlocked) to keep it off the feed, or
|
||||
locally (Group) for "safe space" server-only responses.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">QUOTE</span>
|
||||
<div class="def-desc">
|
||||
Embed another post into one of yours. Can be posted across all same styles as replies.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">REPEAT</span>
|
||||
<div class="def-desc">
|
||||
Re-broadcasts signal. If you repeat a public post, it hits the fedfeed. Local posts stay local.
|
||||
DMs
|
||||
cannot be repeated.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">STAR / REACT</span>
|
||||
<div class="def-desc">
|
||||
[STAR]: Save to favorites (can be hidden in settings).<br>
|
||||
[REACT]: Append unicode emoji packet.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="def-item">
|
||||
<span class="def-term">MODERATION</span>
|
||||
<div class="def-desc">
|
||||
[MUTE]: Silence a conversation thread (not the user).<br>
|
||||
[REPORT]: Alert server admin (Disinfoniac #1) to a post.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="tech">SYSTEM INFO</h2>
|
||||
<div class="section-block">
|
||||
<p>This section is for nerds.</p>
|
||||
<br>
|
||||
<p>The telex is an "instance" of a social posting platform called <strong>Akkoma</strong> that lives on
|
||||
the
|
||||
<a href="https://disinfo.zone">disinfo.zone</a> server under the control of server-admin
|
||||
<strong>Disinfoniac #1</strong>.
|
||||
</p>
|
||||
<p>Akkoma is a fork of Pleroma. Both support the <strong>ActivityPub</strong> protocol, networking with
|
||||
Mastodon, Misskey, Pixelfed (photos), PeerTube (video), and Hubzilla.</p>
|
||||
<br>
|
||||
<p>D1 is currently researching connecting some of these other platforms on our server, as well as
|
||||
in-telex
|
||||
bots or mods. If you come across cool ideas from other instances or encounter problems on ours,
|
||||
please
|
||||
let D1 know via DM or local post <strong>@david@disinfo.zone</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 60px; border-top: 1px dashed var(--term-color); padding-top: 20px;">
|
||||
<p style="margin-bottom: 5px; opacity: 0.7;">END_OF_FILE</p>
|
||||
<p id="cmd-response" style="min-height: 1.5em; margin-bottom: 10px;"></p>
|
||||
<p>
|
||||
<span style="color: var(--term-color);">guest@telex:~$</span>
|
||||
<span id="cmd-input"></span><span class="cursor">_</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- end #page-content -->
|
||||
|
||||
</div> <!-- end #main-content -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue