Complete rework + eleventy

static/images/8thNote.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="90" height="90">
+	<path d="M 23.7,87.9 C 18.1,82.8 21.2,74.7 30.4,69.9 C 33.5,68.4 35.8,67.7 39.8,67.8 C 42.3,67.9 45.1,69.3 45.1,69.3 C 45.1,51.2 45.0,17.0 45.0,0.2 C 46.0,0.2 46.7,0.1 48.1,0.1 C 48.1,1.1 48.1,1.9 48.1,2.7 C 48.1,3.6 48.1,4.1 48.2,4.7 C 49.2,11.0 50.6,13.5 57.6,21.2 C 66.5,31.1 69.1,37.0 69.1,44.9 C 69.0,52.3 62.5,68.1 61.1,67.5 C 63.1,61.9 65.9,55.9 66.6,50.9 C 67.5,44.8 65.0,36.2 61.0,31.7 C 57.8,27.9 50.2,24.6 48.1,24.6 C 48.1,24.6 48.0,61.0 48.0,74.8 C 48.0,77.1 45.9,81.2 44.7,82.6 C 39.2,89.2 28.5,92.2 23.7,87.9 z"/>
+</svg>

static/images/arrow-cursor.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M123.193 29.635L121 406.18l84.31-82.836 65.87 159.02 67.5-27.96-65.87-159.02L391 294.342z"/></svg>

static/images/cameraroll.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48h-48z" fill="none"/>
+    <path d="M28 10c0-2.21-1.79-4-4-4h-2v-2c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2v2h-2c-2.21 0-4 1.79-4 4v30c0 2.21 1.79 4 4 4h16c2.21 0 4-1.79 4-4h16v-30h-16zm-4 26h-4v-4h4v4zm0-18h-4v-4h4v4zm8 18h-4v-4h4v4zm0-18h-4v-4h4v4zm8 18h-4v-4h4v4zm0-18h-4v-4h4v4z"/>
+</svg>

static/images/file-code.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><g><path fill="#000000" d="M43,11.1l-1.2,1.2V128c0,113.2,0,115.7,0.9,116.8l0.9,1.1H128h84.4l0.9-1.1c0.9-1.1,0.9-3.2,0.9-94.5c0-74.1-0.1-93.6-0.6-94.2c-0.3-0.4-13.7-10.9-29.7-23.3l-29.1-22.6l-55.4-0.1L44.1,10L43,11.1z M149.9,42.9v25.3l1.2,1.1c0.6,0.7,1.6,1.2,2.2,1.2c0.6,0,12.8-1.7,27.1-3.8c14.3-2,26.1-3.6,26.3-3.5c0.2,0.1,0.3,39.6,0.3,87.8v87.6H128H48.9V128.1V17.6h50.5h50.5V42.9z M179.7,39.1c20.6,16,21.7,16.9,20.4,17.2c-0.8,0.2-10.6,1.7-21.8,3.3c-16.5,2.3-20.5,2.8-20.8,2.2c-0.6-0.9-0.5-40,0-39.8C157.8,22.1,167.8,29.8,179.7,39.1z"/><path fill="#000000" d="M139.6,95.7c-0.6,0.2-1.2,0.9-1.5,1.3c-0.9,1.6-23.9,87.9-23.9,89.5c0,3.1,4,4.7,6,2.3c0.7-0.8,4.3-13.6,12.7-44.9c6.5-24.1,11.8-44.4,11.8-45.1C144.7,96.5,141.9,94.8,139.6,95.7z"/><path fill="#000000" d="M84.7,130.3c-10.6,5.9-19.6,11-19.9,11.5c-0.7,0.9-0.8,3.4-0.2,4.3c0.9,1.4,39.6,22.5,41.2,22.5c1.5,0,3-1.4,3.4-3.1c0.5-2-1-3.3-6.7-6.5c-19.2-10.5-26.9-14.9-26.6-15.2c0.2-0.2,7.5-4.2,16.1-9c8.7-4.8,16-8.9,16.3-9.2c1.2-1.1,1.2-3.4,0.1-4.8C106.5,118.3,105.7,118.6,84.7,130.3z"/><path fill="#000000" d="M150,120.8c-1.2,1.6-1.3,3.1-0.1,4.4c0.4,0.6,6.3,4,13,7.6c13.7,7.5,19.1,10.5,19.6,11c0.2,0.2-6.7,4.2-15.2,8.9c-8.6,4.7-16.2,9.2-17,9.9c-1.1,1.1-1.3,1.6-1,2.9c0.3,1.8,1.9,3.2,3.5,3.2c1.2,0,38.6-20.4,40.5-22.1c1.3-1.2,1.4-3.6,0.2-5c-0.9-1-9.3-5.8-29.1-16.5C153.1,119,151.7,118.6,150,120.8z"/></g></g></g>
+</svg>

