feat: add footer for HF tools

src/lib/components/features/calendar-month-select.svelte

@@ -25,7 +25,7 @@
   <select
     id="month-select"
     bind:value={selectedMonth}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each months as month}
       <option value={month.value}>{month.label}</option>

src/lib/components/features/calendar-table.svelte

@@ -117,7 +117,7 @@
   {#if isLoading}
     <div class="flex flex-1 items-center justify-center">
       <div>
-        <IconSpinner size={80} fillColor="fill-tint" />
+        <IconSpinner size={80} fillColor="fill-white" />
       </div>
     </div>
   {:else if entries.length === 0}
@@ -130,25 +130,27 @@
         <thead class="text-sm bg-white uppercase sticky top-0 z-10">
           <tr class="text-black/50">
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Datum
             </th>
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Werktag
             </th>
             <th
-              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-secondary"
+              class="pb-4 font-normal relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 before:bg-fristenkalender_secondary"
             >
               Beschreibung
             </th>
           </tr>
         </thead>
         <tbody>
           {#each entries as entry}
-            <tr class="font-medium border-b border-secondary/50 text-black/70">
+            <tr
+              class="font-medium border-b border-fristenkalender_secondary/50 text-black/70"
+            >
               <td class="py-4 whitespace-nowrap">{entry.date}</td>
               <td class="py-4 whitespace-nowrap"
                 >{formatWorkday(entry.workday)}</td

src/lib/components/features/calendar-type-select.svelte

@@ -14,7 +14,7 @@
   <select
     id="type-select"
     bind:value={selectedType}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each types as type}
       <option value={type.value}>{type.label}</option>

src/lib/components/features/calendar-year-select.svelte

@@ -9,7 +9,7 @@
   <select
     id="year-select"
     bind:value={selectedYear}
-    class="inline-block border-2 border-white rounded-lg bg-secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-fristenkalender_secondary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each years as year}
       <option value={year}>{year}</option>

src/lib/components/features/download-button.svelte

@@ -4,7 +4,7 @@
   import { IconDownload, IconSpinner } from "$lib/components";
   import { downloadCalendar } from "$lib/services/download-ics";
 
-  export let background = "bg-secondary";
+  export let background = "bg-fristenkalender_secondary";
   export let textColor = "text-black";
   export let selectedYear: number;
 

src/lib/components/features/glossary-toggle.svelte

@@ -30,7 +30,7 @@
         </div>
 
         <div
-          class="absolute inset-0 bg-secondary transition-opacity duration-300 rounded-r-lg"
+          class="absolute inset-0 bg-fristenkalender_secondary transition-opacity duration-300 rounded-r-lg"
           class:opacity-99={isOpen}
           class:opacity-100={!isOpen}
         ></div>

src/lib/components/index.ts

@@ -1,6 +1,7 @@
 // shared components
 export { default as AuthButton } from "$lib/components/shared/auth-button.svelte";
 export { default as Footer } from "$lib/components/shared/footer.svelte";
+export { default as FooterTools } from "$lib/components/shared/footer-tools.svelte";
 export { default as Header } from "$lib/components/shared/header.svelte";
 export { default as IconDownload } from "$lib/components/shared/icon-download.svelte";
 export { default as IconHeart } from "$lib/components/shared/icon-heart.svelte";

src/lib/components/shared/footer-tools.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  export let background = "bg-off_white";
+</script>
+
+<footer class="flex items-center {background} px-3 py-3">
+  <div class="flex-1 flex justify-center">
+    <div class="flex items-center text-sm text-black/70 gap-10 text-center">
+      <a
+        href="https://ahb-tabellen.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-ahb_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        AHB-Tabellen
+      </a>
+      <a
+        href="https://bedingungsbaum.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-bedingungsbaum_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Bedingungsbaum
+      </a>
+      <a
+        href="https://ebd.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-ebd_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Entscheidungsbaumdiagramme
+      </a>
+      <a
+        href="https://fristenkalender.hochfrequenz.de"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex flex-row items-center rounded-full bg-fristenkalender_primary text-white text-lg px-5 py-2
+            shadow-lg
+            ring-1
+            ring-black/5
+            hover:ring-black/10
+            transition-all
+            duration-300
+            ease-in-out
+            hover:scale-110"
+      >
+        Fristenkalender
+      </a>
+    </div>
+  </div>
+</footer>

src/lib/components/shared/footer.svelte

@@ -4,7 +4,7 @@
   import { base } from "$app/paths";
   import { IconHeart, IconLogo } from "$lib/components";
 
-  export let background = "bg-secondary";
+  export let background = "bg-fristenkalender_secondary";
 
   type VersionInfo = {
     version_tag: string;

src/lib/components/shared/header.svelte

@@ -9,7 +9,7 @@
   } from "$lib/components";
   import type { MonthValue } from "$lib/types/calendar-month";
 
-  export let background = "bg-primary";
+  export let background = "bg-fristenkalender_primary";
   export let selectedYear: number;
   export let selectedMonth: MonthValue;
   export let selectedType: string;
@@ -33,6 +33,9 @@
   </div>
 
   <div class="flex-none py-2 pr-1">
-    <AuthButton background="bg-secondary" textColor="text-black/70" />
+    <AuthButton
+      background="bg-fristenkalender_secondary"
+      textColor="text-black/70"
+    />
   </div>
 </header>

src/lib/components/shared/icon-spinner.svelte

@@ -6,7 +6,7 @@
 <div role="status">
   <svg
     aria-hidden="true"
-    class="animate-spin dark:text-secondary {fillColor}"
+    class="animate-spin dark:text-fristenkalender_secondary {fillColor}"
     style="width: {size}px; height: {size}px;"
     viewBox="0 0 100 101"
     fill="none"

src/routes/+page.svelte

@@ -16,9 +16,11 @@
   }
 </script>
 
