From 0407d9e8f7d1fe37f8ed7ef23016ea84fc523b46 Mon Sep 17 00:00:00 2001 From: avi Date: Sat, 9 May 2026 17:18:06 -0500 Subject: [PATCH] Save point: Scene 3 multi-line recruitment text - LIKE MINDED / BELIEVE / ARE YOU A... --- index.html | 148 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 86 insertions(+), 62 deletions(-) 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';