forked from avi/signalelsewhere
1629 lines
72 KiB
HTML
1629 lines
72 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Signal Elsewhere</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: #000;
|
|
overflow: hidden;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
#matrixCanvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
#textContainer {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
line-height: 2;
|
|
visibility: hidden;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.typewriter-line {
|
|
visibility: hidden;
|
|
white-space: nowrap;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
#followBtn {
|
|
position: fixed;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
padding: 1rem 3rem;
|
|
font-size: 1.1rem;
|
|
background-color: #001100;
|
|
color: #00ff00;
|
|
border: 2px solid #00ff00;
|
|
cursor: pointer;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.5s ease, background-color 0.2s ease;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
#followBtn:hover {
|
|
background-color: #003300;
|
|
}
|
|
|
|
.scene {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 4;
|
|
background-color: #000;
|
|
color: #00ff00;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
opacity: 0;
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
#scene2 {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
#scene2Lines {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#scene2Line1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: #00ff00;
|
|
visibility: hidden;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#scene2Line2 {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: #00ff00;
|
|
padding: 0 2rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#scene2Message2 {
|
|
color: #00ff00;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
#scene2Cursor,
|
|
#scene2Cursor2 {
|
|
display: none;
|
|
width: 10px;
|
|
height: 1.4em;
|
|
background-color: #00ff00;
|
|
margin-left: 4px;
|
|
flex-shrink: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
#whatIsLabBtn {
|
|
position: fixed;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
padding: 1rem 3rem;
|
|
font-size: 1.1rem;
|
|
background-color: #001100;
|
|
color: #00ff00;
|
|
border: 2px solid #00ff00;
|
|
cursor: pointer;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.5s ease, background-color 0.2s ease;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
#whatIsLabBtn:hover {
|
|
background-color: #003300;
|
|
}
|
|
|
|
#scene3ChoiceRow {
|
|
position: fixed;
|
|
bottom: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
display: none;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scene3ChoiceBtn {
|
|
padding: 1rem 2rem;
|
|
font-size: 1rem;
|
|
background-color: #001100;
|
|
color: #00ff00;
|
|
border: 2px solid #00ff00;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.8s ease, background-color 0.2s ease;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.scene3ChoiceBtn:hover {
|
|
background-color: #003300;
|
|
}
|
|
|
|
#scene4 {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
padding: 2rem;
|
|
}
|
|
|
|
#scene4Text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
#scene3Title {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 2rem;
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
color: #00ff00;
|
|
opacity: 0;
|
|
transition: opacity 1.5s ease-out;
|
|
}
|
|
|
|
#scene3Title.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
#scene3 {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 6rem 2rem;
|
|
}
|
|
|
|
#scene3Text {
|
|
white-space: pre-wrap;
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
/* Scene 4 sub-scenes */
|
|
.scene4sub {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 8rem 2rem 1.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
.scene4text {
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
line-height: 1.8;
|
|
}
|
|
.s4visual {
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
margin-top: 1.5rem;
|
|
opacity: 0;
|
|
transition: opacity 1.2s ease;
|
|
}
|
|
.s4visual.visible { opacity: 1; }
|
|
|
|
/* Timeline */
|
|
.s4tl {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #003300;
|
|
opacity: 0;
|
|
transition: opacity 1s ease;
|
|
}
|
|
.s4tl.visible { opacity: 1; }
|
|
.tl-year {
|
|
font-size: 0.85rem;
|
|
color: #004400;
|
|
transition: color 0.8s ease;
|
|
cursor: default;
|
|
position: relative;
|
|
}
|
|
.tl-year.active { color: #00ff00; }
|
|
.tl-year.dim { color: #007700; }
|
|
.tl-year::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -0.3rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #004400;
|
|
transition: background 0.8s ease;
|
|
}
|
|
.tl-year.active::after { background: #00ff00; box-shadow: 0 0 6px #00ff00; }
|
|
.tl-year.dim::after { background: #007700; }
|
|
|
|
/* NEXT button */
|
|
.btnNext {
|
|
position: fixed;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 5;
|
|
padding: 0.8rem 2.5rem;
|
|
font-size: 1rem;
|
|
background-color: #001100;
|
|
color: #00ff00;
|
|
border: 2px solid #00ff00;
|
|
cursor: pointer;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.5s ease, background-color 0.2s ease;
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 2px;
|
|
}
|
|
.btnNext:hover { background-color: #003300; }
|
|
|
|
/* 69% Callout box */
|
|
.callout-box {
|
|
border: 2px solid #660000;
|
|
background: #1a0000;
|
|
color: #ff4444;
|
|
padding: 1.2rem 1.5rem;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 12px rgba(255,0,0,0.15);
|
|
animation: calloutPulse 2s infinite alternate;
|
|
}
|
|
@keyframes calloutPulse {
|
|
from { box-shadow: 0 0 8px rgba(255,0,0,0.1); }
|
|
to { box-shadow: 0 0 20px rgba(255,0,0,0.3); }
|
|
}
|
|
|
|
/* Coin stack */
|
|
.coin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
gap: 4px;
|
|
max-width: 15rem;
|
|
margin: 0 auto;
|
|
}
|
|
.coin {
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
border: 1px solid #004400;
|
|
background: #001100;
|
|
transition: background 0.5s ease, border-color 0.5s ease;
|
|
}
|
|
.coin.gold { background: #665500; border-color: #aa8800; }
|
|
|
|
/* Comparison table */
|
|
.comp-table {
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
.comp-table th, .comp-table td {
|
|
border: 1px solid #003300;
|
|
padding: 0.6rem 1rem;
|
|
text-align: center;
|
|
}
|
|
.comp-table th {
|
|
color: #00ff00;
|
|
border-bottom: 2px solid #00ff00;
|
|
}
|
|
.comp-table td:first-child {
|
|
text-align: left;
|
|
color: #00cc00;
|
|
}
|
|
.comp-table .yes { color: #ff4444; }
|
|
.comp-table .no { color: #44ff44; }
|
|
|
|
/* Punch cards */
|
|
.punch-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-top: 1.5rem;
|
|
width: 100%;
|
|
max-width: 50rem;
|
|
}
|
|
.punch-card {
|
|
flex: 1;
|
|
border: 1px solid #003300;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
background: #000800;
|
|
border-radius: 4px;
|
|
}
|
|
.punch-card .punch-icon {
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.punch-card .punch-text {
|
|
color: #00ff00;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Scene 5 */
|
|
.scene5text {
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
width: 100%;
|
|
max-width: 55rem;
|
|
line-height: 1.8;
|
|
}
|
|
.s5visual {
|
|
width: 100%;
|
|
max-width: 55rem;
|
|
margin-top: 1.5rem;
|
|
opacity: 0;
|
|
transition: opacity 4s ease;
|
|
}
|
|
.s5visual.visible { opacity: 1; }
|
|
|
|
/* Hashrate dominance bar */
|
|
.hash-bar-container {
|
|
width: 100%;
|
|
max-width: 40rem;
|
|
margin: 0 auto;
|
|
}
|
|
.hash-bar {
|
|
display: flex;
|
|
height: 2.8rem;
|
|
border: 1px solid #003300;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.hash-bar-btc {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(90deg, #003300, #00ff00);
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
flex: 99;
|
|
text-shadow: 0 0 4px #00ff00;
|
|
transition: flex 1.5s ease;
|
|
}
|
|
.hash-bar-rest {
|
|
flex: 1;
|
|
background: #1a0000;
|
|
border-left: 1px solid #003300;
|
|
}
|
|
|
|
/* Table row highlight for BTC */
|
|
.comp-table .btc-col {
|
|
background: #001a00;
|
|
border-color: #00ff00;
|
|
color: #00ff00;
|
|
font-weight: bold;
|
|
}
|
|
.comp-table .btc-col .yes { color: #44ff44; }
|
|
.comp-table .btc-col .no { color: #ff4444; }
|
|
.comp-table .nickname {
|
|
font-size: 0.75rem;
|
|
color: #007700;
|
|
}
|
|
.comp-table th.btc-col {
|
|
border-bottom-color: #00ff00;
|
|
}
|
|
.comp-table td.btc-col .no { color: #44ff44; }
|
|
.comp-table td.btc-col .yes { color: #ff4444; }
|
|
|
|
/* Scene 6 */
|
|
.scene6text {
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
width: 100%;
|
|
max-width: 55rem;
|
|
line-height: 1.8;
|
|
}
|
|
.s6visual {
|
|
width: 100%;
|
|
max-width: 55rem;
|
|
margin-top: 1.5rem;
|
|
opacity: 0;
|
|
transition: opacity 4s ease;
|
|
}
|
|
.s6visual.visible { opacity: 1; }
|
|
.s6section {
|
|
margin-top: 1.5rem;
|
|
text-align: left;
|
|
}
|
|
.s6section-title {
|
|
color: #007700;
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.comp-table .linux-col {
|
|
background: #001a00;
|
|
border-color: #00ff00;
|
|
color: #00ff00;
|
|
font-weight: bold;
|
|
}
|
|
.comp-table .linux-col .no { color: #44ff44; }
|
|
.comp-table .linux-col .yes { color: #ff4444; }
|
|
.comp-table th.linux-col {
|
|
border-bottom-color: #00ff00;
|
|
}
|
|
.comp-table td.linux-col .no { color: #44ff44; }
|
|
.comp-table td.linux-col .yes { color: #ff4444; }
|
|
|
|
.comp-table .graphene-col {
|
|
background: #001a00;
|
|
border-color: #00ff00;
|
|
color: #00ff00;
|
|
font-weight: bold;
|
|
}
|
|
.comp-table .graphene-col .no { color: #44ff44; }
|
|
.comp-table .graphene-col .yes { color: #ff4444; }
|
|
.comp-table th.graphene-col {
|
|
border-bottom-color: #00ff00;
|
|
}
|
|
.comp-table td.graphene-col .no { color: #44ff44; }
|
|
.comp-table td.graphene-col .yes { color: #ff4444; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="matrixCanvas"></canvas>
|
|
|
|
<div id="textContainer">
|
|
<div class="typewriter-line" id="line1"></div>
|
|
<div class="typewriter-line" id="line2"></div>
|
|
<div class="typewriter-line" id="line3"></div>
|
|
</div>
|
|
|
|
<button id="followBtn">FOLLOW THEM</button>
|
|
|
|
<div id="scene2" class="scene">
|
|
<div id="scene2Lines">
|
|
<div id="scene2Line1">
|
|
<span id="scene2Message"></span>
|
|
<span id="scene2Cursor"></span>
|
|
</div>
|
|
<div id="scene2Line2">
|
|
<span id="scene2Message2"></span>
|
|
<span id="scene2Cursor2"></span>
|
|
</div>
|
|
</div>
|
|
<button id="whatIsLabBtn">WHAT IS LAB 484?</button>
|
|
</div>
|
|
|
|
<div id="scene3" class="scene">
|
|
<div id="scene3Title">LAB 484</div>
|
|
<div id="scene3Text"></div>
|
|
<div id="scene3ChoiceRow">
|
|
<button class="scene3ChoiceBtn" id="yourMoneyBtn">YOUR MONEY</button>
|
|
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
|
|
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
|
<button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
|
|
<button class="scene3ChoiceBtn" id="yourTechBtn">YOUR TECH</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scene 4 sub-scenes -->
|
|
<div id="scene4a" class="scene scene4sub">
|
|
<div class="s4tl"></div>
|
|
<div class="scene4text" id="s4aText"></div>
|
|
<div class="s4visual" id="s4aVisual"></div>
|
|
<button class="btnNext" id="next4a">NEXT</button>
|
|
</div>
|
|
<div id="scene4b" class="scene scene4sub">
|
|
<div class="s4tl"></div>
|
|
<div class="scene4text" id="s4bText"></div>
|
|
<div class="s4visual" id="s4bVisual"></div>
|
|
<button class="btnNext" id="next4b">NEXT</button>
|
|
</div>
|
|
<div id="scene4c" class="scene scene4sub">
|
|
<div class="s4tl"></div>
|
|
<div class="scene4text" id="s4cText"></div>
|
|
<div class="s4visual" id="s4cVisual"></div>
|
|
<button class="btnNext" id="next4c">NEXT</button>
|
|
</div>
|
|
<div id="scene4d" class="scene scene4sub">
|
|
<div class="s4tl"></div>
|
|
<div class="scene4text" id="s4dText"></div>
|
|
<div class="s4visual" id="s4dVisual"></div>
|
|
<button class="btnNext" id="next4d">NEXT</button>
|
|
</div>
|
|
<div id="scene4e" class="scene scene4sub">
|
|
<div class="s4tl"></div>
|
|
<div class="scene4text" id="s4eText"></div>
|
|
<div class="s4visual" id="s4eVisual"></div>
|
|
<button class="btnNext" id="next4e">NEXT</button>
|
|
</div>
|
|
|
|
<div id="scene5" class="scene">
|
|
<div class="scene5text" id="s5Text"></div>
|
|
<div class="s5visual" id="s5Visual"></div>
|
|
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
|
</div>
|
|
|
|
<div id="scene6" class="scene">
|
|
<div class="scene6text" id="s6Text"></div>
|
|
<div class="s6visual" id="s6Visual"></div>
|
|
<button class="btnNext" id="returnFromScene6">RETURN</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Testing shortcuts state
|
|
let skipAnimations = false;
|
|
let scene3TypewriterTimeouts = [];
|
|
|
|
// Canvas setup for Matrix rain
|
|
const canvas = document.getElementById('matrixCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
// Matrix rain configuration
|
|
const fontSize = 14;
|
|
let columns = Math.floor(canvas.width / fontSize);
|
|
let drops = [];
|
|
const chars = '0123456789@#$%^&*()';
|
|
const rainDuration = 5000; // 5 seconds
|
|
let rainActive = false;
|
|
let rainStartTime = null;
|
|
|
|
// CRT flicker effect
|
|
function crtFlicker() {
|
|
let flickerCount = 0;
|
|
const maxFlickers = 3;
|
|
const flickerInterval = setInterval(() => {
|
|
ctx.fillStyle = flickerCount % 2 === 0 ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,1)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
flickerCount++;
|
|
if (flickerCount >= maxFlickers * 2) {
|
|
clearInterval(flickerInterval);
|
|
ctx.fillStyle = '#000';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
startMatrixRain();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
// Start Matrix rain animation
|
|
function startMatrixRain() {
|
|
rainActive = true;
|
|
rainStartTime = Date.now();
|
|
columns = Math.floor(canvas.width / fontSize);
|
|
drops = Array(columns).fill(0).map(() => Math.floor(Math.random() * canvas.height / fontSize));
|
|
drawMatrix();
|
|
}
|
|
|
|
// Draw Matrix rain frame
|
|
function drawMatrix() {
|
|
if (!rainActive) return;
|
|
|
|
// Create trail effect
|
|
ctx.fillStyle = 'rgba(0,0,0,0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#00ff00';
|
|
ctx.font = fontSize + 'px Courier New, monospace';
|
|
|
|
for (let i = 0; i < columns; i++) {
|
|
const x = i * fontSize;
|
|
const y = drops[i] * fontSize;
|
|
|
|
// Chance to render "484" as a horizontal string in this column
|
|
if (Math.random() < 0.003) {
|
|
ctx.fillText('484', x, y);
|
|
} else {
|
|
const text = chars[Math.floor(Math.random() * chars.length)];
|
|
ctx.fillText(text, x, y);
|
|
}
|
|
|
|
// Reset drop when it goes off screen
|
|
if (y > canvas.height && Math.random() > 0.975) {
|
|
drops[i] = 0;
|
|
}
|
|
drops[i] += 0.5;
|
|
}
|
|
|
|
// End rain after duration
|
|
if (Date.now() - rainStartTime > rainDuration) {
|
|
fadeRainToBackground();
|
|
rainActive = false;
|
|
} else {
|
|
requestAnimationFrame(drawMatrix);
|
|
}
|
|
}
|
|
|
|
// Fade rain to background
|
|
function fadeRainToBackground() {
|
|
const canvasElem = document.getElementById('matrixCanvas');
|
|
let opacity = 1;
|
|
const fadeInterval = setInterval(() => {
|
|
opacity -= 0.02;
|
|
if (opacity <= 0.15) {
|
|
opacity = 0.15;
|
|
clearInterval(fadeInterval);
|
|
document.getElementById('textContainer').style.visibility = 'visible';
|
|
typewriter();
|
|
}
|
|
canvasElem.style.opacity = opacity;
|
|
}, 16);
|
|
}
|
|
|
|
// Reusable typewriter function with custom delays
|
|
function typewriterLines(lines, targetElem, onComplete, charDelay, lineDelay, endCharDelay) {
|
|
charDelay = charDelay || 60;
|
|
lineDelay = lineDelay || 500;
|
|
let currentLine = 0;
|
|
let currentChar = 0;
|
|
let totalChars = 0;
|
|
let charsTyped = 0;
|
|
|
|
// Calculate total characters if using accelerating speed
|
|
if (endCharDelay !== null) {
|
|
totalChars = 0;
|
|
for (let i = 0; i < lines.length; i++) {
|
|
totalChars += lines[i].length;
|
|
}
|
|
}
|
|
|
|
function getDelay() {
|
|
if (endCharDelay === null || totalChars === 0) return charDelay;
|
|
const progress = charsTyped / totalChars;
|
|
return charDelay + (endCharDelay - charDelay) * progress;
|
|
}
|
|
|
|
function tick() {
|
|
if (skipAnimations) {
|
|
let remainingText = '';
|
|
for (let i = currentLine; i < lines.length; i++) {
|
|
remainingText += lines[i];
|
|
}
|
|
targetElem.textContent = remainingText;
|
|
onComplete && onComplete();
|
|
return;
|
|
}
|
|
|
|
if (currentLine >= lines.length) {
|
|
onComplete && onComplete();
|
|
return;
|
|
}
|
|
|
|
targetElem.style.visibility = 'visible';
|
|
const lineText = lines[currentLine];
|
|
|
|
if (currentChar < lineText.length) {
|
|
targetElem.textContent += lineText[currentChar];
|
|
currentChar++;
|
|
charsTyped++;
|
|
setTimeout(tick, getDelay());
|
|
} else {
|
|
currentLine++;
|
|
currentChar = 0;
|
|
setTimeout(tick, lineDelay);
|
|
}
|
|
}
|
|
tick();
|
|
}
|
|
|
|
// Scene 1 typewriter
|
|
const scene1lines = [
|
|
"YOU ARE NOT IMAGINING THINGS",
|
|
"THE SYNCHRONICITIES YOU ARE EXPERIENCING HAVE ALWAYS BEEN THERE",
|
|
"THE ONLY THING THAT HAS CHANGED IS YOUR AWARENESS OF THEM"
|
|
];
|
|
let scene1LineIndex = 0;
|
|
let scene1Timeouts = [];
|
|
|
|
function typewriter() {
|
|
if (scene1LineIndex >= scene1lines.length) {
|
|
showButton();
|
|
return;
|
|
}
|
|
|
|
const lineElem = document.getElementById('line' + (scene1LineIndex + 1));
|
|
lineElem.style.visibility = 'visible';
|
|
const lineText = scene1lines[scene1LineIndex];
|
|
let charIndex = 0;
|
|
|
|
function typeChar() {
|
|
if (charIndex < lineText.length) {
|
|
lineElem.textContent += lineText[charIndex];
|
|
charIndex++;
|
|
const t = setTimeout(typeChar, 60);
|
|
scene1Timeouts.push(t);
|
|
} else {
|
|
scene1LineIndex++;
|
|
const t = setTimeout(typewriter, 500);
|
|
scene1Timeouts.push(t);
|
|
}
|
|
}
|
|
typeChar();
|
|
}
|
|
|
|
function skipScene1() {
|
|
scene1Timeouts.forEach(t => clearTimeout(t));
|
|
scene1Timeouts = [];
|
|
document.getElementById('line1').textContent = scene1lines[0];
|
|
document.getElementById('line2').textContent = scene1lines[1];
|
|
document.getElementById('line3').textContent = scene1lines[2];
|
|
document.getElementById('line1').style.visibility = 'visible';
|
|
document.getElementById('line2').style.visibility = 'visible';
|
|
document.getElementById('line3').style.visibility = 'visible';
|
|
showButton();
|
|
}
|
|
|
|
// Show "FOLLOW THEM" button
|
|
function showButton() {
|
|
const btn = document.getElementById('followBtn');
|
|
btn.style.visibility = 'visible';
|
|
let opacity = 0;
|
|
const fadeIn = setInterval(() => {
|
|
opacity += 0.05;
|
|
if (opacity >= 1) {
|
|
opacity = 1;
|
|
clearInterval(fadeIn);
|
|
btn.style.pointerEvents = 'auto';
|
|
}
|
|
btn.style.opacity = opacity;
|
|
}, 30);
|
|
}
|
|
|
|
// Scene transition functions
|
|
function transitionToScene2() {
|
|
const canvas = document.getElementById('matrixCanvas');
|
|
const textContainer = document.getElementById('textContainer');
|
|
const btn = document.getElementById('followBtn');
|
|
const scene2 = document.getElementById('scene2');
|
|
|
|
let opacity = 1;
|
|
const fadeOut = setInterval(() => {
|
|
opacity -= 0.05;
|
|
if (opacity <= 0) {
|
|
opacity = 0;
|
|
clearInterval(fadeOut);
|
|
canvas.style.display = 'none';
|
|
textContainer.style.display = 'none';
|
|
btn.style.display = 'none';
|
|
loadScene2(scene2);
|
|
}
|
|
canvas.style.opacity = opacity;
|
|
textContainer.style.opacity = opacity;
|
|
btn.style.opacity = opacity;
|
|
}, 30);
|
|
}
|
|
|
|
// Scene 2 loader: calm typing sequence
|
|
function blinkCursor(cursor, times, callback) {
|
|
cursor.style.display = 'inline-block';
|
|
cursor.style.opacity = '1';
|
|
let count = 0;
|
|
let visible = true;
|
|
const interval = setInterval(() => {
|
|
visible = !visible;
|
|
cursor.style.opacity = visible ? '1' : '0';
|
|
count++;
|
|
if (count >= times * 2) {
|
|
clearInterval(interval);
|
|
cursor.style.display = 'none';
|
|
callback && callback();
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
function typeCalmly(elem, text, callback, minDelay, maxDelay, timeoutArray) {
|
|
let i = 0;
|
|
const total = text.length;
|
|
|
|
function typeChar() {
|
|
if (i >= total) {
|
|
callback && callback();
|
|
return;
|
|
}
|
|
elem.textContent += text[i];
|
|
i++;
|
|
const progress = i / total;
|
|
const dMin = minDelay || 35;
|
|
const dMax = maxDelay || 65;
|
|
const delay = dMin + progress * progress * (dMax - dMin);
|
|
const id = setTimeout(typeChar, delay);
|
|
timeoutArray && timeoutArray.push(id);
|
|
}
|
|
typeChar();
|
|
}
|
|
|
|
function typeHtmlCalmly(elem, html, callback, minDelay, maxDelay, timeoutArray) {
|
|
let i = 0;
|
|
const total = html.length;
|
|
function typeChar() {
|
|
if (i >= total) { callback && callback(); return; }
|
|
elem.innerHTML += html[i];
|
|
i++;
|
|
const progress = i / total;
|
|
const dMin = minDelay || 35;
|
|
const dMax = maxDelay || 65;
|
|
const delay = dMin + progress * progress * (dMax - dMin);
|
|
const id = setTimeout(typeChar, delay);
|
|
timeoutArray && timeoutArray.push(id);
|
|
}
|
|
typeChar();
|
|
}
|
|
|
|
function loadScene2(sceneElem) {
|
|
sceneElem.style.display = 'flex';
|
|
const linesContainer = document.getElementById('scene2Lines');
|
|
const line1 = document.getElementById('scene2Line1');
|
|
const line2 = document.getElementById('scene2Line2');
|
|
const message = document.getElementById('scene2Message');
|
|
const message2 = document.getElementById('scene2Message2');
|
|
const cursor = document.getElementById('scene2Cursor');
|
|
const cursor2 = document.getElementById('scene2Cursor2');
|
|
const btn = document.getElementById('whatIsLabBtn');
|
|
|
|
let opacity = 0;
|
|
const fadeIn = setInterval(() => {
|
|
opacity += 0.05;
|
|
if (opacity >= 1) {
|
|
opacity = 1;
|
|
clearInterval(fadeIn);
|
|
|
|
linesContainer.style.display = 'flex';
|
|
line1.style.visibility = 'visible';
|
|
|
|
blinkCursor(cursor, 3, () => {
|
|
typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
|
|
cursor.style.display = 'none';
|
|
line2.style.display = 'flex';
|
|
|
|
blinkCursor(cursor2, 1, () => {
|
|
typeCalmly(message2, "TO LAB 484", () => {
|
|
setTimeout(() => {
|
|
btn.style.visibility = 'visible';
|
|
let btnOpacity = 0;
|
|
const btnFadeIn = setInterval(() => {
|
|
btnOpacity += 0.05;
|
|
if (btnOpacity >= 1) {
|
|
btnOpacity = 1;
|
|
clearInterval(btnFadeIn);
|
|
btn.style.pointerEvents = 'auto';
|
|
}
|
|
btn.style.opacity = btnOpacity;
|
|
}, 30);
|
|
}, 1000);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
sceneElem.style.opacity = opacity;
|
|
}, 30);
|
|
}
|
|
|
|
// Scene transition helper
|
|
function transitionToScene(fromId, loader, toId) {
|
|
const from = document.getElementById(fromId);
|
|
from.style.display = 'none';
|
|
const to = document.getElementById(toId);
|
|
loader(to);
|
|
}
|
|
|
|
// Scene 3 loader
|
|
function loadScene3(sceneElem) {
|
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
|
scene3TypewriterTimeouts = [];
|
|
sceneElem.style.display = 'flex';
|
|
const title = document.getElementById('scene3Title');
|
|
const textContainer = document.getElementById('scene3Text');
|
|
|
|
let opacity = 0;
|
|
const fadeIn = setInterval(() => {
|
|
opacity += 0.05;
|
|
if (opacity >= 1) {
|
|
opacity = 1;
|
|
clearInterval(fadeIn);
|
|
|
|
setTimeout(() => {
|
|
title.classList.add('visible');
|
|
}, 300);
|
|
|
|
setTimeout(() => {
|
|
typeCalmly(textContainer, "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT", () => {
|
|
setTimeout(() => {
|
|
textContainer.textContent += "\n\n\n\n\n";
|
|
typeCalmly(textContainer, "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS", () => {
|
|
textContainer.textContent += "\n\n\n\n\n";
|
|
typeCalmly(textContainer, "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED", () => {
|
|
setTimeout(() => {
|
|
const row = document.getElementById('scene3ChoiceRow');
|
|
row.style.display = 'flex';
|
|
const btns = row.querySelectorAll('.scene3ChoiceBtn');
|
|
btns.forEach((btn, i) => {
|
|
setTimeout(() => {
|
|
btn.style.opacity = '1';
|
|
btn.style.pointerEvents = 'auto';
|
|
}, i * 200);
|
|
});
|
|
}, 1000);
|
|
}, undefined, undefined, scene3TypewriterTimeouts);
|
|
}, undefined, undefined, scene3TypewriterTimeouts);
|
|
}, 2000);
|
|
}, undefined, undefined, scene3TypewriterTimeouts);
|
|
}, 800);
|
|
}
|
|
sceneElem.style.opacity = opacity;
|
|
}, 30);
|
|
}
|
|
|
|
// Scene 4 helpers
|
|
function buildTimeline(tlElem, activeIdx) {
|
|
const years = ['1900', '1933', '1934', '1971', '2009'];
|
|
tlElem.innerHTML = '';
|
|
years.forEach((y, i) => {
|
|
const span = document.createElement('span');
|
|
span.className = 'tl-year' + (i < activeIdx ? ' dim' : '') + (i === activeIdx ? ' active' : '');
|
|
span.textContent = y;
|
|
tlElem.appendChild(span);
|
|
});
|
|
tlElem.classList.add('visible');
|
|
}
|
|
|
|
function showNextBtn(id) {
|
|
const btn = document.getElementById(id);
|
|
btn.style.visibility = 'visible';
|
|
let o = 0;
|
|
const fi = setInterval(() => {
|
|
o += 0.05; if (o >= 1) { o = 1; clearInterval(fi); btn.style.pointerEvents = 'auto'; }
|
|
btn.style.opacity = o;
|
|
}, 30);
|
|
}
|
|
|
|
// Scene 4a — HOOK + 1900 Gold Standard
|
|
function loadScene4a(sceneElem) {
|
|
s4c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=sceneElem.querySelector('.scene4text');
|
|
const vis=sceneElem.querySelector('.s4visual');
|
|
const tl=sceneElem.querySelector('.s4tl');
|
|
txt.innerHTML='';
|
|
vis.className='s4visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
buildTimeline(tl,0);
|
|
typeHtmlCalmly(txt,"IMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS. THAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeHtmlCalmly(txt,"IN 1900, THE GOLD STANDARD ACT WAS PASSED. EVERY DOLLAR WAS BACKED BY GOLD — REAL, TANGIBLE, TRUSTWORTHY. ",()=>{
|
|
const span=document.createElement('span');
|
|
txt.appendChild(span);
|
|
typeHtmlCalmly(span,"THE GOLD STANDARD ACT OF 1900",()=>{
|
|
const link=document.createElement('a');
|
|
link.href='https://www.gold.org/sites/default/files/documents/1900mar14.pdf';
|
|
link.target='_blank';
|
|
link.textContent=span.textContent;
|
|
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
|
span.replaceWith(link);
|
|
showNextBtn('next4a');
|
|
},undefined,undefined,s4c);
|
|
},undefined,undefined,s4c);
|
|
},1500);
|
|
s4c.push(t1);
|
|
},undefined,undefined,s4c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
// Scene 4b — 1933 ORDER 6102
|
|
function loadScene4b(sceneElem) {
|
|
s4c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=sceneElem.querySelector('.scene4text');
|
|
const vis=sceneElem.querySelector('.s4visual');
|
|
const tl=sceneElem.querySelector('.s4tl');
|
|
txt.innerHTML='';
|
|
vis.className='s4visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
buildTimeline(tl,1);
|
|
typeHtmlCalmly(txt,"ON APRIL 5, 1933, ",()=>{
|
|
const link=document.createElement('a');
|
|
link.href='https://www.usmoneyreserve.com/resources/videos/transcripts/executive-order-6102-did-you-know/';
|
|
link.target='_blank';
|
|
link.textContent='ORDER 6102';
|
|
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
|
txt.appendChild(link);
|
|
typeHtmlCalmly(txt," MADE IT A CRIME TO HOLD GOLD. CITIZENS WERE FORCED TO TURN IN THEIR GOLD IN EXCHANGE FOR PAPER DOLLARS.",()=>{
|
|
showNextBtn('next4b');
|
|
},undefined,undefined,s4c);
|
|
},undefined,undefined,s4c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
// Scene 4c — 1934 Gold Reserve Act + 69%
|
|
function loadScene4c(sceneElem) {
|
|
s4c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=sceneElem.querySelector('.scene4text');
|
|
const vis=sceneElem.querySelector('.s4visual');
|
|
const tl=sceneElem.querySelector('.s4tl');
|
|
txt.innerHTML='';
|
|
vis.className='s4visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
buildTimeline(tl,2);
|
|
typeHtmlCalmly(txt,"AFTER FORCING PEOPLE TO TURN IN THEIR GOLD, THE GOVERNMENT PASSED THE ",()=>{
|
|
const link=document.createElement('a');
|
|
link.href='https://www.federalreservehistory.org/essays/gold-reserve-act';
|
|
link.target='_blank';
|
|
link.textContent='THE 1934 GOLD RESERVE ACT';
|
|
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
|
txt.appendChild(link);
|
|
typeHtmlCalmly(txt," AND GAVE THE U.S. TREASURY CONTROL OF THE GOLD.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeHtmlCalmly(txt,"PEOPLE WERE PAID $20.67/OZ. THE GOVT THEN REVALUED GOLD TO $35/OZ.",()=>{
|
|
const t2=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
vis.innerHTML='<div class="callout-box">⚠ $20.67/OZ → $35/OZ = 69% STOLEN OVERNIGHT ⚠</div>';
|
|
vis.classList.add('visible');
|
|
showNextBtn('next4c');
|
|
},800);
|
|
s4c.push(t2);
|
|
},undefined,undefined,s4c);
|
|
},1200);
|
|
s4c.push(t1);
|
|
},undefined,undefined,s4c);
|
|
},undefined,undefined,s4c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
// Scene 4d — 1971 Nixon shock + coin visual
|
|
function loadScene4d(sceneElem) {
|
|
s4c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=sceneElem.querySelector('.scene4text');
|
|
const vis=sceneElem.querySelector('.s4visual');
|
|
const tl=sceneElem.querySelector('.s4tl');
|
|
txt.innerHTML='';
|
|
vis.className='s4visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
buildTimeline(tl,3);
|
|
typeHtmlCalmly(txt,"THE PAPER DOLLAR COULD STILL BE EXCHANGED FOR GOLD, BUT ON ",()=>{
|
|
const link=document.createElement('a');
|
|
link.href='https://www.federalreservehistory.org/essays/gold-convertibility-ends';
|
|
link.target='_blank';
|
|
link.textContent='1971, PRESIDENT NIXON REMOVED THAT OPTION';
|
|
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
|
txt.appendChild(link);
|
|
typeHtmlCalmly(txt,", THE PRICE OF GOLD SURGED TO $835-850/OZ.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeHtmlCalmly(txt,"THE DOLLAR LOST 96% OF ITS PURCHASING POWER AGAINST REAL MONEY.",()=>{
|
|
const t2=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
let html='<div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">VALUE OF $1 SINCE 1971</div><div class="coin-grid">';
|
|
for(let i=0;i<100;i++){
|
|
const c=i<4?'gold':'';
|
|
html+='<div class="coin '+c+'"></div>';
|
|
}
|
|
html+='</div><div style="text-align:center;margin-top:0.5rem;font-size:0.75rem;color:#00ff00;">~96% PURCHASING POWER LOST</div>';
|
|
vis.innerHTML=html;
|
|
vis.classList.add('visible');
|
|
showNextBtn('next4d');
|
|
},800);
|
|
s4c.push(t2);
|
|
},undefined,undefined,s4c);
|
|
},1200);
|
|
s4c.push(t1);
|
|
},undefined,undefined,s4c);
|
|
},undefined,undefined,s4c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
// Scene 4e — Bitcoin closing + comparison table + punch cards
|
|
function loadScene4e(sceneElem) {
|
|
s4c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=sceneElem.querySelector('.scene4text');
|
|
const vis=sceneElem.querySelector('.s4visual');
|
|
const tl=sceneElem.querySelector('.s4tl');
|
|
txt.innerHTML='';
|
|
vis.className='s4visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
buildTimeline(tl,4);
|
|
typeHtmlCalmly(txt,"BITCOIN HAS BEEN CALLED ",()=>{
|
|
const link=document.createElement('a');
|
|
link.href='https://www.forbes.com/sites/digital-assets/2024/12/08/us-treasury-names-bitcoin-digital-gold-after-price-explosion/';
|
|
link.target='_blank';
|
|
link.textContent='DIGITAL GOLD';
|
|
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
|
txt.appendChild(link);
|
|
typeHtmlCalmly(txt,". BUT UNLIKE GOLD, NO ONE CAN TOUCH THIS.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
vis.innerHTML=
|
|
'<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
|
|
+'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>SUPPLY CAP?</td><td class="no">❌ NO</td><td class="yes">✅ 21M</td></tr>'
|
|
+'<tr><td>TRUST MODEL</td><td>GOVERNMENT</td><td>CODE</td></tr>'
|
|
+'</table>'
|
|
+'<div class="punch-row">'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO PRESIDENT<br>CAN BAN IT</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO CONGRESS<br>CAN INFLATE IT</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO BANK<br>CAN FREEZE IT</span></div>'
|
|
+'</div>';
|
|
vis.classList.add('visible');
|
|
},1200);
|
|
s4c.push(t1);
|
|
},undefined,undefined,s4c);
|
|
},undefined,undefined,s4c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
// Scene 5 — BTC vs. Altcoins comparison
|
|
function loadScene5(sceneElem) {
|
|
s5c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=document.getElementById('s5Text');
|
|
const vis=document.getElementById('s5Visual');
|
|
txt.innerHTML='';
|
|
vis.className='s5visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
vis.classList.add('visible');
|
|
buildS5Table(vis);
|
|
typeCalmly(txt,"BUT SEVERAL COINS COMPETE IN DIFFERENT NICHES — PRIVACY, SPEED, PROGRAMMABILITY, OR STORE-OF-VALUE NARRATIVES.",()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeCalmly(txt,"NONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.",()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeCalmly(txt,"THE NETWORK EFFECT IS INSURMOUNTABLE.",()=>{
|
|
txt.innerHTML+="\n\n";
|
|
typeCalmly(txt,"HERE IS THE HONEST COMPARISON.",()=>{
|
|
const t6=setTimeout(()=>{
|
|
document.getElementById('returnFromScene5').style.cssText='';
|
|
showNextBtn('returnFromScene5');
|
|
},400);
|
|
s5c.push(t6);
|
|
},8,20,s5c);
|
|
},8,20,s5c);
|
|
},8,20,s5c);
|
|
},8,20,s5c);
|
|
},300);
|
|
s5c.push(t1);
|
|
},8,20,s5c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
function buildS5Table(vis) {
|
|
const rows=[
|
|
['NICHE','<span class="nickname">SOUND MONEY</span>','PROGRAMMABILITY','PRIVACY','PAYMENTS','SPEED'],
|
|
['DECENTRALIZED?','✅ YES','⚠️ PARTIAL','✅ YES','❌ RIPPLE LABS','❌ VC/FOUNDATION'],
|
|
['FAIR LAUNCH?','✅ YES','❌ 72M PREMINE','✅ YES','❌ 100% PREMINE','❌ PREMINE'],
|
|
['SUPPLY CAP','✅ 21M','❌ NO CAP','❌ TAIL EMISSION','❌ NO CAP','❌ NO CAP'],
|
|
['UNCENSORABLE?','✅ YES','❌ NO','✅ YES','❌ NO','❌ NO'],
|
|
];
|
|
let html='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>';
|
|
for(let r=0;r<rows.length;r++){
|
|
const cells=rows[r];
|
|
html+='<tr>';
|
|
for(let c=0;c<cells.length;c++){
|
|
html+='<td'+(c===1?' class="btc-col"':'')+'>'+cells[c]+'</td>';
|
|
}
|
|
html+='</tr>';
|
|
}
|
|
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">🏆</span><span class="punch-text">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div><div class="punch-card"><span class="punch-icon">🔒</span><span class="punch-text">MOST SECURE —<br>MOST HASH POWER BY FAR</span></div><div class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div></div>';
|
|
vis.innerHTML+=html;
|
|
}
|
|
|
|
function buildS6DesktopTable() {
|
|
const rows=[
|
|
['PROPERTY','<span class="nickname">LINUX</span>','macOS','WINDOWS','CHROMEOS'],
|
|
['OPEN SOURCE?','✅ YES','❌ NO','❌ NO','❌ NO'],
|
|
['NO TELEMETRY?','✅ YES','❌ NO','❌ NO','❌ NO'],
|
|
['USER FREEDOM','✅ YES','❌ NO','❌ NO','❌ NO'],
|
|
['FREE?','✅ YES','❌ NO','❌ NO','✅ YES'],
|
|
['RESPECTS PRIVACY?','✅ YES','❌ PARTIAL','❌ NO','❌ NO'],
|
|
];
|
|
let html='<div class="s6section"><div class="s6section-title">DESKTOP OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="linux-col">LINUX</th><th>macOS</th><th>WINDOWS</th><th>CHROMEOS</th></tr>';
|
|
for(let r=0;r<rows.length;r++){
|
|
const cells=rows[r];
|
|
html+='<tr>';
|
|
for(let c=0;c<cells.length;c++){
|
|
html+='<td'+(c===1?' class="linux-col"':'')+'>'+cells[c]+'</td>';
|
|
}
|
|
html+='</tr>';
|
|
}
|
|
html+='</table></div>';
|
|
return html;
|
|
}
|
|
|
|
function buildS6MobileTable() {
|
|
const rows=[
|
|
['PROPERTY','<span class="nickname">GRAPHENEOS</span>','ANDROID','iOS'],
|
|
['OPEN SOURCE?','✅ YES','✅ YES','❌ NO'],
|
|
['NO GOOGLE TRACKING?','✅ YES','❌ NO','✅ YES'],
|
|
['PRIVACY BY DEFAULT?','✅ YES','❌ NO','❌ PARTIAL'],
|
|
['DE-GOOGLED?','✅ YES','❌ NO','N/A'],
|
|
['SECURITY FOCUSED?','✅ YES','❌ PARTIAL','✅ YES'],
|
|
];
|
|
let html='<div class="s6section"><div class="s6section-title">MOBILE OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="graphene-col">GRAPHENEOS</th><th>ANDROID</th><th>iOS</th></tr>';
|
|
for(let r=0;r<rows.length;r++){
|
|
const cells=rows[r];
|
|
html+='<tr>';
|
|
for(let c=0;c<cells.length;c++){
|
|
html+='<td'+(c===1?' class="graphene-col"':'')+'>'+cells[c]+'</td>';
|
|
}
|
|
html+='</tr>';
|
|
}
|
|
html+='</table></div>';
|
|
return html;
|
|
}
|
|
|
|
function loadScene6(sceneElem) {
|
|
s6c=[];
|
|
sceneElem.style.display='flex';
|
|
const txt=document.getElementById('s6Text');
|
|
const vis=document.getElementById('s6Visual');
|
|
txt.innerHTML='';
|
|
vis.className='s6visual';
|
|
let o=0;
|
|
const fi=setInterval(()=>{
|
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
|
typeCalmly(txt,"THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.",()=>{
|
|
const t1=setTimeout(()=>{
|
|
txt.innerHTML+="\n\n";
|
|
vis.classList.add('visible');
|
|
vis.innerHTML='';
|
|
vis.innerHTML+=buildS6DesktopTable();
|
|
typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
|
|
txt.innerHTML+="\n\n\n";
|
|
vis.innerHTML+=buildS6MobileTable();
|
|
typeCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
|
|
txt.innerHTML+="\n\n";
|
|
vis.innerHTML+='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
|
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
|
+'</div></div>';
|
|
typeCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
|
|
const t6=setTimeout(()=>{
|
|
document.getElementById('returnFromScene6').style.cssText='';
|
|
showNextBtn('returnFromScene6');
|
|
},400);
|
|
s6c.push(t6);
|
|
},8,20,s6c);
|
|
},8,20,s6c);
|
|
},8,20,s6c);
|
|
},300);
|
|
s6c.push(t1);
|
|
},8,20,s6c);
|
|
}
|
|
sceneElem.style.opacity=o;
|
|
},30);
|
|
}
|
|
|
|
let s4c = [];
|
|
let s5c = [];
|
|
let s6c = [];
|
|
|
|
// Initialize on load
|
|
window.addEventListener('load', () => {
|
|
setTimeout(crtFlicker, 1500);
|
|
});
|
|
|
|
// Button click handlers
|
|
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
|
|
document.getElementById('whatIsLabBtn').addEventListener('click', () => {
|
|
transitionToScene('scene2', loadScene3, 'scene3');
|
|
});
|
|
document.getElementById('yourMoneyBtn').addEventListener('click', () => {
|
|
transitionToScene('scene3', loadScene4a, 'scene4a');
|
|
});
|
|
document.getElementById('yourTechBtn').addEventListener('click', () => {
|
|
transitionToScene('scene3', loadScene6, 'scene6');
|
|
});
|
|
document.getElementById('next4a').addEventListener('click', () => {
|
|
document.getElementById('scene4a').style.display = 'none';
|
|
loadScene4b(document.getElementById('scene4b'));
|
|
});
|
|
document.getElementById('next4b').addEventListener('click', () => {
|
|
document.getElementById('scene4b').style.display = 'none';
|
|
loadScene4c(document.getElementById('scene4c'));
|
|
});
|
|
document.getElementById('next4c').addEventListener('click', () => {
|
|
document.getElementById('scene4c').style.display = 'none';
|
|
loadScene4d(document.getElementById('scene4d'));
|
|
});
|
|
document.getElementById('next4d').addEventListener('click', () => {
|
|
document.getElementById('scene4d').style.display = 'none';
|
|
loadScene4e(document.getElementById('scene4e'));
|
|
});
|
|
document.getElementById('next4e').addEventListener('click', () => {
|
|
document.getElementById('scene4e').style.display = 'none';
|
|
loadScene5(document.getElementById('scene5'));
|
|
});
|
|
document.getElementById('returnFromScene5').addEventListener('click', () => {
|
|
document.getElementById('scene5').style.display = 'none';
|
|
const s3 = document.getElementById('scene3');
|
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
|
scene3TypewriterTimeouts = [];
|
|
s3.style.display = 'flex';
|
|
s3.style.opacity = '1';
|
|
document.getElementById('scene3Title').classList.add('visible');
|
|
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
|
const row = document.getElementById('scene3ChoiceRow');
|
|
row.style.display = 'flex';
|
|
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
|
btn.style.opacity = '1';
|
|
btn.style.pointerEvents = 'auto';
|
|
});
|
|
});
|
|
|
|
document.getElementById('returnFromScene6').addEventListener('click', () => {
|
|
document.getElementById('scene6').style.display = 'none';
|
|
const s3 = document.getElementById('scene3');
|
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
|
scene3TypewriterTimeouts = [];
|
|
s3.style.display = 'flex';
|
|
s3.style.opacity = '1';
|
|
document.getElementById('scene3Title').classList.add('visible');
|
|
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
|
const row = document.getElementById('scene3ChoiceRow');
|
|
row.style.display = 'flex';
|
|
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
|
btn.style.opacity = '1';
|
|
btn.style.pointerEvents = 'auto';
|
|
});
|
|
});
|
|
|
|
// Keyboard shortcuts for testing
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
// Escape alone: Skip current animation to text
|
|
|
|
// Scene 1 skip (rain or typewriter)
|
|
const textContainer = document.getElementById('textContainer');
|
|
const canvas = document.getElementById('matrixCanvas');
|
|
if (textContainer.style.visibility !== 'visible') {
|
|
canvas.style.opacity = '0.15';
|
|
skipScene1();
|
|
}
|
|
|
|
// Scene 2 skip (calm typing)
|
|
const scene2 = document.getElementById('scene2');
|
|
const s2Cursor = document.getElementById('scene2Cursor');
|
|
const s2Cursor2 = document.getElementById('scene2Cursor2');
|
|
const s2Message = document.getElementById('scene2Message');
|
|
const s2Message2 = document.getElementById('scene2Message2');
|
|
const s2Line2 = document.getElementById('scene2Line2');
|
|
const s2Btn = document.getElementById('whatIsLabBtn');
|
|
if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
|
|
s2Cursor.style.display = 'none';
|
|
s2Cursor2.style.display = 'none';
|
|
s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE...';
|
|
s2Line2.style.display = 'flex';
|
|
s2Message2.textContent = 'TO LAB 484';
|
|
s2Btn.style.visibility = 'visible';
|
|
s2Btn.style.opacity = '1';
|
|
s2Btn.style.pointerEvents = 'auto';
|
|
}
|
|
|
|
// Scene 3 skip (incubator text + choice buttons)
|
|
const scene3 = document.getElementById('scene3');
|
|
const s3ChoiceRow = document.getElementById('scene3ChoiceRow');
|
|
if (scene3.style.display === 'flex' && s3ChoiceRow.style.display !== 'flex') {
|
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
|
scene3TypewriterTimeouts = [];
|
|
document.getElementById('scene3Text').textContent =
|
|
"IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n"
|
|
+ "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n"
|
|
+ "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
|
s3ChoiceRow.style.display = 'flex';
|
|
s3ChoiceRow.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
|
btn.style.opacity = '1';
|
|
btn.style.pointerEvents = 'auto';
|
|
});
|
|
}
|
|
|
|
// Scene 4 skip (sub-scenes 4a-4e)
|
|
const s4ids = ['scene4a','scene4b','scene4c','scene4d','scene4e'];
|
|
for (let si=0; si<s4ids.length; si++) {
|
|
const s4 = document.getElementById(s4ids[si]);
|
|
if (s4.style.display === 'flex') {
|
|
s4c.forEach(t => clearTimeout(t)); s4c = [];
|
|
const txt = s4.querySelector('.scene4text');
|
|
const tl = s4.querySelector('.s4tl');
|
|
buildTimeline(tl, si);
|
|
if (si===0) {
|
|
txt.innerHTML = "IMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS. THAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.\n\nIN 1900, THE GOLD STANDARD ACT WAS PASSED. EVERY DOLLAR WAS BACKED BY GOLD — REAL, TANGIBLE, TRUSTWORTHY. <a href=\"https://www.gold.org/sites/default/files/documents/1900mar14.pdf\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">THE GOLD STANDARD ACT OF 1900</a>";
|
|
document.getElementById('next4a').style.cssText = '';
|
|
showNextBtn('next4a');
|
|
} else if (si===1) {
|
|
txt.innerHTML = "ON APRIL 5, 1933, <a href=\"https://www.usmoneyreserve.com/resources/videos/transcripts/executive-order-6102-did-you-know/\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">ORDER 6102</a> MADE IT A CRIME TO HOLD GOLD. CITIZENS WERE FORCED TO TURN IN THEIR GOLD IN EXCHANGE FOR PAPER DOLLARS.";
|
|
document.getElementById('next4b').style.cssText = '';
|
|
showNextBtn('next4b');
|
|
} else if (si===2) {
|
|
txt.innerHTML = "AFTER FORCING PEOPLE TO TURN IN THEIR GOLD, THE GOVERNMENT PASSED THE <a href=\"https://www.federalreservehistory.org/essays/gold-reserve-act\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">THE 1934 GOLD RESERVE ACT</a> AND GAVE THE U.S. TREASURY CONTROL OF THE GOLD.\n\nPEOPLE WERE PAID $20.67/OZ. THE GOVT THEN REVALUED GOLD TO $35/OZ.\n\n";
|
|
s4.querySelector('.s4visual').innerHTML='<div class="callout-box">⚠ $20.67/OZ → $35/OZ = 69% STOLEN OVERNIGHT ⚠</div>';
|
|
s4.querySelector('.s4visual').classList.add('visible');
|
|
document.getElementById('next4c').style.cssText = '';
|
|
showNextBtn('next4c');
|
|
} else if (si===3) {
|
|
txt.innerHTML = "THE PAPER DOLLAR COULD STILL BE EXCHANGED FOR GOLD, BUT ON <a href=\"https://www.federalreservehistory.org/essays/gold-convertibility-ends\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">1971, PRESIDENT NIXON REMOVED THAT OPTION</a>, THE PRICE OF GOLD SURGED TO $835-850/OZ.\n\nTHE DOLLAR LOST 96% OF ITS PURCHASING POWER AGAINST REAL MONEY.\n\n";
|
|
let html='<div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">VALUE OF $1 SINCE 1971</div><div class="coin-grid">';
|
|
for(let i=0;i<100;i++) html+='<div class="coin '+(i<4?'gold':'')+'"></div>';
|
|
html+='</div><div style="text-align:center;margin-top:0.5rem;font-size:0.75rem;color:#00ff00;">~96% PURCHASING POWER LOST</div>';
|
|
s4.querySelector('.s4visual').innerHTML=html;
|
|
s4.querySelector('.s4visual').classList.add('visible');
|
|
document.getElementById('next4d').style.cssText = '';
|
|
showNextBtn('next4d');
|
|
} else if (si===4) {
|
|
txt.innerHTML = "BITCOIN HAS BEEN CALLED <a href=\"https://www.forbes.com/sites/digital-assets/2024/12/08/us-treasury-names-bitcoin-digital-gold-after-price-explosion/\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">DIGITAL GOLD</a>. BUT UNLIKE GOLD, NO ONE CAN TOUCH THIS.";
|
|
s4.querySelector('.s4visual').innerHTML=
|
|
'<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
|
|
+'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
|
|
+'<tr><td>SUPPLY CAP?</td><td class="no">❌ NO</td><td class="yes">✅ 21M</td></tr>'
|
|
+'<tr><td>TRUST MODEL</td><td>GOVERNMENT</td><td>CODE</td></tr>'
|
|
+'</table>'
|
|
+'<div class="punch-row">'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO PRESIDENT<br>CAN BAN IT</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO CONGRESS<br>CAN INFLATE IT</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO BANK<br>CAN FREEZE IT</span></div>'
|
|
+'</div>';
|
|
s4.querySelector('.s4visual').classList.add('visible');
|
|
document.getElementById('next4e').style.cssText = '';
|
|
showNextBtn('next4e');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scene 5 skip
|
|
const s5 = document.getElementById('scene5');
|
|
if (s5.style.display === 'flex') {
|
|
s5c.forEach(t => clearTimeout(t)); s5c = [];
|
|
const txt = document.getElementById('s5Text');
|
|
const vis = document.getElementById('s5Visual');
|
|
txt.innerHTML = "BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.\n\nBUT SEVERAL COINS COMPETE IN DIFFERENT NICHES — PRIVACY, SPEED, PROGRAMMABILITY, OR STORE-OF-VALUE NARRATIVES.\n\nNONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.\n\nTHE NETWORK EFFECT IS INSURMOUNTABLE.\n\nHERE IS THE HONEST COMPARISON.";
|
|
vis.innerHTML='<table class="comp-table" id="s5table"><tr><th></th><th class="btc-col">BTC</th><th>ETH</th><th>XMR</th><th>XRP</th><th>SOL</th></tr>'
|
|
+'<tr><td>NICHE</td><td class="btc-col"><span class="nickname">SOUND MONEY</span></td><td>PROGRAMMABILITY</td><td>PRIVACY</td><td>PAYMENTS</td><td>SPEED</td></tr>'
|
|
+'<tr><td>DECENTRALIZED?</td><td class="btc-col">✅ YES</td><td>⚠️ PARTIAL</td><td>✅ YES</td><td>❌ RIPPLE LABS</td><td>❌ VC/FOUNDATION</td></tr>'
|
|
+'<tr><td>FAIR LAUNCH?</td><td class="btc-col">✅ YES</td><td>❌ 72M PREMINE</td><td>✅ YES</td><td>❌ 100% PREMINE</td><td>❌ PREMINE</td></tr>'
|
|
+'<tr><td>SUPPLY CAP</td><td class="btc-col">✅ 21M</td><td>❌ NO CAP</td><td>❌ TAIL EMISSION</td><td>❌ NO CAP</td><td>❌ NO CAP</td></tr>'
|
|
+'<tr><td>UNCENSORABLE?</td><td class="btc-col">✅ YES</td><td>❌ NO</td><td>✅ YES</td><td>❌ NO</td><td>❌ NO</td></tr>'
|
|
+'</table>'
|
|
+'<div class="punch-row">'
|
|
+'<div class="punch-card"><span class="punch-icon">🏆</span><span class="punch-text">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🔒</span><span class="punch-text">MOST SECURE —<br>MOST HASH POWER BY FAR</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div>'
|
|
+'</div>';
|
|
vis.classList.add('visible');
|
|
document.getElementById('returnFromScene5').style.cssText='';
|
|
showNextBtn('returnFromScene5');
|
|
}
|
|
|
|
// Scene 6 skip
|
|
const s6 = document.getElementById('scene6');
|
|
if (s6.style.display === 'flex') {
|
|
s6c.forEach(t => clearTimeout(t)); s6c = [];
|
|
const txt = document.getElementById('s6Text');
|
|
const vis = document.getElementById('s6Visual');
|
|
txt.innerHTML = "THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.\n\nDESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\n\nYOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
|
|
vis.innerHTML=buildS6DesktopTable()+buildS6MobileTable()+'<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
|
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
|
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
|
+'</div></div>';
|
|
vis.classList.add('visible');
|
|
document.getElementById('returnFromScene6').style.cssText='';
|
|
showNextBtn('returnFromScene6');
|
|
}
|
|
|
|
}
|
|
|
|
if (e.key === 'Delete') {
|
|
// Fast-forward to Scene 2
|
|
document.getElementById('matrixCanvas').style.display = 'none';
|
|
document.getElementById('textContainer').style.display = 'none';
|
|
document.getElementById('followBtn').style.display = 'none';
|
|
|
|
loadScene2(document.getElementById('scene2'));
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|