From fab0dbbb72a34a0462387bd123b47d5361e6b996 Mon Sep 17 00:00:00 2001
From: Surya Paolo <paolo.arena77@gmail.com>
Date: Wed, 23 Nov 2022 23:57:21 +0100
Subject: [PATCH] ++ Animation fixed in Home pic. ++"Dark Mode"

---
 src/components/CImgPoster/CImgPoster.ts       |  39 +--
 src/components/CImgPoster/CImgPoster.vue      |  41 +--
 src/components/CMyEditElem/CMyEditElem.ts     |  32 +-
 src/components/CMyEditElem/CMyEditElem.vue    | 151 +++++----
 src/components/CMyElem/CMyElem.vue            |  51 ++-
 .../CSelectAnimation/CSelectAnimation.ts      |   2 +-
 .../CSelectAnimation/CSelectAnimation.vue     |  18 +-
 src/components/LandingFooter/LandingFooter.ts |   4 +-
 src/components/MyHeader/MyHeader.ts           |  30 +-
 src/components/MyHeader/MyHeader.vue          | 318 +++++++++++++-----
 src/css/app.scss                              | 148 ++++++++
 src/model/GlobalStore.ts                      |  18 +-
 src/rootgen/admin/confsite/confsite.ts        |   7 +-
 src/rootgen/admin/confsite/confsite.vue       |  12 +
 src/store/Modules/fieldsTable.ts              |  16 +
 src/store/Modules/tools.ts                    |  64 +++-
 src/store/globalStore.ts                      |   3 +-
 17 files changed, 722 insertions(+), 232 deletions(-)

diff --git a/src/components/CImgPoster/CImgPoster.ts b/src/components/CImgPoster/CImgPoster.ts
index e8d58621..2dca34bd 100755
--- a/src/components/CImgPoster/CImgPoster.ts
+++ b/src/components/CImgPoster/CImgPoster.ts
@@ -2,7 +2,7 @@ import { defineComponent, PropType, ref } from 'vue'
 
 import { tools } from '@src/store/Modules/tools'
 import { shared_consts } from '@src/common/shared_vuejs'
