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