Merge pull request #134 from Spythere/development

v1.30.3
fix: status messages
2026-05-03 05:18:11 +00:00 · 2025-07-05 02:20:55 +02:00 · 2025-07-04 23:37:59 +02:00 · 2025-07-04 18:29:00 +02:00 · 2025-07-04 18:28:41 +02:00 · 2025-07-04 18:22:41 +02:00
94 changed files with 4417 additions and 3746 deletions
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.29.1",
+  "version": "1.30.3",
  "private": true,
  "type": "module",
  "scripts": {
@@ -16,26 +16,26 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "core-js": "^3.32.2",
-    "dotenv": "^16.3.1",
-    "pinia": "^2.1.6",
-    "sass": "^1.67.0",
+    "core-js": "^3.42.0",
+    "dotenv": "^16.5.0",
+    "pinia": "^3.0.2",
+    "sass": "^1.87.0",
    "showdown": "^2.1.0",
    "vue": "^3.3.4",
-    "vue-i18n": "^9.4.1",
+    "vue-i18n": "^11.1.3",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.15.15",
    "@types/showdown": "^2.0.6",
-    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/assets-generator": "^1.0.0",
    "@vitejs/plugin-vue": "^5.1.0",
-    "@vue/tsconfig": "^0.5.1",
-    "axios": "^1.7.2",
+    "@vue/tsconfig": "^0.7.0",
+    "axios": "^1.9.0",
    "prettier": "^3.3.3",
    "typescript": "^5.5.4",
-    "vite": "^5.3.4",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.0",
    "vue-tsc": "^2.0.28"
  },
  "browserslist": [
@@ -0,0 +1,47 @@
+<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="black"/>
+<rect x="329.454" y="340.498" width="7.7497" height="147.239" rx="3.87485" transform="rotate(90 329.454 340.498)" fill="white"/>
+<rect x="308" y="320" width="5" height="103" rx="2.5" transform="rotate(90 308 320)" fill="white"/>
+<rect x="366.263" y="367.622" width="11.6246" height="213.496" rx="5.81228" transform="rotate(90 366.263 367.622)" fill="white"/>
+<g filter="url(#filter0_d_1067_42)">
+<rect width="18.2931" height="124.137" rx="9.14654" transform="matrix(0.688736 0.725012 -0.688736 0.725012 212.498 294)" fill="white"/>
+</g>
+<g filter="url(#filter1_d_1067_42)">
+<rect width="19.6916" height="124.137" rx="9.84578" transform="matrix(-0.688736 0.725012 0.688736 0.725012 303.502 294)" fill="white"/>
+</g>
+<g filter="url(#filter2_d_1067_42)">
+<path d="M147.893 304.935H121.015C109.69 304.935 101.233 302.498 95.6422 297.624C90.195 292.607 87.4713 285.01 87.4713 274.832V194.628C87.4713 184.307 90.195 176.71 95.6422 171.836C101.233 166.962 109.69 164.525 121.015 164.525H178.856V187.318H115.854C114.134 187.318 113.274 188.178 113.274 189.898V279.562C113.274 281.283 114.134 282.143 115.854 282.143H154.559C156.279 282.143 157.139 281.283 157.139 279.562V245.589L159.719 249.674H138.002V228.387H181.436V274.832C181.436 285.01 178.641 292.607 173.051 297.624C167.603 302.498 159.217 304.935 147.893 304.935ZM282.921 265.371V166.46H304.853V303H287.006L222.284 204.734L226.585 203.874V303H204.867V166.46H222.499L287.006 264.511L282.921 265.371ZM358.59 303H333.218V166.46L391.059 165.6C402.527 165.313 411.199 167.894 417.077 173.341C423.097 178.788 426.108 186.672 426.108 196.994V218.711C426.108 227.025 423.814 233.978 419.227 239.568C414.783 245.159 408.189 248.671 399.445 250.104V245.159C403.889 246.019 407.401 247.739 409.981 250.319C412.561 252.9 414.783 256.842 416.647 262.146L431.053 303H405.68L389.339 254.19C388.909 253.043 388.479 252.255 388.049 251.824C387.762 251.251 386.973 250.964 385.683 250.964H354.505L358.59 246.879V303ZM358.59 183.232V233.117L354.935 229.247H397.295C399.301 229.247 400.305 228.315 400.305 226.452V190.328C400.305 188.464 399.301 187.533 397.295 187.533H354.935L358.59 183.232Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1067_42" x="101.768" y="268.962" width="148.561" height="153.339" 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="14.4611"/>
+<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_1067_42"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1067_42" result="shape"/>
+</filter>
+<filter id="filter1_d_1067_42" x="264.99" y="269.259" width="148.96" height="153.759" 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="14.4611"/>
+<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_1067_42"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1067_42" result="shape"/>
+</filter>
+<filter id="filter2_d_1067_42" x="85.2844" y="161.245" width="352.33" height="149.158" 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 dx="2.18692" dy="1.09346"/>
+<feGaussianBlur stdDeviation="2.18692"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.5375 0 0 0 0 0.5375 0 0 0 0 0.5375 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1067_42"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1067_42" result="shape"/>
+</filter>
+</defs>
+</svg>
@@ -0,0 +1,24 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_102_63" fill="white">
+<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z"/>
+</mask>
+<path d="M0 250C0 111.929 111.929 6.10352e-05 250 6.10352e-05C388.071 6.10352e-05 500 111.929 500 250C500 388.071 388.071 500 250 500C111.929 500 0 388.071 0 250Z" fill="#242424"/>
+<path d="M0 222.821C0 84.7503 111.929 -27.1785 250 -27.1785C388.071 -27.1785 500 84.7503 500 222.821V250C500 126.939 388.071 27.1787 250 27.1787C111.929 27.1787 0 126.939 0 250V222.821ZM500 277.179C500 415.25 388.071 527.179 250 527.179C111.929 527.179 0 415.25 0 277.179V250C0 373.061 111.929 472.821 250 472.821C388.071 472.821 500 373.061 500 250V277.179ZM0 500V6.10352e-05V500ZM500 6.10352e-05V500V6.10352e-05Z" fill="#FFD600" mask="url(#path-1-inside-1_102_63)"/>
+<path d="M210.369 301.604C210.369 301.604 210.369 341.807 210.369 364.846C210.369 387.885 202.798 417.491 171.591 417.491C140.385 417.491 132.813 417.491 132.813 417.491L132.812 78.125L250.754 78.125C274.312 78.125 294.504 80.9665 311.331 86.6494C328.311 92.1788 342.232 99.8585 353.093 109.689C364.107 119.519 372.214 131.115 377.415 144.478C382.616 157.84 385.217 172.278 385.217 187.791C385.217 204.533 382.54 219.892 377.186 233.869C371.832 247.846 363.648 259.827 352.634 269.81C341.62 279.794 327.623 287.627 310.643 293.31C293.816 298.839 273.853 301.604 250.754 301.604L210.369 301.604ZM210.369 242.854L250.754 242.854C270.946 242.854 285.479 238.016 294.351 228.34C303.224 218.663 307.66 205.147 307.66 187.791C307.66 180.111 306.512 173.123 304.218 166.825C301.923 160.528 298.405 155.152 293.663 150.698C289.074 146.09 283.184 142.558 275.995 140.1C268.958 137.643 260.544 136.414 250.754 136.414L210.369 136.414L210.369 242.854Z" fill="url(#paint0_linear_102_63)"/>
+<path d="M239.215 301.604C239.215 301.604 239.215 341.807 239.215 364.846C239.215 387.885 231.643 417.491 200.437 417.491C169.231 417.491 161.659 417.491 161.659 417.491L161.658 78.125L279.6 78.125C303.158 78.125 323.35 80.9665 340.177 86.6494C357.157 92.1788 371.077 99.8585 381.938 109.689C392.952 119.519 401.06 131.115 406.261 144.478C411.462 157.84 414.062 172.278 414.062 187.791C414.062 204.533 411.385 219.892 406.031 233.869C400.677 247.846 392.493 259.827 381.479 269.81C370.465 279.794 356.468 287.627 339.488 293.31C322.662 298.839 302.699 301.604 279.6 301.604L239.215 301.604ZM239.215 242.854L279.6 242.854C299.792 242.854 314.325 238.016 323.197 228.34C332.069 218.663 336.505 205.147 336.505 187.791C336.505 180.111 335.358 173.123 333.064 166.825C330.769 160.528 327.251 155.152 322.509 150.698C317.919 146.09 312.03 142.558 304.84 140.1C297.804 137.643 289.39 136.414 279.6 136.414L239.215 136.414L239.215 242.854Z" fill="url(#paint1_linear_102_63)"/>
+<path d="M210.685 301.604C210.685 301.604 210.685 341.807 210.685 364.846C210.685 387.885 203.082 417.491 171.749 417.491C140.416 417.491 132.813 417.491 132.813 417.491L132.812 78.125L251.233 78.125C274.887 78.125 295.161 80.9665 312.057 86.6494C329.105 92.1788 343.083 99.8585 353.988 109.689C365.046 119.519 373.187 131.115 378.409 144.478C383.631 157.84 386.242 172.278 386.242 187.791C386.242 204.533 383.555 219.892 378.179 233.869C372.803 247.846 364.586 259.827 353.527 269.81C342.468 279.794 328.414 287.627 311.365 293.31C294.47 298.839 274.426 301.604 251.233 301.604L210.685 301.604ZM210.685 242.854L251.233 242.854C271.508 242.854 286.099 238.016 295.008 228.34C303.916 218.663 308.37 205.147 308.37 187.791C308.37 180.111 307.218 173.123 304.914 166.825C302.611 160.528 299.078 155.152 294.316 150.698C289.709 146.09 283.795 142.558 276.576 140.1C269.511 137.643 261.063 136.414 251.233 136.414L210.685 136.414L210.685 242.854Z" fill="url(#paint2_radial_102_63)"/>
+<defs>
+<linearGradient id="paint0_linear_102_63" x1="259.015" y1="78.125" x2="259.015" y2="417.491" gradientUnits="userSpaceOnUse">
+<stop offset="0.135417" stop-color="#FFD600"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_102_63" x1="287.86" y1="78.125" x2="287.86" y2="417.491" gradientUnits="userSpaceOnUse">
+<stop offset="0.135417" stop-color="#FFD600"/>
+<stop offset="1"/>
+</linearGradient>
+<radialGradient id="paint2_radial_102_63" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(259.527 247.808) rotate(0.36307) scale(345.948 325.206)">
+<stop offset="0.484375" stop-color="white"/>
+<stop offset="1"/>
+</radialGradient>
+</defs>
+</svg>
@@ -5,9 +5,11 @@
      @toggle-card="() => (isUpdateCardOpen = false)"
    />

+    <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
+
    <Tooltip />
-    
-    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
+
+    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />

    <main class="app_main">
      <router-view v-slot="{ Component }">
@@ -44,8 +46,10 @@ 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';

 const STORAGE_VERSION_KEY = 'app_version';
+const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';

 export default defineComponent({
  components: {
@@ -54,6 +58,7 @@ export default defineComponent({
    AppHeader,
    AppFooter,
    UpdateCard,
+    AppWelcomeCard,
    Tooltip
  },

@@ -64,8 +69,8 @@ export default defineComponent({
    tooltipStore: useTooltipStore(),

    isUpdateCardOpen: false,
+    isWelcomeCardOpen: false,

-    currentLang: 'pl',
    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
  }),

@@ -85,13 +90,29 @@ export default defineComponent({
      this.loadLang();
      this.setupOfflineHandling();
      this.checkAppVersion();
+      this.handleQueries();

      this.apiStore.setupAPIData();
    },

+    handleQueries() {
+      const query = new URLSearchParams(window.location.search);
+
+      if (query.get('welcomeCard') == '1') {
+        this.isWelcomeCardOpen = true;
+      }
+    },
+
    async checkAppVersion() {
+      const isWelcomeCardSeen = StorageManager.getBooleanValue(WELCOME_CARD_SEEN_KEY);
      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);

+      if (isWelcomeCardSeen == false && storageVersion == '') {
+        setTimeout(() => {
+          this.isWelcomeCardOpen = true;
+        }, 1500);
+      }
+
      try {
        const releaseData = await (
          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
@@ -140,7 +161,7 @@ export default defineComponent({

    changeLang(lang: string) {
      this.$i18n.locale = lang;
-      this.currentLang = lang;
+      this.store.currentLocale = lang;

      StorageManager.setStringValue('lang', lang);
    },
@@ -157,42 +178,28 @@ export default defineComponent({

      const naviLanguage = window.navigator.language.toString();

-      if (naviLanguage.startsWith('en')) {
+      if (!naviLanguage.startsWith('pl')) {
        this.changeLang('en');
        return;
      }
+    },
+
+    closeWelcomeCard() {
+      this.isWelcomeCardOpen = false;
+      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
    }
  }
 });
 </script>

 <style lang="scss">
-@import './styles/global';
-@import './styles/animations';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
+@use './styles/animations';

 // APP
 #app {
  color: white;
-  font-size: 1rem;
  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.85vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
+  font-size: 1em;
 }

 // CONTAINER
@@ -9,7 +9,9 @@

    <br />
    <a href="https://discord.gg/x2mpNN3svk">
-      <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+      <img src="/images/icon-discord.png" alt="discord logo icon" />&nbsp;<b class="text--discord">
+        {{ $t('footer.discord') }}
+      </b>
    </a>

    <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
@@ -37,5 +39,3 @@ export default defineComponent({
  }
 });
 </script>
-
-<style scoped></style>
@@ -45,17 +45,17 @@
        </span>

        <span class="header_links">
-          <router-link class="route" active-class="route-active" to="/" exact>
+          <router-link class="route-link" active-class="route-link-active" to="/" exact>
            {{ $t('app.sceneries') }}
          </router-link>
          /
-          <router-link class="route" active-class="route-active" to="/trains">{{
+          <router-link class="route-link" active-class="route-link-active" to="/trains">{{
            $t('app.trains')
          }}</router-link>
          /
          <router-link
-            class="route"
-            active-class="route-active"
+            class="route-link"
+            active-class="route-link-active"
            :data-active="$route.path.startsWith('/journal')"
            to="/journal"
          >
@@ -116,9 +116,9 @@ export default defineComponent({
  }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 // HEADER
 .app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
  justify-content: center;

  position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }

 .header {
@@ -141,7 +141,7 @@ export default defineComponent({

    border-radius: 0 0 1em 1em;

-    @include smallScreen {
+    @include responsive.smallScreen{
      position: relative;
      margin-top: 0.5em;
    }
@@ -180,7 +180,7 @@ export default defineComponent({

    padding: 0.5em;

-    @include smallScreen {
+    @include responsive.smallScreen{
      transform: translateX(85%);
    }
  }
@@ -0,0 +1,246 @@
+<template>
+  <Card :is-open="props.isCardOpen">
+    <div class="body-content">
+      <h1>{{ $t('welcome.title') }}</h1>
+
+      <div class="language-select">
+        <button :data-active="$i18n.locale == 'pl'" @click="changeLang('pl')">
+          <img src="/images/icon-pl.svg" alt="" width="45" />
+        </button>
+
+        <button :data-active="$i18n.locale == 'en'" @click="changeLang('en')">
+          <img src="/images/icon-en.jpg" alt="" width="45" />
+        </button>
+      </div>
+
+      <section class="app-description">
+        <i18n-t keypath="welcome.app-desc" tag="p">
+          <template v-slot:b1>
+            <b>{{ $t('welcome.app-desc-b1') }}</b>
+          </template>
+
+          <template v-slot:link>
+            <a href="https://td2.info.pl/" class="link" target="_blank">Train Driver 2</a>
+          </template>
+        </i18n-t>
+      </section>
+
+      <section class="tabs">
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.sceneries-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.sceneries-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.sceneries-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.trains-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.trains-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.trains-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.journal-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.journal-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.journal-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+      </section>
+
+      <section class="other-apps">
+        <b class="text--primary">
+          {{ $t('welcome.other-apps') }}
+        </b>
+
+        <div class="apps-grid">
+          <a class="app-item" href="https://pojazdownik-td2.web.app/" target="_blank">
+            <img src="/images/icon-pojazdownik.svg" alt="pojazdownik app logo" />
+            <h3 class="text--primary">Pojazdownik</h3>
+            <p>{{ $t('welcome.pojazdownik-desc') }}</p>
+          </a>
+
+          <a class="app-item" href="https://generator-td2.web.app/" target="_blank">
+            <img src="/images/icon-gnr.svg" alt="generator app logo" />
+            <h3 class="text--primary">GeneraTOR</h3>
+            <p>{{ $t('welcome.generator-desc') }}</p>
+          </a>
+
+          <a class="app-item" href="https://srjp-td2.web.app/" target="_blank">
+            <img src="/images/icon-srjp.svg" alt="srjp app logo" />
+            <h3 class="text--primary">Rozkładownik</h3>
+            <p>{{ $t('welcome.srjp-desc') }}</p>
+          </a>
+        </div>
+      </section>
+
+      <section class="bottom-info">
+        <i18n-t keypath="welcome.donation-info" tag="div" class="donation-info">
+          <template v-slot:icon1>
+            <img src="/images/icon-diamond.svg" alt="diamond icon" width="25" />
+            <span class="text--donator">&nbsp;{{ $t('welcome.donation-info-icon1-text') }}</span>
+          </template>
+        </i18n-t>
+
+        <i18n-t keypath="welcome.discord-info" tag="div" class="discord-info">
+          <template v-slot:discord>
+            <a href="https://discord.gg/x2mpNN3svk" class="link" target="_blank">
+              <b class="text--discord">{{ $t('welcome.discord-info-link-text') }}</b>
+            </a>
+          </template>
+        </i18n-t>
+
+        <div class="bottom-text">
+          <i>{{ $t('welcome.bottom-text') }}</i>
+        </div>
+
+        <div class="bottom-actions">
+          <button class="btn btn--action" @click="toggleCard(false)">
+            {{ $t('welcome.button-confirm') }}
+          </button>
+        </div>
+      </section>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import Card from '../Global/Card.vue';
+import { useMainStore } from '../../store/mainStore';
+import StorageManager from '../../managers/storageManager';
+
+const i18n = useI18n();
+const store = useMainStore();
+
+const emit = defineEmits(['toggleCard']);
+const props = defineProps({
+  isCardOpen: Boolean
+});
+
+function toggleCard(state: boolean) {
+  emit('toggleCard', state);
+}
+
+function changeLang(localeName: string) {
+  i18n.locale.value = localeName;
+  store.currentLocale = localeName;
+
+  StorageManager.setStringValue('lang', localeName);
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 900px;
+  padding: 1em 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+hr {
+  margin-bottom: 0.5em;
+}
+
+a.link {
+  text-decoration: underline;
+
+  img {
+    vertical-align: middle;
+    margin-right: 0.2em;
+  }
+}
+
+.language-select {
+  display: flex;
+  justify-content: center;
+  margin: 0.5em 0;
+
+  button[data-active='false'] img {
+    opacity: 0.5;
+  }
+}
+
+.app-description {
+  margin: 1em 0;
+}
+
+.tab-description {
+  margin-top: 0.5em;
+}
+
+.other-apps {
+  font-weight: bold;
+  margin: 1em 0;
+  font-size: 1.1em;
+}
+
+.apps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1em;
+  padding: 1em;
+}
+
+.apps-grid > a.app-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5em;
+  padding: 1em;
+  background-color: #2b2b2b;
+  transition: background-color 100ms ease-in-out;
+  border-radius: 0.5em;
+
+  &:hover {
+    background-color: #3b3b3b;
+  }
+
+  img {
+    width: 2.5em;
+  }
+}
+
+.donation-info {
+  font-weight: bold;
+  font-size: 1.1em;
+
+  img {
+    vertical-align: middle;
+  }
+}
+
+.discord-info {
+  margin-top: 1em;
+  font-weight: bold;
+
+  img {
+    vertical-align: middle;
+  }
+}
+
+.bottom-text {
+  margin: 1em 0;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.bottom-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 1em;
+
+  font-size: 1.25em;
+}
+</style>
@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
  name: 'VueClock',
-  data: () => ({
-    timestamp: Date.now()
-  }),
+  data: () => ({ timestamp: Date.now() }),
  setup() {
    let timestamp = ref(Date.now());

@@ -28,8 +26,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .clock {
  display: flex;
  align-items: center;
@@ -310,7 +310,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 // INDICATOR TOOLTIP ANIMATION
 .tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
      content: '';
    }

-    @include midScreen() {
+    @include responsive.midScreen() {
      left: auto;
      right: 200%;

@@ -393,7 +393,7 @@ export default defineComponent({
      }
    }

-    @include smallScreen() {
+    @include responsive.smallScreen{
      min-width: 8em;
    }
  }
@@ -73,11 +73,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables';
-
 ::v-deep(h1) {
  text-align: center;
-  color: $accentCol;
+  color: var(--clr-primary);
 }

 ::v-deep(h2) {
@@ -0,0 +1,81 @@
+<template>
+  <div class="driver-not-found">
+    <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
+
+    <p class="text--grayed">
+      {{ $t('trains.driver-not-found-desc-1') }} <br />
+      {{ $t('trains.driver-not-found-desc-2') }}
+      <router-link to="/journal/timetables"
+        >{{ $t('trains.driver-not-found-journal') }} </router-link
+      >!
+    </p>
+
+    <p v-if="props.trainId && otherDriverTrains.length > 0">
+      <i18n-t keypath="trains.driver-not-found-others">
+        <template v-slot:driver>
+          <b>{{ otherDriverTrains[0].driverName }}</b>
+        </template>
+      </i18n-t>
+    </p>
+
+    <div class="other-driver-trains">
+      <template v-for="(train, i) in otherDriverTrains">
+        <router-link :to="`/driver?trainId=${train.id}`">
+          {{ train.trainNo }}
+          | {{ regions.find((r) => r.id == train.region)?.name ?? 'PL1' }}
+        </router-link>
+      </template>
+    </div>
+
+    <div style="margin-top: 1em">
+      <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { regions } from '../../data/options.json';
+
+const mainStore = useMainStore();
+
+const props = defineProps({
+  trainId: {
+    type: String
+  }
+});
+
+const otherDriverTrains = computed(() => {
+  return mainStore.trainList.filter(
+    (train) =>
+      train.driverId == Number(props.trainId?.split('|')[0]) &&
+      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.driver-not-found {
+  background-color: var(--clr-view-bg);
+  text-align: center;
+  padding: 1em;
+  border-radius: 0.5em 0.5em;
+
+  p {
+    padding: 0.5em 0;
+  }
+
+  a {
+    text-decoration: underline;
+    color: white;
+  }
+}
+
+.other-driver-trains {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+</style>
@@ -0,0 +1,85 @@
+<template>
+    <div class="driver-top-actions">
+        <div class="actions-container">
+            <div class="actions actions-left">
+                <button class="a-button btn--filled btn--image" @click="routerReturn">
+                    <img src="/images/icon-back.svg" alt="train icon" />
+                    <span>
+                        {{ t('trains.driver-return-link') }}
+                    </span>
+                </button>
+            </div>
+
+            <div class="actions actions-right">
+                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+                    target="_blank">
+                    <span class="hidable">
+                        {{ t('trains.driver-srjp-link') }}
+                    </span>
+
+                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
+                </a>
+
+                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+                    class="a-button btn--filled btn--image">
+                    <span class="hidable">
+                        {{ t('trains.driver-journal-link') }}
+                    </span>
+
+                    <img src="/images/icon-train.svg" alt="train icon" />
+                </router-link>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Train } from '../../typings/common';
+import { PropType } from 'vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+defineProps({
+    chosenTrain: {
+        type: Object as PropType<Train>,
+        required: true
+    }
+});
+
+function routerReturn() {
+    router.back();
+}
+</script>
+
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+
+.actions-container {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.5em;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5em;
+}
+
+.actions-container>.actions>.a-button {
+    padding: 0.5em;
+    border-radius: 0.5em 0.5em 0 0;
+}
+
+@include responsive.smallScreen {
+    span.hidable {
+        display: none;
+    }
+}
+</style>
@@ -0,0 +1,328 @@
+<template>
+  <div class="driver-train-card">
+    <TrainInfo :train="chosenTrain" :extended="true" />
+
+    <!-- Train action buttons -->
+    <div class="train-stock-actions">
+      <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+        <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
+      </button>
+
+      <button class="btn btn--action" style="margin: 1em 0" @click="toggleNumberPropositions()">
+        <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
+      </button>
+    </div>
+
+    <!-- Proposed numbers container -->
+    <transition name="view-anim" class="propositions-container">
+      <div v-if="arePropositionsVisible">
+        <h3 style="margin-bottom: 0.5em">{{ i18n.t('trains.number-propositions-header') }}</h3>
+
+        <div class="categories-select">
+          <button
+            v-for="(category, i) in availableCategories"
+            class="btn btn--option btn--action"
+            @click="selectCategory(i)"
+            :class="{ checked: i == chosenCategoryIndex }"
+          >
+            {{ category }}
+          </button>
+        </div>
+
+        <div v-if="numberPropositions.length > 0" class="propositions-numbers">
+          <div v-if="chosenCategory">
+            <b>{{ chosenCategory }} </b> -
+            {{ i18n.t(`categories.${chosenCategory.slice(0, 2)}`) }}
+            ({{ i18n.t(`categories.${chosenCategory.slice(2)}`) }})
+          </div>
+
+          <div v-if="chosenCategoryRules">
+            <span v-if="chosenCategoryRules[0]"
+              >{{ i18n.t('trains.number-propositions-third-number') }}
+              <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+            </span>
+
+            <span
+              >{{
+                i18n.t('trains.number-propositions-last-nums', {
+                  count: chosenCategoryRules[1].length
+                })
+              }}
+              <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+              <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+            >
+          </div>
+
+          <div style="margin-top: 0.5em">
+            <b>{{ i18n.t('trains.number-propositions-title') }}&nbsp;</b>
+            <i>{{ numberPropositions.join(', ') }}</i>
+          </div>
+        </div>
+
+        <div class="no-propositions" v-else>{{ i18n.t('trains.number-propositions-empty') }}</div>
+      </div>
+    </transition>
+
+    <StockList :trainStockList="chosenTrain.stockList" />
+    <TrainSchedule :train="chosenTrain" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue';
+import { Train } from '../../typings/common';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+
+import StockList from '../Global/StockList.vue';
+import TrainSchedule from '../TrainsView/TrainSchedule.vue';
+import TrainInfo from '../TrainsView/TrainInfo.vue';
+
+import rulesJSON from '../../data/trainNumberRules.json';
+import { computed } from 'vue';
+import { watch } from 'vue';
+
+const apiStore = useApiStore();
+
+const i18n = useI18n();
+
+const arePropositionsVisible = ref(false);
+const chosenCategoryIndex = ref(0);
+
+const numberPropositions = ref<string[]>([]);
+const chosenCategoryRules = ref<any[]>([]);
+
+const props = defineProps({
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+
+function copyStockToClipboard() {
+  const stockString = props.chosenTrain.stockList.join(';');
+
+  if (!stockString) {
+    alert(i18n.t('trains.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(i18n.t('trains.stock-clipboard-failure'));
+    });
+}
+
+function toggleNumberPropositions() {
+  arePropositionsVisible.value = !arePropositionsVisible.value;
+
+  if (arePropositionsVisible.value) generateNumberPropositions();
+}
+
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+
+  generateNumberPropositions();
+}
+
+function generateNumberPropositions() {
+  const categoryCode = chosenCategory.value?.slice(0, 2);
+  const trainNoStr = props.chosenTrain.trainNo.toString();
+
+  // Get category rules
+  const rules = categoryCode
+    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
+    : undefined;
+
+  if (!categoryCode || !rules) {
+    numberPropositions.value.length = 0;
+    chosenCategoryRules.value.length = 0;
+
+    return;
+  }
+
+  const [thirdNumber, minRange, maxRange] = rules;
+
+  const propositionsArr: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    let generatedNumStr = '';
+
+    generatedNumStr += trainNoStr.at(0) ?? Math.floor(Math.random() * 10);
+    generatedNumStr += trainNoStr.at(1) ?? Math.floor(Math.random() * 10);
+
+    // Third number
+    generatedNumStr += thirdNumber ?? '';
+
+    // Remaining numbers
+    const rangeNums = minRange?.length ?? 3;
+
+    const randRange = Math.floor(
+      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
+    ).toString();
+
+    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
+      .fill('0')
+      .join('');
+
+    generatedNumStr += `${leadingZeros}${randRange}`;
+
+    const isNumberTaken =
+      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
+
+    if (!isNumberTaken) {
+      propositionsArr.push(generatedNumStr);
+    } else {
+      i--;
+    }
+
+    if (Number(randRange) > Number(maxRange)) break;
+  }
+
+  numberPropositions.value = propositionsArr;
+  chosenCategoryRules.value = rules;
+}
+
+const chosenCategory = computed(() => {
+  return availableCategories.value.at(chosenCategoryIndex.value);
+});
+
+const availableCategories = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+  const headVehicle = stockList.at(0)?.split('-')[0] ?? '';
+
+  let availableCategories: string[] = [];
+  let categoryTraction = 'E';
+
+  let vehicleTypesSet = new Set<string>();
+  let wagonsNamesSet = new Set<string>();
+  let cargoNamesSet = new Set<string>();
+
+  for (const stockName of stockList) {
+    const [vehicleName, ...cargoList] = stockName.split(':');
+
+    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+
+    if (!vehicleData) continue;
+
+    vehicleTypesSet.add(vehicleData.type);
+
+    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
+
+    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
+  }
+
+  let vehicleTypesArr = [...vehicleTypesSet];
+  let wagonsNamesArr = [...wagonsNamesSet];
+
+  // Traction
+  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
+  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
+  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
+  else categoryTraction = 'M';
+
+  // EMU / DMU - M*, R*, P*
+  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
+    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Only locos (up to 3) - LT, LP, LS
+  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
+    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
+    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
+  }
+  // Only locos (more than 3) - TH
+  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    availableCategories.push('TH');
+  }
+  // Loco(s) + passenger only wagons - M*, R*, E*, P*
+  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
+    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Loco(s) + cargo only / mixed wagons - T*, Z*
+  else {
+    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
+      availableCategories.push('TC', 'TD', 'TS');
+    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
+      availableCategories.push('ZU', 'ZN');
+    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
+      availableCategories.push('TM', 'TG', 'TS', 'TK');
+    } else {
+      availableCategories.push('TN', 'TR', 'TS', 'TK');
+    }
+  }
+
+  return availableCategories.map((c) => `${c}${categoryTraction}`);
+});
+
+watch(
+  computed(() => `${props.chosenTrain.trainNo}`),
+  () => {
+    chosenCategoryIndex.value = 0;
+    generateNumberPropositions();
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.driver-train-card {
+  padding: 1em;
+  background-color: var(--clr-view-bg);
+  border-radius: 0 0 0.5em 0.5em;
+}
+
+.train-stock-actions {
+  display: flex;
+  gap: 0.5em;
+}
+
+.propositions-container {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background-color: #111;
+}
+
+.categories-select {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.5em);
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+    background-color: #aaa;
+  }
+}
+
+.propositions-numbers {
+  margin-top: 1em;
+}
+
+.no-propositions {
+  margin-top: 1em;
+  color: #ccc;
+}
+
+@include responsive.smallScreen {
+  .propositions-container {
+    text-align: center;
+  }
+
+  .categories-select {
+    justify-content: center;
+  }
+}
+</style>
@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>

 <style lang="scss">
-@import '../../styles/variables';
-@import '../../styles/responsive';
+@use '../../styles/responsive';

 .button_content {
  display: flex;
@@ -38,5 +38,3 @@ export default defineComponent({
  }
 });
 </script>
-
-<style scoped></style>
@@ -43,7 +43,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 .card {
  position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
  overflow: auto;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .card {
    align-items: flex-start;
  }
@@ -9,7 +9,7 @@
          <transition mode="out-in" name="slider-anim" class="current-name">
            <span :key="displayingName">
              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-              {{ displayingName }}
+              <span class="text--donator">{{ displayingName }}</span>
            </span>
          </transition>
        </div>
@@ -45,7 +45,7 @@
          </template>

          <template v-slot:b2>
-            <b>{{ $t('donations.p4-b2') }}</b>
+            <b class="text--donator">{{ $t('donations.p4-b2') }}</b>
          </template>
        </i18n-t>
        <br />
@@ -150,8 +150,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .body {
  display: grid;
  grid-template-rows: 1fr auto;
@@ -200,30 +198,26 @@ a.discord {

 .actions-container > .action {
  &.paypal {
-    $btnColor: #254069;
-
-    background-color: $btnColor;
+    background-color: #254069;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
    }
  }

  &.coffee {
-    $btnColor: #009255;
-    background-color: $btnColor;
+    background-color: #009255;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
    }
  }

  &.exit {
-    $btnColor: #686868;
-    background-color: $btnColor;
+    background-color: #686868;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
    }
  }
 }
@@ -120,8 +120,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 .region-dropdown {
  display: flex;
  align-items: center;
@@ -182,7 +180,7 @@ li.option {
    background: none;

    &:focus + span {
-      color: $accentCol;
+      color: var(--clr-primary);
      font-weight: 800;
    }
  }
@@ -7,7 +7,12 @@
      @keypress="updateValue"
    />

-    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
+    <img
+      class="search-exit"
+      src="/images/icon-exit.svg"
+      alt="exit-icon"
+      @click="clearSearchValue"
+    />
  </div>
 </template>

@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
  emits: ['update:searchedValue', 'clearValue'],
  props: {
-    searchedValue: {
-      type: String,
-      required: true
-    },
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
+    searchedValue: { type: String, required: true },
+    updateOnInput: { type: Boolean, default: true },
+    titleToTranslate: { type: String, required: true },
+    clearValue: { type: Function }
  },

  setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
        emit('update:searchedValue', compSearchedValue.value);
    };

-    return {
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
+    return { compSearchedValue, updateValue, clearSearchValue };
  }
 });
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';

 .search {
  &-box {
@@ -78,7 +68,7 @@ export default defineComponent({

    margin: 0.5em 0 0.5em 0.5em;

-    @include smallScreen() {
+    @include responsive.smallScreen{
      width: 85%;
    }
  }
@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';

 export default defineComponent({
  props: {
-    dispatcherStatus: {
-      type: Number as PropType<Status.ActiveDispatcher | number>
-    },
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
+    isOnline: { type: Boolean }
  },
  mixins: [dateMixin],

@@ -22,20 +22,12 @@ export default defineComponent({
  components: { VehicleThumbnail },

  props: {
-    trainStockList: {
-      type: Array as PropType<string[]>,
-      required: true
-    },
-    tractionOnly: {
-      type: Boolean,
-      required: false
-    }
+    trainStockList: { type: Array as PropType<string[]>, required: true },
+    tractionOnly: { type: Boolean, required: false }
  },

  data() {
-    return {
-      apiStore: useApiStore()
-    };
+    return { apiStore: useApiStore() };
  },

  computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-
 .list-wrapper {
  display: flex;
  justify-content: center;
@@ -51,7 +51,6 @@ function onImageLoad() {

 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
  position: relative;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
@@ -234,9 +234,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/JournalStats.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/animations';
+@use '../../styles/journal-stats';
+@use '../../styles/responsive';

 .daily-stats {
  text-align: left;
@@ -265,7 +265,7 @@ ul.stats-list {
  gap: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  h3 {
    text-align: center;
  }
@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';

 export default defineComponent({
  props: {
-    entry: {
-      type: Object as PropType<API.DispatcherHistory.Data>,
-      required: true
-    },
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    }
+    entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
+    showExtraInfo: { type: Boolean, required: true }
  },

  components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
  emits: ['toggleShowExtraInfo'],

  data() {
-    return {
-      regions,
-      apiStore: useApiStore()
-    };
+    return { regions, apiStore: useApiStore() };
  },

  methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@use '../../../styles/responsive';
+@use '../../../styles/badge';

 .region-badge {
  padding: 0 0.25em;
@@ -207,7 +198,7 @@ export default defineComponent({
  border-radius: 1em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .entry-info {
    flex-direction: column;
    justify-content: center;
@@ -32,25 +32,25 @@
        </span>
      </div>

-      <hr class="section-separator" />
+      <hr class="section-separator" v-if="stats.issuedTimetables" />

-      <div class="info-stats">
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+      <div class="info-stats" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
          <span>{{ stats.issuedTimetables.count }}</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
        </span>
@@ -81,5 +81,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>
@@ -104,6 +104,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/JournalSection.scss';
+@use '../../../styles/journal-section';
 </style>
@@ -1,11 +1,16 @@
 <template>
  <section class="journal-header">
    <div class="journal-type-options">
-      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
+      <router-link
+        class="route-link"
+        active-class="route-link-active"
+        to="/journal/timetables"
+        exact
+      >
        {{ $t('journal.section-timetables') }}
      </router-link>
      &nbsp;&bull;&nbsp;
-      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
+      <router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
        {{ $t('journal.section-dispatchers') }}
      </router-link>
    </div>
@@ -39,8 +44,4 @@ export default defineComponent({});
  display: flex;
  justify-content: center;
 }
-
-.router-link.active {
-  color: gold;
-}
 </style>
@@ -33,31 +33,56 @@
          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
          <div class="search_content">
            <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date-from'" for="search-date">{{
-                $t(`options.search-${optionsType}-date`)
-              }}</label>
+              <!-- Train category select -->
+              <div v-if="propName.toString() == 'select-categoryCode'">
+                <label for="journalCategoryCode">{{ $t(`options.${propName}`) }}</label>

-              <div class="search-box">
-                <input
-                  class="search-input"
-                  v-model="searchersValues[propName]"
-                  @keydown.enter="searchConfirm"
-                  @focus="preventKeyDown = true"
-                  @blur="preventKeyDown = false"
-                  :placeholder="$t(`options.${propName}`)"
-                  :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
-                  :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
-                  :id="`${propName}`"
-                  :list="propName.toString()"
-                />
+                <div class="search-box">
+                  <select
+                    class="search-input"
+                    name="journalCategoryCode"
+                    id="journalCategoryCode"
+                    v-model="searchersValues[propName]"
+                  >
+                    <option value="">...</option>
+                    <option v-for="categoryName in allCategories" :value="categoryName">
+                      {{ categoryName }} - {{ getCategoryExplanation(categoryName) }}
+                    </option>
+                  </select>
+                </div>
+              </div>

-                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
-                  <img
-                    src="/images/icon-exit.svg"
-                    alt="exit-icon"
-                    @click="onInputClear(propName)"
+              <!-- Other inputs -->
+              <div v-else>
+                <label v-if="propName == 'search-date-from'" for="search-date">{{
+                  $t(`options.search-${optionsType}-date`)
+                }}</label>
+                
+                <div class="search-box">
+                  <input
+                    class="search-input"
+                    v-model="searchersValues[propName]"
+                    @keydown.enter="searchConfirm"
+                    @focus="preventKeyDown = true"
+                    @blur="preventKeyDown = false"
+                    :placeholder="$t(`options.${propName}`)"
+                    :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
+                    :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
+                    :id="`${propName}`"
+                    :list="propName.toString()"
                  />
-                </button>
+
+                  <button
+                    class="btn btn--action search-exit"
+                    v-if="!propName.toString().startsWith('search-date')"
+                  >
+                    <img
+                      src="/images/icon-exit.svg"
+                      alt="exit-icon"
+                      @click="onInputClear(propName)"
+                    />
+                  </button>
+                </div>
              </div>
            </div>
          </div>
@@ -117,10 +142,12 @@ import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { allCategories } from '../../data/trainNumberRules.json';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';

 export default defineComponent({
  emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
-  mixins: [keyMixin],
+  mixins: [keyMixin, trainCategoryMixin],

  props: {
    sorterOptionIds: {
@@ -152,6 +179,7 @@ export default defineComponent({
  data() {
    return {
      showOptions: false,
+      allCategories,

      driverSuggestions: [] as string[],
      dispatcherSuggestions: [] as string[],
@@ -300,6 +328,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown';
-@import '../../styles/dropdown_filters';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';
 </style>
@@ -79,14 +79,12 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/dropdown_filters.scss';
-@import '../../styles/variables.scss';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';

 .dropdown_wrapper.dropdown-align-right {
  left: auto;
  right: 0;
  max-width: 700px;
-  // max-width: 100%;
 }
 </style>
@@ -225,9 +225,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@use '../../../styles/responsive';
+@use '../../../styles/badge';

 .details-body {
  margin-top: 0.5em;
@@ -250,7 +249,7 @@ export default defineComponent({
  margin-top: 1em;

  button[data-checked='true'] {
-    color: $accentCol;
+    color: var(--clr-primary);
  }
 }

@@ -272,7 +271,7 @@ export default defineComponent({

  span:last-child {
    color: black;
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
    border-radius: 0 0.25em 0.25em 0;
  }
 }
@@ -300,7 +299,7 @@ hr {
  }
 }

-@include smallScreen() {
+@include responsive.smallScreen{
  .timetable-specs {
    justify-content: center;
  }
@@ -130,8 +130,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive';
-@import '../../../styles/badge';
+@use '../../../styles/responsive';
+@use '../../../styles/badge';

 .item-general {
  display: flex;
@@ -191,7 +191,7 @@ export default defineComponent({
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .item-general {
    flex-direction: column;
    justify-content: center;
@@ -59,7 +59,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';

 .entry-status {
  display: flex;
@@ -67,7 +67,7 @@ export default defineComponent({
  flex-wrap: wrap;
  gap: 0.5em;

-  @include smallScreen() {
+  @include responsive.smallScreen{
    justify-content: center;
  }
 }
@@ -187,7 +187,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/badge.scss';
+@use '../../../styles/badge';

 .entry-stops {
  word-wrap: break-word;
@@ -12,14 +12,6 @@
      <hr class="header-separator" />

      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span
-            >{{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}</span
-          >
-        </span>
-
        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
@@ -29,12 +21,43 @@
          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
        </span>
+      </div>
+
+      <hr class="section-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span>
+            {{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}
+
+            <template v-if="store.driverStatsData._count._all > 0">
+              ({{
+                (
+                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>

        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.distance') }}</span>
          <span>
            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+
+            <template v-if="store.driverStatsData._sum.routeDistance > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.currentDistance /
+                    store.driverStatsData._sum.routeDistance) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
          </span>
        </span>

@@ -43,6 +66,16 @@
          <span>
            {{ store.driverStatsData._sum.confirmedStopsCount }} /
            {{ store.driverStatsData._sum.allStopsCount }}
+
+            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.confirmedStopsCount /
+                    store.driverStatsData._sum.allStopsCount) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
          </span>
        </span>
      </div>
@@ -68,5 +101,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>
@@ -3,14 +3,14 @@
    <!-- General -->
    <EntryGeneral :timetable="timetableEntry" />

+    <!-- Route -->
+    <div class="entry-route">
+      <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
+    </div>
+
+    <hr />
+
    <div @click="toggleExtraInfo" style="cursor: pointer">
-      <!-- Route -->
-      <div class="entry-route">
-        <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
-      </div>
-
-      <hr />
-
      <!-- Status -->
      <EntryStatus :timetable="timetableEntry" />
    </div>
@@ -134,15 +134,20 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';

 .timetable-history-entry {
  background-color: #1a1a1a;
  padding: 1em;
 }

-@include smallScreen {
+.entry-route {
+  display: flex;
+}
+
+@include responsive.smallScreen{
  .entry-route {
+    justify-content: center;
    text-align: center;
  }
 }
@@ -107,10 +107,11 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalSection.scss';
-@import '../../../styles/animations.scss';
+@use '../../../styles/animations';
+@use '../../../styles/journal-section';
+@use '../../../styles/responsive';

-@include smallScreen {
+@include responsive.smallScreen{
  .journal_item-info {
    text-align: center;
  }
@@ -12,7 +12,8 @@ export namespace Journal {
    | 'search-dispatcher'
    | 'search-issuedFrom'
    | 'search-terminatingAt'
-    | 'search-via';
+    | 'search-via'
+    | 'select-categoryCode';

  export type TimetableSearchType = {
    [key in TimetableSearchKey]: string;
@@ -148,8 +148,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@use '../../styles/scenery-history-table';

 .scenery-dispatchers-history {
  height: 100%;
@@ -194,7 +194,7 @@ export default defineComponent({
  color: springgreen;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .journal-list > div {
    flex-direction: column;
    justify-content: center;
@@ -1,5 +1,13 @@
 <template>
  <section class="info-header">
+    <button
+      class="btn btn-return"
+      :title="$t('scenery.return-btn')"
+      @click="onReturnButtonClick"
+    >
+      <img src="/images/icon-back.svg" alt="return button" />
+    </button>
+
    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
      {{ stationName.replace(/_/g, ' ') }}
    </a>
@@ -12,40 +20,64 @@
  </section>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, PropType, ref } from 'vue';
 import { ActiveScenery, Station } from '../../typings/common';
+import { useRoute, useRouter } from 'vue-router';

-export default defineComponent({
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
+const route = useRoute();
+const router = useRouter();

-    stationName: {
-      type: String,
-      required: true
-    },
+const prevPath = ref('/');

-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+onMounted(() => {
+  prevPath.value = (route.meta['prevPath'] as string) ?? '/';
+});
+
+defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  stationName: {
+    type: String,
+    required: true
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
  }
 });
+
+function onReturnButtonClick() {
+  router.push(prevPath.value);
+}
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
+@use 'sass:color';

-.info-header {
-  margin-top: 1em;
+.btn-return {
+  $bgColor: #2b2b2b;
+  background-color: $bgColor;
+  margin-bottom: 0.5em;
+
+  img {
+    width: 2em;
+  }
+
+  &:hover {
+    background-color: color.adjust($color: $bgColor, $lightness: 15%);
+  }
 }

 .scenery-name {
  font-weight: bold;
  font-size: 3em;

+  text-align: center;
+
  text-transform: uppercase;
 }

@@ -59,4 +91,10 @@ export default defineComponent({
  color: #aaa;
  font-size: 1.2em;
 }
+
+@include responsive.smallScreen {
+  .scenery-name {
+    font-size: 2.5em;
+  }
+}
 </style>
@@ -6,8 +6,7 @@
      <SceneryInfoRoutes v-if="station" :station="station" />
      <SceneryInfoAuthors :station="station" />

-
-      <div style="margin: 2em 0; height: 2px; background-color: white"></div>
+      <div style="margin: 1em 0; height: 2px; background-color: white"></div>

      <!-- info dispatcher -->
      <SceneryInfoDispatcher :onlineScenery="onlineScenery" />
@@ -32,7 +31,7 @@ import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
-import SceneryInfoAuthors from "./SceneryInfo/SceneryInfoAuthors.vue";
+import SceneryInfoAuthors from './SceneryInfo/SceneryInfoAuthors.vue';

 import { ActiveScenery, Station } from '../../typings/common';

@@ -44,7 +43,7 @@ export default defineComponent({
    SceneryInfoAuthors,
    SceneryInfoUserList,
    SceneryInfoSpawnList,
-    SceneryInfoRoutes,
+    SceneryInfoRoutes
  },
  props: {
    station: {
@@ -59,8 +58,8 @@ export default defineComponent({
 </script>

 <style lang="scss">
-@import '../../styles/responsive.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/responsive';
+@use '../../styles/badge';

 h3.section-header {
  margin: 0.5em 0;
@@ -27,6 +27,4 @@ export default defineComponent({
    }
  }
 });
-</script>
-
-<style scoped></style>
+</script>
@@ -102,7 +102,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/icons.scss';
+@use '../../../styles/icons';

 .info-icons {
  display: flex;
@@ -44,6 +44,7 @@
            {{ route.routeName }}
          </span>
          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeSpeedExit" class="speed">| {{ route.routeSpeedExit }}</span>
          <span v-if="route.routeLength" class="length">
            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
@@ -118,7 +119,8 @@ export default defineComponent({

 <style lang="scss" scoped>
 .info-routes {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center;
  flex-direction: column;

@@ -53,8 +53,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
 ul {
  position: relative;
 }
@@ -18,7 +18,7 @@
        :key="train.id"
        :data-status="status"
      >
-        <router-link :to="train.driverRouteLocation" class="a-block">
+        <router-link :to="train.driverRouteLocation">
          <span class="user_train"> {{ train.trainNo }}</span>
          <span class="user_name">
            {{ train.driverName }}
@@ -13,12 +13,31 @@
          </span>
        </span>

-        <span class="header_links" v-if="station">
-          <a :href="pragotronHref" target="_blank" :title="$t('scenery.pragotron-link')">
+        <span class="header_links" v-if="station && onlineScenery">
+          <a
+            :href="generatorHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
+          >
+            <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
+          </a>
+
+          <a
+            :href="pragotronHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
+          >
            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
          </a>

-          <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
+          <a
+            :href="tabliceZbiorczeHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
+          >
            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
          </a>
        </span>
@@ -64,7 +83,7 @@
        </div>

        <router-link
-          class="timetable-item a-block"
+          class="timetable-item"
          v-else
          v-for="(row, i) in sceneryTimetables"
          :key="row.train.id + i"
@@ -74,18 +93,56 @@
          <span class="timetable-general">
            <span class="general-info">
              <div class="info-train">
-                <b
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="getCategoryExplanation(row.train.timetableData!.category)"
-                  class="text--primary tooltip-help"
-                >
-                  {{ row.train.timetableData!.category }}
-                </b>
-                <span>&nbsp;</span>
-                <b>{{ row.train.trainNo }}</b>
-                <span>&nbsp;&bull;&nbsp;</span>
-                <span>{{ row.train.driverName }}</span>
+                <!-- Cargo warnings & details badges -->
                <span
+                  class="train-badge twr"
+                  v-if="row.train.timetableData!.twr"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.TWR')"
+                >
+                  TWR
+                </span>
+
+                <span
+                  class="train-badge tn"
+                  v-if="row.train.timetableData!.hasDangerousCargo"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.TN')"
+                >
+                  TN
+                </span>
+
+                <span
+                  class="train-badge pn"
+                  v-if="row.train.timetableData!.hasExtraDeliveries"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.PN')"
+                >
+                  PN
+                </span>
+
+                <!-- Train info -->
+                <span>
+                  <b
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="
+                      getCategoryExplanation(row.train.timetableData!.category)
+                    "
+                    class="text--primary tooltip-help"
+                  >
+                    {{ row.train.timetableData!.category }}
+                  </b>
+
+                  <b>&nbsp;{{ row.train.trainNo }}</b>
+                </span>
+                <span>&bull;</span>
+                <span>{{ row.train.driverName }}</span>
+                <span>&bull;</span>
+                <b style="color: #ddd">{{ row.train.stockList[0] }}</b>
+
+                <!-- Train stop comments -->
+                <span
+                  class="stop-comments-icon"
                  v-if="row.checkpointStop.comments"
                  data-tooltip-type="BaseTooltip"
                  :data-tooltip-content="row.checkpointStop.comments"
@@ -256,6 +313,10 @@ export default defineComponent({
      return url;
    },

+    generatorHref() {
+      return `https://generator-td2.web.app/?sceneryId=${this.onlineScenery!.name}|${this.onlineScenery!.region}`;
+    },
+
    sceneryTimetables(): SceneryTimetableRow[] {
      if (!this.onlineScenery) return [];

@@ -327,9 +388,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/animations.scss';
+@use '../../styles/responsive';
+@use '../../styles/animations';
+@use '../../styles/badge';

 .scenery-timetable {
  height: 100%;
@@ -364,7 +425,7 @@ export default defineComponent({

 .header_links {
  display: flex;
-  gap: 0.5em;
+  gap: 0.25em;
  margin-left: 0.5em;
 }

@@ -436,7 +497,7 @@ export default defineComponent({

  &.current {
    font-weight: bold;
-    color: $accentCol;
+    color: var(--clr-primary);
  }
 }

@@ -446,21 +507,31 @@ export default defineComponent({

 .general-info {
  display: flex;
+  flex-direction: column;
  flex-wrap: wrap;
+}

-  .info-number {
-    color: $accentCol;
-  }
+.info-train {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+}

-  .info-route {
-    width: 100%;
-  }
+.info-train > .train-badge {
+  font-size: 0.85em;
+}

-  img {
-    height: 0.9em;
-    vertical-align: middle;
-    margin: 0 0.25em;
-  }
+.info-number {
+  color: var(--clr-primary);
+}
+
+.info-route {
+  width: 100%;
+}
+
+.stop-comments-icon > img {
+  width: 1.2em;
+  vertical-align: middle;
 }

 .schedule {
@@ -485,7 +556,7 @@ export default defineComponent({
      align-self: center;
      font-size: 0.9em;

-      color: $accentCol;
+      color: var(--clr-primary);

      &::after {
        content: '\027F6';
@@ -502,7 +573,7 @@ export default defineComponent({
  font-size: 0.85em;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .timetable-item {
    grid-template-columns: 1fr;
  }
@@ -188,8 +188,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@use '../../styles/scenery-history-table';

 .scenery-timetables-history {
  height: 100%;
@@ -2,11 +2,9 @@
  <div class="general-status">
    <span
      :class="computedScheduledTrain.status"
-      data-tooltip-type="HtmlTooltip"
-      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
      @click.prevent="() => {}"
+      v-html="computedScheduledTrain.stopStatusIndicator"
    >
-      {{ computedScheduledTrain.stopStatusIndicator }}
    </span>
  </div>
 </template>
@@ -28,48 +26,37 @@ export default defineComponent({
    computedScheduledTrain() {
      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;

-      const prevDepartureIndicator = prevElement?.departureRouteExt
-        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
-        : '---';
-
-      const nextArrivalIndicator = nextElement?.arrivalRouteExt
-        ? `(${nextElement.arrivalRouteExt}) ${nextElement.stationName}`
-        : `${currentElement.stationName}`;
-
-      let stopStatusDescription = '',
-        stopStatusIndicator = '';
+      let stopStatusIndicator = '';

      switch (status) {
        case StopStatus.ARRIVING:
-          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-arriving', {
-            prevStationName: prevElement?.stationName ?? '',
-            prevDepartureLine: prevElement?.departureRouteExt ?? ''
-          });
+          if (prevElement) {
+            stopStatusIndicator = this.$t('timetables.desc-arriving', {
+              prevStationName: prevElement?.stationName ?? '',
+              prevDepartureLine: prevElement?.departureRouteExt ?? ''
+            });
+          } else {
+            stopStatusIndicator = this.$t('timetables.desc-beginning');
+          }
          break;

        case StopStatus.ONLINE:
        case StopStatus.STOPPED:
          stopStatusIndicator = nextElement?.arrivalRouteExt
-            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
-            : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextElement?.arrivalRouteExt
            ? this.$t(`timetables.desc-${status}`, {
                nextStationName: nextElement?.stationName,
                nextArrivalLine: nextElement?.arrivalRouteExt
              })
-            : '';
+            : this.$t(`timetables.desc-end`);
          break;

        case StopStatus.DEPARTED:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-
          if (!nextElement?.stationName) {
-            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
+            stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
              nextStationName: currentElement.stationName
            });
          } else {
-            stopStatusDescription = this.$t('timetables.desc-departed', {
+            stopStatusIndicator = this.$t('timetables.desc-departed', {
              nextStationName: nextElement?.stationName ?? currentElement.stationName,
              nextArrivalLine: nextElement?.arrivalRouteExt
            });
@@ -78,16 +65,14 @@ export default defineComponent({
          break;

        case StopStatus.DEPARTED_AWAY:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed-away', {
+          stopStatusIndicator = this.$t('timetables.desc-departed-away', {
            nextStationName: nextElement?.stationName,
            nextArrivalLine: nextElement?.arrivalRouteExt
          });
          break;

        case StopStatus.TERMINATED:
-          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
-          stopStatusDescription = this.$t('timetables.desc-terminated');
+          stopStatusIndicator = this.$t('timetables.desc-terminated');
          break;

        default:
@@ -95,7 +80,6 @@ export default defineComponent({
      }
      return {
        ...this.sceneryTimetableRow,
-        stopStatusDescription,
        stopStatusIndicator
      };
    }
@@ -106,7 +90,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .general-status {
  margin-top: 0.5em;
-  cursor: help;

  span.arriving {
    color: #ccc;
@@ -114,17 +97,14 @@ export default defineComponent({

  span.departed {
    color: lime;
-    font-weight: bold;

    &-away {
-      font-weight: bold;
      color: #5ecc5e;
    }
  }

  span.stopped {
    color: #ffa600;
-    font-weight: bold;
  }

  span.online {
@@ -133,7 +113,6 @@ export default defineComponent({

  span.terminated {
    color: salmon;
-    font-weight: bold;
  }
 }
 </style>
@@ -66,8 +66,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 label {
  position: relative;
  user-select: none;
@@ -98,7 +96,7 @@ label {
    }

    &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
    }
  }
 }
@@ -379,10 +379,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-@import '../../styles/animations';
-@import '../../styles/variables';
+@use '../../styles/responsive';
+@use '../../styles/card';
+@use '../../styles/animations';

 h3.section-header {
  text-align: center;
@@ -412,11 +411,6 @@ h3.section-header {
 .card_controls {
  display: flex;
  gap: 0.5em;
-
-  input {
-    border-radius: 0.5em 0.5em 0 0;
-    height: 100%;
-  }
 }

 .card_content {
@@ -432,7 +426,7 @@ h3.section-header {
 .card_title {
  font-size: 2em;
  font-weight: 700;
-  color: $accentCol;
+  color: var(--clr-primary);

  text-align: center;
 }
@@ -453,7 +447,7 @@ h3.section-header {
    span {
      min-width: 120px;
      font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
    }

    button {
@@ -527,7 +521,7 @@ h3.section-header {
    }

    &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
    }
  }
 }
@@ -575,7 +569,7 @@ h3.section-header {
  margin-bottom: 1em;

  &-value {
-    color: $accentCol;
+    color: var(--clr-primary);
    padding: 0.1em 0.2em;
    text-align: center;
  }
@@ -604,14 +598,14 @@ h3.section-header {
      border-radius: 50%;

      background: white;
-      border: 3px solid $accentCol;
+      border: 3px solid var(--clr-primary);
      background-color: #333;

-      @include smallScreen() {
+      @include responsive.smallScreen {
        width: 15px;
        height: 15px;
        margin-top: -5px;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
      }
    }

@@ -622,14 +616,14 @@ h3.section-header {
      border-radius: 50%;

      background: white;
-      border: 4px solid $accentCol;
+      border: 4px solid var(--clr-primary);

      cursor: pointer;

-      @include smallScreen() {
+      @include responsive.smallScreen {
        width: 1em;
        height: 1em;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
      }
    }

@@ -659,7 +653,7 @@ h3.section-header {
  }
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .slider {
    display: flex;
    flex-wrap: wrap;
@@ -673,5 +667,9 @@ h3.section-header {
      text-align: center;
    }
  }
+
+  .card_controls > button > p {
+    display: none;
+  }
 }
 </style>
@@ -8,58 +8,106 @@

    <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
      <img src="/images/icon-stats.svg" alt="Open filters icon" />
-      <!-- {{ $t('train-stats.stats-button') }} -->
-      <span>STATYSTYKI</span>
+      <span>{{ $t('station-stats.stats-button') }}</span>
    </button>

    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showDropdown">
        <div>
-          <h1 class="text--primary">
-            <img src="/images/icon-stats.svg" alt="Open filters icon" />
-            {{ $t('train-stats.title') }}
+          <h1 class="stats-title text--primary">
+            <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
+            {{ $t('station-stats.title') }}
          </h1>

          <hr style="margin: 0.5em 0" />

-          <ul class="stats-list">
-            <li>
-              <span>
-                {{ $t('station-stats.u-factor') }}
-                <a
-                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-                  target="_blank"
-                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
-                  >(?)</a
-                >:
-              </span>
-              <b class="u-factor" :style="calculateFactorStyle()">
-                {{ uFactor.toFixed(2) }}
-              </b>
-            </li>
-            <li>
-              {{ $t('station-stats.avg-timetable-count') }}
-              <b>{{ avgTimetableCount.toFixed(2) }}</b>
-            </li>
-            <li>
-              {{ $t('station-stats.single-track-count') }}
-              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.double-track-count') }}
-              <b>{{ trackCount.twoWay }}</b>
-              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.cross-sceneries') }}
-              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
-              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
-              <b>{{ spawnCount.all }}</b> - ALL
-            </li>
-          </ul>
+          <div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>
+                  {{ $t('station-stats.u-factor') }}
+                  <a
+                    href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                    target="_blank"
+                    :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                    >(?)</a
+                  >:
+                </span>
+
+                <span>
+                  <b class="u-factor" :style="calculateFactorStyle()">
+                    {{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
+                  </b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.avg-timetable-count') }}</span>
+                <span>
+                  <b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.single-track-count') }}</span>
+                <span>
+                  <b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.double-track-count') }}</span>
+                <span>
+                  <b>{{ trackCount.twoWay }}</b> (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.cross-sceneries') }}</span>
+                <span>
+                  <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-all') }}</span>
+                <span>
+                  <b>{{ spawnCount.all }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-pas') }}</span>
+                <span>
+                  <b>{{ spawnCount.passenger }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-freight') }}</span>
+                <span>
+                  <b>{{ spawnCount.freight }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-loco') }}</span>
+                <span>
+                  <b>{{ spawnCount.loco }}</b>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="no-data" v-else>{{ $t('station-stats.no-stats') }}</div>
        </div>

        <div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -86,9 +134,9 @@ export default defineComponent({
    },

    calculateFactorStyle() {
-      if (this.uFactor == 0) return '';
+      if (this.uFactor <= 0) return '';

-      const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
+      const norm = Math.max(Math.min(this.uFactor / 2, 1), 0);
      const lerp = 120 * norm;

      return `color: hsl(${lerp}, 100%, 60%)`;
@@ -105,7 +153,7 @@ export default defineComponent({
        (train) => train.region == this.mainStore.region.id
      );

-      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
+      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : -1;
    },

    avgTimetableCount() {
@@ -118,7 +166,7 @@ export default defineComponent({
        return acc;
      }, 0);

-      if (regionSceneries.length == 0) return 0;
+      if (regionSceneries.length == 0) return -1;

      return timetableCountSum / regionSceneries.length;
    },
@@ -135,6 +183,8 @@ export default defineComponent({
          (acc, st) => {
            const { routes } = st.generalInfo!;

+            acc.all++;
+
            if (
              routes.single.filter((r) => !r.isInternal).length > 0 &&
              routes.double.filter((r) => !r.isInternal).length > 0
@@ -163,7 +213,8 @@ export default defineComponent({
            twoWay: 0,
            twoWayElectric: 0,
            crossTrack: 0,
-            crossTrackElectric: 0
+            crossTrackElectric: 0,
+            all: 0
          }
        );
    },
@@ -190,15 +241,18 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/dropdown';
+@use '../../styles/badge';
+@use '../../styles/responsive';

-h1 img {
+h1.stats-title img {
  vertical-align: text-bottom;
 }

-h3 {
-  margin: 0.5em 0;
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
 }

 .u-factor {
@@ -219,18 +273,17 @@ h3 {
  }
 }

-ul.stats-list {
-  list-style: disc;
-  padding-left: 1em;
-  margin-top: 1em;
-
-  & > li {
-    margin: 0.25em 0;
-  }
+.no-data {
+  font-size: 1.1em;
+  color: #ccc;
 }

-@include smallScreen {
-  .filter-button span {
+@include responsive.smallScreen {
+  h1.stats-title {
+    text-align: center;
+  }
+
+  .filter-button > span {
    display: none;
  }
 }
@@ -124,8 +124,8 @@
                data-tooltip-type="DonatorTooltip"
                :data-tooltip-content="$t('donations.dispatcher-message')"
              >
-                <img src="/images/icon-diamond.svg" alt="" />
-                {{ station.onlineInfo.dispatcherName }}
+                <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+                <span class="text--donator">&nbsp;{{ station.onlineInfo.dispatcherName }}</span>
              </b>

              <div v-else>
@@ -400,9 +400,10 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/icons.scss';
+@use '../../styles/responsive';
+@use '../../styles/icons';
+
+@use 'sass:color';

 $rowCol: #424242;

@@ -435,7 +436,7 @@ table {
  }

  thead tr {
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
  }

  thead th {
@@ -477,7 +478,7 @@ table {
    }

    padding: 0.5em 0.25em;
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
    white-space: pre-wrap;

    cursor: pointer;
@@ -504,13 +505,13 @@ tr,
  vertical-align: middle;

  &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
+    background-color: color.adjust($rowCol, $lightness: 5%);
    color: white;
  }

  &:hover,
  &:focus {
-    background-color: lighten($rowCol, 20);
+    background-color: color.adjust($rowCol, $lightness: 15%);
  }

  td {
@@ -524,7 +525,7 @@ tr,
      opacity: 0.2;
    }

-    @include smallScreen() {
+    @include responsive.smallScreen {
      margin: 0;
      padding: 0.3em 0.5em;
      font-size: 1em;
@@ -537,7 +538,7 @@ tr,
  max-width: 200px;

  &.default {
-    color: $accentCol;
+    color: var(--clr-primary);
  }

  &.nonPublic {
@@ -1,6 +1,6 @@
 <template>
  <div class="tooltip-content">
-    <img src="/images/icon-diamond.svg" alt="" />
+    <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
    <span>{{ tooltipStore.content }}</span>
  </div>
 </template>
@@ -20,7 +20,10 @@ export default defineComponent({

 <style lang="scss" scoped>
 .tooltip-content {
+  display: flex;
+  align-items: center;
  gap: 0.5em;
+  flex-wrap: wrap;

  padding: 0.5em;
  border-radius: 0.25em;
@@ -34,6 +37,5 @@ export default defineComponent({
 img {
  vertical-align: middle;
  height: 1em;
-  margin-right: 0.5em;
 }
 </style>
@@ -9,7 +9,7 @@

        <span
          class="train-badge twr"
-          v-if="train.timetableData?.TWR"
+          v-if="train.timetableData?.twr"
          data-tooltip-type="BaseTooltip"
          :data-tooltip-content="$t('warnings.TWR')"
        >
@@ -60,7 +60,7 @@
            data-tooltip-type="DonatorTooltip"
            :data-tooltip-content="$t('donations.driver-message')"
          >
-            {{ train.driverName }}
+            <span class="text--donator">{{ train.driverName }}&nbsp;</span>
            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
          </b>

@@ -156,7 +156,7 @@
      v-if="extended && train.timetableData && train.timetableData.warningNotes"
    >
      <div class="dangers-badges">
-        <div v-if="train.timetableData?.TWR">
+        <div v-if="train.timetableData?.twr">
          <div class="train-badge twr">TWR</div>
          - {{ $t('warnings.TWR') }}
        </div>
@@ -192,7 +192,6 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
-import { speedLimits } from '../../data/speedLimits';

 export default defineComponent({
  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -219,35 +218,52 @@ export default defineComponent({
    stockSpeedLimit() {
      let isPassenger = true;

-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName) => {
-        const vehicleData = this.apiStore.vehiclesData?.find(
-          (v) => v.name == stockName.split(':')[0]
-        );
+      // Check the whole consist speed limit
+      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
+        const [vehicleName, vehicleCargo] = stockName.split(':');
+
+        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);

        if (!vehicleData) return acc;
-        if (vehicleData.type == 'wagon-freight') isPassenger = false;

-        const vehicleSpeed = vehicleData.group.speed;
+        let vehicleSpeed = vehicleData.group.speed;
+
+        if (vehicleData.type == 'wagon-freight') {
+          isPassenger = false;
+
+          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
+            vehicleSpeed = vehicleData.group.speedLoaded;
+          }
+        }

        return Math.min(vehicleSpeed, acc);
      }, Infinity);

-      const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));
+      // Check the head vehicle speed limit
+      const headLocoName = this.train.stockList[0];
+      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);

-      if (speedLimits[headLoco] === undefined) return vehicleMaxSpeed;
+      // Omit speed check for head vehicle if there's no data for it
+      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
+        return vehicleMaxSpeed;

-      if (this.train.stockList.length == 1) return speedLimits[headLoco]['none'];
+      const massSpeeds =
+        headLocoVehicleData.group.massSpeeds[
+          this.train.stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
+        ];

-      const speedTable: Record<string, number> =
-        speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
+      // Omit speed check if there's no data on mass speeds
+      if (!massSpeeds) return vehicleMaxSpeed;

-      if (!speedTable) return vehicleMaxSpeed;
+      // Number type for locomotives alone
+      if (typeof massSpeeds === 'number') return massSpeeds;

-      const massKey = Object.keys(speedTable).findLast(
+      // Record type for passenger or cargo, find the closest range
+      const massKey = Object.keys(massSpeeds).findLast(
        (massKey) => this.train.mass >= Number(massKey)
      );

-      const massMaxSpeed = massKey ? speedTable[massKey] : Infinity;
+      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;

      return Math.min(massMaxSpeed, vehicleMaxSpeed);
    },
@@ -264,7 +280,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/badge.scss';
+@use '../../styles/badge';

 .image-warning {
  height: 1em;
@@ -297,6 +313,7 @@ export default defineComponent({
 .train-info {
  display: flex;
  flex-direction: column;
+  font-size: 1em;
  gap: 0.25em;

  background-color: #1a1a1a;
@@ -24,31 +24,26 @@
                @blur="preventKeyDown = false"
                :placeholder="$t(`options.search-train`)"
              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
              </button>
            </div>

            <div class="search-box">
-              <input
-                v-model="searchedDriver"
+              <select
                class="search-input"
-                id="driver-search"
-                name="driver-search"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-                :placeholder="$t(`options.search-driver`)"
-              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Driver search clear icon"
-                  @click="onInputClear('driver')"
-                />
+                name="active-trains"
+                id="active-trains"
+                v-model="searchedDriver"
+              >
+                <option value="">{{ $t('options.select-driver') }}</option>
+                <option v-for="driverName in activeDriverNames" :value="driverName">
+                  {{ driverName }}
+                </option>
+              </select>
+
+              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
              </button>
            </div>
          </div>
@@ -101,6 +96,7 @@
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter, TrainFilterSection } from './typings';
+import { useMainStore } from '../../store/mainStore';

 export default defineComponent({
  mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
  data() {
    return {
      showOptions: false,
+      store: useMainStore(),
      lastSelectedFilter: null as TrainFilter | null,
      TrainFilterSection
    };
@@ -141,6 +138,16 @@ export default defineComponent({
        id,
        value: this.$t(`options.sort-${id}`)
      }));
+    },
+
+    activeDriverNames() {
+      const driverNameSet = new Set<string>();
+
+      this.store.trainList.forEach((train) => {
+        driverNameSet.add(train.driverName);
+      });
+
+      return [...driverNameSet].sort((a, b) => a.localeCompare(b));
    }
  },

@@ -195,8 +202,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';

 .search_content > div {
  margin: 0.5em auto;
@@ -57,7 +57,14 @@
                  <span>{{ stop.departureLine }}</span>

                  <span v-if="stop.departureLineInfo">
-                    <span> | {{ stop.departureLineInfo.routeSpeed }}</span>
+                    <span>
+                      |
+                      {{
+                        stop.departureLineInfo.routeSpeedExit
+                          ? `${stop.departureLineInfo.routeSpeedExit} (${stop.departureLineInfo.routeSpeed})`
+                          : stop.departureLineInfo.routeSpeed
+                      }}</span
+                    >

                    <img
                      :src="
@@ -85,13 +92,13 @@
                </div>

                <div
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                  class="scenery-change-name"
                >
-                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span>{{ stop.nextPointRef.sceneryName }}</span>

                  <i
-                    v-if="!scheduleStops[i + 1].isSceneryOnline"
+                    v-if="!stop.nextPointRef.isSceneryOnline"
                    class="fa-solid fa-ban fa-sm"
                    data-tooltip-type="BaseTooltip"
                    :data-tooltip-content="$t('app.tooltip-scenery-offline')"
@@ -101,30 +108,33 @@

                <div
                  class="scenery-route"
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                >
-                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+                  <span> {{ stop.nextPointRef.arrivalLine }}</span>

-                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>
+                  <span v-if="stop.nextPointRef.arrivalLineInfo">
+                    <span> | {{ stop.nextPointRef.arrivalLineInfo!.routeSpeed }}</span>
+                    <span v-if="stop.nextPointRef.arrivalLineInfo!.routeSpeedExit"
+                      >({{ stop.nextPointRef.arrivalLineInfo!.routeSpeedExit }})</span
+                    >

                    <img
                      :src="
-                        scheduleStops[i + 1].arrivalLineInfo?.isElectric
+                        stop.nextPointRef.arrivalLineInfo?.isElectric
                          ? '/images/icon-catenary.svg'
                          : '/images/icon-we4a.png'
                      "
                      data-tooltip-type="BaseTooltip"
                      :data-tooltip-content="
                        $t(
-                          `trains.${!scheduleStops[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
+                          `trains.${!stop.nextPointRef.arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
                        )
                      "
                      width="14"
                    />

                    <img
-                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
+                      v-if="stop.nextPointRef.arrivalLineInfo!.isRouteSBL"
                      src="/images/icon-sbl-transparent.svg"
                      width="14"
                      data-tooltip-type="BaseTooltip"
@@ -228,7 +238,7 @@ export default defineComponent({
        departureLineInfo = pathData.departureLineData;
      }

-      for (const stop of followingStops) {
+      followingStops.forEach((stop, i) => {
        let isExternal = false;

        if (stop.arrivalLine === currentPath.arrivalRouteExt) {
@@ -287,7 +297,9 @@ export default defineComponent({
          status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed',

          sceneryName: currentPath.stationName,
-          isSceneryOnline: pathData?.isOnline ?? false
+          isSceneryOnline: pathData?.isOnline ?? false,
+
+          nextPointRef: null
        };

        if (internalRouteInfo) {
@@ -309,6 +321,11 @@ export default defineComponent({

        stopRows.push(rowData);

+        // Assign this row data object to the last one as reference
+        if (i != 0) {
+          stopRows[i - 1].nextPointRef = rowData;
+        }
+
        if (stop.departureLine === currentPath.departureRouteExt) {
          // Reverse search for last scenery checkpoint
          if (pathData?.departureLineData) {
@@ -328,7 +345,7 @@ export default defineComponent({
          currentPath = timetablePath[++currentPathIndex];
          pathData = this.getPathSceneryData(currentPath);
        }
-      }
+      });

      return stopRows;
    },
@@ -367,7 +384,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 $barClr: #b1b1b1;
 $confirmedClr: #4ae24a;
@@ -14,7 +14,7 @@
    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showOptions">
        <h1 class="text--primary">
-          <img src="/images/icon-stats.svg" alt="Open filters icon" />
+          <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
          {{ $t('train-stats.title') }}
        </h1>

@@ -80,7 +80,11 @@
            <h3>{{ $t('train-stats.top-units') }}</h3>

            <transition-group tag="ul" name="stats-anim">
-              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li
+                class="badge stat-badge"
+                v-for="top in stats.topUnits.slice(0, 7)"
+                :key="top.name"
+              >
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
@@ -221,9 +225,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/badge.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/dropdown';
+@use '../../styles/badge';
+@use '../../styles/responsive';

 h1 img {
  vertical-align: text-bottom;
@@ -248,9 +252,13 @@ h3 {
  max-width: 600px;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .no-data {
    text-align: center;
  }
+
+  h1 {
+    text-align: center;
+  }
 }
 </style>
@@ -19,7 +19,7 @@
        >)
      </div>

-      <transition-group name="list-anim" tag="ul">
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
      </transition-group>
    </div>
@@ -93,8 +93,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/animations.scss';
+@use '../../styles/responsive';
+@use '../../styles/animations';

 .train-table {
  height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
  overflow-x: hidden;
 }

+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
  text-align: center;

@@ -1,29 +1,27 @@
 <template>
-  <li class="train-item">
-    <router-link class="a-block" :to="train.driverRouteLocation">
-      <div class="item-wrapper">
-        <TrainInfo :train="train" />
+  <router-link :to="train.driverRouteLocation" class="train-item">
+    <div class="item-wrapper">
+      <TrainInfo :train="train" />

-        <div class="train-stats">
-          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+      <div class="train-stats">
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+        <div>
+          <span>{{ train.speed }}km/h</span>

          <div>
-            <span>{{ train.speed }}km/h</span>
-
-            <div>
-              <span> {{ train.length }}m</span>
+            <span> {{ train.length }}m</span>
+            &bull;
+            <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+            <span v-if="train.stockList.length > 1">
              &bull;
-              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-              <span v-if="train.stockList.length > 1">
-                &bull;
-                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              </span>
-            </div>
+              {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+            </span>
          </div>
        </div>
      </div>
-    </router-link>
-  </li>
+    </div>
+  </router-link>
 </template>

 <script setup lang="ts">
@@ -41,9 +39,10 @@ defineProps({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 .train-item {
+  display: block;
  background-color: #1a1a1a;
  margin-bottom: 1em;
  width: 100%;
@@ -67,7 +66,7 @@ defineProps({
  line-height: 1.5em;
 }

-@include smallScreen() {
+@include responsive.smallScreen {
  .item-wrapper {
    grid-template-columns: 1fr;
    gap: 1em 0;
@@ -196,4 +196,6 @@ export interface TrainSchedulePoint {
  isSBL: boolean;
  sceneryName: string | null;
  isSceneryOnline: boolean;
+
+  nextPointRef: TrainSchedulePoint | null;
 }
@@ -1,158 +0,0 @@
-export const speedLimits: Record<string, any> = {
-  EU07: {
-    passenger: {
-      '650000': 125
-    },
-    cargo: {
-      '2000000': 70
-    },
-    none: 110
-  },
-  '4E': {
-    passenger: {
-      '650000': 125
-    },
-    cargo: {
-      '2000000': 70
-    },
-    none: 110
-  },
-  EU07E: {
-    passenger: {
-      '650000': 125
-    },
-    cargo: {
-      '2000000': 70
-    },
-    none: 110
-  },
-  EP07: {
-    passenger: {
-      '650000': 125
-    },
-    cargo: null,
-    none: 110
-  },
-  EP08: {
-    passenger: {
-      '650000': 140
-    },
-    cargo: null,
-    none: 110
-  },
-  EP09: {
-    passenger: {
-      '650000': 160
-    },
-    cargo: null,
-    none: 160
-  },
-  ET22: {
-    passenger: {
-      '650000': 125
-    },
-    cargo: {
-      '1200000': 100,
-      '1800000': 90,
-      '2500000': 80,
-      '3100000': 70
-    },
-    none: 100
-  },
-  '201E': {
-    passenger: {
-      '650000': 125
-    },
-    cargo: {
-      '1200000': 100,
-      '3100000': 70
-    },
-    none: 125
-  },
-  ET41: {
-    passenger: {
-      '700000': 125
-    },
-    cargo: {
-      '4000000': 70,
-      '3500000': 80,
-      '2500000': 90,
-      '2000000': 100
-    },
-    none: 110
-  },
-  SM42: {
-    passenger: {
-      '95000': 90,
-      '200000': 80,
-      '300000': 70,
-      '450000': 60,
-      '750000': 50,
-      '1130000': 40,
-      '1720000': 30,
-      '2400000': 20
-    },
-    cargo: {
-      '95000': 90,
-      '200000': 80,
-      '300000': 70,
-      '450000': 60,
-      '750000': 50,
-      '1130000': 40,
-      '1720000': 30,
-      '2400000': 20
-    },
-    none: 90
-  },
-  M62: {
-    passenger: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    cargo: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    none: 100
-  },
-  ST44: {
-    passenger: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    cargo: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    none: 100
-  },
-  CTLR4C: {
-    passenger: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    cargo: {
-      '500000': 100,
-      '800000': 80,
-      '1200000': 60,
-      '2000000': 40,
-      '3000000': 20
-    },
-    none: 100
-  }
-};
@@ -0,0 +1,95 @@
+{
+    "allCategories": [			
+      "ROE", "ROJ", "ROS", "ROM",
+      "RPE", "RPJ", "RPS", "RPM", 
+      "RME", "RMJ", "RMS", "RMM", 
+      "RAE", "RAJ", "RAS", "RAM", 
+      "MPE", "MPJ", "MPS", "MPM",
+      "MME", "MMJ", "MMS", "MMM",
+      "MOE", "MOJ", "MOS", "MOM",
+      "MHE", "MHJ", "MHS",
+      "EIE", "EIS", 
+      "ENE", "ENS", 
+      "ECE", "ECS", 
+      "PWE", "PWM", "PWJ", "PWS", 
+      "PXE", "PXM", "PXJ", "PXS", 
+      "TCE", "TCS", 
+      "TDE", "TDS", 
+      "TGE", "TGS", 
+      "TKE", "TKS", 
+      "TME", "TMS", 
+      "TNE", "TNS", 
+      "TRE", "TRS", 
+      "TSE", "TSS",
+      "THE", "THS",
+      "LPE", "LPS",
+      "LTE", "LTS",
+      "LSS",
+      "LZE", "LZS", 
+      "ZNE", "ZNS",
+      "ZUE", "ZUS"
+    ],
+    "regionNumbers": {
+      "Warszawa (1)": 1,
+      "Lublin (2)": 2,
+      "Kraków (3)": 3,
+      "Sosnowiec (4)": 4,
+      "Gdańsk (5)": 5,
+      "Wrocław (6)": 6,
+      "Poznań (7)": 7,
+      "Szczecin (8)": 8,
+      "Rezerwa (9)": 9
+    },
+    "sameRegions": {
+      "Losowy": [
+        10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96,
+        66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
+      ],
+      "Warszawa (1)": [10, 11, 19, 91, 93, 97, 99],
+      "Lublin (2)": [20, 22, 29],
+      "Kraków (3)": [30, 33, 39],
+      "Sosnowiec (4)": [40, 44, 49, 94],
+      "Gdańsk (5)": [50, 55, 59, 90, 95, 96],
+      "Wrocław (6)": [66, 60, 69],
+      "Poznań (7)": [77, 70, 79],
+      "Szczecin (8)": [88, 80],
+      "Rezerwa (9)": [89, 92, 98]
+    },
+    "categoriesRules": {
+      "EI": [null, "00", "99"],
+      "EC": [null, "000", "049"],
+      "EN": [null, "000", "049"],
+  
+      "RO": [null, "200", "999"],
+      "RP": [null, "050", "169"],
+      "RM": [null, "200", "999"],
+      "RA": [null, "200", "999"],
+  
+      "MO": [null, "200", "999"],
+      "MP": [null, "050", "169"],
+      "MM": [null, "001", "049"],
+      "MH": [null, "170", "199"],
+  
+      "PW": ["6", "000", "899"],
+      "PX": ["6", "000", "899"],
+  
+      "TM": ["4", "000", "899"],
+      "TN": ["3", "000", "899"],
+      "TK": ["3", "000", "899"],
+      "TD": ["2", "000", "899"],
+      "TG": ["1", "000", "899"],
+      "TR": ["1", "000", "899"],
+      "TC": ["0", "000", "899"],
+      "TS": ["5", "000", "899"],
+      "TH": ["5", "000", "899"],
+  
+      "LT": ["5", "000", "899"],
+      "LP": ["6", "000", "899"],
+      "LS": ["9", "000", "899"],
+      "LZ": ["9", "000", "899"],
+  
+      "ZN": ["9", "000", "899"],
+      "ZU": ["9", "000", "899"]
+    }
+  }
+  
@@ -1,4 +1,28 @@
 {
+  "welcome": {
+    "title": "Welcome to Stacjownik!",
+    "app-desc": "{b1} is a web tool made for {link}, which main goal is to assist in-game dispatchers and drivers on their duties. Here you can find who is currently online and on what scenery, find a train driver or browse the journal, which contains a history of past timetables and dispatcher duty.",
+    "app-desc-b1": "Stacjownik",
+    "sceneries-header": "Sceneries",
+    "sceneries-desc": "Under the {b1} tab, you will find information about the dispatchers and sceneries they currently occupy. You can also browse all available sceneries in the simulator (in the filters, check the “Free” option to show the rest of the unoccupied ones) and filter them by various aspects, such as control types, additional software, signaling types, required duty level or types of routes. Click on the corresponding scenery in the table to show its details.",
+    "sceneries-desc-b1": "Sceneries",
+    "trains-header": "Trains",
+    "trains-desc": "The {b1} tab contains a list of active drivers and timetables that are currently realized on the selected server (server selection is at the top of the page, next to the counters). The list can be filtered and sorted, taking into account the most important criteria, such as driver name, train number or timetable details. You can also click on the train to show additional information.",
+    "trains-desc-b1": "Trains",
+    "journal-header": "Journal",
+    "journal-desc": "The {b1} is a tab where you can find dispatcher duty and timetables history (currently only from the main PL1 game server). You can also search for a particular player's history using additional filters.",
+    "journal-desc-b1": "Journal",
+    "other-apps": "Also check out other apps designed to make TD2 gameplay easier:",
+    "pojazdownik-desc": "online rolling stock editor",
+    "generator-desc": "graphical manager of train orders",
+    "srjp-desc": "Polish working train timetable",
+    "donation-info": "If you appreciate the Stacjownik project as well as other applications, please consider supporting it financially - click the button with {icon1} to learn more!",
+    "donation-info-icon1-text": "the diamond icon",
+    "discord-info": "I also invite you to the official {discord}, where you will find a dedicated Stacjobot, with which you can search for additional data from the simulator, unavailable on this site!",
+    "discord-info-link-text": "Stacjownik Discord server",
+    "bottom-text": "Enjoy!\n~Spythere",
+    "button-confirm": "Start using the app!"
+  },
  "donations": {
    "button-title": "TOSS A COIN",
    "header": "Toss a coin to Stacjownik!",
@@ -50,7 +74,9 @@
    "migration-confirm": "Roger that!",
    "offline": "App is in the offline mode!",
    "tooltip-driver-offline": "Driver is offline",
-    "tooltip-scenery-offline": "Scenery is offline"
+    "tooltip-scenery-offline": "Scenery is offline",
+    "pojazdownik-link-content": "POJAZDOWNIK",
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
  },
  "footer": {
    "discord": "Stacjownik Discord server"
@@ -58,7 +84,7 @@
  "categories": {
    "EI": "domestic express",
    "EC": "international express",
-    "EN": "domestic night express",
+    "EN": "international night express",
    "MP": "intervoivodeship bullet",
    "MO": "intervoivodeship regio",
    "MM": "international bullet",
@@ -157,8 +183,8 @@
    "sort-title": "SORT BY:",
    "filter-title": "FILTER BY:",
    "search-title": "SEARCH:",
-    "search-train-no": "Train no. / #",
-    "search-train": "Train no.",
+    "search-train": "Train no. / #",
+    "select-driver": "Choose a driver...",
    "search-driver": "Driver name",
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name / #",
@@ -170,6 +196,7 @@
    "search-dispatchers-date": "Service date (from / to)",
    "search-date-from": "Date (UTC+2 / CEST)",
    "search-date-to": "Date (UTC+2 / CEST)",
+    "select-categoryCode": "Train category",
    "sort-mass": "mass",
    "sort-speed": "speed",
    "sort-length": "length",
@@ -332,13 +359,19 @@
    "active-filters": "Attention! You got active filters!"
  },
  "station-stats": {
+    "title": "ONLINE SCENERIES STATS",
+    "stats-button": "STATISTICS",
    "u-factor": "U-factor",
    "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average count of scenery timetables:",
+    "avg-timetable-count": "TT average:",
    "single-track-count": "Single track routes:",
    "double-track-count": "Double track routes:",
-    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
-    "open-spawns": "Open spawns:"
+    "cross-sceneries": "Cross-track sceneries",
+    "open-spawns-all": "Spawns (ALL):",
+    "open-spawns-pas": "Spawns (PAS):",
+    "open-spawns-freight": "Spawns (TOW):",
+    "open-spawns-loco": "Spawns (LOK):",
+    "no-stats": "No statistics available for the current region!"
  },
  "trains": {
    "no-trains": "No trains to show here!",
@@ -381,20 +414,26 @@
    "timeout": "An error occured while trying to refresh SWDR timetable data!",
    "driver-journal-link": "DRIVER JOURNAL",
    "driver-srjp-link": "SRJP",
-    "driver-return-link": "GO BACK",
+    "driver-return-link": "RETURN",
    "driver-not-found-header": "Train not found! :/",
    "driver-not-found-desc-1": "This train has already been terminated, changed its number or is offline.",
    "driver-not-found-desc-2": "You can browse timetable history in the",
    "driver-not-found-journal": "TIMETABLES JOURNAL",
    "driver-not-found-others": "Player {driver} is online as:",
-    "driver-not-found-return": "GO BACK TO THE MAIN SITE",
+    "driver-not-found-return": "RETURN TO THE MAIN SITE",
    "stock-copy": "COPY THE STOCK",
+    "number-propositions": "PROPOSE NUMBER",
    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
-    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/"
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
+    "number-propositions-header": "Generate number examples for selected category:",
+    "number-propositions-third-number": "Third digit:",
+    "number-propositions-last-nums": "{count} last digits from the range of:",
+    "number-propositions-title": "Propositions:",
+    "number-propositions-empty": "No propositions available for the chosen category! :/"
  },
  "train-stats": {
    "stats-button": "STATISTICS",
-    "title": "STATISTICS ONLINE",
+    "title": "ONLINE TRAINS STATS",
    "timetable-count": "ACTIVE TIMETABLES",
    "avg-speed": "AVG SPEED",
    "avg-timetable": "AVG TIMETABLE",
@@ -504,7 +543,7 @@
    "no-users": "NO ACTIVE PLAYERS",
    "no-spawns": "NO OPEN SPAWNS",
    "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "Return to main site",
+    "return-btn": "BACK TO THE LAST SITE",
    "history-btn": "View the dispatcher history",
    "info-btn": "Return to the scenery view",
    "authors-title": "Scenery author | Scenery authors",
@@ -512,7 +551,7 @@
    "lines-title": "Real lines",
    "project-title": "Project name",
    "additional-tools-title": "Additional tools",
-    "one-way-routes": "Signle track routes",
+    "one-way-routes": "Single track routes",
    "two-way-routes": "Double track routes",
    "no-data": "No available data about this scenery",
    "option-active-timetables": "Active timetables",
@@ -529,8 +568,9 @@
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
    "history-list-empty": "No recorded scenery history!",
    "forum-topic": "Official {name} forum topic",
+    "gnr-link": "Train orders generator",
    "pragotron-link": "Timetable pallet board",
-    "tablice-link": "Timetable summary board (by Thundo)",
+    "tablice-link": "Timetable summary board <br> (by Thundo)",
    "bottom-info": "Show full history in the Journal tab",
    "btn-show-internal-routes": "Show internal routes",
    "btn-hide-internal-routes": "Hide internal routes"
@@ -549,15 +589,16 @@
    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
    "terminates": "TERMINATES\nHERE",
-    "from": "FROM",
-    "to": "TO",
-    "desc-arriving": "The train is not here yet.\nIt's going to come from: <b>{prevStationName} (route {prevDepartureLine})</b>",
-    "desc-online": "The train is at the station.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-stopped": "The train is at the station and is stopped.\nIt's going to leave towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-next-arrival": "Leaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed-ends": "The train is at the station and it's been departed.\nLeaves towards station: <b>{nextStationName}</b>",
-    "desc-departed-away": "The train has been departed to:\n<b>{nextStationName} (route {nextArrivalLine})</b>",
+    "from": "Arrives from",
+    "to": "Departs to",
+    "desc-beginning": "The train begins here",
+    "desc-arriving": "<i>Arrives from: <b>{prevStationName} ({prevDepartureLine})</b></i>",
+    "desc-online": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-stopped": "On scenery - stopped / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-next-arrival": "On scenery / <i>direction: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-departed": "On scenery / <i>departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-departed-ends": "On scenery / <i>departed to: <b>{nextStationName}</b></i>",
+    "desc-departed-away": "<i>Departed to: <b>{nextStationName} ({nextArrivalLine})</b></i>",
    "desc-end": "The train terminates here",
    "desc-terminated": "The train has been terminated"
  },
@@ -1,4 +1,28 @@
 {
+  "welcome": {
+    "title": "Witaj na Stacjowniku!",
+    "app-desc": "{b1} to aplikacja stworzona dla symulatora {link}, której celem jest wspomaganie dyżurnego ruchu i maszynisty. Możesz sprawdzić tutaj kto i na jakiej scenerii obecnie pełni służbę, znaleźć maszynistę lub przejrzeć dziennik, który zawiera historię przeszłych dyżurów i rozkładów jazdy.",
+    "app-desc-b1": "Stacjownik",
+    "sceneries-header": "Scenerie",
+    "sceneries-desc": "W zakładce {b1} znajdziesz informacje o dyżurnych ruchu pełniących służby na wybranych sceneriach. Możesz również przeglądać wszystkie dostępne scenerie w symulatorze (w filtrach należy zaznaczyć opcję \"Wolna\", aby pokazać resztę niezajętych) i filtrować je pod względem wielu kryteriów, takich jak sterowanie, dodatkowe oprogramowanie, sygnalizacja, wymagany poziom dyżurnego czy szlaki. Aby wyświetlić detale danej scenerii, kliknij na nią w tabelce.",
+    "sceneries-desc-b1": "Scenerie",
+    "trains-header": "Pociągi",
+    "trains-desc": " Zakładka {b1} zawiera listę aktywnych maszynistów i rozkładów jazdy, które są obecnie realizowane na wybranym serwerze (wybór serwera znajduje się na górze strony). Listę można filtrować i sortować uwzględniając najważniejsze kryteria, takie jak nazwa maszynisty, numer pociągu lub detale rozkładu jazdy. Możesz również kliknąć na dany pociąg, aby wyświetlić dodatkowe informacje.",
+    "trains-desc-b1": "Pociągi",
+    "journal-header": "Dziennik",
+    "journal-desc": "{b1} to zakładka, w której znajdziesz historię dyżurów i rozkładów jazdy, obecnie jedynie z głównego serwera rozgrywki PL1. Możesz także wyszukać historię danego użytkownika używając dodatkowych filtrów.",
+    "journal-desc-b1": "Dziennik",
+    "other-apps": "Sprawdź także inne aplikacje stworzone z myślą ułatwienia rozgrywki w TD2:",
+    "pojazdownik-desc": "edytor składów online",
+    "generator-desc": "graficzny menadżer rozkazów pisemnych",
+    "srjp-desc": "służbowy rozkład jazdy pociągu",
+    "donation-info": "Jeśli doceniasz projekt Stacjownika jak i inne aplikacje mojego autorstwa, rozważ jego wsparcie finansowe - kliknij przycisk z {icon1}, aby dowiedzieć się więcej!",
+    "donation-info-icon1-text": "ikoną diamentu",
+    "discord-info": "Zapraszam także na oficjalnego {discord}, gdzie znajdziesz dedykowanego Stacjobota, za pomocą którego możesz wyszukiwać dodatkowe dane z symulatora niedostępne na tej stronie",
+    "discord-info-link-text": "Discorda Stacjownika",
+    "bottom-text": "Miłego korzystania\n~Spythere",
+    "button-confirm": "Zacznij korzystać z aplikacji!"
+  },
  "donations": {
    "button-title": "GROSZA DAJ",
    "header": "Grosza daj Stacjownikowi!",
@@ -47,7 +71,9 @@
    "no-result": "Brak wyników o podanych kryteriach!",
    "offline": "Aplikacja w trybie offline!",
    "tooltip-driver-offline": "Maszynista offline",
-    "tooltip-scenery-offline": "Sceneria offline"
+    "tooltip-scenery-offline": "Sceneria offline",
+    "pojazdownik-link-content": "POJAZDOWNIK",
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
  },
  "footer": {
    "discord": "Serwer Discord Stacjownika"
@@ -55,7 +81,7 @@
  "categories": {
    "EI": "ekspres krajowy",
    "EC": "ekspres międzynarodowy",
-    "EN": "ekspres krajowy nocny",
+    "EN": "ekspres międzynarodowy nocny",
    "MP": "międzywojewódzki pospieszny",
    "MO": "międzywojewódzki osobowy",
    "MM": "międzynarodowy pospieszny",
@@ -154,9 +180,9 @@
    "sort-title": "SORTUJ WG:",
    "filter-title": "FILTRUJ WG:",
    "search-title": "SZUKAJ:",
-    "search-train-no": "Nr pociągu",
    "search-train": "Nr pociągu / #",
    "search-driver": "Nick maszynisty",
+    "select-driver": "Wybierz maszynistę...",
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii / #",
    "search-author": "Nick autora rozkładu jazdy",
@@ -167,6 +193,7 @@
    "search-dispatchers-date": "Data służby (od / do)",
    "search-date-from": "Data (UTC+2 / CEST)",
    "search-date-to": "Data (UTC+2 / CEST)",
+    "select-categoryCode": "Kategoria pociągu",
    "sort-routeDistance": "kilometraż",
    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
@@ -328,13 +355,19 @@
    "active-filters": "Uwaga! Masz obecnie aktywne filtry!"
  },
  "station-stats": {
+    "title": "STATYSTYKI AKTYWNYCH SCENERII",
+    "stats-button": "STATYSTYKI",
    "u-factor": "Współczynnik Ugla",
    "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
+    "avg-timetable-count": "Średnia RJ:",
    "single-track-count": "Szlaki jednotorowe:",
    "double-track-count": "Szlaki dwutorowe:",
-    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
-    "open-spawns": "Otwarte spawny:"
+    "cross-sceneries": "Scenerie przejściowe:",
+    "open-spawns-all": "Spawny (ALL):",
+    "open-spawns-pas": "Spawny (PAS):",
+    "open-spawns-freight": "Spawny (TOW):",
+    "open-spawns-loco": "Spawny (LOK):",
+    "no-stats": "Brak statystyk online dla wybranego serwera!"
  },
  "trains": {
    "no-trains": "Brak pociągów do wyświetlenia!",
@@ -376,12 +409,18 @@
    "driver-not-found-others": "Gracz {driver} jest online jako:",
    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
    "stock-copy": "SKOPIUJ SKŁAD",
+    "number-propositions": "ZAPROPONUJ NUMER",
    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
-    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
+    "number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
+    "number-propositions-third-number": "Trzecia cyfra:",
+    "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
+    "number-propositions-title": "Propozycje:",
+    "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
  },
  "train-stats": {
    "stats-button": "STATYSTYKI",
-    "title": "STATYSTYKI ONLINE",
+    "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
    "timetable-count": "AKTYWNE RJ",
    "avg-speed": "ŚREDNIA PRĘDKOŚĆ",
    "avg-timetable": "ŚREDNI RJ",
@@ -490,7 +529,7 @@
    "no-users": "BRAK AKTYWNYCH GRACZY",
    "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "Wróć na stronę główną",
+    "return-btn": "POWRÓT DO POPRZEDNIEJ STRONY",
    "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
    "info-btn": "Wróć do widoku scenerii",
    "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -515,8 +554,9 @@
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
    "forum-topic": "Oficjalny wątek scenerii {name}",
+    "gnr-link": "Generator rozkazów pisemnych",
    "pragotron-link": "Paletowa tablica informacyjna",
-    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
+    "tablice-link": "Tablica informacyjna zbiorcza <br> (autorstwa Thundo)",
    "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
    "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
@@ -535,17 +575,18 @@
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG",
-    "from": "Z",
-    "to": "DO",
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii.\nPrzyjedzie z: <b>{prevStationName} (szlak {prevDepartureLine})</b>",
-    "desc-online": "Pociąg jest na tej scenerii.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-next-arrival": "Odjeżdża do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed-ends": "Pociąg jest na tej scenerii i został odprawiony.\nOdjechał w kierunku stacji: <b>{nextStationName}</b>",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "from": "Przyjedzie z",
+    "to": "Odjeżdża do",
+    "desc-beginning": "Pociąg rozpoczyna bieg",
+    "desc-arriving": "<i>Przyjedzie z: <b>{prevStationName} ({prevDepartureLine})</b></i>",
+    "desc-online": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-stopped": "Na scenerii - postój / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-next-arrival": "Na scenerii / <i>kierunek: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-departed": "Na scenerii / <i>odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
+    "desc-departed-ends": "Na scenerii / <i>odprawiony do: <b>{nextStationName}</b></i>",
+    "desc-departed-away": "<i>Odprawiony do: <b>{nextStationName} ({nextArrivalLine})</b></i>",
    "desc-end": "Pociąg kończy bieg",
-    "desc-terminated": "Pociąg skończył bieg"
+    "desc-terminated": "Pociąg zakończył bieg"
  },
  "history": {
    "title": "DZIENNIK ROZKŁADÓW JAZDY"
@@ -43,7 +43,7 @@ function filterTrainList(
          return train.timetableData?.followingStops.some((stop) => stop.comments);

        case TrainFilterId.twr:
-          return !train.timetableData?.TWR;
+          return !train.timetableData?.twr;

        case TrainFilterId.pn:
          return !train.timetableData?.hasExtraDeliveries;
@@ -52,7 +52,7 @@ function filterTrainList(
          return !train.timetableData?.hasDangerousCargo;

        case TrainFilterId.common:
-          return train.timetableData?.SKR || train.timetableData?.TWR;
+          return train.timetableData?.twr;

        case TrainFilterId.passenger:
          return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
@@ -36,7 +36,10 @@ const routes: Array<RouteRecordRaw> = [
    props: (route) => ({
      region: route.query.region,
      station: route.query.station
-    })
+    }),
+    beforeEnter: (to, from) => {
+      to.meta['prevPath'] = from.fullPath;
+    }
  },
  {
    path: '/journal',
@@ -72,7 +75,7 @@ const router = createRouter({
      from.query['view'] === undefined &&
      !savedPosition
    )
-      return { el: `.app_main`, top: -15 };
+      return { el: `.app_main`, behavior: 'instant', top: -13 };

    if (savedPosition) return savedPosition;
  },
@@ -53,8 +53,6 @@ export const useApiStore = defineStore('apiStore', {
    },

    updateTick(t: number) {
-      if (this.dataStatuses.connection == Status.Data.Offline) return;
-
      // Static data refresh
      if (t >= this.nextDataCheckTime) {
        this.fetchDonatorsData();
@@ -32,7 +32,8 @@ export const useMainStore = defineStore('mainStore', {

      chosenModalTrainId: undefined,

-      modalLastClickedTarget: null
+      modalLastClickedTarget: null,
+      currentLocale: 'pl'
    }) as MainStoreState,

  getters: {
@@ -97,8 +98,7 @@ export const useMainStore = defineStore('mainStore', {
                  followingStops: timetable.stopList,
                  routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                  sceneries: timetable.sceneries,
-                  TWR: timetable.TWR,
-                  SKR: timetable.SKR,
+                  twr: timetable.twr,
                  warningNotes: timetable.warningNotes,
                  hasDangerousCargo: timetable.hasDangerousCargo,
                  hasExtraDeliveries: timetable.hasExtraDeliveries,
@@ -12,6 +12,7 @@ export interface MainStoreState {
  driverStatsStatus: Status.Data;
  chosenModalTrainId?: string;
  modalLastClickedTarget: EventTarget | null;
+  currentLocale: string;
 }

 export interface StationJSONData {
@@ -1,5 +1,4 @@
-@import 'variables.scss';
-@import 'responsive.scss';
+@use 'responsive';

 .badge {
  font-weight: 600;
@@ -9,7 +8,8 @@

  margin: 0.25em;

-  span {
+  & > span,
+  & > a > span {
    display: inline-block;
    background: #585858;
    padding: 0.2em 0.4em;
@@ -23,7 +23,7 @@

    text-align: center;

-    @include smallScreen() {
+    @include responsive.smallScreen {
      font-size: 1em;
    }
  }
@@ -131,7 +131,7 @@
  color: white;

  & > span:first-child {
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
    color: black;
  }
 }
@@ -1,5 +1,4 @@
-@import './variables.scss';
-@import './responsive.scss';
+@use 'responsive';

 .card-dimmer {
  position: fixed;
@@ -46,7 +45,7 @@
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .card {
    max-height: 85vh;
  }
@@ -1,6 +1,5 @@
-@import 'search_box.scss';
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'search-box';
+@use 'responsive';

 .actions-bar {
  display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
 }

 .sort-option[data-selected='true'] {
-  color: $accentCol;
+  color: var(--clr-primary);
  font-weight: bold;
 }

@@ -73,15 +72,6 @@ h1.option-title {
  .search {
    margin: 0.5em auto;
  }
-
-  .search-box {
-    .search-exit {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0;
-    }
-  }
 }

 .options_actions {
@@ -95,7 +85,7 @@ h1.option-title {
  }
 }

-@include smallScreen() {
+@include responsive.smallScreen{
  h1 {
    text-align: center;

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'responsive';

 .dropdown-anim {
  &-enter-from,
@@ -29,18 +28,20 @@
  left: 0;
  top: calc(100% + 0.5em);

-  background-color: $bgCol;
-  // box-shadow: 0 5px 10px 2px #0f0f0f;
-  box-shadow: 0 0 5px 1px $accentCol;
+  background-color: var(--clr-bg3);
+  box-shadow: 0 0 5px 1px var(--clr-primary);

  width: 100%;
  max-width: 550px;

+  max-height: 750px;
+  overflow: auto;
+
  padding: 1em;
  z-index: 100;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .dropdown_wrapper {
    font-size: 1.1em;
    max-width: 100%;
@@ -1,6 +1,5 @@
-@import 'fonts';
-@import 'variables';
-@import 'responsive';
+@use 'fonts';
+@use 'responsive';

 :root {
  --clr-primary: #ffc014;
@@ -8,6 +7,8 @@

  --clr-bg: #4d4d4d;
  --clr-bg2: #1b1b1b;
+  --clr-bg3: #1d1d1d;
+  --clr-view-bg: #1a1a1a;

  --clr-accent: #1085b3;
  --clr-accent2: #ff3d5d;
@@ -18,7 +19,7 @@
  --clr-pn: #ffd000;

  --clr-error: #fa3636;
-  --clr-warning: #c59429;
+  --clr-warning: #ffe15b;

  --clr-donator: #f7a4ff;

@@ -60,11 +61,21 @@ body {
  overflow-x: hidden;
  position: relative;

+  font-size: 16px;
+
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include responsive.screenLandscape {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+
  &.no-scroll {
    overflow-y: hidden;
    padding-right: var(--no-scroll-padding);

-    @include smallScreen() {
+    @include responsive.smallScreen {
      padding: 0;
    }
  }
@@ -108,11 +119,11 @@ input {
 }

 *:focus-visible {
-  outline: 1px solid $accentCol;
+  outline: 1px solid var(--clr-primary);
 }

 .title {
-  color: $accentCol;
+  color: var(--clr-primary);
  font-weight: 600;

  padding: 0.35em 0;
@@ -130,26 +141,29 @@ a {
  color: inherit;
 }

-a:not(.a-block):not(.a-button):not(.a-row) {
-  display: inline-block;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-  }
-}
-
-a.a-block {
-  display: block;
-}
-
 a.a-row {
  display: table-row;
 }

+a:focus-visible {
+  outline: 1px solid var(--clr-primary);
+}
+
+.route-link {
+  margin: 0 0.2em;
+  transition: color 100ms;
+
+  &-active,
+  &[data-active='true'] {
+    color: var(--clr-primary);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--clr-primary);
+  }
+}
+
 ul {
  padding: 0;
  list-style: none;
@@ -186,7 +200,28 @@ ul {

  &--donator {
    color: var(--clr-donator);
-    text-shadow: var(--clr-donator) 0 0 10px;
+    color: transparent;
+
+    background: var(--clr-donator);
+    background: linear-gradient(90deg, #ff88db 30%, #ffffff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: #f050ff 0 0 10px;
+  }
+
+  &--discord {
+    color: var(--clr-donator);
+    color: transparent;
+
+    background: var(--clr-donator);
+    background: linear-gradient(90deg, #7fb6ff 0%, #60ecff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: #88ddff 0 0 10px;
  }
 }

@@ -256,54 +291,12 @@ a.a-button {
    padding: 0.35em 0.75em;

    img {
-      width: 1.35em;
+      height: 1.35em;
      vertical-align: middle;
    }
  }
 }

-.return-btn {
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  position: fixed;
-  right: 2.5rem;
-  bottom: 4rem;
-
-  z-index: 100;
-
-  width: 3.5rem;
-
-  font-size: 3rem;
-
-  background-color: #555;
-  outline: 3px solid #222;
-  color: white;
-
-  border-radius: 50%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #3c3c3c;
-  }
-
-  img {
-    width: 1.3em;
-  }
-
-  @include smallScreen() {
-    bottom: 1em;
-    right: 0;
-    left: 50%;
-
-    width: 1em;
-    height: 1em;
-
-    transform: translateX(-50%);
-  }
-}
-
 // Basic tooltip
 [data-tooltip] {
  cursor: help;
@@ -330,7 +323,7 @@ a.a-button {
  cursor: help;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
@@ -1,5 +1,5 @@
-@import 'responsive.scss';
-@import 'animations.scss';
+@use 'responsive';
+@use 'animations';

 .journal-list {
  display: flex;
@@ -12,7 +12,7 @@
 .list_wrapper {
  overflow-y: auto;
  height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 700px;
  margin-top: 0.5em;
  position: relative;

@@ -68,7 +68,7 @@
  font-size: 1.2em;
 }

-@include smallScreen() {
+@include responsive.smallScreen{
  .journal_top-bar {
    justify-content: center;
    flex-wrap: wrap;
@@ -1,6 +1,5 @@
-@import 'variables.scss';
-@import 'responsive.scss';
-@import 'badge.scss';
+@use 'responsive';
+@use 'badge';

 .stats-tab {
  position: absolute;
@@ -11,7 +10,7 @@
  width: 100%;

  background-color: #1a1a1a;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);

  padding: 1em;
  display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
  gap: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .journal-stats {
    text-align: center;
  }
@@ -1,4 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';

 .search {
  label {
@@ -11,8 +11,9 @@
    position: relative;

    display: flex;
+    align-items: center;
+    gap: 0.25em;

-    border-radius: 0.5em;
    min-width: 200px;
    margin-right: 0.25em;
  }
@@ -20,6 +21,8 @@
  &-input {
    border: none;
    background-color: #424242;
+    color: white;
+    border-radius: 0.5em;

    padding: 0.35em 0.5em;
    width: 100%;
@@ -27,6 +30,7 @@

  &-exit {
    background-color: #424242;
+    border-radius: 0.5em;

    img {
      vertical-align: middle;
@@ -39,7 +43,7 @@
    max-width: 300px;
  }

-  @include smallScreen {
+  @include responsive.smallScreen {
    &-box,
    &-button {
      margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
    }
  }
 }
+
+.search-box > i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5em;
+}
+
+select.search-input {
+
+}
@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;
@@ -197,8 +197,7 @@ export namespace API {
      category: string;
      route: string;
      stopList: TimetableStop[];
-      TWR: boolean;
-      SKR: boolean;
+      twr: boolean;
      hasDangerousCargo: boolean;
      hasExtraDeliveries: boolean;
      warningNotes: string | null;
@@ -83,8 +83,7 @@ export interface TrainTimetableData {
  category: string;
  route: string;
  followingStops: TrainStop[];
-  TWR: boolean;
-  SKR: boolean;
+  twr: boolean;
  hasDangerousCargo: boolean;
  hasExtraDeliveries: boolean;
  warningNotes: string | null;
@@ -143,6 +142,7 @@ export interface StationRoutesInfo {
  isRouteSBL: boolean;
  routeLength: number;
  routeSpeed: number;
+  routeSpeedExit?: number;
  routeTracks: number;
  hidden?: boolean;
  realLineNo?: number;
@@ -229,13 +229,24 @@ export interface VehiclesGroup {
  id: number;
  name: string;
  speed: number;
+  speedLoaded?: number;
+  speedLoco?: number;
  length: number;
  weight: number;
  cargoTypes: VehicleCargo[] | null;
+
  locoProps: {
    coldStart: boolean;
    doubleManned: boolean;
  } | null;
+
+  massSpeeds: VehicleGroupMassSpeeds | null;
+}
+
+export interface VehicleGroupMassSpeeds {
+  passenger: Record<string, number> | null;
+  cargo: Record<string, number> | null;
+  none: number | null;
 }

 export interface VehicleCargo {
@@ -2,103 +2,27 @@
  <section class="driver-view">
    <div class="view-wrapper">
      <div v-if="chosenTrain">
-        <div class="actions-container">
-          <div class="actions actions-left">
-            <a class="a-button btn--image" @click="$router.back()">
-              <img src="/images/icon-back.svg" alt="train icon" />
-              <span>
-                {{ $t('trains.driver-return-link') }}
-              </span>
-            </a>
-          </div>
-
-          <div class="actions actions-right">
-            <a
-              class="a-button btn--image"
-              :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
-              target="_blank"
-            >
-              <span class="hidable">
-                {{ $t('trains.driver-srjp-link') }}
-              </span>
-
-              <img src="/images/icon-srjp.svg" alt="srjp icon" />
-            </a>
-
-            <router-link
-              :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-              class="a-button btn--image"
-            >
-              <span class="hidable">
-                {{ $t('trains.driver-journal-link') }}
-              </span>
-
-              <img src="/images/icon-train.svg" alt="train icon" />
-            </router-link>
-          </div>
-        </div>
-
-        <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" />
-
-          <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
-            <i class="fa-regular fa-copy"></i> {{ $t('trains.stock-copy') }}
-          </button>
-
-          <StockList :trainStockList="chosenTrain.stockList" />
-          <TrainSchedule :train="chosenTrain" />
-        </div>
+        <DriverTopActions :chosenTrain="chosenTrain" />
+        <DriverTrainCard :chosenTrain="chosenTrain" />
      </div>

      <Loading v-else-if="apiStore.dataStatuses.connection == Status.Data.Loading" />

-      <div v-else class="driver-not-found">
-        <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
-
-        <p class="text--grayed">
-          {{ $t('trains.driver-not-found-desc-1') }} <br />
-          {{ $t('trains.driver-not-found-desc-2') }}
-          <router-link to="/journal/timetables"
-            >{{ $t('trains.driver-not-found-journal') }} </router-link
-          >!
-        </p>
-
-        <p v-if="props.trainId && otherDriverTrains.length > 0">
-          <i18n-t keypath="trains.driver-not-found-others">
-            <template v-slot:driver>
-              <b>{{ otherDriverTrains[0].driverName }}</b>
-            </template>
-          </i18n-t>
-        </p>
-
-        <div class="other-driver-trains">
-          <template v-for="(train, i) in otherDriverTrains">
-            <router-link :to="`/driver?trainId=${train.id}`">
-              {{ train.trainNo }}
-              | {{ regionsJSON.find((r) => r.id == train.region)?.name ?? 'PL1' }}
-            </router-link>
-          </template>
-        </div>
-
-        <div style="margin-top: 1em">
-          <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
-        </div>
-      </div>
+      <DriverNotFound v-else :trainId="props.trainId" />
    </div>
  </section>
 </template>

 <script setup lang="ts">
 import { computed } from 'vue';
-import TrainInfo from '../components/TrainsView/TrainInfo.vue';
-import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
-import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
-import { regions as regionsJSON } from '../data/options.json';
-import { useI18n } from 'vue-i18n';
+
+import DriverTopActions from '../components/DriverView/DriverTopActions.vue';
+import DriverTrainCard from '../components/DriverView/DriverTrainCard.vue';
+import DriverNotFound from '../components/DriverView/DriverNotFound.vue';

 const props = defineProps({
  trainId: {
@@ -113,105 +37,16 @@ const props = defineProps({
 const mainStore = useMainStore();
 const apiStore = useApiStore();

-const i18n = useI18n();
-
 const chosenTrain = computed(() =>
  mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
-
-const otherDriverTrains = computed(() => {
-  return mainStore.trainList.filter(
-    (train) =>
-      train.driverId == Number(props.trainId?.split('|')[0]) &&
-      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
-  );
-});
-
-function copyStockToClipboard() {
-  const stockString = chosenTrain.value?.stockList.join(';');
-
-  if (!stockString) {
-    alert(i18n.t('trains.stock-clipboard-failure'));
-    return;
-  }
-
-  navigator.clipboard
-    .writeText(stockString)
-    .then(() => {
-      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
-    })
-    .catch(() => {
-      alert(i18n.t('trains.stock-clipboard-failure'));
-    });
-}
 </script>

 <style lang="scss" scoped>
-@import '../styles/responsive';
-
-$viewBgCol: #1a1a1a;
-
 .driver-view {
  margin: 0 auto;
  padding: 1em 0;
  max-width: var(--max-container-width);
  min-height: calc(100vh - 7em);
 }
-
-.actions-container {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.5em;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5em;
-}
-
-.actions-container > .actions > a {
-  background-color: $viewBgCol;
-  padding: 0.5em;
-  border-radius: 0.5em 0.5em 0 0;
-
-  &:hover {
-    background-color: lighten($viewBgCol, 10);
-  }
-}
-
-.train-card {
-  padding: 1em;
-  background-color: $viewBgCol;
-  border-radius: 0 0 0.5em 0.5em;
-}
-
-.driver-not-found {
-  background-color: $viewBgCol;
-  text-align: center;
-  padding: 1em;
-  border-radius: 0.5em 0.5em;
-
-  p {
-    padding: 0.5em 0;
-  }
-
-  a {
-    text-decoration: underline;
-    color: white;
-  }
-}
-
-.other-driver-trains {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-@include smallScreen {
-  span.hidable {
-    display: none;
-  }
-}
 </style>
@@ -332,5 +332,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
@@ -122,6 +122,7 @@ interface TimetablesQueryParams {
  driverName?: string;
  trainNo?: string;
  timetableId?: string;
+  categoryCode?: string;

  authorName?: string;

@@ -215,6 +216,7 @@ export default defineComponent({
      'search-issuedFrom': '',
      'search-via': '',
      'search-terminatingAt': '',
+      'select-categoryCode': '',
      'search-date-from': ''
    } as Journal.TimetableSearchType);

@@ -230,6 +232,7 @@ export default defineComponent({
    return {
      sorterActive,
      searchersValues,
+
      filterList,
      initFilters,

@@ -356,6 +359,7 @@ export default defineComponent({
      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
      const via = this.searchersValues['search-via'].trim() || undefined;
      const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
+      const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;

      let dateTo: string | undefined = undefined;

@@ -365,8 +369,6 @@ export default defineComponent({

        dateTo = d.toISOString().split('T')[0];
      }
-      // const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
-      // const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;

      const queryParams: TimetablesQueryParams = {};

@@ -433,6 +435,7 @@ export default defineComponent({
      queryParams['issuedFrom'] = issuedFrom;
      queryParams['terminatingAt'] = terminatingAt;
      queryParams['via'] = via;
+      queryParams['categoryCode'] = categoryCode;

      queryParams['issuedFrom'] = issuedFrom;
      queryParams['sortBy'] =
@@ -482,5 +485,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
@@ -2,18 +2,12 @@
  <div class="scenery-view">
    <div class="scenery-wrapper" ref="card-wrapper">
      <div class="scenery-left">
-        <div class="scenery-actions">
-          <button class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
-            <img src="/images/icon-back.svg" alt="Back to scenery" />
-          </button>
-        </div>
-
        <SceneryHeader
          :stationName="station"
          :station="stationInfo"
          :onlineScenery="onlineSceneryInfo"
        />
-        
+
        <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
      </div>

@@ -23,8 +17,8 @@
            v-for="(viewMode, i) in viewModes"
            :key="i"
            class="btn btn--option"
-            :class="{ checked: currentMode == viewMode.component }"
-            @click="setViewMode(viewMode.component)"
+            :class="{ checked: currentMode == viewMode.component.name }"
+            @click="setViewMode(viewMode.component.name!)"
          >
            {{ $t(viewMode.id) }}
          </button>
@@ -32,17 +26,17 @@

        <div
          v-if="
-            apiStore.dataStatuses.sceneries == Status.Loading ||
-            apiStore.dataStatuses.connection == Status.Loading
+            apiStore.dataStatuses.sceneries == Status.Data.Loading ||
+            apiStore.dataStatuses.connection == Status.Data.Loading
          "
        ></div>

        <keep-alive v-else>
          <component
-            :is="currentMode"
+            :is="currentViewComponent"
            :onlineScenery="onlineSceneryInfo"
            :station="stationInfo"
-            :key="currentMode"
+            :key="currentViewComponent.name"
          ></component>
        </keep-alive>
      </div>
@@ -50,137 +44,92 @@
  </div>
 </template>

-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { useRoute } from 'vue-router';
-import routerMixin from '../mixins/routerMixin';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useMainStore } from '../store/mainStore';

 import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
 import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
+
 import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';
 import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
 import SceneryDispatchersHistory from '../components/SceneryView/SceneryDispatchersHistory.vue';
-import ActionButton from '../components/Global/ActionButton.vue';
-import { Status } from '../typings/common';
+
 import { useApiStore } from '../store/apiStore';
+import { Status } from '../typings/common';

-enum SceneryViewMode {
-  'TIMETABLES_ACTIVE',
-  'TIMETABLES_HISTORY',
-  'SCENERY_HISTORY'
-}
+const route = useRoute();
+const router = useRouter();

-export default defineComponent({
-  name: 'SceneryView',
-
-  components: {
-    SceneryInfo,
-    SceneryTimetable,
-    ActionButton,
-    SceneryHeader,
-    SceneryTimetablesHistory,
-    SceneryDispatchersHistory
+const props = defineProps({
+  region: {
+    type: String,
+    required: false
  },

-  props: {
-    region: {
-      type: String,
-      required: false
-    },
-
-    station: {
-      type: String,
-      required: true
-    }
-  },
-
-  mixins: [routerMixin],
-
-  data: () => ({
-    store: useMainStore(),
-    apiStore: useApiStore(),
-
-    viewModes: [
-      {
-        id: 'scenery.option-active-timetables',
-        component: 'SceneryTimetable'
-      },
-      {
-        id: 'scenery.option-timetables-history',
-        component: 'SceneryTimetablesHistory'
-      },
-      {
-        id: 'scenery.option-dispatchers-history',
-        component: 'SceneryDispatchersHistory'
-      }
-    ],
-    sceneryViewMode: SceneryViewMode,
-    selectedCheckpoint: '',
-    currentViewCompontent: 'SceneryTimetable',
-    onlineFrom: -1,
-    Status: Status.Data
-  }),
-
-  setup() {
-    const route = useRoute();
-
-    const isComponentVisible = computed(() => route.path === '/scenery');
-
-    return {
-      isComponentVisible
-    };
-  },
-
-  computed: {
-    currentMode() {
-      return this.$route.query.view?.toString() ?? 'SceneryTimetable';
-    },
-
-    stationInfo() {
-      return this.store.stationList.find(
-        (station) => station.name === this.station?.toString().replace(/_/g, ' ')
-      );
-    },
-
-    onlineSceneryInfo() {
-      return this.store.activeSceneryList.find(
-        (scenery) =>
-          scenery.name === this.station?.toString().replace(/_/g, ' ') &&
-          scenery.region == this.store.region.id
-      );
-    }
-  },
-
-  methods: {
-    setViewMode(componentName: string) {
-      this.$router.push({
-        path: this.$route.path,
-        query: {
-          ...this.$route.query,
-          view: componentName
-        }
-      });
-    },
-
-    loadSelectedCheckpoint() {
-      if (!this.stationInfo?.generalInfo?.checkpoints) return;
-      if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
-      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0];
-    }
+  station: {
+    type: String,
+    required: true
  }
 });
+
+const store = useMainStore();
+const apiStore = useApiStore();
+
+const viewModes = [
+  {
+    id: 'scenery.option-active-timetables',
+    component: SceneryTimetable
+  },
+  {
+    id: 'scenery.option-timetables-history',
+    component: SceneryTimetablesHistory
+  },
+  {
+    id: 'scenery.option-dispatchers-history',
+    component: SceneryDispatchersHistory
+  }
+];
+
+const currentMode = computed(() => {
+  return route.query.view?.toString() ?? 'SceneryTimetable';
+});
+
+const currentViewComponent = computed(() => {
+  return (
+    viewModes.find((mode) => mode.component.name == currentMode.value)?.component ??
+    SceneryTimetable
+  );
+});
+
+const stationInfo = computed(() => {
+  return store.stationList.find(
+    (station) => station.name === props.station?.toString().replace(/_/g, ' ')
+  );
+});
+
+const onlineSceneryInfo = computed(() => {
+  return store.activeSceneryList.find(
+    (scenery) =>
+      scenery.name === props.station?.toString().replace(/_/g, ' ') &&
+      scenery.region == store.region.id
+  );
+});
+
+function setViewMode(componentName: string) {
+  router.push({
+    path: route.path,
+    query: {
+      ...route.query,
+      view: componentName
+    }
+  });
+}
 </script>

 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
-@import '../styles/variables.scss';
-
-button.back-btn {
-  img {
-    width: 2em;
-  }
-}
+@use '../styles/responsive';

 .scenery {
  &-view {
@@ -193,7 +142,7 @@ button.back-btn {
    text-align: center;
    padding: 2em 1em;

-    color: $warningCol;
+    color: var(--clr-warning);

    display: inline-block;

@@ -275,7 +224,7 @@ button.back-btn {
  .checkpoint_item {
    &.current {
      font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
    }

    &:not(:last-child)::after {
@@ -286,7 +235,7 @@ button.back-btn {
  }
 }

-@include midScreen {
+@include responsive.midScreen {
  .scenery-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
@@ -300,11 +249,11 @@ button.back-btn {

  .scenery-right {
    border-radius: 1em;
-    height: auto;
+    height: 100vh;
  }
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .scenery-left {
    max-height: 100vh;
  }
@@ -1,24 +1,48 @@
 <template>
  <section class="stations-view">
    <div class="wrapper">
-      <div class="stations-options">
-        <StationFilterCard
-          :showCard="filterCardOpen"
-          :exit="(filterCardOpen = false)"
-          ref="filterCardRef"
-        />
+      <div class="stations-topbar">
+        <div class="topbar-cards">
+          <StationFilterCard
+            :showCard="filterCardOpen"
+            :exit="filterCardOpen = false"
+            ref="filterCardRef"
+          />

-        <StationStats />
+          <StationStats />
+        </div>

-        <button
-          class="btn-donation btn--image"
-          ref="btn"
-          @click="isDonationCardOpen = true"
-          @focus="isDonationCardOpen = false"
-        >
-          <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
-          <span>{{ $t('donations.button-title') }}</span>
-        </button>
+        <div class="topbar-links">
+          <a
+            class="a-button btn--image gnr-link"
+            href="https://generator-td2.web.app/"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('app.gnr-link-content')}</b>`"
+          >
+            <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
+          </a>
+
+          <a
+            class="a-button btn--image pojazdownik-link"
+            href="https://pojazdownik-td2.web.app/"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('app.pojazdownik-link-content')}</b>`"
+          >
+            <img src="/images/icon-pojazdownik.svg" alt="Pojazdownik app icon" />
+          </a>
+
+          <button
+            class="btn--image donation-button"
+            ref="btn"
+            @click="isDonationCardOpen = true"
+            @focus="isDonationCardOpen = false"
+          >
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            <span>&nbsp;{{ $t('donations.button-title') }}</span>
+          </button>
+        </div>
      </div>

      <DonationCard :is-card-open="isDonationCardOpen" @toggle-card="toggleDonationCard" />
@@ -78,8 +102,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/variables.scss';
-@import '../styles/responsive.scss';
+@use '../styles/responsive';

 .stations-view {
  position: relative;
@@ -95,34 +118,56 @@ export default defineComponent({
  width: var(--max-container-width);
 }

-.stations-options {
+.stations-topbar {
  display: flex;
-  flex-wrap: wrap;
  gap: 0.5em;
+  justify-content: space-between;

  position: relative;
  margin-bottom: 0.5em;
+
+  & > div {
+    display: flex;
+    gap: 0.5em;
+  }
 }

-button.btn-donation {
+button.donation-button {
  margin-left: auto;
-
-  $btnColor: #254069;
-
-  background-color: $btnColor;
+  background: #833ab4;
+  background: linear-gradient(
+    120deg,
+    rgba(131, 58, 180, 1) 0%,
+    rgba(253, 29, 29, 1) 50%,
+    rgba(131, 58, 180, 1) 100%
+  );
+  transition: background 300ms;
+  background-size: 300%;

  &:hover {
-    background-color: lighten($btnColor, 5%);
-  }
-
-  @include smallScreen {
-    span {
-      display: none;
-    }
+    background-size: 100%;
  }
 }

-.count {
-  padding: 0.5em;
+a.pojazdownik-link {
+  background-color: #1f263b;
+
+  &:hover {
+    background-color: #2e3958;
+  }
+}
+
+a.gnr-link {
+  background-color: #141414;
+
+  &:hover {
+    background-color: #222222;
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .topbar-links > * > span {
+    display: none;
+  }
 }
 </style>
@@ -114,7 +114,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';

 .trains-view {
  position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
  margin-bottom: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .trains_topbar {
    justify-content: space-between;
  }
@@ -1,17 +1,22 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';

 export default defineConfig({
-  server: {
-    port: 5001,
-    open: true
-  },
-  preview: {
-    port: 4001,
-    open: true
-  },
+  server: { port: 5123, open: true },
+  preview: { port: 4001, open: true },
  publicDir: 'public',
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
  plugins: [
    vue(),
    VitePWA({
@@ -26,20 +31,15 @@ export default defineConfig({
          {
            urlPattern:
              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
-            handler: 'StaleWhileRevalidate',
+            handler: 'NetworkFirst',
            options: {
              cacheName: 'stacjownik-api-cache',
-              cacheableResponse: {
-                statuses: [0, 200]
-              }
+              cacheableResponse: { statuses: [0, 200] }
            }
-          },
+          }
        ]
      },
-      devOptions: {
-        enabled: true,
-        suppressWarnings: true
-      }
+      devOptions: { enabled: true, suppressWarnings: true }
    })
  ],
  build: {
Author	SHA1	Message	Date
Spythere	af6eb35b67	Merge pull request #134 from Spythere/development v1.30.3	2025-07-05 02:20:55 +02:00
Spythere	1e6ab1c2d1	fix: status messages	2025-07-04 23:37:59 +02:00
Spythere	fd4849bd5e	bump: v1.30.3	2025-07-04 18:29:00 +02:00
Spythere	bc0f4c5d3f	chore: added head unit information in scenery active timetables	2025-07-04 18:28:41 +02:00
Spythere	8909a0cd40	fix: added timetable status for beginning offline	2025-07-04 18:22:41 +02:00
Spythere	a2602aeefe	chore: added displaying exit route speed limits in scenery view	2025-07-04 18:13:47 +02:00
Spythere	37ad9b2787	refactor: left & right track speed limits for routes in active train's timetable	2025-07-04 18:09:18 +02:00
Spythere	0b4ad679b3	chore: adjusted scenery view return button appearance	2025-07-04 17:16:08 +02:00
Spythere	dd0d7897cf	chore: better descriptions for active timetables statuses in scenery view	2025-07-04 17:12:38 +02:00
Spythere	1453dbda01	chore(scenery): added TWR/TN/PN badges to active timetables	2025-07-02 19:05:38 +02:00
Spythere	4af856b833	chore(scenery): changed appearance of the return button	2025-07-02 18:50:11 +02:00
Spythere	182b46a377	Merge pull request #133 from Spythere/development hotfixes: v1.30.2	2025-06-02 01:39:13 +02:00
Spythere	bb5fc395d2	chore: added LPS category to journal timetables filters	2025-06-02 01:38:01 +02:00
Spythere	a91a00f88a	refactor: scenery view back button routing; component setup script	2025-06-02 01:35:09 +02:00
Spythere	c8d481a952	hotfix: EN category desc typo	2025-06-02 00:44:23 +02:00
Spythere	03ff4d8648	Merge pull request #132 from Spythere/development v1.30.2	2025-05-27 17:47:28 +02:00
Spythere	23767801d5	chore: added timeout for welcome card appearance	2025-05-27 17:42:31 +02:00
Spythere	310261fb59	chore: queries handling	2025-05-27 17:38:53 +02:00
Spythere	742754ceef	bump: v1.30.2	2025-05-27 17:19:48 +02:00
Spythere	b9bb9dc201	refactor: globalized current locale, translation improvements	2025-05-27 17:19:32 +02:00
Spythere	611927f96f	feat: added welcome card for new incoming users	2025-05-27 16:55:58 +02:00
Spythere	2e191f355e	Merge pull request #131 from Spythere/development fix: english typo	2025-05-24 14:42:22 +02:00
Spythere	f974643e37	fix: english typo	2025-05-14 13:59:07 +02:00
Spythere	02afe2bf33	Merge pull request #130 from Spythere/development hotfix: twr detection	2025-05-12 21:23:49 +02:00
Spythere	ebdffc6241	hotfix: twr detection	2025-05-12 21:18:50 +02:00
Spythere	911c051af3	Merge pull request #129 from Spythere/development v1.30.1	2025-05-07 22:53:53 +02:00
Spythere	7ab16960ca	chore: removed obsolete logs	2025-05-07 22:42:36 +02:00
Spythere	43c7b8b024	fix: scroll behavior positioning	2025-05-07 22:32:39 +02:00
Spythere	32cf7745e8	refactor: scenery return button navigates back instead of jumping to main view	2025-05-07 22:23:00 +02:00
Spythere	a68c5020d9	chore: improved responsiveness of stats headers	2025-05-07 21:03:44 +02:00
Spythere	bf88caa704	fix: translation	2025-05-07 20:56:59 +02:00
Spythere	ea5d681943	fix: donator text gradient placement	2025-05-07 20:51:39 +02:00
Spythere	d346e049e0	chore: updated packages	2025-05-07 20:48:15 +02:00
Spythere	feb2027c16	bump: v1.30.1	2025-05-07 20:45:27 +02:00
Spythere	06d0fabc99	chore: added new text style for donators	2025-05-07 20:45:13 +02:00
Spythere	3c74580bed	refactor: changed position of generaTOR link; added missing tooltips	2025-05-07 20:06:37 +02:00
Spythere	02d234a21b	chore: added missing translations; minor style fixes	2025-05-07 19:07:01 +02:00
Spythere	d9dc44063f	chore: added tooltips to external app links	2025-05-07 18:22:05 +02:00
Spythere	5929bbdccb	refactor: moved speed limits from local to api	2025-05-07 18:18:34 +02:00
Spythere	f73c3f4aec	chore: added links to other external tools; changed design of the donation button	2025-05-02 02:36:19 +02:00
Spythere	a44ad5c89d	Merge pull request #128 from Spythere/development v1.30.0	2025-04-26 15:11:48 +02:00
Spythere	c30c2206ce	chore: available proposition categories update	2025-04-26 15:06:08 +02:00
Spythere	128f3c32b4	fix: minor mistakes	2025-04-26 14:34:26 +02:00
Spythere	0fdcd82754	hotfix: available categories conditions	2025-04-26 14:33:07 +02:00
Spythere	1e75ff517f	hotfix: missing translations	2025-04-26 14:24:25 +02:00
Spythere	b278c20480	feat: filtering journal timetables by train category	2025-04-26 14:23:14 +02:00
Spythere	fd28eb4609	fix: other driver's trains broken listing	2025-04-26 13:45:27 +02:00
Spythere	a602358241	chore: obsolete logs	2025-04-25 15:18:11 +02:00
Spythere	5a09543a22	chore: updated stock speed limit calculation	2025-04-25 15:15:45 +02:00
Spythere	f952a7c491	chore: translation fixes; formatting	2025-04-25 14:56:39 +02:00
Spythere	adf4d88cb2	bump: v1.30.0	2025-04-22 15:56:34 +02:00
Spythere	34f2a69863	feat: displaying number propositions for selected category in driver view	2025-04-22 15:56:02 +02:00
Spythere	b2930f6a9e	restruct: added driver view components	2025-04-19 14:51:42 +02:00
Spythere	edcaff2183	Merge pull request #127 from Spythere/development fix: missing icons & translations	2025-04-15 16:11:13 +02:00
Spythere	010ab08701	fix: missing icons & translations	2025-04-15 16:10:44 +02:00
Spythere	16b3bb3683	Merge pull request #126 from Spythere/development v1.29.2	2025-04-15 01:15:42 +02:00
Spythere	93e242c0f5	chore: additional styles	2025-04-15 01:10:31 +02:00
Spythere	861206a5ab	chore: updated look of station stats; minor layout improvements	2025-04-14 21:37:59 +02:00
Spythere	a47399fe1b	chore: added driver stats percentage	2025-04-14 21:02:46 +02:00
Spythere	8e196c8279	chore: switched drivers filter from text to select input (TrainsView); updated inputs clear buttons	2025-04-14 19:24:28 +02:00
Spythere	be55bac9fe	chore: updated networking settings	2025-04-14 19:24:24 +02:00
Spythere	c5e53057eb	hotfix: post-upgrade adjustments	2025-03-29 16:08:34 +01:00
Spythere	4ba5d544af	bump: v1.29.2	2025-03-26 18:04:19 +01:00
Spythere	22b6177560	restruct: updated sass version and rules	2025-03-26 18:04:00 +01:00