Save point: Scene 6 tech comparison added — Linux vs macOS/Windows/ChromeOS table, GrapheneOS vs Android/iOS table, decentralized internet punch cards, YOUR TECH button in Scene 3, Escape skip, RETURN to Scene 3
This commit is contained in:
187
index.html
187
index.html
@@ -477,6 +477,61 @@
|
|||||||
}
|
}
|
||||||
.comp-table td.btc-col .no { color: #44ff44; }
|
.comp-table td.btc-col .no { color: #44ff44; }
|
||||||
.comp-table td.btc-col .yes { color: #ff4444; }
|
.comp-table td.btc-col .yes { color: #ff4444; }
|
||||||
|
|
||||||
|
/* Scene 6 */
|
||||||
|
.scene6text {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 55rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
.s6visual {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 55rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 4s ease;
|
||||||
|
}
|
||||||
|
.s6visual.visible { opacity: 1; }
|
||||||
|
.s6section {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.s6section-title {
|
||||||
|
color: #007700;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comp-table .linux-col {
|
||||||
|
background: #001a00;
|
||||||
|
border-color: #00ff00;
|
||||||
|
color: #00ff00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.comp-table .linux-col .no { color: #44ff44; }
|
||||||
|
.comp-table .linux-col .yes { color: #ff4444; }
|
||||||
|
.comp-table th.linux-col {
|
||||||
|
border-bottom-color: #00ff00;
|
||||||
|
}
|
||||||
|
.comp-table td.linux-col .no { color: #44ff44; }
|
||||||
|
.comp-table td.linux-col .yes { color: #ff4444; }
|
||||||
|
|
||||||
|
.comp-table .graphene-col {
|
||||||
|
background: #001a00;
|
||||||
|
border-color: #00ff00;
|
||||||
|
color: #00ff00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.comp-table .graphene-col .no { color: #44ff44; }
|
||||||
|
.comp-table .graphene-col .yes { color: #ff4444; }
|
||||||
|
.comp-table th.graphene-col {
|
||||||
|
border-bottom-color: #00ff00;
|
||||||
|
}
|
||||||
|
.comp-table td.graphene-col .no { color: #44ff44; }
|
||||||
|
.comp-table td.graphene-col .yes { color: #ff4444; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -512,6 +567,7 @@
|
|||||||
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
|
<button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
|
||||||
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
<button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
|
||||||
<button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
|
<button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
|
||||||
|
<button class="scene3ChoiceBtn" id="yourTechBtn">YOUR TECH</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -553,6 +609,12 @@
|
|||||||
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="scene6" class="scene">
|
||||||
|
<div class="scene6text" id="s6Text"></div>
|
||||||
|
<div class="s6visual" id="s6Visual"></div>
|
||||||
|
<button class="btnNext" id="returnFromScene6">RETURN</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Testing shortcuts state
|
// Testing shortcuts state
|
||||||
let skipAnimations = false;
|
let skipAnimations = false;
|
||||||
@@ -1245,8 +1307,96 @@
|
|||||||
vis.innerHTML+=html;
|
vis.innerHTML+=html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function buildS6DesktopTable() {
|
||||||
|
const rows=[
|
||||||
|
['PROPERTY','<span class="nickname">LINUX</span>','macOS','WINDOWS','CHROMEOS'],
|
||||||
|
['OPEN SOURCE?','✅ YES','❌ NO','❌ NO','❌ NO'],
|
||||||
|
['NO TELEMETRY?','✅ YES','❌ NO','❌ NO','❌ NO'],
|
||||||
|
['USER FREEDOM','✅ YES','❌ NO','❌ NO','❌ NO'],
|
||||||
|
['FREE?','✅ YES','❌ NO','❌ NO','✅ YES'],
|
||||||
|
['RESPECTS PRIVACY?','✅ YES','❌ PARTIAL','❌ NO','❌ NO'],
|
||||||
|
];
|
||||||
|
let html='<div class="s6section"><div class="s6section-title">DESKTOP OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="linux-col">LINUX</th><th>macOS</th><th>WINDOWS</th><th>CHROMEOS</th></tr>';
|
||||||
|
for(let r=0;r<rows.length;r++){
|
||||||
|
const cells=rows[r];
|
||||||
|
html+='<tr>';
|
||||||
|
for(let c=0;c<cells.length;c++){
|
||||||
|
html+='<td'+(c===1?' class="linux-col"':'')+'>'+cells[c]+'</td>';
|
||||||
|
}
|
||||||
|
html+='</tr>';
|
||||||
|
}
|
||||||
|
html+='</table></div>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildS6MobileTable() {
|
||||||
|
const rows=[
|
||||||
|
['PROPERTY','<span class="nickname">GRAPHENEOS</span>','ANDROID','iOS'],
|
||||||
|
['OPEN SOURCE?','✅ YES','✅ YES','❌ NO'],
|
||||||
|
['NO GOOGLE TRACKING?','✅ YES','❌ NO','✅ YES'],
|
||||||
|
['PRIVACY BY DEFAULT?','✅ YES','❌ NO','❌ PARTIAL'],
|
||||||
|
['DE-GOOGLED?','✅ YES','❌ NO','N/A'],
|
||||||
|
['SECURITY FOCUSED?','✅ YES','❌ PARTIAL','✅ YES'],
|
||||||
|
];
|
||||||
|
let html='<div class="s6section"><div class="s6section-title">MOBILE OPERATING SYSTEMS</div><table class="comp-table"><tr><th></th><th class="graphene-col">GRAPHENEOS</th><th>ANDROID</th><th>iOS</th></tr>';
|
||||||
|
for(let r=0;r<rows.length;r++){
|
||||||
|
const cells=rows[r];
|
||||||
|
html+='<tr>';
|
||||||
|
for(let c=0;c<cells.length;c++){
|
||||||
|
html+='<td'+(c===1?' class="graphene-col"':'')+'>'+cells[c]+'</td>';
|
||||||
|
}
|
||||||
|
html+='</tr>';
|
||||||
|
}
|
||||||
|
html+='</table></div>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadScene6(sceneElem) {
|
||||||
|
s6c=[];
|
||||||
|
sceneElem.style.display='flex';
|
||||||
|
const txt=document.getElementById('s6Text');
|
||||||
|
const vis=document.getElementById('s6Visual');
|
||||||
|
txt.innerHTML='';
|
||||||
|
vis.className='s6visual';
|
||||||
|
let o=0;
|
||||||
|
const fi=setInterval(()=>{
|
||||||
|
o+=0.05;if(o>=1){o=1;clearInterval(fi);
|
||||||
|
typeCalmly(txt,"THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.",()=>{
|
||||||
|
const t1=setTimeout(()=>{
|
||||||
|
txt.innerHTML+="\n\n";
|
||||||
|
vis.classList.add('visible');
|
||||||
|
vis.innerHTML='';
|
||||||
|
vis.innerHTML+=buildS6DesktopTable();
|
||||||
|
typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
|
||||||
|
txt.innerHTML+="\n\n\n";
|
||||||
|
vis.innerHTML+=buildS6MobileTable();
|
||||||
|
typeCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
|
||||||
|
txt.innerHTML+="\n\n";
|
||||||
|
vis.innerHTML+='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
||||||
|
+'</div></div>';
|
||||||
|
typeCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
|
||||||
|
const t6=setTimeout(()=>{
|
||||||
|
document.getElementById('returnFromScene6').style.cssText='';
|
||||||
|
showNextBtn('returnFromScene6');
|
||||||
|
},400);
|
||||||
|
s6c.push(t6);
|
||||||
|
},8,20,s6c);
|
||||||
|
},8,20,s6c);
|
||||||
|
},8,20,s6c);
|
||||||
|
},300);
|
||||||
|
s6c.push(t1);
|
||||||
|
},8,20,s6c);
|
||||||
|
}
|
||||||
|
sceneElem.style.opacity=o;
|
||||||
|
},30);
|
||||||
|
}
|
||||||
|
|
||||||
let s4c = [];
|
let s4c = [];
|
||||||
let s5c = [];
|
let s5c = [];
|
||||||
|
let s6c = [];
|
||||||
|
|
||||||
// Initialize on load
|
// Initialize on load
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
@@ -1261,6 +1411,9 @@
|
|||||||
document.getElementById('yourMoneyBtn').addEventListener('click', () => {
|
document.getElementById('yourMoneyBtn').addEventListener('click', () => {
|
||||||
transitionToScene('scene3', loadScene4a, 'scene4a');
|
transitionToScene('scene3', loadScene4a, 'scene4a');
|
||||||
});
|
});
|
||||||
|
document.getElementById('yourTechBtn').addEventListener('click', () => {
|
||||||
|
transitionToScene('scene3', loadScene6, 'scene6');
|
||||||
|
});
|
||||||
document.getElementById('next4a').addEventListener('click', () => {
|
document.getElementById('next4a').addEventListener('click', () => {
|
||||||
document.getElementById('scene4a').style.display = 'none';
|
document.getElementById('scene4a').style.display = 'none';
|
||||||
loadScene4b(document.getElementById('scene4b'));
|
loadScene4b(document.getElementById('scene4b'));
|
||||||
@@ -1298,6 +1451,23 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById('returnFromScene6').addEventListener('click', () => {
|
||||||
|
document.getElementById('scene6').style.display = 'none';
|
||||||
|
const s3 = document.getElementById('scene3');
|
||||||
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||||||
|
scene3TypewriterTimeouts = [];
|
||||||
|
s3.style.display = 'flex';
|
||||||
|
s3.style.opacity = '1';
|
||||||
|
document.getElementById('scene3Title').classList.add('visible');
|
||||||
|
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||||
|
const row = document.getElementById('scene3ChoiceRow');
|
||||||
|
row.style.display = 'flex';
|
||||||
|
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
||||||
|
btn.style.opacity = '1';
|
||||||
|
btn.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Keyboard shortcuts for testing
|
// Keyboard shortcuts for testing
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === 'Escape') {
|
||||||
@@ -1425,6 +1595,23 @@
|
|||||||
showNextBtn('returnFromScene5');
|
showNextBtn('returnFromScene5');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Scene 6 skip
|
||||||
|
const s6 = document.getElementById('scene6');
|
||||||
|
if (s6.style.display === 'flex') {
|
||||||
|
s6c.forEach(t => clearTimeout(t)); s6c = [];
|
||||||
|
const txt = document.getElementById('s6Text');
|
||||||
|
const vis = document.getElementById('s6Visual');
|
||||||
|
txt.innerHTML = "THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.\n\nDESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\n\nYOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
|
||||||
|
vis.innerHTML=buildS6DesktopTable()+buildS6MobileTable()+'<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
|
||||||
|
+'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
|
||||||
|
+'</div></div>';
|
||||||
|
vis.classList.add('visible');
|
||||||
|
document.getElementById('returnFromScene6').style.cssText='';
|
||||||
|
showNextBtn('returnFromScene6');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.key === 'Delete') {
|
if (e.key === 'Delete') {
|
||||||
|
|||||||
Reference in New Issue
Block a user