diff --git a/index.html b/index.html index a6f0efb..5c2d2fc 100644 --- a/index.html +++ b/index.html @@ -160,6 +160,52 @@ transform: translateX(-50%); } + #scene2Line { + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + line-height: 1.8; + color: #00ff00; + visibility: hidden; + padding: 2rem; + text-align: center; + } + + #scene2Cursor { + display: none; + width: 10px; + height: 1.4em; + background-color: #00ff00; + margin-left: 4px; + flex-shrink: 0; + opacity: 1; + } + + #whatIsLabBtn { + position: fixed; + bottom: 5%; + left: 50%; + transform: translateX(-50%); + z-index: 3; + 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; + } + + #whatIsLabBtn:hover { + background-color: #003300; + } + #scene3Title { position: absolute; top: 2rem; @@ -199,6 +245,11 @@
+
+ + +
+
@@ -447,11 +498,11 @@ } // Scene transition functions - function transitionToScene3() { + function transitionToScene2() { const canvas = document.getElementById('matrixCanvas'); const textContainer = document.getElementById('textContainer'); const btn = document.getElementById('followBtn'); - const scene3 = document.getElementById('scene3'); + const scene2 = document.getElementById('scene2'); let opacity = 1; const fadeOut = setInterval(() => { @@ -462,7 +513,7 @@ canvas.style.display = 'none'; textContainer.style.display = 'none'; btn.style.display = 'none'; - loadScene3(scene3); + loadScene2(scene2); } canvas.style.opacity = opacity; textContainer.style.opacity = opacity; @@ -470,15 +521,79 @@ }, 30); } - // Scene 2 loader (no longer used - buttons moved to Scene 3) + // Scene 2 loader: calm typing sequence + function blinkCursor(cursor, times, callback) { + cursor.style.display = 'inline-block'; + cursor.style.opacity = '1'; + let count = 0; + let visible = true; + const interval = setInterval(() => { + visible = !visible; + cursor.style.opacity = visible ? '1' : '0'; + count++; + if (count >= times * 2) { + clearInterval(interval); + cursor.style.display = 'none'; + callback && callback(); + } + }, 500); + } + + function typeCalmly(elem, text, callback) { + let i = 0; + const total = text.length; + + function typeChar() { + if (i >= total) { + callback && callback(); + return; + } + elem.textContent += text[i]; + i++; + const progress = i / total; + const delay = 70 + progress * progress * 130; + setTimeout(typeChar, delay); + } + typeChar(); + } + function loadScene2(sceneElem) { sceneElem.style.display = 'flex'; + const line = document.getElementById('scene2Line'); + const message = document.getElementById('scene2Message'); + const cursor = document.getElementById('scene2Cursor'); + const btn = document.getElementById('whatIsLabBtn'); + let opacity = 0; const fadeIn = setInterval(() => { opacity += 0.05; if (opacity >= 1) { opacity = 1; clearInterval(fadeIn); + + line.style.visibility = 'visible'; + + blinkCursor(cursor, 5, () => { + typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => { + blinkCursor(cursor, 3, () => { + typeCalmly(message, " TO LAB 484", () => { + setTimeout(() => { + btn.style.visibility = 'visible'; + let btnOpacity = 0; + const btnFadeIn = setInterval(() => { + btnOpacity += 0.05; + if (btnOpacity >= 1) { + btnOpacity = 1; + clearInterval(btnFadeIn); + btn.style.pointerEvents = 'auto'; + } + btn.style.opacity = btnOpacity; + }, 30); + }, 3000); + }); + }); + }); + }); } sceneElem.style.opacity = opacity; }, 30); @@ -628,7 +743,7 @@ }); // Button click handlers - document.getElementById('followBtn').addEventListener('click', transitionToScene3); + document.getElementById('followBtn').addEventListener('click', transitionToScene2); document.getElementById('creatorBtn').addEventListener('click', () => { transitionToScene('scene3', loadSceneCreator, 'sceneCreator'); }); @@ -638,6 +753,9 @@ document.getElementById('developerBtn').addEventListener('click', () => { transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper'); }); + document.getElementById('whatIsLabBtn').addEventListener('click', () => { + transitionToScene('scene2', loadScene3, 'scene3'); + }); @@ -654,6 +772,19 @@ skipScene1(); } + // Scene 2 skip (calm typing) + const scene2 = document.getElementById('scene2'); + const s2Cursor = document.getElementById('scene2Cursor'); + const s2Message = document.getElementById('scene2Message'); + const s2Btn = document.getElementById('whatIsLabBtn'); + if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') { + s2Cursor.style.display = 'none'; + s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484'; + s2Btn.style.visibility = 'visible'; + s2Btn.style.opacity = '1'; + s2Btn.style.pointerEvents = 'auto'; + } + // Scene 3 skip (cursor blinking / I AM A... typing) const scene3 = document.getElementById('scene3'); const cursor = document.getElementById('blinkCursor'); @@ -675,12 +806,12 @@ } if (e.key === 'Delete') { - // Fast-forward to Scene 3 + // Fast-forward to Scene 2 document.getElementById('matrixCanvas').style.display = 'none'; document.getElementById('textContainer').style.display = 'none'; document.getElementById('followBtn').style.display = 'none'; - loadScene3(document.getElementById('scene3')); + loadScene2(document.getElementById('scene2')); } });