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

public/images/icon-loading.svg

@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>

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;
 }