Components Gallery, Book, Card, CImgText .... continue...

src/components/BannerCookies/BannerCookies.scss

@@ -0,0 +1,17 @@
+// Animations
+// slideFromBottom
+.slideFromBottom-enter, .slideFromBottom-leave-to {
+  transform: translate(0px, 10em);
+}
+
+.slideFromBottom-enter-to, .slideFromBottom-leave {
+  transform: translate(0px, 0px);
+}
+
+.slideFromBottom-enter-active {
+  transition: transform .2s ease-out;
+}
+
+.slideFromBottom-leave-active {
+  transition: transform .2s ease-in;
+}

src/components/BannerCookies/BannerCookies.ts

@@ -0,0 +1,128 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import Quasar, { Screen } from 'quasar'
+import { Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'BannerCookies'
+})
+
+export default class BannerCookies extends Vue {
+  public $t
+  @Prop({ required: true }) public urlInfo: string
+
+  public elementId = 'id'
+  public disableDecline = true
+  public debug = false
+  public status = null
+  public supportsLocalStorage = true
+  public isOpen = false
+
+  public init() {
+    const visitedType = this.getCookieStatus()
+    if (visitedType && (visitedType === 'accept' || visitedType === 'decline' || visitedType === 'postpone')) {
+      this.isOpen = false
+    }
+
+    if (!visitedType) {
+      this.isOpen = true
+    }
+    if (!this.supportsLocalStorage)
+      this.isOpen = false
+
+    this.status = visitedType
+    this.$emit('status', visitedType)
+  }
+
+  public mounted() {
+    this.init()
+  }
+
+  public checkLocalStorageFunctionality() {
+    // Check for availability of localStorage
+    try {
+      const test = '__cookie-check-localStorage'
+      window.localStorage.setItem(test, test)
+      window.localStorage.removeItem(test)
+    } catch (e) {
+      console.error('Local storage is not supported, falling back to cookie use')
+      this.supportsLocalStorage = false
+    }
+  }
+
+  public setCookieStatus(type) {
+    if (this.supportsLocalStorage) {
+      if (type === 'accept') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'accept')
+      }
+      if (type === 'decline') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'decline')
+      }
+      if (type === 'postpone') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'postpone')
+      }
+    } else {
+      /*if (type === 'accept') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'accept')
+      }
+      if (type === 'decline') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'decline')
+      }
+      if (type === 'postpone') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'postpone')
+      }*/
+    }
+  }
+
+  public getCookieStatus() {
+    if (this.supportsLocalStorage) {
+      return localStorage.getItem(`cookie-${this.elementId}`)
+    } else {
+      // return tinyCookie.get(`cookie-${this.elementId}`)
+    }
+  }
+
+  public accept() {
+    if (!this.debug) {
+      this.setCookieStatus('accept')
+    }
+
+    this.status = 'accept'
+    this.isOpen = false
+    this.$emit('clicked-accept')
+  }
+
+  public decline() {
+    if (!this.debug) {
+      this.setCookieStatus('decline')
+    }
+
+    this.status = 'decline'
+    this.isOpen = false
+    this.$emit('clicked-decline')
+  }
+
+  public clickInfo() {
+    this.isOpen = false
+  }
+
+  public postpone() {
+    if (!this.debug) {
+      this.setCookieStatus('postpone')
+    }
+
+    this.status = 'postpone'
+    this.isOpen = false
+    this.$emit('clicked-postpone')
+  }
+
+  public removeCookie() {
+    localStorage.removeItem(`cookie-${this.elementId}`)
+    this.status = null
+    this.$emit('removed-cookie')
+  }
+}

src/components/BannerCookies/BannerCookies.vue

@@ -0,0 +1,25 @@
+<template>
+    <div v-if="isOpen">
+        <div class="q-pa-md q-gutter-sm tothebottomfixed">
+            <transition appear name="slide-up" mode="out-in" :duration="2000">
+                <q-banner class="bg-primary text-white" transition-show="jump-down">
+                    Usiamo i Cookie per una migliore prestazione web.
+                    <template v-slot:action>
+                        <q-btn v-if="disableDecline === false" flat color="white" label="Declina"
+                               @click="decline"></q-btn>
+                        <q-btn flat color="white" label="INFO" type="a" :href="urlInfo" @click="clickInfo"></q-btn>
+                        <q-btn flat color="white" label="OK" @click="accept"></q-btn>
+                    </template>
+                </q-banner>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./BannerCookies.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './BannerCookies.scss';
+</style>
+

src/components/BannerCookies/index.ts

@@ -0,0 +1 @@
+export {default as BannerCookies} from './BannerCookies.vue'

src/components/CBook/CBook.scss

@@ -0,0 +1,66 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}

