forked from avi/signalelsewhere
Save point: Scene 3 reworked - LAB 484 title top-left, divine life path typewriter, buttons removed
This commit is contained in:
114
index.html
114
index.html
@@ -137,43 +137,18 @@
|
||||
}
|
||||
|
||||
#scene3Title {
|
||||
visibility: hidden;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 2rem;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: #00ff00;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
|
||||
transition: opacity 1.5s ease-out;
|
||||
}
|
||||
|
||||
#scene3Title.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#lab484Btn, #decentralizationBtn {
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 5;
|
||||
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;
|
||||
}
|
||||
|
||||
#lab484Btn:hover, #decentralizationBtn:hover {
|
||||
background-color: #003300;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -195,10 +170,8 @@
|
||||
</div>
|
||||
|
||||
<div id="scene3" class="scene">
|
||||
<div id="scene3Title">YOU'RE AT LAB 484</div>
|
||||
<div id="scene3Title">LAB 484</div>
|
||||
<div id="scene3Text"></div>
|
||||
<button id="lab484Btn">LAB 484?</button>
|
||||
<button id="decentralizationBtn">DECENTRALIZATION?</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -550,7 +523,6 @@
|
||||
sceneElem.style.display = 'flex';
|
||||
const title = document.getElementById('scene3Title');
|
||||
const textContainer = document.getElementById('scene3Text');
|
||||
const lab484Btn = document.getElementById('lab484Btn');
|
||||
|
||||
let opacity = 0;
|
||||
const fadeIn = setInterval(() => {
|
||||
@@ -559,28 +531,14 @@
|
||||
opacity = 1;
|
||||
clearInterval(fadeIn);
|
||||
|
||||
// Show title with animation
|
||||
setTimeout(() => {
|
||||
title.classList.add('visible');
|
||||
}, 300);
|
||||
|
||||
typewriterLines(
|
||||
["ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
|
||||
["LAB 484 STANDS FOR ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
|
||||
textContainer,
|
||||
() => {
|
||||
lab484Btn.style.display = 'block';
|
||||
lab484Btn.style.visibility = 'visible';
|
||||
let btnOpacity = 0;
|
||||
const btnFadeIn = setInterval(() => {
|
||||
btnOpacity += 0.05;
|
||||
if (btnOpacity >= 1) {
|
||||
btnOpacity = 1;
|
||||
clearInterval(btnFadeIn);
|
||||
lab484Btn.style.pointerEvents = 'auto';
|
||||
}
|
||||
lab484Btn.style.opacity = btnOpacity;
|
||||
}, 30);
|
||||
},
|
||||
() => {},
|
||||
120
|
||||
);
|
||||
}
|
||||
@@ -597,59 +555,7 @@
|
||||
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
|
||||
document.getElementById('learnBtn').addEventListener('click', handleLearnClick);
|
||||
|
||||
// "LAB 484?" button click handler
|
||||
document.getElementById('lab484Btn').addEventListener('click', function() {
|
||||
const btn = document.getElementById('lab484Btn');
|
||||
const textContainer = document.getElementById('scene3Text');
|
||||
const decentralizationBtn = document.getElementById('decentralizationBtn');
|
||||
|
||||
btn.style.pointerEvents = 'none';
|
||||
btn.style.opacity = 0;
|
||||
btn.style.visibility = 'hidden';
|
||||
|
||||
textContainer.textContent = '';
|
||||
|
||||
typewriterLines(
|
||||
["LAB 484 IS A DECENTRALIZED TECH INCUBATOR THAT CURRENTLY HAS 12 STARTUPS UNDERNEATH IT"],
|
||||
textContainer,
|
||||
() => {
|
||||
decentralizationBtn.style.display = 'block';
|
||||
decentralizationBtn.style.visibility = 'visible';
|
||||
let btnOpacity = 0;
|
||||
const btnFadeIn = setInterval(() => {
|
||||
btnOpacity += 0.05;
|
||||
if (btnOpacity >= 1) {
|
||||
btnOpacity = 1;
|
||||
clearInterval(btnFadeIn);
|
||||
decentralizationBtn.style.pointerEvents = 'auto';
|
||||
}
|
||||
decentralizationBtn.style.opacity = btnOpacity;
|
||||
}, 30);
|
||||
},
|
||||
60
|
||||
);
|
||||
});
|
||||
|
||||
// "DECENTRALIZATION?" button click handler
|
||||
document.getElementById('decentralizationBtn').addEventListener('click', function() {
|
||||
const btn = document.getElementById('decentralizationBtn');
|
||||
const textContainer = document.getElementById('scene3Text');
|
||||
|
||||
btn.style.pointerEvents = 'none';
|
||||
btn.style.opacity = 0;
|
||||
btn.style.visibility = 'hidden';
|
||||
|
||||
textContainer.textContent = '';
|
||||
|
||||
typewriterLines(
|
||||
["DECENTRALIZATION IS A SIGN — A NUDGE TO TRUST YOUR OWN PATH AND CONNECT DIRECTLY WITH OTHERS WHO FEEL THE SAME PULL."],
|
||||
textContainer,
|
||||
() => {
|
||||
// Scene 3 complete - placeholder for Scene 4
|
||||
},
|
||||
120
|
||||
);
|
||||
});
|
||||
|
||||
// Keyboard shortcuts for testing
|
||||
document.addEventListener('keydown', (e) => {
|
||||
|
||||
Reference in New Issue
Block a user