From a224b58d1707f980c2760e3e4a5e0a89e63f4576 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 26 Nov 2023 19:49:32 +0100
Subject: [PATCH] feature: modal darowizn

---
 public/images/icon-diamond.svg                |  18 +
 public/images/icon-dolar.svg                  |   1 -
 public/images/icon-dollar.svg                 |   4 +-
 public/images/main-logo.svg                   |  48 ++
 src/App.scss                                  |  30 +-
 src/components/Global/AnimatedModal.vue       |  83 +++
 src/components/Global/Donation.vue            | 179 +++++++
 src/components/Global/TrainModal.vue          |  11 -
 .../SceneryView/SceneryTimetable.vue          |   6 +-
 .../StationsView/StationFilterCard.vue        |  14 +-
 src/components/StationsView/StationTable.vue  | 501 +++++++++---------
 src/locales/en.json                           |  17 +
 src/locales/pl.json                           |  17 +
 src/scripts/utils/apiURLs.ts                  |   2 +-
 src/store/mainStore.ts                        |  27 +-
 src/store/typings.ts                          |  12 +-
 src/styles/animations.scss                    |  53 +-
 src/styles/global.scss                        |  43 +-
 src/styles/variables.scss                     |   3 -
 src/typings/api.ts                            |   4 +
 src/views/StationsView.vue                    |  48 +-
 vite.config.ts                                |   8 +-
 22 files changed, 756 insertions(+), 373 deletions(-)
 create mode 100644 public/images/icon-diamond.svg
 delete mode 100644 public/images/icon-dolar.svg
 create mode 100644 public/images/main-logo.svg
 create mode 100644 src/components/Global/AnimatedModal.vue
 create mode 100644 src/components/Global/Donation.vue