src/components/CBook/CBook.ts

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IPerson } from '../../model/GlobalStore'
+
+@Component({
+  name: 'CBook',
+  filters: {
+    firstchars(value) {
+      return tools.firstchars(value, 250)
+    }
+  }
+})
+
+export default class CBook extends Vue {
+  @Prop({ required: true, default: 'one' }) public tab
+
+  public clicca() {
+    this.tab = 'two'
+  }
+
+  @Prop({ required: true }) public op: IPerson
+
+  get tools() {
+    return tools
+  }
+
+  get myop() {
+    if (!!this.op) {
+      return this.op
+    } else {
+      return {
+        index: 0,
+        tab: '',
+        name: '',
+        sub1: '',
+        sub2: '',
+        sub3: '',
+        img: '',
+        cell: '',
+        email: '',
+        paginaweb: '',
+        paginafb: '',
+        intro: '',
+        info: ''
+      }
+    }
+  }
+
+}

src/components/CBook/CBook.vue

@@ -0,0 +1,47 @@
+<template>
+    <q-card class="my-card text-center">
+        <q-img :src="myop.img" class="myimg">
+            <div class="absolute-bottom text-spacetrans text-shadow">
+                <div class="text-h6 text-trans">{{myop.name}}</div>
+                <div class="text-subtitle-carica text-trans">{{myop.sub1}}</div>
+            </div>
+        </q-img>
+
+        <q-tabs v-model="tab" class="text-teal">
+            <q-tab label="Info" name="one"></q-tab>
+            <q-tab label="Storia" name="two"></q-tab>
+        </q-tabs>
+
+        <q-separator></q-separator>
+
+        <q-tab-panels v-model="tab" animated>
+            <q-tab-panel name="one">
+                <div class="text-subtitle-carica">{{myop.sub2}}</div>
+                <div v-if="myop.sub3" class="text-subtitle-certificato">{{myop.sub3}}</div>
+                <div class="op__cell">
+                    <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
+                    {{myop.cell}}
+                </div>
+
+                <div class="op__storia" v-html="myop.intro"></div>
+                <q-btn rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
+            </q-tab-panel>
+
+            <q-tab-panel name="two">
+                <div class="op__storia" v-html="myop.info"></div>
+            </q-tab-panel>
+        </q-tab-panels>
+
+        <!--<q-card-section>-->
+        <!--<div class="text-subtitle3">{{myop.sub2}}</div>-->
+        <!--{{myop.info}}-->
+        <!--</q-card-section>-->
+    </q-card>
+</template>
+
+<script lang="ts" src="./CBook.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CBook.scss';
+</style>

src/components/CBook/index.ts

@@ -0,0 +1 @@
+export {default as CBook} from './CBook.vue'

src/components/CCard/CCard.scss

@@ -0,0 +1,66 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}

src/components/CCard/CCard.ts

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { IPerson } from '../../model/GlobalStore'
+
+@Component({
+  name: 'CCard',
+  filters: {
+    firstchars(value) {
+      return tools.firstchars(value, 250)
+    }
+  }
+})
+
+export default class CCard extends Vue {
+  @Prop({ required: true, default: 'one' }) public tab
+
+  public clicca() {
+    this.tab = 'two'
+  }
+
+  @Prop({ required: true }) public op: IPerson
+
+  get tools() {
+    return tools
+  }
+
+  get myop() {
+    if (!!this.op) {
+      return this.op
+    } else {
+      return {
+        index: 0,
+        tab: '',
+        name: '',
+        sub1: '',
+        sub2: '',
+        sub3: '',
+        img: '',
+        cell: '',
+        email: '',
+        paginaweb: '',
+        paginafb: '',
+        intro: '',
+        info: ''
+      }
+    }
+  }
+
+}

src/components/CCard/CCard.vue

@@ -0,0 +1,59 @@
+<template>
+    <q-card class="my-card text-center">
+        <q-img :src="myop.img" class="myimg">
+            <div class="absolute-bottom text-spacetrans text-shadow">
+                <div class="text-h6 text-trans">{{myop.name}}</div>
+                <div class="text-subtitle-carica text-trans">{{myop.sub1}}</div>
+            </div>
+        </q-img>
+
+        <q-tabs v-model="tab" class="text-teal">
+            <q-tab label="Info" name="one"></q-tab>
+            <q-tab label="Storia" name="two"></q-tab>
+        </q-tabs>
+
+        <q-separator></q-separator>
+
+        <q-tab-panels v-model="tab" animated>
+            <q-tab-panel name="one">
+                <div class="text-subtitle-carica">{{myop.sub2}}</div>
+                <div v-if="myop.sub3" class="text-subtitle-certificato">{{myop.sub3}}</div>
+                <div class="op__cell">
+                    <q-icon class="flex-icon" name="mobile_friendly"></q-icon>
+                    {{myop.cell}}
+                </div>
+                <div class="op__email">
+                    <q-icon class="flex-icon" name="contact_mail"> </q-icon>&nbsp;
+                    <a :href="tools.getemailto(myop.email)" target="_blank">{{myop.email}}
+                    </a>
+                </div>
+
+                <div class="op__facebook" v-if="myop.paginafb">
+                    <a :href="myop.paginafb" target="_blank">
+                        <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina Facebook
+                    </a>
+                </div>
+
+
+                <div class="op__storia" v-html="myop.intro"></div>
+                <q-btn rounded size="sm" color="secondary" @click="clicca()">Continua ...</q-btn>
+            </q-tab-panel>
+
+            <q-tab-panel name="two">
+                <div class="op__storia" v-html="myop.info"></div>
+            </q-tab-panel>
+        </q-tab-panels>
+
+        <!--<q-card-section>-->
+        <!--<div class="text-subtitle3">{{myop.sub2}}</div>-->
+        <!--{{myop.info}}-->
+        <!--</q-card-section>-->
+    </q-card>
+</template>
+
+<script lang="ts" src="./CCard.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCard.scss';
+</style>

