forked from avi/signalelsewhere
Save point: Tech Hub refinement — label cleanup, return-to-hub navigation, Scene 2 double-type fix, faster Scene 3 text
This commit is contained in:
464
index.html
464
index.html
@@ -478,22 +478,105 @@
|
||||
.comp-table td.btc-col .no { color: #44ff44; }
|
||||
.comp-table td.btc-col .yes { color: #ff4444; }
|
||||
|
||||
/* Scene 6 */
|
||||
.scene6text {
|
||||
/* 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;
|
||||
}
|
||||
.s6visual {
|
||||
.s7visual {
|
||||
width: 100%;
|
||||
max-width: 55rem;
|
||||
margin-top: 1.5rem;
|
||||
opacity: 0;
|
||||
transition: opacity 4s ease;
|
||||
}
|
||||
.s6visual.visible { opacity: 1; }
|
||||
.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; }
|
||||
|
||||
.s6section {
|
||||
margin-top: 1.5rem;
|
||||
text-align: left;
|
||||
@@ -564,10 +647,9 @@
|
||||
<div id="scene3Text"></div>
|
||||
<div id="scene3ChoiceRow">
|
||||
<button class="scene3ChoiceBtn" id="yourMoneyBtn">YOUR MONEY</button>
|
||||
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
|
||||
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
||||
<button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
|
||||
<button class="scene3ChoiceBtn" id="yourTechBtn">YOUR TECH</button>
|
||||
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
||||
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -609,10 +691,39 @@
|
||||
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
||||
</div>
|
||||
|
||||
<div id="scene6" class="scene">
|
||||
<div class="scene6text" id="s6Text"></div>
|
||||
<div class="s6visual" id="s6Visual"></div>
|
||||
<button class="btnNext" id="returnFromScene6">RETURN</button>
|
||||
<div 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>
|
||||
<button class="hub-btn hub-return" id="returnFromTechHub">RETURN</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scene7" class="scene">
|
||||
<div class="scene7text" id="s7Text"></div>
|
||||
<div class="s7visual" id="s7Visual"></div>
|
||||
<button class="btnNext" id="returnFromScene7">RETURN</button>
|
||||
</div>
|
||||
|
||||
<div id="scene8" class="scene">
|
||||
<div class="scene8text" id="s8Text"></div>
|
||||
<div class="s8visual" id="s8Visual"></div>
|
||||
<button class="btnNext" id="returnFromScene8">RETURN</button>
|
||||
</div>
|
||||
|
||||
<div id="scene9" class="scene">
|
||||
<div class="scene8text" id="s9Text"></div>
|
||||
<div class="s8visual" id="s9Visual"></div>
|
||||
<button class="btnNext" id="returnFromScene9">RETURN</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -920,6 +1031,8 @@
|
||||
}
|
||||
|
||||
function loadScene2(sceneElem) {
|
||||
s2c.forEach(t => clearTimeout(t));
|
||||
s2c = [];
|
||||
sceneElem.style.display = 'flex';
|
||||
const linesContainer = document.getElementById('scene2Lines');
|
||||
const line1 = document.getElementById('scene2Line1');
|
||||
@@ -929,9 +1042,15 @@
|
||||
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;
|
||||
@@ -960,9 +1079,9 @@
|
||||
btn.style.opacity = btnOpacity;
|
||||
}, 30);
|
||||
}, 1000);
|
||||
}, undefined, undefined, s2c);
|
||||
});
|
||||
});
|
||||
});
|
||||
}, undefined, undefined, s2c);
|
||||
});
|
||||
}
|
||||
sceneElem.style.opacity = opacity;
|
||||
@@ -984,9 +1103,14 @@
|
||||
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;
|
||||
@@ -996,29 +1120,36 @@
|
||||
title.classList.add('visible');
|
||||
}, 300);
|
||||
|
||||
setTimeout(() => {
|
||||
typeCalmly(textContainer, "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT", () => {
|
||||
setTimeout(() => {
|
||||
textContainer.textContent += "\n\n\n\n\n";
|
||||
typeCalmly(textContainer, "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS", () => {
|
||||
textContainer.textContent += "\n\n\n\n\n";
|
||||
typeCalmly(textContainer, "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED", () => {
|
||||
setTimeout(() => {
|
||||
const 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:5.5rem;margin-bottom:2rem;text-align:center;';
|
||||
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) => {
|
||||
setTimeout(() => {
|
||||
const tBtn = setTimeout(() => {
|
||||
btn.style.opacity = '1';
|
||||
btn.style.pointerEvents = 'auto';
|
||||
}, i * 200);
|
||||
}, i * 200 + 3500);
|
||||
scene3TypewriterTimeouts.push(tBtn);
|
||||
});
|
||||
}, 1000);
|
||||
}, undefined, undefined, scene3TypewriterTimeouts);
|
||||
}, undefined, undefined, scene3TypewriterTimeouts);
|
||||
}, 2000);
|
||||
}, undefined, undefined, scene3TypewriterTimeouts);
|
||||
}, 800);
|
||||
}, 600);
|
||||
scene3TypewriterTimeouts.push(tMain);
|
||||
}
|
||||
sceneElem.style.opacity = opacity;
|
||||
}, 30);
|
||||
@@ -1058,6 +1189,7 @@
|
||||
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);
|
||||
typeHtmlCalmly(txt,"IMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS. THAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.",()=>{
|
||||
@@ -1095,6 +1227,7 @@
|
||||
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,"ON APRIL 5, 1933, ",()=>{
|
||||
@@ -1124,6 +1257,7 @@
|
||||
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 ",()=>{
|
||||
@@ -1165,6 +1299,7 @@
|
||||
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 ",()=>{
|
||||
@@ -1212,6 +1347,7 @@
|
||||
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 ",()=>{
|
||||
@@ -1227,7 +1363,7 @@
|
||||
'<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
|
||||
+'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>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>'
|
||||
@@ -1237,6 +1373,7 @@
|
||||
+'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO BANK<br>CAN FREEZE IT</span></div>'
|
||||
+'</div>';
|
||||
vis.classList.add('visible');
|
||||
showNextBtn('next4e');
|
||||
},1200);
|
||||
s4c.push(t1);
|
||||
},undefined,undefined,s4c);
|
||||
@@ -1256,6 +1393,7 @@
|
||||
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(()=>{
|
||||
@@ -1352,43 +1490,134 @@
|
||||
}
|
||||
|
||||
function loadScene6(sceneElem) {
|
||||
s6c=[];
|
||||
sceneElem.style.display='flex';
|
||||
const txt=document.getElementById('s6Text');
|
||||
const vis=document.getElementById('s6Visual');
|
||||
txt.innerHTML='';
|
||||
vis.className='s6visual';
|
||||
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);
|
||||
typeCalmly(txt,"THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.",()=>{
|
||||
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);
|
||||
}
|
||||
|
||||
function loadScene7(sceneElem) {
|
||||
s7c=[];
|
||||
sceneElem.style.display='flex';
|
||||
const txt=document.getElementById('s7Text');
|
||||
const vis=document.getElementById('s7Visual');
|
||||
txt.innerHTML='';
|
||||
vis.className='s7visual';
|
||||
let o=0;
|
||||
const fi=setInterval(()=>{
|
||||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene7').style.visibility === 'visible') { clearInterval(fi); return; }
|
||||
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||||
typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
|
||||
const t1=setTimeout(()=>{
|
||||
txt.innerHTML+="\n\n";
|
||||
vis.classList.add('visible');
|
||||
vis.innerHTML='';
|
||||
vis.innerHTML+=buildS6DesktopTable();
|
||||
typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
|
||||
txt.innerHTML+="\n\n\n";
|
||||
vis.innerHTML+=buildS6MobileTable();
|
||||
vis.innerHTML=buildS6DesktopTable();
|
||||
typeCalmly(txt,"LINUX IS THE ONLY OS THAT RESPECTS YOUR FREEDOM — BECAUSE IT'S BUILT BY THE COMMUNITY, NOT A CORPORATION.",()=>{
|
||||
const t3=setTimeout(()=>{
|
||||
document.getElementById('returnFromScene7').style.cssText='';
|
||||
showNextBtn('returnFromScene7');
|
||||
},400);
|
||||
s7c.push(t3);
|
||||
},8,20,s7c);
|
||||
},300);
|
||||
s7c.push(t1);
|
||||
},8,20,s7c);
|
||||
}
|
||||
sceneElem.style.opacity=o;
|
||||
},30);
|
||||
}
|
||||
|
||||
function loadScene8(sceneElem) {
|
||||
s8c=[];
|
||||
sceneElem.style.display='flex';
|
||||
const txt=document.getElementById('s8Text');
|
||||
const vis=document.getElementById('s8Visual');
|
||||
txt.innerHTML='';
|
||||
vis.className='s8visual';
|
||||
let o=0;
|
||||
const fi=setInterval(()=>{
|
||||
if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene8').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(()=>{
|
||||
txt.innerHTML+="\n\n";
|
||||
vis.innerHTML+='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||
vis.classList.add('visible');
|
||||
vis.innerHTML=buildS6MobileTable();
|
||||
typeCalmly(txt,"GRAPHENEOS PROVES THAT PRIVACY AND USABILITY CAN COEXIST — BUT ONLY WHEN YOU TAKE CONTROL.",()=>{
|
||||
const t3=setTimeout(()=>{
|
||||
document.getElementById('returnFromScene8').style.cssText='';
|
||||
showNextBtn('returnFromScene8');
|
||||
},400);
|
||||
s8c.push(t3);
|
||||
},8,20,s8c);
|
||||
},300);
|
||||
s8c.push(t1);
|
||||
},8,20,s8c);
|
||||
}
|
||||
sceneElem.style.opacity=o;
|
||||
},30);
|
||||
}
|
||||
|
||||
function loadScene9(sceneElem) {
|
||||
s9c=[];
|
||||
sceneElem.style.display='flex';
|
||||
const txt=document.getElementById('s9Text');
|
||||
const vis=document.getElementById('s9Visual');
|
||||
txt.innerHTML='';
|
||||
vis.className='s8visual';
|
||||
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(()=>{
|
||||
txt.innerHTML+="\n\n";
|
||||
vis.classList.add('visible');
|
||||
vis.innerHTML='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
||||
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
||||
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
||||
+'</div></div>';
|
||||
typeCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
|
||||
const t6=setTimeout(()=>{
|
||||
document.getElementById('returnFromScene6').style.cssText='';
|
||||
showNextBtn('returnFromScene6');
|
||||
const t4=setTimeout(()=>{
|
||||
document.getElementById('returnFromScene9').style.cssText='';
|
||||
showNextBtn('returnFromScene9');
|
||||
},400);
|
||||
s6c.push(t6);
|
||||
},8,20,s6c);
|
||||
},8,20,s6c);
|
||||
},8,20,s6c);
|
||||
s9c.push(t4);
|
||||
},8,20,s9c);
|
||||
},300);
|
||||
s6c.push(t1);
|
||||
},8,20,s6c);
|
||||
s9c.push(t1);
|
||||
},8,20,s9c);
|
||||
}
|
||||
sceneElem.style.opacity=o;
|
||||
},30);
|
||||
@@ -1396,7 +1625,10 @@
|
||||
|
||||
let s4c = [];
|
||||
let s5c = [];
|
||||
let s6c = [];
|
||||
let s2c = [];
|
||||
let s7c = [];
|
||||
let s8c = [];
|
||||
let s9c = [];
|
||||
|
||||
// Initialize on load
|
||||
window.addEventListener('load', () => {
|
||||
@@ -1404,7 +1636,10 @@
|
||||
});
|
||||
|
||||
// Button click handlers
|
||||
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
|
||||
document.getElementById('followBtn').addEventListener('click', () => {
|
||||
document.getElementById('followBtn').disabled = true;
|
||||
transitionToScene2();
|
||||
});
|
||||
document.getElementById('whatIsLabBtn').addEventListener('click', () => {
|
||||
transitionToScene('scene2', loadScene3, 'scene3');
|
||||
});
|
||||
@@ -1442,16 +1677,32 @@
|
||||
s3.style.display = 'flex';
|
||||
s3.style.opacity = '1';
|
||||
document.getElementById('scene3Title').classList.add('visible');
|
||||
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
const row = document.getElementById('scene3ChoiceRow');
|
||||
row.style.display = 'flex';
|
||||
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
||||
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);
|
||||
});
|
||||
|
||||
document.getElementById('returnFromScene6').addEventListener('click', () => {
|
||||
document.getElementById('goDesktopTech').addEventListener('click', () => {
|
||||
transitionToScene('scene6', loadScene7, 'scene7');
|
||||
});
|
||||
document.getElementById('goMobileTech').addEventListener('click', () => {
|
||||
transitionToScene('scene6', loadScene8, 'scene8');
|
||||
});
|
||||
document.getElementById('goInternetTech').addEventListener('click', () => {
|
||||
transitionToScene('scene6', loadScene9, 'scene9');
|
||||
});
|
||||
document.getElementById('returnFromTechHub').addEventListener('click', () => {
|
||||
document.getElementById('scene6').style.display = 'none';
|
||||
const s3 = document.getElementById('scene3');
|
||||
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||||
@@ -1459,13 +1710,47 @@
|
||||
s3.style.display = 'flex';
|
||||
s3.style.opacity = '1';
|
||||
document.getElementById('scene3Title').classList.add('visible');
|
||||
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
const row = document.getElementById('scene3ChoiceRow');
|
||||
row.style.display = 'flex';
|
||||
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
||||
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);
|
||||
});
|
||||
|
||||
function showTechHub() {
|
||||
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();
|
||||
});
|
||||
|
||||
// Keyboard shortcuts for testing
|
||||
@@ -1490,6 +1775,8 @@
|
||||
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...';
|
||||
@@ -1507,14 +1794,19 @@
|
||||
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||||
scene3TypewriterTimeouts = [];
|
||||
document.getElementById('scene3Text').textContent =
|
||||
"IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n"
|
||||
+ "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n"
|
||||
+ "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
"IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||
s3ChoiceRow.style.display = 'flex';
|
||||
s3ChoiceRow.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
||||
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)
|
||||
@@ -1555,7 +1847,7 @@
|
||||
'<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
|
||||
+'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
|
||||
+'<tr><td>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>'
|
||||
@@ -1595,21 +1887,47 @@
|
||||
showNextBtn('returnFromScene5');
|
||||
}
|
||||
|
||||
// Scene 6 skip
|
||||
const s6 = document.getElementById('scene6');
|
||||
if (s6.style.display === 'flex') {
|
||||
s6c.forEach(t => clearTimeout(t)); s6c = [];
|
||||
const txt = document.getElementById('s6Text');
|
||||
const vis = document.getElementById('s6Visual');
|
||||
txt.innerHTML = "THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.\n\nDESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\n\nYOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
|
||||
vis.innerHTML=buildS6DesktopTable()+buildS6MobileTable()+'<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||
// Scene 7 skip
|
||||
const s7 = document.getElementById('scene7');
|
||||
if (s7.style.display === 'flex') {
|
||||
s7c.forEach(t => clearTimeout(t)); s7c = [];
|
||||
const txt = document.getElementById('s7Text');
|
||||
const vis = document.getElementById('s7Visual');
|
||||
txt.innerHTML = "DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\nLINUX IS THE ONLY OS THAT RESPECTS YOUR FREEDOM — BECAUSE IT'S BUILT BY THE COMMUNITY, NOT A CORPORATION.";
|
||||
vis.innerHTML=buildS6DesktopTable();
|
||||
vis.classList.add('visible');
|
||||
document.getElementById('returnFromScene7').style.cssText='';
|
||||
showNextBtn('returnFromScene7');
|
||||
}
|
||||
|
||||
// Scene 8 skip
|
||||
const s8 = document.getElementById('scene8');
|
||||
if (s8.style.display === 'flex') {
|
||||
s8c.forEach(t => clearTimeout(t)); s8c = [];
|
||||
const txt = document.getElementById('s8Text');
|
||||
const vis = document.getElementById('s8Visual');
|
||||
txt.innerHTML = "YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nGRAPHENEOS PROVES THAT PRIVACY AND USABILITY CAN COEXIST — BUT ONLY WHEN YOU TAKE CONTROL.";
|
||||
vis.innerHTML=buildS6MobileTable();
|
||||
vis.classList.add('visible');
|
||||
document.getElementById('returnFromScene8').style.cssText='';
|
||||
showNextBtn('returnFromScene8');
|
||||
}
|
||||
|
||||
// Scene 9 skip
|
||||
const s9 = document.getElementById('scene9');
|
||||
if (s9.style.display === 'flex') {
|
||||
s9c.forEach(t => clearTimeout(t)); s9c = [];
|
||||
const txt = document.getElementById('s9Text');
|
||||
const vis = document.getElementById('s9Visual');
|
||||
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.";
|
||||
vis.innerHTML='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
||||
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
||||
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
||||
+'</div></div>';
|
||||
vis.classList.add('visible');
|
||||
document.getElementById('returnFromScene6').style.cssText='';
|
||||
showNextBtn('returnFromScene6');
|
||||
document.getElementById('returnFromScene9').style.cssText='';
|
||||
showNextBtn('returnFromScene9');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user