diff --git a/public/images/icon-diamond.svg b/public/images/icon-diamond.svg
new file mode 100644
index 0000000..6d11898
--- /dev/null
+++ b/public/images/icon-diamond.svg
@@ -0,0 +1,18 @@
+<svg width="256" height="213" viewBox="0 0 256 213" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1571_41)">
+<path d="M217.048 55.9333L238 80.4039L128 194.6L18 80.4039L38.9524 55.9333L71.6905 18.6H128H184.31L217.048 55.9333Z" fill="#F47FFF"/>
+<path d="M238 80.4039L217.048 55.9333L184.31 18.6M238 80.4039L128 194.6M238 80.4039H164.536M128 194.6L18 80.4039M128 194.6L91.4641 80.4039M128 194.6L164.536 80.4039M184.31 18.6H128M184.31 18.6L164.536 80.4039M18 80.4039L38.9524 55.9333L71.6905 18.6M18 80.4039H91.4641M71.6905 18.6L91.4641 80.4039M71.6905 18.6H128M91.4641 80.4039H128H164.536M91.4641 80.4039L128 18.6M128 18.6L164.536 80.4039" stroke="#ECECEC" stroke-width="7.45763" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_1571_41" x="0.367179" y="0.967155" width="255.266" height="211.266" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6.952"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.498039 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1571_41"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1571_41" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/images/icon-dolar.svg b/public/images/icon-dolar.svg
deleted file mode 100644
index 6a3c591..0000000
--- a/public/images/icon-dolar.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
\ No newline at end of file
diff --git a/public/images/icon-dollar.svg b/public/images/icon-dollar.svg
index cdce7d6..6a3c591 100644
--- a/public/images/icon-dollar.svg
+++ b/public/images/icon-dollar.svg
@@ -1,3 +1 @@
-<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M67.4283 9.79351L67.8252 31.2232H79.5983L79.8628 9.79351H67.4283ZM67.8252 110.989L67.4283 132.816H79.8628L79.466 110.989H67.8252ZM91.6359 51.33L103.938 43.7899C102.439 40.527 100.322 37.3963 97.5886 34.3979C94.9429 31.3995 91.5918 28.9303 87.5352 26.9901C83.5667 25.05 78.8046 24.0799 73.2487 24.0799C67.6929 24.0799 62.7103 25.1382 58.3009 27.2547C53.8915 29.3712 50.4081 32.1932 47.8506 35.7207C45.3814 39.2483 44.1467 43.1726 44.1467 47.4938C44.1467 51.9032 44.9404 55.6512 46.5278 58.7378C48.1152 61.8243 50.1435 64.47 52.6128 66.6747C55.082 68.7912 57.6836 70.5549 60.4174 71.9659C63.2394 73.2888 65.7969 74.347 68.0897 75.1407C71.6173 76.4635 74.9243 77.8745 78.0109 79.3737C81.1856 80.8729 83.7431 82.7249 85.6832 84.9296C87.7115 87.0461 88.7257 89.824 88.7257 93.2633C88.7257 95.9089 88.1966 98.2018 87.1383 100.142C86.1683 101.994 84.625 103.405 82.5085 104.375C80.4801 105.345 77.8786 105.83 74.7038 105.83C71.0881 105.83 67.8693 105.08 65.0473 103.581C62.3134 102.082 59.8001 99.9215 57.5072 97.0995C55.2143 94.2775 53.0978 90.8381 51.1577 86.7815L39.12 94.5861C41.0602 99.3483 43.7499 103.581 47.1892 107.285C50.6286 110.989 54.6411 113.943 59.2269 116.148C63.8126 118.265 68.7512 119.323 74.0424 119.323C80.6565 119.323 86.2564 118.265 90.8422 116.148C95.428 113.943 98.9555 110.813 101.425 106.756C103.894 102.699 105.129 97.9814 105.129 92.6019C105.129 88.4571 104.423 84.8414 103.012 81.7548C101.601 78.6682 99.7492 76.0667 97.4563 73.9502C95.1634 71.7455 92.606 69.8935 89.784 68.3943C87.0501 66.8951 84.3604 65.6605 81.7148 64.6904C78.0109 63.2794 74.5275 61.8684 71.2645 60.4574C68.0016 59.0464 65.3559 57.3709 63.3276 55.4307C61.2993 53.4906 60.2851 51.0213 60.2851 48.0229C60.2851 45.7301 60.7261 43.7899 61.6079 42.2025C62.578 40.527 64.0331 39.2483 65.9732 38.3664C68.0016 37.4845 70.559 37.0436 73.6456 37.0436C76.644 37.0436 79.2455 37.705 81.4502 39.0278C83.6549 40.3506 85.5509 42.1144 87.1383 44.319C88.8139 46.4356 90.3131 48.7725 91.6359 51.33Z" fill="white"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
\ No newline at end of file
diff --git a/public/images/main-logo.svg b/public/images/main-logo.svg
new file mode 100644
index 0000000..17377a7
--- /dev/null
+++ b/public/images/main-logo.svg
@@ -0,0 +1,48 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="256" fill="#121212"/>
+<rect x="325.818" y="405.665" width="7.11086" height="143.867" rx="3.55543" transform="rotate(90 325.818 405.665)" fill="white"/>
+<rect x="361.785" y="430.553" width="10.6663" height="208.608" rx="5.33314" transform="rotate(90 361.785 430.553)" fill="white"/>
+<g filter="url(#filter0_d_272_208)">
+<rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(0.711174 0.703016 -0.711174 0.703016 211.54 363)" fill="white"/>
+</g>
+<g filter="url(#filter1_d_272_208)">
+<rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(-0.711174 0.703016 0.711174 0.703016 300.46 363)" fill="white"/>
+</g>
+<g filter="url(#filter2_d_272_208)">
+<rect x="139.352" y="65.4912" width="232.66" height="325.893" rx="41.5866" stroke="#7A7A7A" stroke-width="8.31733"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M135.193 107.078C135.193 81.8134 155.674 61.3325 180.938 61.3325H330.425C355.69 61.3325 376.171 81.8134 376.171 107.078V349.797C376.171 375.062 355.69 395.543 330.426 395.543H180.938C155.674 395.543 135.193 375.062 135.193 349.797V107.078ZM208.217 338.656C208.217 352.401 196.774 363.544 182.659 363.544C168.543 363.544 157.1 352.401 157.1 338.656C157.1 324.91 168.543 313.768 182.659 313.768C196.774 313.768 208.217 324.91 208.217 338.656ZM328.706 363.544C342.821 363.544 354.264 352.401 354.264 338.656C354.264 324.91 342.821 313.768 328.706 313.768C314.591 313.768 303.148 324.91 303.148 338.656C303.148 352.401 314.591 363.544 328.706 363.544ZM248.38 136.323C248.38 132.07 244.932 128.622 240.679 128.622H164.802C160.549 128.622 157.101 132.07 157.101 136.323V203.223C157.101 207.476 160.549 210.924 164.802 210.924H240.679C244.932 210.924 248.38 207.476 248.38 203.223V136.323ZM346.563 128.622C350.817 128.622 354.265 132.07 354.265 136.323V203.223C354.265 207.476 350.817 210.924 346.563 210.924H270.686C266.433 210.924 262.985 207.476 262.985 203.223V136.323C262.985 132.07 266.433 128.622 270.686 128.622H346.563Z" fill="white"/>
+<ellipse cx="255.682" cy="64.888" rx="25.5582" ry="24.888" fill="#F3F1F1"/>
+</g>
+<defs>
+<filter id="filter0_d_272_208" x="106.676" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="13.269"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
+</filter>
+<filter id="filter1_d_272_208" x="261.334" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="13.269"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
+</filter>
+<filter id="filter2_d_272_208" x="110.241" y="15.048" width="290.882" height="405.446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="12.476"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/App.scss b/src/App.scss
index f97f853..8acd474 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,33 +1,7 @@
 @import './styles/responsive.scss';
 @import './styles/variables.scss';
 @import './styles/global.scss';
