change styles and make js bettrerererr

This commit is contained in:
elijah 2024-06-09 13:16:46 +02:00
parent fe6c46487a
commit 2f17f57c7a
3 changed files with 21 additions and 22 deletions

View File

@ -14,8 +14,10 @@ async function fetchAndDisplay() {
let charCount = 0; let charCount = 0;
let startTime = performance.now(); let startTime = performance.now();
let initialText = responseDiv.textContent; let initialText = responseDiv.textContent;
const delay = 70; const eraseDelay = 100;
const statsDelay = 40; const printDelay = 50;
const statsEraseDelay = 20;
const statsPrintDelay = 40;
let lastTemperature = "..."; let lastTemperature = "...";
let lastTemperatureUpdateTime = 0; let lastTemperatureUpdateTime = 0;
@ -28,7 +30,7 @@ async function fetchAndDisplay() {
while (initialText.length > 0) { while (initialText.length > 0) {
initialText = initialText.slice(0, -1); initialText = initialText.slice(0, -1);
responseDiv.textContent = initialText; responseDiv.textContent = initialText;
await new Promise(resolve => setTimeout(resolve, delay)); await new Promise(resolve => setTimeout(resolve, eraseDelay));
} }
async function updateStatsAndTemperature() { async function updateStatsAndTemperature() {
@ -36,7 +38,7 @@ async function fetchAndDisplay() {
let charsPerSecond = charCount / currentTime; let charsPerSecond = charCount / currentTime;
if (currentTime - lastTemperatureUpdateTime >= 1) { if (currentTime - lastTemperatureUpdateTime >= 3) {
try { try {
lastTemperature = await fetchTemperature(); lastTemperature = await fetchTemperature();
lastTemperatureUpdateTime = currentTime; lastTemperatureUpdateTime = currentTime;
@ -67,15 +69,14 @@ async function fetchAndDisplay() {
let nextPos = pos !== -1 ? pos : buffer.length; let nextPos = pos !== -1 ? pos : buffer.length;
for (let i = 0; i < nextPos; i++) { for (let i = 0; i < nextPos; i++) {
responseDiv.innerHTML += buffer[i]; responseDiv.innerHTML += buffer[i];
await new Promise(resolve => setTimeout(resolve, delay)); await new Promise(resolve => setTimeout(resolve, printDelay));
charCount++; charCount++;
updateStatsAndTemperature(); await updateStatsAndTemperature();
} }
buffer = buffer.slice(nextPos); buffer = buffer.slice(nextPos);
} }
} }
} }
while (true) { while (true) {
const { value, done } = await reader.read(); const { value, done } = await reader.read();
if (done) { if (done) {
@ -93,17 +94,17 @@ async function fetchAndDisplay() {
while (statsText.length > 0) { while (statsText.length > 0) {
statsText = statsText.slice(0, -1); statsText = statsText.slice(0, -1);
statsDiv.textContent = statsText; statsDiv.textContent = statsText;
await new Promise(resolve => setTimeout(resolve, statsDelay)); await new Promise(resolve => setTimeout(resolve, statsEraseDelay));
} }
await new Promise(resolve => setTimeout(resolve, 200)); await new Promise(resolve => setTimeout(resolve, 200));
const message = '// bg video from hartnett media \\\\'; const message = '// video from hartnett media \\\\';
let messageIndex = 0; let messageIndex = 0;
while (messageIndex < message.length) { while (messageIndex < message.length) {
statsDiv.textContent += message[messageIndex]; statsDiv.textContent += message[messageIndex];
messageIndex++; messageIndex++;
await new Promise(resolve => setTimeout(resolve, statsDelay)); await new Promise(resolve => setTimeout(resolve, statsPrintDelay));
} }
} }

View File

@ -2,7 +2,12 @@
font-family: 'workbench'; font-family: 'workbench';
src: url('../assets/font.woff2') format('woff2'); src: url('../assets/font.woff2') format('woff2');
} }
body {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -11,7 +16,6 @@
font-family: 'workbench', sans-serif; font-family: 'workbench', sans-serif;
overflow: hidden; overflow: hidden;
} }
#background-video { #background-video {
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -25,7 +29,6 @@
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
.navbar { .navbar {
background: none; background: none;
padding: 1rem; padding: 1rem;
@ -34,13 +37,11 @@
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
} }
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
color: #D68FD6; color: #D68FD6;
text-shadow: 0 0 10px #D68FD6; text-shadow: 0 0 10px #D68FD6;
} }
.nav-links { .nav-links {
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -48,11 +49,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav-links li { .nav-links li {
margin-right: 20px; margin-right: 20px;
} }
.nav-links a { .nav-links a {
font-size: 1.2rem; font-size: 1.2rem;
color: #D68FD6; color: #D68FD6;
@ -78,13 +77,13 @@
pointer-events: none; pointer-events: none;
} }
.response b { .response b {
text-shadow: 1 1 30px #783F8E; text-shadow: 1 1 35px #783F8E;
color: #7e4a92; color: #7f5191;
} }
.stats { .stats {
bottom: 0.5%; bottom: 0.5%;
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(128, 128, 128, 0.404); color: rgba(128, 128, 128, 0.534);
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -112,7 +111,6 @@
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
} }
.response { .response {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }

View File

@ -46,7 +46,7 @@
</ul> </ul>
</nav> </nav>
<div id="response" class="response"> <div id="response" class="response">
<span>hello</span> <span>...</span>
</div> </div>
<div id="stats" class="stats"> <div id="stats" class="stats">
<span id="charsPerSecond">0 chars/s</span> <span id="charsPerSecond">0 chars/s</span>