Localization welcome page

Author: Stigmatoz

src/_locales/de/messages.json

@@ -258,5 +258,41 @@
   },
   "restore": {
     "message": "Wiederherstellen"
+  },
+  "welcome": {
+    "message": "Willkommen bei Web Activity Time Tracker",
+    "description": "Web Activity Time Tracker ist eine <b>open-source</b>, <b>kostenlose</b> und <b>werbefreie</b> Erweiterung, mit der Sie die Zeit, die Sie für das Durchsuchen von Websites aufgewendet haben, und die Anzahl der Besuche nachverfolgen können."
+  },
+  "getStarted": {
+    "message": "Anleitung"
+  },
+  "welcomeStart": {
+    "message": "Sie können die Erweiterung in nur 3 einfachen Schritten schnell verwenden"
+  },
+  "pinIcon": {
+    "message": "Pin das Symbol"
+  },
+  "pinIconPart1": {
+    "message": "Um diese Erweiterung bequemer zu verwenden, können Sie das Symbol an die Symbolleiste anheften. Klicken Sie auf das Symbol"
+  },
+  "pinIconPart2": {
+    "message": "und klicken Sie dann auf das Pin-Symbol"
+  },
+  "browse": {
+    "message": "Durchsuchen Sie alle Websites",
+    "description": "Wenn Sie eine Website besuchen, werden Sie sehen, dass die Uhrzeit auf dem Symbol angezeigt wird, genau wie hier"
+  },
+  "seeData": {
+    "message": "Zeigen Sie Ihre Daten auf der Popup-Seite und im Dashboard an",
+    "description": "Klicken Sie auf das Erweiterungssymbol, um eine Popup-Seite zu öffnen, und Sie können die mit einem Kreisdiagramm gerenderten Daten für heute, für alle Zeiten oder für Tage lesen. In einem Popup-Fenster können Sie das Dashboard öffnen, und es zeigt Ihnen die heutige Zeit nach Stunden an. Und Sie können ein tägliches Zeitlimit für alle Websites festlegen, Benachrichtigungen für Websites festlegen oder Daten in CSV exportieren."
+  },
+  "close": {
+    "message": "Schließen"
+  },
+  "useExtension": {
+    "message": "Verwenden Sie die Erweiterung"
+  },
+  "next": {
+    "message": "Weiter"
   }
 }

src/_locales/en/messages.json

@@ -258,5 +258,41 @@
   },
   "restore": {
     "message": "Restore"
+  },
+  "welcome": {
+    "message": "Welcome to Web Activity Time Tracker",
+    "description": "Web Activity Time Tracker is <b>open-source</b>, <b>free</b> and <b>no ads</b> extension, which can help you track the time you spent on browsing websites and the count of visit."
+  },
+  "getStarted": {
+    "message": "Get started"
+  },
+  "welcomeStart": {
+    "message": "You can quicly start using the extension in just 3 easy steps"
+  },
+  "pinIcon": {
+    "message": "Pin the icon"
+  },
+  "pinIconPart1": {
+    "message": "To use this extension more conveniently, you can pin the icon to toolbar. Click the icon"
+  },
+  "pinIconPart2": {
+    "message": "and then click the pin icon"
+  },
+  "browse": {
+    "message": "Browse any websites",
+    "description": "When you visit any website, you will see that the time is displayed on the icon, just like here"
+  },
+  "seeData": {
+    "message": "View your data on the popup page and on the dashboard",
+    "description": "Click on the extension icon to open a popup page and you will be able to read the data visualized using a pie chart, for today, for all time or by day. In the popup window, you can open the dashboard and it will show you today's time by the clock. And you can set a daily time limit for any websites, notifications for websites, or export data to CSV."
+  },
+  "close": {
+    "message": "Close"
+  },
+  "useExtension": {
+    "message": "Use the extension"
+  },
+  "next": {
+    "message": "Next"
   }
 }

src/_locales/ru/messages.json

