change styles and make js bettrerererr

assets/retrieve.js

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

assets/style.css

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

index.html

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