feat: Render FIP validity from params

archetypes/operator/index.en.md

@@ -8,6 +8,11 @@ country:
   - "country2"
   - "country3"
 operator: "{{ .File.ContentBaseName }}"
+Params:
+  fip_coupon: true # <true/false>
+  fip_coupon_relatives: false # <true/false>
+  fip_50_ticket: true # <true/false>
+  fip_global_fare: true # <true/false>
 ---
 
 <!-- Remove the WIP snippet if the page is complete -->
@@ -30,15 +35,14 @@ operator: "{{ .File.ContentBaseName }}"
 
 ## Validity of FIP Tickets
 
+{{< fip-validity >}}{{< /fip-validity >}}
+
 <!--
-  The ticket categories may vary depending on the operator.
+  The fip-validity shortcode reads from the Params in the frontmatter.
+  You can add additional notes inside the shortcode tags (e.g., links to specific sections).
+  Example: {{< fip-validity >}}(For international trains, see [section](#anchor)){{< /fip-validity >}}
 -->
 
-FIP Coupon: <✅/⛔> \
-FIP Coupon for relatives: <✅/⛔> \
-FIP 50 Tickets: <✅/⛔> \
-FIP Global Fare: <✅/⛔>
-
 <!--
   Where are FIP 50 Tickets/FIP Coupons valid and are there any restrictions? Which ticket is required for entry (e.g., continuous FIP 50 ticket or FIP Coupons of both countries)?
 -->

assets/js/main.js

@@ -8,3 +8,4 @@ import "./dropdown.js";
 import "./darkmode.js";
 import "./search.js";
 import "./interactiveMap.js";
+import "./modal.js";

assets/js/modal.js

@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const modalTriggers = document.querySelectorAll("[data-modal-trigger]");
+  const modalCloseButtons = document.querySelectorAll("[data-modal-close]");
+
+  modalTriggers.forEach((trigger) => {
+    trigger.addEventListener("click", (e) => {
+      e.preventDefault();
+      const modalId = trigger.getAttribute("data-modal-trigger");
+      const modal = document.getElementById(modalId);
+      if (modal) {
+        openModal(modal);
+      }
+    });
+  });
+
+  modalCloseButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const modal = button.closest(".o-modal");
+      if (modal) {
+        closeModal(modal);
+      }
+    });
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      const openModal = document.querySelector('.o-modal[aria-hidden="false"]');
+      if (openModal) {
+        closeModal(openModal);
+      }
+    }
+  });
+
+  function openModal(modal) {
+    modal.setAttribute("aria-hidden", "false");
+    document.body.style.overflow = "hidden";
+
+    const firstFocusable = modal.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    if (firstFocusable) {
+      firstFocusable.focus();
+    }
+  }
+
+  function closeModal(modal) {
+    modal.setAttribute("aria-hidden", "true");
+    document.body.style.overflow = "";
+  }
+});

assets/sass/_variables.scss

@@ -14,6 +14,14 @@ $bg-code: #fff284;
 $color-onLight: #000000;
 $color-table-border: #5b5b5b;
 
