chore(app): added card with information about scheduled migration to new hosting

src/App.vue

@@ -7,6 +7,11 @@
 
     <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
 
+    <MigrateInfoCard
+      :is-open="isMigrateInfoCardOpen"
+      @toggle-card="closeMigrateInfoCard"
+    ></MigrateInfoCard>
+
     <Tooltip />
 
     <AppHeader />
@@ -47,9 +52,11 @@ import UpdateCard from './components/App/UpdateCard.vue';
 import StorageManager from './managers/storageManager';
 import AppFooter from './components/App/AppFooter.vue';
 import AppWelcomeCard from './components/App/AppWelcomeCard.vue';
+import MigrateInfoCard from './components/App/MigrateInfoCard.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
+const MIGRATE_INFO_CARD_SEEN_KEY = 'migrate_info_card_seen';
 
 export default defineComponent({
   components: {
@@ -59,6 +66,7 @@ export default defineComponent({
     AppFooter,
     UpdateCard,
     AppWelcomeCard,
+    MigrateInfoCard,
     Tooltip
   },
 
@@ -70,6 +78,7 @@ export default defineComponent({
 
     isUpdateCardOpen: false,
     isWelcomeCardOpen: false,
+    isMigrateInfoCardOpen: false,
 
     isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
   }),
@@ -91,6 +100,7 @@ export default defineComponent({
       this.setupOfflineHandling();
       this.checkAppVersion();
       this.handleQueries();
+      this.handleMigrateInfo();
 
       this.apiStore.setupAPIData();
     },
@@ -159,6 +169,12 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
+    handleMigrateInfo() {
+      if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;
+
+      this.isMigrateInfoCardOpen = true;
+    },
+
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 
@@ -180,6 +196,11 @@ export default defineComponent({
     closeWelcomeCard() {
       this.isWelcomeCardOpen = false;
       StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
+    },
+
+    closeMigrateInfoCard() {
+      this.isMigrateInfoCardOpen = false;
+      // StorageManager.setBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY, true);
     }
   }
 });

src/components/App/MigrateInfoCard.vue

@@ -0,0 +1,108 @@
+<template>
+  <Card :is-open="isOpen" @toggle-card="toggleCard">
+    <div class="body-content">
+      <div class="content-top">
+        <img src="/images/icon-loading.svg" alt="loading" height="125" />
+        <h1>Uwaga!</h1>
+      </div>
+
+      <div>
+        <p>
+          Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego
+          autorstwa
+          <b>
+            z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową
+            dedykowaną domenę:
+          </b>
+        </p>
+
+        <p>
+          <a class="new-link" href="https://stacjownik-td2.spythere.eu/"
+            >https://stacjownik-td2.spythere.eu/</a
+          >
+        </p>
+
+        <p>
+          Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie
+          jedynie przenosić na powyższy adres.
+        </p>
+
+        <p class="info-bottom">
+          <i>"Po co psujesz? Przecież było dobrze tyle czasu!"</i>
+          <br />
+          Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego
+          limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad
+          określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na
+          dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy
+          <span class="text--donator">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla
+          wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację.
+        </p>
+      </div>
+
+      <div class="content-actions">
+        <button class="btn btn--action" @click="toggleCard">PRZYJĄŁEM!</button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+import Card from '../Global/Card.vue';
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggleCard']);
+
+function toggleCard() {
+  emit('toggleCard');
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 300px;
+  padding: 1em 0.5em;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+p {
+  padding: 0.5em 0;
+}
+
+a.new-link {
+  font-size: 1.2em;
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
+.info-bottom {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.content-actions {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+</style>

src/components/Global/Card.vue

@@ -81,6 +81,7 @@ export default defineComponent({
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;
 
   overflow: auto;
 }