src/components/CCard/index.ts

@@ -0,0 +1 @@
+export {default as CCard} from './CCard.vue'

src/components/CImgText/CImgText.scss

@@ -0,0 +1,54 @@
+
+.imgtext {
+  display: flex;
+  justify-content: space-between;
+  /* flex-flow: row nowrap; */
+
+  padding: 1rem 0 1rem 0;
+  margin: .125rem;
+
+  * {
+    width: 100%;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__img {
+    min-width: 250px;
+  }
+  &__imgh100 {
+    max-height: 100px;
+  }
+  &__imgh150 {
+    max-height: 150px;
+  }
+  &__imgw150 {
+    max-width: 150px;
+  }
+  &__imgw100 {
+    max-width: 100px;
+  }
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .landing > section.padding_testo {
+    padding-top: 0.5rem;
+    padding-bottom: 0.1rem;
+  }
+
+  .imgtext {
+    padding: 0.25rem 0 0.25rem 0;
+  }
+
+}
+
+.landing > section.padding_testo {
+  padding-top: 1rem;
+  padding-bottom: 0.25rem;
+}
+
+.section_text {
+  padding: 10px;
+}

src/components/CImgText/CImgText.ts

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+
+// Vue.use(VueScrollReveal, {
+//   class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
+//   duration: 1200,
+//   scale: 0.95,
+//   distance: '10px',
+//   rotate: {
+//     x: 0,
+//     y: 0,
+//     z: 0
+//   }
+//   // mobile: true
+// })
+
+@Component({
+  name: 'CImgText'
+})
+export default class CImgText extends Vue {
+  @Prop({ required: false, default: '' }) public src: string
+  @Prop({ required: false, default: '' }) public class1: string
+  @Prop({ required: false, default: '' }) public style1: string
+}

src/components/CImgText/CImgText.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <section class="padding_testo bg-white text-grey-10 text-justify" >  <!-- v-scroll-reveal.reset -->
+            <div class="row items-start q-col-gutter-xs imgtext">
+                <div class="imgtext__img">
+                    <img v-if="src" :src="src" :class="class1" :style="style1">
+                    <div class="section_text">
+                    <slot></slot>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts" src="./CImgText.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CImgText.scss';
+</style>

src/components/CImgText/index.ts

@@ -0,0 +1 @@
+export {default as CImgText} from './CImgText.vue'

src/components/CPage/CPage.ts

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { Logo } from '../../components/logo'
+
+import { Footer } from '../../components/Footer'
+
+import VueScrollReveal from 'vue-scroll-reveal'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+
+Vue.use(VueScrollReveal, {
+  class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.
+  duration: 1200,
+  scale: 0.95,
+  distance: '10px',
+  rotate: {
+    x: 0,
+    y: 0,
+    z: 0
+  }
+  // mobile: true
+})
+
+@Component({
+  name: 'CPage',
+  components: { Logo, Footer }
+})
+export default class CPage extends Vue {
+  @Prop({ required: true }) public imghead: string = ''
+  @Prop({ required: true }) public headtitle: string = ''
+  @Prop({ required: true }) public img1: string = ''
+  @Prop({ required: true }) public text1: string = ''
+}

src/components/CPage/CPage.vue

@@ -0,0 +1,28 @@
+<template>
+    <q-page class="text-white">
+        <div class="landing">
+            <CTitle :src="imghead" :title="headtitle">
+            </CTitle>
+
+            <section class="padding_testo bg-white text-grey-10 text-center" v-scroll-reveal.reset>
+                <div class="landing__features row items-start q-col-gutter-xs intro">
+                    <div class="intro__associazione">
+                        <!--<img src="../../statics/images/scuolaopbenessere/16427623_404497389905092_1266178961781563443_n.jpg">-->
+                        <img :src="img1">
+                        {{text1}}
+                    </div>
+                </div>
+            </section>
+
+            <Footer></Footer>
+        </div>
+
+    </q-page>
+
+
+</template>
+<script lang="ts" src="./CPage.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CPage.scss';
+</style>

src/components/CPage/index.ts

@@ -0,0 +1 @@
+export {default as CPage} from './CPage.vue'

src/components/CTitle/CTitle.scss

@@ -0,0 +1,18 @@
+
+.cltitlebg{
+
+}
+
+.titletext {
+  color: white;
+  font-size: 3rem;
+  font-weight: 500;
+  line-height: 3rem;
+  text-shadow: .25rem .25rem .5rem black;
+  letter-spacing: .00937em;
+}
+
+
+.q-img__content > div{
+  background: rgba(0,0,0,0.17) !important;
+}

src/components/CTitle/CTitle.ts

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { GlobalStore, UserStore } from '@store'
+
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+
+@Component({
+  name: 'CTitle'
+})
+export default class CTitle extends Vue {
+  @Prop({ required: false, default: '' }) public imgbackground: string
+  @Prop({ required: false, default: '' }) public imghead: string
+  @Prop({ required: true }) public headtitle: string
+
+  get tools() {
+    return tools
+  }
+}

src/components/CTitle/CTitle.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <q-img v-if="imgbackground" :src="imgbackground"
+               :style="tools.styles_imgtitle()">
+
+            <div class="absolute-bottom text-body1 text-center">
+                <h2 class="titletext">{{headtitle}}</h2>
+            </div>
+        </q-img>
+
+        <!--
+        <q-parallax :height="tools.myheight_imgtitle()" :width="tools.mywidth_imgtitle()">
+            <template v-slot:media>
+                <img :src="imgbackground" class="cltitlebg">
+            </template>
+            <h2 class="titletext">{{headtitle}}</h2>
+        </q-parallax>
+        -->
+
+    </div>
+</template>
+
+<script lang="ts" src="./CTitle.ts">
+</script>
+<style lang="scss" scoped>
+    @import './CTitle.scss';
+</style>

src/components/CTitle/index.ts

@@ -0,0 +1 @@
+export {default as CTitle} from './CTitle.vue'

src/components/Footer/Footer.scss

@@ -0,0 +1,180 @@
+$grayshadow: #555;
+
+$textcol: blue;
+$textcol_scuro: darkblue;
+
+
+.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, .8) 95%, #FFF);
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  color: #9f9f9f;
+}
+
+.icon_contact:hover {
+  color: blue;
+  border-color: white;
+  border-width: .0625rem;
+}
+
+.landing__footer .doc-link {
+  color: $textcol;
+}
+
+.landing__footer .doc-link:hover {
+  opacity: .8
+}
+
+.landing__swirl-bg {
+  background-repeat: no-repeat !important;
+  background-position: top;
+  background-size: contain !important;
+  background-image: url(../../statics/images/landing_first_section.png) !important
+}
+
+
+.landing__footer-icons {
+  font-size: 1.75rem
+}
+
+.landing__footer-icons a {
+  margin: 0 .5rem .5rem;
+  text-decoration: none;
+  outline: 0;
+  color: $textcol;
+  transition: color .28s
+}
+
+.landing__footer-icons a:hover {
+  color: $textcol_scuro;
+}
+
+.doc-img {
+  max-width: 100%;
+}
+
+.mylist {
+  background: #3fdaff;
+  padding-left: 1.25rem;
+}
+
+.clgutter {
+  margin-top: 1.25rem;
+  padding: .62rem;
+}
+
+.carousel_img_3 {
+  //background-image: url(../../statics/images/cibo_sano.jpg);
+  background-size: cover !important;
+  background-position: 50% center !important;
+  background-repeat: no-repeat !important;
+}
+
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+
+  .landing__hero {
+    text-align: center
+  }
+  .landing__header {
+    height: 7vh
+  }
+  .clgutter {
+    margin-top: 0;
+    padding: 0;
+  }
+  .landing__hero .text-h1 {
+    font-size: 3rem;
+    line-height: 3.05rem;
+    margin-bottom: 1.5rem
+  }
+
+  .landing > section.padding {
+    padding: 2.5rem 1rem;
+  }
+
+  .landing > section.padding_testo {
+    padding-top: 1.25rem;
+    padding-bottom: 1rem;
+  }
+
+  .landing > section.padding_gallery {
+    padding-top: 3.125rem;
+    padding-bottom: 5.625rem;
+  }
+
+  .landing__features h4, .landing__features h6 {
+    margin: 1.25rem 0
+  }
+
+  h4 {
+    line-height: 1.4;
+    text-shadow: 0.25rem 0.25rem 0.5rem $grayshadow;
+  }
+
+  .landing .feature-item {
+    text-align: center;
+    margin-top: 1.25rem;
+  }
+  .landing__hero-content {
+    padding-bottom: 11.25rem;
+  }
+  .landing__hero-btns {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  .q-col-gutter-sm {
+    padding: .625rem .315rem;
+  }
+
+  .text-vers{
+    font-size: 0.6rem;
+  }
+
+  .carousel_img_3 {
+    //background-image: url(../../statics/images/cibo_sano.jpg);
+    background-size: 620px 620px !important;
+    background-position: 50% top !important;
+    background-repeat: no-repeat !important;
+  }
+
+}
+
+.custom-caption {
+  text-align: center;
+  padding: .75rem;
+  color: $textcol;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+.mycontacts {
+  color: gray;
+  letter-spacing: 0.078rem;
+}
+
+.mycontacts_title {
+  text-shadow: 0.125rem 0.125rem 0.125rem #555;
+  font-weight: bold;
+  color: #999;
+  letter-spacing: 0.125rem;
+}
+
+.mycontacts_text {
+  color: #999;
+  letter-spacing: normal !important;
+}
+
+.footer_link {
+  font-size: 1rem;
+  color:gray;
+}
+
+.footer_link:hover {
+  color:white;
+}

src/components/Footer/Footer.ts

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+
+import { GlobalStore, UserStore } from '@modules'
+import { Logo } from '../logo'
+
+import { Component, Prop } from 'vue-property-decorator'
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { db_data } from '@src/db/db_data'
+import { static_data } from '@src/db/static_data'
+
+import Quasar from 'quasar'
+import { FormNewsletter } from '../FormNewsletter'
+
+@Component({
+  name: 'Footer',
+  components: { Logo, FormNewsletter }
+})
+
+export default class Footer extends Vue {
+  public $t
+  public $v
+  public $q
+
+  get TelegramSupport() {
+    return db_data.TELEGRAM_SUPPORT
+  }
+
+  get FBPage() {
+    return db_data.URL_FACEBOOK
+  }
+
+  get static_data(){
+    return static_data
+  }
+}

src/components/Footer/Footer.vue

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <section class="landing__footer">
+            <div class="row justify-between items-start q-col-gutter-xs">
+                <div class="col-12 col-sm-4 ">
+                    <p style="text-align: center">
+                        <logo></logo>
+                    </p>
+                    <!--<span v-html="$t('homepage.footer.description')">-->
+                    <!--</span>-->
+
+
+                    <FormNewsletter v-if="static_data.SHOW_NEWSLETTER"
+
+                    >
+                    </FormNewsletter>
+
+                </div>
+                <div class="col-12 col-sm-4">
+                    <div class="text-center">
+
+                        <div class="q-mt-xs mycontacts">
+                            <p class="mycontacts_title">{{$t('homepage.titlecontatti')}}</p>
+
+
+                            <p class="mycontacts_text" v-html="$t('homepage.contacts')"></p>
+                        </div>
+                        <div class="landing__footer-icons row flex-center">
+                            <a :href="FBPage" target="_blank">
+                                <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"> </i></a>
+
+                            <a :href="TelegramSupport" target="_blank">
+                                <i aria-hidden="true" class="q-icon fab fa-telegram icon_contact links"></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>
+
+                </div>
+
+                <div class="col-12 col-sm-4 q-pa-md" v-for="">
+                    <a href="/"><span class="footer_link">Home</span></a><br />
+                </div>
+
+                <!--
+                <div class="col-12 col-sm-4 q-pa-md">
+                    <a href="/"><span class="footer_link">Home</span></a><br />
+                    <a href="/chisiamo"><span class="footer_link">Chi Siamo</span></a><br />
+                    <a href="/calendarioeventi"><span class="footer_link">Calendario Eventi</span></a><br />
+                    <a href="/reiki/significato"><span class="footer_link">Reiki</span></a><br />
+                    <a href="/reiki/seminari"><span class="footer_link"> - Seminari Reiki</span></a><br />
+                    <a href="/reiki/trattamentiindividuali"><span class="footer_link"> - Trattamenti Individuali</span></a><br />
+                    <a href="/reiki/seratereikigruppo"><span class="footer_link"> - Serate di Gruppo</span></a><br />
+                    <a href="/shiatsu/significato"><span class="footer_link">Shiatsu</span></a><br />
+                    <a href="/shiatsu/trattamentiindividuali"><span class="footer_link"> - Trattamenti Individuali</span></a><br />
+                    <a href="/shiatsu/energyyoga"><span class="footer_link"> - Energy Yoga</span></a><br />
+                    <a href="/fioridibach"><span class="footer_link">Fiori di Bach</span></a><br />
+                    <a href="/scuolaoperatoreolistico"><span class="footer_link">Scuola Operatore Olistico</span></a><br />
+                    <a href="/scuoladinaturopatia"><span class="footer_link">Scuola di Naturopatia</span></a><br />
+
+
+                    <br /><a href="/policy"><span class="footer_link">Privacy Policy</span></a><br />
+                </div>
+                -->
+            </div>
+        </section>
+        <q-page-scroller position="bottom-right" :scroll-offset="850" :offset="[18, 18]" style="opacity: 0.3">
+            <q-btn fab icon="keyboard_arrow_up" color="accent"/>
+        </q-page-scroller>
+    </div>
+</template>
+
+<script lang="ts" src="./Footer.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './Footer.scss';
+</style>

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export {default as Footer} from './Footer.vue'

src/components/FormNewsletter/FormNewsletter.scss

@@ -0,0 +1,30 @@
+// Animations
+// slideFromBottom
+.slideFromBottom-enter, .slideFromBottom-leave-to {
+  transform: translate(0px, 10em);
+}
+
+.slideFromBottom-enter-to, .slideFromBottom-leave {
+  transform: translate(0px, 0px);
+}
+
+.slideFromBottom-enter-active {
+  transition: transform .2s ease-out;
+}
+
+.slideFromBottom-leave-active {
+  transition: transform .2s ease-in;
+}
+
+.news_title {
+  color: white;
+  font-size: 1rem;
+}
+
+.news_link {
+  color: gray;
+}
+
+.news_link:hover {
+  color: white;
+}

src/components/FormNewsletter/FormNewsletter.ts

@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import Quasar, { Screen } from 'quasar'
+import { Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'FormNewsletter'
+})
+
+export default class FormNewsletter extends Vue {
+  public $t
+  public $q
+  public name: string = null
+  public email: string = null
+  public accept: boolean = false
+
+  public onSubmit() {
+    if (this.accept !== true) {
+      
+      this.$q.notify({
+        color: 'red-5',
+        textColor: 'white',
+        icon: 'fas fa-exclamation-triangle',
+        message: this.$t('newsletter.license')
+      })
+    }
+    else {
+      this.$q.notify({
+        color: 'green-4',
+        textColor: 'white',
+        icon: 'fas fa-check-circle',
+        message: this.$t('newsletter.submitted')
+      })
+    }
+  }
+
+  public onReset() {
+    this.name = null
+    this.email = null
+    this.accept = false
+  }
+
+}

