diff --git a/index.html b/index.html index 5815a67..b7bce47 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,8 @@ color: #00ff00; } - #scene3RecruitCursor { + #scene3RecruitCursor, + #scene3RecruitCursor2 { display: none; width: 10px; height: 1.4em; @@ -118,6 +119,10 @@ opacity: 1; } + #scene3RecruitLine3 { + min-height: 2em; + } + #scene2 { flex-direction: column; justify-content: center; @@ -300,12 +305,15 @@
- + +
+
+
- - - + + +
@@ -710,7 +718,7 @@ }, 30); } - // Scene 3 loader with 3-line recruitment sequence and 3 choice buttons + // Scene 3 loader with 4-line recruitment sequence and 3 choice buttons function loadScene3(sceneElem) { sceneElem.style.display = 'flex'; const title = document.getElementById('scene3Title'); @@ -719,10 +727,12 @@ const rl1 = document.getElementById('scene3RecruitLine1'); const rl2 = document.getElementById('scene3RecruitLine2'); const rl3 = document.getElementById('scene3RecruitLine3'); + const rl4 = document.getElementById('scene3RecruitLine4'); const rt1 = document.getElementById('scene3RecruitText1'); const rt2 = document.getElementById('scene3RecruitText2'); - const rt3 = document.getElementById('scene3RecruitText3'); + const rt4 = document.getElementById('scene3RecruitText4'); const cursor = document.getElementById('scene3RecruitCursor'); + const cursor2 = document.getElementById('scene3RecruitCursor2'); const creatorBtn = document.getElementById('creatorBtn'); const builderBtn = document.getElementById('builderBtn'); const developerBtn = document.getElementById('developerBtn'); @@ -739,21 +749,21 @@ title.classList.add('visible'); }, 300); - typewriterLines( - ["LAB 484 IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT"], - textContainer, - () => { - recruitLines.style.display = 'flex'; + typeCalmly(textContainer, "- IS AN INCUBATOR THAT HAS 11 DECENTRALIZED TECH STARTUPS UNDERNEATH IT", () => { + recruitLines.style.display = 'flex'; - setTimeout(() => { - rl1.style.display = 'flex'; + setTimeout(() => { + rl1.style.display = 'flex'; - 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...", () => { + 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'; + + blinkCursor(cursor2, 3, () => { + rl4.style.display = 'flex'; + typeCalmly(rt4, "ARE YOU A...", () => { setTimeout(() => { choiceBtns.forEach(btn => { btn.style.display = 'block'; @@ -774,10 +784,9 @@ }); }); }); - }, 2000); - }, - 200 - ); + }); + }, 2000); + }); } sceneElem.style.opacity = opacity; }, 30); @@ -843,22 +852,26 @@ const rl1 = document.getElementById('scene3RecruitLine1'); const rl2 = document.getElementById('scene3RecruitLine2'); const rl3 = document.getElementById('scene3RecruitLine3'); + const rl4 = document.getElementById('scene3RecruitLine4'); const rt1 = document.getElementById('scene3RecruitText1'); const rt2 = document.getElementById('scene3RecruitText2'); - const rt3 = document.getElementById('scene3RecruitText3'); + const rt4 = document.getElementById('scene3RecruitText4'); const rCursor = document.getElementById('scene3RecruitCursor'); + const rCursor2 = document.getElementById('scene3RecruitCursor2'); const creatorBtn = document.getElementById('creatorBtn'); const builderBtn = document.getElementById('builderBtn'); const developerBtn = document.getElementById('developerBtn'); if (scene3.style.display === 'flex' && creatorBtn.style.visibility !== 'visible') { rCursor.style.display = 'none'; + rCursor2.style.display = 'none'; recruitLines.style.display = 'flex'; rl1.style.display = 'flex'; rl2.style.display = 'flex'; rl3.style.display = 'flex'; + rl4.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..."; + rt4.textContent = "ARE YOU A..."; [creatorBtn, builderBtn, developerBtn].forEach(btn => { btn.style.display = 'block'; btn.style.visibility = 'visible';