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'));
}