Skip to content

Commit

Permalink
Fikset litt
Browse files Browse the repository at this point in the history
  • Loading branch information
@henriksen
henriksen committed Oct 23, 2023
1 parent f3704d7 commit 6e917ba
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 42 deletions.
49 changes: 43 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Console</title>
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1.0">
<title>#HelloStavanger</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
Expand All @@ -13,8 +13,6 @@
<div class="content-wrapper">
<div class="center-container crt">
<div class="console-text">
<span class="textElement"></span><span class="cursor">&nbsp;</span><span
class="fillElement">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>
<div class="additional-div">
<!-- Content for the new div goes here -->
Expand All @@ -29,8 +27,47 @@
</div>
</div>
<div class="new-content-div">
<!-- New content goes here -->
Additional content after scrolling.
<h1>Hei, Stavanger!</h1>
<p>Vi lager en ny konferanse i Stavanger.</p>
<p>Av utviklere og for utviklere. <br>Har du lyst til å hjelpe til?<br>Eller bare følge med på hva som
skjer?<br>Meld deg
på nyhetsbrevet vårt under her!</p>
<div id="mc_embed_shell">

<div id="mc_embed_signup">
<form
action="https://github.us21.list-manage.com/subscribe/post?u=eb9cf08e02a498d6493d157cc&amp;id=3274148d27&amp;f_id=005865e1f0"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
target="_self" novalidate="">
<div id="mc_embed_signup_scroll">
<h2>Hold deg oppdatert!</h2>
<p>Legg igjen e-postadressen din for å<br>få beskjed når noe nytt skjer!</p>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group"><label for="mce-EMAIL">E-postadresse <span
class="asterisk">*</span></label><input type="email" name="EMAIL"
class="required email" id="mce-EMAIL" required="" value=""></div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div aria-hidden="true" style="position: absolute; left: -5000px;">
/* real people should not fill this in and expect good things - do not remove this or risk
form bot
signups */
<input type="text" name="b_eb9cf08e02a498d6493d157cc_3274148d27" tabindex="-1" value=""
spellcheck="false" data-ms-editor="true">
</div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button"
value="Abonner">
</div>
</div>
</div>
</form>
</div>
</div>

</div>
<script src="script.js"></script>
</body>
Expand Down
124 changes: 96 additions & 28 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,122 @@
const textElement = document.querySelector(".textElement");
const fillElement = document.querySelector(".fillElement");
"use strict";

const textElement = document.createElement("span");
const fillElement = document.createElement("span");

const additionalDiv = document.querySelector(".additional-div");
const bodyElement = document.querySelector("body");

const originalText = ' World");';
const newText = ' Stavanger");';
const stavanger = "Stavanger";
const initialText = 'printf("Hello World");';

let phase = "erasing";
let eraseIndex = originalText.length;
let typeIndex = 0;
let spaces = Array(28).join("&nbsp;");
const typeWriterPause = 200;

const bufferLength = 28;
let buffer = Array(bufferLength).join(" ");
let cursorIndex = 0;
let cursor = document.createElement("span");
cursor.classList.add("cursor");
cursor.innerHTML = "&nbsp;";

const displayElement = document.querySelector(".console-text");
displayElement.appendChild(textElement);
displayElement.appendChild(cursor);
displayElement.appendChild(fillElement);
printBuffer();

function printBuffer() {
textElement.innerHTML = buffer.slice(0, cursorIndex);
if (
buffer[cursorIndex] === " " ||
buffer[cursorIndex] === undefined ||
buffer[cursorIndex] === ""
) {
cursor.innerHTML = "&nbsp;";
} else {
cursor.innerHTML = buffer[cursorIndex];
}
fillElement.innerHTML = buffer.slice(cursorIndex + 1).replace(/ /g, "&nbsp;");
}

function typeInitialText() {
if (typeIndex < initialText.length) {
// Type the text
textElement.textContent = initialText.slice(0, typeIndex + 1);
buffer =
buffer.slice(0, typeIndex) +
initialText.slice(typeIndex, typeIndex + 1) +
buffer.slice(typeIndex + 1);
typeIndex++;
spaces = Array(28 - textElement.textContent.length).join("&nbsp;");
fillElement.innerHTML = spaces;
cursorIndex++;
printBuffer();
setTimeout(typeInitialText, typeWriterPause);
} else {
typeIndex = 0;
setTimeout(typeWriterEffect, 2000);
setTimeout(typeWriterEffect, 1000);
}
}

