diff --git a/index.html b/index.html
index d2beb2f..5815a67 100644
--- a/index.html
+++ b/index.html
@@ -91,27 +91,31 @@
transition: opacity 1s ease;
}
- #blinkCursor {
+ #scene3RecruitLines {
display: none;
- width: 8px;
- height: 14px;
- background-color: #00ff00;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- opacity: 1;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 100%;
+ padding: 2rem;
}
- #scene2Text {
- color: #00ff00;
- font-family: 'Courier New', monospace;
+ .scene3RecruitLine {
+ display: none;
+ flex-direction: row;
+ align-items: center;
font-size: 1.2rem;
line-height: 2;
- text-align: center;
- visibility: hidden;
- padding-top: 15vh;
- margin-bottom: auto;
+ color: #00ff00;
+ }
+
+ #scene3RecruitCursor {
+ display: none;
+ width: 10px;
+ height: 1.4em;
+ background-color: #00ff00;
+ margin-left: 4px;
+ flex-shrink: 0;
+ opacity: 1;
}
#scene2 {
@@ -287,8 +291,18 @@
LAB 484
-
-
+
@@ -696,13 +710,19 @@
}, 30);
}
- // Scene 3 loader with recruitment text sequence and 3 choice buttons
+ // Scene 3 loader with 3-line recruitment 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 recruitLines = document.getElementById('scene3RecruitLines');
+ const rl1 = document.getElementById('scene3RecruitLine1');
+ const rl2 = document.getElementById('scene3RecruitLine2');
+ const rl3 = document.getElementById('scene3RecruitLine3');
+ const rt1 = document.getElementById('scene3RecruitText1');
+ const rt2 = document.getElementById('scene3RecruitText2');
+ const rt3 = document.getElementById('scene3RecruitText3');
+ const cursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
@@ -723,43 +743,37 @@
["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"],
textContainer,
() => {
- // After typewriter text finishes, wait 2 seconds then type recruitment text
- iAmText.textContent = '';
- iAmText.style.visibility = 'visible';
+ recruitLines.style.display = 'flex';
setTimeout(() => {
- 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';
+ rl1.style.display = 'flex';
- typeCalmly(iAmText, "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
- 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);
+ blinkCursor(cursor, 3, () => {
+ typeCalmly(rt1, "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED", () => {
+ rl2.style.display = 'flex';
+ typeCalmly(rt2, "WHO BELIEVE THE WORLD NEEDS TO CHANGE...", () => {
+ rl3.style.display = 'flex';
+ typeCalmly(rt3, "ARE YOU A...", () => {
+ 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);
+ });
});
- }
- }, 500);
+ });
+ });
}, 2000);
},
200
@@ -823,18 +837,28 @@
s2Btn.style.pointerEvents = 'auto';
}
- // Scene 3 skip (typewriter / cursor / typing)
+ // Scene 3 skip (recruit text typing)
const scene3 = document.getElementById('scene3');
- const cursor = document.getElementById('blinkCursor');
- const iAmText = document.getElementById('scene2Text');
+ const recruitLines = document.getElementById('scene3RecruitLines');
+ const rl1 = document.getElementById('scene3RecruitLine1');
+ const rl2 = document.getElementById('scene3RecruitLine2');
+ const rl3 = document.getElementById('scene3RecruitLine3');
+ const rt1 = document.getElementById('scene3RecruitText1');
+ const rt2 = document.getElementById('scene3RecruitText2');
+ const rt3 = document.getElementById('scene3RecruitText3');
+ const rCursor = document.getElementById('scene3RecruitCursor');
const creatorBtn = document.getElementById('creatorBtn');
const builderBtn = document.getElementById('builderBtn');
const developerBtn = document.getElementById('developerBtn');
- const fullText = "WE ARE LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
- if (scene3.style.display === 'flex' && (cursor.style.display === 'block' || (iAmText.textContent.length > 0 && iAmText.textContent.length < fullText.length))) {
- cursor.style.display = 'none';
- iAmText.textContent = fullText;
- iAmText.style.visibility = 'visible';
+ if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') {
+ rCursor.style.display = 'none';
+ recruitLines.style.display = 'flex';
+ rl1.style.display = 'flex';
+ rl2.style.display = 'flex';
+ rl3.style.display = 'flex';
+ rt1.textContent = "THE LAB IS LOOKING TO PARTNER WITH PEOPLE WHO ARE LIKE MINDED";
+ rt2.textContent = "WHO BELIEVE THE WORLD NEEDS TO CHANGE...";
+ rt3.textContent = "ARE YOU A...";
[creatorBtn, builderBtn, developerBtn].forEach(btn => {
btn.style.display = 'block';
btn.style.visibility = 'visible';