src/components/FormNewsletter/FormNewsletter.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div class="q-pa-md q-gutter-sm text-white">
+            <p class="news_title">Desideri ricevere la nostra Newsletter?</p>
+            <q-form
+                    @submit="onSubmit"
+                    @reset="onReset"
+                    class="q-gutter-md"
+            >
+                <q-input
+                        filled
+                        dark standout
+                        v-model="name"
+                        :label="$t('newsletter.name') + `*`"
+                        :hint="$t('newsletter.namehint')"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 0 || $t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <q-input
+                        filled
+                        dark standout
+                        v-model="email"
+                        :label="$t('newsletter.email') + `*`"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 6 || $t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <a href="/policy"><span class="news_link">Privacy Policy</span></a>
+
+                <q-toggle dark v-model="accept" :label="$t('newsletter.acceptlicense')"/>
+
+                <div>
+                    <q-btn :label="$t('newsletter.submit')" type="submit" color="primary"/>
+                    <q-btn :label="$t('newsletter.reset')" type="reset" color="primary" flat class="q-ml-sm"/>
+                </div>
+            </q-form>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./FormNewsletter.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './FormNewsletter.scss';
+</style>
+

src/components/FormNewsletter/index.ts

@@ -0,0 +1 @@
+export {default as FormNewsletter} from './FormNewsletter.vue'