-
-// VUE ROUTE CHANGE ANIMATION
-.view-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0.02;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-    min-height: 100%;
-  }
-}
-
-.modal-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translateY(-25%);
-    opacity: 0;
-  }
-}
+@import './styles/animations.scss';
 
 .route {
   margin: 0 0.2em;
@@ -56,8 +30,6 @@
 
 // CONTAINER
 .app_container {
-  // display: flex;
-  // flex-flow: column;
   display: grid;
   grid-template-rows: auto 1fr auto;
   grid-template-columns: 100%;
diff --git a/src/components/Global/AnimatedModal.vue b/src/components/Global/AnimatedModal.vue
new file mode 100644
index 0000000..f59c426
--- /dev/null
+++ b/src/components/Global/AnimatedModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <transition name="modal-anim" tag="div" class="modal">
+    <div class="body" v-if="isOpen">
+      <div class="background" @click="toggleModal(false)"></div>
+      <div class="wrapper" ref="wrapper" tabindex="0">
+        <slot></slot>
+      </div>
+      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store/mainStore';
+
+export default defineComponent({
+  emits: ['toggleModal'],
+
+  props: {
+    isOpen: Boolean
+  },
+
+  data() {
+    return {
+      store: useStore()
+    };
+  },
+
+  watch: {
+    isOpen(v) {
+      this.$nextTick(() => {
+        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
+        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+      });
+    }
+  },
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
+
+  width: 100vw;
+  height: 100vh;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #333333;
+
+  width: 95%;
+  max-width: 800px;
+  max-height: 95vh;
+}
+</style>
diff --git a/src/components/Global/Donation.vue b/src/components/Global/Donation.vue
new file mode 100644
index 0000000..175b5fc
--- /dev/null
+++ b/src/components/Global/Donation.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="donation-modal" @keydown.esc="toggleModal(false)">
+    <button
+      class="modal_button action btn--image"
+      ref="btn"
+      @click="toggleModal(true)"
+      @focus="toggleModal(false)"
+    >
+      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+      <span>{{ $t('donations.button-title') }}</span>
+    </button>
+
+    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
+      <div class="modal_content">
+        <div class="modal_main">
+          <h1 v-html="$t('donations.header')"></h1>
+          <br />
+          <p v-html="$t('donations.p1')"></p>
+          <br />
+          <i18n-t keypath="donations.p2" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('donations.p2-b1') }}</b>
+            </template>
+            <template v-slot:b2>
+              <b>{{ $t('donations.p2-b2') }}</b>
+            </template>
+            <template v-slot:b3>
+              <b>{{ $t('donations.p2-b3') }}</b>
+            </template>
+            <template v-slot:link>
+              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+                {{ $t('donations.p2-a1') }}
+              </a>
+            </template>
+          </i18n-t>
+          <br />
+          <p v-html="$t('donations.p3')"></p>
+          <br />
+          <i18n-t keypath="donations.p4" tag="p">
+            <template v-slot:img>
+              <img src="/images/icon-diamond.svg" alt="diamond donator icon" />
+            </template>
+
+            <template v-slot:b1>
+              <b>{{ $t('donations.p4-b1') }}</b>
+            </template>
+
+            <template v-slot:b2>
+              <b class="text--honorable">{{ $t('donations.p4-b2') }}</b>
+            </template>
+          </i18n-t>
+          <br />
+          <i
+            v-html="$t('donations.p5')"
+            style="display: flex; justify-content: flex-end; text-align: right"
+          >
+          </i>
+        </div>
+
+        <div class="modal_actions">
+          <button class="modal_button exit btn--image" @click="toggleModal(false)">
+            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
+            {{ $t('donations.action-exit') }}
+          </button>
+
+          <form action="https://www.paypal.com/donate" method="post">
+            <input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
+
+            <button class="modal_button action btn--image" @click="toggleModal(false)">
+              <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+              {{ $t('donations.action-confirm') }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </AnimatedModal>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import AnimatedModal from './AnimatedModal.vue';
+
+export default defineComponent({
+  props: {
+    isModalOpen: Boolean
+  },
+  emits: ['toggleModal'],
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
+  },
+  components: { AnimatedModal }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.modal_button {
+  &.action {
+    $btnColor: #254069;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 10%);
+    }
+  }
+
+  &.exit {
+    $btnColor: crimson;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 10%);
+    }
+  }
+
+  @include smallScreen {
+    span {
+      display: none;
+    }
+  }
+}
+
+.modal-logo {
+  position: absolute;
+  top: 0;
+  left: 50%;
+
+  width: 6em;
+
+  transform: translate(-50%, -50%);
+}
+
+.modal_content {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 1em;
+  max-height: 95vh;
+  font-size: 1.1em;
+
+  & > div {
+    padding: 1em;
+  }
+
+  h1 {
+    font-size: 1.95em;
+    text-align: center;
+  }
+
+  p {
+    text-align: justify;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.modal_main {
+  overflow: auto;
+  img {
+    max-height: 20px;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+  }
+}
+
+.modal_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5em;
+}
+</style>
diff --git a/src/components/Global/TrainModal.vue b/src/components/Global/TrainModal.vue
index 3ae2871..d05857a 100644
--- a/src/components/Global/TrainModal.vue
+++ b/src/components/Global/TrainModal.vue
@@ -35,17 +35,6 @@ export default defineComponent({
     this.$nextTick(() => {
       contentEl.focus();
     });
-  },
-
-  methods: {
-    handleContentScroll(e: Event) {
-      const trainInfoCompHeight: number = (
-        this.$refs['trainInfo'] as any
-      ).$el.getBoundingClientRect().height;
-
-      const posTop = (e.target as HTMLElement).scrollTop;
-      this.isTopBarVisible = posTop > trainInfoCompHeight;
-    }
   }
 });
 </script>
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index b6d97d5..1c05dd1 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -85,9 +85,11 @@
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
 
