626 lines
No EOL
17 KiB
HTML
626 lines
No EOL
17 KiB
HTML
<!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> |