From 714dd79c4646a6e8c8db28a5600a613f8fd3b8c7 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Thu, 13 Feb 2025 01:54:42 +0500
Subject: [PATCH] feat: add Footer

---
 src/input.css                                |  20 ++++
 src/static/css/tailwind.css                  | 100 ++++++++++++++++++-
 src/static/images/GitHub_Invertocat_Dark.png | Bin 0 -> 9316 bytes
 src/static/images/Unsplash_Symbol.png        | Bin 0 -> 3503 bytes
 src/static/images/avatar_48.jpg              | Bin 0 -> 1788 bytes
 src/static/js/checkstatus.js                 |  75 ++++++++++++++
 src/templates/Base.tsx                       |   3 +-
 src/templates/Footer.tsx                     |  60 ++++++++++-
 8 files changed, 253 insertions(+), 5 deletions(-)
 create mode 100644 src/static/images/GitHub_Invertocat_Dark.png
 create mode 100644 src/static/images/Unsplash_Symbol.png
 create mode 100644 src/static/images/avatar_48.jpg
 create mode 100644 src/static/js/checkstatus.js

diff --git a/src/input.css b/src/input.css
index a781826..eb5e11e 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+.ubuntu-regular {
+    font-family: "Ubuntu", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
 .ubuntu-mono-regular {
     font-family: "Ubuntu Mono", serif;
     font-weight: 400;
@@ -11,4 +17,18 @@
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
+}
+
+body {
+    position: relative;
+
+    /* Create the dots */
+    background-image:
+        radial-gradient(circle at 1px 1px, #33333366 1px, transparent 0),
+        linear-gradient(to right, #33333366 1px, transparent 1px),
+        linear-gradient(to bottom, #33333366 1px, transparent 1px);
+
+    background-size: 20px 20px;
+    background-position: 0 0, 0 0, 0 0;
+    background-attachment: fixed;
 }
\ No newline at end of file
diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css
index 29e16d1..40b6283 100644
--- a/src/static/css/tailwind.css
+++ b/src/static/css/tailwind.css
@@ -518,6 +518,9 @@
   }
 }
 @layer utilities {
+  .invisible {
+    visibility: hidden;
+  }
   .absolute {
     position: absolute;
   }
@@ -530,6 +533,12 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .-z-10 {
     z-index: calc(10 * -1);
   }
@@ -584,6 +593,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -596,12 +608,21 @@
   .grid {
     display: grid;
   }
+  .inline {
+    display: inline;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -620,6 +641,12 @@
   .min-h-\[438px\] {
     min-height: 438px;
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-\[114px\] {
     width: 114px;
   }
@@ -641,6 +668,18 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .scale-80 {
+    --tw-scale-x: 80%;
+    --tw-scale-y: 80%;
+    --tw-scale-z: 80%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-90 {
+    --tw-scale-x: 90%;
+    --tw-scale-y: 90%;
+    --tw-scale-z: 90%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-140 {
     --tw-scale-x: 140%;
     --tw-scale-y: 140%;
@@ -653,6 +692,9 @@
     --tw-scale-z: 150%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -671,12 +713,18 @@
   .flex-col-reverse {
     flex-direction: column-reverse;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .items-center {
     align-items: center;
   }
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -689,6 +737,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -701,6 +752,9 @@
   .overflow-x-hidden {
     overflow-x: hidden;
   }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -714,12 +768,18 @@
   .bg-\[\#1A0F05\] {
     background-color: #1A0F05;
   }
-  .bg-\[\#3B0D25\] {
-    background-color: #3B0D25;
+  .bg-\[\#3b0d25\] {
+    background-color: #3b0d25;
   }
   .bg-\[var\(--color\)\] {
     background-color: var(--color);
   }
+  .bg-\[var\(--ping-color\)\] {
+    background-color: var(--ping-color);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -738,6 +798,9 @@
   .to-\[75\%\] {
     --tw-gradient-to-position: 75%;
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -792,11 +855,24 @@
   .text-white {
     color: var(--color-white);
   }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-400 {
+    --tw-duration: 400ms;
+    transition-duration: 400ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .hover\:border-\[\#FF851A\] {
     &:hover {
       @media (hover: hover) {
@@ -883,6 +959,11 @@
     }
   }
 }
+.ubuntu-regular {
+  font-family: "Ubuntu", serif;
+  font-weight: 400;
+  font-style: normal;
+}
 .ubuntu-mono-regular {
   font-family: "Ubuntu Mono", serif;
   font-weight: 400;
@@ -894,6 +975,13 @@
   font-weight: 400;
   font-style: normal;
 }
+body {
+  position: relative;
+  background-image: radial-gradient(circle at 1px 1px, #33333366 1px, transparent 0), linear-gradient(to right, #33333366 1px, transparent 1px), linear-gradient(to bottom, #33333366 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 0, 0 0;
+  background-attachment: fixed;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -990,3 +1078,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
diff --git a/src/static/images/GitHub_Invertocat_Dark.png b/src/static/images/GitHub_Invertocat_Dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..10b895fc85584b3bde007b2a3dd25ddd57c6c759
GIT binary patch
literal 9316
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
MP}5N@QAUUSALzZ|wg3PC

literal 0
HcmV?d00001

diff --git a/src/static/images/Unsplash_Symbol.png b/src/static/images/Unsplash_Symbol.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9e8333f74ac9ae0c273c28ded64d83aa1118b0d
GIT binary patch
literal 3503
zcmeHKO>f*p7@nmCm5NG5+(4>E&V@?Yp0Rhg@lYouc1Tv>5Tz>-1P8|U?5>ry$F-fT
zlYkJMg7^VkxaLYPAXSQ>f(r+t3QoQC3Kv=qNE9RxGy7ozDv*}zT6*R2%ro!D^L|Kv
ze{FU7+}Wqk0szjnR@`*}YQIT2^O)E<e{`@fUXQ0MujK$}Gg4~h!TdG=kHV<EQEYfG
zlYqw>4Y|*>GEM~=fXnk`N`p;SK%aG^#8&Pe-cVo^+RCd94|%D>deO>m#;)wHwu9Zx
zzzUW5Ie57wLP5+53d^{k<fOEfp<W`^a$8s65K?T~%7QcqH@r3I@QlHR)>H#rZ@^2I
zhMQ*HvYvwm!m~P>)v>AKCaEK07;yY3!dez~$h!OD*p~RRm0nS#MArv{fi^HTo^^F>
zS(c6r-7r*vQ1hLnprxARGZPIi%Y!URi-;#sYNS5jDr`k~Itn39E44{Jrb!T{mo(L}
zhGa-XU>H=mbSvu*jfa8G`YdKikqa!YuxXDMJn!*;P+cAW#eksJ^C}zn^(Brg6M3<;
zEy5TRa$j`b-btCh&T_t$1#D?sxH%)ENr{s&TJWsRd4H0qwTa8nab#jF_^d~RD3Nho
zJa&t@v|zR(Q>S92BD0MRVp;?>Ra7Skji4S6qt4E8sG;K7w#YI<q=8k`_!BDXCZq-Z
zPjDEJ4$opLqK;zPWqO))6<Bde9Ny=dFf6<?kMFk}XD#EMs4ouk_2os_T5_7$YBp6v
z!$WsHkF=7!ph>`5uB`}$v?vM*#i$V&2&v5XFRAr9GgZq+mWpu)&-y}zWsJfV_gx-r
z$vT+a4<GRUD_JD^koF&1kL*raKx8G#MQV4({d0v~9k2Qk9M%k>f$Rla31ktlP#JGW
z56!?x?V!hm(toLo5iIAOVn8#t&=qW*toU>hfi7Ej6pa4&IEQD)+I#{RvqLVcp(Q@5
zvBwfI>oPIaUi#|B3jmyHwA_Vu`Oy!zzPNfCKXDp=`^$GnAAI@s@~J0}oCEFVow@6V
zc>!KLeE!xm-~W1e0f4uhpK5S%DpL+lSOfm{&%39<kF^iyfV)4H|INYC9>2Ey&8LU?
zXSL7k=I?LZynez&Oq+H(xF$8=-`?A^9|8B?(cT98=ch8|-~npjUhR{2pSt_{wT;{I
Pm#Ve2>VCZV=6intL^wT0

literal 0
HcmV?d00001

diff --git a/src/static/images/avatar_48.jpg b/src/static/images/avatar_48.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d4aeeb03a218e21534c391eadda350956a039818
GIT binary patch
literal 1788
zcmbW!do<f;7zglQZXyzwMBJ)njk;H95*4F*Nf*MV4XS0Og19e5&2?6nqFS_}Qq<9-
zX=$65N(E7M>BXgp5lu!@t6PofifUboEViBPoc*=!d7t;M_j%v*{hU|!qwF=H=1ied
z01yZSILa3wdkK&M2pGKC@`B16rU-*Up)e&lTtN|~ghC;ekVs_}jGD3vS_O$z(^NyN
zV>L81P^wzmnpkZNRs*~F2nZs-1BD@AFa%Z^sf_*4C2IxHihvbh1p(mzFd76wgJe$u
zeE<N#<Y_kp|5+fgJfi|!5ut>X5Af9hFbDzxLm``~<<rUXa{!8lVYcr+prB5p!*Nkq
zd@8G4(coZBn}%Ee+zx_&bQ(fQQ%hTCi=mORiK!XUdXEjs_H*)~FDQ;qRA+aOqn^i(
zdwB;0GJ=9bLc>nSd>b1VpOBb-HX}3ZT=x0=g3E>MD@Da6*Eu(CR#e`)eTVm;mS0!j
zAZUF2<mt2aj?S*<1ERqfV#$v~!=q#46O(VIex9D0UwFUx;p5Ws%Ic;I1VH{^{U!T{
z3oUnnp->1EzUcyi<K!EHhQhY*R=^yf!Rb-zIDD!i_8_agrVU|0aGTTckM38}+(8^Q
zoZqDVF8g<|wErdh3--5b7(hWl^3Q{yfqlTbi(t^=?vQ7~_}TlNDy>1~8&Z)BnEI&t
zY1zDRerfH@*JmVzwO_KuAB_7KuW|=@f<f<BsB4S|N+Kutk<@e0abuk+?X42dVP%~*
z>H`~dJuWxC-erLJuzQ6$7JrYPP)uv{*Pwo;GIf5kS$Ae`I&vgb(pYMPFWxd)@qS<I
zE+lW{Q1QfUgO_$*%9klo=SSBFRnyH5Vxq1K!Z&16khj1v>72%rg{qm5XdMhuidQXe
zv+iCdxHl5Q*!XD)`H1M$jz{5-i?q6NCXGiap#F<jG&<dEtVr8_*>aiVdOba8kn{HT
z^T@dRiDc7tL8T1no7G>MbLWV6GFY@-qj3Q#<?YmJoQSXM<K4S!w#uNfuE5SHyWZUI
zQe;w2dT-dzEel#a8Bo==_AI7phg)Nieb2yh*6r4k7dK0jeyuLqdBMd4-$R*YnhCa_
z879%noT|;l&3ZG<x`Pg{zM&`I^qz?(*2l8zNtxi67o2B#W_N|N_!<Nu?P*SaGPxts
z@Lu!%T^8T1JA|{|NcU#+u-k+6O@bGO;<f_#=t$tLuN^m@LlZU8QDv4FXfoieUn-Mr
z!6k|%u6JX5PGp1##da*AxPx?bXAptwTpFzFm2mQ%b>%_r>;>143$cl@@6{js8eMqe
zU~J>bcJn^z!Z5tm(vVx`MGN)|@M&e+`mA?JRljExFZQXCjrajkh$3mO(}?$FpZ6K<
zOPyvNOt?_7eJ?EHJCek3?vUDv>5@Ifdat@rUf(438|K0a%aQ`?x4MCWpS&t@8Owag
z32RZ_IlM9DB6??Snl^Ok3Ru+$7@s5y;>yzZ#nh$*z{{Kq4Lw~?$3=Xy-%Ii{MA=79
zyXW&)XR1WWi6g6}Eh(=b37YvHf<euW!#P*-CazE1$B~}5-)V_i$ufwv(6=v5{61F(
zY)`UWoxRp`tgmEinclntx1#q}C~G+M$k=0Zk6QeRFQWCZdA5w4Jqm&2;SnV014!zk
zUaqj3Ap?90R?aVm*bM~tzPXgM+v0#%Xt=rMvO~qx#g_3^$%f$ClyAb=J4DCWTR4s9
zSzk98#1qujwv>QO`3e4}O_1p_3T3~6z2spR)LktwSAUz038^AE^W{eJm<(u!ohD;A
zFolbF;gVxV;;GCvs#eCk#Xj};KF4`b9(7C7Pp_V0s~j)?V3Mn-4T-pzJ7mGi(0lZ0
zuXWbBCjGd|uo45Q&$Hd1z7m%+^Y8WbHd~!6^uIF>&?65VJrY~ZI5l^gobJJ1A4$5J
z{j2Xx&^5aB_*BR+CoBaE*r`NQjm!CSqdXBaX4zV|md~<p;I(!$ZQ+4M()e~{U>c!d
zKwxarl5zY)ly;V9smC4LeJ)?Gtsh1&XV0a(7k<kw+UELvwwoAuf<6|(w#4N&5d@=T
zKbSE52M3*|k<V(=l8-$p2(_ufIWch!81K%Fb5zw!iD@@fdR|CFhn4f#jClGhdk#kW
uWji%c#~AfCe}7l25WXMazV`Erxlw7tH3~k4;SS`OQ5N#DS7K{qL%#tlLJ|7_

literal 0
HcmV?d00001

diff --git a/src/static/js/checkstatus.js b/src/static/js/checkstatus.js
new file mode 100644
index 0000000..a1072ca
--- /dev/null
+++ b/src/static/js/checkstatus.js
@@ -0,0 +1,75 @@
+let statusIcon = null;
+let statusIconPing = null;
+let statusText = null;
+
+const serviceUp = {
+  color: "#05df72",
+  text: "All Services Operational",
+};
+const serviceDegraded = {
+  color: "#fcc800",
+  text: "Degraded Services",
+};
+const serviceDown = {
+  color: "#c10007",
+  text: "All Services Down",
+};
+const serviceUnknown = {
+  color: "#6a7282",
+  text: "Unknown",
+};
+
+async function getServicesHealth() {
+  try {
+    const serviceStatus = await fetch(
+      "https://status.wah.su/api/status-page/heartbeat/services"
+    );
+
+    const services = await serviceStatus.json();
+    const heartbeatDict = services.heartbeatList;
+    let lastHeartbeats = [];
+
+    for (const [key, value] of Object.entries(heartbeatDict)) {
+      lastHeartbeats.push(
+        heartbeatDict[key][heartbeatDict[key].length - 1].status
+      );
+    }
+    const count = lastHeartbeats.reduce((partialSum, a) => partialSum + a, 0);
+
+    switch (count) {
+      case lastHeartbeats.length: {
+        statusIcon.style.setProperty("--ping-color", serviceUp.color);
+        statusIconPing.classList.remove("invisible");
+        statusText.textContent = serviceUp.text;
+        break;
+      }
+      case 0: {
+        statusIcon.style.setProperty("--ping-color", serviceDown.color);
+        statusIconPing.classList.add("invisible");
+        statusText.textContent = serviceDown.text;
+        break;
+      }
+      default: {
+        statusIcon.style.setProperty("--ping-color", serviceDegraded.color);
+        statusIconPing.classList.remove("invisible");
+        statusText.textContent = serviceDegraded.text;
+        break;
+      }
+    }
+  } catch (error) {
+    statusIcon.style.setProperty("--ping-color", serviceUnknown.color);
+    statusIconPing.classList.add("invisible");
+    statusText.textContent = serviceUnknown.text;
+    console.log("Failed to fetch services status: " + error);
+    return;
+  }
+}
+
+window.onload = () => {
+  statusIcon = document.getElementById("status-icon");
+  statusIconPing = document.getElementById("status-icon-ping");
+  statusText = document.getElementById("status-text");
+
+  getServicesHealth();
+  setInterval(getServicesHealth, 600000);
+};
diff --git a/src/templates/Base.tsx b/src/templates/Base.tsx
index 9cc55f0..813685d 100644
--- a/src/templates/Base.tsx
+++ b/src/templates/Base.tsx
@@ -17,6 +17,7 @@ export default function Base({ children, isDev }: BaseProps) {
           />
           <title>WAH.su</title>
           {isDev ? <script src="/static/js/hotreload.js"></script> : ""}
+          <script src="/static/js/checkstatus.js"></script>
           <link rel="stylesheet" href="/static/css/tailwind.css" />
           <link rel="preconnect" href="https://fonts.googleapis.com"></link>
           <link
@@ -25,7 +26,7 @@ export default function Base({ children, isDev }: BaseProps) {
             crossOrigin="anonymous"
           ></link>
           <link
-            href="https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Sometype+Mono&family=Ubuntu&family=Ubuntu+Mono&display=swap"
             rel="stylesheet"
           ></link>
         </head>
diff --git a/src/templates/Footer.tsx b/src/templates/Footer.tsx
index 4e4b69e..10ae147 100644
--- a/src/templates/Footer.tsx
+++ b/src/templates/Footer.tsx
@@ -5,7 +5,63 @@ interface FooterProps {
 export default function Footer({ className }: FooterProps) {
   return (
     <div
-      className={`bg-[#3B0D25] w-full h-full ${className} rounded-xl p-8 flex items-center justify-center gap-8`}
-    ></div>
+      className={`bg-[#3b0d25] w-full h-full ${className} rounded-xl p-8 flex flex-col items-center justify-center ubuntu-regular`}
+    >
+      <div className="flex items-start flex-col gap-4">
+        <a
+          href="https://status.wah.su"
+          className="flex flex-row items-center justify-center gap-3"
+          target="_blank"
+        >
+          <div
+            style={{ "--ping-color": "#6a7282" } as React.CSSProperties}
+            className="ml-1 w-4 h-4 relative transition ease-in bg-[var(--ping-color)] rounded-full duration-400"
+            id="status-icon"
+          >
+            <div
+              id="status-icon-ping"
+              className="invisible absolute w-4 h-4 top-0 left-0 scale-90 animate-ping transition ease-in bg-[var(--ping-color)] rounded-full duration-400"
+            ></div>
+          </div>
+          <p id="status-text">...</p>
+        </a>
+        <div className="flex gap-8">
+          <div className="flex gap-2">
+            <div className="inline h-6 w-6 bg-white rounded-full overflow-hidden">
+              <img
+                src="/static/images/Unsplash_Symbol.png"
+                className="w-full h-full object-contain"
+                alt=""
+              />
+            </div>
+            <span>Photo by</span>{" "}
+            <a href="https://unsplash.com/@lgtts">Ilse Orsel</a> <span>on</span>{" "}
+            <a href="https://unsplash.com">Unsplash</a>
+          </div>
+        </div>
+        <div className="flex gap-8">
+          <a href="https://wah.su/radiquum" className="flex gap-2">
+            <div className="h-6 w-6 bg-white rounded-full  overflow-hidden">
+              <img
+                src="/static/images/avatar_48.jpg"
+                className="w-full h-full object-contain"
+                alt=""
+              />
+            </div>
+            <p>Run by @Radiquum</p>
+          </a>
+          <a href="https://github.com/wah-su" className="flex gap-2">
+            <div className="h-6 w-6 bg-white rounded-full">
+              <img
+                src="/static/images/GitHub_Invertocat_Dark.png"
+                className="w-full h-full scale-80 object-contain"
+                alt=""
+              />
+            </div>
+            <p>Find us on GitHub</p>
+          </a>
+        </div>
+      </div>
+    </div>
   );
 }