Added Timer

frontend/src/app/hacks/Body.tsx

@@ -0,0 +1,8 @@
+import {Timer} from "@/app/hacks/Timer";
+
+export function Body()
+{
+    return <div className={"bg-hacks-bg-black"}>
+       <Timer EndTime={new Date(2023, 8, 23, 8, 0, 0)}/> 
+    </div>
+}

frontend/src/app/hacks/IconLabel.tsx

@@ -4,6 +4,6 @@ export function IconLabel({iconSrc, label, height, width}: {iconSrc: string, lab
 {
     return <div className={"grid grid-cols-2"}>
         <Image src={iconSrc as string} alt={"Image"} height={height as number} width={width as number} className={"self-center justify-self-end"}></Image>
-        <span className={"text-lg text-white self-center ml-2"}>{label}</span>
+        <span className={"text-lg max-[850px]:text-xs text-white self-center ml-2"}>{label}</span>
     </div>; 
 }

frontend/src/app/hacks/Timer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {Component, useState} from "react";
+
+class TimeStamp
+{
+    public readonly Days: number;
+    public readonly Hours: number;
+    public readonly Minutes: number;
+    public readonly Seconds: number;
+
+    public constructor(days: number, hours: number, minutes: number, seconds: number)
+    {
+        this.Days = days;
+        this.Hours = hours;
+        this.Seconds = seconds;
+        this.Minutes = minutes;
+    }
+}
+
+interface TimerProps
+{
+    EndTime: Date;
+}
+
+interface TimerState
+{
+    CurrentTimeStamp: TimeStamp; 
+}
+
+export class Timer extends Component<TimerProps, TimerState>
+{
+    protected TimeDifference: number;
+
+    protected Days: number; 
+
+    public Tick(): void 
+    {
+        setInterval(()=> {
+            this.UpdateTimeStamp();
+            if(this.TimeDifference > 0)
+                this.TimeDifference -= 1;
+        }, 1000);
+    }
+
+    public UpdateTimeStamp(): void {
+        let seconds: number = Math.floor(this.TimeDifference % 60),
+            minutes: number = Math.floor((this.TimeDifference % 3600) / 60),
+            hours: number = Math.floor((this.TimeDifference % 86400) / 3600),
+            days: number = Math.floor(this.TimeDifference / (3600 * 24));
+
+        this.setState({CurrentTimeStamp: new TimeStamp(days, hours, minutes, seconds)});
+    }  
+
+    public componentWillMount() {
+        this.TimeDifference = Math.abs(this.props.EndTime - new Date()) / 1000;
+        this.setState({CurrentTime: this.TimeDifference, CurrentTimeStamp: new TimeStamp(0,0,0,0)});
+        this.Tick();
+    }
+
+    render()
+    {
+        return <div className={"text-white text-3xl"}>
+            {this.state.CurrentTimeStamp.Days}d {this.state.CurrentTimeStamp.Hours}h {this.state.CurrentTimeStamp.Minutes}m {this.state.CurrentTimeStamp.Seconds}s
+        </div>       
+    }
+
+    constructor(props: TimerProps)
+    {
+        super(props);
+    }
+}

frontend/src/app/hacks/page.tsx

@@ -1,8 +1,10 @@
 import {Header} from "./Header";
+import {Body} from "@/app/hacks/Body";
 
 export default function Page()
 {
     return <div className={"grid grid-rows-[30vh_70vh] bg-navs-bg-black h-full font-audiowide"}>
         <Header/>
+        <Body/>
     </div>;
 }

frontend/tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
         "nav-bar-black": "#010101",
         "body-gray": "#171717",
         "hacks-nav-black": "#202020",
-        "hacks-bg-black": "#1E1E1E"
+        "hacks-bg-black": "#212121"
       },
       fontFamily: {
         "audiowide": ["audiowide", "regular"]