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 {
|
#scene3Title {
|
||||||
visibility: hidden;
|
position: absolute;
|
||||||
font-size: 1.8rem;
|
top: 2rem;
|
||||||
margin-bottom: 2rem;
|
left: 2rem;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00ff00;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.8);
|
transition: opacity 1.5s ease-out;
|
||||||
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#scene3Title.visible {
|
#scene3Title.visible {
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -195,10 +170,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="scene3" class="scene">
|
<div id="scene3" class="scene">
|
||||||
<div id="scene3Title">YOU'RE AT LAB 484</div>
|
<div id="scene3Title">LAB 484</div>
|
||||||
<div id="scene3Text"></div>
|
<div id="scene3Text"></div>
|
||||||
<button id="lab484Btn">LAB 484?</button>
|
|
||||||
<button id="decentralizationBtn">DECENTRALIZATION?</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -550,7 +523,6 @@
|
|||||||
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 lab484Btn = document.getElementById('lab484Btn');
|
|
||||||
|
|
||||||
let opacity = 0;
|
let opacity = 0;
|
||||||
const fadeIn = setInterval(() => {
|
const fadeIn = setInterval(() => {
|
||||||
@@ -559,28 +531,14 @@
|
|||||||
opacity = 1;
|
opacity = 1;
|
||||||
clearInterval(fadeIn);
|
clearInterval(fadeIn);
|
||||||
|
|
||||||
// Show title with animation
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
title.classList.add('visible');
|
title.classList.add('visible');
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
||||||
typewriterLines(
|
typewriterLines(
|
||||||
["ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
|
["LAB 484 STANDS FOR ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH"],
|
||||||
textContainer,
|
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
|
120
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -597,59 +555,7 @@
|
|||||||
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
|
document.getElementById('followBtn').addEventListener('click', transitionToScene2);
|
||||||
document.getElementById('learnBtn').addEventListener('click', handleLearnClick);
|
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
|
// Keyboard shortcuts for testing
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user