sure why not

views/index.html

@@ -48,8 +48,10 @@
             ></small
           >
         </p>
-        <button id="buttonflags" disabled>Cool Flags</button>
       </section>
+      <section id="status"></section>
+      <section id="about"></section>
+      <button id="buttonflags" disabled>Cool Flags</button>
       <section id="fields"></section>
     </main>
     <div id="WindowHolder"></div>

views/scripts/data_get_whoami.js

@@ -3,8 +3,13 @@ const time = document.getElementById("time");
 const weekday = document.getElementById("weekday");
 const timezone = document.getElementById("timezone");
 const nofetchy = document.getElementById("no-fetchy");
+const about = document.getElementById("about");
+const statusus = document.getElementById("status");
 const buttonflags = document.getElementById("buttonflags");
 const fields = document.getElementById("fields");
+
+const URL_REGEXP =
+  /(([a-z0-9.-]*)(((:\/\/)([a-z0-9.-]*))((\/)([\w;,\/?:@&=+$\-_.!~*'()#]*))?)|(((mailto|tel):)([\w;,\/?:@&=+$\-_.!~*'()#]*)))/g;
 fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
   .then((x) => x.json())
   .then((user) => {
@@ -13,9 +18,13 @@ fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
       user.names[0].value
     }</b></a>, also better known online as <b>${
       user.name
-    }</b>. <small>(${user.pronouns.filter((pronoun) => pronoun.status == "okay")
+    }</b>. <small>(${user.pronouns
+      .filter((pronoun) => pronoun.status == "okay")
       .map((pronoun) => pronoun.pronouns.split("/")[0])
       .join("/")})</small></p>`;
+    about.innerHTML = `<h2>Bio</h2><p>MeowcaTheoRange<br />${user.bio
+      .replace(URL_REGEXP, (m) => `<a href="${m}" target="_blank">${m}</a>`)
+      .replaceAll("\n", "<br />")}</p>`;
     const curTime = new Date();
     timezone.innerHTML = `(UTC${user.utc_offset > 0 ? "+" : "-"}${Math.abs(
       user.utc_offset / (60 * 60)
@@ -34,11 +43,14 @@ fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
     };
     buttonflags.disabled = false;
     function updateTime() {
-      curTime.setTime(
-        Date.now()
-      );
-      time.innerHTML = curTime.toLocaleTimeString("en-us", { timeZone: "America/Chicago" });
-      weekday.innerHTML = curTime.toLocaleString("en-us", { weekday: "long", timeZone: "America/Chicago" });
+      curTime.setTime(Date.now());
+      time.innerHTML = curTime.toLocaleTimeString("en-us", {
+        timeZone: "America/Chicago",
+      });
+      weekday.innerHTML = curTime.toLocaleString("en-us", {
+        weekday: "long",
+        timeZone: "America/Chicago",
+      });
 
       window.requestAnimationFrame(updateTime);
     }
@@ -56,3 +68,10 @@ fetch("https://pronouns.cc/api/v1/users/MeowcaTheoRange")
       )
       .join("");
   });
+
+fetch("https://local.abtmtr.link/api/v1/accounts/stat/statuses")
+  .then((x) => x.json())
+  .then((statuses) => {
+    console.log(statuses);
+    statusus.innerHTML = `<h2><a href="${statuses[0].url}" target="_blank">Current status</a></h2>${statuses[0].content}<p></p>`;
+  });

views/styles/normal.css

@@ -286,6 +286,13 @@ blockquote {
   margin-block: 0.5em;
 }
 
+/* Pseudo normalize */
+
+::selection {
+  color: var(--background-color);
+  background-color: var(--color);
+}
+
 /* Form normalize */
 
 html {