static/images/video.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
+<path d="M46.9,13.1L35.9,21v-5.6c0-1.5-1.2-2.7-2.7-2.7H4.7c-1.5,0-2.7,1.2-2.7,2.7v21.3c0,1.5,1.2,2.7,2.7,2.7h28.6  c1.5,0,2.7-1.2,2.7-2.7v-5.5L46.9,39c0.7,0.7,1.9,0.2,1.9-0.8V13.9C48.8,12.9,47.6,12.4,46.9,13.1z"/>
+</svg>

static/main.css

@@ -0,0 +1,500 @@
+:root {
+    --theme-color: #4c6d6e;
+    --theme-color-lighter: #84b9bb;
+    --theme-color-variation: #22e6ed;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: black;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1em;
+    color: white;
+}
+
+a {
+    transition: .2s;
+    color: lightgray;
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--theme-color-lighter);
+}
+
+li {
+    list-style-type: none;
+}
+
+header {
+    display: flex;
+    border-bottom: thick solid rgba(255, 255, 255, 0.1);
+    width: 100%;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.3),
+    0px -4px 10px rgba(0,0,0,0.3);
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+header div {
+    padding: 1rem;
+}
+
+#everythingHelper {
+    position: relative;
+}
+
+#everythingHelper .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    opacity: .5;
+    width: 100%;
+    height: auto;
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 100%);
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    user-select: none;
+}
+
+header ul {
+    transition: .2s;
+    font-size: larger;
+    margin: auto 0 auto 0;
+    padding: 0;
+    opacity: 0.6;
+    text-align: right;
+}
+
+header ul a {
+    transition: .2s;
+    color: white;
+}
+
+header ul a:hover {
+    color: var(--theme-color);
+}
+
+header ul:hover {
+    opacity: 1;
+}
+
+#mainHelper {
+    padding-top: 3rem;
+    max-width: 50vw;
+    margin: auto;
+    display: flex;
+}
+
+main {
+    margin-bottom: 4em;
+}
+
+h1, h2, h3 {
+    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 
+    0px -4px 10px rgba(0,0,0,0.3);
+}
+
+blockquote, main p {
+    margin-bottom: 1em;
+}
+
+main h1, main h2 {
+    margin-bottom: .5em;
+}
+
+main h2 {
+    margin-top: 1em;
+}
+
+b {
+    color: var(--theme-color-lighter);
+    font-weight: 600;
+}
+
+blockquote {
+    margin-left: 2.8em;
+}
+
+#headerSubtitle {
+    color: white;
+    opacity: 0.6;
+}
+
+h2 {
+    font-weight: normal;
+    color: var(--theme-color-lighter);
+}
+
+textarea, input, button {
+    border: thick solid var(--theme-color-lighter);
+    background-color: black;
+    color: white;
+    padding: 4px;
+}
+
+#sound {
+    height: 1.5em;
+    filter: invert();
+}
+
+#sound:hover {
+    cursor: pointer;
+}
+
+#linksHelper {
+    margin: auto 1em auto auto;
+    padding-top: 0;
+}
+
+#soundDiv {
+    margin-left: auto;
+    inline-size: fit-content;
+    padding: 0;
+    padding-top: 1rem;
+    display: flex;
+    gap: 10px;
+}
+
+#soundDiv p {
+    margin: 0 auto 0 auto;
+}
+
+#headerLinks {
+    user-select: none;
+}
+
+#headerLinks a {
+    margin-right: .2em;
+    margin-left: .2em;
+}
+
+#headerLinks:last-child {
+    margin-left: 0;
+}
+
+#headerLinks a:first-child {
+    margin-left: 0;
+}
+
+#headerLinks a:last-child {
+    margin-right: 0;
+}
+
+header div:first-child {
+    margin-bottom: 0;
+}
+
+#headerSquareMusic img, #headerSquareVideo img, #headerSquareCode img, #defaultSquare img {
+    filter: invert();
+}
+
+.headerSquare, #defaultSquare {
+    transition: .4s;
+    border: medium solid white;
+    height: 7vh;
+    overflow: hidden;
+    width: 10vh;
+    opacity: .4;
+    padding: .4em;
+    cursor: pointer;
+    user-select: none;
+}
+
+.headerSquare img, #defaultSquare img {
+    width: 100%;
+    height: auto;
+}
+
+.headerSquare:hover, #defaultSquare {
+    z-index: 1;
+    /* height: 10vh; */
+    /* background-color: black; */
+}
+
+.headerSquare.selected, #defaultSquare.selected {
+    opacity: 1;
+    height: 10vh;
+    box-shadow: 
+    2px 7px 5px rgba(0,0,0,0.4),
+    0px -4px 10px rgba(0,0,0,0.4);
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+#homeSquares {
+    display: flex;
+    flex-direction: column;
+    transition: .4s;
+    width: fit-content;
+    height: fit-content;
+    margin-right: 3vw;
+    margin-bottom: 3rem;
+    gap: 10px;
+}
+
+div.hs {
+    display: none;
+}
+
+div.hs.selected {
+    display: unset;
+}
+
+.ytembed {
+    display: block;
+    margin: auto;
+}
+
+.margarinaColor {
+    color: #ff85e1;
+}
+
+.hsProjectImage {
+    margin: auto;
+}
+
+.hsProjectImage img {
+    height: 10vh;
+}
+
+#hsCode {
+    flex-direction: column;
+}
+
+#hsCode.selected {
+    display: flex;
+}
+
+.ellipsis-loader {
+    animation: 1.8s infinite ellipsis-loader;
+    display: inline-block;
+    height: 8px;
+    overflow: hidden;
+    position: relative;
+    width: 140px;
+    margin: auto;
+}
+.ellipsis-loader__dot {
+    animation: 1.8s infinite ellipsis-loader__dot;
+    background: #FFF;
+    border-radius: 50%;
+    float: left;
+    height: 8px;
+    position: absolute;
+    width: 8px;
+}
+.ellipsis-loader__dot:nth-child(1) {
+    animation-delay: 0.15s;
+    left: -13px;
+}
+.ellipsis-loader__dot:nth-child(2) {
+    animation-delay: 0.3s;
+    left: -26px;
+}
+.ellipsis-loader__dot:nth-child(3) {
+    animation-delay: 0.45s;
+    left: -39px;
+}
+.ellipsis-loader__dot:nth-child(4) {
+    animation-delay: 0.6s;
+    left: -52px;
+}
+
+#telnetSimulation {
+    display: flex;
+    width: 100%;
+    gap: 10px;
+}
+
+#telnetSimulation div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 100%;
+}
+
+#telnetSimulation div textarea {
+    width: 100%;
+    resize: none;
+    height: 300px;
+}
+
+#telnetSimulationInput {
+    display: flex;
+}
+
+#telnetSimulationLoadingHolder {
+    text-align: center;
+    margin: 10px;
+    display: none;
+    flex-direction: column;
+}
+
+#youtubeVideo p {
+    font-size: 2vh;
+}
+
+#youtubeVideoImage {
+    width: 100%;
+    transition: .3s;
+    box-shadow: 
+        2px 7px 5px rgba(0,0,0,0.3),
+        0px -4px 10px rgba(0,0,0,0.3);
+}
+
+#youtubeVideoImage:hover {
+    opacity: .8;
+}
+
+#languageList {
+    font-size: 2vh;
+}
+
+#languageList li {
+    margin-bottom: .5em;
+}
+
+#languageList li a {
+    transition: 1s;
+}
+
+.languagesHighlightedLink {
+    color: var(--theme-color-variation);
+}
+
+.fadeIn {
+  animation: fadeIn .5s ease-in 1 forwards;
+}
+.fadeOut {
+  opacity: 1;
+  animation: fadeOut .5s ease-out 1 forwards;
+}
+
+@keyframes ellipsis-loader {
+    0%, 25% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translate(20px);
+    }
+}
+@keyframes ellipsis-loader__dot {
+    0% {
+        animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        transform: translateX(0);
+    }
+    55% {
+        animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+        opacity: 1;
+        transform: translateX(98px);
+    }
+    75%, 100% {
+        transform: translateX(212px);
+    }
+    90% {
+        opacity: 0.2;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    body {
+        font-size: 2vh;
+    }
+
+    header {
+        padding-top: 1.4rem;
+        text-align: center;
+        flex-direction: column;
+    }
+
+    header ul {
+        margin: auto;
+        margin-bottom: 1.4rem;
+    }
+
+    main {
+        max-width: 90vw;
+    }
+
+    main h1 {
+        font-size: 3vh;
+    }
+
+    #headerLinks {
+        text-align: center;
+    }
+
+    #homeTitle {
+        font-size: 4vh;
+    }
+
+    #linksHelper {
+        margin: 0 auto 0 auto;
+    }
+
+    #mainHelper {
+        flex-direction: column;
+        max-width: 90vw;
+    }
+
+    #homeSquares {
+        flex-direction: row;
+        align-content: center;
+        justify-content: center;
+        width: 40vw;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .headerSquare, #defaultSquare {
+        aspect-ratio: 1/1;
+        height: 100%;
+        flex-grow: 1;
+    }
+
+    .headerSquare.selected, #defaultSqaure.selected {
+        height: unset!important;
+    }
+
+
+    #languageList {
+        font-size: 2.5vh;
+    }
+
+    #postHeader {
+        /* border-bottom: 8px dashed rgba(255, 255, 255, 0.1); */
+    }
+}
+
+@media screen and (max-width: 800px) {
+    #homeSquares {
+        width: 60vw;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    #homeSquares {
+        width: 80vw;
+    }
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  to {
+    opacity: 0;
+  }
+}

