Change steps

Author: Stigmatoz

src/pages/Welcome.vue

@@ -1,41 +1,66 @@
 <template>
   <div class="main">
-    <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">{{ t('getStarted.message') }}</p>
-      <p class="description">{{ t('welcomeStart.message') }}</p>
-      <p class="step">1. {{ t('pinIcon.message') }}</p>
-      <p class="description">
-        {{ 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. {{ t('browse.message') }}</p>
-      <p class="description">
-        {{ t('browse.description') }}
-        <img src="../assets/icons/icon.png" height="35" />
-      </p>
-      <p class="step">3.{{ t('seeData.message') }}</p>
-      <p class="description mt-20">
-        {{ t('seeData.description') }}
-      </p>
-      <div class="btn-block">
-        <button class="close" @click="close()">{{ t('close.message') }}</button>
-        <button @click="openDashboard()">{{ t('useExtension.message') }}</button>
+    <template v-if="step == WelcomeStep.InitialView">
+      <div class="initial-block">
+        <p class="header">{{ t('welcome.message') }}</p>
+        <img class="img" src="../assets/initial.jpg" height="250" />
+        <p class="description" v-html="t('welcome.description')"></p>
+        <div class="next-btn">
+          <button @click="nextStep()">{{ t('next.message') }}</button>
+        </div>
       </div>
-    </div>
+    </template>
+    <template v-if="step == WelcomeStep.Tutorial">
+      <div class="steps">
+        <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">
+          {{ 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. {{ t('browse.message') }}</p>
+        <p class="description">
+          {{ t('browse.description') }}
+          <img src="../assets/icons/icon.png" height="35" />
+        </p>
+        <p class="step">3. {{ t('seeData.message') }}</p>
+        <p class="description mt-20">
+          {{ t('seeData.description') }}
+        </p>
+        <div class="btn-block">
+          <button class="close" @click="close()">{{ t('close.message') }}</button>
+          <button @click="openDashboard()">{{ t('useExtension.message') }}</button>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Browser from 'webextension-polyfill';
 
 const { t } = useI18n();
 
+enum WelcomeStep {
+  InitialView,
+  Tutorial,
+}
+
+const step = ref<WelcomeStep>();
+
+onMounted(() => {
+  step.value = WelcomeStep.InitialView;
+});
+
+function nextStep() {
+  step.value = WelcomeStep.Tutorial;
+}
+
 async function close() {
   const currentTab = await Browser.tabs.getCurrent();
   await Browser.tabs.remove(currentTab.id!);
@@ -52,17 +77,19 @@ async function openDashboard() {
 .main {
   margin: auto;
   text-align: center;
-  margin-top: 20px;
-  width: 80%;
+  width: 60%;
   height: 100%;
 }
+.initial-block {
+  margin-top: 20%;
+}
 
 .header {
   font-size: 26px;
-  font-weight: 600;
+  font-weight: 700;
 }
 .img {
-  margin: 20px 0 0 0;
+  margin: 20px 0;
 }
 .description {
   font-size: 18px;
@@ -73,6 +100,9 @@ async function openDashboard() {
 .description img {
   margin: 0 10px;
 }
+.steps {
+  margin-top: 50px;
+}
 .steps .step {
   text-align: left;
   font-size: 24px;
@@ -85,6 +115,9 @@ async function openDashboard() {
 .steps .description {
   margin: 20px;
 }
+.next-btn {
+  margin-top: 40px;
+}
 
 button.close {
   background: #c5c5c5;