From b25a97b184baea46734303d686e544b1a903e638 Mon Sep 17 00:00:00 2001 From: avi Date: Sat, 9 May 2026 16:33:16 -0500 Subject: [PATCH] Save point: Scene 3 now contains I AM A... with 3-blink cursor + CREATOR/BUILDER/DEVELOPER buttons --- index.html | 161 ++++++++++++++++++++++++----------------------------- 1 file changed, 74 insertions(+), 87 deletions(-) diff --git a/index.html b/index.html index 32f63ff..a6f0efb 100644 --- a/index.html +++ b/index.html @@ -199,16 +199,16 @@
-
-
- - -
LAB 484
+
+
+ + +
@@ -447,11 +447,11 @@ } // Scene transition functions - function transitionToScene2() { + function transitionToScene3() { const canvas = document.getElementById('matrixCanvas'); const textContainer = document.getElementById('textContainer'); const btn = document.getElementById('followBtn'); - const scene2 = document.getElementById('scene2'); + const scene3 = document.getElementById('scene3'); let opacity = 1; const fadeOut = setInterval(() => { @@ -462,7 +462,7 @@ canvas.style.display = 'none'; textContainer.style.display = 'none'; btn.style.display = 'none'; - loadScene2(scene2); + loadScene3(scene3); } canvas.style.opacity = opacity; textContainer.style.opacity = opacity; @@ -470,81 +470,15 @@ }, 30); } - // Scene 2 loader with blinking cursor (5 blinks), "I AM I" text, and 3 choice buttons + // Scene 2 loader (no longer used - buttons moved to Scene 3) function loadScene2(sceneElem) { sceneElem.style.display = 'flex'; - const cursor = document.getElementById('blinkCursor'); - const textContainer = document.getElementById('scene2Text'); - const creatorBtn = document.getElementById('creatorBtn'); - const builderBtn = document.getElementById('builderBtn'); - const developerBtn = document.getElementById('developerBtn'); - const choiceBtns = [creatorBtn, builderBtn, developerBtn]; - let opacity = 0; const fadeIn = setInterval(() => { opacity += 0.05; if (opacity >= 1) { opacity = 1; clearInterval(fadeIn); - - cursor.style.display = 'block'; - cursor.style.opacity = '1'; - let blinkCount = 0; - let isVisible = true; - const blinkInterval = setInterval(() => { - isVisible = !isVisible; - cursor.style.opacity = isVisible ? '1' : '0'; - blinkCount++; - if (blinkCount >= 10) { - clearInterval(blinkInterval); - cursor.style.display = 'none'; - - textContainer.textContent = ''; - let segIndex = 0; - const segments = ["I ", "AM ", "A..."]; - - function typeNextSegment() { - if (segIndex >= segments.length) { - 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); - }); - }, 3000); - return; - } - - cursor.style.display = 'block'; - cursor.style.opacity = '1'; - let blinkCount = 0; - let isVisible = true; - const blinkInterval = setInterval(() => { - isVisible = !isVisible; - cursor.style.opacity = isVisible ? '1' : '0'; - blinkCount++; - if (blinkCount >= 6) { - clearInterval(blinkInterval); - cursor.style.display = 'none'; - textContainer.textContent += segments[segIndex]; - segIndex++; - setTimeout(typeNextSegment, 100); - } - }, 500); - } - - typeNextSegment(); - } - }, 500); } sceneElem.style.opacity = opacity; }, 30); @@ -607,11 +541,17 @@ }, 30); } - // Scene 3 loader + // Scene 3 loader with I AM A... sequence and 3 choice buttons function loadScene3(sceneElem) { sceneElem.style.display = 'flex'; const title = document.getElementById('scene3Title'); const textContainer = document.getElementById('scene3Text'); + const iAmText = document.getElementById('scene2Text'); + const cursor = document.getElementById('blinkCursor'); + const creatorBtn = document.getElementById('creatorBtn'); + const builderBtn = document.getElementById('builderBtn'); + const developerBtn = document.getElementById('developerBtn'); + const choiceBtns = [creatorBtn, builderBtn, developerBtn]; let opacity = 0; const fadeIn = setInterval(() => { @@ -627,7 +567,54 @@ typewriterLines( [" IN NUMEROLOGY, THE NUMBERS 484 STAND FOR ALL MATERIAL PROVISION FOR YOUR DIVINE LIFE PATH", "\n\nLAB 484 IS A TECH INCUBATOR THAT HAS 11 STARTUPS UNDERNEATH IT"], textContainer, - () => {}, + () => { + // After typewriter text finishes, start I AM A... sequence + iAmText.textContent = ''; + iAmText.style.visibility = 'visible'; + let segIndex = 0; + const segments = [" I", "AM", "A..."]; + + function typeNextSegment() { + if (segIndex >= segments.length) { + 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); + }); + }, 3000); + return; + } + + cursor.style.display = 'block'; + cursor.style.opacity = '1'; + let blinkCount = 0; + let isVisible = true; + const blinkInterval = setInterval(() => { + isVisible = !isVisible; + cursor.style.opacity = isVisible ? '1' : '0'; + blinkCount++; + if (blinkCount >= 6) { + clearInterval(blinkInterval); + cursor.style.display = 'none'; + iAmText.textContent += segments[segIndex]; + segIndex++; + setTimeout(typeNextSegment, 3000); + } + }, 500); + } + + typeNextSegment(); + }, 200 ); } @@ -641,15 +628,15 @@ }); // Button click handlers - document.getElementById('followBtn').addEventListener('click', transitionToScene2); + document.getElementById('followBtn').addEventListener('click', transitionToScene3); document.getElementById('creatorBtn').addEventListener('click', () => { - transitionToScene('scene2', loadSceneCreator, 'sceneCreator'); + transitionToScene('scene3', loadSceneCreator, 'sceneCreator'); }); document.getElementById('builderBtn').addEventListener('click', () => { - transitionToScene('scene2', loadSceneBuilder, 'sceneBuilder'); + transitionToScene('scene3', loadSceneBuilder, 'sceneBuilder'); }); document.getElementById('developerBtn').addEventListener('click', () => { - transitionToScene('scene2', loadSceneDeveloper, 'sceneDeveloper'); + transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper'); }); @@ -667,16 +654,17 @@ skipScene1(); } - // Scene 2 skip (cursor blinking) - const scene2Text = document.getElementById('scene2Text'); + // Scene 3 skip (cursor blinking / I AM A... typing) + const scene3 = document.getElementById('scene3'); const cursor = document.getElementById('blinkCursor'); + const iAmText = document.getElementById('scene2Text'); const creatorBtn = document.getElementById('creatorBtn'); const builderBtn = document.getElementById('builderBtn'); const developerBtn = document.getElementById('developerBtn'); - if (cursor.style.display === 'block') { + if (scene3.style.display === 'flex' && (cursor.style.display === 'block' || (cursor.style.display === 'none' && iAmText.textContent.length > 0 && iAmText.textContent.length < 8))) { cursor.style.display = 'none'; - scene2Text.textContent = 'I AM A...'; - scene2Text.style.visibility = 'visible'; + iAmText.textContent = ' I AM A...'; + iAmText.style.visibility = 'visible'; [creatorBtn, builderBtn, developerBtn].forEach(btn => { btn.style.display = 'block'; btn.style.visibility = 'visible'; @@ -691,7 +679,6 @@ document.getElementById('matrixCanvas').style.display = 'none'; document.getElementById('textContainer').style.display = 'none'; document.getElementById('followBtn').style.display = 'none'; - document.getElementById('scene2').style.display = 'none'; loadScene3(document.getElementById('scene3')); }