-<section class="bg-primary flex-grow flex items-center justify-center">
+<section
+  class="bg-fristenkalender_primary flex-grow flex items-center justify-center"
+>
   <div
-    class="rounded-3xl w-1/3 bg-secondary p-12
+    class="rounded-3xl w-1/3 bg-fristenkalender_secondary p-12
     shadow-lg
     transition-all
     duration-300
@@ -52,7 +54,7 @@
     <div class="mt-10 flex justify-center relative z-10">
       <button
         on:click={checkAuthentication}
-        class="flex flex-row items-center gap-2 rounded-full bg-primary text-white text-lg px-5 py-2
+        class="flex flex-row items-center gap-2 rounded-full bg-fristenkalender_primary text-white text-lg px-5 py-2
           shadow-lg
           ring-1
           ring-black/5

src/routes/fristenkalender/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import "$src/app.scss";
+
+  import { FooterTools } from "$lib/components";
 </script>
 
 <div class="flex flex-col h-full">
   <main class="flex-1 min-h-0">
     <slot />
   </main>
+  <FooterTools />
 </div>

src/routes/fristenkalender/+page.svelte

@@ -82,7 +82,7 @@
   }
 </script>
 
-<div class="flex flex-col h-full bg-tint relative">
+<div class="flex flex-col h-full bg-white relative">
   <Header bind:selectedYear bind:selectedMonth bind:selectedType />
   <div class="flex flex-row justify-between">
     <div class="flex flex-col px-24 py-12">

tailwind.config.js

@@ -4,8 +4,15 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: "#ABDCD3",
-        secondary: "#D4EDE8",
+        off_white: "#E7E6E5",
+        ahb_primary: "#EBBEC1",
+        ahb_secondary: "#F4E0E1",
+        bedingungsbaum_primary: "#E5BD5C",
+        bedingungsbaum_secondary: "#F4E2B9",
+        ebd_primary: "#8BA2D7",
+        ebd_secondary: "#C2CEE9",
+        fristenkalender_primary: "#ABDCD3",
+        fristenkalender_secondary: "#D4EDE8",
       },
     },
   },