Save point: Scene 4 content shifted down, coin grid halved, Scene 5 restructured for parallel display — hash bar removed, row-by-row removed, fade-in extended, UNCENSORABLE flipped, RETURN shows completed Scene 3 without replay
This commit is contained in:
114
index.html
114
index.html
@@ -243,7 +243,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1.5rem 2rem;
|
padding: 8rem 2rem 1.5rem;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.scene4text {
|
.scene4text {
|
||||||
@@ -346,7 +346,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(10, 1fr);
|
grid-template-columns: repeat(10, 1fr);
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
max-width: 30rem;
|
max-width: 15rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.coin {
|
.coin {
|
||||||
@@ -424,7 +424,7 @@
|
|||||||
max-width: 55rem;
|
max-width: 55rem;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 1.2s ease;
|
transition: opacity 4s ease;
|
||||||
}
|
}
|
||||||
.s5visual.visible { opacity: 1; }
|
.s5visual.visible { opacity: 1; }
|
||||||
|
|
||||||
@@ -550,6 +550,7 @@
|
|||||||
<div id="scene5" class="scene">
|
<div id="scene5" class="scene">
|
||||||
<div class="scene5text" id="s5Text"></div>
|
<div class="scene5text" id="s5Text"></div>
|
||||||
<div class="s5visual" id="s5Visual"></div>
|
<div class="s5visual" id="s5Visual"></div>
|
||||||
|
<button class="btnNext" id="returnFromScene5">RETURN</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -916,6 +917,8 @@
|
|||||||
|
|
||||||
// Scene 3 loader
|
// Scene 3 loader
|
||||||
function loadScene3(sceneElem) {
|
function loadScene3(sceneElem) {
|
||||||
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||||||
|
scene3TypewriterTimeouts = [];
|
||||||
sceneElem.style.display = 'flex';
|
sceneElem.style.display = 'flex';
|
||||||
const title = document.getElementById('scene3Title');
|
const title = document.getElementById('scene3Title');
|
||||||
const textContainer = document.getElementById('scene3Text');
|
const textContainer = document.getElementById('scene3Text');
|
||||||
@@ -1195,77 +1198,51 @@
|
|||||||
typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
|
typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
|
||||||
const t1=setTimeout(()=>{
|
const t1=setTimeout(()=>{
|
||||||
txt.innerHTML+="\n\n";
|
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.",()=>{
|
typeCalmly(txt,"BUT SEVERAL COINS COMPETE IN DIFFERENT NICHES — PRIVACY, SPEED, PROGRAMMABILITY, OR STORE-OF-VALUE NARRATIVES.",()=>{
|
||||||
const t2=setTimeout(()=>{
|
txt.innerHTML+="\n\n";
|
||||||
|
typeCalmly(txt,"NONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.",()=>{
|
||||||
txt.innerHTML+="\n\n";
|
txt.innerHTML+="\n\n";
|
||||||
typeCalmly(txt,"NONE POSSESS BITCOIN'S FULL SET OF PROPERTIES.",()=>{
|
typeCalmly(txt,"THE NETWORK EFFECT IS INSURMOUNTABLE.",()=>{
|
||||||
const t3=setTimeout(()=>{
|
txt.innerHTML+="\n\n";
|
||||||
txt.innerHTML+="\n\n";
|
typeCalmly(txt,"HERE IS THE HONEST COMPARISON.",()=>{
|
||||||
vis.innerHTML='<div class="hash-bar-container"><div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">BITCOIN MINING DOMINANCE</div><div class="hash-bar"><div class="hash-bar-btc">BTC 99%</div><div class="hash-bar-rest"></div></div></div>';
|
const t6=setTimeout(()=>{
|
||||||
vis.classList.add('visible');
|
document.getElementById('returnFromScene5').style.cssText='';
|
||||||
const t4=setTimeout(()=>{
|
showNextBtn('returnFromScene5');
|
||||||
txt.innerHTML+="\n\n";
|
},400);
|
||||||
typeCalmly(txt,"THE NETWORK EFFECT IS INSURMOUNTABLE.",()=>{
|
s5c.push(t6);
|
||||||
const t5=setTimeout(()=>{
|
},8,20,s5c);
|
||||||
txt.innerHTML+="\n\n";
|
},8,20,s5c);
|
||||||
typeCalmly(txt,"HERE IS THE HONEST COMPARISON.",()=>{
|
},8,20,s5c);
|
||||||
const t6=setTimeout(()=>{
|
},8,20,s5c);
|
||||||
buildS5Table(vis);
|
},300);
|
||||||
},800);
|
|
||||||
s5c.push(t6);
|
|
||||||
},35,65,s5c);
|
|
||||||
},1200);
|
|
||||||
s5c.push(t5);
|
|
||||||
},35,65,s5c);
|
|
||||||
},1000);
|
|
||||||
s5c.push(t4);
|
|
||||||
},1000);
|
|
||||||
s5c.push(t3);
|
|
||||||
},35,65,s5c);
|
|
||||||
},1500);
|
|
||||||
s5c.push(t2);
|
|
||||||
},35,65,s5c);
|
|
||||||
},1500);
|
|
||||||
s5c.push(t1);
|
s5c.push(t1);
|
||||||
},35,65,s5c);
|
},8,20,s5c);
|
||||||
}
|
}
|
||||||
sceneElem.style.opacity=o;
|
sceneElem.style.opacity=o;
|
||||||
},30);
|
},30);
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildS5Table(vis) {
|
function buildS5Table(vis) {
|
||||||
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>';
|
|
||||||
const rows=[
|
const rows=[
|
||||||
['NICHE','<span class="nickname">SOUND MONEY</span>','PROGRAMMABILITY','PRIVACY','PAYMENTS','SPEED'],
|
['NICHE','<span class="nickname">SOUND MONEY</span>','PROGRAMMABILITY','PRIVACY','PAYMENTS','SPEED'],
|
||||||
['DECENTRALIZED?','✅ YES','⚠️ PARTIAL','✅ YES','❌ RIPPLE LABS','❌ VC/FOUNDATION'],
|
['DECENTRALIZED?','✅ YES','⚠️ PARTIAL','✅ YES','❌ RIPPLE LABS','❌ VC/FOUNDATION'],
|
||||||
['FAIR LAUNCH?','✅ YES','❌ 72M PREMINE','✅ YES','❌ 100% PREMINE','❌ PREMINE'],
|
['FAIR LAUNCH?','✅ YES','❌ 72M PREMINE','✅ YES','❌ 100% PREMINE','❌ PREMINE'],
|
||||||
['SUPPLY CAP','✅ 21M','❌ NO CAP','❌ TAIL EMISSION','❌ NO CAP','❌ NO CAP'],
|
['SUPPLY CAP','✅ 21M','❌ NO CAP','❌ TAIL EMISSION','❌ NO CAP','❌ NO CAP'],
|
||||||
['CENSORABLE?','❌ NO','✅ YES (OFAC)','❌ NO','✅ YES','✅ YES'],
|
['UNCENSORABLE?','✅ YES','❌ NO','✅ YES','❌ NO','❌ NO'],
|
||||||
];
|
];
|
||||||
let ri=0;
|
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>';
|
||||||
function addRow(){
|
for(let r=0;r<rows.length;r++){
|
||||||
if(ri>=rows.length){
|
const cells=rows[r];
|
||||||
const pt=setTimeout(()=>{
|
html+='<tr>';
|
||||||
vis.innerHTML+='<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>';
|
for(let c=0;c<cells.length;c++){
|
||||||
},400);
|
html+='<td'+(c===1?' class="btc-col"':'')+'>'+cells[c]+'</td>';
|
||||||
s5c.push(pt);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
const r=rows[ri];
|
html+='</tr>';
|
||||||
const rt=setTimeout(()=>{
|
|
||||||
const table=document.getElementById('s5table');
|
|
||||||
const tr=table.insertRow();
|
|
||||||
for(let c=0;c<r.length;c++){
|
|
||||||
const td=tr.insertCell();
|
|
||||||
if(c===1)td.className='btc-col';
|
|
||||||
td.innerHTML=r[c];
|
|
||||||
}
|
|
||||||
ri++;
|
|
||||||
addRow();
|
|
||||||
},350);
|
|
||||||
s5c.push(rt);
|
|
||||||
}
|
}
|
||||||
addRow(0);
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
let s4c = [];
|
let s4c = [];
|
||||||
@@ -1304,6 +1281,22 @@
|
|||||||
document.getElementById('scene4e').style.display = 'none';
|
document.getElementById('scene4e').style.display = 'none';
|
||||||
loadScene5(document.getElementById('scene5'));
|
loadScene5(document.getElementById('scene5'));
|
||||||
});
|
});
|
||||||
|
document.getElementById('returnFromScene5').addEventListener('click', () => {
|
||||||
|
document.getElementById('scene5').style.display = 'none';
|
||||||
|
const s3 = document.getElementById('scene3');
|
||||||
|
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
|
||||||
|
scene3TypewriterTimeouts = [];
|
||||||
|
s3.style.display = 'flex';
|
||||||
|
s3.style.opacity = '1';
|
||||||
|
document.getElementById('scene3Title').classList.add('visible');
|
||||||
|
document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
|
||||||
|
const row = document.getElementById('scene3ChoiceRow');
|
||||||
|
row.style.display = 'flex';
|
||||||
|
row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
|
||||||
|
btn.style.opacity = '1';
|
||||||
|
btn.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Keyboard shortcuts for testing
|
// Keyboard shortcuts for testing
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
@@ -1415,13 +1408,12 @@
|
|||||||
const txt = document.getElementById('s5Text');
|
const txt = document.getElementById('s5Text');
|
||||||
const vis = document.getElementById('s5Visual');
|
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.";
|
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='<div class="hash-bar-container"><div style="text-align:center;font-size:0.8rem;color:#007700;margin-bottom:0.5rem;">BITCOIN MINING DOMINANCE</div><div class="hash-bar"><div class="hash-bar-btc">BTC 99%</div><div class="hash-bar-rest"></div></div></div>';
|
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>'
|
||||||
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>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>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>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>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>CENSORABLE?</td><td class="btc-col">❌ NO</td><td>✅ YES (OFAC)</td><td>❌ NO</td><td>✅ YES</td><td>✅ YES</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>'
|
+'</table>'
|
||||||
+'<div class="punch-row">'
|
+'<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">FIRST —<br>EVERYTHING ELSE IS A COPY</span></div>'
|
||||||
@@ -1429,6 +1421,8 @@
|
|||||||
+'<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 class="punch-card"><span class="punch-icon">🧪</span><span class="punch-text">TRULY DECENTRALIZED —<br>NO FOUNDER, NO COMPANY, NO CEO</span></div>'
|
||||||
+'</div>';
|
+'</div>';
|
||||||
vis.classList.add('visible');
|
vis.classList.add('visible');
|
||||||
|
document.getElementById('returnFromScene5').style.cssText='';
|
||||||
|
showNextBtn('returnFromScene5');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user