-                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
+                <span
+                  v-if="scheduledTrain.stopInfo.comments"
+                  :title="scheduledTrain.stopInfo.comments"
+                >
                   <img src="/images/icon-warning.svg" />
-                  <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                 </span>
               </span>
               &nbsp;|&nbsp;
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 50dc1ef..260119a 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -295,19 +295,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/card.scss';
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.45);
-  }
-}
+@import '../../styles/animations.scss';
 
 .card {
   display: grid;
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index f0d811a..8fd5fb4 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -1,270 +1,278 @@
 <template>
   <section class="station_table">
-    <div class="table_wrapper">
-      <table>
-        <thead>
-          <tr>
-            <th
-              v-for="headerName in headIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-text"
-            >
-              <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${headerName}`)"></div>
-
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-
-            <th
-              v-for="headerName in headIconsIds"
-              :key="headerName"
-              @click="changeSorter(headerName)"
-              class="header-image"
-            >
-              <span class="header_wrapper">
-                <img
-                  :src="`/images/icon-${headerName}.svg`"
-                  :alt="headerName"
-                  :title="$t(`sceneries.${headerName}`)"
-                />
-
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.headerName == headerName"
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                  alt="sort icon"
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            class="station"
-            :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            v-for="(station, i) in stations"
-            :key="i + station.name"
-            @click.left="setScenery(station.name)"
-            @click.right="openForumSite($event, station.generalInfo?.url)"
-            @keydown.enter="setScenery(station.name)"
-            @keydown.space="openForumSite($event, station.generalInfo?.url)"
-            tabindex="0"
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="headerName in headIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-text"
           >
-            <td class="station_name" :class="station.generalInfo?.availability">
-              <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                station.generalInfo.project
-              }}</b>
-              {{ station.name }}
-            </td>
+            <span class="header_wrapper">
+              <div v-html="$t(`sceneries.${headerName}`)"></div>
 
-            <td class="station_level">
-              <span v-if="station.generalInfo">
-                <span
-                  v-if="
-                    station.generalInfo.reqLevel > -1 &&
-                    station.generalInfo.availability != 'nonPublic' &&
-                    station.generalInfo.availability != 'unavailable'
-                  "
-                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
-                >
-                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                  <img
-                    src="/images/icon-abandoned.svg"
-                    alt="non-public"
-                    :title="$t('desc.abandoned')"
-                  />
-                </span>
-
-                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                  <img
-                    src="/images/icon-lock.svg"
-                    alt="non-public"
-                    :title="$t('desc.non-public')"
-                  />
-                </span>
-
-                <span v-else>
-                  <img
-                    src="/images/icon-unavailable.svg"
-                    alt="unavailable"
-                    :title="$t('desc.unavailable')"
-                  />
-                </span>
-              </span>
-
-              <span v-else> ? </span>
-            </td>
-
-            <td class="station_status">
-              <StationStatusBadge
-                :isOnline="station.onlineInfo ? true : false"
-                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+              <img
+                class="sort-icon"
+                v-if="sorterActive.headerName == headerName"
+                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
               />
-            </td>
+            </span>
+          </th>
 
-            <td class="station_dispatcher-name">
-              {{ station.onlineInfo ? station.onlineInfo.dispatcherName : '' }}
-            </td>
+          <th
+            v-for="headerName in headIconsIds"
+            :key="headerName"
+            @click="changeSorter(headerName)"
+            class="header-image"
+          >
+            <span class="header_wrapper">
+              <img
+                :src="`/images/icon-${headerName}.svg`"
+                :alt="headerName"
+                :title="$t(`sceneries.${headerName}`)"
+              />
 
-            <td class="station_dispatcher-exp">
-              <span
-                v-if="station.onlineInfo"
-                :style="
-                  calculateExpStyle(
-                    station.onlineInfo.dispatcherExp,
-                    station.onlineInfo.dispatcherIsSupporter
-                  )
-                "
-              >
-                {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
-              </span>
-            </td>
+              <img
+                class="sort-icon"
+                v-if="sorterActive.headerName == headerName"
+                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                alt="sort icon"
+              />
+            </span>
+          </th>
+        </tr>
+      </thead>
 
-            <td class="station_tracks twoway">
+      <tbody>
+        <tr
+          class="station"
+          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+          v-for="(station, i) in stations"
+          :key="i + station.name"
+          @click.left="setScenery(station.name)"
+          @click.right="openForumSite($event, station.generalInfo?.url)"
+          @keydown.enter="setScenery(station.name)"
+          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+          tabindex="0"
+        >
+          <td class="station_name" :class="station.generalInfo?.availability">
+            <b v-if="station.generalInfo?.project" style="color: salmon">{{
+              station.generalInfo.project
+            }}</b>
+            {{ station.name }}
+          </td>
+
+          <td class="station_level">
+            <span v-if="station.generalInfo">
               <span
                 v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
+                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.availability != 'unavailable'
                 "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
+                :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
-                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
+                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
               </span>
 
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
-              </span>
-
-              <span class="separator"></span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
-                "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
-              </span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
-              </span>
-            </td>
-
-            <td class="station_info" v-if="station.generalInfo">
-              <span
-                class="scenery-icon icon-info"
-                :class="station.generalInfo.controlType.replace('+', '-')"
-                :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-              >
-              </span>
-
-              <span>
+              <span v-else-if="station.generalInfo.availability == 'abandoned'">
                 <img
-                  class="icon-info"
-                  v-if="station.generalInfo.SUP"
-                  src="/images/icon-SUP.svg"
-                  alt="SUP (RASP-UZK)"
-                  :title="$t('desc.SUP')"
+                  src="/images/icon-abandoned.svg"
+                  alt="non-public"
+                  :title="$t('desc.abandoned')"
                 />
               </span>
 
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo.signalType"
-                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                  :alt="station.generalInfo.signalType"
-                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-                />
+              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                <img src="/images/icon-lock.svg" alt="non-public" :title="$t('desc.non-public')" />
               </span>
 
-              <span>
+              <span v-else>
                 <img
-                  class="icon-info"
-                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  src="/images/icon-SBL.svg"
-                  alt="SBL"
-                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
+                  src="/images/icon-unavailable.svg"
+                  alt="unavailable"
+                  :title="$t('desc.unavailable')"
                 />
               </span>
-            </td>
+            </span>
 
-            <td class="station_info" v-else>
+            <span v-else> ? </span>
+          </td>
+
+          <td class="station_status">
+            <StationStatusBadge
+              :isOnline="station.onlineInfo ? true : false"
+              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+            />
+          </td>
+
+          <td class="station_dispatcher-name">
+            <span v-if="station.onlineInfo?.dispatcherName">
+              <div
+                v-if="store.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                title="Dyżurny wspierający projekt Stacjownika!"
+                class="text--honorable"
+                @click.stop="openDonationModal"
+              >
+                <img src="/images/icon-diamond.svg" alt="" />
+                {{ station.onlineInfo.dispatcherName }}
+              </div>
+
+              <div v-else>
+                {{ station.onlineInfo.dispatcherName }}
+              </div>
+            </span>
+          </td>
+
+          <td class="station_dispatcher-exp">
+            <span
+              v-if="station.onlineInfo"
+              :style="
+                calculateExpStyle(
+                  station.onlineInfo.dispatcherExp,
+                  station.onlineInfo.dispatcherIsSupporter
+                )
+              "
+            >
+              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+            </span>
+          </td>
+
+          <td class="station_tracks twoway">
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
+              "
+              class="track catenary"
+              :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
+            </span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
+              "
+              class="track no-catenary"
+              :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
+            </span>
+
+            <span class="separator"></span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
+              "
+              class="track catenary"
+              :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
+            </span>
+
+            <span
+              v-if="
+                station.generalInfo &&
+                station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
+              "
+              class="track no-catenary"
+              :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
+            >
+              {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
+            </span>
+          </td>
+
+          <td class="station_info" v-if="station.generalInfo">
+            <span
+              class="scenery-icon icon-info"
+              :class="station.generalInfo.controlType.replace('+', '-')"
+              :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
+              v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+            >
+            </span>
+
+            <span>
               <img
                 class="icon-info"
-                src="/images/icon-unknown.svg"
-                alt="icon-unknown"
-                :title="$t('desc.unknown')"
+                v-if="station.generalInfo.SUP"
+                src="/images/icon-SUP.svg"
+                alt="SUP (RASP-UZK)"
+                :title="$t('desc.SUP')"
               />
-            </td>
+            </span>
 
-            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
-              /
-              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
-            </td>
+            <span>
+              <img
+                class="icon-info"
+                v-if="station.generalInfo.signalType"
+                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+                :alt="station.generalInfo.signalType"
+                :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+              />
+            </span>
 
-            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
-            </td>
+            <span>
+              <img
+                class="icon-info"
+                v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
+                src="/images/icon-SBL.svg"
+                alt="SBL"
+                :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
+              />
+            </span>
+          </td>
 
-            <td
-              class="station_schedules all"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.all }}
-            </td>
+          <td class="station_info" v-else>
+            <img
+              class="icon-info"
+              src="/images/icon-unknown.svg"
+              alt="icon-unknown"
+              :title="$t('desc.unknown')"
+            />
+          </td>
 
-            <td
-              class="station_schedules unconfirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
-            </td>
+          <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+            /
+            <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+          </td>
 
-            <td
-              class="station_schedules confirmed"
-              style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+          <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
+            <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+          </td>
+
+          <td
+            class="station_schedules all"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.all }}
+          </td>
+
+          <td
+            class="station_schedules unconfirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
+          </td>
+
+          <td
+            class="station_schedules confirmed"
+            style="width: 30px"
+            :class="{ inactive: !station.onlineInfo }"
+          >
+            {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     <Loading v-if="!isDataLoaded && stations.length == 0" />
 
@@ -295,6 +303,7 @@ export default defineComponent({
     }
   },
 
+  emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin, stationInfoMixin],
 
@@ -320,7 +329,8 @@ export default defineComponent({
 
     return {
       isDataLoaded,
-      stationFiltersStore
+      stationFiltersStore,
+      store
     };
   },
 
@@ -340,6 +350,11 @@ export default defineComponent({
       });
     },
 
+    openDonationModal(e: Event) {
+      this.$emit('toggleDonationModal', true);
+      this.store.modalLastClickedTarget = e.target;
+    },
+
     openForumSite(e: Event, url: string | undefined) {
       if (!url) return;
       e.preventDefault();
@@ -380,11 +395,6 @@ section.station_table {
   font-weight: 500;
 }
 
-.table_wrapper {
-  overflow: auto;
-  overflow-y: hidden;
-}
-
 table {
   white-space: nowrap;
   border-collapse: collapse;
@@ -495,6 +505,15 @@ td.station {
     }
   }
 
+  // &_dispatcher-name {
+  //   position: relative;
+  // }
+
+  &_dispatcher-name img {
+    max-width: 1.35em;
+    vertical-align: text-bottom;
+  }
+
   &_level {
     span {
       background-color: #888;
diff --git a/src/locales/en.json b/src/locales/en.json
index 577d5a5..c685b53 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,4 +1,21 @@
 {
+  "donations": {
+    "button-title": "TOSS A COIN",
+    "header": "Toss a coin to Stacjownik!",
+    "p1": "<b>Hello o7!</b> This is Spythere, the creator of Stacjownik, Pojazdownik and several other applications that enhance the gameplay of Train Driver 2!",
+    "p2": "{b1} is a completely free tool, created and continuously developed for the Train Driver 2 simulator community since 2020. However, a part of the project is sustained solely through my private financial contribution.  Features such as  {b2} or {b3} (operating on my {link} - to which you are warmly invited) must function on a dedicated server where they can collect and process data, and then display it on the website.",
+    "p2-b1": "Stacjownik",
+    "p2-b2": "Journal",
+    "p2-b3": "Stacjobot (Stacjownik bot)",
+    "p2-a1": "Discord server",
+    "p3": "<b>If you have the means and would like to support my work, I would be grateful for any financial assistance that could help cover at least some of the server costs and further enhance the capabilities of the application!</b>",
+    "p4": "Every person who decides to contribute at least {b1} for the development of Stacjownik, will recieve (upon a personal request) {img}{b2} of username in the \"Sceneries\" and \"Trains\" tabs of the application, as well as on my Discord server (after verifying the payment author, preferably by providing the username directly with the payment).",
+    "p4-b1": "5 PLN",
+    "p4-b2": "a symbolic highlight",
+    "p5": "Thank you and enjoy further using my tools!<br />~Spythere",
+    "action-exit": "Maybe next time...",
+    "action-confirm": "DONATE!"
+  },
   "general": {
     "and": " and ",
     "refresh": "REFRESH",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index b4d7afb..26edf6f 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -1,4 +1,21 @@
 {
+  "donations": {
+    "button-title": "GROSZA DAJ",
+    "header": "Grosza daj Stacjownikowi!",
+    "p1": "<b>Hej o7!</b> Z tej strony Spythere, twórca Stacjownika, Pojazdownika oraz kilku innych aplikacji wspomagających rozgrywkę symulatora Train Driver 2!",
+    "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdeczne zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
+    "p2-b1": "Stacjownik",
+    "p2-b2": "Dziennik",
+    "p2-b3": "Stacjobot",
+    "p2-a1": "serwerze Discord",
+    "p3": "<b>Jeśli masz możliwość i chcesz wspomóc moją twórczość dla symulatora, będę wdzięczny za wszelkie pomoce finansowe, które pozwolą na choćby częściowe pokrycie kosztów serwera oraz dalsze rozwijanie możliwości aplikacji!</b>",
+    "p4": "Każda osoba, która postanowi przelać co najmniej {b1} na rozwój Stacjownika, otrzyma na życzenie symboliczne {img}{b2} nicku użytkownika w zakładkach \"Scenerie\" i \"Pociągi\" aplikacji i moim serwerze Discord (po zweryfikowaniu autora płatności, najlepiej poprzez podanie nicku bezpośrednio przy niej).",
+    "p4-b1": "5 złotych",
+    "p4-b2": "wyróżnienie",
+    "p5": "Dzięki i miłego dalszego korzystania z moich narzędzi! <br /> ~Spythere",
+    "action-exit": "Może kiedy indziej...",
+    "action-confirm": "WSPOMÓŻ!"
+  },
   "general": {
     "and": " oraz ",
     "refresh": "ODŚWIEŻ",
diff --git a/src/scripts/utils/apiURLs.ts b/src/scripts/utils/apiURLs.ts
index c8ddcec..46d2d34 100644
--- a/src/scripts/utils/apiURLs.ts
+++ b/src/scripts/utils/apiURLs.ts
@@ -2,6 +2,6 @@ export const URLs = {
   stacjownikAPI:
     import.meta.env.VITE_APP_API_DEV === '1' && !import.meta.env.PROD
       ? 'http://localhost:3001'
-      : 'https://stacjownik.spythere.pl',
+      : 'https://stacjownik.spythere.eu',
   stacjownikAPIDev: 'localhost:3000'
 };
diff --git a/src/store/mainStore.ts b/src/store/mainStore.ts
index 60c4eba..7b99ed1 100644
--- a/src/store/mainStore.ts
+++ b/src/store/mainStore.ts
@@ -9,7 +9,7 @@ import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
 import { OnlineScenery, ScheduledTrain, StationJSONData, StoreState } from './typings';
 
 import packageInfo from '../../package.json';
-import { Websocket, API } from '../typings/api';
+import { Websocket, API, GithubAPI } from '../typings/api';
 import { Status } from '../typings/common';
 
 export const useStore = defineStore('store', {
@@ -17,6 +17,7 @@ export const useStore = defineStore('store', {
     ({
       activeData: {} as unknown,
       rollingStockData: undefined,
+      donatorsData: [],
 
       stationList: [],
       regionOnlineCounters: [],
@@ -55,7 +56,14 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
-      modalLastClickedTarget: null
+      modalLastClickedTarget: null,
+
+      tooltip: {
+        content: '',
+        visible: false,
+        x: 0,
+        y: 0
+      }
     }) as StoreState,
 
   getters: {
@@ -280,6 +288,7 @@ export const useStore = defineStore('store', {
     async connectToAPI() {
       this.connectToWebsocket();
       this.fetchStockInfoData();
+      this.fetchDonatorsData();
       this.fetchStationsGeneralInfo();
     },
 
@@ -299,6 +308,18 @@ export const useStore = defineStore('store', {
       }
     },
 
+    async fetchDonatorsData() {
+      try {
+        const response = await axios.get<GithubAPI.Donators.Response>(
+          'https://raw.githubusercontent.com/Spythere/api/main/td2/data/donators.json'
+        );
+
+        if (response.data) this.donatorsData = ['Kryszakos'];
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
+      }
+    },
+
     async setStatuses() {
       if (!this.activeData.activeSceneries) {
         this.dataStatuses.sceneries = Status.Data.Error;
@@ -311,8 +332,6 @@ export const useStore = defineStore('store', {
       this.dataStatuses.sceneries = Status.Data.Loaded;
       this.dataStatuses.trains = !this.activeData.trains ? Status.Data.Warning : Status.Data.Loaded;
       this.dataStatuses.dispatchers = Status.Data.Loaded;
-
-      // if (this.apiData.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
     }
   }
 });
diff --git a/src/store/typings.ts b/src/store/typings.ts
index e145fc2..e9ce4d8 100644
--- a/src/store/typings.ts
+++ b/src/store/typings.ts
@@ -1,6 +1,6 @@
 import { Socket } from 'socket.io-client';
 import Station from '../scripts/interfaces/Station';
-import { API, Websocket } from '../typings/api';
+import { API, GithubAPI, Websocket } from '../typings/api';
 import { Status } from '../typings/common';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
@@ -15,6 +15,7 @@ export interface StoreState {
   stationList: Station[];
   activeData: Websocket.ActiveData;
   rollingStockData?: API.RollingStock.Response;
+  donatorsData: GithubAPI.Donators.Response;
 
   regionOnlineCounters: RegionCounters[];
 
@@ -55,6 +56,13 @@ export interface StoreState {
   listenerLaunched: boolean;
   blockScroll: boolean;
   modalLastClickedTarget: EventTarget | null;
+
+  tooltip: {
+    visible: boolean;
+    x: number;
+    y: number;
+    content: string;
+  };
 }
 
 export interface StationRoutesInfo {
@@ -187,7 +195,7 @@ export interface TrainStop {
   departureDelay: number;
   pointId: number;
 
-  comments?: any;
+  comments?: string;
 
   beginsHere: boolean;
   terminatesHere: boolean;
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 28c0d21..0cc702e 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,7 +1,11 @@
+$animDuration: 150ms;
+$animType: ease-in-out;
+
+// List animation
 .list-anim-move,
 .list-anim-enter-active,
 .list-anim-leave-active {
-  transition: all 250ms ease;
+  transition: all $animDuration ease;
 }
 
 .list-anim-enter-from,
@@ -15,6 +19,21 @@
   width: 100%;
 }
 
+// View animation
+.view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0.02;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+    min-height: 100%;
+  }
+}
+
+// Data status list animation
 .status-anim {
   &-enter-from,
   &-leave-to {
@@ -22,10 +41,38 @@
   }
 
   &-enter-active {
-    transition: all 100ms ease-out;
+    transition: all $animDuration ease-out;
   }
 
   &-leave-active {
-    transition: all 100ms ease-out;
+    transition: all $animDuration ease-out;
+  }
+}
+
+// Card animation
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+}
+
+// Modal animation
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-25%);
+    opacity: 0;
   }
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index ec69dd7..18c5215 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -14,6 +14,8 @@
   --clr-error: #df3e3e;
   --clr-warning: #c59429;
 
+  --clr-honorable: #f47fff;
+
   font-size: 16px;
 }
 
@@ -54,38 +56,6 @@ body {
   }
 }
 
-.g-tooltip {
-  position: relative;
-
-  display: inline-block;
-  vertical-align: middle;
-
-  .content {
-    position: absolute;
-    left: 0;
-
-    z-index: 100;
-
-    visibility: hidden;
-    opacity: 0;
-
-    min-width: 250px;
-
-    background-color: #202020;
-    text-align: center;
-
-    border-radius: 0.5em;
-
-    transition: opacity 0.3s;
-    padding: 0.25em;
-  }
-
-  &:hover > .content {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 button,
 input,
 select {
@@ -187,16 +157,23 @@ ul {
   &--grayed {
     color: #ccc;
   }
+
+  &--honorable {
+    color: var(--clr-honorable);
+    text-shadow: var(--clr-honorable) 0 0 10px;
+  }
 }
 
 button {
   cursor: pointer;
   color: white;
   background: none;
+  border-radius: 0.25em;
 
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5em;
 
   padding: 0.25em 0.5em;
 
@@ -211,7 +188,6 @@ button {
 
 button.btn--filled {
   background-color: #1a1a1a;
-  border-radius: 0.25em;
 
   &:hover {
     background-color: #2a2a2a;
@@ -245,7 +221,6 @@ button.btn--image {
 
   img {
     width: 1.5em;
-    margin-right: 0.5em;
     vertical-align: middle;
   }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5e02d87..c7b741d 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -12,6 +12,3 @@ $accent2Col: #ff3d5d;
 
 $skr: #ff5100;
 $twr: #ffbb00;
-
-$animDuration: 150ms;
-$animType: ease-in-out;
diff --git a/src/typings/api.ts b/src/typings/api.ts
index d177c7e..aa7a577 100644
--- a/src/typings/api.ts
+++ b/src/typings/api.ts
@@ -328,4 +328,8 @@ export namespace GithubAPI {
       body: string;
     }
   }
+
+  export namespace Donators {
+    export type Response = string[];
+  }
 }
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 41de744..170b5c5 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -1,17 +1,17 @@
 <template>
   <section class="stations-view">
     <div class="wrapper">
-      <div class="body">
-        <div class="options-bar">
-          <StationFilterCard
-            :showCard="filterCardOpen"
-            :exit="(filterCardOpen = false)"
-            ref="filterCardRef"
-          />
-        </div>
+      <div class="stations-options">
+        <StationFilterCard
+          :showCard="filterCardOpen"
+          :exit="(filterCardOpen = false)"
+          ref="filterCardRef"
+        />
 
-        <StationTable :stations="computedStationList" />
+        <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
       </div>
+
+      <StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
     </div>
   </section>
 </template>
@@ -22,11 +22,13 @@ import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import { useStationFiltersStore } from '../store/stationFiltersStore';
 import { useStore } from '../store/mainStore';
+import Donation from '../components/Global/Donation.vue';
 
 export default defineComponent({
   components: {
     StationTable,
-    StationFilterCard
+    StationFilterCard,
+    Donation
   },
 
   data: () => ({
@@ -35,17 +37,25 @@ export default defineComponent({
     STORAGE_KEY: 'options_saved',
     focusedStationName: '',
     filterStore: useStationFiltersStore(),
-    store: useStore()
+    store: useStore(),
+
+    isDonationModalOpen: false
   }),
 
+  mounted() {
+    this.filterStore.setupFilters();
+  },
+
   computed: {
     computedStationList() {
       return this.filterStore.filteredStationList;
     }
   },
 
-  mounted() {
-    this.filterStore.setupFilters();
+  methods: {
+    toggleDonationModal(value: boolean) {
+      this.isDonationModalOpen = value;
+    }
   }
 });
 </script>
@@ -80,23 +90,21 @@ export default defineComponent({
 
 .stations-view {
   position: relative;
+  display: flex;
+  justify-content: center;
 
   padding: 1em 0;
   min-height: 100%;
 }
 
 .wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.body {
   max-width: 100%;
 }
 
-.options-bar {
+.stations-options {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
 
   margin-bottom: 0.5em;
 }
diff --git a/vite.config.ts b/vite.config.ts
index c423e9f..b36c6eb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,9 +19,7 @@ export default defineConfig({
             handler: 'NetworkFirst',
             options: {
               cacheName: 'sceneries-cache',
-              expiration: {
-                maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
-              },
+
               cacheableResponse: {
                 statuses: [0, 200]
               }
@@ -32,9 +30,7 @@ export default defineConfig({
             handler: 'NetworkFirst',
             options: {
               cacheName: 'github-api-cache',
-              expiration: {
-                maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
-              },
+
               cacheableResponse: {
                 statuses: [0, 200]
               }