static/scripts/ccd.js

@@ -0,0 +1,14 @@
+const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];
+let keyIndex = 0;
+
+document.addEventListener('keydown', function(event) {
+  if (event.code === konamiCode[keyIndex]) {
+    keyIndex++;
+    if (keyIndex === konamiCode.length) {
+        window.location.href = './toyourdreams.txt'
+        keyIndex = 0;
+    }
+  } else {
+    keyIndex = 0;
+  }
+});

static/scripts/home.js

@@ -0,0 +1,51 @@
+const _homeSquares = document.querySelector("#homeSquares");
+const main = document.querySelector("main");
+
+let info = [
+    ["Default", "defaultSquare", "arrow-cursor.svg", "Computer cursor arrow line drawing"],
+    ["Music", "headerSquareMusic", "8thNote.svg", "Music note line drawing"],
+    ["Video", "headerSquareVideo", "video.svg", "Video roll line drawing"],
+    ["Code", "headerSquareCode", "file-code.svg", "Computer code file line drawing"]
+]
+
+info.forEach(square => {
+    let rawHTML = `<div class='headerSquare' id='${square[1]}'><img src='/static/images/${square[2]}' alt='${square[3]}'></div>`;
+    _homeSquares.innerHTML += rawHTML;
+});
+
+const homeSquares = document.querySelectorAll(".headerSquare");
+let selectedSquare = "defaultSquare";
+let selectedSquareDiv;
+updateSquare();
+
+homeSquares.forEach(square =>
+    square.addEventListener('click', () => {
+        toggleSquare(square);
+    })
+)
+
+function toggleSquare(square) {
+    if (selectedSquare && (selectedSquare == square.id)) {
+        return
+    }
+    else if (selectedSquare) {
+        oldSquare = document.getElementById(selectedSquare);
+        oldSquare.classList.toggle("selected");
+        document.querySelector(`#${selectedSquareDiv}`).classList.toggle("selected");
+    }
+    selectedSquare = square.id;
+    updateSquare()
+}
+
+function getSquareDivByID(id) {
+    divID = `hs${info.find(item => item[1] === id)[0]}`;
+    return document.querySelector(`#${divID}`);
+}
+
+function updateSquare() {
+    square = document.getElementById(selectedSquare);
+    square.classList.toggle("selected");
+    div = getSquareDivByID(square.id);
+    selectedSquareDiv = div.id;
+    div.classList.toggle("selected");
+}