let phase = "backspacing";
function typeWriterEffect() {
if (phase === "erasing") {
if (eraseIndex > 0) {
if (phase === "backspacing") {
cursorIndex--;
printBuffer();
if (cursorIndex > 19) {
setTimeout(typeWriterEffect, typeWriterPause * 4);
} else {
phase = "erasing";
setTimeout(typeWriterEffect, typeWriterPause * 2);
}
} else if (phase === "erasing") {
if (cursorIndex > 13) {
// Erase one character
textElement.textContent =
'printf("Hello' + originalText.slice(0, eraseIndex);
eraseIndex--;
spaces = Array(28 - textElement.textContent.length).join("&nbsp;");
fillElement.innerHTML = spaces;
setTimeout(typeWriterEffect, typeWriterPause);
cursorIndex--;
buffer =
buffer.slice(0, cursorIndex) + buffer.slice(cursorIndex + 1) + " ";
printBuffer();
setTimeout(typeWriterEffect, typeWriterPause * 2);
} else {
phase = "typing";
typeIndex = 0;
setTimeout(typeWriterEffect, typeWriterPause);
}
} else if (phase === "typing") {
if (typeIndex < newText.length) {
textElement.textContent += newText.charAt(typeIndex);
spaces = Array(29 - textElement.textContent.length).join("&nbsp;");
fillElement.innerHTML = spaces;
if (typeIndex < stavanger.length) {
buffer =
buffer.slice(0, cursorIndex) +
stavanger.slice(typeIndex, typeIndex + 1) +
buffer.slice(cursorIndex, bufferLength - 2);
typeIndex++;
cursorIndex++;
printBuffer();
setTimeout(typeWriterEffect, typeWriterPause);
} else {
phase = "backspacingAgain";
setTimeout(typeWriterEffect, typeWriterPause);
}
} else if (phase === "backspacingAgain") {
cursorIndex--;
printBuffer();
if (cursorIndex > 8) {
setTimeout(typeWriterEffect, typeWriterPause);
} else {
const additionalDiv = document.querySelector(".additional-div");
setTimeout(() => {
additionalDiv.classList.add("fade-in");
}, 500);
phase = "hashtag";
setTimeout(typeWriterEffect, typeWriterPause * 2);
}
} else if (phase === "hashtag") {
buffer =
buffer.slice(0, cursorIndex) +
"#" +
buffer.slice(cursorIndex, bufferLength - 2);
typeIndex++;
cursorIndex++;
printBuffer();
phase = "end";
setTimeout(typeWriterEffect, typeWriterPause);
} else if (phase === "end") {
cursorIndex = buffer.length - 1;
printBuffer();
}
}

Expand All @@ -67,6 +133,8 @@ document
});

window.onload = function () {
fillElement.innerHTML = spaces;
setTimeout(typeInitialText, 2000);
setTimeout(typeInitialText, 500);
setTimeout(() => {
additionalDiv.classList.add("fade-in");
}, 750);
};
97 changes: 89 additions & 8 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,40 @@
:root {
--green-color: #71d358;
--background-color: #282c34;
}
body {
margin: 0;
height: 100vh;
background-color: #282c34;
background-color: var(--background-color);
color: var(--green-color);
font-family: "Roboto Mono", monospace;
overflow: hidden;
}

@media only screen and (max-width: 600px) {
body {
font-size: 8pt;
}
.additional-div {
font-size: 1.5em;
}

.new-content-div {
padding: 0 40px;
}

}
@media only screen and (min-width: 601px) {
body {
font-size: 8pt;
}
.additional-div {
font-size: 1.5em;
}

.new-content-div {
padding: 0 200px;
}

}

.content-wrapper {
Expand All @@ -20,6 +47,11 @@ body {

.new-content-div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}

.center-container {
Expand Down Expand Up @@ -57,9 +89,56 @@ body {

.cursor {
display: inline-block;
font-size: 0.9em; /* Adjust according to font size */
animation: blink 1s infinite, boxShadow 1.6s infinite;
background-color: var(--green-color); /* Classic green console text */
font-size: 1em; /* Adjust according to font size */
animation: blink 0.7s infinite, boxShadow 1.6s infinite;
background-color: var(--green-color);
}

#mc_embed_shell {
margin-top: 20px;
}
#mc_embed_shell .indicates-required {
display: none;
}

#mc_embed_shell .asterisk {
display: none;
}

#mc_embed_shell .asterisk {
display: none;
}

#mc_embed_signup .mc-field-group {
clear: left;
position: relative;
width: 96%;
padding-bottom: 3%;
min-height: 50px;
display: grid;
}

#mc_embed_signup .button {
clear: both;
background-color: var(--green-color);
border: 0 none;
border-radius: 4px;
transition: all 0.23s ease-in-out 0s;
color: var(--background-color);
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: normal;
height: 32px;
line-height: 32px;
margin: 0 5px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: fit-content;
width: -moz-fit-content;
}

/* CRT effect by Alec Lownes: http://aleclownes.com/2017/02/01/crt-display.html */
Expand Down Expand Up @@ -104,12 +183,14 @@ body {
@keyframes blink {
0%,
50% {
opacity: 1;
background-color: var(--green-color);
color: var(--background-color);
}
51%,
100% {
opacity: 0;
}
background-color: var(--background-color);
color: var(--green-color);
/* box-shadow: none; */
}

@keyframes boxShadow {
Expand Down

0 comments on commit 6e917ba

Please sign in to comment.