<template>
  <div id="app">
    <Navigation></Navigation>
    <section id="main">
      <router key="$route.fullPath"></router>
    </section>
  </div>
</template>

[removed]
import Navigation from '@/components/shared/Navigation';
import CookieLaw from 'vue-cookie-law';
import { setCookie, getCookie, storeSession, storeTime } from '@/services/Cookies';
import moment from 'moment';

export default {
  name: 'App',
  data() {
    return {
      background: '',
      token: '',
      startSession: '',
      endSession: '',
    }
  },
  components: {
    Navigation,
    CookieLaw,
    moment,
  },
  beforeMount() {
    if(this.$cookies.get('token'))
    {
      this.getCookieSession();
      this.storeSesion();
    } else {
      this.setCookieSession();
      this.storeSesion();
    }
  },
  created() {
    window.addEventListener('onbeforeunload', this.storeTime())
  },
  methods: {
    storeTime() {
      this.startSession = moment.utc(moment().format(), "HH:mm");
      this.endSession = moment.utc(moment().fromNow(), "HH:mm");
      var time = this.endSession - this.startSession;
      storeTime({ time });
    },
    setCookieSession() {
      var date = new Date;
      date.setDate(date.getDate() + 1);
      var token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
      this.$cookies.set("token", token, "3y");
      setCookie({ token });
    },
    getCookieSession: async function () {
      this.getCookie = await getCookie();
      var token = this.$cookies.get('token');
    },
    storeSesion() {
      var nAgt = navigator.userAgent;
      var nameOffset, verOffset, ix;
      var fullVersion  = ''+parseFloat(navigator.appVersion);
      var majorVersion = parseInt(navigator.appVersion,10);
      var browser = navigator.appName;
      // In Opera 15+, the true version is after "OPR/"
      if ((verOffset=nAgt.indexOf("OPR/"))!=-1) {
        browser = "Opera";
        fullVersion = nAgt.substring(verOffset+4);
      }
      // In older Opera, the true version is after "Opera" or after "Version"
      else if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
        browser = "Opera";
        fullVersion = nAgt.substring(verOffset+6);
      if ((verOffset=nAgt.indexOf("Version"))!=-1)
        fullVersion = nAgt.substring(verOffset+8);
      }
      // In MSIE, the true version is after "MSIE" in userAgent
      else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
        browser = "Microsoft Internet Explorer";
        fullVersion = nAgt.substring(verOffset+5);
      }
      // In Chrome, the true version is after "Chrome"
      else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
        browser = "Chrome";
        fullVersion = nAgt.substring(verOffset+7);
      }
      // In Safari, the true version is after "Safari" or after "Version"
      else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
        browser = "Safari";
        fullVersion = nAgt.substring(verOffset+7);
      if ((verOffset=nAgt.indexOf("Version"))!=-1)
        fullVersion = nAgt.substring(verOffset+8);
      }
      // In Firefox, the true version is after "Firefox"
      else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
        browser = "Firefox";
        fullVersion = nAgt.substring(verOffset+8);
      }
      // In most other browsers, "name/version" is at the end of userAgent
      else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
                (verOffset=nAgt.lastIndexOf('/')) )
      {
      browser = nAgt.substring(nameOffset,verOffset);
      fullVersion = nAgt.substring(verOffset+1);
      if (browser.toLowerCase()==browser.toUpperCase()) {
        browser = navigator.appName;
      }
      }
      // trim the fullVersion string at semicolon/space if present
      if ((ix=fullVersion.indexOf(";"))!=-1)
        fullVersion=fullVersion.substring(0,ix);
      if ((ix=fullVersion.indexOf(" "))!=-1)
        fullVersion=fullVersion.substring(0,ix);

      majorVersion = parseInt(''+fullVersion,10);
      if (isNaN(majorVersion)) {
        fullVersion  = ''+parseFloat(navigator.appVersion);
        majorVersion = parseInt(navigator.appVersion,10);
      }
      var token = this.$cookies.get('token');
      var version = navigator.appVersion;
      var agent = navigator.userAgent;
      var os = navigator.platform;
      var resolution = window.innerWidth + 'x' + window.innerHeight;
      var ip = userip;
      storeSession({ token, browser, version, agent, os, resolution, ip });
    },
  }
};
[removed]

<style>
.Cookie__button {
  border-radius: 35px !important;
  background: #ee0808 !important;
  border: 5px solid #e8e9ef !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  font-family: 'Lato', sans-serif!important;
}
.VueCarousel-navigation-button {
  padding: 0px !important;
}
#rectangle:hover {
  animation: nextarrow 3s;
}
@keyframes nextarrow {
  0% {
    width: 0px;
  }
  25% {
    width: 37.5px;
  }
  50% {
    width: 75px;
  }
  100% {
    width: 150px;
  }
  10% {
    width: 10px;
  }

}
.actionBtn:hover {
  animation-name: stretch;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-direction: alternate;
  animation-fill-mode: none;
}
@keyframes stretch {
  0% {
    background-color: #ee0808;
    color: #ffffff;
    border: 5px solid #e8e9ef;
  }
  50% {
    background-color: #ffffff;
    color: #ee0808;
    border: 5px solid #ee0808;
  }
  100% {
    background-color: #ee0808;
    color: #ffffff;
    border: 5px solid #e8e9ef;
    animation-play-state: paused;
  }
}
.custom-control-label::before,
.custom-control-label::after {
  top: .8rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}
.navbar-light .navbar-toggler-icon {
  background-image: none !important;
}
.navbar-light .navbar-toggler {
  background-image: url('./assets/img/hamburger.png');
  width: 50px;
  height: 50px;
  z-index: 1000;
}
.navbar-light .navbar-toggler .opened {
  background-image: url('./assets/img/hamburger-close.png');
  z-index: 1001;
}
.navbar-light .navbar-toggler {
  border-color: transparent !important;
}
#app {
  font-family: 'Lato', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

@media only screen and (max-width: 2560px) {
  .backgrounds {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: #343b7c!important;
    z-index: -1;
  }
  #desctopBgIntro {
   background: url('./assets/img/bg-rest.png');
  }
  #desctopBgQuestion {
    background: url('./assets/img/bg-question.png');
  }
  #desctopBgForm {
    background: url('./assets/img/bg-form.png');
  }
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .backgrounds {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
@media only screen and (max-width: 1023px) {
   #desctopBgIntro {
   background: none;
  }
  #desctopBgQuestion {
    background:none;
  }
  #desctopBgForm {
    background: none;
  }
}
@media only screen and (max-width: 1022px) {
  #app {
    background: #343b7c;
    height: 100vh;
  }
}
@media only screen and (max-width: 991px) {
  .navbar-collapse .collapse .show ul {
    background-color: #111d61;
  }
}
@media only screen and (max-width: 768px) {
  #app {
    background-color: #343b7c;
    height: auto;
  }
}
@media only screen and (max-width: 425px) {
  #app {
    background: none;
    background-color: #343b7c;
    height: auto;
  }
}
</style>