static/scripts/language.js

@@ -0,0 +1,37 @@
+const el = document.getElementById("languageTitle");
+const texts = [["Pick a language", "English"], ["Escolha um idioma", "Português Brasileiro"]];
+let i = 0;
+let fadeTime = 1000;
+let holdTime = 2000;
+const links = document.querySelectorAll("#languageList li a");
+let currentLang = 0;
+
+el.style.transition = `opacity ${fadeTime}ms`;
+el.style.opacity = 1;
+
+function cycle() {
+  el.style.opacity = 0;
+  removeOldHighlightedLang();
+  setTimeout(() => {
+    i = (i + 1) % texts.length;
+    currentLang = i;
+    el.textContent = texts[i][0];
+    el.style.opacity = 1;
+    setNewHighlightedLang()
+  }, fadeTime);
+}
+
+function removeOldHighlightedLang() {
+    document.querySelector(".languagesHighlightedLink").classList.remove("languagesHighlightedLink");
+}
+
+function setNewHighlightedLang() {
+    links.forEach(link => {
+        if (link.innerText == texts[currentLang][1]) {
+            link.classList.add('languagesHighlightedLink');
+        }
+    })
+}
+
+setNewHighlightedLang()
+setInterval(cycle, fadeTime * 2 + holdTime);

static/scripts/main.js