-import { IAnim } from '@src/model'
+import { IAnim, IElemText } from '@src/model'
 
 export default defineComponent({
   name: 'CImgPoster',
@@ -27,40 +27,25 @@ export default defineComponent({
       required: false,
       default: 0,
     },
-    legendinside: {
-      type: String,
+    elemsText: {
+      type: Array,
       required: false,
-      default: '',
+      default: () => {
+        return []
+      }
     },
-    legend: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    classTitle: String,
-    classSubtitle: String,
-    colorTitle: String,
-    colorSubtitle: String,
     vertalign: Number,
+    anim: { type: Object as PropType<IAnim>,
+      required: false,
+      default : () => {
+        return {name: '', clduration: '', cldelay: '', timingtype: 'ease-in-out'}
+      },
+    },
     speed: {
       type: Number,
       required: false,
       default: 1
     },
-    anim: {
-      type: Object as PropType<IAnim>,
-      required: false,
-      default: () => {
-        return { name: '', clduration: '', cldelay: '' }
-      },
-    },
-    anim2: {
-      type: Object as PropType<IAnim>,
-      required: false,
-      default: () => {
-        return { name: '', clduration: '', cldelay: '' }
-      },
-    },
     logo: String,
     logoheight: String,
     logowidth: String,
diff --git a/src/components/CImgPoster/CImgPoster.vue b/src/components/CImgPoster/CImgPoster.vue
index 73e21474..01a6ec03 100755
--- a/src/components/CImgPoster/CImgPoster.vue
+++ b/src/components/CImgPoster/CImgPoster.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="poster_shadows shadow-3">
+
     <q-parallax
-      :src="getsrc()"
       :speed="speed ? speed : 1"
-      :height="myheight ? myheight : undefined"
     >
+      <template v-slot:media>
+        <img
+          :class="tools.getClassAnim(anim)"
+          :src="getsrc()"
+        />
+      </template>
+
       <template v-slot:content="scope">
         <div
           :class="`column items-center ` + myclass()"
@@ -15,6 +21,7 @@
           <img
             v-if="logo"
             :src="logo"
+            :class="tools.getClassAnim(anim)"
             :style="
               logowidth
                 ? `width: ` + logowidth + `px; + `
@@ -23,30 +30,18 @@
                 : undefined
             "
           />
-          <div
-            :class="classTitle + ` ` + tools.getClassAnim(anim)"
-            :style="` color:` + colorTitle"
-          >
-            {{ title }}
+          <div v-for="(rec, index) in elemsText" :key="index">
+            <div
+              v-if="rec"
+              :class="
+                rec.class + ` ` + rec.size + ` ` + tools.getClassAnim(rec.anim)
+              "
+              :style="` color:` + rec.color"
+              v-html="rec.text"
+            ></div>
           </div>
-          <div
-            v-if="legendinside"
-            :class="classSubtitle + ` ` + tools.getClassAnim(anim2)"
-            :style="` color:` + colorSubtitle"
-            v-html="legendinside"
-          ></div>
         </div>
       </template>
-      <div>
-        <!--<q-img
-          v-if="logo"
-          :src="tools.getImgFileByElem(logo)"
-          :fit="fit"
-          class="img"
-          :width="logowidth ? logowidth : undefined"
-          :height="logoheight ? logoheight : undefined"
-        ></q-img>-->
-      </div>
     </q-parallax>
   </div>
 </template>
diff --git a/src/components/CMyEditElem/CMyEditElem.ts b/src/components/CMyEditElem/CMyEditElem.ts
index b39c1ee0..df673b6d 100755
--- a/src/components/CMyEditElem/CMyEditElem.ts
+++ b/src/components/CMyEditElem/CMyEditElem.ts
@@ -2,7 +2,7 @@ import {
   defineComponent, onMounted, PropType, ref, toRef, watch,
 } from 'vue'
 
-import { IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
+import { IElemText, IImgGallery, ILabelValue, IMyCard, IMyElem, IMyPage, IOperators } from '@src/model'
 import { useGlobalStore } from '@store/globalStore'
 
 import { CImgTitle } from '@/components/CImgTitle'
@@ -74,6 +74,7 @@ export default defineComponent({
     const slide = ref(0)
     const slide2 = ref(0)
     const tabCard = ref('card0')
+    const tabElemsText = ref('elem0')
     const arrPages = ref([] as any[])
     const disableSave = ref(true)
     const enableEdit = ref(true)
@@ -202,6 +203,14 @@ export default defineComponent({
       modifElem()
     }
 
+    function addNewElemText() {
+      if (!myel.value.elemsText)
+        myel.value.elemsText = []
+
+      myel.value.elemsText.push({ _id: objectId(), text: '', color: '#ffffff', class: '', size: '', anim: { name: 'FadeIn', clduration: '', cldelay: '', timingtype: 'ease-in-out'}  })
+      modifElem()
+    }
+
     function getClass() {
       let mycl = ''
       if (props.myelem.align === shared_consts.ALIGNTYPE.CEHTER) {
@@ -222,10 +231,15 @@ export default defineComponent({
         return false
     }
 
-    function delRecCard(idcard: string, myel: IMyElem) {
+    function delRecCard(id: string, myel: IMyElem) {
       //
-      if (myel.listcards)
-        myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== idcard)
+      if (props.myelem.type === shared_consts.ELEMTYPE.CARD) {
+        if (myel.listcards)
+          myel.listcards = myel.listcards.filter((card: IMyCard) => card._id !== id)
+      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
+        if (myel.elemsText)
+          myel.elemsText = myel.elemsText.filter((rec: IElemText) => rec._id !== id)
+      }
 
     }
 
@@ -238,6 +252,14 @@ export default defineComponent({
             }
           })
         }
+      } else if (props.myelem.type === shared_consts.ELEMTYPE.IMGPOSTER) {
+        if (props.myelem.elemsText) {
+          props.myelem.elemsText.forEach((rec: IElemText) => {
+            if (recpass._id === rec._id) {
+              rec.text = myval
+            }
+          })
+        }
       } else if ((props.myelem.type === shared_consts.ELEMTYPE.IMGTITLE) ||
                 (props.myelem.type === shared_consts.ELEMTYPE.IMAGE)) {
         myel.value.image = myval
@@ -290,6 +312,7 @@ export default defineComponent({
       dupElem,
       enableEdit,
       addNewCard,
+      addNewElemText,
       arrPages,
       costanti,
       delRecCard,
@@ -297,6 +320,7 @@ export default defineComponent({
       updateElem,
       showAnimation,
       tabCard,
+      tabElemsText,
     }
   },
 
diff --git a/src/components/CMyEditElem/CMyEditElem.vue b/src/components/CMyEditElem/CMyEditElem.vue
index f7af662f..020d3eba 100755
--- a/src/components/CMyEditElem/CMyEditElem.vue
+++ b/src/components/CMyEditElem/CMyEditElem.vue
@@ -471,7 +471,7 @@
             table="myelems"
             :id="myel._id"
             :rec="myel"
-            field="container3"
+            field="img"
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"
@@ -499,65 +499,100 @@
             </q-input>
           </div>
 
-          <q-input
-            label="Titolo"
-            class="fa-border"
-            @update:model-value="modifElem"
-            v-model="myel.container"
-            filled
-            v-on:keyup.enter="saveElem"
+          <q-btn
+            rounded
+            dense
+            color="primary"
+            label="Testo"
+            icon="fas fa-plus"
+            @click="addNewElemText"
           >
-          </q-input>
-          <CSelectColor
-            style="min-width: 150px"
-            v-model="myel.color"
-            @update:model-value="modifElem"
-            title="Col Titolo"
+          </q-btn>
+
+          <q-tabs
+            v-model="tabElemsText"
+            dense
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="justify"
+            narrow-indicator
           >
-          </CSelectColor>
-          <q-input
-            label="Sottotitolo"
-            class="fa-border"
-            @update:model-value="modifElem"
-            v-model="myel.container2"
-            filled
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
-          <CSelectColor
-            style="min-width: 150px"
-            v-model="myel.colorsub"
-            @update:model-value="modifElem"
-            title="Col Sottotitolo"
-          >
-          </CSelectColor>
-        </div>
-        <CSelectAnimation
-          v-if="enableEdit && showAnimation"
-          v-model="myel.anim2"
-          @update:model-value="modifElem"
-          label="Animaz SottoTitolo"
-        >
-        </CSelectAnimation>
-        <div class="row">
-          <q-input
-            label="Classe Title"
-            class="fa-border"
-            @update:model-value="modifElem"
-            v-model="myel.class4"
-            filled
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
-          <q-input
-            label="Classe SubTitle"
-            class="fa-border"
-            @update:model-value="modifElem"
-            v-model="myel.class3"
-            filled
-            v-on:keyup.enter="saveElem"
-          >
-          </q-input>
+            <q-tab
+              v-for="(rec, ind) in myel.elemsText"
+              :key="ind"
+              :name="`elem` + ind"
+              :label="`Testo ` + (ind + 1)"
+              icon="fas fa-pencil-alt"
+            />
+          </q-tabs>
+
+          <q-tab-panels v-model="tabElemsText" animated>
+            <q-tab-panel
+              v-for="(rec, ind) in myel.elemsText"
+              :key="ind"
+              :name="`elem` + ind"
+            >
+              <div v-if="enableEdit" class="column bordered q-ma-xs">
+                <q-bar class="bg-primary text-white">
+                  Elem {{ ind + 1 }}
+                  <q-space />
+                  <q-btn
+                    icon="fas fa-trash-alt"
+                    color="negative"
+                    dense
+                    flat
+                    size="sm"
+                    @click="delRecCard(rec._id, myel)"
+                  >
+                  </q-btn>
+                </q-bar>
+                <div v-if="enableEdit" class="row">
+                  <CSelectColor
+                    v-if="enableEdit"
+                    style="min-width: 150px"
+                    v-model="rec.color"
+                    @update:model-value="modifElem"
+                    title="Col Titolo"
+                  >
+                  </CSelectColor>
+                  <CSelectFontSize
+                    v-if="enableEdit"
+                    style="min-width: 200px"
+                    v-model="rec.size"
+                    @update:model-value="modifElem"
+                    title="Font Titolo"
+                  >
+                  </CSelectFontSize>
+                </div>
+                <q-input
+                  label="Classe:"
+                  @update:model-value="modifElem"
+                  v-model="rec.class"
+                  filled
+                  v-on:keyup.enter="saveElem"
+                >
+                </q-input>
+                <CMyEditor
+                  v-model:value="rec.text"
+                  title="Contenuto:"
+                  @keyup.enter.stop
+                  :showButtons="false"
+                  :canModify="true"
+                  @update:value="modifElem"
+                  @showandsave="saveElem"
+                >
+                </CMyEditor>
+                <CSelectAnimation
+                  v-if="enableEdit && showAnimation"
+                  v-model="rec.anim"
+                  @update:model-value="modifElem"
+                  label="Animazione"
+                >
+                </CSelectAnimation>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
diff --git a/src/components/CMyElem/CMyElem.vue b/src/components/CMyElem/CMyElem.vue
index 13986878..be8b2061 100755
--- a/src/components/CMyElem/CMyElem.vue
+++ b/src/components/CMyElem/CMyElem.vue
@@ -45,8 +45,8 @@
                 :class="tools.getClassAnim(myel.anim2)"
                 :src="tools.getImgFileByElem(myel, rec)"
               />
-˛              <q-card-section>
-                <div :class="` ` + rec.size" :style="`color: ` + rec.color">
+              <q-card-section>
+                <div :class="rec.size" :style="`color: ` + rec.color">
                   {{ rec.alt }}
                 </div>
                 <div
@@ -146,32 +146,25 @@
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.IMGPOSTER">
-        <div>
-          <div
-            :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
-            @click="clickOnElem"
+        <div
+          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          @click="clickOnElem"
+        >
+          <CImgPoster
+            v-if="myel.image"
+            :src="tools.getImgFileByElem(myel)"
+            :title="myel.container"
+            :myheight="myel.heightimg"
+            :vertalign="myel.vertalign"
+            :speed="myel.speed"
+            :elemsText="myel.elemsText"
+            :logo="tools.getImgFileByFilename(myel, myel.img)"
+            :logoheight="myel.height.toString()"
+            :logowidth="myel.width.toString()"
+            :fit="myel.fit"
+            :anim="myel.anim"
           >
-            <CImgPoster
-              v-if="myel.image"
-              :src="tools.getImgFileByElem(myel)"
-              :title="myel.container"
-              :myheight="myel.heightimg"
-              :colorTitle="myel.color"
-              :classTitle="myel.class4"
-              :vertalign="myel.vertalign"
-              :speed="myel.speed"
-              :classSubtitle="myel.class3"
-              :colorSubtitle="myel.colorsub"
-              :legendinside="myel.container2"
-              :logo="tools.getImgFileByFilename(myel, myel.container3)"
-              :logoheight="myel.height"
-              :logowidth="myel.width"
-              :fit="myel.fit"
-              :anim="myel.anim"
-              :anim2="myel.anim2"
-            >
-            </CImgPoster>
-          </div>
+          </CImgPoster>
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.HTML">
@@ -252,7 +245,9 @@
           :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
           @click="clickOnElem"
         >
-          <div v-if="editOn" style="color: gray">Pagina: {{ myel.container }}</div>
+          <div v-if="editOn" style="color: gray">
+            Pagina: {{ myel.container }}
+          </div>
         </div>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.PAGEINTRO">
diff --git a/src/components/CSelectAnimation/CSelectAnimation.ts b/src/components/CSelectAnimation/CSelectAnimation.ts
index d690714f..628174d2 100755
--- a/src/components/CSelectAnimation/CSelectAnimation.ts
+++ b/src/components/CSelectAnimation/CSelectAnimation.ts
@@ -13,7 +13,7 @@ export default defineComponent({
       type: Object as PropType<IAnim | string | undefined>,
       required: false,
       default : () => {
-        return {name: '', clduration: '', cldelay: ''}
+        return {name: '', clduration: '', cldelay: '', timingtype: 'ease-in-out'}
       }
     },
     label: {
diff --git a/src/components/CSelectAnimation/CSelectAnimation.vue b/src/components/CSelectAnimation/CSelectAnimation.vue
index 9707d4d9..14f1459b 100755
--- a/src/components/CSelectAnimation/CSelectAnimation.vue
+++ b/src/components/CSelectAnimation/CSelectAnimation.vue
@@ -1,9 +1,10 @@
 <template>
   <div v-if="!!myrec">
     {{label}}
+    <div class="row">
     <q-select
       rounded
-      style="min-width: 150px"
+      style="width: 150px"
       outlined
       v-model="myrec.name"
       :options="tools.SelectListAnimation"
@@ -15,6 +16,21 @@
     >
     </q-select>
 
+    <q-select
+      rounded
+      style="width: 150px"
+      outlined
+      v-model="myrec.timingtype"
+      :options="tools.SelectListTimingType"
+      @update:model-value="updateClass"
+      dense
+      label="Timing:"
+      emit-value
+      map-options
+    >
+    </q-select>
+    </div>
+
     <q-select
       rounded
       style="min-width: 150px"
diff --git a/src/components/LandingFooter/LandingFooter.ts b/src/components/LandingFooter/LandingFooter.ts
index 12b1ba0c..e77fa7ee 100755
--- a/src/components/LandingFooter/LandingFooter.ts
+++ b/src/components/LandingFooter/LandingFooter.ts
@@ -49,8 +49,8 @@ export default defineComponent({
     }
 
     function Telegram_UsernameHttp() {
-      if (site.value!.contacts!.telegram)
-        return tools.getHttpForTelegram(site.value!.contacts!.telegram)
+      if (site.value.contacts!.telegram)
+        return tools.getHttpForTelegram(site.value.contacts!.telegram)
       else
         return ''
     }
diff --git a/src/components/MyHeader/MyHeader.ts b/src/components/MyHeader/MyHeader.ts
index 4a4ff8a3..c281d079 100755
--- a/src/components/MyHeader/MyHeader.ts
+++ b/src/components/MyHeader/MyHeader.ts
@@ -15,6 +15,7 @@ import notifPopover from '../../layouts/toolbar/notifPopover/notifPopover.vue'
 import coinsPopover from '../../layouts/toolbar/coinsPopover/coinsPopover.vue'
 import drawer from '../../layouts/drawer/drawer.vue'
 import { CMyAvatar } from '@/components/CMyAvatar'
+import { CMyFieldDb } from '@/components/CMyFieldDb'
 import { toolsext } from '@store/Modules/toolsext'
 import { useGlobalStore } from '@store/globalStore'
 import { useTestStore } from '@store/testStore'
@@ -22,11 +23,13 @@ import { useUserStore } from '@store/UserStore'
 
 import MixinUsers from '../../mixins/mixin-users'
 import { CMyCart, CSigninNoreg } from '@/components'
+import { costanti } from '@costanti'
 
 export default defineComponent({
   name: 'MyHeader',
   components: {
-    drawer, messagePopover, CMyAvatar, CSigninNoreg, CMyCart, notifPopover, coinsPopover
+    drawer, messagePopover,
+    CMyFieldDb, CMyAvatar, CSigninNoreg, CMyCart, notifPopover, coinsPopover
   },
   props: {
     extraContent: {
@@ -64,6 +67,8 @@ export default defineComponent({
     const site = computed(() => globalStore.site)
     const isfinishLoading = computed(() => globalStore.finishLoading)
 
+    const dark = ref(false)
+
     const getClassColorHeader = computed(() => {
       // if (tools.isTest()) return 'bg-light-blue'
       // if (tools.isDebug()) return 'bg-info'
@@ -80,6 +85,23 @@ export default defineComponent({
         return 'white'
     })
 
+    watch(() => dark.value, (value: any, oldval: any) => {
+      $q.dark.set(value)
+      tools.setCookie('darkmode', value ? '-1' : '0')
+    })
+
+    function uploadStart() {
+      dark.value = tools.getCookie('darkmode', false, false, false) === '-1'
+
+      $q.dark.set(dark.value)
+    }
+
+    watch(() => globalStore.finishLoading, (value: any, oldval: any) => {
+      if (value) {
+        uploadStart()
+      }
+    })
+
     const data = ref({
       registration: null,
       updateExists: false,
@@ -97,6 +119,10 @@ export default defineComponent({
     }
 
     function created() {
+
+      if (isfinishLoading.value) {
+        uploadStart()
+      }
       document.addEventListener('swUpdated', updateAvailable, { once: true })
       navigator.serviceWorker.addEventListener('controllerchange', () => {
         // We'll also need to add 'refreshing' to our data originally set to false.
@@ -544,6 +570,8 @@ export default defineComponent({
       site,
       isfinishLoading,
       getColorText,
+      costanti,
+      dark,
     }
   },
 
diff --git a/src/components/MyHeader/MyHeader.vue b/src/components/MyHeader/MyHeader.vue
index acbb9e6c..2cbde817 100755
--- a/src/components/MyHeader/MyHeader.vue
+++ b/src/components/MyHeader/MyHeader.vue
@@ -1,20 +1,25 @@
 <template>
   <div>
-    <q-header reveal elevated :class="getClassColorHeader" :style="`color: `+ getColorText + `;`">
+    <q-header
+      reveal
+      elevated
+      :class="getClassColorHeader"
+      :style="`color: ` + getColorText + `;`"
+    >
       <q-toolbar
         color="primary"
         :glossy="$q.theme === 'mat'"
         :inverted="$q.theme === 'ios'"
-        class="toolbar">
-
-
+        class="toolbar"
+      >
         <q-btn
           flat
           dense
           round
           @click="leftDrawerOpen = !leftDrawerOpen"
-          aria-label="Menu">
-          <q-icon name="menu"/>
+          aria-label="Menu"
+        >
+          <q-icon name="menu" />
         </q-btn>
 
         <div v-if="$q.platform.is.desktop">
@@ -31,15 +36,30 @@
 
         <q-btn
           size="md"
-          id="newvers" v-if="isNewVersionAvailable() || data.updateExists" color="secondary" rounded icon="refresh"
-          class="btnNewVersShow" @click="RefreshApp()" :label="t('notification.newVersionAvailable')">
+          id="newvers"
+          v-if="isNewVersionAvailable() || data.updateExists"
+          color="secondary"
+          rounded
+          icon="refresh"
+          class="btnNewVersShow"
+          @click="RefreshApp()"
+          :label="t('notification.newVersionAvailable')"
+        >
         </q-btn>
 
         <q-toolbar-title class="row items-center">
           <q-avatar>
-            <img :src="imglogo()" height="27" alt="Immagine Logo">
+            <img :src="imglogo()" height="27" alt="Immagine Logo" />
           </q-avatar>
           <div class="q-mx-sm titlesite">{{ getappname() }}</div>
+          <div v-if="site.confpages.show_darkopt" class="text-h7">
+            <q-toggle
+            size="xs"
+            v-model="dark"
+            :label="dark ? 'Scuro' : 'Chiaro'"
+            >
+            </q-toggle>
+          </div>
         </q-toolbar-title>
 
         <!--
@@ -56,7 +76,10 @@
         -->
 
         <q-btn
-          v-if="!isonline() && static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION"
+          v-if="
+            !isonline() &&
+            static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION
+          "
           flat
           dense
           round
@@ -75,12 +98,14 @@
         >
           <q-list bordered>
             <q-item
-              clickable v-ripple
-
-              v-for="langrec in static_data.lang_available" :key="langrec.value"
-              @click="lang = langrec.value">
+              clickable
+              v-ripple
+              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" alt="flag">
+                <img :src="langrec.image" class="flagimg" alt="flag" />
               </q-item-section>
               <q-item-section>
                 {{ langrec.label }}
@@ -93,12 +118,10 @@
           <message-popover></message-popover>
         </div>
         <div v-if="static_data.functionality.SHOW_COINS">
-          <coinsPopover
-            v-model="rightCoinsOpen"></coinsPopover>
+          <coinsPopover v-model="rightCoinsOpen"></coinsPopover>
         </div>
         <div v-if="static_data.functionality.SHOW_NOTIF">
-          <notifPopover
-            v-model="rightNotifOpen"></notifPopover>
+          <notifPopover v-model="rightNotifOpen"></notifPopover>
         </div>
 
         <!--
@@ -109,48 +132,93 @@
         <!-- BUTTON USER BAR -->
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged()" round dense flat
-          @click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
-
-          <q-badge v-if="getnumItemsCart() > 0" color="red" floating transparent>
+          class="q-mx-xs"
+          v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged()"
+          round
+          dense
+          flat
+          @click="rightCartOpen = !rightCartOpen"
+          icon="fas fa-shopping-cart"
+        >
+          <q-badge
+            v-if="getnumItemsCart() > 0"
+            color="red"
+            floating
+            transparent
+          >
             {{ getnumItemsCart() }}
           </q-badge>
         </q-btn>
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged() && getnumOrdersCart() > 0"
-          round dense flat
-          to="/orderinfo" icon="fas fa-list-ol">
-
-          <q-badge v-if="getnumOrdersCart() > 0" color="blue" floating transparent>
+          class="q-mx-xs"
+          v-if="
+            static_data.functionality.ENABLE_ECOMMERCE &&
+            tools.isLogged() &&
+            getnumOrdersCart() > 0
+          "
+          round
+          dense
+          flat
+          to="/orderinfo"
+          icon="fas fa-list-ol"
+        >
+          <q-badge
+            v-if="getnumOrdersCart() > 0"
+            color="blue"
+            floating
+            transparent
+          >
             {{ getnumOrdersCart() }}
           </q-badge>
         </q-btn>
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !tools.isLogged()" dense flat round
+          class="q-mx-xs"
+          v-if="static_data.functionality.SHOW_USER_MENU && !tools.isLogged()"
+          dense
+          flat
+          round
           icon="menu"
-          @click="rightDrawerOpen = !rightDrawerOpen">
+          @click="rightDrawerOpen = !rightDrawerOpen"
+        >
         </q-btn>
-        <q-avatar v-else-if="static_data.functionality.SHOW_USER_MENU && tools.isLogged() && getMyImg()"
-                  size="36px" class="center_img cursor-pointer"
-                  @click="rightDrawerOpen = !rightDrawerOpen">
-          <q-img ratio="1" fit="conver" :src="getMyImg()" :alt="Username()" img-class="imgprofile_small" stretch="false"
-                 />
+        <q-avatar
+          v-else-if="
+            static_data.functionality.SHOW_USER_MENU &&
+            tools.isLogged() &&
+            getMyImg()
+          "
+          size="36px"
+          class="center_img cursor-pointer"
+          @click="rightDrawerOpen = !rightDrawerOpen"
+        >
+          <q-img
+            ratio="1"
+            fit="conver"
+            :src="getMyImg()"
+            :alt="Username()"
+            img-class="imgprofile_small"
+            stretch="false"
+          />
         </q-avatar>
         <q-btn
           v-else
-          class="q-mx-xs iconprofile_small" round dense flat
-          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
+          class="q-mx-xs iconprofile_small"
+          round
+          dense
+          flat
+          @click="rightDrawerOpen = !rightDrawerOpen"
+          :icon="getMyImgforIcon()"
+          :color="getcolormenu()"
+        >
         </q-btn>
 
         <!--<q-btn
           class="q-mx-xs iconprofile_small" v-if="static_data.functionality.SHOW_USER_MENU && isLogged()" round dense flat
           @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
         </q-btn>-->
-
       </q-toolbar>
-
     </q-header>
 
     <q-drawer
@@ -160,95 +228,183 @@
       :breakpoint="800"
       v-model="leftDrawerOpen"
       :content-class="['bg-grey-1', 'q-pa-sm']"
-      :content-style="{padding: '0px'}"
+      :content-style="{ padding: '0px' }"
     >
       <drawer :clBase="clBase"></drawer>
-
     </q-drawer>
 
     <!-- USER BAR -->
-    <q-drawer v-if="static_data.functionality.ENABLE_ECOMMERCE"
-              v-model="rightCartOpen"
-
-              side="right" elevated>
+    <q-drawer
+      v-if="static_data.functionality.ENABLE_ECOMMERCE"
+      v-model="rightCartOpen"
+      side="right"
+      elevated
+    >
       <q-btn
-        class="absolute-top-right" :style="`margin-right: 10px; color:`+ getColorText + `;`"
-        dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
+        class="absolute-top-right"
+        :style="`margin-right: 10px; color:` + getColorText + `;`"
+        dense
+        flat
+        round
+        icon="close"
+        @click="rightCartOpen = !rightCartOpen"
+      >
       </q-btn>
-      <div v-if="tools.isLogged()" class="text-weight-bold text-cart">Carrello
+      <div v-if="tools.isLogged()" class="text-weight-bold text-cart">
+        Carrello
       </div>
       <CMyCart></CMyCart>
     </q-drawer>
     <!-- USER BAR -->
-    <q-drawer v-if="static_data.functionality.SHOW_USER_MENU"
-              v-model="rightDrawerOpen" side="right" elevated>
+    <q-drawer
+      v-if="static_data.functionality.SHOW_USER_MENU"
+      v-model="rightDrawerOpen"
+      side="right"
+      elevated
+    >
       <div id="profile">
         <q-img
-          class="absolute-top" src="images/landing_first_section.png"
-          style="height: 150px" alt="section page">
+          class="absolute-top"
+          src="images/landing_first_section.png"
+          style="height: 150px"
+          alt="section page"
+        >
         </q-img>
-        <div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px;">
-          <div :class="`text-center q-ma-xs boldhigh text-`+ getColorText + ` text-h7`">Area Personale</div>
+        <div
+          class="absolute-top bg-transparent text-black center_img"
+          style="margin-top: 10px"
+        >
+          <div
+            :class="
+              `text-center q-ma-xs boldhigh text-` + getColorText + ` text-h7`
+            "
+          >
+            Area Personale
+          </div>
 
           <q-avatar size="80px" class="center_img q-ma-md">
-            <q-img fit="cover" :src="getMyImg()" :alt="Username()" img-class="imgprofile" height="80px"/>
+            <q-img
+              fit="cover"
+              :src="getMyImg()"
+              :alt="Username()"
+              img-class="imgprofile"
+              height="80px"
+            />
           </q-avatar>
 
           <!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->
 
           <q-btn
-            class="absolute-top-right" :style="`margin-right: 10px; color: `+ getColorText + `;`"
-            dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
+            class="absolute-top-right"
+            :style="`margin-right: 10px; color: ` + getColorText + `;`"
+            dense
+            flat
+            round
+            icon="close"
+            @click="rightDrawerOpen = !rightDrawerOpen"
+          >
           </q-btn>
 
-          <div v-if="tools.isLogged()" class="text-weight-bold text-user">{{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
+          <div v-if="tools.isLogged()" class="text-weight-bold text-user">
+            {{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
           </div>
           <div class="row justify-evenly q-pa-xs-sm">
-            <div v-if="tools.isLogged() && isAdmin()" class="text-weight-bold text-user bg-red q-px-xs">Admin</div>
-            <div v-if="isSocio" class="text-weight-bold text-user q-px-xs">Socio</div>
-            <div v-if="isSocioResidente()" class="text-weight-bold text-user q-px-xs bg-amber">Residente</div>
-            <div v-if="isConsiglio()" class="text-weight-bold text-user q-px-xs bg-deep-orange-10">Consiglio</div>
-            <div v-if="isManager()" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
-            <div v-if="isFacilitatore()" class="text-weight-bold text-user q-px-xs">Facilitatore</div>
-            <div v-if="isTratuttrici()" class="text-weight-bold text-user q-px-xs">Editor</div>
+            <div
+              v-if="tools.isLogged() && isAdmin()"
+              class="text-weight-bold text-user bg-red q-px-xs"
+            >
+              Admin
+            </div>
+            <div v-if="isSocio" class="text-weight-bold text-user q-px-xs">
+              Socio
+            </div>
+            <div
+              v-if="isSocioResidente()"
+              class="text-weight-bold text-user q-px-xs bg-amber"
+            >
+              Residente
+            </div>
+            <div
+              v-if="isConsiglio()"
+              class="text-weight-bold text-user q-px-xs bg-deep-orange-10"
+            >
+              Consiglio
+            </div>
+            <div
+              v-if="isManager()"
+              class="text-weight-bold text-user bg-blue q-px-xs"
+            >
+              Segreteria
+            </div>
+            <div
+              v-if="isFacilitatore()"
+              class="text-weight-bold text-user q-px-xs"
+            >
+              Facilitatore
+            </div>
+            <div
+              v-if="isTratuttrici()"
+              class="text-weight-bold text-user q-px-xs"
+            >
+              Editor
+            </div>
           </div>
           <div v-if="!tools.isLogged()" class="text-user text-italic bg-red">
             {{ t('user.loggati') }}
           </div>
 
-          <div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">{{
-              t('components.authentication.email_verification.verify_email')
-            }}
+          <div
+            v-if="tools.isLogged() && !tools.isVerified()"
+            class="text-verified"
+          >
+            {{ t('components.authentication.email_verification.verify_email') }}
           </div>
 
-          <div v-if="tools.isLogged()"
-            class="text-verified">
+          <div v-if="tools.isLogged()" class="text-verified">
             <!-- <span class="text-white" v-if="Verificato()"> {{t('reg.verificato')}} </span> -->
-            <span class="text-user text-italic bg-red" v-if="!tools.Verificato()"> {{t('reg.non_verificato')}} </span>
+            <span
+              class="text-user text-italic bg-red"
+              v-if="!tools.Verificato()"
+            >
+              {{ t('reg.non_verificato') }}
+            </span>
           </div>
 
-          <div v-if="tools.isLogged()" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
-            <q-btn rounded color="primary" icon="person" :to="`/my/`+getMyUsername()">{{ t('pages.profile') }}</q-btn>
+          <div
+            v-if="tools.isLogged()"
+            id="user-actions"
+            class="column justify-center q-gutter-sm q-ma-sm center-150"
+          >
+            <q-btn
+              rounded
+              color="primary"
+              icon="person"
+              :to="`/my/` + getMyUsername()"
+              >{{ t('pages.profile') }}</q-btn
+            >
             <!--<q-btn round color="warning" icon="lock"></q-btn>-->
-            <q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{ t('login.esci') }}</q-btn>
+            <q-btn
+              rounded
+              color="negative"
+              icon="exit_to_app"
+              @click="logoutHandler"
+              >{{ t('login.esci') }}</q-btn
+            >
           </div>
-
         </div>
-        <div style="margin-top:120px;"></div>
+        <div style="margin-top: 120px"></div>
         <div v-show="!tools.isLogged()">
-
           <div class="q-ma-md" style="">
-            <CSigninNoreg :showregbutt="static_data.functionality.SHOW_REG_BUTTON">
-
+            <CSigninNoreg
+              :showregbutt="static_data.functionality.SHOW_REG_BUTTON"
+            >
             </CSigninNoreg>
           </div>
         </div>
-
       </div>
       <div v-if="tools.isLogged()" class="q-mt-lg"></div>
 
       <slot></slot>
-
     </q-drawer>
   </div>
 </template>
diff --git a/src/css/app.scss b/src/css/app.scss
index e258fbac..f8085478 100755
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -973,6 +973,10 @@ h3 {
   }
 }
 
+.q-item__section--side {
+  margin-left: 0px !important;
+}
+
 .underline {
   text-decoration: underline;
   color: blue;
@@ -1336,3 +1340,147 @@ h3 {
     transform: translateY(0);
   }
 }
+
+
+.film, .effect {
+	width: 100%;
+	height: 100%;
+	filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
+}
+
+.film:after, .effect:after {
+	content: '';
+	width: 120%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	padding-left: 100px;
+	opacity: 0.5;
+	animation: film-scratch 0.45s steps(1) infinite;
+	background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
+}
+
+.effect:after {
+	left: 30%;
+	animation: effect-scratch 2s infinite;
+}
+
+.grain {
+	width: 100%;
+	height: 100%;
+}
+
+.grain:after {
+	content: '';
+	width: 110%;
+	height: 110%;
+	top: -5%;
+	left: -5%;
+	opacity: .25;
+	background-image:
+		repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
+		repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
+	animation: grain 0.5s steps(1) infinite;
+	filter: drop-shadow(0px 0px 1px black);
+}
+
+@keyframes grain {
+	0%, 100% { transform: translate(0, 0); }
+	10% { transform: translate(-1%, -1%); }
+	20% { transform: translate(1%, 1%); }
+	30% { transform: translate(-2%, -2%); }
+	40% { transform: translate(3%, 3%); }
+	50% { transform: translate(-3%, -3%); }
+	60% { transform: translate(4%, 4%); }
+	70% { transform: translate(-4%, -4%); }
+	80% { transform: translate(2%, 2%); }
+	90% { transform: translate(-3%, -3%); }
+}
+
+@keyframes film-scratch {
+	0%, 100% { transform: translateX(0); opacity: 0.5; }
+	10% { transform: translateX(-1%); }
+	20% { transform: translateX(1%); }
+	30% { transform: translateX(-2%); opacity: 0.75; }
+	40% { transform: translateX(3%); }
+	50% { transform: translateX(-3%); opacity: 0.5; }
+	60% { transform: translateX(8%); }
+	70% { transform: translateX(-3%); }
+	80% { transform: translateX(10%); opacity: 0.25; }
+	90% { transform: translateX(-2%); }
+}
+
+@keyframes effect-scratch {
+	0% { transform: translateX(0); opacity: 0.75; }
+	10% { transform: translateX(-1%); }
+	20% { transform: translateX(1%); }
+	30% { transform: translateX(-2%); }
+	40% { transform: translateX(3%); }
+	50% { transform: translateX(-3%); opacity: 0.5; }
+	60% { transform: translateX(8%); }
+	70% { transform: translateX(-3%); }
+	80% { transform: translateX(10%); opacity: 0.25; }
+	90% { transform: translateX(20%); }
+	100% { transform: translateX(30%); }
+}
+
+/**** OLD FILM EFFECT END ****/
+
+@keyframes zoomImg {
+	0% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
+	20% { transform: translate(-15%, 10%) scale(1.5); opacity: 1; }
+	50% { transform: translate(-15%, 25%) scale(1.35); opacity: 1; }
+	80% { transform: translate(-65%, 25%) scale(1.35); opacity: 1; }
+	100% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
+}
+
+.zoomImg {
+	animation: zoomImg 20s linear infinite;
+}
+
+.animate__animated.animate__slow3 {
+  -webkit-animation-duration: calc(1s * 3);
+  animation-duration: calc(1s * 3);
+  -webkit-animation-duration: calc(var(--animate-duration) * 3);
+  animation-duration: calc(var(--animate-duration) * 3);
+}
+.animate__animated.animate__slow4 {
+  -webkit-animation-duration: calc(1s * 4);
+  animation-duration: calc(1s * 4);
+  -webkit-animation-duration: calc(var(--animate-duration) * 4);
+  animation-duration: calc(var(--animate-duration) * 4);
+}
+.animate__animated.animate__slow5 {
+  -webkit-animation-duration: calc(1s * 5);
+  animation-duration: calc(1s * 5);
+  -webkit-animation-duration: calc(var(--animate-duration) * 5);
+  animation-duration: calc(var(--animate-duration) * 5);
+}
+.animate__animated.animate__slow10 {
+  -webkit-animation-duration: calc(1s * 10);
+  animation-duration: calc(1s * 10);
+  -webkit-animation-duration: calc(var(--animate-duration) * 10);
+  animation-duration: calc(var(--animate-duration) * 10);
+}
+.animate__animated.animate__slow20 {
+  -webkit-animation-duration: calc(1s * 20);
+  animation-duration: calc(1s * 20);
+  -webkit-animation-duration: calc(var(--animate-duration) * 20);
+  animation-duration: calc(var(--animate-duration) * 20);
+}
+
+.animate__animated.animate__ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.animate__animated.animate__linear {
+  transition-timing-function: linear;
+}
+.animate__animated.animate__ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.animate__animated.animate__ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.animate__animated.animate__ease {
+  transition-timing-function: ease;
+}
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index adae9fa6..2b142795 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -119,6 +119,7 @@ export interface IMyElem {
   container?: string
   container2?: string
   container3?: string
+  container4?: string
   span?: boolean
   transition?: boolean
   align?: number
@@ -150,8 +151,17 @@ export interface IMyElem {
   styleadd?: string
   list?: IImgGallery[]
   listcards?: IMyCard[]
+  elemsText?: IElemText[]
 }
 
+export interface IElemText {
+  _id: string
+  text: string
+  color?: string
+  size?: string
+  class?: string
+  anim?: IAnim
+}
 export interface IMyPage {
   _id?: string
   author_username?: string
@@ -180,7 +190,7 @@ export interface IMyPage {
   active?: boolean
   inmenu?: boolean
   color?: string
-  colorsub?: string
+  elemsText?: IElemText[]
   onlyif_logged?: boolean
   only_residenti?: boolean
   only_consiglio?: boolean
@@ -202,6 +212,7 @@ export interface IConfPages {
   font?: string
   col_toolbar?: string
   col_bgfooter?: string
+  show_darkopt: boolean
 }
 export interface IFooterMobile {
   show_buttHome: boolean
@@ -259,7 +270,7 @@ export interface ISites {
   keywords?: string
   contacts?: IContacts
   footer_mobile?: IFooterMobile
-  confpages?: IConfPages
+  confpages: IConfPages
 }
 
 export interface INewsToSent {
@@ -405,7 +416,7 @@ export interface IGlobalState {
   catgrps: ICatGrp[],
   provinces: IProvince[],
   datastat?: INotData
-  site?: ISites,
+  site: ISites,
   mygroups: IMyGroup[],
   selElem?: IMyElem,
   editOn?: boolean,
@@ -1101,4 +1112,5 @@ export interface IAnim {
   name: string,
   clduration: string,
   cldelay: string,
+  timingtype: string,
 }
diff --git a/src/rootgen/admin/confsite/confsite.ts b/src/rootgen/admin/confsite/confsite.ts
index 30e48e7d..a5708eb1 100755
--- a/src/rootgen/admin/confsite/confsite.ts
+++ b/src/rootgen/admin/confsite/confsite.ts
@@ -41,7 +41,11 @@ export default defineComponent({
         globalStore.site.confpages.col_bgfooter = mycol
       }
     }
-
+    function saveShowDark(mycol: any) {
+      if (globalStore.site?.confpages) {
+        globalStore.site.confpages.show_darkopt = mycol
+      }
+    }
     onMounted(mounted)
 
     return {
@@ -53,6 +57,7 @@ export default defineComponent({
       saveCol,
       saveBgCol,
       globalStore,
+      saveShowDark,
     }
   }
 })
diff --git a/src/rootgen/admin/confsite/confsite.vue b/src/rootgen/admin/confsite/confsite.vue
index 95a8b1ea..a0ad22cb 100755
--- a/src/rootgen/admin/confsite/confsite.vue
+++ b/src/rootgen/admin/confsite/confsite.vue
@@ -273,6 +273,18 @@
               :type="costanti.FieldType.color"
             >
             </CMyFieldDb>
+            <CMyFieldDb
+              title="Mostra Scelta Dark"
+              table="sites"
+              :id="mysite._id"
+              :rec="mysite"
+              mykey="confpages"
+              mysubkey="show_darkopt"
+              debounce="1000"
+              @save="saveShowDark"
+              :type="costanti.FieldType.boolean"
+            >
+            </CMyFieldDb>
           </q-tab-panel>
           <q-tab-panel name="footer">
             <CMyFieldDb
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index dc5de00d..18fe572c 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -145,6 +145,7 @@ export const colmyelems = [
   AddCol({ name: 'container2', label_trans: 'myelems.container2' }),
   AddCol({ name: 'span', label_trans: 'myelems.span', fieldtype: costanti.FieldType.boolean }),
   AddCol({ name: 'container3', label_trans: 'myelems.container3' }),
+  AddCol({ name: 'container4', label_trans: 'myelems.container4' }),
   AddCol({ name: 'img', label_trans: 'myelems.img' }),
   AddCol({ name: 'align', label_trans: 'myelems.align', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'vertalign', label_trans: 'myelems.vertalign', fieldtype: costanti.FieldType.number }),
@@ -166,6 +167,7 @@ export const colmyelems = [
   AddCol({ name: 'onlyif_logged', label_trans: 'myelems.onlyif_logged', fieldtype: costanti.FieldType.boolean  }),
   AddCol({ name: 'color', label_trans: 'myelems.color' }),
   AddCol({ name: 'colorsub', label_trans: 'myelems.colorsub' }),
+  AddCol({ name: 'colorsub2', label_trans: 'myelems.colorsub2' }),
   AddCol({ name: 'class', label_trans: 'myelems.class' }),
   AddCol({ name: 'styleadd', label_trans: 'myelems.styleadd' }),
   AddCol({
@@ -1604,6 +1606,20 @@ export const colTableSites = [
     label_trans: 'confpages.col_bgfooter',
     fieldtype: costanti.FieldType.string,
   }),
+  AddCol({
+    name: 'confpages.show_darkopt',
+    field: 'confpages',
+    subfield: 'show_darkopt',
+    label_trans: 'confpages.show_darkopt',
+    fieldtype: costanti.FieldType.boolean,
+  }),
+  AddCol({
+    name: 'confpages.dark',
+    field: 'confpages',
+    subfield: 'dark',
+    label_trans: 'confpages.dark',
+    fieldtype: costanti.FieldType.boolean,
+  }),
   AddCol({
     name: 'footer_mobile.show_buttHome',
     field: 'footer_mobile',
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index e18fdf64..63fb48ec 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -598,6 +598,22 @@ export const tools = {
       label: '[Nessuna]',
       value: '',
     },
+    {
+      label: 'Slow 20s',
+      value: 'animate__slow20',
+    },
+    {
+      label: 'Slow 10s',
+      value: 'animate__slow10',
+    },
+    {
+      label: 'Slow 5s',
+      value: 'animate__slow5',
+    },
+    {
+      label: 'Slow 3s',
+      value: 'animate__slow3',
+    },
     {
       label: 'Slow 2s',
       value: 'animate__slow',
@@ -644,6 +660,34 @@ export const tools = {
 
   ],
 
+  SelectListTimingType: [
+    {
+      label: '[Nessuna]',
+      value: '',
+    },
+    {
+      label: 'Linear',
+      value: 'animate__linear',
+    },
+    {
+      label: 'Ease',
+      value: 'animate__ease',
+    },
+    {
+      label: 'Ease-In',
+      value: 'animate__ease-in',
+    },
+    {
+      label: 'Ease-Out',
+      value: 'animate__ease-out',
+    },
+    {
+      label: 'Ease-In-Out',
+      value: 'animate__ease-in-out',
+    },
+
+
+  ],
 
   SelectListAnimation: [
     {
@@ -694,6 +738,10 @@ export const tools = {
       label: 'slideOut Down',
       value: 'animate__slideOutDown',
     },
+    {
+      label: 'zoomImg',
+      value: 'zoomImg',
+    },
     {
       label: 'zoomIn',
       value: 'animate__zoomIn',
@@ -730,6 +778,14 @@ export const tools = {
       label: 'zoomOut Down',
       value: 'animate__zoomOutDown',
     },
+    {
+      label: 'Effetto Film 1',
+      value: 'film',
+    },
+    {
+      label: 'Zoom IMG',
+      value: 'zoomImg',
+    },
     {
       label: 'FadeIn',
       value: 'animate__fadeIn',
@@ -7180,9 +7236,15 @@ export const tools = {
   },
 
   getClassAnim(myanim: IAnim) {
+    if (!myanim)
+      return ''
+
     let mycl = ''
     if (myanim)
-      mycl = (!!myanim.name ? myanim.name : '') + ' ' + (!!myanim.clduration ? myanim.clduration : '') + ' ' + (!!myanim.cldelay ? myanim.cldelay : '')
+      mycl = (!!myanim.name ? myanim.name : '') +
+      ' ' + (!!myanim.clduration ? myanim.clduration : '') +
+      ' ' + (!!myanim.cldelay ? myanim.cldelay : '') +
+      ' ' + (!!myanim.timingtype ? myanim.timingtype : '')
     else
       mycl = ''
 
diff --git a/src/store/globalStore.ts b/src/store/globalStore.ts
index 7cb1acc3..97f20659 100644
--- a/src/store/globalStore.ts
+++ b/src/store/globalStore.ts
@@ -138,7 +138,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
         options: 0
       },
       confpages: {
-        font: ''
+        font: '',
+        show_darkopt: false,
       },
     },
     provinces: [],