@@ -258,5 +258,41 @@
   },
   "restore": {
     "message": "Восстановить из резервной копиии"
+  },
+  "welcome": {
+    "message": "Добро пожаловать в Web Activity Time Tracker",
+    "description": "Web Activity Time Tracker это <b>бесплатное</b>, <b>без рекламы</b> и <b>\u0441 открытым исходным кодом</b> расширение, которое поможем вам отслеживать время, потраченное вами на просмотр веб-сайтов, и покажет количество посещений."
+  },
+  "getStarted": {
+    "message": "Руководство"
+  },
+  "welcomeStart": {
+    "message": "Вы можете быстро начать использовать расширение всего за 3 простых шага"
+  },
+  "pinIcon": {
+    "message": "Закрепите значок"
+  },
+  "pinIconPart1": {
+    "message": "Чтобы более удобно использовать это расширение, вы можете прикрепить значок к панели инструментов. Нажмите на значок"
+  },
+  "pinIconPart2": {
+    "message": "и затем нажмите на значок закрепления"
+  },
+  "browse": {
+    "message": "Просматривайте любые веб-сайты",
+    "description": "При посещении любого веб-сайта вы увидите, что время отображается на значке, точно так же, как здесь"
+  },
+  "seeData": {
+    "message": "Просматривайте ваши данные на всплывающей странице и на панели мониторинга",
+    "description": "Нажмите на значок расширения, чтобы открыть всплывающую страницу, и вы сможете увидеть данные посещения сайтов за сегодня, за все время и по дням. Во всплывающем окне вы можете открыть панель мониторинга, и вы увидите сегодняшнее время по часам. Там же вы можете установить ежедневное ограничение по времени для любых веб-сайтов, уведомления для веб-сайтов или экспортировать данные в CSV."
+  },
+  "close": {
+    "message": "Закрыть"
+  },
+  "useExtension": {
+    "message": "Начать пользоваться"
+  },
+  "next": {
+    "message": "Продолжить"
   }
 }

src/pages/Welcome.vue

@@ -1,37 +1,30 @@
 <template>
   <div class="main">
-    <p class="header">Welcome to Web Activity Time Tracker</p>
-    <p class="description">
-      Web Activity Time Tracker is <span>open-sourse</span>, <span>free</span> and
-      <span>no ads</span> extension, which can help you track the time you spent on browsing
-      websites and the count of visit.
-    </p>
+    <p class="header">{{ t('welcome.message') }}</p>
+    <p class="description" v-html="t('welcome.description')"></p>
     <img class="img" src="../assets/initial.jpg" height="250" />
     <div class="steps">
-      <p class="header">Get started</p>
-      <p class="description">You can quicly start using the extension in just 3 easy steps</p>
-      <p class="step">1. Pin the icon</p>
+      <p class="header">{{ t('getStarted.message') }}</p>
+      <p class="description">{{ t('welcomeStart.message') }}</p>
+      <p class="step">1. {{ t('pinIcon.message') }}</p>
       <p class="description">
-        To use this extension more conviently, you can pin the icon to toolbar. Click the icon
-        <img src="../assets/icons/extension.svg" height="25" /> and then click the pin icon
+        {{ t('pinIconPart1.message') }}
+        <img src="../assets/icons/extension.svg" height="25" /> {{ t('pinIconPart2.message') }}
         <img src="../assets/icons/pin.svg" height="25" />
       </p>
       <img class="img" src="../assets/pin-tutorial.png" height="250" />
-      <p class="step">2. Browse any websites</p>
+      <p class="step">2. {{ t('browse.message') }}</p>
       <p class="description">
-        Browse any websites and you will see that time is beating on the icon, just like this
+        {{ t('browse.description') }}
         <img src="../assets/icons/icon.png" height="35" />
       </p>
-      <p class="step">3. Read data in the popup page and on dashboard</p>
+      <p class="step">3.{{ t('seeData.message') }}</p>
       <p class="description mt-20">
-        Click on the extension icon to open a popup page and you will be able to read the data
-        visualized using a pie chart, for today, for all time, or by day. In the popup window, you
-        can open the dashboard and it will show you today's time by hour. And you can set a daily
-        time limit for any websites, notifications for websites, or export data to CSV.
+        {{ t('seeData.description') }}
       </p>
       <div class="btn-block">
-        <button class="close" @click="close()">Close</button>
-        <button @click="openDashboard()">Use the extension</button>
+        <button class="close" @click="close()">{{ t('close.message') }}</button>
+        <button @click="openDashboard()">{{ t('useExtension.message') }}</button>
       </div>
     </div>
   </div>
@@ -41,6 +34,8 @@
 import { useI18n } from 'vue-i18n';
 import Browser from 'webextension-polyfill';
 
+const { t } = useI18n();
+
 async function close() {
   const currentTab = await Browser.tabs.getCurrent();
   await Browser.tabs.remove(currentTab.id!);