supersonictw · supersonictw · Aug 7, 2020 · Aug 7, 2020 · Aug 7, 2020
diff --git a/public/index.html b/public/index.html
@@ -11,58 +11,63 @@
   (c) 2020 SuperSonic. (https://github.com/supersonictw)
 -->
 
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <style>
-      .ui {
-        font-family: Avenir, Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-      }
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
 
-      ul {
-        list-style-type: none;
-        padding: 0;
-      }
+    .ui {
+      font-family: Avenir, Helvetica, Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-align: center;
+      color: #2c3e50;
+    }
 
-      li {
-        display: inline-block;
-        margin: 0 10px;
-      }
+    ul {
+      list-style-type: none;
+      padding: 0;
+    }
 
-      a {
-        color: #42b983;
-      }
-    </style>
-  </head>
+    li {
+      display: inline-block;
+      margin: 0 10px;
+    }
 
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
-        properly without JavaScript enabled. Please enable it to
-        continue.</strong
-      >
-    </noscript>
-    <div id="app" class="ui">
-      Loading...
-    </div>
-    <div id="footer" class="ui">
-      <ul>
-        <li>
-          &copy; 2020
-          <a href="https://randychen.tk" target="_blank" rel="noopener"
-            >SuperSonic</a
-          >.
-        </li>
-      </ul>
-    </div>
-  </body>
-</html>
+    a {
+      color: #42b983;
+    }
+
+    #footer {
+      margin-bottom: 60px;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>
+    <strong>
+      We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.
+    </strong>
+  </noscript>
+  <div id="app" class="ui">
+    <div style="margin: 60px;">Loading...</div>
+  </div>
+  <div id="footer" class="ui">
+    <ul>
+      <li>
+        &copy;2020 <a href="https://randychen.tk" target="_blank" rel="noopener">SuperSonic</a>.
+      </li>
+    </ul>
+  </div>
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -45,8 +45,11 @@ export default {
           return true;
         }
       }
-      if (this.$route.name !== Constant.ROUTER_TAG_LOGIN) {
-        this.$router.push({ name: Constant.ROUTER_TAG_LOGIN });
+      if (
+        this.$route.name !== Constant.ROUTER_TAG_INTRODUCING &&
+        this.$route.name !== Constant.ROUTER_TAG_LOGIN
+      ) {
+        this.$router.push({ name: Constant.ROUTER_TAG_INTRODUCING });
       }
       return false;
     },

diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg
diff --git a/src/assets/icons/chat.svg b/src/assets/icons/chat.svg
diff --git a/src/assets/icons/emoji.svg b/src/assets/icons/emoji.svg
diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg
diff --git a/src/assets/icons/send.svg b/src/assets/icons/send.svg
diff --git a/src/assets/line_logo.png b/src/assets/line_logo.png
diff --git a/src/components/Back.vue b/src/components/Back.vue
@@ -11,31 +11,21 @@
 <template>
   <div id="back">
     <a title="Back" @click.prevent="back" href="#">
-      <svg
-        alt="Back"
-        viewBox="0 0 16 16"
-        id="back-arrow"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M5.854 4.646a.5.5 0 0 1 0 .708L3.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"
-        />
-        <path
-          fill-rule="evenodd"
-          d="M2.5 8a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
-        /></svg
-    ></a>
+      <img alt="Back" src="@/assets/icons/back.svg" />
+    </a>
   </div>
 </template>
 
 <script>
+import Constant from "@/data/const.js";
+
 export default {
   name: "Back",
   methods: {
     back() {
-      this.$router.go(-1);
+      window.history.length > 1
+        ? this.$router.go(-1)
+        : this.$router.push({ name: Constant.ROUTER_TAG_INTRODUCING });
     },
   },
 };
@@ -45,7 +35,6 @@ export default {
 #back {
   width: 50px;
   height: 50px;
-  color: #42b983;
   margin-left: 30px;
   background: rgba(0, 0, 0, 0);
   border-radius: 50px;

diff --git a/src/components/Logout.vue b/src/components/Logout.vue
@@ -12,18 +12,7 @@
   <a title="Logout" @click.prevent="logout" href="#">
     <div id="logout">
       <div id="logout-box">
-        <svg
-          alt="Logout"
-          viewBox="0 0 16 16"
-          id="logout-door"
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2v13h1V2.5a.5.5 0 0 0-.5-.5H11zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"
-          />
-        </svg>
+        <img id="logout-icon" alt="Logout" src="@/assets/icons/logout.svg" />
         <span id="logout-text">Logout</span>
       </div>
     </div>
@@ -58,9 +47,8 @@ a {
 }
 
 #logout {
-  width: 90px;
-  height: 25px;
-  color: #42b983;
+  width: auto;
+  height: auto;
   margin-right: 30px;
   padding: 10px;
   border: 1px solid;
@@ -82,33 +70,14 @@ a {
   margin: 0;
 }
 
-#logout-door {
+#logout-icon {
   width: auto;
   height: 20px;
   margin-right: 10px;
 }
 
 #logout-text {
   width: auto;
-  height: 20px;
-}
-
-@media screen and (max-width: 600px) {
-  #logout {
-    width: 50px;
-    height: 15px;
-  }
-
-  #logout-door {
-    width: auto;
-    height: 15px;
-    margin-right: 3px;
-  }
-
-  #logout-text {
-    width: auto;
-    height: 10px;
-    font-size: 10px;
-  }
+  height: auto;
 }
 </style>
diff --git a/src/data/const.js b/src/data/const.js
@@ -25,6 +25,7 @@ export default {
   CONTACT_ROW_DISPLAY_NAME_LENGTH: 10,
   CONTACT_ROW_STATUS_MESSAGE_LENGTH: 15,
   DASHBOARD_PROFILE_STATUS_MESSAGE_LENGTH: 10,
+  ROUTER_TAG_INTRODUCING: "Introducing",
   ROUTER_TAG_LOGIN: "Login",
   ROUTER_TAG_DASHBOARD: "Dashboard",
   ROUTER_TAG_PROFILE: "Profile",

diff --git a/src/data/router.js b/src/data/router.js
@@ -14,6 +14,7 @@ import VueRouter from "vue-router";
 
 import Constant from "@/data/const.js";
 
+import Introducing from "@/views/Introducing.vue";
 import Login from "@/views/Login.vue";
 import Dashboard from "@/views/Dashboard.vue";
 import Profile from "@/views/Profile.vue";
@@ -28,6 +29,11 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
+    name: Constant.ROUTER_TAG_INTRODUCING,
+    component: Introducing,
+  },
+  {
+    path: "/login",
     name: Constant.ROUTER_TAG_LOGIN,
     component: Login,
   },

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div>
+  <div class="view">
     <Back />
     <div id="about">
       <img alt="XIA logo" src="@/assets/logo.svg" />
@@ -63,6 +63,10 @@ export default {
 </script>
 
 <style scoped>
+.view {
+  margin: 60px auto;
+}
+
 #about {
   width: 50%;
   margin: 0 auto;