+$fip-validity-accepted: #155724;
+$fip-validity-rejected: #b70000;
+$fip-validity-warning: #b64900;
+
+$fip-validity-accepted-dark: #a8d5ba;
+$fip-validity-rejected-dark: #f5a9ae;
+$fip-validity-warning-dark: #f0d98d;
+
 html {
   --pagefind-ui-scale: 1 !important;
   --pagefind-ui-text: #000;
@@ -27,6 +35,9 @@ html {
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
+  --fip-validity-accepted: #{$fip-validity-accepted};
+  --fip-validity-rejected: #{$fip-validity-rejected};
+  --fip-validity-warning: #{$fip-validity-warning};
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
@@ -57,6 +68,9 @@ html[data-theme="dark"] {
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
+    --fip-validity-accepted: #{$fip-validity-accepted-dark};
+    --fip-validity-rejected: #{$fip-validity-rejected-dark};
+    --fip-validity-warning: #{$fip-validity-warning-dark};
     --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

assets/sass/fipValidity.scss

@@ -0,0 +1,12 @@
+.o-fip-validity {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  margin-bottom: 1.2rem;
+
+  &__tags {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+}

assets/sass/fipValidityItem.scss

@@ -0,0 +1,71 @@
+.a-fip-validity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.95em;
+  font-weight: 400;
+  line-height: 1.2em;
+
+  svg {
+    margin-top: 0.15em;
+  }
+
+  &--success {
+    color: var(--fip-validity-accepted);
+  }
+
+  &--error {
+    color: var(--fip-validity-rejected);
+  }
+
+  &--info {
+    color: var(--color-body);
+    opacity: 0.85;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
+
+  &__info-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-body);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      width: 1.2em;
+      height: 1.2em;
+      margin-top: 0;
+    }
+  }
+
+  &__note {
+    font-size: 0.8em;
+    color: var(--color-body);
+    font-weight: 400;
+
+    p {
+      margin: 0;
+      display: inline;
+    }
+  }
+}

assets/sass/main.scss

@@ -17,3 +17,6 @@
 @import "startpage.scss";
 @import "interactiveMap.scss";
 @import "dropdown.scss";
+@import "fipValidity.scss";
+@import "fipValidityItem.scss";
+@import "modal.scss";

assets/sass/modal.scss

@@ -0,0 +1,139 @@
+.o-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+
+  &[aria-hidden="false"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  &__container {
+    position: relative;
+    background: var(--bg-default);
+    border-radius: var(--border-radius-m);
+    box-shadow: var(--box-shadow);
+    max-width: 90vw;
+    max-height: 90vh;
+    width: 60rem;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    border-bottom: var(--border);
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  &__close {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: var(--color-body);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius-s);
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: var(--bg-neutral);
+    }
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  &__content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    margin-bottom: 1.5rem;
+    color: var(--color-body);
+    flex-shrink: 0;
+  }
+
+  &__table-wrapper {
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__table {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 0;
+
+    &--body {
+      margin-top: 0;
+    }
+
+    a {
+      color: var(--link-default);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    svg {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
+    &--yes {
+      color: var(--fip-validity-accepted);
+    }
+
+    &--no {
+      color: var(--fip-validity-rejected);
+    }
+
+    &--unknown {
+      color: var(--color-body);
+      opacity: 0.6;
+    }
+  }
+}

content/operator/sncf/index.de.md

@@ -10,6 +10,19 @@ country:
   - "belgium"
   - "luxembourg"
 operator: "sncf"
+Params:
+  fip_coupon: true
+  fip_coupon_fields:
+    oebb: 4
+    renfe: 2
+  fip_coupon_relatives:
+    oebb: true
+    renfe: false
+  fip_50_ticket: true
+  fip_50_ticket_discount:
+    oebb: 25
+    renfe: 75
+  fip_global_fare: true
 ---
 
 Die SNCF (Société Nationale des Chemins de fer Français) ist die französische Staatsbahn und die wichtigste Bahngesellschaft in Frankreich. Sie betreibt fast alle Fern- und Regionalzüge in Frankreich.
@@ -24,10 +37,7 @@ Die SNCF (Société Nationale des Chemins de fer Français) ist die französisch
 
 ## Gültigkeit FIP Tickets
 
-FIP Freifahrtschein: ✅ \
-FIP Freifahrt Angehörige: ⛔ \
-FIP 50 Tickets: ✅ \
-FIP Globalpreis: ✅ (Für internationale `TGV` Züge, siehe [Grenzüberschreitende TGV inOui / ICE Züge](#grenzüberschreitende-tgv-inoui--ice-züge))
+{{< fip-validity fip_global_fare_footnote="Für internationale `TGV` Züge, siehe [Grenzüberschreitende TGV inOui / ICE Züge](#grenzüberschreitende-tgv-inoui--ice-züge)">}}
 
 FIP Freifahrtscheine und FIP 50 Tickets sind auf Verbindungen der SNCF gültig. Bei grenzüberschreitenden Fahrten im Nahverkehr muss entweder ein durchgängiges FIP 50 Ticket oder FIP Freifahrtscheine beider Länder vorhanden sein. Auf internationalen Fernverkehrsverbindungen mittels `TGV` oder `ICE` gelten jedoch Globalpreise, siehe [Grenzüberschreitende TGV inOui / ICE Züge](#grenzüberschreitende-tgv-inoui--ice-züge).