forked from avi/signalelsewhere
Save point: Scene 2 two-line layout - TO LAB 484 on next line with 3-blink cursor
This commit is contained in:
66
index.html
66
index.html
@@ -160,7 +160,15 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#scene2Line {
|
#scene2Lines {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene2Line1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -172,7 +180,25 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scene2Cursor {
|
#scene2Line2 {
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #00ff00;
|
||||||
|
padding: 0 2rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene2Message2 {
|
||||||
|
color: #00ff00;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene2Cursor,
|
||||||
|
#scene2Cursor2 {
|
||||||
display: none;
|
display: none;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 1.4em;
|
height: 1.4em;
|
||||||
@@ -245,9 +271,15 @@
|
|||||||
<button id="followBtn">FOLLOW THEM</button>
|
<button id="followBtn">FOLLOW THEM</button>
|
||||||
|
|
||||||
<div id="scene2" class="scene">
|
<div id="scene2" class="scene">
|
||||||
<div id="scene2Line">
|
<div id="scene2Lines">
|
||||||
<span id="scene2Message"></span>
|
<div id="scene2Line1">
|
||||||
<span id="scene2Cursor"></span>
|
<span id="scene2Message"></span>
|
||||||
|
<span id="scene2Cursor"></span>
|
||||||
|
</div>
|
||||||
|
<div id="scene2Line2">
|
||||||
|
<span id="scene2Message2"></span>
|
||||||
|
<span id="scene2Cursor2"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="whatIsLabBtn">WHAT IS LAB 484?</button>
|
<button id="whatIsLabBtn">WHAT IS LAB 484?</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -559,9 +591,13 @@
|
|||||||
|
|
||||||
function loadScene2(sceneElem) {
|
function loadScene2(sceneElem) {
|
||||||
sceneElem.style.display = 'flex';
|
sceneElem.style.display = 'flex';
|
||||||
const line = document.getElementById('scene2Line');
|
const linesContainer = document.getElementById('scene2Lines');
|
||||||
|
const line1 = document.getElementById('scene2Line1');
|
||||||
|
const line2 = document.getElementById('scene2Line2');
|
||||||
const message = document.getElementById('scene2Message');
|
const message = document.getElementById('scene2Message');
|
||||||
|
const message2 = document.getElementById('scene2Message2');
|
||||||
const cursor = document.getElementById('scene2Cursor');
|
const cursor = document.getElementById('scene2Cursor');
|
||||||
|
const cursor2 = document.getElementById('scene2Cursor2');
|
||||||
const btn = document.getElementById('whatIsLabBtn');
|
const btn = document.getElementById('whatIsLabBtn');
|
||||||
|
|
||||||
let opacity = 0;
|
let opacity = 0;
|
||||||
@@ -571,12 +607,16 @@
|
|||||||
opacity = 1;
|
opacity = 1;
|
||||||
clearInterval(fadeIn);
|
clearInterval(fadeIn);
|
||||||
|
|
||||||
line.style.visibility = 'visible';
|
linesContainer.style.display = 'flex';
|
||||||
|
line1.style.visibility = 'visible';
|
||||||
|
|
||||||
blinkCursor(cursor, 5, () => {
|
blinkCursor(cursor, 5, () => {
|
||||||
typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
|
typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
|
||||||
blinkCursor(cursor, 3, () => {
|
cursor.style.display = 'none';
|
||||||
typeCalmly(message, " TO LAB 484", () => {
|
line2.style.display = 'flex';
|
||||||
|
|
||||||
|
blinkCursor(cursor2, 3, () => {
|
||||||
|
typeCalmly(message2, "TO LAB 484", () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
btn.style.visibility = 'visible';
|
btn.style.visibility = 'visible';
|
||||||
let btnOpacity = 0;
|
let btnOpacity = 0;
|
||||||
@@ -767,11 +807,17 @@
|
|||||||
// Scene 2 skip (calm typing)
|
// Scene 2 skip (calm typing)
|
||||||
const scene2 = document.getElementById('scene2');
|
const scene2 = document.getElementById('scene2');
|
||||||
const s2Cursor = document.getElementById('scene2Cursor');
|
const s2Cursor = document.getElementById('scene2Cursor');
|
||||||
|
const s2Cursor2 = document.getElementById('scene2Cursor2');
|
||||||
const s2Message = document.getElementById('scene2Message');
|
const s2Message = document.getElementById('scene2Message');
|
||||||
|
const s2Message2 = document.getElementById('scene2Message2');
|
||||||
|
const s2Line2 = document.getElementById('scene2Line2');
|
||||||
const s2Btn = document.getElementById('whatIsLabBtn');
|
const s2Btn = document.getElementById('whatIsLabBtn');
|
||||||
if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
|
if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
|
||||||
s2Cursor.style.display = 'none';
|
s2Cursor.style.display = 'none';
|
||||||
s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484';
|
s2Cursor2.style.display = 'none';
|
||||||
|
s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE...';
|
||||||
|
s2Line2.style.display = 'flex';
|
||||||
|
s2Message2.textContent = 'TO LAB 484';
|
||||||
s2Btn.style.visibility = 'visible';
|
s2Btn.style.visibility = 'visible';
|
||||||
s2Btn.style.opacity = '1';
|
s2Btn.style.opacity = '1';
|
||||||
s2Btn.style.pointerEvents = 'auto';
|
s2Btn.style.pointerEvents = 'auto';
|
||||||
|
|||||||
Reference in New Issue
Block a user