highlight due date

Reviewed-on: #1

src/components/Dashboard/Dashboard.tsx

@@ -24,6 +24,13 @@ 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>
@@ -31,12 +38,14 @@ 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.cardHeaderInactive}> */}
+                {/*         🏠 HomeAssistant [Tent] */}
+                {/*     </div> */}
+                {/*     <div className={style.cardContent}> */}
+                {/*         <HomeAssistant /> */}
+                {/*     </div> */}
+                {/* </div> */}
             </div>
 
             <div className={style.footer}>

src/components/Datetime/Datetime.tsx

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

src/components/Datetime/style.module.css

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

src/components/Footer/Footer.tsx

@@ -5,6 +5,21 @@ 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}>
@@ -18,10 +33,16 @@ export default function Footer() {
                 </div>
                 <span className={style.divider}></span>
                 <div className={style.windows}>
-                    <span className={style.window}>🚊 Timetable</span>
-                    <span className={style.window}>🕐 Clock</span>
-                    <span className={style.windowActive}>🔔 Terminal</span>
                     <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>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -57,13 +57,19 @@
     border-right: 2px solid #828282;
 }
 
-.windowActive {
-    min-width: 150px;
-    padding-left: 10px;
-    display: inline-flex;
+.newsticker {
+    display: flex;
+    flex-direction: row;
     align-items: center;
-    border-bottom: 2px solid white;
-    border-right: 2px solid white;
-    border-left: 2px solid #828282;
-    border-top: 2px solid #828282;
+    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;
 }

src/components/Terminal/Terminal.tsx

@@ -1,24 +1,10 @@
+import { useEffect } from "react";
 import { useHomeAssistantStore } from "@/store/homeAssistant";
-import { useEffect, useState } from "react";
 
-import style from "./style.module.css";
 import pasta from "./pasta.ts";
+import style from "./style.module.css";
 
 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,
     );
@@ -37,57 +23,19 @@ export default function Terminal() {
 
     return (
         <div className={style.container}>
-            <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 className={style.title}>
+                -[#rauchen]---muehlburger-bubatz-buben.de-
             </span>
-                <span>
-                    <pre>
-                        {"     "}smhhhhmh\`{"   "}os{"        "}Arch Linux
-                    </pre>
+            <span className={style.infoMessage}>
+                <span className={style.bubatzBot}>[BubatzBot]:</span>
+                **UPDATE** Tent: <b>{tentTemperature}°C</b>,{" "}
+                <b>{tentHumidity}%</b>
             </span>
-                <span>
-                    <pre>
-                        {"    "}:N{"      "}Ns{"    "}temp{"      "}
-                        <span className={style.temp}>{tentTemperature}°C</span>
-                    </pre>
+
+            <span className={style.message}>
+                <span className={style.pastaBot}>[anonymous]:</span>
+                <span className={style.pasta}>{pasta[0]}</span>
             </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,48 +2,30 @@
     display: flex;
     flex-direction: column;
     font-family: monospace;
-  font-size: 10pt;
+    font-size: 12pt;
+
     background-color: black;
     color: white;
-  display: flex;
-  flex-direction: column;
     width: 100%;
-  height: 290px;
+    height: 285px;
     overflow: hidden;
 }
 
-.fetch {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 10px;
+.title {
+    color: thistle;
+    margin-bottom: 12pt;
 }
 
-.prompt {
+.bubatzBot {
+    color: skyblue;
+    padding-right: 5px;
+}
+
+.pastaBot {
+    color: bisque;
+    padding-right: 5px;
+}
+
+.infoMessage {
     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,14 +20,8 @@ export default function Timetable() {
     return (
         <div className={style.wrapper}>
             <h1>Departures</h1>
-            <DepartureList
-                departures={pStreet.departureList}
-                name="Philippstraße"
-            />
-            <DepartureList
-                departures={hStreet.departureList}
-                name="Händelstraße"
-            />
+            <DepartureList departures={pStreet.departureList} name="P-Street" />
+            <DepartureList departures={hStreet.departureList} name="H-Street" />
         </div>
     );
 }