6798 lines
361 KiB
HTML
6798 lines
361 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<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;
|
||
overflow-y: auto;
|
||
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;
|
||
width: 100%;
|
||
}
|
||
|
||
/* Scene 4 sub-scenes */
|
||
.scene4sub {
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 2rem 2rem 5rem;
|
||
overflow-y: auto;
|
||
}
|
||
#scene4a {
|
||
justify-content: center;
|
||
}
|
||
#sceneM4 .s4visual {
|
||
margin-top: 0;
|
||
}
|
||
#sceneD4 .s4visual {
|
||
margin-top: 0;
|
||
}
|
||
#sceneI4 .s4visual {
|
||
margin-top: 0;
|
||
}
|
||
#scene10e .s4visual {
|
||
margin-top: 0;
|
||
}
|
||
#scene10e .btnNext {
|
||
padding: 0.4rem 2.5rem;
|
||
}
|
||
#scene4f .s4visual {
|
||
margin-top: 0;
|
||
}
|
||
#scene10g .s4visual {
|
||
margin-top: -0.8rem;
|
||
}
|
||
#scene10g .s4visual .comp-table {
|
||
margin-top: 0;
|
||
}
|
||
.scene4text {
|
||
white-space: pre-wrap;
|
||
text-align: center;
|
||
width: 100%;
|
||
max-width: 50rem;
|
||
line-height: 1.8;
|
||
}
|
||
.s4visual {
|
||
width: 100%;
|
||
max-width: 50rem;
|
||
margin-top: 1rem;
|
||
opacity: 0;
|
||
transition: opacity 1.2s ease;
|
||
text-align: center;
|
||
}
|
||
.s4visual.visible { opacity: 1; }
|
||
.s4visual .comp-table {
|
||
width: auto;
|
||
margin: 1rem auto 0;
|
||
}
|
||
|
||
/* Timeline */
|
||
.s4tl {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: 50rem;
|
||
margin-bottom: 1rem;
|
||
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 */
|
||
.btn-row {
|
||
position: fixed;
|
||
bottom: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 5;
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.btn-row .btnNext {
|
||
position: static;
|
||
transform: none;
|
||
margin: 0;
|
||
}
|
||
.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; }
|
||
.btnLab {
|
||
visibility: visible !important;
|
||
opacity: 0.5 !important;
|
||
pointer-events: auto !important;
|
||
}
|
||
.btnLab:hover { opacity: 1 !important; }
|
||
|
||
/* 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: 1rem;
|
||
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: center;
|
||
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;
|
||
text-align: center;
|
||
}
|
||
.s5visual.visible { opacity: 1; }
|
||
.s5visual .comp-table {
|
||
width: auto;
|
||
margin: 1rem auto 0;
|
||
}
|
||
|
||
/* 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 — Tech Hub */
|
||
#s6TechHub {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1.2rem;
|
||
}
|
||
.hub-title {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: #00ff00;
|
||
margin-bottom: 1rem;
|
||
opacity: 0;
|
||
transition: opacity 1.5s ease;
|
||
}
|
||
.hub-title.visible { opacity: 1; }
|
||
.hub-subtitle {
|
||
font-size: 1rem;
|
||
color: #007700;
|
||
margin-bottom: 0.5rem;
|
||
opacity: 0;
|
||
transition: opacity 1.5s ease;
|
||
}
|
||
.hub-subtitle.visible { opacity: 1; }
|
||
.hub-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
width: 100%;
|
||
max-width: 40rem;
|
||
padding: 1rem 2rem;
|
||
border: 1px solid #003300;
|
||
background: #000800;
|
||
border-radius: 4px;
|
||
opacity: 0;
|
||
transition: opacity 1s ease;
|
||
}
|
||
.hub-row.visible { opacity: 1; }
|
||
.hub-label {
|
||
color: #00ff00;
|
||
font-size: 1rem;
|
||
}
|
||
.hub-btn {
|
||
padding: 0.6rem 2rem;
|
||
font-size: 0.9rem;
|
||
background-color: #001100;
|
||
color: #00ff00;
|
||
border: 2px solid #00ff00;
|
||
cursor: pointer;
|
||
font-family: 'Courier New', monospace;
|
||
letter-spacing: 2px;
|
||
transition: background-color 0.2s ease;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
.hub-btn.visible {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.hub-btn:hover { background-color: #003300; }
|
||
.hub-return {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* Scene 7 — Desktop OS comparison */
|
||
.scene7text {
|
||
white-space: pre-wrap;
|
||
text-align: left;
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
line-height: 1.8;
|
||
}
|
||
.s7visual {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 1.5rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s7visual.visible { opacity: 1; }
|
||
|
||
/* Scene 8 — Mobile OS + decentralized internet */
|
||
.scene8text {
|
||
white-space: pre-wrap;
|
||
text-align: left;
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
line-height: 1.8;
|
||
}
|
||
.s8visual {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 1.5rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s8visual.visible { opacity: 1; }
|
||
#s9Text { text-align: center; }
|
||
.s9canvas {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 1.5rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s9canvas.visible { opacity: 1; }
|
||
#meshCanvas {
|
||
width: 100%;
|
||
height: 320px;
|
||
border: 1px solid #003300;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
.mesh-legend {
|
||
display: flex;
|
||
gap: 2rem;
|
||
justify-content: center;
|
||
margin-top: 0.8rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
.legend-item { display: flex; align-items: center; gap: 0.5rem; }
|
||
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
|
||
.legend-dot.online { background: #00ff00; }
|
||
.legend-dot.offline { background: #ff4444; }
|
||
.legend-dot.packet { background: #ffff00; }
|
||
.mesh-status {
|
||
text-align: center;
|
||
color: #007700;
|
||
font-size: 0.85rem;
|
||
margin-top: 0.5rem;
|
||
min-height: 1.5rem;
|
||
}
|
||
.s8canvas {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 0.8rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s8canvas.visible { opacity: 1; }
|
||
#phoneCanvas {
|
||
width: 100%;
|
||
height: 320px;
|
||
border: 1px solid #003300;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
|
||
.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; }
|
||
|
||
/* Scene 8b — Exfiltration Simulator */
|
||
#s8BtnRow {
|
||
position: fixed;
|
||
bottom: 5%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 5;
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
justify-content: center;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
#s8BtnRow .btnNext {
|
||
position: static;
|
||
transform: none;
|
||
margin: 0;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.s8bcanvas {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 0.8rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s8bcanvas.visible { opacity: 1; }
|
||
#exfilCanvas {
|
||
width: 100%;
|
||
height: 360px;
|
||
border: 1px solid #003300;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
.exfil-counter {
|
||
text-align: center;
|
||
color: #00ff00;
|
||
font-size: 1.1rem;
|
||
padding: 0.5rem;
|
||
min-height: 2rem;
|
||
font-weight: bold;
|
||
}
|
||
.exfil-legend {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 0.3rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
.exfil-legend-item { display: flex; align-items: center; gap: 0.3rem; }
|
||
.exfil-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
|
||
/* Scene 7 — Desktop OS interactive canvas */
|
||
#s7BtnRow, #s8BtnRow { position: fixed; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 1.5rem; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.5s ease; }
|
||
#s7BtnRow .btnNext, #s8BtnRow .btnNext { position: static; transform: none; margin: 0; visibility: visible; opacity: 1; pointer-events: auto; }
|
||
.s7canvas {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 0.8rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s7canvas.visible { opacity: 1; }
|
||
#deskCanvas {
|
||
width: 100%;
|
||
height: 320px;
|
||
border: 1px solid #003300;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
/* Scene 7b — Desktop Exfiltration */
|
||
.s7bcanvas {
|
||
width: 100%;
|
||
max-width: 55rem;
|
||
margin-top: 0.8rem;
|
||
opacity: 0;
|
||
transition: opacity 4s ease;
|
||
}
|
||
.s7bcanvas.visible { opacity: 1; }
|
||
#exfilDeskCanvas {
|
||
width: 100%;
|
||
height: 360px;
|
||
border: 1px solid #003300;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: block;
|
||
}
|
||
/* Scene Refs — References / Citations */
|
||
#sceneRefs {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
background: #000; color: #00ff00; z-index: 100;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
opacity: 0; pointer-events: none; transition: opacity 0.8s ease;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
#sceneRefs.visible { opacity: 1; pointer-events: auto; }
|
||
#sceneRefs .refs-content {
|
||
width: 80%; max-width: 50rem; max-height: 80vh; overflow-y: auto;
|
||
padding: 1rem; border: 1px solid #003300; border-radius: 4px;
|
||
background: #001000;
|
||
}
|
||
#sceneRefs h2 { text-align: center; margin-bottom: 1.5rem; color: #00ff00; font-size: 1.4rem; }
|
||
#sceneRefs ol { padding-left: 1.5rem; margin: 0; }
|
||
#sceneRefs li { margin-bottom: 0.8rem; line-height: 1.5; font-size: 0.85rem; }
|
||
#sceneRefs a { color: #00cc00; text-decoration: underline; }
|
||
#sceneRefs a:hover { color: #ffff00; }
|
||
#sceneRefs .refs-back { text-align: center; margin-top: 1.5rem; }
|
||
#sceneRefs .refs-back button {
|
||
background: #003300; color: #00ff00; border: 1px solid #00ff00;
|
||
padding: 0.6rem 2rem; font-family: 'Courier New', monospace; font-size: 1rem;
|
||
cursor: pointer; border-radius: 4px;
|
||
}
|
||
#sceneRefs .refs-back button:hover { background: #005500; }
|
||
|
||
/* YOUR FOOD overlay */
|
||
#foodOverlay {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
z-index: 200;
|
||
display: none; justify-content: center; align-items: center;
|
||
background: rgba(0,0,0,0.85);
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
#foodOverlay.visible { display: flex; }
|
||
#foodOverlay .food-box {
|
||
background: #000; border: 2px solid #00ff00;
|
||
padding: 2rem 3rem; text-align: center; border-radius: 4px;
|
||
}
|
||
#foodOverlay .food-title {
|
||
color: #00ff00; font-size: 1.2rem; margin-bottom: 1.5rem;
|
||
}
|
||
#foodOverlay .food-btn {
|
||
display: block; width: 100%;
|
||
padding: 0.8rem 2rem; margin: 0.5rem 0;
|
||
background: #001100; color: #00ff00;
|
||
border: 2px solid #00ff00; cursor: pointer;
|
||
font-family: 'Courier New', monospace; font-size: 1rem;
|
||
letter-spacing: 2px; transition: background 0.2s ease;
|
||
}
|
||
#foodOverlay .food-btn:hover { background: #003300; }
|
||
#foodOverlay .food-close {
|
||
margin-top: 1rem; background: none; border: none;
|
||
color: #007700; cursor: pointer;
|
||
font-family: 'Courier New', monospace; font-size: 0.85rem;
|
||
}
|
||
#foodOverlay .food-close:hover { color: #00ff00; }
|
||
|
||
/* Food links scene */
|
||
#sceneFoodLinks { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
|
||
#sceneFoodLinks .food-links-title { color:#00ff00; font-size:1.5rem; margin-bottom:1.5rem; }
|
||
#sceneFoodLinks .food-btn { display:block; width:100%; padding:0.8rem 2rem; margin:0.5rem 0; background:#001100; color:#00ff00; border:2px solid #00ff00; cursor:pointer; font-family:'Courier New',monospace; font-size:1rem; letter-spacing:2px; transition:background 0.2s ease; }
|
||
#sceneFoodLinks .food-btn:hover { background:#003300; }
|
||
|
||
/* View selector overlay */
|
||
#viewOverlay {
|
||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
z-index: 300; background: rgba(0,0,0,0.85);
|
||
display: flex; align-items: center; justify-content: center;
|
||
opacity: 0; pointer-events: none;
|
||
transition: opacity 0.6s ease;
|
||
}
|
||
#viewOverlay.visible { opacity: 1; pointer-events: auto; }
|
||
.viewOverlay-inner { text-align: center; }
|
||
.viewOverlay-title {
|
||
font-size: 2rem; font-weight: bold; color: #00ff00;
|
||
letter-spacing: 4px; margin-bottom: 0.5rem;
|
||
}
|
||
.viewOverlay-sub {
|
||
font-size: 1rem; color: #007700;
|
||
margin-bottom: 2rem; letter-spacing: 2px;
|
||
}
|
||
.viewOverlay-btns { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
|
||
.viewOverlay-btn {
|
||
padding: 1rem 2.5rem; font-size: 1rem;
|
||
background: #001100; color: #00ff00;
|
||
border: 2px solid #00ff00; cursor: pointer;
|
||
font-family: 'Courier New', monospace; letter-spacing: 3px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.viewOverlay-btn:hover { background: #003300; }
|
||
#viewDesktopWarning {
|
||
display: none; margin-top: 1.5rem;
|
||
flex-direction: column; align-items: center; gap: 1rem;
|
||
}
|
||
#viewDesktopWarning.visible { display: flex; }
|
||
.viewWarning-text {
|
||
color: #ff4444; font-size: 0.8rem; max-width: 28rem;
|
||
line-height: 1.5; border: 1px solid #660000;
|
||
padding: 1rem; border-radius: 4px;
|
||
}
|
||
.viewWarning-continue {
|
||
padding: 0.6rem 2rem; font-size: 0.85rem;
|
||
background: #330000; color: #ff6666;
|
||
border: 2px solid #660000; cursor: pointer;
|
||
font-family: 'Courier New', monospace; letter-spacing: 2px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.viewWarning-continue:hover { background: #550000; }
|
||
|
||
/* Floating switch-view button */
|
||
#switchViewBtn {
|
||
position: fixed; bottom: 1rem; right: 1rem;
|
||
z-index: 250; cursor: pointer;
|
||
font-size: 1.5rem; color: #00ff00;
|
||
opacity: 0.2; transition: opacity 0.3s ease;
|
||
background: none; border: none;
|
||
font-family: 'Courier New', monospace;
|
||
display: none;
|
||
}
|
||
#switchViewBtn:hover,
|
||
#switchViewBtn:active { opacity: 0.8; }
|
||
#switchViewPanel {
|
||
position: fixed; bottom: 4rem; right: 1rem;
|
||
z-index: 260;
|
||
display: none; flex-direction: column; gap: 0.5rem;
|
||
background: #000; border: 1px solid #003300;
|
||
padding: 1rem; border-radius: 4px;
|
||
min-width: 14rem;
|
||
}
|
||
#switchViewPanel.visible { display: flex; }
|
||
#switchViewAction {
|
||
padding: 0.6rem 1rem; font-size: 0.8rem;
|
||
background: #001100; color: #00ff00;
|
||
border: 1px solid #00ff00; cursor: pointer;
|
||
font-family: 'Courier New', monospace; letter-spacing: 1px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
#switchViewAction:hover { background: #003300; }
|
||
#showViewChooserBtn {
|
||
padding: 0.6rem 1rem; font-size: 0.75rem;
|
||
background: #000; color: #007700;
|
||
border: 1px solid #003300; cursor: pointer;
|
||
font-family: 'Courier New', monospace; letter-spacing: 1px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
#showViewChooserBtn:hover { background: #001100; color: #00ff00; }
|
||
.switchView-note {
|
||
font-size: 0.65rem; color: #005500;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Mobile view overrides (tuned for large 2.5' x 4' vertical display) */
|
||
html[data-view="mobile"] .scene { font-size: 1.8rem; padding: 2rem; }
|
||
html[data-view="mobile"] .scene4text { max-width: 90%; overflow-wrap: break-word; }
|
||
html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 90%; overflow-wrap: break-word; }
|
||
html[data-view="mobile"] .s5visual { max-width: 90%; }
|
||
html[data-view="mobile"] .s4tl { max-width: 90%; margin-bottom: 1rem; padding: 0.5rem 0; }
|
||
html[data-view="mobile"] .comp-table { font-size: 1.2rem; max-width: 90%; }
|
||
html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.5rem 0.6rem; }
|
||
html[data-view="mobile"] .tl-year { font-size: 1rem; }
|
||
html[data-view="mobile"] .tl-year::after { width: 10px; height: 10px; bottom: -0.4rem; }
|
||
html[data-view="mobile"] .typewriter-line { white-space: normal; }
|
||
html[data-view="mobile"] #textContainer { font-size: 1.8rem; overflow-wrap: break-word; width: 90vw; }
|
||
html[data-view="mobile"] .btn-row { position: static; gap: 1rem; margin-top: 2rem; transform: none; }
|
||
html[data-view="mobile"] .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||
html[data-view="mobile"] #scene10e .btnNext { padding: 1rem 2rem; }
|
||
html[data-view="mobile"] #scene3Title { font-size: 3rem; top: 1.5rem; left: 1.5rem; }
|
||
html[data-view="mobile"] #scene3 { padding: 4rem 1.5rem 12rem; }
|
||
html[data-view="mobile"] #scene3Text { margin-top: 2rem; overflow-wrap: break-word; }
|
||
html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; position: static; gap: 1rem; width: 100%; align-items: center; margin-top: 2rem; transform: none; }
|
||
html[data-view="mobile"] .scene3ChoiceBtn { padding: 1.2rem 2rem; font-size: 1.6rem; }
|
||
html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.8rem; }
|
||
html[data-view="mobile"] .punch-card { padding: 1rem; font-size: 1.3rem; }
|
||
html[data-view="mobile"] .punch-card .punch-icon { font-size: 2.2rem; }
|
||
html[data-view="mobile"] .scene4sub { padding: 1rem 1.5rem 14rem; overflow-wrap: break-word; }
|
||
html[data-view="mobile"] #scene4a { padding-top: 0; justify-content: flex-start; }
|
||
html[data-view="mobile"] .hub-title { font-size: 2.4rem; }
|
||
html[data-view="mobile"] .hub-subtitle { font-size: 1.4rem; }
|
||
html[data-view="mobile"] .hub-btn { padding: 1rem 2rem; font-size: 1.4rem; }
|
||
html[data-view="mobile"] .hub-row { flex-direction: column; gap: 1rem; padding: 1rem 1.5rem; }
|
||
html[data-view="mobile"] #sceneRefs h2 { font-size: 1.8rem; }
|
||
html[data-view="mobile"] #sceneRefs li { font-size: 1.2rem; }
|
||
html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 1.2rem; max-height: 90vh; }
|
||
html[data-view="mobile"] .callout-box { font-size: 1.3rem; padding: 1rem 1.2rem; }
|
||
html[data-view="mobile"] #foodOverlay .food-box { padding: 2rem; }
|
||
html[data-view="mobile"] #foodOverlay .food-title { font-size: 1.8rem; }
|
||
html[data-view="mobile"] #foodOverlay .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; }
|
||
html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 1.4rem; padding: 1rem 1.5rem; }
|
||
html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 2rem; }
|
||
html[data-view="mobile"] #meshCanvas,
|
||
html[data-view="mobile"] #deskCanvas,
|
||
html[data-view="mobile"] #phoneCanvas,
|
||
html[data-view="mobile"] #exfilCanvas,
|
||
html[data-view="mobile"] #exfilDeskCanvas { max-height: 500px; }
|
||
html[data-view="mobile"] #scene2Line1 { font-size: 1.8rem; padding: 1.5rem; overflow-wrap: break-word; }
|
||
html[data-view="mobile"] #scene2Message2 { font-size: 1.8rem; }
|
||
html[data-view="mobile"] .coin-grid { max-width: 24rem; gap: 5px; }
|
||
html[data-view="mobile"] .scene5text { font-size: 1.5rem; }
|
||
html[data-view="mobile"] .hash-bar { height: 4rem; }
|
||
html[data-view="mobile"] #s7BtnRow { bottom: 8%; }
|
||
html[data-view="mobile"] #s8BtnRow { bottom: 8%; }
|
||
html[data-view="mobile"] #followBtn { bottom: 8%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||
html[data-view="mobile"] #whatIsLabBtn { bottom: 8%; font-size: 1.4rem; padding: 1rem 3rem; }
|
||
html[data-view="mobile"] #s8BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||
html[data-view="mobile"] #s7BtnRow .btnNext { padding: 1rem 2rem; font-size: 1.4rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="viewOverlay">
|
||
<div class="viewOverlay-inner">
|
||
<div class="viewOverlay-title">SIGNAL ELSEWHERE</div>
|
||
<div class="viewOverlay-sub">CHOOSE YOUR VIEW</div>
|
||
<div class="viewOverlay-btns">
|
||
<button class="viewOverlay-btn" id="viewMobileBtn">MOBILE VIEW</button>
|
||
<button class="viewOverlay-btn" id="viewDesktopBtn">DESKTOP VIEW</button>
|
||
</div>
|
||
<div id="viewDesktopWarning">
|
||
<div class="viewWarning-text">DESKTOP VIEW IS DESIGNED FOR LARGER SCREENS. ROTATE YOUR DEVICE FOR THE BEST EXPERIENCE, OR GO BACK AND SELECT MOBILE VIEW.</div>
|
||
<button class="viewWarning-continue" id="viewDesktopContinue">CONTINUE ANYWAY</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="switchViewBtn">⌂</div>
|
||
<div id="switchViewPanel">
|
||
<button id="switchViewAction">SWITCH TO MOBILE VIEW</button>
|
||
<button id="showViewChooserBtn">SHOW VIEW CHOOSER</button>
|
||
<div class="switchView-note">TAP OUTSIDE TO CLOSE</div>
|
||
</div>
|
||
|
||
<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="yourTechBtn">YOUR TECH</button>
|
||
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
||
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</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>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4a">SOURCES</button>
|
||
<button class="btnNext" id="next4a">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4a">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene4b" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s4bText"></div>
|
||
<div class="s4visual" id="s4bVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4b">SOURCES</button>
|
||
<button class="btnNext" id="back4b">BACK</button>
|
||
<button class="btnNext" id="next4b">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4b">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene4c" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s4cText"></div>
|
||
<div class="s4visual" id="s4cVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4c">SOURCES</button>
|
||
<button class="btnNext" id="back4c">BACK</button>
|
||
<button class="btnNext" id="next4c">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4c">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene4d" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s4dText"></div>
|
||
<div class="s4visual" id="s4dVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4d">SOURCES</button>
|
||
<button class="btnNext" id="back4d">BACK</button>
|
||
<button class="btnNext" id="next4d">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4d">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene4e" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s4eText"></div>
|
||
<div class="s4visual" id="s4eVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4e">SOURCES</button>
|
||
<button class="btnNext" id="back4e">BACK</button>
|
||
<button class="btnNext" id="next4e">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4e">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene4f" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s4fText"></div>
|
||
<div class="s4visual" id="s4fVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources4f">SOURCES</button>
|
||
<button class="btnNext" id="back4f">BACK</button>
|
||
<button class="btnNext" id="next4f">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom4f">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene5" class="scene">
|
||
<div class="scene5text" id="s5Text"></div>
|
||
<div class="s5visual" id="s5Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources5">SOURCES</button>
|
||
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene6" class="scene" style="flex-direction:column;">
|
||
<div id="s6TechHub">
|
||
<div class="hub-title">TECHNOLOGY</div>
|
||
<div class="hub-subtitle" id="hubSubtitle">CHOOSE A CATEGORY TO COMPARE</div>
|
||
<div class="hub-row" id="hubRow0">
|
||
<button class="hub-btn" id="goDesktopTech">DESKTOP</button>
|
||
</div>
|
||
<div class="hub-row" id="hubRow1">
|
||
<button class="hub-btn" id="goMobileTech">MOBILE</button>
|
||
</div>
|
||
<div class="hub-row" id="hubRow2">
|
||
<button class="hub-btn" id="goInternetTech">INTERNET</button>
|
||
</div>
|
||
<div class="hub-row" style="margin-top:1rem;">
|
||
<button class="hub-btn hub-return" id="returnFromTechHub">RETURN</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene7" class="scene" style="flex-direction:column;">
|
||
<div class="scene7text" id="s7Text"></div>
|
||
<div class="s7canvas" id="s7Canvas">
|
||
<canvas id="deskCanvas" width="800" height="320"></canvas>
|
||
<div class="mesh-status" id="deskStatus">CLICK A TAB TO COMPARE OS SECURITY</div>
|
||
</div>
|
||
<div id="s7BtnRow">
|
||
<button class="btnNext" id="nextFromScene7">SEE THE RISK</button>
|
||
<button class="btnNext" id="returnFromScene7">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene7b" class="scene" style="flex-direction:column;">
|
||
<div class="scene7text" id="s7bText"></div>
|
||
<div class="s7bcanvas" id="s7bCanvas">
|
||
<canvas id="exfilDeskCanvas" width="800" height="360"></canvas>
|
||
<div class="exfil-counter" id="exfilDeskCounter">DATA VALUE EXPOSED: $0/yr</div>
|
||
<div class="mesh-status" id="exfilDeskStatus">CLICK A TAB TO SEE WHERE YOUR DATA GOES</div>
|
||
<div class="exfil-legend" id="exfilDeskLegend"></div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesFromScene7b">SOURCES</button>
|
||
<button class="btnNext" id="returnFromScene7b">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene8" class="scene" style="flex-direction:column;">
|
||
<div class="scene8text" id="s8Text"></div>
|
||
<div class="s8canvas" id="s8Canvas">
|
||
<canvas id="phoneCanvas" width="800" height="320"></canvas>
|
||
<div class="mesh-status" id="phoneStatus">CLICK A TAB TO COMPARE OS SECURITY</div>
|
||
</div>
|
||
<div id="s8BtnRow">
|
||
<button class="btnNext" id="nextFromScene8">SEE THE RISK</button>
|
||
<button class="btnNext" id="returnFromScene8">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene8b" class="scene" style="flex-direction:column;">
|
||
<div class="scene8text" id="s8bText"></div>
|
||
<div class="s8bcanvas" id="s8bCanvas">
|
||
<canvas id="exfilCanvas" width="800" height="360"></canvas>
|
||
<div class="exfil-counter" id="exfilCounter">DATA VALUE EXPOSED: $0/yr</div>
|
||
<div class="mesh-status" id="exfilStatus">CLICK A TAB TO SEE WHERE YOUR DATA GOES</div>
|
||
<div class="exfil-legend" id="exfilLegend"></div>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesFromScene8b">SOURCES</button>
|
||
<button class="btnNext" id="returnFromScene8b">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scene9" class="scene" style="flex-direction:column;">
|
||
<div class="scene8text" id="s9Text"></div>
|
||
<div class="s9canvas" id="s9Canvas">
|
||
<canvas id="meshCanvas" width="800" height="320"></canvas>
|
||
<div class="mesh-legend">
|
||
<span class="legend-item"><span class="legend-dot online"></span> ONLINE</span>
|
||
<span class="legend-item"><span class="legend-dot offline"></span> OFFLINE</span>
|
||
<span class="legend-item"><span class="legend-dot packet"></span> PACKET</span>
|
||
</div>
|
||
<div class="mesh-status" id="meshStatus">CLICK ANY NODE TO SEE HOW MESH NETWORKS REROUTE WHEN A NODE GOES OFFLINE</div>
|
||
</div>
|
||
<button class="btnNext" id="returnFromScene9">RETURN</button>
|
||
</div>
|
||
|
||
<!-- Desktop OS timeline scenes (D1-D5) -->
|
||
<div id="sceneD1" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sD1Text"></div>
|
||
<div class="s4visual" id="sD1Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesD1">SOURCES</button>
|
||
<button class="btnNext" id="nextD1">NEXT</button>
|
||
<button class="btnNext" id="returnFromD1">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneD2" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sD2Text"></div>
|
||
<div class="s4visual" id="sD2Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesD2">SOURCES</button>
|
||
<button class="btnNext" id="backD2">BACK</button>
|
||
<button class="btnNext" id="nextD2">NEXT</button>
|
||
<button class="btnNext" id="returnFromD2">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneD3" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sD3Text"></div>
|
||
<div class="s4visual" id="sD3Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesD3">SOURCES</button>
|
||
<button class="btnNext" id="backD3">BACK</button>
|
||
<button class="btnNext" id="nextD3">NEXT</button>
|
||
<button class="btnNext" id="returnFromD3">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneD4" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sD4Text"></div>
|
||
<div class="s4visual" id="sD4Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesD4">SOURCES</button>
|
||
<button class="btnNext" id="backD4">BACK</button>
|
||
<button class="btnNext" id="nextD4">NEXT</button>
|
||
<button class="btnNext" id="returnFromD4">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneD5" class="scene" style="flex-direction:column;">
|
||
<div class="scene5text" id="sD5Text"></div>
|
||
<div class="s5visual" id="sD5Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesD5">SOURCES</button>
|
||
<button class="btnNext" id="backD5">BACK</button>
|
||
<button class="btnNext" id="seeInteractiveFromD5">SEE INTERACTIVE</button>
|
||
<button class="btnNext" id="returnFromD5">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Internet timeline scenes (I1-I5) -->
|
||
<div id="sceneI1" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sI1Text"></div>
|
||
<div class="s4visual" id="sI1Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesI1">SOURCES</button>
|
||
<button class="btnNext" id="nextI1">NEXT</button>
|
||
<button class="btnNext" id="returnFromI1">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneI2" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sI2Text"></div>
|
||
<div class="s4visual" id="sI2Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesI2">SOURCES</button>
|
||
<button class="btnNext" id="backI2">BACK</button>
|
||
<button class="btnNext" id="nextI2">NEXT</button>
|
||
<button class="btnNext" id="returnFromI2">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneI3" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sI3Text"></div>
|
||
<div class="s4visual" id="sI3Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesI3">SOURCES</button>
|
||
<button class="btnNext" id="backI3">BACK</button>
|
||
<button class="btnNext" id="nextI3">NEXT</button>
|
||
<button class="btnNext" id="returnFromI3">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneI4" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sI4Text"></div>
|
||
<div class="s4visual" id="sI4Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesI4">SOURCES</button>
|
||
<button class="btnNext" id="backI4">BACK</button>
|
||
<button class="btnNext" id="nextI4">NEXT</button>
|
||
<button class="btnNext" id="returnFromI4">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneI5" class="scene" style="flex-direction:column;">
|
||
<div class="scene5text" id="sI5Text"></div>
|
||
<div class="s5visual" id="sI5Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesI5">SOURCES</button>
|
||
<button class="btnNext" id="backI5">BACK</button>
|
||
<button class="btnNext" id="seeInteractiveFromI5">SEE INTERACTIVE</button>
|
||
<button class="btnNext" id="returnFromI5">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile device timeline scenes (M1-M5) -->
|
||
<div id="sceneM1" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sM1Text"></div>
|
||
<div class="s4visual" id="sM1Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesM1">SOURCES</button>
|
||
<button class="btnNext" id="nextM1">NEXT</button>
|
||
<button class="btnNext" id="returnFromM1">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneM2" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sM2Text"></div>
|
||
<div class="s4visual" id="sM2Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesM2">SOURCES</button>
|
||
<button class="btnNext" id="backM2">BACK</button>
|
||
<button class="btnNext" id="nextM2">NEXT</button>
|
||
<button class="btnNext" id="returnFromM2">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneM3" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sM3Text"></div>
|
||
<div class="s4visual" id="sM3Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesM3">SOURCES</button>
|
||
<button class="btnNext" id="backM3">BACK</button>
|
||
<button class="btnNext" id="nextM3">NEXT</button>
|
||
<button class="btnNext" id="returnFromM3">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneM4" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sM4Text"></div>
|
||
<div class="s4visual" id="sM4Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesM4">SOURCES</button>
|
||
<button class="btnNext" id="backM4">BACK</button>
|
||
<button class="btnNext" id="nextM4">NEXT</button>
|
||
<button class="btnNext" id="returnFromM4">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneM5" class="scene" style="flex-direction:column;">
|
||
<div class="scene5text" id="sM5Text"></div>
|
||
<div class="s5visual" id="sM5Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesM5">SOURCES</button>
|
||
<button class="btnNext" id="backM5">BACK</button>
|
||
<button class="btnNext" id="seeInteractiveFromM5">SEE INTERACTIVE</button>
|
||
<button class="btnNext" id="returnFromM5">TECH HUB</button>
|
||
</div>
|
||
</div>
|
||
<div id="foodOverlay">
|
||
<div class="food-box">
|
||
<div class="food-title">CHOOSE A SITE</div>
|
||
<button class="food-btn" id="foodVimeo">GEOGRO</button>
|
||
<button class="food-btn" id="foodKitchen">484.KITCHEN</button>
|
||
<button class="food-close" id="foodClose">CANCEL</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Health scenes (10a-10e timeline, 11 summary) -->
|
||
<div id="scene10a" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10aText"></div>
|
||
<div class="s4visual" id="s10aVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10a">SOURCES</button>
|
||
<button class="btnNext" id="next10a">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10a">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10b" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10bText"></div>
|
||
<div class="s4visual" id="s10bVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10b">SOURCES</button>
|
||
<button class="btnNext" id="back10b">BACK</button>
|
||
<button class="btnNext" id="next10b">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10b">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10c" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10cText"></div>
|
||
<div class="s4visual" id="s10cVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10c">SOURCES</button>
|
||
<button class="btnNext" id="back10c">BACK</button>
|
||
<button class="btnNext" id="next10c">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10c">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10d" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10dText"></div>
|
||
<div class="s4visual" id="s10dVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10d">SOURCES</button>
|
||
<button class="btnNext" id="back10d">BACK</button>
|
||
<button class="btnNext" id="next10d">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10d">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10g" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10gText"></div>
|
||
<div class="s4visual" id="s10gVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10g">SOURCES</button>
|
||
<button class="btnNext" id="back10g">BACK</button>
|
||
<button class="btnNext" id="next10g">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10g">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10h" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10hText"></div>
|
||
<div class="s4visual" id="s10hVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10h">SOURCES</button>
|
||
<button class="btnNext" id="back10h">BACK</button>
|
||
<button class="btnNext" id="next10h">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10h">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10e" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10eText"></div>
|
||
<div class="s4visual" id="s10eVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10e">SOURCES</button>
|
||
<button class="btnNext" id="back10e">BACK</button>
|
||
<button class="btnNext" id="next10e">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10e">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene10f" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="s10fText"></div>
|
||
<div class="s4visual" id="s10fVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources10f">SOURCES</button>
|
||
<button class="btnNext" id="back10f">BACK</button>
|
||
<button class="btnNext" id="next10f">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFrom10f">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene11" class="scene">
|
||
<div class="scene5text" id="s11Text"></div>
|
||
<div class="s5visual" id="s11Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sources11">SOURCES</button>
|
||
<button class="btnNext" id="next11">NEXT</button>
|
||
<button class="btnNext" id="returnFromScene11">RETURN</button>
|
||
</div>
|
||
</div>
|
||
<div id="scene12" class="scene" style="flex-direction:column;">
|
||
<div class="scene5text" id="s12Text"></div>
|
||
<div class="s5visual" id="s12Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="back12">BACK</button>
|
||
<button class="btnNext" id="returnFromScene12">RETURN</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Food scenes (F1-F5 timeline, Summary, Links) -->
|
||
<div id="sceneF1" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sF1Text"></div>
|
||
<div class="s4visual" id="sF1Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesF1">SOURCES</button>
|
||
<button class="btnNext" id="nextF1">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromF1">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneF2" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sF2Text"></div>
|
||
<div class="s4visual" id="sF2Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesF2">SOURCES</button>
|
||
<button class="btnNext" id="backF2">BACK</button>
|
||
<button class="btnNext" id="nextF2">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromF2">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneF3" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sF3Text"></div>
|
||
<div class="s4visual" id="sF3Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesF3">SOURCES</button>
|
||
<button class="btnNext" id="backF3">BACK</button>
|
||
<button class="btnNext" id="nextF3">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromF3">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneF4" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sF4Text"></div>
|
||
<div class="s4visual" id="sF4Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesF4">SOURCES</button>
|
||
<button class="btnNext" id="backF4">BACK</button>
|
||
<button class="btnNext" id="nextF4">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromF4">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneF6" class="scene scene4sub">
|
||
<div class="s4tl"></div>
|
||
<div class="scene4text" id="sF6Text"></div>
|
||
<div class="s4visual" id="sF6Visual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesF6">SOURCES</button>
|
||
<button class="btnNext" id="backF6">BACK</button>
|
||
<button class="btnNext" id="nextF6">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromF6">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneFoodSum" class="scene">
|
||
<div class="scene5text" id="sFoodSumText"></div>
|
||
<div class="s5visual" id="sFoodSumVisual"></div>
|
||
<div class="btn-row">
|
||
<button class="btnNext" id="sourcesFoodSum">SOURCES</button>
|
||
<button class="btnNext" id="backFoodSum">BACK</button>
|
||
<button class="btnNext" id="nextFoodSum">NEXT</button>
|
||
<button class="btnNext btnLab" id="returnFromFoodSum">LAB</button>
|
||
</div>
|
||
</div>
|
||
<div id="sceneFoodLinks" class="scene" style="flex-direction:column;">
|
||
<div class="scene5text" id="sFoodLinksText"></div>
|
||
<div class="btn-row" style="flex-direction:column;align-items:center;gap:1rem;">
|
||
<button class="food-btn" id="foodTimelineVimeo">GEOGRO</button>
|
||
<button class="food-btn" id="foodTimelineKitchen">484.KITCHEN</button>
|
||
<button class="btnNext" id="backFoodLinks">BACK</button>
|
||
<button class="btnNext" id="returnFromFoodLinks">RETURN TO LAB</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Testing shortcuts state
|
||
let skipAnimations = false;
|
||
let scene3TypewriterTimeouts = [];
|
||
|
||
// View selector state
|
||
let viewChosen = false;
|
||
let introReady = false;
|
||
let introStarted = false;
|
||
|
||
function setView(mode) {
|
||
if (mode === 'mobile') {
|
||
document.documentElement.setAttribute('data-view', 'mobile');
|
||
} else {
|
||
document.documentElement.removeAttribute('data-view');
|
||
}
|
||
sessionStorage.setItem('signalView', mode);
|
||
}
|
||
|
||
function showViewOverlay() {
|
||
document.getElementById('viewDesktopWarning').classList.remove('visible');
|
||
document.getElementById('viewOverlay').classList.add('visible');
|
||
}
|
||
|
||
function dismissViewOverlay() {
|
||
viewChosen = true;
|
||
document.getElementById('viewOverlay').classList.remove('visible');
|
||
document.getElementById('switchViewBtn').style.display = 'block';
|
||
if (introReady && !introStarted) {
|
||
introStarted = true;
|
||
document.getElementById('textContainer').style.visibility = 'visible';
|
||
typewriter();
|
||
}
|
||
}
|
||
|
||
// Auto-select mobile view in Android APK, otherwise show view selector
|
||
const isCapacitor = typeof window.Capacitor !== 'undefined';
|
||
const isAndroidApp = isCapacitor || /android/i.test(navigator.userAgent);
|
||
if (isAndroidApp) {
|
||
setView('mobile');
|
||
viewChosen = true;
|
||
document.getElementById('switchViewBtn').style.display = 'block';
|
||
} else {
|
||
document.getElementById('viewOverlay').classList.add('visible');
|
||
}
|
||
|
||
// Matrix rain configuration
|
||
const fontSize = window.innerWidth < 480 ? 10 : 14;
|
||
let columns;
|
||
let drops = [];
|
||
|
||
// 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;
|
||
if (fontSize) {
|
||
columns = Math.floor(canvas.width / fontSize);
|
||
drops = Array(columns).fill(0).map(() => Math.floor(Math.random() * canvas.height / fontSize));
|
||
}
|
||
}
|
||
resizeCanvas();
|
||
window.addEventListener('resize', resizeCanvas);
|
||
|
||
// Force an extra resize after fonts/viewport settle
|
||
setTimeout(resizeCanvas, 100);
|
||
setTimeout(resizeCanvas, 500);
|
||
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);
|
||
if (viewChosen && !introStarted) {
|
||
introStarted = true;
|
||
document.getElementById('textContainer').style.visibility = 'visible';
|
||
typewriter();
|
||
} else {
|
||
introReady = true;
|
||
}
|
||
}
|
||
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) {
|
||
s2c.forEach(t => clearTimeout(t));
|
||
s2c = [];
|
||
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');
|
||
message.textContent = '';
|
||
message2.textContent = '';
|
||
|
||
let opacity = 0;
|
||
const fadeIn = setInterval(() => {
|
||
if (sceneElem.style.display !== 'flex' || btn.style.visibility === 'visible') {
|
||
clearInterval(fadeIn);
|
||
return;
|
||
}
|
||
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);
|
||
}, undefined, undefined, s2c);
|
||
});
|
||
}, undefined, undefined, s2c);
|
||
});
|
||
}
|
||
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');
|
||
textContainer.textContent = '';
|
||
|
||
let opacity = 0;
|
||
const fadeIn = setInterval(() => {
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('scene3ChoiceRow').style.display === 'flex') {
|
||
clearInterval(fadeIn);
|
||
return;
|
||
}
|
||
opacity += 0.05;
|
||
if (opacity >= 1) {
|
||
opacity = 1;
|
||
clearInterval(fadeIn);
|
||
|
||
setTimeout(() => {
|
||
title.classList.add('visible');
|
||
}, 300);
|
||
|
||
const tMain = setTimeout(() => {
|
||
const line1 = document.createElement('div');
|
||
line1.textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT";
|
||
line1.style.cssText = 'opacity:0;transition:opacity 4s ease;';
|
||
textContainer.appendChild(line1);
|
||
const t1 = setTimeout(() => line1.style.opacity = '1', 50);
|
||
scene3TypewriterTimeouts.push(t1);
|
||
|
||
const tLine2 = setTimeout(() => {
|
||
const line2 = document.createElement('div');
|
||
line2.textContent = "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||
line2.style.cssText = 'opacity:0;transition:opacity 1.5s ease;margin-top:11rem;margin-bottom:2rem;display:flex;justify-content:center;width:100%;';
|
||
textContainer.appendChild(line2);
|
||
const t2 = setTimeout(() => line2.style.opacity = '1', 50);
|
||
scene3TypewriterTimeouts.push(t2);
|
||
}, 3000);
|
||
scene3TypewriterTimeouts.push(tLine2);
|
||
|
||
const row = document.getElementById('scene3ChoiceRow');
|
||
row.style.display = 'flex';
|
||
const btns = row.querySelectorAll('.scene3ChoiceBtn');
|
||
btns.forEach((btn, i) => {
|
||
const tBtn = setTimeout(() => {
|
||
btn.style.opacity = '1';
|
||
btn.style.pointerEvents = 'auto';
|
||
}, i * 200 + 3500);
|
||
scene3TypewriterTimeouts.push(tBtn);
|
||
});
|
||
}, 600);
|
||
scene3TypewriterTimeouts.push(tMain);
|
||
}
|
||
sceneElem.style.opacity = opacity;
|
||
}, 30);
|
||
}
|
||
|
||
// Scene 4 helpers
|
||
function buildTimeline(tlElem, activeIdx) {
|
||
const years = ['1900', '1933', '1934', '1971', '2009', '2026'];
|
||
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 buildHTimeline(tlElem, activeIdx) {
|
||
const years = ['1910', '1938', '1965', '1973', '1982', '1998', '2010', '2026'];
|
||
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 buildFTimeline(tlElem, activeIdx) {
|
||
const years = ['1906', '1947', '1970', '1996', '2026'];
|
||
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 buildMTimeline(tlElem, activeIdx) {
|
||
const years = ['2007', '2008', '2019', 'Today'];
|
||
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 buildDTimeline(tlElem, activeIdx) {
|
||
const years = ['1969', '1985', '1991', 'Today'];
|
||
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 buildITimeline(tlElem, activeIdx) {
|
||
const years = ['1969', '1991', '2000s', 'Today'];
|
||
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);
|
||
}
|
||
|
||
function rstSceneBtns(sceneId) {
|
||
var scene=document.getElementById(sceneId);
|
||
if(!scene)return;
|
||
scene.querySelectorAll('.btnNext').forEach(function(b){
|
||
b.style.cssText='';
|
||
b.style.visibility='hidden';
|
||
b.style.opacity='0';
|
||
b.style.pointerEvents='none';
|
||
});
|
||
}
|
||
|
||
// 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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4a').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildTimeline(tl,0);
|
||
const t1=setTimeout(()=>{
|
||
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');showNextBtn('sources4a');
|
||
},undefined,undefined,s4c);
|
||
},undefined,undefined,s4c);
|
||
},1500);
|
||
s4c.push(t1);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 4b — 1933 ORDER 6102
|
||
function loadScene4b(sceneElem) {
|
||
s4c=[];
|
||
rstSceneBtns('scene4b');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4b').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildTimeline(tl,1);
|
||
typeHtmlCalmly(txt,"\n\n\nIMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS.",()=>{
|
||
const tWait1=setTimeout(()=>{
|
||
typeHtmlCalmly(txt,"\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.",()=>{
|
||
const tWait2=setTimeout(()=>{
|
||
typeHtmlCalmly(txt,"\n\nON 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.",()=>{
|
||
typeHtmlCalmly(txt,"\n\nCITIZENS WERE FORCED TO TURN IN THEIR GOLD IN EXCHANGE FOR PAPER DOLLARS.",()=>{
|
||
showNextBtn('next4b');showNextBtn('sources4b');showNextBtn('back4b');
|
||
},undefined,undefined,s4c);
|
||
},undefined,undefined,s4c);
|
||
},undefined,undefined,s4c);
|
||
},1000);
|
||
s4c.push(tWait2);
|
||
},undefined,undefined,s4c);
|
||
},1000);
|
||
s4c.push(tWait1);
|
||
},undefined,undefined,s4c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 4c — 1934 Gold Reserve Act + 69%
|
||
function loadScene4c(sceneElem) {
|
||
s4c=[];
|
||
rstSceneBtns('scene4c');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4c').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
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');showNextBtn('sources4c');showNextBtn('back4c');
|
||
},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=[];
|
||
rstSceneBtns('scene4d');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4d').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
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');showNextBtn('sources4d');showNextBtn('back4d');
|
||
},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=[];
|
||
rstSceneBtns('scene4e');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4e').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
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.",()=>{
|
||
s4c.push(setTimeout(()=>{
|
||
let html='<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>UNCENSORABLE?</td><td class="no">❌ NO</td><td class="yes">✅ YES</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.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('next4e');showNextBtn('sources4e');showNextBtn('back4e');
|
||
},1200));
|
||
},undefined,undefined,s4c);
|
||
},undefined,undefined,s4c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 4f — 2026 The Present Money Frontier
|
||
function loadScene4f(sceneElem) {
|
||
s4c=[];
|
||
rstSceneBtns('scene4f');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next4f').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildTimeline(tl,5);
|
||
typeHtmlCalmly(txt,"IN 2026, THE SOUND MONEY THESIS HAS BEEN VINDICATED.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"BITCOIN ETFs WERE APPROVED IN JANUARY 2024 — WALL STREET FLOODED IN.\nBITCOIN HIT ALL-TIME HIGHS ABOVE $100,000. GOLD ALSO REACHED NEW RECORDS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>2009</th><th>2026</th></tr>';
|
||
html+='<tr><td>BITCOIN PRICE</td><td>$0</td><td>$100K+</td></tr>';
|
||
html+='<tr><td>GOLD PRICE</td><td>$900/OZ</td><td>$3,000+/OZ</td></tr>';
|
||
html+='<tr><td>US DEBT</td><td>$11.9T</td><td>$35T+</td></tr>';
|
||
html+='<tr><td>BTC ADOPTION</td><td>NONE</td><td>ETFs, NATIONS, FORTUNE 500</td></tr>';
|
||
html+='<tr><td>GOLD CONFISCATION RISK</td><td>LOW</td><td>REAL (CBDCs RISING)</td></tr>';
|
||
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">🟠</span><span class="punch-text">BTC $100K+<br>WALL STREET OWNS IT</span></div><div class="punch-card"><span class="punch-icon">🥇</span><span class="punch-text">GOLD $3K+<br>STILL THE SAFE HAVEN</span></div><div class="punch-card"><span class="punch-icon">📉</span><span class="punch-text">DOLLAR DOWN<br>70% SINCE 2000</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('next4f');showNextBtn('sources4f');showNextBtn('back4f');
|
||
},800);
|
||
s4c.push(t2);
|
||
},undefined,undefined,s4c);
|
||
},1200);
|
||
s4c.push(t1);
|
||
},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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene5').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
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');
|
||
document.getElementById('sources5').style.cssText='';
|
||
showNextBtn('sources5');
|
||
},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;
|
||
}
|
||
|
||
// Scene 10a — 1910 Flexner Report
|
||
function loadScene10a(sceneElem) {
|
||
h10c=[];
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10a').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,0);
|
||
typeHtmlCalmly(txt,"IMAGINE THE GOVERNMENT DECIDED WHICH DOCTORS WERE ALLOWED TO PRACTICE — AND SHUT DOWN EVERY OTHER OPTION OVERNIGHT.",()=>{
|
||
const tWait=setTimeout(()=>{
|
||
typeHtmlCalmly(txt,"\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1910.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE CARNEGIE FOUNDATION COMMISSIONED ",()=>{
|
||
const span=document.createElement('span');
|
||
txt.appendChild(span);
|
||
typeHtmlCalmly(span,"THE FLEXNER REPORT",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://ncbi.nlm.nih.gov/pmc/articles/PMC2567554/';
|
||
link.target='_blank';
|
||
link.textContent=span.textContent;
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
span.replaceWith(link);
|
||
typeHtmlCalmly(txt,". IT EVALUATED EVERY MEDICAL SCHOOL IN AMERICA. HALF WERE SHUT DOWN — PARTICULARLY THOSE TRAINING WOMEN, BLACK DOCTORS, AND RURAL PRACTITIONERS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE AMERICAN MEDICAL ASSOCIATION TOOK CONTROL OF MEDICAL LICENSING. MEDICINE BECAME A GATEKEPT PROFESSION.",()=>{
|
||
showNextBtn('next10a');showNextBtn('sources10a');
|
||
},undefined,undefined,h10c);
|
||
},800);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},undefined,undefined,h10c);
|
||
},undefined,undefined,h10c);
|
||
},1000);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
},1000);
|
||
h10c.push(tWait);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10b — 1938 FDA Control
|
||
function loadScene10b(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10b');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10b').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,1);
|
||
typeHtmlCalmly(txt,"IN 1938, AFTER THE ELIXIR SULFANILAMIDE TRAGEDY KILLED 107 PEOPLE, THE FDA WAS GIVEN BROAD POWER TO REGULATE MEDICINE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-ii-1938-food-drug-cosmetic-act';
|
||
link.target='_blank';
|
||
link.textContent='FOOD, DRUG & COSMETIC ACT';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," REQUIRED DRUGS TO BE PROVEN SAFE BEFORE SALE.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"SOUNDS REASONABLE — BUT IT ALSO MEANT NO TREATMENT COULD EXIST WITHOUT GOVERNMENT APPROVAL.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE POWER TO APPROVE IS THE POWER TO CONTROL.",()=>{
|
||
showNextBtn('next10b');showNextBtn('sources10b');showNextBtn('back10b');
|
||
},undefined,undefined,h10c);
|
||
},800);
|
||
h10c.push(t3);
|
||
},undefined,undefined,h10c);
|
||
},800);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},undefined,undefined,h10c);
|
||
},1600);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10c — 1965 Medicare/Medicaid cost explosion
|
||
function loadScene10c(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10c');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10c').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,2);
|
||
typeHtmlCalmly(txt,"IN 1965, MEDICARE AND MEDICAID WERE CREATED. THE THIRD-PARTY PAYER SYSTEM WAS BORN.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"HEALTHCARE SPENDING WAS $41 BILLION IN 1965. BY 2022, IT REACHED $4.1 TRILLION.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
vis.innerHTML='<div class="callout-box">⚠ <a href="https://www.cms.gov/data-research/statistics-trends-and-reports/national-health-expenditure-data/historical" target="_blank" style="text-decoration:underline;font-weight:bold;color:#00ff00">$41B → $4.1T = 100x IN 57 YEARS</a> ⚠</div>';
|
||
vis.classList.add('visible');
|
||
showNextBtn('next10c');showNextBtn('sources10c');showNextBtn('back10c');
|
||
},800);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10d — 1973 HMO Act
|
||
function loadScene10d(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10d');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10d').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,3);
|
||
typeHtmlCalmly(txt,"IN 1973, THE ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.congress.gov/93/statute/STATUTE-87/STATUTE-87-Pg914.pdf';
|
||
link.target='_blank';
|
||
link.textContent='HMO ACT';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," FORMALIZED MANAGED CARE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"YOUR DOCTOR NO LONGER WORKS FOR YOU — THEY WORK FOR THE INSURANCE COMPANY.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE DOCTOR-PATIENT RELATIONSHIP WAS REPLACED BY THE CORPORATE PROVIDER-MEMBER MODEL.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"YOU BECAME THE PRODUCT.",()=>{
|
||
showNextBtn('next10d');showNextBtn('sources10d');showNextBtn('back10d');
|
||
},undefined,undefined,h10c);
|
||
},800);
|
||
h10c.push(t3);
|
||
},undefined,undefined,h10c);
|
||
},800);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10g — 1982 The Holistic Underground
|
||
function loadScene10g(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10g');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10g').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,4);
|
||
typeHtmlCalmly(txt,"BEFORE THE AMA AND FDA, HEALING WAS A COMMUNITY PRACTICE — HERBALISTS, MIDWIVES, BONESETTERS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE FLEXNER REPORT OF 1910 SYSTEMATICALLY ELIMINATED THESE TRADITIONS. BY 1938, THE FDA CRIMINALIZED TREATMENTS WITHOUT GOVERNMENT APPROVAL.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"BUT THE KNOWLEDGE NEVER DIED. IN THE 1970s AND 80s, THE COUNTERCULTURE REDISCOVERED ANCIENT HEALING — ACUPUNCTURE, HERBALISM, MEDITATION, BODYWORK.",()=>{
|
||
vis.classList.add('visible');
|
||
showNextBtn('next10g');showNextBtn('sources10g');showNextBtn('back10g');
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10h — 1998 Alternative Medicine Goes Mainstream
|
||
function loadScene10h(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10h');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10h').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,5);
|
||
typeHtmlCalmly(txt,"BY THE 1990s, ALTERNATIVE MEDICINE WAS A $50 BILLION INDUSTRY.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"PATIENTS VOTED WITH THEIR WALLETS — AND THEIR HEALTH IMPROVED.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"FUNCTIONAL MEDICINE, NATUROPATHY, CHIROPRACTIC, AND ACUPUNCTURE GAINED LEGAL RECOGNITION. THE NIH OFFICE OF ALTERNATIVE MEDICINE BECAME THE NCCIH.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE DSHEA ACT OF 1994 UNLEASHED THE SUPPLEMENT INDUSTRY. BUT WITH MAINSTREAM ACCEPTANCE CAME CO-OPTATION — BIG PHARMA BOUGHT THE SUPPLEMENT COMPANIES. INSURANCE STARTED COVERING 'INTEGRATIVE' CARE.",()=>{
|
||
const t4=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
|
||
vis.classList.add('visible');
|
||
showNextBtn('next10h');showNextBtn('sources10h');showNextBtn('back10h');
|
||
},800);
|
||
h10c.push(t4);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t3);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10e — 2010+ Decentralized Health
|
||
function loadScene10e(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10e');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10e').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,6);
|
||
typeHtmlCalmly(txt,"TODAY, A NEW KIND OF MEDICINE IS EMERGING — BIOHACKING, FUNCTIONAL MEDICINE, DIRECT-TO-CONSUMER TESTING.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"PROJECTS LIKE ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://syntropy.institute/';
|
||
link.target='_blank';
|
||
link.textContent='SYNTPROPY.INSTITUTE';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," ARE BUILDING THE INFRASTRUCTURE FOR MEDICINE YOU CONTROL.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>WHO DECIDES?</td><td>GOVERNMENT / INSURANCE</td><td>YOU + YOUR DOCTOR</td></tr>';
|
||
html+='<tr><td>ACCESS</td><td>GATEKEPT</td><td>DIRECT</td></tr>';
|
||
html+='<tr><td>DATA OWNERSHIP</td><td>THE SYSTEM</td><td>YOU</td></tr>';
|
||
html+='</table>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('next10e');showNextBtn('sources10e');showNextBtn('back10e');
|
||
},800);
|
||
h10c.push(t2);
|
||
},undefined,undefined,h10c);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 10f — 2026 The Present Health Frontier
|
||
function loadScene10f(sceneElem) {
|
||
h10c=[];
|
||
rstSceneBtns('scene10f');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('next10f').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildHTimeline(tl,7);
|
||
typeHtmlCalmly(txt,"IN 2026, THE DECENTRALIZED HEALTH MOVEMENT IS NO LONGER EMERGING — IT IS HERE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"DIRECT-TO-CONSUMER LAB TESTING LETS ANYONE ORDER THEIR OWN BLOOD WORK — NO DOCTOR APPROVAL NEEDED.\n\nAI DIAGNOSIS TOOLS RIVAL BOARD-CERTIFIED PHYSICIANS IN ACCURACY.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
let html='<table class="comp-table"><tr><th></th><th>2020</th><th>2026</th></tr>';
|
||
html+='<tr><td>TELEMEDICINE</td><td>NICHE</td><td>MAINSTREAM</td></tr>';
|
||
html+='<tr><td>AI DIAGNOSIS</td><td>EXPERIMENTAL</td><td>IN CLINICS</td></tr>';
|
||
html+='<tr><td>BIOHACKING</td><td>UNDERGROUND</td><td>MAINSTREAM</td></tr>';
|
||
html+='<tr><td>PATIENT DATA</td><td>OWNED BY SYSTEM</td><td>DIRECT OWNERSHIP EMERGING</td></tr>';
|
||
html+='</table>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('next10f');showNextBtn('sources10f');showNextBtn('back10f');
|
||
},800);
|
||
h10c.push(t3);
|
||
},undefined,undefined,h10c);
|
||
},1200);
|
||
h10c.push(t1);
|
||
},undefined,undefined,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 11 — Health Summary
|
||
function loadScene11(sceneElem) {
|
||
h10c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('s11Text');
|
||
const vis=document.getElementById('s11Visual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene11').style.visibility === 'visible' || document.getElementById('next11').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"TRADITIONAL MEDICINE SAVES LIVES — BUT IT ALSO CONTROLS ACCESS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
vis.classList.add('visible');
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>GATEKEEPERS</td><td>✅ YES — AMERICAN MEDICAL ASSOCIATION, FDA, INSURANCE</td><td>❌ NONE</td></tr>';
|
||
html+='<tr><td>YOUR DATA</td><td>OWNED BY THE SYSTEM</td><td>YOU CONTROL</td></tr>';
|
||
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">⚖️</span><span class="punch-text">DECENTRALIZED HEALTH<br>DOESN\'T REPLACE DOCTORS</span></div><div class="punch-card"><span class="punch-icon">🔑</span><span class="punch-text">IT REPLACES<br>GATEKEEPERS</span></div><div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">THE FUTURE IS<br>OPEN MEDICINE</span></div></div>';
|
||
vis.innerHTML=html;
|
||
typeHtmlCalmly(txt,"THE QUESTION ISN'T WHETHER TO USE TRADITIONAL MEDICINE — IT'S WHO DECIDES WHAT'S AVAILABLE.",()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"DECENTRALIZED HEALTH DOESN'T REPLACE DOCTORS. IT REPLACES GATEKEEPERS.",()=>{
|
||
const t6=setTimeout(()=>{
|
||
document.getElementById('returnFromScene11').style.cssText='';
|
||
showNextBtn('returnFromScene11');
|
||
document.getElementById('next11').style.cssText='';
|
||
showNextBtn('next11');
|
||
document.getElementById('sources11').style.cssText='';
|
||
showNextBtn('sources11');
|
||
},400);
|
||
h10c.push(t6);
|
||
},8,20,h10c);
|
||
},8,20,h10c);
|
||
},300);
|
||
h10c.push(t1);
|
||
},8,20,h10c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene F1 — 1906 Pure Food and Drug Act
|
||
function loadSceneF1(sceneElem) {
|
||
f1c=[];
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextF1').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildFTimeline(tl,0);
|
||
typeHtmlCalmly(txt,"IMAGINE THE GOVERNMENT DECIDED WHAT YOU COULD EAT — AND WHAT YOU COULDN'T.",()=>{
|
||
const tWait=setTimeout(()=>{
|
||
typeHtmlCalmly(txt,"\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1906.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-i-1906-food-and-drugs-act';
|
||
link.target='_blank';
|
||
link.textContent='PURE FOOD AND DRUG ACT';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," WAS THE FIRST FEDERAL LAW TO REGULATE FOOD. IT MADE MISBRANDING AND ADULTERATION A CRIME, AND CREATED THE USDA'S BUREAU OF CHEMISTRY.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"SOUNDS REASONABLE — BUT IT ALSO GAVE THE GOVERNMENT POWER TO DECIDE WHAT WAS SAFE TO EAT.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE POWER TO REGULATE IS THE POWER TO CONTROL.",()=>{
|
||
showNextBtn('nextF1');showNextBtn('sourcesF1');
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t3);
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t2);
|
||
},undefined,undefined,f1c);
|
||
},undefined,undefined,f1c);
|
||
},1000);
|
||
f1c.push(t1);
|
||
},undefined,undefined,f1c);
|
||
},1000);
|
||
f1c.push(tWait);
|
||
},undefined,undefined,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene F2 — 1947 FIFRA / Chemical Agriculture
|
||
function loadSceneF2(sceneElem) {
|
||
f1c=[];
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextF2').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildFTimeline(tl,1);
|
||
typeHtmlCalmly(txt,"IN 1947, AFTER WORLD WAR II, THE ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.epa.gov/ingredients-used-pesticide-products/federal-insecticide-fungicide-and-rodenticide-act-fifra';
|
||
link.target='_blank';
|
||
link.textContent='FEDERAL INSECTICIDE, FUNGICIDE, AND RODENTICIDE ACT';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," WAS PASSED.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"SYNTHETIC PESTICIDES LIKE DDT WERE HAILED AS MIRACLES — 'BETTER LIVING THROUGH CHEMISTRY.'",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"FARMING BECAME DEPENDENT ON CHEMICAL INPUTS. THE SOIL BECAME A MEDIUM FOR TOXINS.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE INDUSTRIAL FOOD SYSTEM WAS BORN — AND THE COSTS WERE HIDDEN.",()=>{
|
||
showNextBtn('nextF2');showNextBtn('sourcesF2');showNextBtn('backF2');
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t3);
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t2);
|
||
},undefined,undefined,f1c);
|
||
},1200);
|
||
f1c.push(t1);
|
||
},undefined,undefined,f1c);
|
||
},undefined,undefined,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene F3 — 1970s Farm Bill / Earl Butz
|
||
function loadSceneF3(sceneElem) {
|
||
f1c=[];
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextF3').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildFTimeline(tl,2);
|
||
typeHtmlCalmly(txt,"IN THE 1970S, SECRETARY OF AGRICULTURE EARL BUTZ TOLD FARMERS: ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.usda.gov/farmbill';
|
||
link.target='_blank';
|
||
link.textContent='"GET BIG OR GET OUT."';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt,"",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE GOVERNMENT SUBSIDIZED CORN AND SOY LIKE NEVER BEFORE — MAKING THEM THE CHEAPEST INGREDIENTS IN THE WORLD.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
vis.innerHTML='<div class="callout-box">\u2692 CORN SUBSIDIES + HFCS = PROCESSED FOOD CHEAPER THAN REAL FOOD \u2692</div>';
|
||
vis.classList.add('visible');
|
||
showNextBtn('nextF3');showNextBtn('sourcesF3');showNextBtn('backF3');
|
||
},800);
|
||
f1c.push(t2);
|
||
},undefined,undefined,f1c);
|
||
},1200);
|
||
f1c.push(t1);
|
||
},undefined,undefined,f1c);
|
||
},undefined,undefined,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene F4 — 1996 GMO / Seed Patents
|
||
function loadSceneF4(sceneElem) {
|
||
f1c=[];
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextF4').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildFTimeline(tl,3);
|
||
typeHtmlCalmly(txt,"IN 1996, THE FIRST ",()=>{
|
||
const link=document.createElement('a');
|
||
link.href='https://www.fda.gov/food/food-new-plant-varieties/consumer-info-about-food-genetically-engineered-plants';
|
||
link.target='_blank';
|
||
link.textContent='ROUNDUP READY CROPS';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00';
|
||
txt.appendChild(link);
|
||
typeHtmlCalmly(txt," HIT THE MARKET. A MONSANTO BIOTECHNOLOGY REVOLUTION.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"SEEDS COULD NOW BE PATENTED — MAKING FARMERS DEPENDENT ON CORPORATIONS FOR THEIR OWN CROPS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"BY 2010, 90% OF CORN AND SOY IN AMERICA WAS GENETICALLY MODIFIED.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE RIGHT TO SAVE SEEDS WAS REPLACED BY LICENSE AGREEMENTS.",()=>{
|
||
showNextBtn('nextF4');showNextBtn('sourcesF4');showNextBtn('backF4');
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t3);
|
||
},undefined,undefined,f1c);
|
||
},800);
|
||
f1c.push(t2);
|
||
},undefined,undefined,f1c);
|
||
},1200);
|
||
f1c.push(t1);
|
||
},undefined,undefined,f1c);
|
||
},undefined,undefined,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene F5 — 2010+ Decentralized Food
|
||
// Scene F6 — 2026 The Present Food Frontier
|
||
function loadSceneF6(sceneElem) {
|
||
f1c=[];
|
||
rstSceneBtns('sceneF6');
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sF6Text');
|
||
const vis=document.getElementById('sF6Visual');
|
||
const tl=sceneElem.querySelector('.s4tl');
|
||
txt.innerHTML='';
|
||
vis.className='s4visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextF6').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildFTimeline(tl,4);
|
||
typeHtmlCalmly(txt,"THE FUTURE OF FOOD IS HERE — AND THE SAME GATEKEEPER DYNAMICS ARE REPEATING.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"LAB-GROWN MEAT PROMISES TO END FACTORY FARMING — BUT IT'S ULTRA-PROCESSED, ENERGY-INTENSIVE, AND CONTROLLED BY THE SAME CORPORATIONS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"VERTICAL FARMS USE 95% LESS WATER — BUT THEY RUN ON LED LIGHTS AND CLIMATE CONTROL. IS THAT REALLY REGENERATIVE?",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"AI PROMISES TO OPTIMIZE EVERY CROP — BUT WHO OWNS THE ALGORITHMS? WHO OWNS THE DATA?",()=>{
|
||
const t4=setTimeout(()=>{
|
||
document.getElementById('nextF6').style.cssText='';
|
||
showNextBtn('nextF6');
|
||
document.getElementById('sourcesF6').style.cssText='';
|
||
showNextBtn('sourcesF6');
|
||
document.getElementById('backF6').style.cssText='';
|
||
showNextBtn('backF6');
|
||
},500);
|
||
f1c.push(t4);
|
||
},8,20,f1c);
|
||
},500);
|
||
f1c.push(t3);
|
||
},8,20,f1c);
|
||
},500);
|
||
f1c.push(t2);
|
||
},8,20,f1c);
|
||
},600);
|
||
f1c.push(t1);
|
||
},8,20,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene Food Summary
|
||
function loadSceneFoodSum(sceneElem) {
|
||
f1c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sFoodSumText');
|
||
const vis=document.getElementById('sFoodSumVisual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextFoodSum').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"THE INDUSTRIAL FOOD SYSTEM FEEDS BILLIONS — BUT IT ALSO CONTROLS WHAT YOU EAT.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
vis.classList.add('visible');
|
||
let html='<table class="comp-table"><tr><th></th><th>INDUSTRIAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>GATEKEEPERS</td><td>✅ YES — USDA, FDA, MONSANTO</td><td>❌ NONE</td></tr>';
|
||
html+='<tr><td>YOUR FOOD</td><td>PROCESSED / CHEMICAL</td><td>YOU CHOOSE</td></tr>';
|
||
html+='<tr><td>INNOVATION</td><td>PATENT-BASED</td><td>OPEN / REGENERATIVE</td></tr>';
|
||
html+='<tr><td>SOIL</td><td>DEGRADED</td><td>HEALED</td></tr>';
|
||
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\uD83E\uDDEA</span><span class="punch-text">DECENTRALIZED FOOD<br>DOESN\'T REPLACE FARMERS</span></div><div class="punch-card"><span class="punch-icon">\uD83D\uDD11</span><span class="punch-text">IT REPLACES<br>GATEKEEPERS</span></div><div class="punch-card"><span class="punch-icon">\uD83C\uDF31</span><span class="punch-text">THE FUTURE IS<br>REGENERATIVE</span></div></div>';
|
||
vis.innerHTML=html;
|
||
typeHtmlCalmly(txt,"THE QUESTION ISN'T WHETHER TO USE THE INDUSTRIAL FOOD SYSTEM — IT'S WHO DECIDES WHAT'S ON YOUR PLATE.",()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"DECENTRALIZED FOOD DOESN'T REPLACE FARMERS. IT REPLACES GATEKEEPERS.",()=>{
|
||
const t6=setTimeout(()=>{
|
||
document.getElementById('nextFoodSum').style.cssText='';
|
||
showNextBtn('nextFoodSum');
|
||
document.getElementById('sourcesFoodSum').style.cssText='';
|
||
showNextBtn('sourcesFoodSum');
|
||
document.getElementById('backFoodSum').style.cssText='';
|
||
showNextBtn('backFoodSum');
|
||
},400);
|
||
f1c.push(t6);
|
||
},8,20,f1c);
|
||
},8,20,f1c);
|
||
},300);
|
||
f1c.push(t1);
|
||
},8,20,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene 12 — Syntropy Institute
|
||
let s12c = [];
|
||
|
||
function loadScene12(sceneElem) {
|
||
s12c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('s12Text');
|
||
const vis=document.getElementById('s12Visual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene12').style.visibility === 'visible' || document.getElementById('back12').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"SYNTPROPY INSTITUTE IS ONE OF THE STARTUPS UNDER THE LAB 484 UMBRELLA — A PRIVATE ALTERNATIVE-HEALTH / CONCIERGE-CARE SITE FOCUSED ON \"MEDICINE REIMAGINED,\" INCLUDING MANUAL KINETICS, FREQUENCY ANALYSIS/THERAPY, DIGITAL HOMEOPATHY, AND MINISTRY-BASED CARE PROTOCOLS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
const link=document.createElement('a');
|
||
link.href='#';
|
||
link.textContent='SYNTPROPY.INSTITUTE';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00;cursor:pointer;';
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
sessionStorage.setItem('returnToScene', 'scene12');
|
||
window.location.href = 'https://syntropy.institute/';
|
||
});
|
||
txt.appendChild(link);
|
||
vis.classList.add('visible');
|
||
showNextBtn('back12');
|
||
showNextBtn('returnFromScene12');
|
||
},800);
|
||
s12c.push(t1);
|
||
},undefined,undefined,s12c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Scene Food Links — Vimeo + 484.kitchen
|
||
function loadSceneFoodLinks(sceneElem) {
|
||
f1c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sFoodLinksText');
|
||
txt.innerHTML='';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromFoodLinks').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"FROM DECENTRALIZED ORGANIC GROWING SYSTEMS TO MOBILE HEALTHY FOOD EXPERIENCES, WE\u2019RE BUILDING A MORE CONNECTED AND NOURISHING FOOD FUTURE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
showNextBtn('backFoodLinks');
|
||
showNextBtn('returnFromFoodLinks');
|
||
document.getElementById('foodTimelineVimeo').style.cssText='display:block;width:100%;padding:0.8rem 2rem;margin:0.5rem 0;background:#001100;color:#00ff00;border:2px solid #00ff00;cursor:pointer;font-family:\'Courier New\',monospace;font-size:1rem;letter-spacing:2px;transition:background 0.2s ease;';
|
||
document.getElementById('foodTimelineKitchen').style.cssText='display:block;width:100%;padding:0.8rem 2rem;margin:0.5rem 0;background:#001100;color:#00ff00;border:2px solid #00ff00;cursor:pointer;font-family:\'Courier New\',monospace;font-size:1rem;letter-spacing:2px;transition:background 0.2s ease;';
|
||
},600);
|
||
f1c.push(t1);
|
||
},8,20,f1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
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) {
|
||
sceneElem.style.display='flex';
|
||
const hub=document.getElementById('s6TechHub');
|
||
hub.style.opacity='0';
|
||
const title=hub.querySelector('.hub-title');
|
||
const subtitle=document.getElementById('hubSubtitle');
|
||
const rows=hub.querySelectorAll('.hub-row');
|
||
const btns=hub.querySelectorAll('.hub-btn');
|
||
title.classList.remove('visible');
|
||
subtitle.classList.remove('visible');
|
||
rows.forEach(r=>r.classList.remove('visible'));
|
||
btns.forEach(b=>b.classList.remove('visible'));
|
||
sceneElem.style.opacity='0';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
setTimeout(()=>{
|
||
title.classList.add('visible');
|
||
setTimeout(()=>{
|
||
subtitle.classList.add('visible');
|
||
},500);
|
||
rows.forEach((row,i)=>{
|
||
setTimeout(()=>row.classList.add('visible'),(i+1)*400+700);
|
||
});
|
||
setTimeout(()=>{
|
||
btns.forEach((btn,i)=>{
|
||
setTimeout(()=>btn.classList.add('visible'),i*200+100);
|
||
});
|
||
},rows.length*400+900);
|
||
},300);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
hub.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Desktop security interactive visualization state
|
||
let deskAnimId = null;
|
||
let deskMode = 'linux';
|
||
let deskPackets = [];
|
||
let deskClicked = false;
|
||
|
||
const deskModeData = {
|
||
linux: {
|
||
label: 'LINUX', color: '#00ff00',
|
||
locks: { kernel: true, telemetry: true, firewall: true, sandbox: false, antivirus: true, datacollection: true, updates: true },
|
||
packetType: 'stay',
|
||
status: 'LINUX GIVES YOU FULL CONTROL — NO TELEMETRY, NO RESTRICTIONS, COMPLETE TRANSPARENCY.'
|
||
},
|
||
macos: {
|
||
label: 'macOS', color: '#ffaa00',
|
||
locks: { kernel: false, telemetry: false, firewall: true, sandbox: true, antivirus: true, datacollection: false, updates: false },
|
||
packetType: 'mixed',
|
||
status: 'APPLE CONTROLS THE ECOSYSTEM — SOME PRIVACY FEATURES, BUT YOU MUST TRUST APPLE.'
|
||
},
|
||
windows: {
|
||
label: 'WINDOWS', color: '#ff4444',
|
||
locks: { kernel: false, telemetry: false, firewall: true, sandbox: false, antivirus: false, datacollection: false, updates: false },
|
||
packetType: 'leak',
|
||
status: 'MICROSOFT COLLECTS EXTENSIVE TELEMETRY — YOUR DEVICE IS NOT FULLY UNDER YOUR CONTROL.'
|
||
}
|
||
};
|
||
|
||
const deskTabs = [
|
||
{ id: 'linux', x: 170, w: 130, label: 'LINUX' },
|
||
{ id: 'macos', x: 335, w: 130, label: 'macOS' },
|
||
{ id: 'windows', x: 500, w: 130, label: 'WINDOWS' },
|
||
];
|
||
|
||
const deskFeatList = [
|
||
{ id: 'kernel', label: 'KERNEL', x: 215, y: 98, lx: 365 },
|
||
{ id: 'telemetry', label: 'TELEMETRY', x: 215, y: 131, lx: 365 },
|
||
{ id: 'firewall', label: 'FIREWALL', x: 215, y: 164, lx: 365 },
|
||
{ id: 'sandbox', label: 'SANDBOX', x: 215, y: 197, lx: 365 },
|
||
{ id: 'antivirus', label: 'ANTIVIRUS', x: 440, y: 98, lx: 570 },
|
||
{ id: 'datacollection', label: 'DATA COLL.', x: 440, y: 131, lx: 570 },
|
||
{ id: 'updates', label: 'UPDATES', x: 440, y: 164, lx: 570 },
|
||
];
|
||
|
||
function initDeskScene() {
|
||
deskClicked = false;
|
||
deskMode = 'linux';
|
||
initDeskPackets();
|
||
}
|
||
|
||
function initDeskPackets() {
|
||
const mode = deskModeData[deskMode];
|
||
deskPackets = [];
|
||
for (let i = 0; i < 4; i++) {
|
||
const orbit = mode.packetType === 'stay' || (mode.packetType === 'mixed' && i < 2);
|
||
deskPackets.push({
|
||
angle: (i / 4) * Math.PI * 2,
|
||
speed: 0.012 + Math.random() * 0.008,
|
||
radius: 30 + i * 15,
|
||
orbit: orbit,
|
||
leakX: 400 + (Math.random() - 0.5) * 200,
|
||
leakY: 30 + Math.random() * 40,
|
||
progress: Math.random(),
|
||
});
|
||
}
|
||
}
|
||
|
||
function drawDeskScene() {
|
||
const canvas = document.getElementById('deskCanvas');
|
||
if (!canvas || canvas.offsetParent === null) { deskAnimId = requestAnimationFrame(drawDeskScene); return; }
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const mode = deskModeData[deskMode];
|
||
|
||
for (const tab of deskTabs) {
|
||
const active = tab.id === deskMode;
|
||
ctx.fillStyle = active ? mode.color : '#001100';
|
||
ctx.strokeStyle = active ? mode.color : '#003300';
|
||
ctx.lineWidth = active ? 2 : 1;
|
||
const r = 4;
|
||
ctx.beginPath();
|
||
ctx.moveTo(tab.x + r, 8);
|
||
ctx.lineTo(tab.x + tab.w - r, 8);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 8, tab.x + tab.w, 8 + r);
|
||
ctx.lineTo(tab.x + tab.w, 30 - r);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 30, tab.x + tab.w - r, 30);
|
||
ctx.lineTo(tab.x + r, 30);
|
||
ctx.quadraticCurveTo(tab.x, 30, tab.x, 30 - r);
|
||
ctx.lineTo(tab.x, 8 + r);
|
||
ctx.quadraticCurveTo(tab.x, 8, tab.x + r, 8);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = active ? '#000' : (active ? '#000' : mode.color);
|
||
ctx.font = 'bold 11px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(tab.label, tab.x + tab.w / 2, 19);
|
||
}
|
||
|
||
// Monitor bezel
|
||
ctx.strokeStyle = '#003300';
|
||
ctx.lineWidth = 2;
|
||
ctx.fillStyle = '#000400';
|
||
ctx.beginPath();
|
||
ctx.roundRect(170, 60, 460, 200, 12);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
|
||
// Screen inner
|
||
ctx.fillStyle = '#001100';
|
||
ctx.beginPath();
|
||
ctx.roundRect(178, 68, 444, 180, 6);
|
||
ctx.fill();
|
||
|
||
// Stand
|
||
ctx.fillStyle = '#000400';
|
||
ctx.beginPath();
|
||
ctx.moveTo(370, 260);
|
||
ctx.lineTo(430, 260);
|
||
ctx.lineTo(415, 272);
|
||
ctx.lineTo(385, 272);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
|
||
// Base
|
||
ctx.fillStyle = '#000400';
|
||
ctx.fillRect(355, 272, 90, 6);
|
||
|
||
for (const feat of deskFeatList) {
|
||
ctx.fillStyle = '#00ff00';
|
||
ctx.font = '11px Courier New, monospace';
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(feat.label, feat.x, feat.y);
|
||
const locked = mode.locks[feat.id];
|
||
ctx.fillStyle = locked ? '#00ff00' : '#ff4444';
|
||
ctx.font = '14px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(locked ? '\u{1F512}' : '\u{1F513}', feat.lx, feat.y);
|
||
}
|
||
|
||
for (const pkt of deskPackets) {
|
||
let x, y;
|
||
if (pkt.orbit) {
|
||
const cx = 400, cy = 160;
|
||
x = cx + Math.cos(pkt.angle + pkt.progress * Math.PI * 2) * pkt.radius;
|
||
y = cy + Math.sin(pkt.angle + pkt.progress * Math.PI * 2) * pkt.radius * 0.6;
|
||
x = Math.max(185, Math.min(615, x));
|
||
y = Math.max(80, Math.min(250, y));
|
||
} else {
|
||
const t = pkt.progress;
|
||
if (t < 0.5) {
|
||
const p = t * 2;
|
||
x = 400 + (pkt.leakX - 400) * p;
|
||
y = 160 + (pkt.leakY - 160) * p;
|
||
} else {
|
||
const p = (t - 0.5) * 2;
|
||
x = pkt.leakX + (pkt.leakX - 400) * p;
|
||
y = pkt.leakY - 80 * p;
|
||
}
|
||
}
|
||
ctx.shadowColor = mode.color;
|
||
ctx.shadowBlur = 8;
|
||
ctx.fillStyle = mode.color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
pkt.progress += pkt.speed;
|
||
if (pkt.progress >= 1) {
|
||
pkt.progress = 0;
|
||
if (!pkt.orbit) {
|
||
pkt.leakX = 400 + (Math.random() - 0.5) * 200;
|
||
pkt.leakY = 30 + Math.random() * 40;
|
||
}
|
||
}
|
||
}
|
||
|
||
deskAnimId = requestAnimationFrame(drawDeskScene);
|
||
}
|
||
|
||
function handleDeskCanvasClick(mx, my) {
|
||
const canvas = document.getElementById('deskCanvas');
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = (mx - rect.left) * (canvas.width / rect.width);
|
||
const cy = (my - rect.top) * (canvas.height / rect.height);
|
||
for (const tab of deskTabs) {
|
||
if (cx >= tab.x && cx <= tab.x + tab.w && cy >= 8 && cy <= 30) {
|
||
if (tab.id !== deskMode) {
|
||
deskMode = tab.id;
|
||
initDeskPackets();
|
||
const status = document.getElementById('deskStatus');
|
||
if (status) status.textContent = deskModeData[deskMode].status;
|
||
deskClicked = true;
|
||
const s7Row = document.getElementById('s7BtnRow');
|
||
if (s7Row.style.visibility !== 'visible') {
|
||
s7Row.style.cssText = '';
|
||
s7Row.style.visibility = 'visible';
|
||
let ro = 0;
|
||
const rfi = setInterval(() => {
|
||
ro += 0.05; if (ro >= 1) { ro = 1; clearInterval(rfi); s7Row.style.pointerEvents = 'auto'; }
|
||
s7Row.style.opacity = ro;
|
||
}, 30);
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadScene7(sceneElem) {
|
||
s7c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('s7Text');
|
||
const canvasDiv=document.getElementById('s7Canvas');
|
||
txt.innerHTML='';
|
||
canvasDiv.classList.remove('visible');
|
||
if (deskAnimId) { cancelAnimationFrame(deskAnimId); deskAnimId = null; }
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
const s7Row = document.getElementById('s7BtnRow');
|
||
s7Row.style.visibility = 'hidden';
|
||
s7Row.style.opacity = '0';
|
||
s7Row.style.pointerEvents = 'none';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('s7BtnRow').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeCalmly(txt,"YOUR DESKTOP OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
typeCalmly(txt,"\n\nCLICK A TAB TO SEE HOW EACH OS HANDLES SECURITY AND PRIVACY.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
canvasDiv.classList.add('visible');
|
||
initDeskScene();
|
||
drawDeskScene();
|
||
const status=document.getElementById('deskStatus');
|
||
if(status) status.textContent=deskModeData[deskMode].status;
|
||
},300);
|
||
s7c.push(t2);
|
||
},8,20,s7c);
|
||
},600);
|
||
s7c.push(t1);
|
||
},8,20,s7c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Phone security interactive visualization state
|
||
let phoneAnimId = null;
|
||
let phoneMode = 'grapheneos';
|
||
let phonePackets = [];
|
||
let phoneClicked = false;
|
||
|
||
const phoneModeData = {
|
||
grapheneos: {
|
||
label: 'GRAPHENEOS', color: '#00ff00',
|
||
locks: { camera: true, mic: true, location: true, contacts: true, clipboard: true, network: true, storage: true, sensors: true },
|
||
packetType: 'stay',
|
||
status: 'EVERY PERMISSION REQUIRES EXPLICIT CONSENT — APPS CANNOT ACCESS SENSORS WITHOUT YOUR APPROVAL'
|
||
},
|
||
android: {
|
||
label: 'ANDROID', color: '#ff4444',
|
||
locks: { camera: false, mic: false, location: false, contacts: false, clipboard: false, network: false, storage: false, sensors: false },
|
||
packetType: 'leak',
|
||
status: 'GOOGLE PLAY SERVICES HAS SYSTEM-LEVEL ACCESS TO NEARLY EVERY SENSOR — DATA COLLECTED BY DEFAULT'
|
||
},
|
||
ios: {
|
||
label: 'iOS', color: '#ffff00',
|
||
locks: { camera: false, mic: false, location: true, contacts: false, clipboard: false, network: true, storage: true, sensors: false },
|
||
packetType: 'mixed',
|
||
status: 'APPLE BLOCKS SOME TRACKING BUT STILL COLLECTS DATA THROUGH ITS OWN SERVICES'
|
||
}
|
||
};
|
||
|
||
const phoneTabs = [
|
||
{ id: 'grapheneos', x: 170, w: 130, label: 'GRAPHENEOS' },
|
||
{ id: 'android', x: 335, w: 130, label: 'ANDROID' },
|
||
{ id: 'ios', x: 500, w: 130, label: 'iOS' },
|
||
];
|
||
|
||
const phoneFeatList = [
|
||
{ id: 'camera', label: 'CAMERA', x: 215, y: 100, lx: 365 },
|
||
{ id: 'mic', label: 'MICROPHONE', x: 215, y: 135, lx: 365 },
|
||
{ id: 'clipboard', label: 'CLIPBOARD', x: 215, y: 170, lx: 365 },
|
||
{ id: 'storage', label: 'STORAGE', x: 215, y: 205, lx: 365 },
|
||
{ id: 'location', label: 'LOCATION', x: 440, y: 100, lx: 570 },
|
||
{ id: 'contacts', label: 'CONTACTS', x: 440, y: 135, lx: 570 },
|
||
{ id: 'network', label: 'NETWORK', x: 440, y: 170, lx: 570 },
|
||
{ id: 'sensors', label: 'SENSORS', x: 440, y: 205, lx: 570 },
|
||
];
|
||
|
||
function initPhoneScene() {
|
||
phoneClicked = false;
|
||
phoneMode = 'grapheneos';
|
||
initPhonePackets();
|
||
}
|
||
|
||
function initPhonePackets() {
|
||
const mode = phoneModeData[phoneMode];
|
||
phonePackets = [];
|
||
for (let i = 0; i < 4; i++) {
|
||
const orbit = mode.packetType === 'stay' || (mode.packetType === 'mixed' && i < 2);
|
||
phonePackets.push({
|
||
angle: (i / 4) * Math.PI * 2,
|
||
speed: 0.012 + Math.random() * 0.008,
|
||
radius: 30 + i * 15,
|
||
orbit: orbit,
|
||
leakX: 400 + (Math.random() - 0.5) * 200,
|
||
leakY: 30 + Math.random() * 40,
|
||
progress: Math.random(),
|
||
});
|
||
}
|
||
}
|
||
|
||
function drawPhoneScene() {
|
||
const canvas = document.getElementById('phoneCanvas');
|
||
if (!canvas || canvas.offsetParent === null) { phoneAnimId = requestAnimationFrame(drawPhoneScene); return; }
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const mode = phoneModeData[phoneMode];
|
||
|
||
for (const tab of phoneTabs) {
|
||
const active = tab.id === phoneMode;
|
||
ctx.fillStyle = active ? mode.color : '#001100';
|
||
ctx.strokeStyle = active ? mode.color : '#003300';
|
||
ctx.lineWidth = active ? 2 : 1;
|
||
const r = 4;
|
||
ctx.beginPath();
|
||
ctx.moveTo(tab.x + r, 8);
|
||
ctx.lineTo(tab.x + tab.w - r, 8);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 8, tab.x + tab.w, 8 + r);
|
||
ctx.lineTo(tab.x + tab.w, 30 - r);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 30, tab.x + tab.w - r, 30);
|
||
ctx.lineTo(tab.x + r, 30);
|
||
ctx.quadraticCurveTo(tab.x, 30, tab.x, 30 - r);
|
||
ctx.lineTo(tab.x, 8 + r);
|
||
ctx.quadraticCurveTo(tab.x, 8, tab.x + r, 8);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = active ? '#000' : (active ? '#000' : mode.color);
|
||
ctx.font = 'bold 11px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(tab.label, tab.x + tab.w / 2, 19);
|
||
}
|
||
|
||
ctx.strokeStyle = '#003300';
|
||
ctx.lineWidth = 2;
|
||
ctx.fillStyle = '#000400';
|
||
ctx.beginPath();
|
||
ctx.roundRect(170, 65, 460, 205, 16);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
|
||
ctx.fillStyle = '#003300';
|
||
ctx.fillRect(370, 65, 60, 4);
|
||
ctx.fillRect(370, 252, 60, 2);
|
||
|
||
for (const feat of phoneFeatList) {
|
||
ctx.fillStyle = '#00ff00';
|
||
ctx.font = '11px Courier New, monospace';
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(feat.label, feat.x, feat.y);
|
||
const locked = mode.locks[feat.id];
|
||
ctx.fillStyle = locked ? '#00ff00' : '#ff4444';
|
||
ctx.font = '14px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(locked ? '\u{1F512}' : '\u{1F513}', feat.lx, feat.y);
|
||
}
|
||
|
||
for (const pkt of phonePackets) {
|
||
let x, y;
|
||
if (pkt.orbit) {
|
||
const cx = 400, cy = 165;
|
||
x = cx + Math.cos(pkt.angle + pkt.progress * Math.PI * 2) * pkt.radius;
|
||
y = cy + Math.sin(pkt.angle + pkt.progress * Math.PI * 2) * pkt.radius * 0.6;
|
||
x = Math.max(185, Math.min(615, x));
|
||
y = Math.max(80, Math.min(255, y));
|
||
} else {
|
||
const t = pkt.progress;
|
||
if (t < 0.5) {
|
||
const p = t * 2;
|
||
x = 400 + (pkt.leakX - 400) * p;
|
||
y = 170 + (pkt.leakY - 170) * p;
|
||
} else {
|
||
const p = (t - 0.5) * 2;
|
||
x = pkt.leakX + (pkt.leakX - 400) * p;
|
||
y = pkt.leakY - 80 * p;
|
||
}
|
||
}
|
||
ctx.shadowColor = mode.color;
|
||
ctx.shadowBlur = 8;
|
||
ctx.fillStyle = mode.color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
pkt.progress += pkt.speed;
|
||
if (pkt.progress >= 1) {
|
||
pkt.progress = 0;
|
||
if (!pkt.orbit) {
|
||
pkt.leakX = 400 + (Math.random() - 0.5) * 200;
|
||
pkt.leakY = 30 + Math.random() * 40;
|
||
}
|
||
}
|
||
}
|
||
|
||
phoneAnimId = requestAnimationFrame(drawPhoneScene);
|
||
}
|
||
|
||
function handlePhoneCanvasClick(mx, my) {
|
||
const canvas = document.getElementById('phoneCanvas');
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = (mx - rect.left) * (canvas.width / rect.width);
|
||
const cy = (my - rect.top) * (canvas.height / rect.height);
|
||
for (const tab of phoneTabs) {
|
||
if (cx >= tab.x && cx <= tab.x + tab.w && cy >= 8 && cy <= 30) {
|
||
if (tab.id !== phoneMode) {
|
||
phoneMode = tab.id;
|
||
initPhonePackets();
|
||
const status = document.getElementById('phoneStatus');
|
||
if (status) status.textContent = phoneModeData[phoneMode].status;
|
||
phoneClicked = true;
|
||
const s8Row = document.getElementById('s8BtnRow');
|
||
if (s8Row.style.visibility !== 'visible') {
|
||
s8Row.style.cssText = '';
|
||
s8Row.style.visibility = 'visible';
|
||
let ro = 0;
|
||
const rfi = setInterval(() => {
|
||
ro += 0.05; if (ro >= 1) { ro = 1; clearInterval(rfi); s8Row.style.pointerEvents = 'auto'; }
|
||
s8Row.style.opacity = ro;
|
||
}, 30);
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadScene8(sceneElem) {
|
||
s8c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('s8Text');
|
||
const canvasDiv=document.getElementById('s8Canvas');
|
||
txt.innerHTML='';
|
||
canvasDiv.classList.remove('visible');
|
||
if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
const s8Row = document.getElementById('s8BtnRow');
|
||
s8Row.style.visibility = 'hidden';
|
||
s8Row.style.opacity = '0';
|
||
s8Row.style.pointerEvents = 'none';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('s8BtnRow').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
typeCalmly(txt,"\n\nGRAPHENEOS LOCKS DOWN EVERY SENSOR AND PERMISSION — CLICK A TAB TO SEE THE DIFFERENCE.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
canvasDiv.classList.add('visible');
|
||
initPhoneScene();
|
||
drawPhoneScene();
|
||
const status=document.getElementById('phoneStatus');
|
||
if(status) status.textContent=phoneModeData[phoneMode].status;
|
||
},300);
|
||
s8c.push(t2);
|
||
},8,20,s8c);
|
||
},600);
|
||
s8c.push(t1);
|
||
},8,20,s8c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
// Mesh network interactive visualization state
|
||
let meshAnimId = null;
|
||
let meshClicked = false;
|
||
let meshState = null;
|
||
|
||
function initMesh() {
|
||
meshClicked = false;
|
||
meshState = {
|
||
nodes: [
|
||
{ id: 0, x: 130, y: 45, label: 'A', online: true },
|
||
{ id: 1, x: 480, y: 35, label: 'B', online: true },
|
||
{ id: 2, x: 700, y: 75, label: 'C', online: true },
|
||
{ id: 3, x: 70, y: 130, label: 'D', online: true },
|
||
{ id: 4, x: 390, y: 105, label: 'E', online: true },
|
||
{ id: 5, x: 660, y: 165, label: 'F', online: true },
|
||
{ id: 6, x: 230, y: 195, label: 'G', online: true },
|
||
{ id: 7, x: 540, y: 215, label: 'H', online: true },
|
||
{ id: 8, x: 110, y: 265, label: 'I', online: true },
|
||
{ id: 9, x: 350, y: 285, label: 'J', online: true },
|
||
{ id: 10, x: 670, y: 245, label: 'K', online: true },
|
||
{ id: 11, x: 590, y: 310, label: 'L', online: true },
|
||
],
|
||
packets: [],
|
||
};
|
||
computeConnections();
|
||
for (let i = 0; i < 5; i++) spawnPacket();
|
||
}
|
||
|
||
function computeConnections() {
|
||
const online = meshState.nodes.filter(n => n.online);
|
||
for (const node of meshState.nodes) {
|
||
if (!node.online) { node.connections = []; continue; }
|
||
const distances = online
|
||
.filter(n => n.id !== node.id && n.online)
|
||
.map(n => ({ node: n, dist: Math.hypot(n.x - node.x, n.y - node.y) }))
|
||
.sort((a, b) => a.dist - b.dist);
|
||
node.connections = distances.slice(0, 4).map(d => d.node.id);
|
||
}
|
||
ensureConnectivity();
|
||
}
|
||
|
||
function ensureConnectivity() {
|
||
const online = meshState.nodes.filter(n => n.online);
|
||
if (online.length < 2) return;
|
||
const adj = {};
|
||
for (const node of online) {
|
||
adj[node.id] = node.connections.filter(cid => {
|
||
const cn = meshState.nodes.find(n => n.id === cid);
|
||
return cn && cn.online;
|
||
});
|
||
}
|
||
const visited = new Set();
|
||
const queue = [online[0].id];
|
||
visited.add(online[0].id);
|
||
while (queue.length) {
|
||
const cur = queue.shift();
|
||
for (const nb of (adj[cur] || [])) {
|
||
if (!visited.has(nb)) {
|
||
visited.add(nb);
|
||
queue.push(nb);
|
||
}
|
||
}
|
||
}
|
||
const unreachable = online.filter(n => !visited.has(n.id));
|
||
for (const orphan of unreachable) {
|
||
let best = null;
|
||
let bestDist = Infinity;
|
||
for (const node of meshState.nodes) {
|
||
if (!node.online || !visited.has(node.id)) continue;
|
||
const d = Math.hypot(orphan.x - node.x, orphan.y - node.y);
|
||
if (d < bestDist) {
|
||
bestDist = d;
|
||
best = node;
|
||
}
|
||
}
|
||
if (best) {
|
||
orphan.connections.push(best.id);
|
||
best.connections.push(orphan.id);
|
||
visited.add(orphan.id);
|
||
}
|
||
}
|
||
}
|
||
|
||
function spawnPacket() {
|
||
const online = meshState.nodes.filter(n => n.online);
|
||
if (online.length < 2) return;
|
||
const from = online[Math.floor(Math.random() * online.length)];
|
||
if (!from.connections || from.connections.length === 0) return;
|
||
const toId = from.connections[Math.floor(Math.random() * from.connections.length)];
|
||
const to = meshState.nodes.find(n => n.id === toId);
|
||
if (!to || !to.online) return;
|
||
meshState.packets.push({ fromId: from.id, toId: to.id, progress: Math.random() });
|
||
}
|
||
|
||
function drawMesh() {
|
||
const canvas = document.getElementById('meshCanvas');
|
||
if (!canvas || canvas.offsetParent === null) { meshAnimId = requestAnimationFrame(drawMesh); return; }
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
for (const node of meshState.nodes) {
|
||
if (!node.online) continue;
|
||
for (const connId of node.connections) {
|
||
const conn = meshState.nodes.find(n => n.id === connId);
|
||
if (!conn || !conn.online) continue;
|
||
ctx.strokeStyle = '#003300';
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(node.x, node.y);
|
||
ctx.lineTo(conn.x, conn.y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
for (const pkt of meshState.packets) {
|
||
const from = meshState.nodes.find(n => n.id === pkt.fromId);
|
||
const to = meshState.nodes.find(n => n.id === pkt.toId);
|
||
if (!from || !to || !from.online || !to.online) continue;
|
||
const x = from.x + (to.x - from.x) * pkt.progress;
|
||
const y = from.y + (to.y - from.y) * pkt.progress;
|
||
ctx.shadowColor = '#ffff00';
|
||
ctx.shadowBlur = 10;
|
||
ctx.fillStyle = '#ffff00';
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
}
|
||
|
||
for (const node of meshState.nodes) {
|
||
const color = node.online ? '#00ff00' : '#ff4444';
|
||
if (node.online) {
|
||
ctx.shadowColor = '#00ff00';
|
||
ctx.shadowBlur = 12;
|
||
}
|
||
ctx.fillStyle = color;
|
||
ctx.beginPath();
|
||
ctx.arc(node.x, node.y, 12, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = 2;
|
||
if (!node.online) ctx.setLineDash([3, 3]);
|
||
ctx.beginPath();
|
||
ctx.arc(node.x, node.y, 12, 0, Math.PI * 2);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = color;
|
||
ctx.font = 'bold 11px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(node.label, node.x, node.y + 24);
|
||
}
|
||
|
||
for (const pkt of meshState.packets) {
|
||
pkt.progress += 0.01;
|
||
if (pkt.progress >= 1) {
|
||
pkt.progress = 0;
|
||
pkt.fromId = pkt.toId;
|
||
const from = meshState.nodes.find(n => n.id === pkt.fromId);
|
||
if (!from || !from.online) {
|
||
const online = meshState.nodes.filter(n => n.online);
|
||
if (online.length > 0) pkt.fromId = online[Math.floor(Math.random() * online.length)].id;
|
||
}
|
||
const from2 = meshState.nodes.find(n => n.id === pkt.fromId);
|
||
if (from2 && from2.online && from2.connections) {
|
||
const valid = from2.connections.filter(cid => {
|
||
const cn = meshState.nodes.find(n => n.id === cid);
|
||
return cn && cn.online;
|
||
});
|
||
pkt.toId = valid.length > 0 ? valid[Math.floor(Math.random() * valid.length)] : pkt.fromId;
|
||
}
|
||
}
|
||
}
|
||
|
||
meshState.packets = meshState.packets.filter(p => {
|
||
const from = meshState.nodes.find(n => n.id === p.fromId);
|
||
const to = meshState.nodes.find(n => n.id === p.toId);
|
||
return from && to && from.online && to.online && p.fromId !== p.toId;
|
||
});
|
||
while (meshState.packets.length < 4) spawnPacket();
|
||
|
||
meshAnimId = requestAnimationFrame(drawMesh);
|
||
}
|
||
|
||
function toggleMeshNode(mx, my) {
|
||
const canvas = document.getElementById('meshCanvas');
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = (mx - rect.left) * (canvas.width / rect.width);
|
||
const cy = (my - rect.top) * (canvas.height / rect.height);
|
||
for (const node of meshState.nodes) {
|
||
if (Math.hypot(cx - node.x, cy - node.y) < 20) {
|
||
node.online = !node.online;
|
||
meshState.packets = meshState.packets.filter(p => p.fromId !== node.id && p.toId !== node.id);
|
||
computeConnections();
|
||
const status = document.getElementById('meshStatus');
|
||
if (status) {
|
||
status.textContent = node.online
|
||
? 'NODE ' + node.label + ' RESTORED — MESH PATH FOUND'
|
||
: 'NODE ' + node.label + ' OFFLINE — MESH REROUTED';
|
||
}
|
||
meshClicked = true;
|
||
if (document.getElementById('returnFromScene9').style.visibility !== 'visible') {
|
||
document.getElementById('returnFromScene9').style.cssText = '';
|
||
showNextBtn('returnFromScene9');
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadScene9(sceneElem) {
|
||
s9c=[];
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('s9Text');
|
||
const canvasDiv=document.getElementById('s9Canvas');
|
||
txt.innerHTML='';
|
||
canvasDiv.classList.remove('visible');
|
||
if (meshAnimId) { cancelAnimationFrame(meshAnimId); meshAnimId = null; }
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene9').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeCalmly(txt,"THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — BUT ISPS HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
typeCalmly(txt,"\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
canvasDiv.classList.add('visible');
|
||
initMesh();
|
||
drawMesh();
|
||
const status=document.getElementById('meshStatus');
|
||
if(status) status.textContent='CLICK ANY NODE TO SEE HOW MESH NETWORKS REROUTE WHEN A NODE GOES OFFLINE';
|
||
},300);
|
||
s9c.push(t2);
|
||
},8,20,s9c);
|
||
},600);
|
||
s9c.push(t1);
|
||
},8,20,s9c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneD1(sceneElem) {
|
||
d1c=[];
|
||
rstSceneBtns('sceneD1');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextD1').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildDTimeline(tl,0);
|
||
typeHtmlCalmly(txt,"UNIX WAS DEVELOPED AT BELL LABS IN 1969 BY KEN THOMPSON AND DENNIS RITCHIE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"IT INTRODUCED THE CONCEPT OF MODULAR DESIGN — EVERYTHING IS A FILE.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"UNIX BECAME THE FOUNDATION FOR ALL MODERN OPERATING SYSTEMS.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE PHILOSOPHY: SMALL, FOCUSED TOOLS THAT DO ONE THING WELL.",()=>{
|
||
showNextBtn('nextD1');showNextBtn('sourcesD1');showNextBtn('returnFromD1');
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t3);
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t2);
|
||
},undefined,undefined,d1c);
|
||
},1000);
|
||
d1c.push(t1);
|
||
},undefined,undefined,d1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneD2(sceneElem) {
|
||
d1c=[];
|
||
rstSceneBtns('sceneD2');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextD2').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildDTimeline(tl,1);
|
||
typeHtmlCalmly(txt,"MICROSOFT WINDOWS LAUNCHED IN 1985, BRINGING A GRAPHICAL USER INTERFACE TO THE MASSES.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"IT BECAME THE DOMINANT DESKTOP OS THROUGH AGGRESSIVE MARKETING AND BUNDLING.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"WINDOWS IS PROPRIETARY AND CLOSED SOURCE — MICROSOFT CONTROLS EVERYTHING.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE TRADE-OFF: CONVENIENCE IN EXCHANGE FOR CONTROL.",()=>{
|
||
showNextBtn('nextD2');showNextBtn('sourcesD2');showNextBtn('backD2');showNextBtn('returnFromD2');
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t3);
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t2);
|
||
},undefined,undefined,d1c);
|
||
},1000);
|
||
d1c.push(t1);
|
||
},undefined,undefined,d1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneD3(sceneElem) {
|
||
d1c=[];
|
||
rstSceneBtns('sceneD3');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextD3').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildDTimeline(tl,2);
|
||
typeHtmlCalmly(txt,"LINUX WAS CREATED BY LINUS TORVALDS IN 1991 AS A FREE AND OPEN SOURCE KERNEL.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"IT COMBINED THE UNIX PHILOSOPHY WITH THE GNU TOOLCHAIN — A COMPLETE OPEN SOURCE OS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"LINUX GIVES YOU FULL CONTROL — NO TELEMETRY, NO RESTRICTIONS, COMPLETE TRANSPARENCY.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE KERNEL IS AUDITED BY THOUSANDS OF DEVELOPERS WORLDWIDE.",()=>{
|
||
showNextBtn('nextD3');showNextBtn('sourcesD3');showNextBtn('backD3');showNextBtn('returnFromD3');
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t3);
|
||
},undefined,undefined,d1c);
|
||
},800);
|
||
d1c.push(t2);
|
||
},undefined,undefined,d1c);
|
||
},1000);
|
||
d1c.push(t1);
|
||
},undefined,undefined,d1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneD4(sceneElem) {
|
||
d1c=[];
|
||
rstSceneBtns('sceneD4');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextD4').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildDTimeline(tl,3);
|
||
typeHtmlCalmly(txt,"TODAY, THREE MAJOR DESKTOP OPERATING SYSTEMS DOMINATE — EACH WITH A VERY DIFFERENT APPROACH TO SECURITY.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>LINUX</th><th>macOS</th><th>WINDOWS</th></tr>';
|
||
html+='<tr><td>KERNEL CONTROL</td><td class="btc-col"><span class="no">\u{1F512} YOU</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>TELEMETRY</td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>FIREWALL</td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td></tr>';
|
||
html+='<tr><td>ANTIVIRUS</td><td class="btc-col"><span class="no">\u{1F512} N/A</span></td><td class="btc-col"><span class="no">\u{1F512} BUILT-IN</span></td><td><span class="yes">\u{1F513} NEEDED</span></td></tr>';
|
||
html+='<tr><td>DATA COLL.</td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>UPDATES</td><td class="btc-col"><span class="no">\u{1F512} YOU CHOOSE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>TRANSPARENCY</td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td><span class="yes">\u{1F513} PARTIAL</span></td><td><span class="yes">\u{1F513} CLOSED</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">LINUX: YOU OWN<br>YOUR MACHINE</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">macOS: TRUST<br>APPLE MODEL</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">WINDOWS: DATA<br>COLLECTED BY MS</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('nextD4');showNextBtn('sourcesD4');showNextBtn('backD4');showNextBtn('returnFromD4');
|
||
},800);
|
||
d1c.push(t1);
|
||
},8,20,d1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneD5(sceneElem) {
|
||
d1c=[];
|
||
rstSceneBtns('sceneD5');
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sD5Text');
|
||
const vis=document.getElementById('sD5Visual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromD5').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"YOUR DESKTOP OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"LINUX GIVES YOU FULL CONTROL WITH COMPLETE TRANSPARENCY — NO COMPANY OWNS YOUR SYSTEM.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<div class="callout-box">\u2692 THE OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('sourcesD5');showNextBtn('backD5');showNextBtn('returnFromD5');showNextBtn('seeInteractiveFromD5');
|
||
},800);
|
||
d1c.push(t2);
|
||
},8,20,d1c);
|
||
},800);
|
||
d1c.push(t1);
|
||
},8,20,d1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneM1(sceneElem) {
|
||
m1c=[];
|
||
rstSceneBtns('sceneM1');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextM1').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildMTimeline(tl,0);
|
||
typeHtmlCalmly(txt,"THE IPHONE LAUNCHED IN 2007 — REVOLUTIONIZING THE MOBILE INDUSTRY.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE APP STORE FOLLOWED IN 2008, CREATING THE FIRST MASS-MARKET CURATED MOBILE ECOSYSTEM.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"APPLE CONTROLS EVERY APP THAT RUNS ON IOS — APPROVAL, REVIEW, AND REVOCATION.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE WALLED GARDEN MODEL: SECURE, BUT YOU DON'T CONTROL YOUR DEVICE.",()=>{
|
||
showNextBtn('nextM1');showNextBtn('sourcesM1');showNextBtn('returnFromM1');
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t3);
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t2);
|
||
},undefined,undefined,m1c);
|
||
},1000);
|
||
m1c.push(t1);
|
||
},undefined,undefined,m1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneM2(sceneElem) {
|
||
m1c=[];
|
||
rstSceneBtns('sceneM2');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextM2').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildMTimeline(tl,1);
|
||
typeHtmlCalmly(txt,"ANDROID LAUNCHED IN 2008 AS AN OPEN SOURCE ALTERNATIVE TO IOS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"ANYONE CAN SIDE-LOAD APPS, USE ALTERNATIVE APP STORES, OR MODIFY THE OS.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"BUT ANDROID SHIPS WITH GOOGLE PLAY SERVICES — SYSTEM-LEVEL ACCESS TO YOUR DATA.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE OPEN MODEL: FLEXIBLE, BUT YOUR DATA IS THE PRODUCT.",()=>{
|
||
showNextBtn('nextM2');showNextBtn('sourcesM2');showNextBtn('backM2');showNextBtn('returnFromM2');
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t3);
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t2);
|
||
},undefined,undefined,m1c);
|
||
},1000);
|
||
m1c.push(t1);
|
||
},undefined,undefined,m1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneM3(sceneElem) {
|
||
m1c=[];
|
||
rstSceneBtns('sceneM3');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextM3').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildMTimeline(tl,2);
|
||
typeHtmlCalmly(txt,"GRAPHENEOS LAUNCHED IN 2019 AS A SECURITY-FOCUSED ANDROID DERIVATIVE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"IT REMOVES ALL GOOGLE SERVICES — NO PLAY SERVICES, NO DATA COLLECTION.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"EVERY SENSOR AND PERMISSION REQUIRES EXPLICIT CONSENT — CAMERA, MIC, LOCATION, AND MORE.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE PRIVACY MODEL: YOU CONTROL YOUR DEVICE.",()=>{
|
||
showNextBtn('nextM3');showNextBtn('sourcesM3');showNextBtn('backM3');showNextBtn('returnFromM3');
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t3);
|
||
},undefined,undefined,m1c);
|
||
},800);
|
||
m1c.push(t2);
|
||
},undefined,undefined,m1c);
|
||
},1000);
|
||
m1c.push(t1);
|
||
},undefined,undefined,m1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneM4(sceneElem) {
|
||
m1c=[];
|
||
rstSceneBtns('sceneM4');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextM4').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildMTimeline(tl,3);
|
||
typeHtmlCalmly(txt,"TODAY, THREE MOBILE OPERATING SYSTEMS DOMINATE — BUT THEY HANDLE YOUR DATA VERY DIFFERENTLY.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>GRAPHENEOS</th><th>ANDROID</th><th>iOS</th></tr>';
|
||
html+='<tr><td>CAMERA</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>MICROPHONE</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>LOCATION</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='<tr><td>CONTACTS</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>CLIPBOARD</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>SENSORS</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>NETWORK</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='<tr><td>STORAGE</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">GRAPHENEOS LOCKS<br>EVERY SENSOR BY DEFAULT</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">ANDROID DATA<br>COLLECTED BY GOOGLE</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">IOS HAS LIMITED<br>TRACKING PREVENTION</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('nextM4');showNextBtn('sourcesM4');showNextBtn('backM4');showNextBtn('returnFromM4');
|
||
},800);
|
||
m1c.push(t1);
|
||
},8,20,m1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneM5(sceneElem) {
|
||
m1c=[];
|
||
rstSceneBtns('sceneM5');
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sM5Text');
|
||
const vis=document.getElementById('sM5Visual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromM5').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"GRAPHENEOS LOCKS DOWN EVERY SENSOR AND PERMISSION — GIVING YOU REAL CONTROL OVER YOUR DATA.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<div class="callout-box">\u2692 THE OS DETERMINES WHO CONTROLS YOUR DEVICE — YOU OR A CORPORATION \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('sourcesM5');showNextBtn('backM5');showNextBtn('returnFromM5');showNextBtn('seeInteractiveFromM5');
|
||
},800);
|
||
m1c.push(t2);
|
||
},8,20,m1c);
|
||
},800);
|
||
m1c.push(t1);
|
||
},8,20,m1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneI1(sceneElem) {
|
||
i1c=[];
|
||
rstSceneBtns('sceneI1');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextI1').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildITimeline(tl,0);
|
||
typeHtmlCalmly(txt,"ARPANET WAS CREATED IN 1969 BY THE U.S. DEPARTMENT OF DEFENSE — THE FIRST NETWORK TO USE PACKET SWITCHING.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"IT CONNECTED FOUR UNIVERSITIES — UCLA, STANFORD, UCSB, AND THE UNIVERSITY OF UTAH.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE DESIGN WAS DECENTRALIZED BY DESIGN — NO SINGLE POINT OF FAILURE.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THIS DECENTRALIZED ARCHITECTURE IS THE FOUNDATION OF THE INTERNET WE KNOW TODAY.",()=>{
|
||
showNextBtn('nextI1');showNextBtn('sourcesI1');showNextBtn('returnFromI1');
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t3);
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t2);
|
||
},undefined,undefined,i1c);
|
||
},1000);
|
||
i1c.push(t1);
|
||
},undefined,undefined,i1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneI2(sceneElem) {
|
||
i1c=[];
|
||
rstSceneBtns('sceneI2');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextI2').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildITimeline(tl,1);
|
||
typeHtmlCalmly(txt,"THE WORLD WIDE WEB WAS INVENTED IN 1991 BY TIM BERNERS-LEE — MAKING THE INTERNET ACCESSIBLE TO EVERYONE.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE WEB OPENED UP A NEW ERA OF DECENTRALIZED COMMUNICATION — ANYONE COULD HOST A WEBSITE.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"BUT AS THE WEB GREW, ISPS BECAME GATEKEEPERS — CONTROLLING ACCESS AND SURVEILLING USERS.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"THE DECENTRALIZED IDEAL OF THE INTERNET BEGAN TO ERODE AS CORPORATIONS TOOK CONTROL.",()=>{
|
||
showNextBtn('nextI2');showNextBtn('sourcesI2');showNextBtn('backI2');showNextBtn('returnFromI2');
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t3);
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t2);
|
||
},undefined,undefined,i1c);
|
||
},1000);
|
||
i1c.push(t1);
|
||
},undefined,undefined,i1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneI3(sceneElem) {
|
||
i1c=[];
|
||
rstSceneBtns('sceneI3');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextI3').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildITimeline(tl,2);
|
||
typeHtmlCalmly(txt,"BY THE 2000S, ISPS HAD CONSOLIDATED INTO MONOPOLIES — CONTROLLING BOTH ACCESS AND SPEED.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"MESH NETWORKS OFFER A RETURN TO DECENTRALIZATION — EVERY NODE IS A ROUTER.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"P2P PROTOCOLS LIKE GUN, IPFS, AND HYPERCORE LET COMMUNITIES BUILD THEIR OWN INTERNET.",()=>{
|
||
const t3=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"MESH NETWORKS ARE CENSORSHIP-RESISTANT — NO ISP CAN TURN THEM OFF.",()=>{
|
||
showNextBtn('nextI3');showNextBtn('sourcesI3');showNextBtn('backI3');showNextBtn('returnFromI3');
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t3);
|
||
},undefined,undefined,i1c);
|
||
},800);
|
||
i1c.push(t2);
|
||
},undefined,undefined,i1c);
|
||
},1000);
|
||
i1c.push(t1);
|
||
},undefined,undefined,i1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneI4(sceneElem) {
|
||
i1c=[];
|
||
rstSceneBtns('sceneI4');
|
||
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(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('nextI4').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
buildITimeline(tl,3);
|
||
typeHtmlCalmly(txt,"TODAY, THE INTERNET IS CONTROLLED BY A HANDFUL OF ISPS AND BIG TECH PLATFORMS — BUT MESH NETWORKS OFFER A WAY OUT.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL ISP</th><th>MESH NETWORK</th></tr>';
|
||
html+='<tr><td>CENSORSHIP</td><td><span class="yes">\u{1F513} ISP CAN BLOCK</span></td><td class="btc-col"><span class="no">\u{1F512} IMPOSSIBLE</span></td></tr>';
|
||
html+='<tr><td>SURVEILLANCE</td><td><span class="yes">\u{1F513} ISP TRACKS</span></td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td></tr>';
|
||
html+='<tr><td>OUTAGE RISK</td><td><span class="yes">\u{1F513} SINGLE POINT</span></td><td class="btc-col"><span class="no">\u{1F512} SELF-HEALING</span></td></tr>';
|
||
html+='<tr><td>SPEED</td><td class="btc-col"><span class="no">\u{1F512} HIGH</span></td><td><span class="yes">\u{1F513} VARIABLE</span></td></tr>';
|
||
html+='<tr><td>COST</td><td><span class="yes">\u{1F513} MONTHLY FEE</span></td><td class="btc-col"><span class="no">\u{1F512} COMMUNITY</span></td></tr>';
|
||
html+='<tr><td>CONTROL</td><td><span class="yes">\u{1F513} ISP</span></td><td class="btc-col"><span class="no">\u{1F512} YOU</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">MESH IS<br>CENSORSHIP-PROOF</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">NO ISP<br>CAN TURN IT OFF</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">YOU CONTROL<br>YOUR CONNECTION</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('nextI4');showNextBtn('sourcesI4');showNextBtn('backI4');showNextBtn('returnFromI4');
|
||
},800);
|
||
i1c.push(t1);
|
||
},8,20,i1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
function loadSceneI5(sceneElem) {
|
||
i1c=[];
|
||
rstSceneBtns('sceneI5');
|
||
sceneElem.style.display='flex';
|
||
const txt=document.getElementById('sI5Text');
|
||
const vis=document.getElementById('sI5Visual');
|
||
txt.innerHTML='';
|
||
vis.className='s5visual';
|
||
let o=0;
|
||
const fi=setInterval(()=>{
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromI5').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||
typeHtmlCalmly(txt,"THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — ISPS AND BIG TECH HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.",()=>{
|
||
const t1=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
typeHtmlCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
|
||
const t2=setTimeout(()=>{
|
||
txt.innerHTML+="\n\n";
|
||
let html='<div class="callout-box">\u2692 THE INTERNET BELONGS TO EVERYONE — DON\u2019T LET ISPS TAKE IT AWAY \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
showNextBtn('sourcesI5');showNextBtn('backI5');showNextBtn('returnFromI5');showNextBtn('seeInteractiveFromI5');
|
||
},800);
|
||
i1c.push(t2);
|
||
},8,20,i1c);
|
||
},800);
|
||
i1c.push(t1);
|
||
},8,20,i1c);
|
||
}
|
||
sceneElem.style.opacity=o;
|
||
},30);
|
||
}
|
||
|
||
let s4c = [];
|
||
let s5c = [];
|
||
let h10c = [];
|
||
let f1c = [];
|
||
let s2c = [];
|
||
let s7c = [];
|
||
let s8c = [];
|
||
let s9c = [];
|
||
let s8bc = [];
|
||
let s7bc = [];
|
||
let d1c = [];
|
||
let i1c = [];
|
||
let m1c = [];
|
||
|
||
// Scene 8b — Data Exfiltration Simulator
|
||
let exfilAnimId = null;
|
||
let exfilMode = 'grapheneos';
|
||
let exfilPackets = [];
|
||
let exfilCounter = 0;
|
||
let exfilCounterTarget = 0;
|
||
|
||
const exfilModeData = {
|
||
grapheneos: { label: 'GRAPHENEOS', counterMax: 0, color: '#00ff00', status: 'YOUR DATA STAYS ON YOUR DEVICE. NO TRACKING. NO PROFILING.' },
|
||
android: { label: 'ANDROID', counterMax: 200, color: '#ff4444', status: 'GOOGLE AND THIRD-PARTY APPS COLLECT YOUR DATA BY DEFAULT. YOU ARE THE PRODUCT.' },
|
||
ios: { label: 'iOS', counterMax: 150, color: '#ffff00', status: 'APPLE COLLECTS DATA THROUGH ITS SERVICES. SOME THIRD-PARTY TRACKING IS BLOCKED.' },
|
||
};
|
||
|
||
const exfilTabs = [
|
||
{ id: 'grapheneos', x: 170, w: 130, label: 'GRAPHENEOS' },
|
||
{ id: 'android', x: 335, w: 130, label: 'ANDROID' },
|
||
{ id: 'ios', x: 500, w: 130, label: 'iOS' },
|
||
];
|
||
|
||
const exfilServers = {
|
||
grapheneos: [],
|
||
android: [
|
||
{ id: 'google', label: 'GOOGLE', x: 540, y: 55, w: 100, h: 34, color: '#4285f4' },
|
||
{ id: 'broker', label: 'DATA BROKER', x: 645, y: 115, w: 115, h: 34, color: '#ff6644' },
|
||
{ id: 'ads', label: 'AD NETWORKS', x: 555, y: 195, w: 115, h: 34, color: '#ff44ff' },
|
||
{ id: 'hacker', label: 'HACKER', x: 635, y: 285, w: 100, h: 34, color: '#ff0000' },
|
||
],
|
||
ios: [
|
||
{ id: 'apple', label: 'APPLE', x: 575, y: 65, w: 100, h: 34, color: '#aaaaaa' },
|
||
{ id: 'ads', label: 'AD NETWORKS', x: 555, y: 185, w: 115, h: 34, color: '#ff44ff' },
|
||
],
|
||
};
|
||
|
||
const exfilDataTypes = [
|
||
{ id: 'location', label: 'LOC', color: '#ff6644' },
|
||
{ id: 'contacts', label: 'CONTACTS', color: '#44aaff' },
|
||
{ id: 'camera', label: 'CAMERA', color: '#ff44ff' },
|
||
{ id: 'mic', label: 'MIC', color: '#ffff44' },
|
||
{ id: 'browsing', label: 'BROWSING', color: '#44ffaa' },
|
||
{ id: 'sms', label: 'SMS', color: '#ff8844' },
|
||
];
|
||
|
||
function initExfilScene() {
|
||
exfilMode = 'grapheneos';
|
||
exfilPackets = [];
|
||
exfilCounter = 0;
|
||
exfilCounterTarget = 0;
|
||
const legend = document.getElementById('exfilLegend');
|
||
if (legend) {
|
||
legend.innerHTML = '';
|
||
for (const dt of exfilDataTypes) {
|
||
const item = document.createElement('span');
|
||
item.className = 'exfil-legend-item';
|
||
item.innerHTML = '<span class="exfil-legend-dot" style="background:' + dt.color + '"></span>' + dt.label;
|
||
legend.appendChild(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
function spawnExfilPacket() {
|
||
const servers = exfilServers[exfilMode];
|
||
if (servers.length === 0) return;
|
||
const server = servers[Math.floor(Math.random() * servers.length)];
|
||
const dataType = exfilDataTypes[Math.floor(Math.random() * exfilDataTypes.length)];
|
||
const px = 80, py = 65, pw = 140, ph = 245;
|
||
const fromX = px + 10 + Math.random() * (pw - 20);
|
||
const fromY = py + 40 + Math.random() * (ph - 60);
|
||
const toX = server.x + Math.random() * server.w;
|
||
const toY = server.y + Math.random() * server.h;
|
||
exfilPackets.push({
|
||
fromX, fromY, toX, toY,
|
||
dataType,
|
||
progress: 0,
|
||
speed: 0.008 + Math.random() * 0.006,
|
||
});
|
||
}
|
||
|
||
function drawExfilScene() {
|
||
const canvas = document.getElementById('exfilCanvas');
|
||
if (!canvas || canvas.offsetParent === null) { exfilAnimId = requestAnimationFrame(drawExfilScene); return; }
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const mode = exfilModeData[exfilMode];
|
||
const servers = exfilServers[exfilMode];
|
||
|
||
// Tabs
|
||
for (const tab of exfilTabs) {
|
||
const active = tab.id === exfilMode;
|
||
ctx.fillStyle = active ? mode.color : '#001100';
|
||
ctx.strokeStyle = active ? mode.color : '#003300';
|
||
ctx.lineWidth = active ? 2 : 1;
|
||
const r = 4;
|
||
ctx.beginPath();
|
||
ctx.moveTo(tab.x + r, 8);
|
||
ctx.lineTo(tab.x + tab.w - r, 8);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 8, tab.x + tab.w, 8 + r);
|
||
ctx.lineTo(tab.x + tab.w, 30 - r);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 30, tab.x + tab.w - r, 30);
|
||
ctx.lineTo(tab.x + r, 30);
|
||
ctx.quadraticCurveTo(tab.x, 30, tab.x, 30 - r);
|
||
ctx.lineTo(tab.x, 8 + r);
|
||
ctx.quadraticCurveTo(tab.x, 8, tab.x + r, 8);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = active ? '#000' : mode.color;
|
||
ctx.font = 'bold 11px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(tab.label, tab.x + tab.w / 2, 19);
|
||
}
|
||
|
||
// Phone silhouette
|
||
const px = 70, py = 60, pw = 140, ph = 250;
|
||
ctx.shadowColor = mode.color;
|
||
ctx.shadowBlur = 15;
|
||
ctx.strokeStyle = mode.color;
|
||
ctx.lineWidth = 2;
|
||
ctx.fillStyle = '#000800';
|
||
ctx.beginPath();
|
||
ctx.roundRect(px, py, pw, ph, 18);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.shadowBlur = 0;
|
||
|
||
// Phone screen
|
||
ctx.fillStyle = '#001100';
|
||
ctx.beginPath();
|
||
ctx.roundRect(px + 8, py + 35, pw - 16, ph - 55, 6);
|
||
ctx.fill();
|
||
|
||
// Camera dot
|
||
ctx.fillStyle = '#003300';
|
||
ctx.beginPath();
|
||
ctx.arc(px + pw / 2, py + 16, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Phone label
|
||
ctx.fillStyle = mode.color;
|
||
ctx.font = 'bold 12px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(exfilMode === 'grapheneos' ? 'SECURE' : 'LEAKING', px + pw / 2, py + ph / 2);
|
||
|
||
// Servers + connection lines
|
||
for (const srv of servers) {
|
||
ctx.strokeStyle = srv.color + '22';
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([4, 6]);
|
||
ctx.beginPath();
|
||
ctx.moveTo(px + pw / 2, py + ph / 2);
|
||
ctx.lineTo(srv.x + srv.w / 2, srv.y + srv.h / 2);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
|
||
ctx.fillStyle = srv.color + '33';
|
||
ctx.strokeStyle = srv.color;
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
ctx.roundRect(srv.x, srv.y, srv.w, srv.h, 4);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = srv.color;
|
||
ctx.font = 'bold 10px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(srv.label, srv.x + srv.w / 2, srv.y + srv.h / 2);
|
||
}
|
||
|
||
// Spawn packets
|
||
if (servers.length > 0 && Math.random() < 0.06) spawnExfilPacket();
|
||
|
||
// Draw and update packets
|
||
for (let i = exfilPackets.length - 1; i >= 0; i--) {
|
||
const pkt = exfilPackets[i];
|
||
const x = pkt.fromX + (pkt.toX - pkt.fromX) * pkt.progress;
|
||
const y = pkt.fromY + (pkt.toY - pkt.fromY) * pkt.progress;
|
||
|
||
ctx.strokeStyle = pkt.dataType.color + '44';
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pkt.fromX, pkt.fromY);
|
||
ctx.lineTo(x, y);
|
||
ctx.stroke();
|
||
|
||
ctx.shadowColor = pkt.dataType.color;
|
||
ctx.shadowBlur = 10;
|
||
ctx.fillStyle = pkt.dataType.color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
|
||
ctx.fillStyle = pkt.dataType.color;
|
||
ctx.font = '8px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'bottom';
|
||
ctx.fillText(pkt.dataType.label, x, y - 6);
|
||
|
||
pkt.progress += pkt.speed;
|
||
if (pkt.progress >= 1) {
|
||
exfilPackets.splice(i, 1);
|
||
if (exfilCounterTarget < mode.counterMax) {
|
||
exfilCounterTarget = Math.min(mode.counterMax, exfilCounterTarget + 18);
|
||
}
|
||
}
|
||
}
|
||
|
||
while (exfilPackets.length > 30) exfilPackets.shift();
|
||
|
||
// Smooth counter
|
||
if (exfilCounter < exfilCounterTarget) {
|
||
exfilCounter = Math.min(exfilCounterTarget, exfilCounter + 5);
|
||
} else if (exfilCounter > exfilCounterTarget) {
|
||
exfilCounter = Math.max(exfilCounterTarget, exfilCounter - 5);
|
||
}
|
||
const ce = document.getElementById('exfilCounter');
|
||
if (ce) {
|
||
ce.textContent = 'DATA VALUE EXPOSED: $' + exfilCounter.toFixed(0) + '/yr';
|
||
ce.style.color = exfilCounter > 0 ? '#ff4444' : '#00ff00';
|
||
}
|
||
|
||
const st = document.getElementById('exfilStatus');
|
||
if (st) st.textContent = mode.status;
|
||
|
||
if (mode.counterMax > 0 && exfilCounter >= mode.counterMax && !window._exfilDone) {
|
||
window._exfilDone = true;
|
||
const rb = document.getElementById('returnFromScene8b');
|
||
if (rb) { rb.style.cssText = ''; showNextBtn('returnFromScene8b'); }
|
||
const sb = document.getElementById('sourcesFromScene8b');
|
||
if (sb) { sb.style.cssText = ''; showNextBtn('sourcesFromScene8b'); }
|
||
}
|
||
|
||
exfilAnimId = requestAnimationFrame(drawExfilScene);
|
||
}
|
||
|
||
function handleExfilCanvasClick(mx, my) {
|
||
const canvas = document.getElementById('exfilCanvas');
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = (mx - rect.left) * (canvas.width / rect.width);
|
||
const cy = (my - rect.top) * (canvas.height / rect.height);
|
||
for (const tab of exfilTabs) {
|
||
if (cx >= tab.x && cx <= tab.x + tab.w && cy >= 8 && cy <= 30) {
|
||
if (tab.id !== exfilMode) {
|
||
exfilMode = tab.id;
|
||
exfilPackets = [];
|
||
exfilCounterTarget = 0;
|
||
window._exfilDone = false;
|
||
if (exfilModeData[exfilMode].counterMax === 0) {
|
||
const rb = document.getElementById('returnFromScene8b');
|
||
if (rb) { rb.style.cssText = ''; showNextBtn('returnFromScene8b'); }
|
||
const sb = document.getElementById('sourcesFromScene8b');
|
||
if (sb) { sb.style.cssText = ''; showNextBtn('sourcesFromScene8b'); }
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadScene8b(sceneElem) {
|
||
s8bc = [];
|
||
sceneElem.style.display = 'flex';
|
||
const txt = document.getElementById('s8bText');
|
||
const canvasDiv = document.getElementById('s8bCanvas');
|
||
txt.innerHTML = '';
|
||
canvasDiv.classList.remove('visible');
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
let o = 0;
|
||
const fi = setInterval(() => {
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene8b').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o += 0.05; if (o >= 1) { o = 1; clearInterval(fi);
|
||
typeCalmly(txt, "EACH TIME YOUR PHONE SENDS DATA TO THIRD-PARTY SERVERS, IT CREATES A DIGITAL PROFILE OF YOU — SOLD TO THE HIGHEST BIDDER.", () => {
|
||
const t1 = setTimeout(() => {
|
||
typeCalmly(txt, "\n\nCLICK THE TABS TO SEE WHERE YOUR DATA ACTUALLY GOES.", () => {
|
||
const t2 = setTimeout(() => {
|
||
canvasDiv.classList.add('visible');
|
||
initExfilScene();
|
||
drawExfilScene();
|
||
}, 300);
|
||
s8bc.push(t2);
|
||
}, 8, 20, s8bc);
|
||
}, 600);
|
||
s8bc.push(t1);
|
||
}, 8, 20, s8bc);
|
||
}
|
||
sceneElem.style.opacity = o;
|
||
}, 30);
|
||
}
|
||
|
||
// Scene Refs tracking
|
||
window.refsCaller = null;
|
||
|
||
// Scene 7b — Desktop Exfiltration Simulator
|
||
let exfilDeskAnimId = null;
|
||
let exfilDeskMode = 'linux';
|
||
let exfilDeskPackets = [];
|
||
let exfilDeskCounter = 0;
|
||
let exfilDeskCounterTarget = 0;
|
||
|
||
const exfilDeskModeData = {
|
||
linux: { label: 'LINUX', counterMax: 0, color: '#00ff00', status: 'LINUX SENDS NO TELEMETRY. YOUR DATA STAYS ON YOUR MACHINE.' },
|
||
macos: { label: 'macOS', counterMax: 100, color: '#ffaa00', status: 'APPLE COLLECTS USAGE DATA AND CAN REMOTELY CONTROL YOUR DEVICE.' },
|
||
windows: { label: 'WINDOWS', counterMax: 150, color: '#ff4444', status: 'MICROSOFT COLLECTS EXTENSIVE TELEMETRY AND SHARES DATA WITH PARTNERS.' },
|
||
};
|
||
|
||
const exfilDeskTabs = [
|
||
{ id: 'linux', x: 170, w: 130, label: 'LINUX' },
|
||
{ id: 'macos', x: 335, w: 130, label: 'macOS' },
|
||
{ id: 'windows', x: 500, w: 130, label: 'WINDOWS' },
|
||
];
|
||
|
||
const exfilDeskServers = {
|
||
linux: [],
|
||
macos: [
|
||
{ id: 'apple', label: 'APPLE', x: 575, y: 65, w: 100, h: 34, color: '#aaaaaa' },
|
||
{ id: 'ads', label: 'AD NETWORKS', x: 555, y: 185, w: 115, h: 34, color: '#ff44ff' },
|
||
],
|
||
windows: [
|
||
{ id: 'ms', label: 'MICROSOFT', x: 535, y: 55, w: 110, h: 34, color: '#00a4ef' },
|
||
{ id: 'broker', label: 'DATA BROKER', x: 645, y: 115, w: 115, h: 34, color: '#ff6644' },
|
||
{ id: 'ads', label: 'AD NETWORKS', x: 560, y: 195, w: 115, h: 34, color: '#ff44ff' },
|
||
{ id: 'telemetry', label: 'TELEMETRY', x: 635, y: 285, w: 110, h: 34, color: '#ff0000' },
|
||
],
|
||
};
|
||
|
||
const exfilDeskDataTypes = [
|
||
{ id: 'telemetry', label: 'TELEMETRY', color: '#ff6644' },
|
||
{ id: 'browsing', label: 'BROWSING', color: '#44aaff' },
|
||
{ id: 'files', label: 'FILES', color: '#ff44ff' },
|
||
{ id: 'keystrokes', label: 'KEYSTROKES', color: '#ffff44' },
|
||
{ id: 'mic', label: 'MIC', color: '#44ffaa' },
|
||
{ id: 'location', label: 'LOCATION', color: '#ff8844' },
|
||
];
|
||
|
||
function initExfilDeskScene() {
|
||
exfilDeskMode = 'linux';
|
||
exfilDeskPackets = [];
|
||
exfilDeskCounter = 0;
|
||
exfilDeskCounterTarget = 0;
|
||
const legend = document.getElementById('exfilDeskLegend');
|
||
if (legend) {
|
||
legend.innerHTML = '';
|
||
for (const dt of exfilDeskDataTypes) {
|
||
const item = document.createElement('span');
|
||
item.className = 'exfil-legend-item';
|
||
item.innerHTML = '<span class="exfil-legend-dot" style="background:' + dt.color + '"></span>' + dt.label;
|
||
legend.appendChild(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
function spawnExfilDeskPacket() {
|
||
const servers = exfilDeskServers[exfilDeskMode];
|
||
if (servers.length === 0) return;
|
||
const server = servers[Math.floor(Math.random() * servers.length)];
|
||
const dataType = exfilDeskDataTypes[Math.floor(Math.random() * exfilDeskDataTypes.length)];
|
||
const px = 80, py = 65, pw = 140, ph = 245;
|
||
const fromX = px + 10 + Math.random() * (pw - 20);
|
||
const fromY = py + 40 + Math.random() * (ph - 60);
|
||
const toX = server.x + Math.random() * server.w;
|
||
const toY = server.y + Math.random() * server.h;
|
||
exfilDeskPackets.push({
|
||
fromX, fromY, toX, toY,
|
||
dataType,
|
||
progress: 0,
|
||
speed: 0.008 + Math.random() * 0.006,
|
||
});
|
||
}
|
||
|
||
function drawExfilDeskScene() {
|
||
const canvas = document.getElementById('exfilDeskCanvas');
|
||
if (!canvas || canvas.offsetParent === null) { exfilDeskAnimId = requestAnimationFrame(drawExfilDeskScene); return; }
|
||
const ctx = canvas.getContext('2d');
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
const mode = exfilDeskModeData[exfilDeskMode];
|
||
const servers = exfilDeskServers[exfilDeskMode];
|
||
|
||
// Tabs
|
||
for (const tab of exfilDeskTabs) {
|
||
const active = tab.id === exfilDeskMode;
|
||
ctx.fillStyle = active ? mode.color : '#001100';
|
||
ctx.strokeStyle = active ? mode.color : '#003300';
|
||
ctx.lineWidth = active ? 2 : 1;
|
||
const r = 4;
|
||
ctx.beginPath();
|
||
ctx.moveTo(tab.x + r, 8);
|
||
ctx.lineTo(tab.x + tab.w - r, 8);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 8, tab.x + tab.w, 8 + r);
|
||
ctx.lineTo(tab.x + tab.w, 30 - r);
|
||
ctx.quadraticCurveTo(tab.x + tab.w, 30, tab.x + tab.w - r, 30);
|
||
ctx.lineTo(tab.x + r, 30);
|
||
ctx.quadraticCurveTo(tab.x, 30, tab.x, 30 - r);
|
||
ctx.lineTo(tab.x, 8 + r);
|
||
ctx.quadraticCurveTo(tab.x, 8, tab.x + r, 8);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = active ? '#000' : mode.color;
|
||
ctx.font = 'bold 11px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(tab.label, tab.x + tab.w / 2, 19);
|
||
}
|
||
|
||
// Monitor silhouette
|
||
const px = 70, py = 55, pw = 140, ph = 245;
|
||
ctx.shadowColor = mode.color;
|
||
ctx.shadowBlur = 15;
|
||
ctx.strokeStyle = mode.color;
|
||
ctx.lineWidth = 2;
|
||
ctx.fillStyle = '#000800';
|
||
ctx.beginPath();
|
||
ctx.roundRect(px, py, pw, ph, 18);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.shadowBlur = 0;
|
||
|
||
ctx.fillStyle = '#001100';
|
||
ctx.beginPath();
|
||
ctx.roundRect(px + 8, py + 35, pw - 16, ph - 55, 6);
|
||
ctx.fill();
|
||
|
||
ctx.fillStyle = mode.color;
|
||
ctx.font = 'bold 12px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(exfilDeskMode === 'linux' ? 'SECURE' : 'LEAKING', px + pw / 2, py + ph / 2);
|
||
|
||
// Servers + connection lines
|
||
for (const srv of servers) {
|
||
ctx.strokeStyle = srv.color + '22';
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([4, 6]);
|
||
ctx.beginPath();
|
||
ctx.moveTo(px + pw / 2, py + ph / 2);
|
||
ctx.lineTo(srv.x + srv.w / 2, srv.y + srv.h / 2);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
|
||
ctx.fillStyle = srv.color + '33';
|
||
ctx.strokeStyle = srv.color;
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
ctx.roundRect(srv.x, srv.y, srv.w, srv.h, 4);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.fillStyle = srv.color;
|
||
ctx.font = 'bold 10px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(srv.label, srv.x + srv.w / 2, srv.y + srv.h / 2);
|
||
}
|
||
|
||
if (servers.length > 0 && Math.random() < 0.06) spawnExfilDeskPacket();
|
||
|
||
for (let i = exfilDeskPackets.length - 1; i >= 0; i--) {
|
||
const pkt = exfilDeskPackets[i];
|
||
const x = pkt.fromX + (pkt.toX - pkt.fromX) * pkt.progress;
|
||
const y = pkt.fromY + (pkt.toY - pkt.fromY) * pkt.progress;
|
||
|
||
ctx.strokeStyle = pkt.dataType.color + '44';
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(pkt.fromX, pkt.fromY);
|
||
ctx.lineTo(x, y);
|
||
ctx.stroke();
|
||
|
||
ctx.shadowColor = pkt.dataType.color;
|
||
ctx.shadowBlur = 10;
|
||
ctx.fillStyle = pkt.dataType.color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.shadowBlur = 0;
|
||
|
||
ctx.fillStyle = pkt.dataType.color;
|
||
ctx.font = '8px Courier New, monospace';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'bottom';
|
||
ctx.fillText(pkt.dataType.label, x, y - 6);
|
||
|
||
pkt.progress += pkt.speed;
|
||
if (pkt.progress >= 1) {
|
||
exfilDeskPackets.splice(i, 1);
|
||
if (exfilDeskCounterTarget < mode.counterMax) {
|
||
exfilDeskCounterTarget = Math.min(mode.counterMax, exfilDeskCounterTarget + 18);
|
||
}
|
||
}
|
||
}
|
||
|
||
while (exfilDeskPackets.length > 30) exfilDeskPackets.shift();
|
||
|
||
if (exfilDeskCounter < exfilDeskCounterTarget) {
|
||
exfilDeskCounter = Math.min(exfilDeskCounterTarget, exfilDeskCounter + 5);
|
||
} else if (exfilDeskCounter > exfilDeskCounterTarget) {
|
||
exfilDeskCounter = Math.max(exfilDeskCounterTarget, exfilDeskCounter - 5);
|
||
}
|
||
const ce = document.getElementById('exfilDeskCounter');
|
||
if (ce) {
|
||
ce.textContent = 'DATA VALUE EXPOSED: $' + exfilDeskCounter.toFixed(0) + '/yr';
|
||
ce.style.color = exfilDeskCounter > 0 ? '#ff4444' : '#00ff00';
|
||
}
|
||
|
||
const st = document.getElementById('exfilDeskStatus');
|
||
if (st) st.textContent = mode.status;
|
||
|
||
if (mode.counterMax > 0 && exfilDeskCounter >= mode.counterMax && !window._exfilDeskDone) {
|
||
window._exfilDeskDone = true;
|
||
const rb = document.getElementById('returnFromScene7b');
|
||
if (rb) { rb.style.cssText = ''; showNextBtn('returnFromScene7b'); }
|
||
const sb = document.getElementById('sourcesFromScene7b');
|
||
if (sb) { sb.style.cssText = ''; showNextBtn('sourcesFromScene7b'); }
|
||
}
|
||
|
||
exfilDeskAnimId = requestAnimationFrame(drawExfilDeskScene);
|
||
}
|
||
|
||
function handleExfilDeskCanvasClick(mx, my) {
|
||
const canvas = document.getElementById('exfilDeskCanvas');
|
||
if (!canvas) return;
|
||
const rect = canvas.getBoundingClientRect();
|
||
const cx = (mx - rect.left) * (canvas.width / rect.width);
|
||
const cy = (my - rect.top) * (canvas.height / rect.height);
|
||
for (const tab of exfilDeskTabs) {
|
||
if (cx >= tab.x && cx <= tab.x + tab.w && cy >= 8 && cy <= 30) {
|
||
if (tab.id !== exfilDeskMode) {
|
||
exfilDeskMode = tab.id;
|
||
exfilDeskPackets = [];
|
||
exfilDeskCounterTarget = 0;
|
||
window._exfilDeskDone = false;
|
||
if (exfilDeskModeData[exfilDeskMode].counterMax === 0) {
|
||
const rb = document.getElementById('returnFromScene7b');
|
||
if (rb) { rb.style.cssText = ''; showNextBtn('returnFromScene7b'); }
|
||
const sb = document.getElementById('sourcesFromScene7b');
|
||
if (sb) { sb.style.cssText = ''; showNextBtn('sourcesFromScene7b'); }
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
function loadScene7b(sceneElem) {
|
||
s7bc = [];
|
||
sceneElem.style.display = 'flex';
|
||
const txt = document.getElementById('s7bText');
|
||
const canvasDiv = document.getElementById('s7bCanvas');
|
||
txt.innerHTML = '';
|
||
canvasDiv.classList.remove('visible');
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
let o = 0;
|
||
const fi = setInterval(() => {
|
||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene7b').style.visibility === 'visible') { clearInterval(fi); return; }
|
||
o += 0.05; if (o >= 1) { o = 1; clearInterval(fi);
|
||
typeCalmly(txt, "EVERY CLICK, EVERY KEYSTROKE, EVERY FILE YOU OPEN — YOUR OS MAY BE REPORTING IT ALL TO CORPORATE SERVERS.", () => {
|
||
const t1 = setTimeout(() => {
|
||
typeCalmly(txt, "\n\nCLICK THE TABS TO SEE WHERE YOUR DATA ACTUALLY GOES.", () => {
|
||
const t2 = setTimeout(() => {
|
||
canvasDiv.classList.add('visible');
|
||
initExfilDeskScene();
|
||
drawExfilDeskScene();
|
||
}, 300);
|
||
s7bc.push(t2);
|
||
}, 8, 20, s7bc);
|
||
}, 600);
|
||
s7bc.push(t1);
|
||
}, 8, 20, s7bc);
|
||
}
|
||
sceneElem.style.opacity = o;
|
||
}, 30);
|
||
}
|
||
|
||
// Initialize on load
|
||
window.addEventListener('load', () => {
|
||
if (sessionStorage.getItem('returnToScene') === 'scene3') {
|
||
sessionStorage.removeItem('returnToScene');
|
||
document.getElementById('matrixCanvas').style.display = 'none';
|
||
document.getElementById('textContainer').style.display = 'none';
|
||
document.getElementById('followBtn').style.display = 'none';
|
||
loadScene3(document.getElementById('scene3'));
|
||
} else if (sessionStorage.getItem('returnToScene') === 'scene12') {
|
||
sessionStorage.removeItem('returnToScene');
|
||
document.getElementById('matrixCanvas').style.display = 'none';
|
||
document.getElementById('textContainer').style.display = 'none';
|
||
document.getElementById('followBtn').style.display = 'none';
|
||
loadScene12(document.getElementById('scene12'));
|
||
} else {
|
||
setTimeout(crtFlicker, 1500);
|
||
}
|
||
});
|
||
|
||
// Button click handlers
|
||
document.getElementById('followBtn').addEventListener('click', () => {
|
||
document.getElementById('followBtn').disabled = true;
|
||
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('yourFoodBtn').addEventListener('click', () => {
|
||
transitionToScene('scene3', loadSceneF1, 'sceneF1');
|
||
});
|
||
document.getElementById('foodVimeo').addEventListener('click', () => {
|
||
sessionStorage.setItem('returnToScene', 'scene3');
|
||
window.location.href = 'https://vimeo.com/801031681/eb502b3911';
|
||
});
|
||
document.getElementById('foodKitchen').addEventListener('click', () => {
|
||
sessionStorage.setItem('returnToScene', 'scene3');
|
||
window.location.href = 'https://484.kitchen';
|
||
});
|
||
document.getElementById('foodClose').addEventListener('click', () => {
|
||
document.getElementById('foodOverlay').classList.remove('visible');
|
||
});
|
||
document.getElementById('yourHealthBtn').addEventListener('click', () => {
|
||
transitionToScene('scene3', loadScene10a, 'scene10a');
|
||
});
|
||
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('back4b').addEventListener('click', () => {
|
||
document.getElementById('scene4b').style.display = 'none';
|
||
loadScene4a(document.getElementById('scene4a'));
|
||
});
|
||
document.getElementById('next4c').addEventListener('click', () => {
|
||
document.getElementById('scene4c').style.display = 'none';
|
||
loadScene4d(document.getElementById('scene4d'));
|
||
});
|
||
document.getElementById('back4c').addEventListener('click', () => {
|
||
document.getElementById('scene4c').style.display = 'none';
|
||
loadScene4b(document.getElementById('scene4b'));
|
||
});
|
||
document.getElementById('next4d').addEventListener('click', () => {
|
||
document.getElementById('scene4d').style.display = 'none';
|
||
loadScene4e(document.getElementById('scene4e'));
|
||
});
|
||
document.getElementById('back4d').addEventListener('click', () => {
|
||
document.getElementById('scene4d').style.display = 'none';
|
||
loadScene4c(document.getElementById('scene4c'));
|
||
});
|
||
document.getElementById('next4e').addEventListener('click', () => {
|
||
document.getElementById('scene4e').style.display = 'none';
|
||
loadScene4f(document.getElementById('scene4f'));
|
||
});
|
||
document.getElementById('back4e').addEventListener('click', () => {
|
||
document.getElementById('scene4e').style.display = 'none';
|
||
loadScene4d(document.getElementById('scene4d'));
|
||
});
|
||
document.getElementById('back4f').addEventListener('click', () => {
|
||
document.getElementById('scene4f').style.display = 'none';
|
||
loadScene4e(document.getElementById('scene4e'));
|
||
});
|
||
document.getElementById('next4f').addEventListener('click', () => {
|
||
document.getElementById('scene4f').style.display = 'none';
|
||
loadScene5(document.getElementById('scene5'));
|
||
});
|
||
['4a','4b','4c','4d','4e','4f'].forEach(function(id){
|
||
document.getElementById('returnFrom'+id).addEventListener('click', function(){
|
||
document.getElementById('scene'+id).style.display = 'none';
|
||
s4c.forEach(t => clearTimeout(t)); s4c = [];
|
||
returnToLab();
|
||
});
|
||
});
|
||
document.getElementById('returnFromScene5').addEventListener('click', () => {
|
||
document.getElementById('scene5').style.display = 'none';
|
||
s4c.forEach(t => clearTimeout(t)); s4c = [];
|
||
returnToLab();
|
||
});
|
||
|
||
document.getElementById('next10a').addEventListener('click', () => {
|
||
document.getElementById('scene10a').style.display = 'none';
|
||
loadScene10b(document.getElementById('scene10b'));
|
||
});
|
||
document.getElementById('next10b').addEventListener('click', () => {
|
||
document.getElementById('scene10b').style.display = 'none';
|
||
loadScene10c(document.getElementById('scene10c'));
|
||
});
|
||
document.getElementById('back10b').addEventListener('click', () => {
|
||
document.getElementById('scene10b').style.display = 'none';
|
||
loadScene10a(document.getElementById('scene10a'));
|
||
});
|
||
document.getElementById('next10c').addEventListener('click', () => {
|
||
document.getElementById('scene10c').style.display = 'none';
|
||
loadScene10d(document.getElementById('scene10d'));
|
||
});
|
||
document.getElementById('back10c').addEventListener('click', () => {
|
||
document.getElementById('scene10c').style.display = 'none';
|
||
loadScene10b(document.getElementById('scene10b'));
|
||
});
|
||
document.getElementById('next10d').addEventListener('click', () => {
|
||
document.getElementById('scene10d').style.display = 'none';
|
||
loadScene10g(document.getElementById('scene10g'));
|
||
});
|
||
document.getElementById('back10d').addEventListener('click', () => {
|
||
document.getElementById('scene10d').style.display = 'none';
|
||
loadScene10c(document.getElementById('scene10c'));
|
||
});
|
||
document.getElementById('next10g').addEventListener('click', () => {
|
||
document.getElementById('scene10g').style.display = 'none';
|
||
loadScene10h(document.getElementById('scene10h'));
|
||
});
|
||
document.getElementById('back10g').addEventListener('click', () => {
|
||
document.getElementById('scene10g').style.display = 'none';
|
||
loadScene10d(document.getElementById('scene10d'));
|
||
});
|
||
document.getElementById('next10h').addEventListener('click', () => {
|
||
document.getElementById('scene10h').style.display = 'none';
|
||
loadScene10e(document.getElementById('scene10e'));
|
||
});
|
||
document.getElementById('back10h').addEventListener('click', () => {
|
||
document.getElementById('scene10h').style.display = 'none';
|
||
loadScene10g(document.getElementById('scene10g'));
|
||
});
|
||
document.getElementById('next10e').addEventListener('click', () => {
|
||
document.getElementById('scene10e').style.display = 'none';
|
||
loadScene10f(document.getElementById('scene10f'));
|
||
});
|
||
document.getElementById('back10e').addEventListener('click', () => {
|
||
document.getElementById('scene10e').style.display = 'none';
|
||
loadScene10h(document.getElementById('scene10h'));
|
||
});
|
||
document.getElementById('back10f').addEventListener('click', () => {
|
||
document.getElementById('scene10f').style.display = 'none';
|
||
loadScene10e(document.getElementById('scene10e'));
|
||
});
|
||
document.getElementById('next10f').addEventListener('click', () => {
|
||
document.getElementById('scene10f').style.display = 'none';
|
||
loadScene11(document.getElementById('scene11'));
|
||
});
|
||
['10a','10b','10c','10d','10e','10f','10g','10h'].forEach(function(id){
|
||
document.getElementById('returnFrom'+id).addEventListener('click', function(){
|
||
document.getElementById('scene'+id).style.display = 'none';
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
returnToLab();
|
||
});
|
||
});
|
||
document.getElementById('returnFromScene11').addEventListener('click', () => {
|
||
document.getElementById('scene11').style.display = 'none';
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
returnToLab();
|
||
});
|
||
document.getElementById('next11').addEventListener('click', () => {
|
||
document.getElementById('scene11').style.display = 'none';
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
loadScene12(document.getElementById('scene12'));
|
||
});
|
||
document.getElementById('returnFromScene12').addEventListener('click', () => {
|
||
document.getElementById('scene12').style.display = 'none';
|
||
s12c.forEach(t => clearTimeout(t)); s12c = [];
|
||
returnToLab();
|
||
});
|
||
document.getElementById('back12').addEventListener('click', () => {
|
||
document.getElementById('scene12').style.display = 'none';
|
||
s12c.forEach(t => clearTimeout(t)); s12c = [];
|
||
rstSceneBtns('scene11');
|
||
loadScene11(document.getElementById('scene11'));
|
||
});
|
||
|
||
document.getElementById('nextF1').addEventListener('click', () => {
|
||
document.getElementById('sceneF1').style.display = 'none';
|
||
loadSceneF2(document.getElementById('sceneF2'));
|
||
});
|
||
document.getElementById('nextF2').addEventListener('click', () => {
|
||
document.getElementById('sceneF2').style.display = 'none';
|
||
loadSceneF3(document.getElementById('sceneF3'));
|
||
});
|
||
document.getElementById('backF2').addEventListener('click', () => {
|
||
document.getElementById('sceneF2').style.display = 'none';
|
||
loadSceneF1(document.getElementById('sceneF1'));
|
||
});
|
||
document.getElementById('nextF3').addEventListener('click', () => {
|
||
document.getElementById('sceneF3').style.display = 'none';
|
||
loadSceneF4(document.getElementById('sceneF4'));
|
||
});
|
||
document.getElementById('backF3').addEventListener('click', () => {
|
||
document.getElementById('sceneF3').style.display = 'none';
|
||
loadSceneF2(document.getElementById('sceneF2'));
|
||
});
|
||
document.getElementById('nextF4').addEventListener('click', () => {
|
||
document.getElementById('sceneF4').style.display = 'none';
|
||
loadSceneF6(document.getElementById('sceneF6'));
|
||
});
|
||
document.getElementById('backF4').addEventListener('click', () => {
|
||
document.getElementById('sceneF4').style.display = 'none';
|
||
loadSceneF3(document.getElementById('sceneF3'));
|
||
});
|
||
document.getElementById('sourcesF6').addEventListener('click', () => {
|
||
refsCaller = 'sceneF6';
|
||
document.getElementById('sceneF6').style.display = 'none';
|
||
document.getElementById('sceneRefs').classList.add('visible');
|
||
});
|
||
document.getElementById('backF6').addEventListener('click', () => {
|
||
document.getElementById('sceneF6').style.display = 'none';
|
||
loadSceneF4(document.getElementById('sceneF4'));
|
||
});
|
||
document.getElementById('nextF6').addEventListener('click', () => {
|
||
document.getElementById('sceneF6').style.display = 'none';
|
||
loadSceneFoodSum(document.getElementById('sceneFoodSum'));
|
||
});
|
||
document.getElementById('nextFoodSum').addEventListener('click', () => {
|
||
document.getElementById('sceneFoodSum').style.display = 'none';
|
||
loadSceneFoodLinks(document.getElementById('sceneFoodLinks'));
|
||
});
|
||
document.getElementById('backFoodSum').addEventListener('click', () => {
|
||
document.getElementById('sceneFoodSum').style.display = 'none';
|
||
loadSceneF6(document.getElementById('sceneF6'));
|
||
});
|
||
['F1','F2','F3','F4','F6','FoodSum'].forEach(function(id){
|
||
document.getElementById('returnFrom'+id).addEventListener('click', function(){
|
||
document.getElementById('scene'+id).style.display = 'none';
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
returnToLab();
|
||
});
|
||
});
|
||
document.getElementById('backFoodLinks').addEventListener('click', () => {
|
||
document.getElementById('sceneFoodLinks').style.display = 'none';
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
loadSceneFoodSum(document.getElementById('sceneFoodSum'));
|
||
});
|
||
document.getElementById('returnFromFoodLinks').addEventListener('click', () => {
|
||
document.getElementById('sceneFoodLinks').style.display = 'none';
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
returnToLab();
|
||
});
|
||
document.getElementById('foodTimelineVimeo').addEventListener('click', () => {
|
||
window.location.href = 'https://vimeo.com/801031681/eb502b3911';
|
||
});
|
||
document.getElementById('foodTimelineKitchen').addEventListener('click', () => {
|
||
window.location.href = 'https://484.kitchen';
|
||
});
|
||
|
||
['4a','4b','4c','4d','4e','4f','5','10a','10b','10c','10d','10e','10f','10g','10h','11','F1','F2','F3','F4','F5','FoodSum','FoodLinks','D1','D2','D3','D4','D5','M1','M2','M3','M4','M5','I1','I2','I3','I4','I5'].forEach(function(id){
|
||
var el = document.getElementById('sources'+id);
|
||
if (el) el.addEventListener('click',function(){
|
||
window.refsCaller='scene'+id;
|
||
document.getElementById('scene'+id).style.display='none';
|
||
document.getElementById('sceneRefs').classList.add('visible');
|
||
});
|
||
});
|
||
|
||
document.getElementById('goDesktopTech').addEventListener('click', () => {
|
||
transitionToScene('scene6', loadSceneD1, 'sceneD1');
|
||
});
|
||
document.getElementById('goMobileTech').addEventListener('click', () => {
|
||
transitionToScene('scene6', loadSceneM1, 'sceneM1');
|
||
});
|
||
document.getElementById('goInternetTech').addEventListener('click', () => {
|
||
transitionToScene('scene6', loadSceneI1, 'sceneI1');
|
||
});
|
||
document.getElementById('returnFromTechHub').addEventListener('click', () => {
|
||
document.getElementById('scene6').style.display = 'none';
|
||
returnToLab();
|
||
});
|
||
|
||
function returnToLab() {
|
||
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||
scene3TypewriterTimeouts = [];
|
||
const s3 = document.getElementById('scene3');
|
||
s3.style.display = 'flex';
|
||
s3.style.opacity = '1';
|
||
document.getElementById('scene3Title').classList.add('visible');
|
||
document.getElementById('scene3Text').innerHTML = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT<br><br><br><br><br><br><br><br><div style=\"text-align:center\">WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED</div>";
|
||
const row = document.getElementById('scene3ChoiceRow');
|
||
row.style.display = 'flex';
|
||
const btns = row.querySelectorAll('.scene3ChoiceBtn');
|
||
btns.forEach(btn => { btn.style.opacity = '0'; btn.style.pointerEvents = 'none'; });
|
||
setTimeout(() => {
|
||
btns.forEach(btn => { btn.style.opacity = '1'; btn.style.pointerEvents = 'auto'; });
|
||
}, 500);
|
||
}
|
||
|
||
// View selector
|
||
document.getElementById('viewMobileBtn').addEventListener('click', () => {
|
||
document.getElementById('viewDesktopWarning').classList.remove('visible');
|
||
setView('mobile');
|
||
dismissViewOverlay();
|
||
});
|
||
document.getElementById('viewDesktopBtn').addEventListener('click', () => {
|
||
if (window.innerWidth < 480) {
|
||
document.getElementById('viewDesktopWarning').classList.add('visible');
|
||
return;
|
||
}
|
||
setView('desktop');
|
||
dismissViewOverlay();
|
||
});
|
||
document.getElementById('viewDesktopContinue').addEventListener('click', () => {
|
||
setView('desktop');
|
||
dismissViewOverlay();
|
||
});
|
||
|
||
// Switch view floating button
|
||
document.getElementById('switchViewBtn').addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
const panel = document.getElementById('switchViewPanel');
|
||
const btn = document.getElementById('switchViewAction');
|
||
const isMobile = document.documentElement.getAttribute('data-view') === 'mobile';
|
||
btn.textContent = isMobile ? 'SWITCH TO DESKTOP VIEW' : 'SWITCH TO MOBILE VIEW';
|
||
panel.classList.toggle('visible');
|
||
});
|
||
document.getElementById('switchViewAction').addEventListener('click', () => {
|
||
const isMobile = document.documentElement.getAttribute('data-view') === 'mobile';
|
||
setView(isMobile ? 'desktop' : 'mobile');
|
||
document.getElementById('switchViewPanel').classList.remove('visible');
|
||
});
|
||
document.getElementById('showViewChooserBtn').addEventListener('click', () => {
|
||
document.getElementById('switchViewPanel').classList.remove('visible');
|
||
document.getElementById('switchViewBtn').style.display = 'none';
|
||
viewChosen = false;
|
||
showViewOverlay();
|
||
});
|
||
document.addEventListener('click', (e) => {
|
||
const panel = document.getElementById('switchViewPanel');
|
||
if (panel.classList.contains('visible') && !e.target.closest('#switchViewBtn') && !e.target.closest('#switchViewPanel')) {
|
||
panel.classList.remove('visible');
|
||
}
|
||
});
|
||
|
||
function showTechHub() {
|
||
if (meshAnimId) { cancelAnimationFrame(meshAnimId); meshAnimId = null; }
|
||
if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
if (deskAnimId) { cancelAnimationFrame(deskAnimId); deskAnimId = null; }
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
const s6 = document.getElementById('scene6');
|
||
s6.style.display = 'flex';
|
||
s6.style.opacity = '1';
|
||
const hub = document.getElementById('s6TechHub');
|
||
hub.style.opacity = '1';
|
||
hub.querySelector('.hub-title').classList.add('visible');
|
||
document.getElementById('hubSubtitle').classList.add('visible');
|
||
hub.querySelectorAll('.hub-row').forEach(r => r.classList.add('visible'));
|
||
hub.querySelectorAll('.hub-btn').forEach(b => b.classList.add('visible'));
|
||
}
|
||
|
||
document.getElementById('returnFromScene7').addEventListener('click', () => {
|
||
document.getElementById('scene7').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
|
||
document.getElementById('returnFromScene8').addEventListener('click', () => {
|
||
document.getElementById('scene8').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
|
||
document.getElementById('returnFromScene9').addEventListener('click', () => {
|
||
document.getElementById('scene9').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
|
||
document.getElementById('nextD1').addEventListener('click', () => {
|
||
document.getElementById('sceneD1').style.display = 'none';
|
||
loadSceneD2(document.getElementById('sceneD2'));
|
||
});
|
||
document.getElementById('nextD2').addEventListener('click', () => {
|
||
document.getElementById('sceneD2').style.display = 'none';
|
||
loadSceneD3(document.getElementById('sceneD3'));
|
||
});
|
||
document.getElementById('nextD3').addEventListener('click', () => {
|
||
document.getElementById('sceneD3').style.display = 'none';
|
||
loadSceneD4(document.getElementById('sceneD4'));
|
||
});
|
||
document.getElementById('nextD4').addEventListener('click', () => {
|
||
document.getElementById('sceneD4').style.display = 'none';
|
||
loadSceneD5(document.getElementById('sceneD5'));
|
||
});
|
||
document.getElementById('returnFromD1').addEventListener('click', () => {
|
||
document.getElementById('sceneD1').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backD2').addEventListener('click', () => {
|
||
document.getElementById('sceneD2').style.display = 'none';
|
||
loadSceneD1(document.getElementById('sceneD1'));
|
||
});
|
||
document.getElementById('returnFromD2').addEventListener('click', () => {
|
||
document.getElementById('sceneD2').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backD3').addEventListener('click', () => {
|
||
document.getElementById('sceneD3').style.display = 'none';
|
||
loadSceneD2(document.getElementById('sceneD2'));
|
||
});
|
||
document.getElementById('returnFromD3').addEventListener('click', () => {
|
||
document.getElementById('sceneD3').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backD4').addEventListener('click', () => {
|
||
document.getElementById('sceneD4').style.display = 'none';
|
||
loadSceneD3(document.getElementById('sceneD3'));
|
||
});
|
||
document.getElementById('returnFromD4').addEventListener('click', () => {
|
||
document.getElementById('sceneD4').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backD5').addEventListener('click', () => {
|
||
document.getElementById('sceneD5').style.display = 'none';
|
||
loadSceneD4(document.getElementById('sceneD4'));
|
||
});
|
||
document.getElementById('returnFromD5').addEventListener('click', () => {
|
||
document.getElementById('sceneD5').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('seeInteractiveFromD5').addEventListener('click', () => {
|
||
if (deskAnimId) { cancelAnimationFrame(deskAnimId); deskAnimId = null; }
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
document.getElementById('sceneD5').style.display = 'none';
|
||
loadScene7(document.getElementById('scene7'));
|
||
});
|
||
|
||
document.getElementById('nextM1').addEventListener('click', () => {
|
||
document.getElementById('sceneM1').style.display = 'none';
|
||
loadSceneM2(document.getElementById('sceneM2'));
|
||
});
|
||
document.getElementById('nextM2').addEventListener('click', () => {
|
||
document.getElementById('sceneM2').style.display = 'none';
|
||
loadSceneM3(document.getElementById('sceneM3'));
|
||
});
|
||
document.getElementById('nextM3').addEventListener('click', () => {
|
||
document.getElementById('sceneM3').style.display = 'none';
|
||
loadSceneM4(document.getElementById('sceneM4'));
|
||
});
|
||
document.getElementById('nextM4').addEventListener('click', () => {
|
||
document.getElementById('sceneM4').style.display = 'none';
|
||
loadSceneM5(document.getElementById('sceneM5'));
|
||
});
|
||
document.getElementById('returnFromM1').addEventListener('click', () => {
|
||
document.getElementById('sceneM1').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backM2').addEventListener('click', () => {
|
||
document.getElementById('sceneM2').style.display = 'none';
|
||
loadSceneM1(document.getElementById('sceneM1'));
|
||
});
|
||
document.getElementById('returnFromM2').addEventListener('click', () => {
|
||
document.getElementById('sceneM2').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backM3').addEventListener('click', () => {
|
||
document.getElementById('sceneM3').style.display = 'none';
|
||
loadSceneM2(document.getElementById('sceneM2'));
|
||
});
|
||
document.getElementById('returnFromM3').addEventListener('click', () => {
|
||
document.getElementById('sceneM3').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backM4').addEventListener('click', () => {
|
||
document.getElementById('sceneM4').style.display = 'none';
|
||
loadSceneM3(document.getElementById('sceneM3'));
|
||
});
|
||
document.getElementById('returnFromM4').addEventListener('click', () => {
|
||
document.getElementById('sceneM4').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backM5').addEventListener('click', () => {
|
||
document.getElementById('sceneM5').style.display = 'none';
|
||
loadSceneM4(document.getElementById('sceneM4'));
|
||
});
|
||
document.getElementById('returnFromM5').addEventListener('click', () => {
|
||
document.getElementById('sceneM5').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('seeInteractiveFromM5').addEventListener('click', () => {
|
||
if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
document.getElementById('sceneM5').style.display = 'none';
|
||
loadScene8(document.getElementById('scene8'));
|
||
});
|
||
|
||
// Internet timeline click handlers
|
||
document.getElementById('nextI1').addEventListener('click', () => {
|
||
document.getElementById('sceneI1').style.display = 'none';
|
||
loadSceneI2(document.getElementById('sceneI2'));
|
||
});
|
||
document.getElementById('nextI2').addEventListener('click', () => {
|
||
document.getElementById('sceneI2').style.display = 'none';
|
||
loadSceneI3(document.getElementById('sceneI3'));
|
||
});
|
||
document.getElementById('nextI3').addEventListener('click', () => {
|
||
document.getElementById('sceneI3').style.display = 'none';
|
||
loadSceneI4(document.getElementById('sceneI4'));
|
||
});
|
||
document.getElementById('nextI4').addEventListener('click', () => {
|
||
document.getElementById('sceneI4').style.display = 'none';
|
||
loadSceneI5(document.getElementById('sceneI5'));
|
||
});
|
||
document.getElementById('returnFromI1').addEventListener('click', () => {
|
||
document.getElementById('sceneI1').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backI2').addEventListener('click', () => {
|
||
document.getElementById('sceneI2').style.display = 'none';
|
||
loadSceneI1(document.getElementById('sceneI1'));
|
||
});
|
||
document.getElementById('returnFromI2').addEventListener('click', () => {
|
||
document.getElementById('sceneI2').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backI3').addEventListener('click', () => {
|
||
document.getElementById('sceneI3').style.display = 'none';
|
||
loadSceneI2(document.getElementById('sceneI2'));
|
||
});
|
||
document.getElementById('returnFromI3').addEventListener('click', () => {
|
||
document.getElementById('sceneI3').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backI4').addEventListener('click', () => {
|
||
document.getElementById('sceneI4').style.display = 'none';
|
||
loadSceneI3(document.getElementById('sceneI3'));
|
||
});
|
||
document.getElementById('returnFromI4').addEventListener('click', () => {
|
||
document.getElementById('sceneI4').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('backI5').addEventListener('click', () => {
|
||
document.getElementById('sceneI5').style.display = 'none';
|
||
loadSceneI4(document.getElementById('sceneI4'));
|
||
});
|
||
document.getElementById('returnFromI5').addEventListener('click', () => {
|
||
document.getElementById('sceneI5').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
document.getElementById('seeInteractiveFromI5').addEventListener('click', () => {
|
||
if (meshAnimId) { cancelAnimationFrame(meshAnimId); meshAnimId = null; }
|
||
document.getElementById('sceneI5').style.display = 'none';
|
||
loadScene9(document.getElementById('scene9'));
|
||
});
|
||
|
||
document.getElementById('meshCanvas').addEventListener('click', (e) => {
|
||
if (meshState) toggleMeshNode(e.clientX, e.clientY);
|
||
});
|
||
|
||
document.getElementById('phoneCanvas').addEventListener('click', (e) => {
|
||
handlePhoneCanvasClick(e.clientX, e.clientY);
|
||
});
|
||
|
||
document.getElementById('deskCanvas').addEventListener('click', (e) => {
|
||
handleDeskCanvasClick(e.clientX, e.clientY);
|
||
});
|
||
|
||
document.getElementById('exfilCanvas').addEventListener('click', (e) => {
|
||
handleExfilCanvasClick(e.clientX, e.clientY);
|
||
});
|
||
|
||
document.getElementById('exfilDeskCanvas').addEventListener('click', (e) => {
|
||
handleExfilDeskCanvasClick(e.clientX, e.clientY);
|
||
});
|
||
|
||
document.getElementById('nextFromScene7').addEventListener('click', () => {
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
if (deskAnimId) { cancelAnimationFrame(deskAnimId); deskAnimId = null; }
|
||
document.getElementById('scene7').style.display = 'none';
|
||
loadScene7b(document.getElementById('scene7b'));
|
||
});
|
||
|
||
document.getElementById('sourcesFromScene7b').addEventListener('click', () => {
|
||
refsCaller = 'scene7b';
|
||
document.getElementById('scene7b').style.display = 'none';
|
||
document.getElementById('sceneRefs').classList.add('visible');
|
||
});
|
||
|
||
document.getElementById('returnFromScene7b').addEventListener('click', () => {
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
document.getElementById('scene7b').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
|
||
document.getElementById('nextFromScene8').addEventListener('click', () => {
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
|
||
document.getElementById('scene8').style.display = 'none';
|
||
loadScene8b(document.getElementById('scene8b'));
|
||
});
|
||
|
||
document.getElementById('sourcesFromScene8b').addEventListener('click', () => {
|
||
refsCaller = 'scene8b';
|
||
document.getElementById('scene8b').style.display = 'none';
|
||
document.getElementById('sceneRefs').classList.add('visible');
|
||
});
|
||
|
||
document.getElementById('returnFromScene8b').addEventListener('click', () => {
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
document.getElementById('scene8b').style.display = 'none';
|
||
showTechHub();
|
||
});
|
||
|
||
// Keyboard shortcuts for testing
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
if (isAndroidApp) return;
|
||
// SceneRefs: return to caller
|
||
const refsDiv = document.getElementById('sceneRefs');
|
||
if (refsDiv.classList.contains('visible')) {
|
||
refsDiv.classList.remove('visible');
|
||
var c=refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene10g'||c==='scene10h'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';
|
||
refsCaller = null;
|
||
return;
|
||
}
|
||
|
||
// 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') {
|
||
s2c.forEach(t => clearTimeout(t));
|
||
s2c = [];
|
||
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').innerHTML =
|
||
"IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT<br><br><br><br><br><br><br><br><div style=\"text-align:center\">WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED</div>";
|
||
s3ChoiceRow.style.display = 'flex';
|
||
const btns3 = s3ChoiceRow.querySelectorAll('.scene3ChoiceBtn');
|
||
btns3.forEach(btn => {
|
||
btn.style.opacity = '0';
|
||
btn.style.pointerEvents = 'none';
|
||
});
|
||
setTimeout(() => {
|
||
btns3.forEach(btn => {
|
||
btn.style.opacity = '1';
|
||
btn.style.pointerEvents = 'auto';
|
||
});
|
||
}, 500);
|
||
}
|
||
|
||
// Scene 4 skip (sub-scenes 4a-4e)
|
||
const s4ids = ['scene4a','scene4b','scene4c','scene4d','scene4e','scene4f'];
|
||
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 = "IN 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');
|
||
document.getElementById('sources4a').style.cssText = '';
|
||
showNextBtn('sources4a');
|
||
} else if (si===1) {
|
||
txt.innerHTML = "\n\n\nIMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS.\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.\n\nON 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.\n\nCITIZENS WERE FORCED TO TURN IN THEIR GOLD IN EXCHANGE FOR PAPER DOLLARS.";
|
||
document.getElementById('next4b').style.cssText = '';
|
||
showNextBtn('next4b');
|
||
document.getElementById('sources4b').style.cssText = '';
|
||
showNextBtn('sources4b');
|
||
document.getElementById('back4b').style.cssText = '';
|
||
showNextBtn('back4b');
|
||
} 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');
|
||
document.getElementById('sources4c').style.cssText = '';
|
||
showNextBtn('sources4c');
|
||
document.getElementById('back4c').style.cssText = '';
|
||
showNextBtn('back4c');
|
||
} 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');
|
||
document.getElementById('sources4d').style.cssText = '';
|
||
showNextBtn('sources4d');
|
||
document.getElementById('back4d').style.cssText = '';
|
||
showNextBtn('back4d');
|
||
} 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>UNCENSORABLE?</td><td class="no">❌ NO</td><td class="yes">✅ YES</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');
|
||
document.getElementById('sources4e').style.cssText = '';
|
||
showNextBtn('sources4e');
|
||
document.getElementById('back4e').style.cssText = '';
|
||
showNextBtn('back4e');
|
||
} else if (si===5) {
|
||
txt.innerHTML = "IN 2026, THE SOUND MONEY THESIS HAS BEEN VINDICATED.\n\nBITCOIN ETFs WERE APPROVED IN JANUARY 2024 — WALL STREET FLOODED IN.\nBITCOIN HIT ALL-TIME HIGHS ABOVE $100,000. GOLD ALSO REACHED NEW RECORDS.\n\n";
|
||
s4.querySelector('.s4visual').innerHTML=
|
||
'<table class="comp-table"><tr><th></th><th>2009</th><th>2026</th></tr>'
|
||
+'<tr><td>BITCOIN PRICE</td><td>$0</td><td>$100K+</td></tr>'
|
||
+'<tr><td>GOLD PRICE</td><td>$900/OZ</td><td>$3,000+/OZ</td></tr>'
|
||
+'<tr><td>US DEBT</td><td>$11.9T</td><td>$35T+</td></tr>'
|
||
+'<tr><td>BTC ADOPTION</td><td>NONE</td><td>ETFs, NATIONS, FORTUNE 500</td></tr>'
|
||
+'<tr><td>GOLD CONFISCATION RISK</td><td>LOW</td><td>REAL (CBDCs RISING)</td></tr>'
|
||
+'</table>'
|
||
+'<div class="punch-row">'
|
||
+'<div class="punch-card"><span class="punch-icon">\uD83D\uDFE0</span><span class="punch-text">BTC $100K+<br>WALL STREET OWNS IT</span></div>'
|
||
+'<div class="punch-card"><span class="punch-icon">\uD83E\uDD47</span><span class="punch-text">GOLD $3K+<br>STILL THE SAFE HAVEN</span></div>'
|
||
+'<div class="punch-card"><span class="punch-icon">\uD83D\uDCC9</span><span class="punch-text">DOLLAR DOWN<br>70% SINCE 2000</span></div>'
|
||
+'</div>';
|
||
s4.querySelector('.s4visual').classList.add('visible');
|
||
document.getElementById('next4f').style.cssText = '';
|
||
showNextBtn('next4f');
|
||
document.getElementById('sources4f').style.cssText = '';
|
||
showNextBtn('sources4f');
|
||
document.getElementById('back4f').style.cssText = '';
|
||
showNextBtn('back4f');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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');
|
||
document.getElementById('sources5').style.cssText='';
|
||
showNextBtn('sources5');
|
||
}
|
||
|
||
// Scene 7 skip
|
||
const s7 = document.getElementById('scene7');
|
||
if (s7.style.display === 'flex') {
|
||
s7c.forEach(t => clearTimeout(t)); s7c = [];
|
||
const txt = document.getElementById('s7Text');
|
||
txt.innerHTML = "YOUR DESKTOP OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION.\n\nCLICK A TAB TO SEE HOW EACH OS HANDLES SECURITY AND PRIVACY.";
|
||
const canvasDiv = document.getElementById('s7Canvas');
|
||
canvasDiv.classList.add('visible');
|
||
if (deskAnimId) { cancelAnimationFrame(deskAnimId); deskAnimId = null; }
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
initDeskScene();
|
||
drawDeskScene();
|
||
const s7Row = document.getElementById('s7BtnRow');
|
||
s7Row.style.cssText = '';
|
||
s7Row.style.visibility = 'visible';
|
||
s7Row.style.opacity = '1';
|
||
s7Row.style.pointerEvents = 'auto';
|
||
}
|
||
|
||
// Scene 8 skip
|
||
const s8 = document.getElementById('scene8');
|
||
if (s8.style.display === 'flex') {
|
||
s8c.forEach(t => clearTimeout(t)); s8c = [];
|
||
const txt = document.getElementById('s8Text');
|
||
txt.innerHTML = "YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nGRAPHENEOS LOCKS DOWN EVERY SENSOR AND PERMISSION — CLICK A TAB TO SEE THE DIFFERENCE.";
|
||
const canvasDiv = document.getElementById('s8Canvas');
|
||
canvasDiv.classList.add('visible');
|
||
if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
initPhoneScene();
|
||
drawPhoneScene();
|
||
const s8Row = document.getElementById('s8BtnRow');
|
||
s8Row.style.cssText = '';
|
||
s8Row.style.visibility = 'visible';
|
||
s8Row.style.opacity = '1';
|
||
s8Row.style.pointerEvents = 'auto';
|
||
}
|
||
|
||
// Scene 9 skip
|
||
const s9 = document.getElementById('scene9');
|
||
if (s9.style.display === 'flex') {
|
||
s9c.forEach(t => clearTimeout(t)); s9c = [];
|
||
const txt = document.getElementById('s9Text');
|
||
txt.innerHTML = "THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — BUT ISPS HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
|
||
const canvasDiv = document.getElementById('s9Canvas');
|
||
canvasDiv.classList.add('visible');
|
||
if (meshAnimId) { cancelAnimationFrame(meshAnimId); meshAnimId = null; }
|
||
initMesh();
|
||
drawMesh();
|
||
document.getElementById('returnFromScene9').style.cssText='';
|
||
showNextBtn('returnFromScene9');
|
||
}
|
||
|
||
// Scene D1 skip
|
||
const sd1 = document.getElementById('sceneD1');
|
||
if (sd1.style.display === 'flex') {
|
||
d1c.forEach(t => clearTimeout(t)); d1c = [];
|
||
const txt = sd1.querySelector('.scene4text');
|
||
const tl = sd1.querySelector('.s4tl');
|
||
buildDTimeline(tl, 0);
|
||
txt.innerHTML = "UNIX WAS DEVELOPED AT BELL LABS IN 1969 BY KEN THOMPSON AND DENNIS RITCHIE.\n\nIT INTRODUCED THE CONCEPT OF MODULAR DESIGN — EVERYTHING IS A FILE.\n\nUNIX BECAME THE FOUNDATION FOR ALL MODERN OPERATING SYSTEMS.\n\nTHE PHILOSOPHY: SMALL, FOCUSED TOOLS THAT DO ONE THING WELL.";
|
||
document.getElementById('nextD1').style.cssText = '';
|
||
showNextBtn('nextD1');
|
||
document.getElementById('sourcesD1').style.cssText = '';
|
||
showNextBtn('sourcesD1');
|
||
document.getElementById('returnFromD1').style.cssText = '';
|
||
showNextBtn('returnFromD1');
|
||
}
|
||
|
||
// Scene D2 skip
|
||
const sd2 = document.getElementById('sceneD2');
|
||
if (sd2.style.display === 'flex') {
|
||
d1c.forEach(t => clearTimeout(t)); d1c = [];
|
||
const txt = sd2.querySelector('.scene4text');
|
||
const tl = sd2.querySelector('.s4tl');
|
||
buildDTimeline(tl, 1);
|
||
txt.innerHTML = "MICROSOFT WINDOWS LAUNCHED IN 1985, BRINGING A GRAPHICAL USER INTERFACE TO THE MASSES.\n\nIT BECAME THE DOMINANT DESKTOP OS THROUGH AGGRESSIVE MARKETING AND BUNDLING.\n\nWINDOWS IS PROPRIETARY AND CLOSED SOURCE — MICROSOFT CONTROLS EVERYTHING.\n\nTHE TRADE-OFF: CONVENIENCE IN EXCHANGE FOR CONTROL.";
|
||
document.getElementById('nextD2').style.cssText = '';
|
||
showNextBtn('nextD2');
|
||
document.getElementById('sourcesD2').style.cssText = '';
|
||
showNextBtn('sourcesD2');
|
||
document.getElementById('backD2').style.cssText = '';
|
||
showNextBtn('backD2');
|
||
document.getElementById('returnFromD2').style.cssText = '';
|
||
showNextBtn('returnFromD2');
|
||
}
|
||
|
||
// Scene D3 skip
|
||
const sd3 = document.getElementById('sceneD3');
|
||
if (sd3.style.display === 'flex') {
|
||
d1c.forEach(t => clearTimeout(t)); d1c = [];
|
||
const txt = sd3.querySelector('.scene4text');
|
||
const tl = sd3.querySelector('.s4tl');
|
||
buildDTimeline(tl, 2);
|
||
txt.innerHTML = "LINUX WAS CREATED BY LINUS TORVALDS IN 1991 AS A FREE AND OPEN SOURCE KERNEL.\n\nIT COMBINED THE UNIX PHILOSOPHY WITH THE GNU TOOLCHAIN — A COMPLETE OPEN SOURCE OS.\n\nLINUX GIVES YOU FULL CONTROL — NO TELEMETRY, NO RESTRICTIONS, COMPLETE TRANSPARENCY.\n\nTHE KERNEL IS AUDITED BY THOUSANDS OF DEVELOPERS WORLDWIDE.";
|
||
document.getElementById('nextD3').style.cssText = '';
|
||
showNextBtn('nextD3');
|
||
document.getElementById('sourcesD3').style.cssText = '';
|
||
showNextBtn('sourcesD3');
|
||
document.getElementById('backD3').style.cssText = '';
|
||
showNextBtn('backD3');
|
||
document.getElementById('returnFromD3').style.cssText = '';
|
||
showNextBtn('returnFromD3');
|
||
}
|
||
|
||
// Scene D4 skip
|
||
const sd4 = document.getElementById('sceneD4');
|
||
if (sd4.style.display === 'flex') {
|
||
d1c.forEach(t => clearTimeout(t)); d1c = [];
|
||
const txt = sd4.querySelector('.scene4text');
|
||
const vis = sd4.querySelector('.s4visual');
|
||
const tl = sd4.querySelector('.s4tl');
|
||
buildDTimeline(tl, 3);
|
||
txt.innerHTML = "TODAY, THREE MAJOR DESKTOP OPERATING SYSTEMS DOMINATE — EACH WITH A VERY DIFFERENT APPROACH TO SECURITY.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>LINUX</th><th>macOS</th><th>WINDOWS</th></tr>';
|
||
html+='<tr><td>KERNEL CONTROL</td><td class="btc-col"><span class="no">\u{1F512} YOU</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>TELEMETRY</td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>FIREWALL</td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td></tr>';
|
||
html+='<tr><td>ANTIVIRUS</td><td class="btc-col"><span class="no">\u{1F512} N/A</span></td><td class="btc-col"><span class="no">\u{1F512} BUILT-IN</span></td><td><span class="yes">\u{1F513} NEEDED</span></td></tr>';
|
||
html+='<tr><td>DATA COLL.</td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>UPDATES</td><td class="btc-col"><span class="no">\u{1F512} YOU CHOOSE</span></td><td><span class="yes">\u{1F513} APPLE</span></td><td><span class="yes">\u{1F513} MS</span></td></tr>';
|
||
html+='<tr><td>TRANSPARENCY</td><td class="btc-col"><span class="no">\u{1F512} FULL</span></td><td><span class="yes">\u{1F513} PARTIAL</span></td><td><span class="yes">\u{1F513} CLOSED</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">LINUX: YOU OWN<br>YOUR MACHINE</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">macOS: TRUST<br>APPLE MODEL</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">WINDOWS: DATA<br>COLLECTED BY MS</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('nextD4').style.cssText = '';
|
||
showNextBtn('nextD4');
|
||
document.getElementById('sourcesD4').style.cssText = '';
|
||
showNextBtn('sourcesD4');
|
||
document.getElementById('backD4').style.cssText = '';
|
||
showNextBtn('backD4');
|
||
document.getElementById('returnFromD4').style.cssText = '';
|
||
showNextBtn('returnFromD4');
|
||
}
|
||
|
||
// Scene D5 skip
|
||
const sd5 = document.getElementById('sceneD5');
|
||
if (sd5.style.display === 'flex') {
|
||
d1c.forEach(t => clearTimeout(t)); d1c = [];
|
||
const txt = document.getElementById('sD5Text');
|
||
const vis = document.getElementById('sD5Visual');
|
||
txt.innerHTML = "YOUR DESKTOP OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION.\n\nLINUX GIVES YOU FULL CONTROL WITH COMPLETE TRANSPARENCY — NO COMPANY OWNS YOUR SYSTEM.";
|
||
let html='<div class="callout-box">\u2692 THE OS DETERMINES WHO CONTROLS YOUR COMPUTER — YOU OR A CORPORATION \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('backD5').style.cssText = '';
|
||
showNextBtn('backD5');
|
||
document.getElementById('returnFromD5').style.cssText = '';
|
||
showNextBtn('returnFromD5');
|
||
document.getElementById('sourcesD5').style.cssText = '';
|
||
showNextBtn('sourcesD5');
|
||
document.getElementById('seeInteractiveFromD5').style.cssText = '';
|
||
showNextBtn('seeInteractiveFromD5');
|
||
}
|
||
|
||
// Scene M1 skip
|
||
const sm1 = document.getElementById('sceneM1');
|
||
if (sm1.style.display === 'flex') {
|
||
m1c.forEach(t => clearTimeout(t)); m1c = [];
|
||
const txt = sm1.querySelector('.scene4text');
|
||
const tl = sm1.querySelector('.s4tl');
|
||
buildMTimeline(tl, 0);
|
||
txt.innerHTML = "THE IPHONE LAUNCHED IN 2007 — REVOLUTIONIZING THE MOBILE INDUSTRY.\n\nTHE APP STORE FOLLOWED IN 2008, CREATING THE FIRST MASS-MARKET CURATED MOBILE ECOSYSTEM.\n\nAPPLE CONTROLS EVERY APP THAT RUNS ON IOS — APPROVAL, REVIEW, AND REVOCATION.\n\nTHE WALLED GARDEN MODEL: SECURE, BUT YOU DON'T CONTROL YOUR DEVICE.";
|
||
document.getElementById('nextM1').style.cssText = '';
|
||
showNextBtn('nextM1');
|
||
document.getElementById('sourcesM1').style.cssText = '';
|
||
showNextBtn('sourcesM1');
|
||
document.getElementById('returnFromM1').style.cssText = '';
|
||
showNextBtn('returnFromM1');
|
||
}
|
||
|
||
// Scene M2 skip
|
||
const sm2 = document.getElementById('sceneM2');
|
||
if (sm2.style.display === 'flex') {
|
||
m1c.forEach(t => clearTimeout(t)); m1c = [];
|
||
const txt = sm2.querySelector('.scene4text');
|
||
const tl = sm2.querySelector('.s4tl');
|
||
buildMTimeline(tl, 1);
|
||
txt.innerHTML = "ANDROID LAUNCHED IN 2008 AS AN OPEN SOURCE ALTERNATIVE TO IOS.\n\nANYONE CAN SIDE-LOAD APPS, USE ALTERNATIVE APP STORES, OR MODIFY THE OS.\n\nBUT ANDROID SHIPS WITH GOOGLE PLAY SERVICES — SYSTEM-LEVEL ACCESS TO YOUR DATA.\n\nTHE OPEN MODEL: FLEXIBLE, BUT YOUR DATA IS THE PRODUCT.";
|
||
document.getElementById('nextM2').style.cssText = '';
|
||
showNextBtn('nextM2');
|
||
document.getElementById('sourcesM2').style.cssText = '';
|
||
showNextBtn('sourcesM2');
|
||
document.getElementById('backM2').style.cssText = '';
|
||
showNextBtn('backM2');
|
||
document.getElementById('returnFromM2').style.cssText = '';
|
||
showNextBtn('returnFromM2');
|
||
}
|
||
|
||
// Scene M3 skip
|
||
const sm3 = document.getElementById('sceneM3');
|
||
if (sm3.style.display === 'flex') {
|
||
m1c.forEach(t => clearTimeout(t)); m1c = [];
|
||
const txt = sm3.querySelector('.scene4text');
|
||
const tl = sm3.querySelector('.s4tl');
|
||
buildMTimeline(tl, 2);
|
||
txt.innerHTML = "GRAPHENEOS LAUNCHED IN 2019 AS A SECURITY-FOCUSED ANDROID DERIVATIVE.\n\nIT REMOVES ALL GOOGLE SERVICES — NO PLAY SERVICES, NO DATA COLLECTION.\n\nEVERY SENSOR AND PERMISSION REQUIRES EXPLICIT CONSENT — CAMERA, MIC, LOCATION, AND MORE.\n\nTHE PRIVACY MODEL: YOU CONTROL YOUR DEVICE.";
|
||
document.getElementById('nextM3').style.cssText = '';
|
||
showNextBtn('nextM3');
|
||
document.getElementById('sourcesM3').style.cssText = '';
|
||
showNextBtn('sourcesM3');
|
||
document.getElementById('backM3').style.cssText = '';
|
||
showNextBtn('backM3');
|
||
document.getElementById('returnFromM3').style.cssText = '';
|
||
showNextBtn('returnFromM3');
|
||
}
|
||
|
||
// Scene M4 skip
|
||
const sm4 = document.getElementById('sceneM4');
|
||
if (sm4.style.display === 'flex') {
|
||
m1c.forEach(t => clearTimeout(t)); m1c = [];
|
||
const txt = sm4.querySelector('.scene4text');
|
||
const vis = sm4.querySelector('.s4visual');
|
||
const tl = sm4.querySelector('.s4tl');
|
||
buildMTimeline(tl, 3);
|
||
txt.innerHTML = "TODAY, THREE MOBILE OPERATING SYSTEMS DOMINATE — BUT THEY HANDLE YOUR DATA VERY DIFFERENTLY.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>GRAPHENEOS</th><th>ANDROID</th><th>iOS</th></tr>';
|
||
html+='<tr><td>CAMERA</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>MICROPHONE</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>LOCATION</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='<tr><td>CONTACTS</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>CLIPBOARD</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>SENSORS</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td><span class="yes">\u{1F513} OPEN</span></td></tr>';
|
||
html+='<tr><td>NETWORK</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='<tr><td>STORAGE</td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td><td><span class="yes">\u{1F513} OPEN</span></td><td class="btc-col"><span class="no">\u{1F512} LOCKED</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">GRAPHENEOS LOCKS<br>EVERY SENSOR BY DEFAULT</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">ANDROID DATA<br>COLLECTED BY GOOGLE</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">IOS HAS LIMITED<br>TRACKING PREVENTION</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('nextM4').style.cssText = '';
|
||
showNextBtn('nextM4');
|
||
document.getElementById('sourcesM4').style.cssText = '';
|
||
showNextBtn('sourcesM4');
|
||
document.getElementById('backM4').style.cssText = '';
|
||
showNextBtn('backM4');
|
||
document.getElementById('returnFromM4').style.cssText = '';
|
||
showNextBtn('returnFromM4');
|
||
}
|
||
|
||
// Scene M5 skip
|
||
const sm5 = document.getElementById('sceneM5');
|
||
if (sm5.style.display === 'flex') {
|
||
m1c.forEach(t => clearTimeout(t)); m1c = [];
|
||
const txt = document.getElementById('sM5Text');
|
||
const vis = document.getElementById('sM5Visual');
|
||
txt.innerHTML = "YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nGRAPHENEOS LOCKS DOWN EVERY SENSOR AND PERMISSION — GIVING YOU REAL CONTROL OVER YOUR DATA.";
|
||
let html='<div class="callout-box">\u2692 THE OS DETERMINES WHO CONTROLS YOUR DEVICE — YOU OR A CORPORATION \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('backM5').style.cssText = '';
|
||
showNextBtn('backM5');
|
||
document.getElementById('returnFromM5').style.cssText = '';
|
||
showNextBtn('returnFromM5');
|
||
document.getElementById('sourcesM5').style.cssText = '';
|
||
showNextBtn('sourcesM5');
|
||
document.getElementById('seeInteractiveFromM5').style.cssText = '';
|
||
showNextBtn('seeInteractiveFromM5');
|
||
}
|
||
|
||
// Scene I1 skip
|
||
const si1 = document.getElementById('sceneI1');
|
||
if (si1.style.display === 'flex') {
|
||
i1c.forEach(t => clearTimeout(t)); i1c = [];
|
||
const txt = si1.querySelector('.scene4text');
|
||
const tl = si1.querySelector('.s4tl');
|
||
buildITimeline(tl, 0);
|
||
txt.innerHTML = "ARPANET WAS CREATED IN 1969 BY THE U.S. DEPARTMENT OF DEFENSE — THE FIRST NETWORK TO USE PACKET SWITCHING.\n\nIT CONNECTED FOUR UNIVERSITIES — UCLA, STANFORD, UCSB, AND THE UNIVERSITY OF UTAH.\n\nTHE DESIGN WAS DECENTRALIZED BY DESIGN — NO SINGLE POINT OF FAILURE.\n\nTHIS DECENTRALIZED ARCHITECTURE IS THE FOUNDATION OF THE INTERNET WE KNOW TODAY.";
|
||
document.getElementById('nextI1').style.cssText = '';
|
||
showNextBtn('nextI1');
|
||
document.getElementById('sourcesI1').style.cssText = '';
|
||
showNextBtn('sourcesI1');
|
||
document.getElementById('returnFromI1').style.cssText = '';
|
||
showNextBtn('returnFromI1');
|
||
}
|
||
|
||
// Scene I2 skip
|
||
const si2 = document.getElementById('sceneI2');
|
||
if (si2.style.display === 'flex') {
|
||
i1c.forEach(t => clearTimeout(t)); i1c = [];
|
||
const txt = si2.querySelector('.scene4text');
|
||
const tl = si2.querySelector('.s4tl');
|
||
buildITimeline(tl, 1);
|
||
txt.innerHTML = "THE WORLD WIDE WEB WAS INVENTED IN 1991 BY TIM BERNERS-LEE — MAKING THE INTERNET ACCESSIBLE TO EVERYONE.\n\nTHE WEB OPENED UP A NEW ERA OF DECENTRALIZED COMMUNICATION — ANYONE COULD HOST A WEBSITE.\n\nBUT AS THE WEB GREW, ISPS BECAME GATEKEEPERS — CONTROLLING ACCESS AND SURVEILLING USERS.\n\nTHE DECENTRALIZED IDEAL OF THE INTERNET BEGAN TO ERODE AS CORPORATIONS TOOK CONTROL.";
|
||
document.getElementById('nextI2').style.cssText = '';
|
||
showNextBtn('nextI2');
|
||
document.getElementById('sourcesI2').style.cssText = '';
|
||
showNextBtn('sourcesI2');
|
||
document.getElementById('backI2').style.cssText = '';
|
||
showNextBtn('backI2');
|
||
document.getElementById('returnFromI2').style.cssText = '';
|
||
showNextBtn('returnFromI2');
|
||
}
|
||
|
||
// Scene I3 skip
|
||
const si3 = document.getElementById('sceneI3');
|
||
if (si3.style.display === 'flex') {
|
||
i1c.forEach(t => clearTimeout(t)); i1c = [];
|
||
const txt = si3.querySelector('.scene4text');
|
||
const tl = si3.querySelector('.s4tl');
|
||
buildITimeline(tl, 2);
|
||
txt.innerHTML = "BY THE 2000S, ISPS HAD CONSOLIDATED INTO MONOPOLIES — CONTROLLING BOTH ACCESS AND SPEED.\n\nMESH NETWORKS OFFER A RETURN TO DECENTRALIZATION — EVERY NODE IS A ROUTER.\n\nP2P PROTOCOLS LIKE GUN, IPFS, AND HYPERCORE LET COMMUNITIES BUILD THEIR OWN INTERNET.\n\nMESH NETWORKS ARE CENSORSHIP-RESISTANT — NO ISP CAN TURN THEM OFF.";
|
||
document.getElementById('nextI3').style.cssText = '';
|
||
showNextBtn('nextI3');
|
||
document.getElementById('sourcesI3').style.cssText = '';
|
||
showNextBtn('sourcesI3');
|
||
document.getElementById('backI3').style.cssText = '';
|
||
showNextBtn('backI3');
|
||
document.getElementById('returnFromI3').style.cssText = '';
|
||
showNextBtn('returnFromI3');
|
||
}
|
||
|
||
// Scene I4 skip
|
||
const si4 = document.getElementById('sceneI4');
|
||
if (si4.style.display === 'flex') {
|
||
i1c.forEach(t => clearTimeout(t)); i1c = [];
|
||
const txt = si4.querySelector('.scene4text');
|
||
const vis = si4.querySelector('.s4visual');
|
||
const tl = si4.querySelector('.s4tl');
|
||
buildITimeline(tl, 3);
|
||
txt.innerHTML = "TODAY, THE INTERNET IS CONTROLLED BY A HANDFUL OF ISPS AND BIG TECH PLATFORMS — BUT MESH NETWORKS OFFER A WAY OUT.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL ISP</th><th>MESH NETWORK</th></tr>';
|
||
html+='<tr><td>CENSORSHIP</td><td><span class="yes">\u{1F513} ISP CAN BLOCK</span></td><td class="btc-col"><span class="no">\u{1F512} IMPOSSIBLE</span></td></tr>';
|
||
html+='<tr><td>SURVEILLANCE</td><td><span class="yes">\u{1F513} ISP TRACKS</span></td><td class="btc-col"><span class="no">\u{1F512} NONE</span></td></tr>';
|
||
html+='<tr><td>OUTAGE RISK</td><td><span class="yes">\u{1F513} SINGLE POINT</span></td><td class="btc-col"><span class="no">\u{1F512} SELF-HEALING</span></td></tr>';
|
||
html+='<tr><td>SPEED</td><td class="btc-col"><span class="no">\u{1F512} HIGH</span></td><td><span class="yes">\u{1F513} VARIABLE</span></td></tr>';
|
||
html+='<tr><td>COST</td><td><span class="yes">\u{1F513} MONTHLY FEE</span></td><td class="btc-col"><span class="no">\u{1F512} COMMUNITY</span></td></tr>';
|
||
html+='<tr><td>CONTROL</td><td><span class="yes">\u{1F513} ISP</span></td><td class="btc-col"><span class="no">\u{1F512} YOU</span></td></tr>';
|
||
html+='</table>';
|
||
html+='<div class="punch-row"><div class="punch-card"><span class="punch-icon">\u{1F512}</span><span class="punch-text">MESH IS<br>CENSORSHIP-PROOF</span></div><div class="punch-card"><span class="punch-icon">\u{1F4E1}</span><span class="punch-text">NO ISP<br>CAN TURN IT OFF</span></div><div class="punch-card"><span class="punch-icon">\u{1F6E1}</span><span class="punch-text">YOU CONTROL<br>YOUR CONNECTION</span></div></div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('nextI4').style.cssText = '';
|
||
showNextBtn('nextI4');
|
||
document.getElementById('sourcesI4').style.cssText = '';
|
||
showNextBtn('sourcesI4');
|
||
document.getElementById('backI4').style.cssText = '';
|
||
showNextBtn('backI4');
|
||
document.getElementById('returnFromI4').style.cssText = '';
|
||
showNextBtn('returnFromI4');
|
||
}
|
||
|
||
// Scene I5 skip
|
||
const si5 = document.getElementById('sceneI5');
|
||
if (si5.style.display === 'flex') {
|
||
i1c.forEach(t => clearTimeout(t)); i1c = [];
|
||
const txt = document.getElementById('sI5Text');
|
||
const vis = document.getElementById('sI5Visual');
|
||
txt.innerHTML = "THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — ISPS AND BIG TECH HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
|
||
let html='<div class="callout-box">\u2692 THE INTERNET BELONGS TO EVERYONE — DON\u2019T LET ISPS TAKE IT AWAY \u2692</div>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('backI5').style.cssText = '';
|
||
showNextBtn('backI5');
|
||
document.getElementById('returnFromI5').style.cssText = '';
|
||
showNextBtn('returnFromI5');
|
||
document.getElementById('sourcesI5').style.cssText = '';
|
||
showNextBtn('sourcesI5');
|
||
document.getElementById('seeInteractiveFromI5').style.cssText = '';
|
||
showNextBtn('seeInteractiveFromI5');
|
||
}
|
||
|
||
// Scene 8b skip
|
||
const s8b = document.getElementById('scene8b');
|
||
if (s8b.style.display === 'flex') {
|
||
s8bc.forEach(t => clearTimeout(t)); s8bc = [];
|
||
const txt = document.getElementById('s8bText');
|
||
txt.innerHTML = "EACH TIME YOUR PHONE SENDS DATA TO THIRD-PARTY SERVERS, IT CREATES A DIGITAL PROFILE OF YOU — SOLD TO THE HIGHEST BIDDER.\n\nCLICK THE TABS TO SEE WHERE YOUR DATA ACTUALLY GOES.";
|
||
const canvasDiv = document.getElementById('s8bCanvas');
|
||
canvasDiv.classList.add('visible');
|
||
if (exfilAnimId) { cancelAnimationFrame(exfilAnimId); exfilAnimId = null; }
|
||
initExfilScene();
|
||
drawExfilScene();
|
||
window._exfilDone = true;
|
||
document.getElementById('returnFromScene8b').style.cssText='';
|
||
showNextBtn('returnFromScene8b');
|
||
document.getElementById('sourcesFromScene8b').style.cssText='';
|
||
showNextBtn('sourcesFromScene8b');
|
||
}
|
||
|
||
// Scene 7b skip
|
||
const s7b = document.getElementById('scene7b');
|
||
if (s7b.style.display === 'flex') {
|
||
s7bc.forEach(t => clearTimeout(t)); s7bc = [];
|
||
const txt = document.getElementById('s7bText');
|
||
txt.innerHTML = "EVERY CLICK, EVERY KEYSTROKE, EVERY FILE YOU OPEN — YOUR OS MAY BE REPORTING IT ALL TO CORPORATE SERVERS.\n\nCLICK THE TABS TO SEE WHERE YOUR DATA ACTUALLY GOES.";
|
||
const canvasDiv = document.getElementById('s7bCanvas');
|
||
canvasDiv.classList.add('visible');
|
||
if (exfilDeskAnimId) { cancelAnimationFrame(exfilDeskAnimId); exfilDeskAnimId = null; }
|
||
initExfilDeskScene();
|
||
drawExfilDeskScene();
|
||
window._exfilDeskDone = true;
|
||
document.getElementById('returnFromScene7b').style.cssText='';
|
||
showNextBtn('returnFromScene7b');
|
||
document.getElementById('sourcesFromScene7b').style.cssText='';
|
||
showNextBtn('sourcesFromScene7b');
|
||
}
|
||
|
||
// Scene 10a skip
|
||
const s10a = document.getElementById('scene10a');
|
||
if (s10a.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10a.querySelector('.scene4text');
|
||
const tl = s10a.querySelector('.s4tl');
|
||
buildHTimeline(tl, 0);
|
||
txt.innerHTML = "IMAGINE THE GOVERNMENT DECIDED WHICH DOCTORS WERE ALLOWED TO PRACTICE — AND SHUT DOWN EVERY OTHER OPTION OVERNIGHT.\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1910.\n\nTHE CARNEGIE FOUNDATION COMMISSIONED <a href=\"https://ncbi.nlm.nih.gov/pmc/articles/PMC2567554/\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">THE FLEXNER REPORT</a>. IT EVALUATED EVERY MEDICAL SCHOOL IN AMERICA. HALF WERE SHUT DOWN — PARTICULARLY THOSE TRAINING WOMEN, BLACK DOCTORS, AND RURAL PRACTITIONERS.\n\nTHE AMERICAN MEDICAL ASSOCIATION TOOK CONTROL OF MEDICAL LICENSING. MEDICINE BECAME A GATEKEPT PROFESSION.";
|
||
document.getElementById('next10a').style.cssText = '';
|
||
showNextBtn('next10a');
|
||
document.getElementById('sources10a').style.cssText = '';
|
||
showNextBtn('sources10a');
|
||
}
|
||
|
||
// Scene 10b skip
|
||
const s10b = document.getElementById('scene10b');
|
||
if (s10b.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10b.querySelector('.scene4text');
|
||
const tl = s10b.querySelector('.s4tl');
|
||
buildHTimeline(tl, 1);
|
||
txt.innerHTML = "IN 1938, AFTER THE ELIXIR SULFANILAMIDE TRAGEDY KILLED 107 PEOPLE, THE FDA WAS GIVEN BROAD POWER TO REGULATE MEDICINE.\n\nTHE <a href=\"https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-ii-1938-food-drug-cosmetic-act\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">FOOD, DRUG & COSMETIC ACT</a> REQUIRED DRUGS TO BE PROVEN SAFE BEFORE SALE.\n\nSOUNDS REASONABLE — BUT IT ALSO MEANT NO TREATMENT COULD EXIST WITHOUT GOVERNMENT APPROVAL.\n\nTHE POWER TO APPROVE IS THE POWER TO CONTROL.";
|
||
document.getElementById('next10b').style.cssText = '';
|
||
showNextBtn('next10b');
|
||
document.getElementById('sources10b').style.cssText = '';
|
||
showNextBtn('sources10b');
|
||
document.getElementById('back10b').style.cssText = '';
|
||
showNextBtn('back10b');
|
||
}
|
||
|
||
// Scene 10c skip
|
||
const s10c = document.getElementById('scene10c');
|
||
if (s10c.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10c.querySelector('.scene4text');
|
||
const vis = s10c.querySelector('.s4visual');
|
||
const tl = s10c.querySelector('.s4tl');
|
||
buildHTimeline(tl, 2);
|
||
txt.innerHTML = "IN 1965, MEDICARE AND MEDICAID WERE CREATED. THE THIRD-PARTY PAYER SYSTEM WAS BORN.\n\nHEALTHCARE SPENDING WAS $41 BILLION IN 1965. BY 2022, IT REACHED $4.1 TRILLION.\n\n";
|
||
vis.innerHTML = '<div class="callout-box">\u2692 <a href="https://www.cms.gov/data-research/statistics-trends-and-reports/national-health-expenditure-data/historical" target="_blank" style="text-decoration:underline;font-weight:bold;color:#00ff00">$41B \u2192 $4.1T = 100x IN 57 YEARS</a> \u2692</div>';
|
||
vis.classList.add('visible');
|
||
document.getElementById('next10c').style.cssText = '';
|
||
showNextBtn('next10c');
|
||
document.getElementById('sources10c').style.cssText = '';
|
||
showNextBtn('sources10c');
|
||
document.getElementById('back10c').style.cssText = '';
|
||
showNextBtn('back10c');
|
||
}
|
||
|
||
// Scene 10d skip
|
||
const s10d = document.getElementById('scene10d');
|
||
if (s10d.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10d.querySelector('.scene4text');
|
||
const tl = s10d.querySelector('.s4tl');
|
||
buildHTimeline(tl, 3);
|
||
txt.innerHTML = "IN 1973, THE <a href=\"https://www.congress.gov/93/statute/STATUTE-87/STATUTE-87-Pg914.pdf\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">HMO ACT</a> FORMALIZED MANAGED CARE.\n\nYOUR DOCTOR NO LONGER WORKS FOR YOU — THEY WORK FOR THE INSURANCE COMPANY.\n\nTHE DOCTOR-PATIENT RELATIONSHIP WAS REPLACED BY THE CORPORATE PROVIDER-MEMBER MODEL.\n\nYOU BECAME THE PRODUCT.";
|
||
document.getElementById('next10d').style.cssText = '';
|
||
showNextBtn('next10d');
|
||
document.getElementById('sources10d').style.cssText = '';
|
||
showNextBtn('sources10d');
|
||
document.getElementById('back10d').style.cssText = '';
|
||
showNextBtn('back10d');
|
||
}
|
||
|
||
// Scene 10g skip
|
||
const s10g = document.getElementById('scene10g');
|
||
if (s10g.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10g.querySelector('.scene4text');
|
||
const vis = s10g.querySelector('.s4visual');
|
||
const tl = s10g.querySelector('.s4tl');
|
||
buildHTimeline(tl, 4);
|
||
txt.innerHTML = "BEFORE THE AMA AND FDA, HEALING WAS A COMMUNITY PRACTICE — HERBALISTS, MIDWIVES, BONESETTERS.\n\nTHE FLEXNER REPORT OF 1910 SYSTEMATICALLY ELIMINATED THESE TRADITIONS. BY 1938, THE FDA CRIMINALIZED TREATMENTS WITHOUT GOVERNMENT APPROVAL.\n\nBUT THE KNOWLEDGE NEVER DIED. IN THE 1970s AND 80s, THE COUNTERCULTURE REDISCOVERED ANCIENT HEALING — ACUPUNCTURE, HERBALISM, MEDITATION, BODYWORK.\n\n";
|
||
|
||
vis.classList.add('visible');
|
||
document.getElementById('next10g').style.cssText = '';
|
||
showNextBtn('next10g');
|
||
document.getElementById('sources10g').style.cssText = '';
|
||
showNextBtn('sources10g');
|
||
document.getElementById('back10g').style.cssText = '';
|
||
showNextBtn('back10g');
|
||
}
|
||
|
||
// Scene 10h skip
|
||
const s10h = document.getElementById('scene10h');
|
||
if (s10h.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10h.querySelector('.scene4text');
|
||
const vis = s10h.querySelector('.s4visual');
|
||
const tl = s10h.querySelector('.s4tl');
|
||
buildHTimeline(tl, 5);
|
||
txt.innerHTML = "BY THE 1990s, ALTERNATIVE MEDICINE WAS A $50 BILLION INDUSTRY.\n\nPATIENTS VOTED WITH THEIR WALLETS — AND THEIR HEALTH IMPROVED.\n\nFUNCTIONAL MEDICINE, NATUROPATHY, CHIROPRACTIC, AND ACUPUNCTURE GAINED LEGAL RECOGNITION. THE NIH OFFICE OF ALTERNATIVE MEDICINE BECAME THE NCCIH.\n\nTHE DSHEA ACT OF 1994 UNLEASHED THE SUPPLEMENT INDUSTRY. BUT WITH MAINSTREAM ACCEPTANCE CAME CO-OPTATION — BIG PHARMA BOUGHT THE SUPPLEMENT COMPANIES. INSURANCE STARTED COVERING 'INTEGRATIVE' CARE.\n\n";
|
||
vis.classList.add('visible');
|
||
document.getElementById('next10h').style.cssText = '';
|
||
showNextBtn('next10h');
|
||
document.getElementById('sources10h').style.cssText = '';
|
||
showNextBtn('sources10h');
|
||
document.getElementById('back10h').style.cssText = '';
|
||
showNextBtn('back10h');
|
||
}
|
||
|
||
// Scene 10e skip
|
||
const s10e = document.getElementById('scene10e');
|
||
if (s10e.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10e.querySelector('.scene4text');
|
||
const vis = s10e.querySelector('.s4visual');
|
||
const tl = s10e.querySelector('.s4tl');
|
||
buildHTimeline(tl, 6);
|
||
txt.innerHTML = "TODAY, A NEW KIND OF MEDICINE IS EMERGING — BIOHACKING, FUNCTIONAL MEDICINE, DIRECT-TO-CONSUMER TESTING.\n\nPROJECTS LIKE <a href=\"https://syntropy.institute/\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">SYNTPROPY.INSTITUTE</a> ARE BUILDING THE INFRASTRUCTURE FOR MEDICINE YOU CONTROL.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>WHO DECIDES?</td><td>GOVERNMENT / INSURANCE</td><td>YOU + YOUR DOCTOR</td></tr>';
|
||
html+='<tr><td>ACCESS</td><td>GATEKEPT</td><td>DIRECT</td></tr>';
|
||
html+='<tr><td>DATA OWNERSHIP</td><td>THE SYSTEM</td><td>YOU</td></tr>';
|
||
html+='</table>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('next10e').style.cssText = '';
|
||
showNextBtn('next10e');
|
||
document.getElementById('sources10e').style.cssText = '';
|
||
showNextBtn('sources10e');
|
||
document.getElementById('back10e').style.cssText = '';
|
||
showNextBtn('back10e');
|
||
}
|
||
|
||
// Scene 10f skip
|
||
const s10f = document.getElementById('scene10f');
|
||
if (s10f.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = s10f.querySelector('.scene4text');
|
||
const vis = s10f.querySelector('.s4visual');
|
||
const tl = s10f.querySelector('.s4tl');
|
||
buildHTimeline(tl, 5);
|
||
txt.innerHTML = "IN 2026, THE DECENTRALIZED HEALTH MOVEMENT IS NO LONGER EMERGING — IT IS HERE.\n\nDIRECT-TO-CONSUMER LAB TESTING LETS ANYONE ORDER THEIR OWN BLOOD WORK — NO DOCTOR APPROVAL NEEDED.\n\nAI DIAGNOSIS TOOLS RIVAL BOARD-CERTIFIED PHYSICIANS IN ACCURACY.";
|
||
let html='<table class="comp-table"><tr><th></th><th>2020</th><th>2026</th></tr>';
|
||
html+='<tr><td>TELEMEDICINE</td><td>NICHE</td><td>MAINSTREAM</td></tr>';
|
||
html+='<tr><td>AI DIAGNOSIS</td><td>EXPERIMENTAL</td><td>IN CLINICS</td></tr>';
|
||
html+='<tr><td>BIOHACKING</td><td>UNDERGROUND</td><td>MAINSTREAM</td></tr>';
|
||
html+='<tr><td>PATIENT DATA</td><td>OWNED BY SYSTEM</td><td>DIRECT OWNERSHIP EMERGING</td></tr>';
|
||
html+='</table>';
|
||
vis.innerHTML=html;
|
||
vis.classList.add('visible');
|
||
document.getElementById('next10f').style.cssText = '';
|
||
showNextBtn('next10f');
|
||
document.getElementById('sources10f').style.cssText = '';
|
||
showNextBtn('sources10f');
|
||
document.getElementById('back10f').style.cssText = '';
|
||
showNextBtn('back10f');
|
||
}
|
||
|
||
// Scene 11 skip
|
||
const s11 = document.getElementById('scene11');
|
||
if (s11.style.display === 'flex') {
|
||
h10c.forEach(t => clearTimeout(t)); h10c = [];
|
||
const txt = document.getElementById('s11Text');
|
||
const vis = document.getElementById('s11Visual');
|
||
txt.innerHTML = "TRADITIONAL MEDICINE SAVES LIVES — BUT IT ALSO CONTROLS ACCESS.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>GATEKEEPERS</td><td>✅ YES — AMERICAN MEDICAL ASSOCIATION, FDA, INSURANCE</td><td>❌ NONE</td></tr>';
|
||
html+='<tr><td>YOUR DATA</td><td>OWNED BY THE SYSTEM</td><td>YOU CONTROL</td></tr>';
|
||
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\u2696\uFE0F</span><span class="punch-text">DECENTRALIZED HEALTH<br>DOESN\'T REPLACE DOCTORS</span></div><div class="punch-card"><span class="punch-icon">\uD83D\uDD11</span><span class="punch-text">IT REPLACES<br>GATEKEEPERS</span></div><div class="punch-card"><span class="punch-icon">\uD83C\uDF10</span><span class="punch-text">THE FUTURE IS<br>OPEN MEDICINE</span></div></div>';
|
||
txt.innerHTML += "\nTHE QUESTION ISN'T WHETHER TO USE TRADITIONAL MEDICINE — IT'S WHO DECIDES WHAT'S AVAILABLE.\n\nDECENTRALIZED HEALTH DOESN'T REPLACE DOCTORS. IT REPLACES GATEKEEPERS.";
|
||
vis.classList.add('visible');
|
||
document.getElementById('returnFromScene11').style.cssText = '';
|
||
showNextBtn('returnFromScene11');
|
||
document.getElementById('next11').style.cssText = '';
|
||
showNextBtn('next11');
|
||
document.getElementById('sources11').style.cssText = '';
|
||
showNextBtn('sources11');
|
||
}
|
||
|
||
// Scene 12 skip
|
||
const s12 = document.getElementById('scene12');
|
||
if (s12.style.display === 'flex') {
|
||
s12c.forEach(t => clearTimeout(t)); s12c = [];
|
||
const txt = document.getElementById('s12Text');
|
||
const vis = document.getElementById('s12Visual');
|
||
txt.innerHTML = "SYNTPROPY INSTITUTE IS ONE OF THE STARTUPS UNDER THE LAB 484 UMBRELLA — A PRIVATE ALTERNATIVE-HEALTH / CONCIERGE-CARE SITE FOCUSED ON \"MEDICINE REIMAGINED,\" INCLUDING MANUAL KINETICS, FREQUENCY ANALYSIS/THERAPY, DIGITAL HOMEOPATHY, AND MINISTRY-BASED CARE PROTOCOLS.\n\n";
|
||
const link=document.createElement('a');
|
||
link.href='#';
|
||
link.textContent='SYNTPROPY.INSTITUTE';
|
||
link.style.cssText='text-decoration:underline;font-weight:bold;color:#00ff00;cursor:pointer;';
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
sessionStorage.setItem('returnToScene', 'scene12');
|
||
window.location.href = 'https://syntropy.institute/';
|
||
});
|
||
txt.appendChild(link);
|
||
vis.classList.add('visible');
|
||
document.getElementById('back12').style.cssText = '';
|
||
showNextBtn('back12');
|
||
document.getElementById('returnFromScene12').style.cssText = '';
|
||
showNextBtn('returnFromScene12');
|
||
}
|
||
|
||
// Scene F1 skip
|
||
const sf1 = document.getElementById('sceneF1');
|
||
if (sf1.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = sf1.querySelector('.scene4text');
|
||
const tl = sf1.querySelector('.s4tl');
|
||
buildFTimeline(tl, 0);
|
||
txt.innerHTML = "IMAGINE THE GOVERNMENT DECIDED WHAT YOU COULD EAT — AND WHAT YOU COULDN'T.\n\nTHAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1906.\n\nTHE <a href=\"https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-i-1906-food-and-drugs-act\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">PURE FOOD AND DRUG ACT</a> WAS THE FIRST FEDERAL LAW TO REGULATE FOOD. IT MADE MISBRANDING AND ADULTERATION A CRIME, AND CREATED THE USDA'S BUREAU OF CHEMISTRY.\n\nSOUNDS REASONABLE — BUT IT ALSO GAVE THE GOVERNMENT POWER TO DECIDE WHAT WAS SAFE TO EAT.\n\nTHE POWER TO REGULATE IS THE POWER TO CONTROL.";
|
||
document.getElementById('nextF1').style.cssText = '';
|
||
showNextBtn('nextF1');
|
||
document.getElementById('sourcesF1').style.cssText = '';
|
||
showNextBtn('sourcesF1');
|
||
}
|
||
|
||
// Scene F2 skip
|
||
const sf2 = document.getElementById('sceneF2');
|
||
if (sf2.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = sf2.querySelector('.scene4text');
|
||
const tl = sf2.querySelector('.s4tl');
|
||
buildFTimeline(tl, 1);
|
||
txt.innerHTML = "IN 1947, AFTER WORLD WAR II, THE <a href=\"https://www.epa.gov/ingredients-used-pesticide-products/federal-insecticide-fungicide-and-rodenticide-act-fifra\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">FEDERAL INSECTICIDE, FUNGICIDE, AND RODENTICIDE ACT</a> WAS PASSED.\n\nSYNTHETIC PESTICIDES LIKE DDT WERE HAILED AS MIRACLES — 'BETTER LIVING THROUGH CHEMISTRY.'\n\nFARMING BECAME DEPENDENT ON CHEMICAL INPUTS. THE SOIL BECAME A MEDIUM FOR TOXINS.\n\nTHE INDUSTRIAL FOOD SYSTEM WAS BORN — AND THE COSTS WERE HIDDEN.";
|
||
document.getElementById('nextF2').style.cssText = '';
|
||
showNextBtn('nextF2');
|
||
document.getElementById('sourcesF2').style.cssText = '';
|
||
showNextBtn('sourcesF2');
|
||
document.getElementById('backF2').style.cssText = '';
|
||
showNextBtn('backF2');
|
||
}
|
||
|
||
// Scene F3 skip
|
||
const sf3 = document.getElementById('sceneF3');
|
||
if (sf3.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = sf3.querySelector('.scene4text');
|
||
const vis = sf3.querySelector('.s4visual');
|
||
const tl = sf3.querySelector('.s4tl');
|
||
buildFTimeline(tl, 2);
|
||
txt.innerHTML = "IN THE 1970S, SECRETARY OF AGRICULTURE EARL BUTZ TOLD FARMERS: <a href=\"https://www.usda.gov/farmbill\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">\"GET BIG OR GET OUT.\"</a>\n\nTHE GOVERNMENT SUBSIDIZED CORN AND SOY LIKE NEVER BEFORE — MAKING THEM THE CHEAPEST INGREDIENTS IN THE WORLD.\n\n";
|
||
vis.innerHTML = '<div class="callout-box">\u2692 CORN SUBSIDIES + HFCS = PROCESSED FOOD CHEAPER THAN REAL FOOD \u2692</div>';
|
||
vis.classList.add('visible');
|
||
document.getElementById('nextF3').style.cssText = '';
|
||
showNextBtn('nextF3');
|
||
document.getElementById('sourcesF3').style.cssText = '';
|
||
showNextBtn('sourcesF3');
|
||
document.getElementById('backF3').style.cssText = '';
|
||
showNextBtn('backF3');
|
||
}
|
||
|
||
// Scene F4 skip
|
||
const sf4 = document.getElementById('sceneF4');
|
||
if (sf4.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = sf4.querySelector('.scene4text');
|
||
const tl = sf4.querySelector('.s4tl');
|
||
buildFTimeline(tl, 3);
|
||
txt.innerHTML = "IN 1996, THE FIRST <a href=\"https://www.fda.gov/food/food-new-plant-varieties/consumer-info-about-food-genetically-engineered-plants\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">ROUNDUP READY CROPS</a> HIT THE MARKET. A MONSANTO BIOTECHNOLOGY REVOLUTION.\n\nSEEDS COULD NOW BE PATENTED — MAKING FARMERS DEPENDENT ON CORPORATIONS FOR THEIR OWN CROPS.\n\nBY 2010, 90% OF CORN AND SOY IN AMERICA WAS GENETICALLY MODIFIED.\n\nTHE RIGHT TO SAVE SEEDS WAS REPLACED BY LICENSE AGREEMENTS.";
|
||
document.getElementById('nextF4').style.cssText = '';
|
||
showNextBtn('nextF4');
|
||
document.getElementById('sourcesF4').style.cssText = '';
|
||
showNextBtn('sourcesF4');
|
||
document.getElementById('backF4').style.cssText = '';
|
||
showNextBtn('backF4');
|
||
}
|
||
|
||
// Scene F6 skip
|
||
const sf6 = document.getElementById('sceneF6');
|
||
if (sf6.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = sf6.querySelector('.scene4text');
|
||
const vis = sf6.querySelector('.s4visual');
|
||
const tl = sf6.querySelector('.s4tl');
|
||
buildFTimeline(tl, 4);
|
||
txt.innerHTML = "THE FUTURE OF FOOD IS HERE — AND THE SAME GATEKEEPER DYNAMICS ARE REPEATING.\n\nLAB-GROWN MEAT PROMISES TO END FACTORY FARMING — BUT IT'S ULTRA-PROCESSED, ENERGY-INTENSIVE, AND CONTROLLED BY THE SAME CORPORATIONS.\n\nVERTICAL FARMS USE 95% LESS WATER — BUT THEY RUN ON LED LIGHTS AND CLIMATE CONTROL.\n\nAI PROMISES TO OPTIMIZE EVERY CROP — BUT WHO OWNS THE ALGORITHMS?";
|
||
document.getElementById('nextF6').style.cssText = '';
|
||
showNextBtn('nextF6');
|
||
document.getElementById('sourcesF6').style.cssText = '';
|
||
showNextBtn('sourcesF6');
|
||
document.getElementById('backF6').style.cssText = '';
|
||
showNextBtn('backF6');
|
||
}
|
||
|
||
// Scene FoodSum skip
|
||
const sfSum = document.getElementById('sceneFoodSum');
|
||
if (sfSum.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = document.getElementById('sFoodSumText');
|
||
const vis = document.getElementById('sFoodSumVisual');
|
||
txt.innerHTML = "THE INDUSTRIAL FOOD SYSTEM FEEDS BILLIONS — BUT IT ALSO CONTROLS WHAT YOU EAT.\n\n";
|
||
let html='<table class="comp-table"><tr><th></th><th>INDUSTRIAL</th><th>DECENTRALIZED</th></tr>';
|
||
html+='<tr><td>GATEKEEPERS</td><td>✅ YES — USDA, FDA, MONSANTO</td><td>❌ NONE</td></tr>';
|
||
html+='<tr><td>YOUR FOOD</td><td>PROCESSED / CHEMICAL</td><td>YOU CHOOSE</td></tr>';
|
||
html+='<tr><td>INNOVATION</td><td>PATENT-BASED</td><td>OPEN / REGENERATIVE</td></tr>';
|
||
html+='<tr><td>SOIL</td><td>DEGRADED</td><td>HEALED</td></tr>';
|
||
html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\uD83E\uDDEA</span><span class="punch-text">DECENTRALIZED FOOD<br>DOESN\'T REPLACE FARMERS</span></div><div class="punch-card"><span class="punch-icon">\uD83D\uDD11</span><span class="punch-text">IT REPLACES<br>GATEKEEPERS</span></div><div class="punch-card"><span class="punch-icon">\uD83C\uDF31</span><span class="punch-text">THE FUTURE IS<br>REGENERATIVE</span></div></div>';
|
||
vis.innerHTML=html;
|
||
txt.innerHTML += "\nTHE QUESTION ISN'T WHETHER TO USE THE INDUSTRIAL FOOD SYSTEM — IT'S WHO DECIDES WHAT'S ON YOUR PLATE.\n\nDECENTRALIZED FOOD DOESN'T REPLACE FARMERS. IT REPLACES GATEKEEPERS.";
|
||
vis.classList.add('visible');
|
||
document.getElementById('nextFoodSum').style.cssText = '';
|
||
showNextBtn('nextFoodSum');
|
||
document.getElementById('sourcesFoodSum').style.cssText = '';
|
||
showNextBtn('sourcesFoodSum');
|
||
document.getElementById('backFoodSum').style.cssText = '';
|
||
showNextBtn('backFoodSum');
|
||
}
|
||
|
||
// Scene FoodLinks skip
|
||
const sfLinks = document.getElementById('sceneFoodLinks');
|
||
if (sfLinks.style.display === 'flex') {
|
||
f1c.forEach(t => clearTimeout(t)); f1c = [];
|
||
const txt = document.getElementById('sFoodLinksText');
|
||
txt.innerHTML = "FROM DECENTRALIZED ORGANIC GROWING SYSTEMS TO MOBILE HEALTHY FOOD EXPERIENCES, WE\u2019RE BUILDING A MORE CONNECTED AND NOURISHING FOOD FUTURE.";
|
||
document.getElementById('backFoodLinks').style.cssText = '';
|
||
showNextBtn('backFoodLinks');
|
||
document.getElementById('returnFromFoodLinks').style.cssText = '';
|
||
showNextBtn('returnFromFoodLinks');
|
||
document.getElementById('foodTimelineVimeo').style.cssText = 'display:block;width:100%;padding:0.8rem 2rem;margin:0.5rem 0;background:#001100;color:#00ff00;border:2px solid #00ff00;cursor:pointer;font-family:\'Courier New\',monospace;font-size:1rem;letter-spacing:2px;transition:background 0.2s ease;';
|
||
document.getElementById('foodTimelineKitchen').style.cssText = 'display:block;width:100%;padding:0.8rem 2rem;margin:0.5rem 0;background:#001100;color:#00ff00;border:2px solid #00ff00;cursor:pointer;font-family:\'Courier New\',monospace;font-size:1rem;letter-spacing:2px;transition:background 0.2s ease;';
|
||
}
|
||
|
||
}
|
||
|
||
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>
|
||
|
||
<!-- Scene Refs -->
|
||
<div id="sceneRefs">
|
||
<div class="refs-content">
|
||
<h2>SOURCES</h2>
|
||
<ol>
|
||
<li><a href="https://www.sec.gov/cgi-bin/browse-edgar?action=getcompany&CIK=0001652044&type=10-K" target="_blank">Alphabet Inc. 2025 Form 10-K, SEC EDGAR</a> — Google advertising revenue used for ad ARPU estimation (~$90–100/user/year).</li>
|
||
<li><a href="https://www.computerworld.com/article/1615208/apple-services-arpu.html" target="_blank">Computerworld — Apple Services ARPU estimated at ~$72/user/year (Morgan Stanley analysis).</a></li>
|
||
<li><a href="https://www.grandviewresearch.com/industry-analysis/data-broker-market" target="_blank">Grand View Research — Data Broker Market Size Report ($365B market, ~$46/user/year secondary value estimate).</a></li>
|
||
<li><a href="https://www.microsoft.com/en-us/Investor" target="_blank">Microsoft Investor Relations — Search advertising revenue ~$16B annually (~$11/user/year).</a></li>
|
||
<li><a href="https://learn.microsoft.com/en-us/windows/privacy/configure-windows-diagnostic-data-in-your-organization" target="_blank">Microsoft Learn — Windows diagnostic data levels (required vs optional telemetry).</a></li>
|
||
<li><a href="https://grapheneos.org/" target="_blank">GrapheneOS — Privacy-focused mobile OS with no data collection infrastructure.</a></li>
|
||
<li><a href="https://policies.google.com/technologies/ads" target="_blank">Google — How Google uses cookies in advertising (DoubleClick tracking infrastructure).</a></li>
|
||
<li><a href="https://developer.apple.com/app-store/user-privacy-and-data-use/" target="_blank">Apple Developer — App Tracking Transparency framework and user privacy controls.</a></li>
|
||
<li><a href="https://support.apple.com/guide/mac-help/system-integrity-protection-mac-mh35976/mac" target="_blank">Apple Support — macOS System Integrity Protection (SIP) overview.</a></li>
|
||
<li><a href="https://learn.microsoft.com/en-us/windows/privacy/" target="_blank">Microsoft Learn — Windows privacy controls and data collection policies overview.</a></li>
|
||
<li><a href="https://www.gold.org/sites/default/files/documents/1900mar14.pdf" target="_blank">Gold Standard Act of 1900 (PDF), World Gold Council.</a></li>
|
||
<li><a href="https://www.usmoneyreserve.com/resources/videos/transcripts/executive-order-6102-did-you-know/" target="_blank">Executive Order 6102 — U.S. Money Reserve.</a></li>
|
||
<li><a href="https://www.federalreservehistory.org/essays/gold-reserve-act" target="_blank">Gold Reserve Act of 1934 — Federal Reserve History.</a></li>
|
||
<li><a href="https://www.federalreservehistory.org/essays/gold-convertibility-ends" target="_blank">Nixon Ends Gold Convertibility (1971) — Federal Reserve History.</a></li>
|
||
<li><a href="https://www.forbes.com/sites/digital-assets/2024/12/08/us-treasury-names-bitcoin-digital-gold-after-price-explosion/" target="_blank">U.S. Treasury Names Bitcoin 'Digital Gold' — Forbes.</a></li>
|
||
<li><a href="https://ncbi.nlm.nih.gov/pmc/articles/PMC2567554/" target="_blank">Flexner, A. (1910). Medical Education in the United States and Canada. Carnegie Foundation Bulletin No. 4.</a> — The original Flexner Report that evaluated 155 medical schools and led to closure of half of them.</li>
|
||
<li><a href="https://jamanetwork.com/journals/jama/article-abstract/198677" target="_blank">Beck, A.H. (2004). "The Flexner Report and the Standardization of American Medical Education." JAMA. 291(17):2139-2140.</a> — Analysis of Flexner's impact on medical standardization and its disproportionate effect on women and minority doctors.</li>
|
||
<li><a href="https://www.ama-assn.org/about/ama-history/ama-history" target="_blank">American Medical Association — AMA history.</a> — AMA's Council on Medical Education commissioned and supported the Flexner Report; AMA set licensing standards that became law.</li>
|
||
<li><a href="https://www.fda.gov/about-fda/histories-product-regulation/sulfanilamide-disaster" target="_blank">FDA — The Sulfanilamide Disaster (1937).</a> — 107 deaths from Elixir Sulfanilamide (diethylene glycol poisoning) that triggered the 1938 Food, Drug & Cosmetic Act.</li>
|
||
<li><a href="https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-ii-1938-food-drug-cosmetic-act" target="_blank">FDA — Part II: 1938, Food, Drug & Cosmetic Act.</a> — New law required pre-market safety proof for all drugs, giving FDA broad regulatory power.</li>
|
||
<li><a href="https://www.cms.gov/data-research/statistics-trends-and-reports/national-health-expenditure-data/historical" target="_blank">CMS — National Health Expenditure Accounts (Historical).</a> — Official U.S. health spending estimates from 1960; shows pre-Medicare spending of ~$41B in 1965 and growth to $4.5T+ by 2022.</li>
|
||
<li><a href="https://www.cms.gov/data-research/statistics-trends-and-reports/national-health-expenditure-data/nhe-fact-sheet" target="_blank">CMS — NHE Fact Sheet (2024).</a> — U.S. health spending reached $5.3T in 2024, up from $27B in 1960 — a 100x increase driven partly by Medicare/Medicaid third-party payer system.</li>
|
||
<li><a href="https://www.congress.gov/93/statute/STATUTE-87/STATUTE-87-Pg914.pdf" target="_blank">Health Maintenance Organization Act of 1973 (Pub.L. 93-222).</a> — Original statute that formalized managed care, mandated employer dual-choice, and replaced the doctor-patient relationship with the corporate provider-member model.</li>
|
||
<li><a href="https://en.wikipedia.org/wiki/Health_Maintenance_Organization_Act_of_1973" target="_blank">Wikipedia — Health Maintenance Organization Act of 1973.</a> — Nixon administration, Dr. Paul Ellwood's "less care = more money" incentive structure, and the HMO market transformation.</li>
|
||
<li><a href="https://syntropy.institute/" target="_blank">Syntropy Institute.</a> — Open infrastructure for decentralized, patient-controlled medicine — biohacking, functional medicine, and direct-to-consumer health data ownership.</li>
|
||
<li><a href="https://www.fda.gov/about-fda/changes-science-law-and-regulatory-authorities/part-i-1906-food-and-drugs-act" target="_blank">FDA — Part I: 1906, Food and Drugs Act.</a> — First federal law to regulate food; created the USDA Bureau of Chemistry; made misbranding and adulteration a crime.</li>
|
||
<li><a href="https://www.epa.gov/ingredients-used-pesticide-products/federal-insecticide-fungicide-and-rodenticide-act-fifra" target="_blank">EPA — Federal Insecticide, Fungicide, and Rodenticide Act (FIFRA).</a> — 1947 law regulating synthetic pesticides like DDT; ushered in the chemical agriculture era.</li>
|
||
<li><a href="https://www.epa.gov/ingredients-used-pesticide-products/ddt-brief-history-and-status" target="_blank">EPA — DDT: A Brief History and Status.</a> — Rachel Carson's Silent Spring (1962) led to DDT ban in 1972; chemical dependency of industrial farming exposed.</li>
|
||
<li><a href="https://www.usda.gov/farmbill" target="_blank">USDA — Farm Bill History.</a> — Earl Butz's "get big or get out" (1970s); corn/soy subsidies; HFCS replaced sugar; cheaper to eat processed food than real food.</li>
|
||
<li><a href="https://michaelpollan.com/articles-archive/when-a-crop-becomes-king/" target="_blank">Pollan, M. (2002). "When a Crop Becomes King." The New York Times.</a> — How corn subsidies created the cheap-calorie food system driving obesity and diabetes epidemics.</li>
|
||
<li><a href="https://www.fda.gov/food/food-new-plant-varieties/consumer-info-about-food-genetically-engineered-plants" target="_blank">FDA — Consumer Info About Food from Genetically Engineered Plants.</a> — 1996 Roundup Ready crops; GMO approval; by 2010, 90% of US corn and soy was genetically modified.</li>
|
||
<li><a href="https://www.oyez.org/cases/2012/11-796" target="_blank">Bowman v. Monsanto Co. (2013) — Oyez.</a> — Supreme Court ruled that patent exhaustion does not permit farmers to replant patented GM seeds; seed patenting and corporate control of agriculture.</li>
|
||
<li><a href="https://484.kitchen" target="_blank">484.Kitchen.</a> — Regenerative agriculture, syntropic farming, and decentralized food infrastructure — building the alternative to the industrial food system.</li>
|
||
</ol>
|
||
<div class="refs-back"><button id="refsBackBtn" onclick="document.getElementById('sceneRefs').classList.remove('visible');var c=window.refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene10g'||c==='scene10h'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';window.refsCaller=null;">BACK</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|