HomePage Description Project

.env.development

@@ -14,3 +14,4 @@ TEST_PASSWORD='mypassword@1A'
 PUBLICKEY_PUSH='BGxRrFWnPoa_ImUaWXmeEOFVI9VNKVKaAPsvsM1XY6wn24yxp9MyOQ4crNYCJKxSXV65Y1GblW5_VLoamedcZ1I'
 IN_CONSTRUCTION='0'
 DEBUG='1'
+TELEGRAM_SUPPORT='https://t.me/freeplanet_supporto'

.gitignore

@@ -2,8 +2,8 @@
 .DS_Store
 .thumbs.db
 .env
-.env.development
 .env.production
+.env.development
 .env.production.bak
 .env.prod.bak
 .env.test

src/components/Header.vue

@@ -238,9 +238,9 @@
 
     public selectOpLang = [
       { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
+      { label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' },
+      { label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
       // { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
-      { label: 'Italiano', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' },
-      { label: 'Español', icon: 'fa-flag-es', value: 'esEs', image: '../statics/images/es.png', short: 'ES' }
     ]
 
 

src/components/todos/SingleTodo/SingleTodo.ts

@@ -254,13 +254,12 @@ export default class SingleTodo extends Vue {
   }
 
   faiFocus(elem, isparent: boolean = false) {
-    let mythis = this
     setTimeout(() => {
       let theField = null
       if (isparent)
-        theField = <HTMLInputElement>mythis.$parent.$parent.$parent.$parent.$refs[elem]
+        theField = <HTMLInputElement>this.$parent.$parent.$parent.$parent.$refs[elem]
       else
-        theField = <HTMLInputElement>mythis.$refs[elem]
+        theField = <HTMLInputElement>this.$refs[elem]
 
       if (theField !== undefined)
         theField.focus()

src/components/todos/todo/todo.ts

@@ -156,39 +156,6 @@ export default class Todo extends Vue {
     return 'elem [' + elem._id + '] ' + elem.descr + ' Pr(' + this.getPriorityByInd(elem.priority) + ') [ID_PREV=' + elem.id_prev + '] modif=' + elem.modified + ' '
   }
 
-  // getPriorityToSet(ind1, ind2) {
-  //   let elem1 = this.getelem(ind1)
-  //   let elem2 = this.getelem(ind2)
-  //
-  //   if ((elem1 !== null) && (elem2 !== null)) {
-  //     if (elem1.priority === elem2.priority) {
-  //       return elem1.priority
-  //     } else {
-  //       // if different priority then take the first
-  //       return elem1.priority
-  //     }
-  //   } else {
-  //     return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
-  //   }
-  // }
-  //
-
-  getCompleted(ind1, ind2) {
-    // let elem1 = this.getelem(ind1)
-    // let elem2 = this.getelem(ind2)
-    //
-    // if ((elem1 !== null) && (elem2 !== null)) {
-    //   if (elem1.completed === elem2.completed) {
-    //     return elem1.completed
-    //   } else {
-    //     return elem1.completed
-    //   }
-    // } else {
-    //   return (elem1 != null) ? elem1.completed : ((elem2 != null) ? elem2.completed : null)
-    // }
-
-  }
-
   getTitlePriority(priority) {
     let cl = ''
 
@@ -218,27 +185,6 @@ export default class Todo extends Vue {
 
     await Todos.actions.swapElems(itemdragend)
 
-    // If the newIndex is between another priority, then change priority
-
-    // if (!changecompleted) {
-    //   // if I changed the completed, I don't have to put in other list priority
-    //   let newpriority = this.getPriorityToSet(indini, indfine)
-    //   if (newpriority != null && newpriority >= 0) {
-    //     myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
-    //     myobj.priority = newpriority
-    //     console.log('NewPriority: ', newpriority)
-    //   }
-    // }
-
-    // let completed = this.getCompleted(indini, indfine)
-    // let changecompleted = false
-    // if (completed != null) {
-    //   myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
-    //   myobj.completed = completed
-    //   changecompleted = true
-    //   console.log('Newcompleted: ', completed, 'modif', myobj.modified)
-    // }
-
   }
 
   private getElementIndex(el: any) {
@@ -250,20 +196,6 @@ export default class Todo extends Vue {
   }
 
 
-  private getElementParentId(el: any) {
-    const elem = [].slice.call(el.parentElement.children)
-    console.log('elem', elem)
-    const id = elem.attributes['id'].substring(3)
-    return id
-  }
-
-  private getElementId(el: any) {
-    console.log(' el ', el)
-    const id = el.attributes['id'].value.substring(3)
-    return id
-  }
-
-
   created() {
     const $service = this.$dragula.$service
     $service.options('first',
@@ -288,8 +220,6 @@ export default class Todo extends Vue {
     $service.eventBus.$on('dragend', (args) => {
 
       let itemdragend: IDrag = {
-        // newIndex: this.getElementIndex(args.el),
-        // oldIndex: this.getElementOldIndex(args.el)
         category: this.categoryAtt,
         newIndex: this.getElementIndex(args.el),
         oldIndex: this.getElementOldIndex(args.el)
@@ -298,32 +228,29 @@ export default class Todo extends Vue {
       this.onEnd(itemdragend)
     })
 
-    let mythis = this
+    $service.eventBus.$on('drag', (el, source) => {
-
-    $service.eventBus.$on('drag', function (el, source) {
       // mythis.inddragging = mythis.getElementIndex(el)
-      console.log('+++ DRAG ind=', mythis.inddragging)
+      console.log('+++ DRAG ind=', this.inddragging)
-      mythis.scrollable = false
+      this.scrollable = false
     })
-    $service.eventBus.$on('drop', function (el, source) {
+    $service.eventBus.$on('drop', (el, source) => {
       console.log('+++ DROP')
-      mythis.scrollable = true
+      this.scrollable = true
     })
 
 
     this.load()
   }
 
-  mounted() {
+  mounted () {
     // console.log('*** MOUNTED ***')
 
     this.categoryAtt = this.$route.params.category
 
-    let mythis = this
     if (window) {
-      window.addEventListener('touchmove', function (e) {
+      window.addEventListener('touchmove', (e) => {
         // console.log('touchmove')
-        if (!mythis.scrollable) {
+        if (!this.scrollable) {
           e.preventDefault()
         }
       }, { passive: false })
@@ -367,7 +294,7 @@ export default class Todo extends Vue {
     }, 60000)
   }
 
-  beforedestroy() {
+  beforeDestroy() {
     clearInterval(this.polling)
   }
 
@@ -431,10 +358,6 @@ export default class Todo extends Vue {
           this.todotop = ''
         else
           this.todobottom = ''
-
-
-
-
       })
   }
 
@@ -508,18 +431,17 @@ export default class Todo extends Vue {
   getArrTodos() {
 
     let mystr = ''
-    let mythis = this
 
-    mythis.tmpstrTodos = ''
+    this.tmpstrTodos = ''
     return globalroutines(null, 'readall', 'todos', null)
-      .then(function (alldata) {
+      .then((alldata) => {
         const myrecs = [...alldata]
 
         myrecs.forEach(rec => {
           mystr = mystr + rec.descr + rec.completed + ']   ['
         })
 
-        mythis.tmpstrTodos = 'TODOS: ' + mystr
+        this.tmpstrTodos = 'TODOS: ' + mystr
       })
   }
 

src/layouts/drawer/drawer.ts

@@ -115,9 +115,8 @@ export default class Drawer extends Vue {
       .then(() => {
         this.$router.replace('/logout')
 
-        const mythis = this
+        setTimeout(() => {
-        setTimeout(function () {
+          this.$router.replace('/')
-          mythis.$router.replace('/')
         }, 1000)
 
         this.$q.notify(this.$t('logout.uscito'))

src/root/home/home.scss

@@ -1,3 +1,16 @@
+body {
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #a7a7a7;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+p {
+  margin: 0 0 16px;
+}
+
 .mycard {
   visibility: hidden;
 }
@@ -18,7 +31,7 @@
 }
 
 .landing > section.padding {
-  padding: 180px 16px
+  padding: 90px 16px
 }
 
 .landing > section > div {
@@ -61,28 +74,33 @@
   width: 150px;
   height: 150px;
   margin-top: 21px;
-  -webkit-animation: logo-rotate 240s linear infinite;
+  //-webkit-animation: logo-rotate 240s linear infinite;
-  animation: logo-rotate 240s linear infinite
+  //animation: logo-rotate 240s linear infinite
 }
 
 .landing__features .q-icon {
   font-size: 64px
 }
 
+h4{
+  line-height: 1.5;
+}
+
 .landing__features h4, .landing__features h6 {
   margin: 26px 0
 }
 
 .landing__features p {
-  opacity: .6;
+  opacity: .7;
-  font-size: 16px
+  font-size: 16px;
+  line-height: 1.5;
 }
 
 .landing__footer {
   background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
   background: linear-gradient(180deg, rgba(0, 0, 0, .1) 65%, #000);
   padding-top: 72px !important;
-  //padding-bottom: 72px !important
+  padding-bottom: 72px !important
 }
 
 .landing__footer .doc-link {
@@ -100,6 +118,15 @@
   background-image: url(https://cdn.quasar-framework.org/img/landing_first_section.png) !important
 }
 
+.feat-descr {
+  font-size: 1.25rem;
+}
+
+.q-col-gutter-xl {
+  padding: 50px 50px;
+  //margin-left: -48px
+}
+
 @media (max-width: 718px) {
   .landing__hero {
     text-align: center
@@ -113,24 +140,32 @@
     margin-bottom: 24px
   }
   .landing > section.padding {
-    padding-top: 50px;
+    padding: 40px 16px
     //padding-bottom: 90px
   }
+
+
   .landing .feature-item {
-    text-align: center
+    text-align: center;
+    margin-top: 20px;
   }
   .landing__hero-content {
-    //padding-bottom: 180px
+    padding-bottom: 180px
   }
   .landing__hero-btns {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center
   }
+
+  .q-col-gutter-xl {
+    padding: 15px 15px;
+  }
+
 }
 
 body.mobile .landing {
-  background: unset
+  //background: unset
 }
 
 body.mobile .landing:before {
@@ -142,10 +177,12 @@ body.mobile .landing:before {
   right: 0;
   bottom: 0;
   z-index: -1;
-  background: #000 url(../../statics/images/cover.jpg) 50%;
+  //background: #000 url(../../statics/images/cover.jpg) 50%;
+
   background-size: cover
 }
 
+/*
 @-webkit-keyframes logo-rotate {
   to {
     -webkit-transform: rotate(-1turn);
@@ -159,9 +196,7 @@ body.mobile .landing:before {
     transform: rotate(-1turn)
   }
 }
-
+*/
-
-
 
 .home {
   //background-color: rgb(250, 250, 250);
@@ -187,7 +222,6 @@ body.mobile .landing:before {
   text-shadow: 4px 4px 8px #000000;
 }
 
-
 .text-h1 {
   font-size: 6rem;
   font-weight: 300;
@@ -195,6 +229,13 @@ body.mobile .landing:before {
   letter-spacing: -.01562em;
 }
 
+.text-h2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 3.75rem;
+  letter-spacing: -.00833em;
+}
+
 .text-weight-bold {
   font-weight: 700;
 }
@@ -208,12 +249,52 @@ body.mobile .landing:before {
     font-size: 1.5rem;
   }
 }
-.text-subtitle2 {
 
+.text-subtitle2 {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.75rem;
   letter-spacing: .00937em;
 }
 
+.text-subtitle3 {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+}
+
+.homep-cover-img-1 {
+  background: #000 url(../../statics/images/cover.jpg) no-repeat 50% fixed;
+  transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img-2 {
+  background: #000 url(../../statics/images/all_together.jpg) no-repeat 50% fixed;
+  transition: background-image 1s ease-in-out;
+}
+
+.homep-cover-img.hide-filter:before {
+  opacity: 0
+}
+
+.landing__footer-icons {
+  font-size: 28px
+}
+
+.landing__footer-icons a {
+  margin: 0 8px 8px;
+  text-decoration: none;
+  outline: 0;
+  color: #fff;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: #e0e0e0
+}
+
+.doc-img{
+  max-width: 100%;
+}
 

src/root/home/home.ts

@@ -14,8 +14,9 @@ export default class Home extends Vue {
   displaycard: string = 'block'
   svgclass: string = 'svgclass'
   $t: any
-
+  firstClassSection: string = 'landing fade homep-cover-img animate-fade homep-cover-img-1'
   public $q
+  polling
 
   constructor() {
     super()
@@ -23,17 +24,36 @@ export default class Home extends Vue {
     this.initprompt()
   }
 
-  created() {
+  mounted() {
-    // console.log('Home created...')
+    let primo = true
+    let mytime = 10000
+    this.polling = setInterval(() => {
 
+      this.firstClassSection = 'landing fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
+      primo = !primo
+
+      console.log('this.firstClassSection', this.firstClassSection)
+
+    }, mytime)
+  }
+
+  beforeDestroy() {
+    console.log('beforeDestroy')
+    clearInterval(this.polling)
+  }
+  created() {
 
     GlobalStore.actions.prova()
   }
 
-  get isLogged(){
+  get isLogged() {
     return UserStore.state.isLogged
   }
 
+  get TelegramSupport() {
+    return process.env.TELEGRAM_SUPPORT
+  }
+
 
   meta() {
     return {
@@ -60,6 +80,10 @@ export default class Home extends Vue {
     return GlobalStore.state.conta
   }
 
+  getenv(myvar) {
+    return process.env[myvar]
+  }
+
   set conta(valore) {
     GlobalStore.actions.setConta(valore)
     let my = this.$q.i18n.lang
@@ -177,7 +201,7 @@ export default class Home extends Vue {
         tag: 'confirm-notification',
         renotify: true,  // if it's already sent, will Vibrate anyway
         actions: [
-          { action: 'confirm', title: mythis.$t('dialog.ok'), icon: '/statics/icons/android-chrome-192x192.png', }
+          { action: 'confirm', title: mythis.$t('dialog.ok'), icon: '/statics/icons/android-chrome-192x192.png' }
           // { action: 'cancel', title: 'Cancel', icon: '/statics/icons/android-chrome-192x192.png', }
         ]
       }
@@ -194,13 +218,12 @@ export default class Home extends Vue {
   askfornotification() {
     this.showNotif(this.$t('notification.waitingconfirm'), 'positive', 'notifications')
 
-    let mythis = this
+    Notification.requestPermission((result) => {
-    Notification.requestPermission(function (result) {
       console.log('User Choice', result)
       if (result === 'granted') {
-        mythis.showNotif(mythis.$t('notification.confirmed'), 'positive', 'notifications')
+        this.showNotif(this.$t('notification.confirmed'), 'positive', 'notifications')
       } else {
-        mythis.showNotif(mythis.$t('notification.denied'), 'negative', 'notifications')
+        this.showNotif(this.$t('notification.denied'), 'negative', 'notifications')
 
         // displayConfirmNotification();
       }
@@ -248,4 +271,21 @@ export default class Home extends Vue {
     }
 
   }
+
+
+/*
+  backgroundSequence() {
+    window.clearTimeout()
+    let k = 0
+    for (let i = 0; i < bgImageArray.length; i++) {
+      const mythis = this
+      setTimeout(function() {
+        document.documentElement.style.background = 'url(' + mythis.base + mythis.bgImageArray[k] + ') no-repeat center center fixed'
+        document.documentElement.style.backgroundSize = 'cover'
+        if ((k + 1) === mythis.bgImageArray.length) { setTimeout(function() { mythis.backgroundSequence() }, (mythis.secs * 1000))} else { k++ }
+      }, (mythis.secs * 1000) * i)
+    }
+  }
+  backgroundSequence()
+*/
 }

src/root/home/home.vue

@@ -1,6 +1,6 @@
 <template>
     <q-page class="text-white">
-        <div class="landing">
+        <div :class="firstClassSection">
             <section>
                 <div class="landing__hero">
                     <div class="landing__header"></div>
@@ -15,9 +15,15 @@
                                 </div>
                                 <div class="text-subtitle1 shadow big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
                                 </div>
-                                <div class="text-subtitle2 shadow text-italic q-pl-sm ">{{$t('msg.sottoTitoloApp3')}}
+                                <div class="text-subtitle2 shadow text-italic q-pl-sm">
+                                    {{$t('msg.sottoTitoloApp3')}}
                                 </div>
 
+                                <div class="text-subtitle3 shadow text-italic q-pl-sm ">
+                                    {{$t('msg.sottoTitoloApp4')}}
+                                </div>
+
+
 
                                 <!--
                                                                 <q-btn>
@@ -39,7 +45,8 @@
                                 </div>
                                 <div v-else>
                                     <div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
-                                        <q-btn rounded size="lg" color="primary" @click="PagLogin" class="btn-start">
+                                        <q-btn rounded size="lg" color="primary" @click="PagLogin"
+                                               class="btn-start">
                                             {{$t('login.enter')}}
                                         </q-btn>
                                         <q-btn rounded size="lg" color="positive" @click="PagReg" class="btn-start">
@@ -48,59 +55,134 @@
                                     </div>
                                 </div>
 
-                                <div>
+                                <div v-if="isLogged">
-                                    <q-field
+                                    <div>
-                                            v-if="getPermission() === 'granted'"
+                                        <!--<q-field-->
-                                            icon="notifications"
+                                        <!--v-if="getPermission() === 'granted'"-->
-                                            class="shadow"
+                                        <!--icon="notifications"-->
-                                            :label="$t('notification.titlegranted')"
+                                        <!--class="shadow"-->
-                                            :helper="$t('notification.statusnot')">
+                                        <!--:label="$t('notification.titlegranted')"-->
-                                    </q-field>
+                                        <!--:helper="$t('notification.statusnot')">-->
-                                    <q-field
+                                        <!--</q-field>-->
-                                            v-if="NotServiceWorker()"
+                                        <q-field
-                                            class="shadow"
+                                                v-if="NotServiceWorker()"
-                                            icon="notifications"
+                                                class="shadow"
-                                            label="Service Worker not present"
+                                                icon="notifications"
-                                    >
+                                                label="Service Worker not present"
-                                    </q-field>
+                                        >
+                                        </q-field>
+                                    </div>
+
+                                    <div>
+                                        <q-btn v-if="getPermission() !== 'granted'"
+                                               class="enable-notifications shadow"
+                                               color="primary" rounded
+                                               size="md"
+                                               icon="notifications" @click="askfornotification"
+                                               :label="$t('notification.ask')"/>
+                                        <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
+                                        <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
+
+                                    </div>
                                 </div>
 
-                                <div>
-                                    <q-btn v-if="getPermission() !== 'granted'" class="enable-notifications shadow"
-                                           color="primary" rounded
-                                           size="lg"
-                                           icon="notifications" @click="askfornotification"
-                                           :label="$t('notification.ask')"/>
-                                    <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
-                                    <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
 
+                                <div class="q-pt-md q-pl-sm">
+                                    <div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
                                 </div>
-
-                                <!--<div class="q-pt-md q-pl-sm">-->
-                                <!--<div class="landing__hero-btns q-gutter-md row items-center"><a tabindex="0"-->
-                                <!--type="button"-->
-                                <!--href="/introduction-to-quasar"-->
-                                <!--class="q-btn inline relative-position q-btn-item non-selectable q-btn&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
-                                <!--<div class="q-focus-helper"></div>-->
-                                <!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;skip justify-center row">-->
-                                <!--<div>About</div>-->
-                                <!--</div>-->
-                                <!--</a><a tabindex="0" type="button" href="/start"-->
-                                <!--class="q-btn inline relative-position q-btn-item non-selectable q-btn&#45;&#45;rectangle bg-white text-primary q-focusable q-hoverable q-btn&#45;&#45;push">-->
-                                <!--<div class="q-focus-helper"></div>-->
-                                <!--<div class="q-btn__content text-center col items-center q-anchor&#45;&#45;skip justify-center row">-->
-                                <!--<div>Get started</div>-->
-                                <!--</div>-->
-                                <!--</a>-->
-                                <!--<div class="text-body2">v1.0.0-beta.4</div>-->
-                                <!--</div>-->
-                                <!--</div>-->
                             </div>
                         </div>
                     </div>
+                    <div class="landing__arrow absolute-bottom text-center">
+                        <i aria-hidden="true" class="q-icon text-h2 text-white material-icons">expand_more</i>
+                    </div>
                 </div>
             </section>
+
+            <section class="padding bg-white text-grey-10 text-center">
+                <div class="landing__features row items-start q-col-gutter-xl">
+                    <div class="col-12 text-center">
+                        <div class="feature-item q-mx-md"><img src="statics/images/group-together.jpg"
+                                                               class="doc-img"></div>
+                    </div>
+                    <div class="col-12 text-center"><h4>{{$t('homepage.descrapp_title1')}}</h4>
+                        <p v-html="$t('homepage.descrapp_pag1')"></p>
+                        <p v-html="$t('homepage.descrapp_pag2')"></p>
+                    </div>
+                </div>
+            </section>
+            <section class="padding bg-primary landing__swirl-bg">
+                <div class="landing__features row justify-between items-start q-col-gutter-xl">
+                    <div class="col-12 col-sm-5">
+                        <div class="feature-item"><i aria-hidden="true"
+                                                     class="q-icon fas fa-users"> </i><h4>
+                            {{$t('homepage.freesocial.title')}}</h4>
+                            <p class="feat-descr" v-html="$t('homepage.freesocial.descr')"></p></div>
+                    </div>
+                    <div class="col-12 col-sm-5">
+                        <div class="feature-item"><i aria-hidden="true"
+                                                     class="q-icon fas fa-users"> </i><h4>
+                            {{$t('homepage.freetalent.title')}}</h4>
+                            <p class="feat-descr" v-html="$t('homepage.freetalent.descr')"></p></div>
+                    </div>
+                    <div class="col-12 col-sm-5">
+                        <div class="feature-item"><i aria-hidden="true"
+                                                     class="q-icon fas fa-users"> </i><h4>
+                            {{$t('homepage.freegas.title')}}</h4>
+                            <p class="feat-descr" v-html="$t('homepage.freegas.descr')"></p></div>
+                    </div>
+                    <div class="col-12 col-sm-5">
+                        <div class="feature-item"><i aria-hidden="true"
+                                                     class="q-icon fas fa-users"> </i><h4>
+                            {{$t('homepage.free.title')}}</h4>
+                            <p class="feat-descr" v-html="$t('homepage.free.descr')"></p></div>
+                    </div>
+                    <div class="col-12 col-sm-5">
+                        <div class="feature-item"><i aria-hidden="true"
+                                                     class="q-icon fas fa-browser"> </i>
+                            <div class="q-gutter-sm"><i aria-hidden="true"
+                                                        class="q-icon fas fa-browser"> </i><i
+                                    aria-hidden="true" class="q-icon fab fa-chrome"> </i><i
+                                    aria-hidden="true" class="q-icon fab fa-firefox"> </i><i
+                                    aria-hidden="true" class="q-icon fab fa-safari"> </i><i
+                                    aria-hidden="true" class="q-icon fab fa-edge"> </i></div>
+
+                            <h4>{{$t('homepage.multiplatform.title')}}</h4>
+                            <p class="feat-descr" v-html="$t('homepage.multiplatform.descr')"></p></div>
+                    </div>
+                </div>
+            </section>
+            <section class="landing__footer">
+                <div class="text-center">
+                    <div class="landing__footer-icons row flex-center">
+                        <a :href="TelegramSupport" target="_blank"><i aria-hidden="true"
+                                                                                 class="q-icon fab fa-telegram dark"></i></a>
+                        <!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
+                        <!--<a href="https://twitter.com/" target="_blank"><i aria-hidden="true" class="q-icon fab fa-twitter"> </i></a>-->
+                            <!--<a href="https://discord.gg/5TDhbDg" target="_blank"><i aria-hidden="true"-->
+                                                                                 <!--class="q-icon fab fa-discord"> </i></a><a-->
+                            <!--href="https://forum.quasar-framework.org/" target="_blank"><i aria-hidden="true"-->
+                                                                                          <!--class="q-icon fas fa-comments"> </i></a><a-->
+                            <!--href="https://www.patreon.com/quasarframework" target="_blank"><i aria-hidden="true"-->
+                                                                                              <!--class="q-icon fab fa-patreon"> </i></a>-->
+                    </div>
+
+                    <div class="q-mt-md">Released under the
+                        <!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
+                            <!--rel="noopener noreferrer" class="doc-link">-->
+                        MIT LICENSE
+                        <!--<i aria-hidden="true"-->
+                                                                                     <!--class="q-icon material-icons">launch</i></a>-->
+                        <!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
+                             <!--rel="noopener noreferrer" class="doc-link">Privacy Policy<i aria-hidden="true"-->
+                                                                                         <!--class="q-icon material-icons">launch</i></a>-->
+                    </div>
+
+                </div>
+            </section>
+
         </div>
+
     </q-page>
 
 

src/router/route-config.ts

@@ -43,7 +43,10 @@ export const RouteConfig: VueRouteConfig[] = [
   {
     path: '/admin/cfgserv',
     name: 'cfgserv',
-    component: () => import('@/components/admin/cfgServer/cfgServer.vue')
+    component: () => import('@/components/admin/cfgServer/cfgServer.vue'),
+    meta: {
+      middleware: [auth]
+    }
   },
   {
     path: '/admin/testp1/:category',