@@ -0,0 +1,40 @@
+const toggle = document.querySelector('#soundDiv')
+toggle.innerHTML = `<img src="/static/images/sound-on.png" id="sound" onclick="toggleAudio()"><p>${toggle.getAttribute("data-title")}</p>`
+
+const audio = new Audio(`/static/${toggle.getAttribute("data-source")}`);
+const toggleIMG = document.querySelector('#sound');
+
+const savedTime = localStorage.getItem("audioTime");
+const wasPlaying = localStorage.getItem("audioPlaying") === 'true'
+
+if (savedTime) audio.currentTime = parseFloat(savedTime);
+if (wasPlaying) {
+    play();
+} else {
+    stop();
+}
+
+function play() {
+    audio.play();
+    localStorage.setItem("audioPlaying", "true")
+    toggleIMG.src = "/static/images/sound-on.png"
+}
+
+function stop() {
+    audio.pause();
+    localStorage.setItem("audioPlaying", "false")
+    toggleIMG.src = "/static/images/sound-off.png"
+}
+
+function toggleAudio() {
+    if (!audio.paused) {
+        stop();
+    } else {
+        play();
+    }
+}
+
+window.addEventListener("beforeunload", () => {
+  localStorage.setItem("audioTime", audio.currentTime);
+  localStorage.setItem("audioPlaying", !audio.paused);
+});

static/scripts/telnetSimulator.js

@@ -0,0 +1,66 @@
+const screen = document.getElementById('telnetSimulationClientScreen');
+const input = document.getElementById('telnetSimulationInputBox');
+const btn = document.getElementById('telnetSimulationClientSend')
+const sbtn = document.getElementById('telnetSimulationServerClean');
+const sscreen = document.getElementById('telnetSimulationServerScreen');
+const loading = document.getElementById("telnetSimulationLoadingHolder")
+const loadingText = document.getElementById("telnetSimulationLoadingText")
+let loadingms = 2500;
+
+btn.addEventListener('click', () => {
+  send_command();
+})
+
+sbtn.addEventListener('click', () => {
+  screen.innerHTML = '';
+  sscreen.innerHTML = '';
+})
+
+async function send_command() {
+  if (!input.value) return;
+  const command = input.value;
+  input.value = '';
+  screen.value += `telnet> ${command}\n`;
+  await wait(loadingms, "<b>Camada OSI #7 - Aplicação:</b> Usuário digitou o texto na aplicação.");
+  await wait(loadingms, "<b>Camada OSI #6 - Apresentação:</b> Tradução do comando para um pacote legível para o servidor.");
+  await wait(loadingms, "<b>Camada OSI #5 - Sessão:</b> Sistema do cliente abre uma conexão com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #4 - Transporte:</b> Sistema do cliente troca informações com o servidor.");
+  await wait(loadingms, "<b>Camada OSI #3 - Rede:</b> O sistema do cliente resolve o endereço do servidor.");
+  await wait(loadingms, "<b>Camada OSI #2 - Enlace de dados:</b> Os frames são entregues ao dispositivo com o endereço MAC correto.");
+  await wait(loadingms, "<b>Camada OSI #1 - Física:</b> Os dados são transmitidos por cabo, ou via <i>wireless</i>, para o dispositivo de destino.");
+  process_command(command);
+}
+
+async function process_command(command) {
+  sscreen.value += `Comando recebido: ${command}\n`;
+  args = command.split(" ");
+  command = args[0]
+  args.shift();
+  await wait(loadingms, "<b>O servidor empacota uma resposta, que também será passada por todas camadas até chegar no cliente.");
+  switch (command) {
+    case 'help':
+        screen.value += `Comandos disponíveis:\nhelp - mostra essa mensagem de ajuda\nping - responde 'pong'\necho [texto] - retorna o texto especificado no comando\ntimeout [milissegundos] - muda o tempo que as mensagens de carregamento da simulação duram`
+      break;
+    case 'echo':
+        screen.value += `Resposta do servidor: ${args.join(' ')}\n`
+      break;
+    case 'ping':
+        screen.value += `Pong!\n`
+      break;
+    case 'timeout':
+        loadingms = args[0]
+        screen.value += `O tempo das mensagens de carregamento foi mudado para ${args[0]}ms!`
+      break;
+    default:
+        screen.value += `Comando desconhecido! Envie help para ver a lista de comandos.\n`
+      break;
+  }
+}
+
+async function wait(ms, txt = '') {
+  const delay = ms => new Promise(res => setTimeout(res, ms));
+  loadingText.innerHTML = txt;
+  loading.style.display = "flex"
+  await delay(ms)
+  loading.style.display = "none"
+}

static/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/static/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/static/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}