avi/signalelsewhere
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Save point: Scene 3 stripped to just title + incubator text

Browse Source
This commit is contained in:
avi
2026-05-11 17:53:30 -05:00
parent e42eecf861
commit 5f80cfe5c8
1 changed files with 2 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
index.html
View File

@@ -91,42 +91,6 @@
transition: opacity 1s ease; transition: opacity 1s ease;
} }
#scene3RecruitLines {
display: none;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 2rem;
}
.scene3RecruitLine {
display: none;
flex-direction: row;
align-items: center;
font-size: 1.2rem;
line-height: 2;
color: #00ff00;
}
#scene3RecruitLine1 {
margin-top: 7.2rem;
}
#scene3RecruitCursor,
#scene3RecruitCursor2 {
display: none;
width: 10px;
height: 1.4em;
background-color: #00ff00;
margin-left: 4px;
flex-shrink: 0;
opacity: 1;
}
#scene3RecruitLine3 {
min-height: 2em;
}
#scene2 { #scene2 {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -134,57 +98,6 @@
position: relative; position: relative;
} }
.choiceBtn {
position: absolute;
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;
display: none;
}
.choiceBtn:hover {
background-color: #003300;
}
#creatorBtn {
top: 55%;
left: 50%;
transform: translateX(-50%);
}
#builderBtn {
top: 70%;
left: 35%;
transform: translateX(-50%);
}
#developerBtn {
top: 70%;
left: 65%;
transform: translateX(-50%);
}
#scene3FitInText {
position: absolute;
bottom: 48%;
left: 50%;
transform: translateX(-50%);
font-size: 1.2rem;
color: #00ff00;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
}
#scene2Lines { #scene2Lines {
display: none; display: none;
flex-direction: column; flex-direction: column;
@@ -313,37 +226,6 @@
<div id="scene3" class="scene"> <div id="scene3" class="scene">
<div id="scene3Title">LAB 484</div> <div id="scene3Title">LAB 484</div>
<div id="scene3Text"></div> <div id="scene3Text"></div>
<div id="scene3RecruitLines">
<div id="scene3RecruitLine1" class="scene3RecruitLine">
<span id="scene3RecruitText1"></span>
<span id="scene3RecruitCursor"></span>
</div>
<div id="scene3RecruitLine2" class="scene3RecruitLine">
<span id="scene3RecruitText2"></span>
</div>
<div id="scene3RecruitLine3" class="scene3RecruitLine">
<span id="scene3RecruitCursor2"></span>
</div>
<div id="scene3RecruitLine4" class="scene3RecruitLine">
<span id="scene3RecruitText4"></span>
</div>
</div>
<div id="scene3FitInText"></div>
<button id="creatorBtn" class="choiceBtn">CREATOR</button>
<button id="builderBtn" class="choiceBtn">BUILDER</button>
<button id="developerBtn" class="choiceBtn">DEVELOPER</button>
</div>
<div id="sceneCreator" class="scene">
<div id="creatorSceneText"></div>
</div>
<div id="sceneBuilder" class="scene">
<div id="builderSceneText"></div>
</div>
<div id="sceneDeveloper" class="scene">
<div id="developerSceneText"></div>
</div> </div>
<script> <script>
@@ -691,69 +573,11 @@
loader(to); loader(to);
} }
// Placeholder scene loaders // Scene 3 loader
function loadSceneCreator(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('creatorSceneText');
text.style.visibility = 'visible';
text.textContent = 'CREATOR';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
function loadSceneBuilder(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('builderSceneText');
text.style.visibility = 'visible';
text.textContent = 'BUILDER';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
function loadSceneDeveloper(sceneElem) {
sceneElem.style.display = 'flex';
const text = document.getElementById('developerSceneText');
text.style.visibility = 'visible';
text.textContent = 'DEVELOPER';
let opacity = 0;
const fadeIn = setInterval(() => {
opacity += 0.05;
if (opacity >= 1) {
opacity = 1;
clearInterval(fadeIn);
}
sceneElem.style.opacity = opacity;
}, 30);
}
// Scene 3 loader with recruitment text and 3 choice buttons
function loadScene3(sceneElem) { function loadScene3(sceneElem) {
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');
const recruitLines = document.getElementById('scene3RecruitLines');
const rl1 = document.getElementById('scene3RecruitLine1');
const rt1 = document.getElementById('scene3RecruitText1');
const cursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
const choiceBtns = [creatorBtn, builderBtn, developerBtn];
scene3TypewriterTimeouts = [];
let opacity = 0; let opacity = 0;
const fadeIn = setInterval(() => { const fadeIn = setInterval(() => {
@@ -767,46 +591,7 @@
}, 300); }, 300);
setTimeout(() => { setTimeout(() => {
typeCalmly(textContainer, "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT", () => { typeCalmly(textContainer, "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT", undefined, undefined, undefined, scene3TypewriterTimeouts);
recruitLines.style.display = 'flex';
setTimeout(() => {
rl1.style.display = 'flex';
typeCalmly(rt1, "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENINGG - WHO KNOW CHANGE ISN'T OPTIONAL. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE", () => {
setTimeout(() => {
const fitInText = document.getElementById('scene3FitInText');
fitInText.textContent = 'WHERE DO YOU FIT IN?';
fitInText.style.visibility = 'visible';
let fiOpacity = 0;
const fiFadeIn = setInterval(() => {
fiOpacity += 0.05;
if (fiOpacity >= 1) {
fiOpacity = 1;
clearInterval(fiFadeIn);
}
fitInText.style.opacity = fiOpacity;
}, 30);
setTimeout(() => {
choiceBtns.forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';
let btnOpacity = 0;
const btnFadeIn = setInterval(() => {
btnOpacity += 0.02;
if (btnOpacity >= 1) {
btnOpacity = 1;
clearInterval(btnFadeIn);
btn.style.pointerEvents = 'auto';
}
btn.style.opacity = btnOpacity;
}, 30);
});
}, 500);
}, 500);
}, undefined, undefined, scene3TypewriterTimeouts);
}, 2000);
}, undefined, undefined, scene3TypewriterTimeouts);
}, 800); }, 800);
} }
sceneElem.style.opacity = opacity; sceneElem.style.opacity = opacity;
@@ -820,15 +605,6 @@
// Button click handlers // Button click handlers
document.getElementById('followBtn').addEventListener('click', transitionToScene2); document.getElementById('followBtn').addEventListener('click', transitionToScene2);
document.getElementById('creatorBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneCreator, 'sceneCreator');
});
document.getElementById('builderBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneBuilder, 'sceneBuilder');
});
document.getElementById('developerBtn').addEventListener('click', () => {
transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper');
});
document.getElementById('whatIsLabBtn').addEventListener('click', () => { document.getElementById('whatIsLabBtn').addEventListener('click', () => {
transitionToScene('scene2', loadScene3, 'scene3'); transitionToScene('scene2', loadScene3, 'scene3');
}); });
@@ -867,33 +643,6 @@
s2Btn.style.pointerEvents = 'auto'; s2Btn.style.pointerEvents = 'auto';
} }
// Scene 3 skip (recruit text typing)
const scene3 = document.getElementById('scene3');
const recruitLines = document.getElementById('scene3RecruitLines');
const rl1 = document.getElementById('scene3RecruitLine1');
const rt1 = document.getElementById('scene3RecruitText1');
const rCursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
scene3TypewriterTimeouts = [];
rCursor.style.display = 'none';
recruitLines.style.display = 'flex';
rl1.style.display = 'flex';
rt1.textContent = "THE LAB IS CONNECTING WITH PEOPLE WHO SEE WHAT'S HAPPENINGG - WHO KNOW CHANGE ISN'T OPTIONAL. WE'RE LOOKING FOR THOSE READY TO STEP IN AND SHAPE THE FUTURE";
[creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';
btn.style.opacity = '1';
btn.style.pointerEvents = 'auto';
});
const fitInText = document.getElementById('scene3FitInText');
fitInText.textContent = 'WHERE DO YOU FIT IN?';
fitInText.style.visibility = 'visible';
fitInText.style.opacity = '1';
}
} }
if (e.key === 'Delete') { if (e.key === 'Delete') {