bring back online status and set selection color

index.html

@@ -23,6 +23,10 @@
 
 <header>
     <div class="avatar"><img draggable="false" src="img/avatar.png" alt=""></div>
+    <div class="status">
+        <p id="status">Online status unknown</p>
+        <p id="status-action"></p>
+    </div>
     <div class="bio">
         <p>
             Hi! I'm Trouble, and I'm currently working as a fullstack developer. In my free time I enjoy working on my
@@ -53,7 +57,7 @@
                 <article class="vertical-screen purpur">
                     <div class="bg"></div>
                     <div class="logo">
-                        <img src="img/purpur.svg" alt="">
+                        <img src="img/purpur.svg" alt="" draggable="false">
                     </div>
                     <div>
                         <h2>Purpur</h2>

index.js

@@ -2,8 +2,8 @@ const status = document.querySelector("#status");
 const action = document.querySelector("#status-action");
 const avatar = document.querySelector(".avatar img");
 
-// updateStatus();
+updateStatus();
-// window.setInterval(updateStatus, 10000);
+window.setInterval(updateStatus, 10000);
 
 async function updateStatus() {
     const result = await fetch("https://api.youhavetrouble.me/online");

main.css

@@ -4,6 +4,15 @@
     padding: 0;
     --max-width: 40rem;
 }
+
+::-moz-selection {
+    background: rgba(255,255,255, 0.2);
+}
+
+::selection {
+    background: rgba(255,255,255, 0.2);
+}
+
 html {
     font-family: 'Open Sans', sans-serif;
     color: white;
@@ -86,6 +95,26 @@ main article {
     height: 100%;
 }
 
+.status {
+    max-width: var(--max-width);
+    width: min(100%, 16rem);
+    border: 2px solid #000;
+    border-radius: 0.2rem;
+    background-color: rgba(0,0,0, 0.5);
+    backdrop-filter: blur(4px);
+    box-sizing: border-box;
+    min-height: 5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.status #status-action:empty {
+    display: none;
+}
+
 .bio {
     padding: 1rem;
     max-width: var(--max-width);