highlight due date

src/components/Dashboard/Dashboard.tsx

@@ -24,13 +24,6 @@ export default function Dashboard() {
                     </div>
                 </div>
 
-                <div className={style.card}>
-                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
-                    <div className={style.cardContent}>
-                        <Flatastic />
-                    </div>
-                </div>
-
                 <div className={style.card}>
                     <div className={style.terminal}>
                         <div className={style.cardHeader}>🔔 Terminal</div>
@@ -38,14 +31,12 @@ export default function Dashboard() {
                     </div>
                 </div>
 
-                {/* <div className={style.card}> */}
-                {/*     <div className={style.cardHeaderInactive}> */}
-                {/*         🏠 HomeAssistant [Tent] */}
-                {/*     </div> */}
-                {/*     <div className={style.cardContent}> */}
-                {/*         <HomeAssistant /> */}
-                {/*     </div> */}
-                {/* </div> */}
+                <div className={style.card}>
+                    <div className={style.cardHeaderInactive}>🧹 Flatastic</div>
+                    <div className={style.cardContent}>
+                        <Flatastic />
+                    </div>
+                </div>
             </div>
 
             <div className={style.footer}>

src/components/Datetime/Datetime.tsx

@@ -20,11 +20,8 @@ export default function Datetime() {
         year: "numeric",
     });
 
-    const time = today.toLocaleTimeString(locale, {
-        hour: "numeric",
-        hour12: false,
-        minute: "numeric",
-    });
+    const hour = today.getHours().toString().padStart(2, "0");
+    const minute = today.getMinutes().toString().padStart(2, "0");
 
     return (
         <div className={style.container}>
@@ -32,7 +29,11 @@ export default function Datetime() {
                 <img src="src/assets/clock.png" alt="Clock" />
             </div>
             <div className={style.textContainer}>
-                <div className={style.time}>{time}</div>
+                <div className={style.time}>
+                    {hour}
+                    <span className={style.divider}>:</span>
+                    {minute}
+                </div>
                 <div className={style.date}>{date}</div>
             </div>
         </div>

src/components/Datetime/style.module.css

@@ -17,3 +17,13 @@ img {
     display: flex;
     flex-direction: column;
 }
+
+.divider {
+  animation: blink 3s step-end infinite;
+}
+
+@keyframes blink {
+    50% {
+    opacity: 0;
+  }
+}

src/components/Footer/Footer.tsx

@@ -5,21 +5,6 @@ import pasta from "./pasta.ts";
 import style from "./style.module.css";
 
 export default function Footer() {
-    const [index, setIndex] = useState(0);
-
-    // random shitpost every minute
-    useEffect(() => {
-        const timer = setInterval(() => {
-            setIndex(Math.floor(Math.random() * pasta.length));
-            console.log("sus!");
-        }, 60 * 1000);
-        return () => {
-            clearInterval(timer);
-        };
-    }, []);
-
-    const text = pasta[index];
-
     return (
         <div className={style.container}>
             <div className={style.taskbar}>
@@ -33,16 +18,10 @@ export default function Footer() {
                 </div>
                 <span className={style.divider}></span>
                 <div className={style.windows}>
-                    <span className={style.window}>🧹 Flatastic</span>
                     <span className={style.window}>🚊 Timetable</span>
-                    <span className={style.window}>🏠 HomeAssistant</span>
-                </div>
-            </div>
-
-            <div className={style.newsticker}>
-                <div className={style.info}>BREAKING</div>
-                <div className={style.marquee}>
-                    <Marquee>{text}</Marquee>
+                    <span className={style.window}>🕐 Clock</span>
+                    <span className={style.windowActive}>🔔 Terminal</span>
+                    <span className={style.window}>🧹 Flatastic</span>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -57,19 +57,13 @@
     border-right: 2px solid #828282;
 }
 
-.newsticker {
-    display: flex;
-    flex-direction: row;
+.windowActive {
+    min-width: 150px;
+    padding-left: 10px;
+    display: inline-flex;
     align-items: center;
-    border-top: 2px solid white;
-    border-left: 2px solid white;
-    border-bottom: 2px solid #828282;
-    border-right: 2px solid #828282;
-}
-
-.info {
-    background-color: red;
-    color: white;
-    font-weight: bold;
-    padding: 5px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    border-left: 2px solid #828282;
+    border-top: 2px solid #828282;
 }

src/components/Terminal/Terminal.tsx

@@ -1,10 +1,24 @@
-import { useEffect } from "react";
 import { useHomeAssistantStore } from "@/store/homeAssistant";
+import { useEffect, useState } from "react";
 
-import pasta from "./pasta.ts";
 import style from "./style.module.css";
+import pasta from "./pasta.ts";
 
 export default function Terminal() {
+    const [index, setIndex] = useState(0);
+
+    // random shitpost every minute
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setIndex(Math.floor(Math.random() * pasta.length));
+        }, 60 * 1000);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    const text = pasta[index];
+
     const fetchHomeAssistantData = useHomeAssistantStore(
         (state) => state.fetch,
     );
@@ -23,19 +37,57 @@ export default function Terminal() {
 
     return (
         <div className={style.container}>
-            <span className={style.title}>
-                -[#rauchen]---muehlburger-bubatz-buben.de-
+            <div className={style.input}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
+                tentfetch
+            </div>
+            <div className={style.fetch}>
+                <span>
+                    <pre>
+                        {"      "}-///:.{"      "}
+                        <span className={style.username}>tent</span>@
+                        <span className={style.hostname}>home</span>
+                    </pre>
                 </span>
-            <span className={style.infoMessage}>
-                <span className={style.bubatzBot}>[BubatzBot]:</span>
-                **UPDATE** Tent: <b>{tentTemperature}°C</b>,{" "}
-                <b>{tentHumidity}%</b>
+                <span>
+                    <pre>
+                        {"     "}smhhhhmh\`{"   "}os{"        "}Arch Linux
+                    </pre>
                 </span>
-
-            <span className={style.message}>
-                <span className={style.pastaBot}>[anonymous]:</span>
-                <span className={style.pasta}>{pasta[0]}</span>
+                <span>
+                    <pre>
+                        {"    "}:N{"      "}Ns{"    "}temp{"      "}
+                        <span className={style.temp}>{tentTemperature}°C</span>
+                    </pre>
                 </span>
+                <span>
+                    <pre>
+                        {"    "}hNNmmmmNNN{"    "}humidity{"  "}
+                        <span className={style.humidity}>{tentHumidity}%</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"    "}NNssussNNN{"    "}plants{"    "}
+                        <span className={style.plants}>4</span>
+                    </pre>
+                </span>
+                <span>
+                    <pre>
+                        {"  "}sNn:{"    "}sNNo
+                    </pre>
+                </span>
+            </div>
+            <div className={style.input}>
+                <span className={style.prompt}>[sus@home ~/hallway]{"$"}</span>{" "}
+                cat msg.txt
+            </div>
+            <div className={style.msg}>{text}</div>
+            <div className={style.input}>
+                <span className={style.prompt}>
+                    [sus@home ~/hallway]{"$"}
+                </span>{" "}
+            </div>
         </div>
     );
 }

src/components/Terminal/style.module.css

@@ -2,30 +2,48 @@
   display: flex;
   flex-direction: column;
   font-family: monospace;
-    font-size: 12pt;
-
+  font-size: 10pt;
   background-color: black;
   color: white;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-    height: 285px;
+  height: 290px;
   overflow: hidden;
 }
 
-.title {
-    color: thistle;
-    margin-bottom: 12pt;
+.fetch {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
 }
 
-.bubatzBot {
-    color: skyblue;
-    padding-right: 5px;
-}
-
-.pastaBot {
-    color: bisque;
-    padding-right: 5px;
-}
-
-.infoMessage {
+.prompt {
   color: lightgreen;
 }
+
+.username {
+  color: violet;
+}
+
+.hostname {
+  color: skyblue;
+}
+
+.temp {
+  color: pink;
+  font-weight: bold;
+}
+
+.humidity {
+  color: skyblue;
+  font-weight: bold;
+}
+
+.plants {
+  color: lightgreen;
+}
+
+pre {
+  margin: 0;
+}

src/components/Timetable/Timetable.tsx

@@ -20,8 +20,14 @@ export default function Timetable() {
     return (
         <div className={style.wrapper}>
             <h1>Departures</h1>
-            <DepartureList departures={pStreet.departureList} name="P-Street" />
-            <DepartureList departures={hStreet.departureList} name="H-Street" />
+            <DepartureList
+                departures={pStreet.departureList}
+                name="Philippstraße"
+            />
+            <DepartureList
+                departures={hStreet.departureList}
+                name="Händelstraße"
+            />
         </div>
     );
 }