src/components/Header/Header.ts

@@ -38,10 +38,6 @@ export default class Header extends Vue {
   public photo = ''
   public visuimg: boolean = true
 
-  public selectOpLang() {
-    return static_data.lang_available
-
-  }
 
   get getappname(){
     if (Screen.width < 400) {
@@ -205,10 +201,10 @@ export default class Header extends Vue {
   }
 
   public setshortlang(lang) {
-    for (const indrec in this.selectOpLang) {
-      if (this.selectOpLang[indrec].value === lang) {
-        // console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
-        this.langshort = this.selectOpLang[indrec].short
+    for (const indrec in static_data.lang_available) {
+      if (static_data.lang_available[indrec].value === lang) {
+        // console.log('static_data.lang_available[indrec].short', static_data.lang_available[indrec].short, static_data.lang_available[indrec].value)
+        this.langshort = static_data.lang_available[indrec].short
         return
       }
     }
@@ -220,7 +216,7 @@ export default class Header extends Vue {
   }
 
   public setLangAtt(mylang) {
-    console.log('MYLL=', mylang)
+    console.log('LANG =', mylang)
     // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
 
     // dynamic import, so loading on demand only

src/components/Header/Header.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <q-header reveal elevated class="bg-primary text-white">
+        <q-header reveal elevated class="bg-primary">
             <q-toolbar
                     color="primary"
                     :glossy="$q.theme === 'mat'"
@@ -72,7 +72,7 @@
 
                 <q-btn-dropdown
                         stretch
-                        v-if="selectOpLang.length > 1"
+                        v-if="static_data.lang_available.length > 1"
                         flat
                         :label="langshort"
                         auto-close
@@ -80,7 +80,7 @@
                     <q-list bordered>
                         <q-item clickable v-ripple
 
-                                v-for="langrec in selectOpLang" :key="langrec.value"
+                                v-for="langrec in static_data.lang_available" :key="langrec.value"
                                 @click="lang = langrec.value">
                             <q-item-section avatar>
                                 <img :src="langrec.image" class="flagimg">
@@ -102,7 +102,8 @@
                     <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                 </div>-->
 
-                <q-btn dense flat round icon="menu" @click="right = !right"/>
+                <q-btn v-if="static_data.SHOW_USER_MENU" dense flat round icon="menu" @click="right = !right">
+                </q-btn>
 
             </q-toolbar>
 
@@ -120,11 +121,11 @@
 
         </q-drawer>
 
-        <q-drawer v-model="right" side="right" overlay bordered>
+        <q-drawer v-if="static_data.SHOW_USER_MENU" v-model="right" side="right" overlay bordered>
             <div id="profile">
-                <q-img class="absolute-top" src="https://cdn.quasar-framework.org/img/material.png"
+                <q-img class="absolute-top" src="../../statics/images/landing_first_section.png"
                        style="height: 150px">
-                    <div class="absolute-bottom bg-transparent">
+                    <div class="absolute-bottom bg-transparent text-black">
 
                         <q-avatar class="q-mb-sm">
                             <img src="../../statics/images/avatar-1.svg">

src/components/PagePolicy/PagePolicy.scss

@@ -0,0 +1,11 @@
+$grayshadow: #555;
+
+$textcol: blue;
+$textcol_scuro: darkblue;
+
+
+p {
+  color: black;
+  margin: 0 0 1rem;
+  //text-shadow: .125rem .125rem .25rem $grayshadow;
+}

src/components/PagePolicy/PagePolicy.ts

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+import { tools } from '@src/store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+import { Screen } from 'quasar'
+import { ICategory } from '../../model'
+import { Footer } from '../../components/Footer/index'
+
+@Component({
+  name: 'PagePolicy',
+  components: { Footer }
+})
+export default class PagePolicy extends Vue {
+  @Prop({required: true}) public owneremail: string
+  @Prop({required: true}) public SiteName: string
+  @Prop({required: true}) public ownerDataName: string
+  @Prop({required: true}) public managerData: string
+  @Prop({required: true}) public includeData: string
+  @Prop({required: true}) public url: string
+  @Prop({required: true}) public lastdataupdate: string
+
+}

src/components/PagePolicy/PagePolicy.vue

@@ -0,0 +1,130 @@
+<template>
+    <q-page class="q-pa-md">
+        <p class="text-subtitle1">Privacy Policy di {{url}}</p>
+        <p class="text-subtitle1">Informativa sul trattamento dei dati personali ai sensi dell’art. 13 del Regolamento
+            (UE) n. 2016/679</p>
+
+        <p>Ai sensi dell’art. 13 del Regolamento (UE) n. 2016/679, anche denominato General Data Protection Regulation
+            (di
+            seguito il “GDPR“), {{SiteName}} La informa che i Suoi dati personali (di seguito i “Dati“),
+            saranno trattati nel rispetto di quanto previsto dal GDPR e di ogni normativa applicabile in riferimento al
+            trattamento dei dati personali in conformità all’informativa che segue.</p>
+
+        <p><span class="text-subtitle2">1. Titolare del trattamento</span><br/>
+            {{ownerDataName}}</p>
+        <p><span class="boldhigh">Responsabile trattamento e protezione dati:</span><br/>
+            {{managerData}}
+        </p>
+
+
+        <p>Il Responsabile della protezione dei Dati è contattabile via e-mail:
+            {{owneremail}} per informazioni sul trattamento dei Dati comunicati o comunque raccolti nel corso della
+            navigazione sul presente sito, nel rispetto della vigente disciplina in materia di privacy.</p>
+
+        <p class="text-subtitle2">2. Categorie di Dati</p>
+
+        <p>I Dati trattati dal Titolare includono: {{includeData}}.</p>
+
+        <p class="text-subtitle2">3. Finalità e base giuridica del trattamento. Legittimo interesse.</p>
+
+        <p>I Dati saranno trattati per l’adempimento di finalità informative, commerciali e amministrative ad obblighi
+            di
+            legge, ai sensi dell’art. 6, comma 1, lettera b) e c) del GDPR, nonché il perseguimento del legittimo
+            interesse
+            del Titolare, all’art. 6, comma 1, lettera f del GDPR, in riferimento a:
+            rispetto di procedure amministrative interne e adempimento di obblighi di legge o regolamenti vigenti in
+            Italia;
+            l’invio di comunicazioni di natura informativa, commerciale e promozionale.</p>
+
+        <p>In ogni caso, il trattamento dei Suoi Dati effettuato sulla base del proprio legittimo interesse del Titolare
+            avviene, oltre che nel rispetto di quanto previsto all’art. 6, comma 1, lettera f del GDPR, anche in
+            conformità
+            a quanto disposto al considerando n. 47 e all’Opinion n. 6/2014 Article 29 Data Protection Working Party,
+            par.
+            III.3.1.</p>
+
+        <p class="text-subtitle2">4. Modalità del trattamento.</p>
+
+        <p>I Suoi Dati sono raccolti e registrati in modo lecito e secondo correttezza per le finalità sopra indicate e
+            sono trattati anche con l’ausilio di strumenti elettronici e automatizzati, anche mediante l’inserimento e
+            l’organizzazione in banche dati, in conformità a quanto disposto dal GDPR in materia di misure di sicurezza,
+            e,
+            comunque, in modo tale da garantire la sicurezza e la riservatezza dei Dati stessi.</p>
+
+        <p class="text-subtitle2">5. Destinatari o categorie di destinatari.</p>
+
+        <p>I Dati potranno essere resi accessibili, portati a conoscenza di o comunicati ai seguenti soggetti, i quali
+            saranno nominati dal Titolare, a seconda dei casi, quali responsabili – la cui lista è disponibile presso la
+            sede del Titolare – o incaricati:
+            dipendenti e/o collaboratori a qualsivoglia titolo del Titolare;
+            soggetti pubblici o privati, persone fisiche o giuridiche, di cui il Titolare si avvalga per lo svolgimento
+            delle attività strumentali al raggiungimento della finalità di cui sopra o a cui il Titolare sia tenuto a
+            comunicare i Dati in forza di obblighi legali o contrattuali.</p>
+
+        <p>In ogni caso, i Dati non saranno diffusi.</p>
+
+        <p class="text-subtitle2">6. Luogo</p>
+
+        <p>I Dati sono trattati presso le sedi operative del Titolare ed in ogni altro luogo in cui le parti coinvolte
+            nel
+            trattamento siano localizzate. Per ulteriori informazioni, contattare il Titolare agli estremi riportati in
+            apertura.</p>
+
+        <p class="text-subtitle2">7. Periodo di conservazione.</p>
+
+        <p>I Dati saranno conservati per un periodo di tempo non superiore a 10 (dieci) anni per finalità amministrative
+            e,
+            comunque, per il tempo strettamente necessario al perseguimento dell’interesse legittimo del Titolare.</p>
+
+        <p class="text-subtitle2">8. Diritti di accesso, cancellazione, limitazione e portabilità.</p>
+
+        <p>Il Titolare La informa che Le sono riconosciuti i diritti di cui agli artt. da 15 a 20 del GDPR. A titolo
+            esemplificativo, inviando specifica richiesta all’indirizzo email {{owneremail}}, Lei potrà:
+            ottenere la conferma che sia o meno in corso un trattamento di dati personali che La riguardano;
+            qualora un trattamento sia in corso, ottenere l’accesso ai dati e alle informazioni relative al trattamento,
+            nonché richiedere una copia dei dati stessi;
+            ottenere la rettifica dei dati inesatti e l’integrazione dei dati personali incompleti;
+            ottenere, qualora sussista una delle condizioni previste dall’art. 17 del GDPR, la cancellazione dei Dati
+            che La
+            riguardano;
+            ottenere, nei casi previsti dall’art. 18 del GDPR, la limitazione del trattamento dei Dati che La
+            riguardano;
+            ricevere i Dati che La riguardano in un formato strutturato, di uso comune e leggibile da dispositivo
+            automatico
+            e richiedere la loro trasmissione ad un altro titolare, se tecnicamente fattibile.</p>
+
+        <p class="text-subtitle2">9. Diritto di opposizione.</p>
+
+        <p>Ai sensi dell’art. 21 del GDPR, Lei godrà altresì del diritto di opporsi in qualsiasi momento al trattamento
+            dei
+            propri Dati effettuato per il perseguimento del legittimo interesse del Titolare scrivendo all’indirizzo
+            email
+            {{owneremail}}. In caso di opposizione, i Dati non saranno più oggetto di trattamento, sempre che non
+            sussistano motivi legittimi per procedere al trattamento che prevalgono sugli interessi, sui diritti e sulle
+            libertà degli interessati, oppure per l’accertamento, l’esercizio o la difesa di un diritto in sede
+            giudiziaria.</p>
+
+        <p class="text-subtitle2">Responsabile della protezione dei dati</p>
+        <p>Il titolare ha provveduto a nominare il responsabile della protezione dei dati che è contattabile alla
+            seguente
+            casella di posta elettronica {{owneremail}}.</p>
+
+        <p class="text-subtitle2">10. Diritto di proporre reclamo al Garante.</p>
+
+        <p>Il Titolare La informa altresì che potrà proporre reclamo al Garante per la Protezione dei Dati Personali nel
+            caso in cui ritenga che siano stati violati i diritti di cui è titolare ai sensi del GDPR o di qualsiasi
+            altra
+            normativa applicabile, secondo le modalità indicate sul sito internet del Garante per la Protezione dei Dati
+            Personali accessibile all’indirizzo: <a href="http://www.garanteprivacy.it" target="_blank">www.garanteprivacy.it</a>.</p>
+
+        <p>Ultimo aggiornamento: {{lastdataupdate}}</p>
+
+        <Footer></Footer>
+    </q-page>
+
+</template>
+<script lang="ts" src="./PagePolicy.ts">
+</script>
+<style lang="scss" scoped>
+    @import './PagePolicy.scss';
+</style>

src/components/PagePolicy/index.ts

@@ -0,0 +1 @@
+export {default as PagePolicy} from './PagePolicy.vue'

src/components/index.ts

@@ -3,6 +3,7 @@ export * from './todos'
 export * from './logo'
 export * from './CProgress'
 export * from './CCard'
+export * from './CBook'
 export * from './CPage'
 export * from './CTitle'
 export * from './CDate'