Primo committ Notevole
This commit is contained in:
Paolo Arena
445
src/root/My404page/My404page.scss
Normal file
445
src/root/My404page/My404page.scss
Normal file
@@ -0,0 +1,445 @@
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../statics/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section, .testimonial > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.testimonial > section {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
/* background-color: red; */
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
/* background-color: green; */
|
||||
}
|
||||
|
||||
&__comeassociarsi{
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.landing > section.padding, .testimonial > section.padding {
|
||||
padding: 5.62rem 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 > section > div {
|
||||
position: relative;
|
||||
max-width: 1240px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.testimonial > section > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .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
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../statics/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.shadow-max {
|
||||
//color: white;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
font-size: 6rem;
|
||||
font-weight: 300;
|
||||
line-height: 6rem;
|
||||
letter-spacing: -.01562em;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers{
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../statics/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../statics/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../statics/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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: 0.093rem;
|
||||
}
|
||||
|
||||
16
src/root/My404page/My404page.ts
Normal file
16
src/root/My404page/My404page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { static_data } from '@src/db/static_data'
|
||||
import { Screen } from 'quasar'
|
||||
import { CMyPage } from '@components'
|
||||
|
||||
@Component({
|
||||
components: { CMyPage }
|
||||
})
|
||||
export default class My404pag extends Vue {
|
||||
get static_data() {
|
||||
return static_data
|
||||
}
|
||||
}
|
||||
13
src/root/My404page/My404page.vue
Normal file
13
src/root/My404page/My404page.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<CMyPage img="statics/images/logo.png" title="La Pagina non è stata trovata" sizes="max-height: 150px">
|
||||
<div class="q-ma-lg">
|
||||
<p class="text-center">Utilizzare il menu a sinistra per cercare altre pagine.</p>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</template>
|
||||
<script lang="ts" src="./My404page.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './My404page.scss';
|
||||
</style>
|
||||
470
src/root/home/home.scss
Normal file
470
src/root/home/home.scss
Normal file
@@ -0,0 +1,470 @@
|
||||
|
||||
.testo-banda {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, from(#3144f0), to(transparent));
|
||||
//background: linear-gradient(180deg, #3144f0, transparent);
|
||||
//background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
|
||||
$grayshadow: #555;
|
||||
|
||||
$textcol: blue;
|
||||
$textcol_scuro: darkblue;
|
||||
|
||||
p {
|
||||
margin: 0 0 1.25rem;
|
||||
//text-shadow: .125rem .125rem .25rem $grayshadow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.landing {
|
||||
}
|
||||
|
||||
.landing_background {
|
||||
background: #000 url(../../statics/images/foto1.jpg) no-repeat 50% fixed;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.landing > section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
//padding: 0 16px
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
/* flex-flow: row nowrap; */
|
||||
|
||||
padding: 1.25rem 0 1.25rem 0;
|
||||
margin: .125rem;
|
||||
|
||||
* {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__associazione {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
&__comeassociarsi {
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.subtitle_small {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
letter-spacing: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.landing > section.padding {
|
||||
padding: 5.62rem 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 > section > div {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.maxwidth1200 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.landing__toolbar {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
|
||||
background: linear-gradient(180deg, #000, transparent);
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.landing__toolbar .q-btn {
|
||||
border-radius: 0 0 .315rem .315rem;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch
|
||||
}
|
||||
|
||||
.landing__hero {
|
||||
min-height: 50vh
|
||||
}
|
||||
|
||||
.landing__header {
|
||||
height: 18vh
|
||||
}
|
||||
|
||||
.landing__arrow {
|
||||
bottom: 1.5rem;
|
||||
opacity: .4
|
||||
}
|
||||
|
||||
.landing__front {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
|
||||
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 15%)
|
||||
}
|
||||
|
||||
.landing__logo {
|
||||
width: 9.40rem;
|
||||
height: 9.40rem;
|
||||
margin-top: 1.315rem;
|
||||
//-webkit-animation: logo-rotate 240s linear infinite;
|
||||
//animation: logo-rotate 240s linear infinite
|
||||
}
|
||||
|
||||
.landing__features .q-icon {
|
||||
font-size: 4rem
|
||||
}
|
||||
|
||||
h4 {
|
||||
line-height: 1.5;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.landing__features h4, .landing__features h6 {
|
||||
margin: 1rem 0
|
||||
}
|
||||
|
||||
.landing__features p {
|
||||
opacity: .7;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.landing__footer {
|
||||
//background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, rgba(0, 0, 0, .1)), to(#000));
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .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
|
||||
}
|
||||
|
||||
.feat-descr {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.feat-descr:hover {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: 3.125rem 3.125rem;
|
||||
//margin-left: -48px
|
||||
}
|
||||
|
||||
body.mobile .landing {
|
||||
//background: unset
|
||||
}
|
||||
|
||||
body.mobile .landing:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
//background: #000 url(../../statics/images/cover.jpg) 50%;
|
||||
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
/*
|
||||
@-webkit-keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn)
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.home {
|
||||
//background-color: rgb(250, 250, 250);
|
||||
padding: 3.125rem;
|
||||
display: flex;
|
||||
//flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
margin: 3.125rem;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
//color: white;
|
||||
text-shadow: 0.125rem 0.125rem 0.25rem $grayshadow;
|
||||
}
|
||||
|
||||
.text-h1, h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
line-height: 3rem;
|
||||
letter-spacing: -.01562em;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.text-h2 {
|
||||
font-size: 3.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 3.75rem;
|
||||
letter-spacing: -.00833em;
|
||||
}
|
||||
|
||||
.text-weight-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-vers {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.75rem;
|
||||
letter-spacing: .00937em;
|
||||
text-shadow: .25rem .25rem .5rem $grayshadow;
|
||||
}
|
||||
|
||||
.homep-cover-img-1 {
|
||||
background: #000 url(../../statics/images/foto1.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-2 {
|
||||
background: #000 url(../../statics/images/foto2.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img-3 {
|
||||
background: #000 url(../../statics/images/foto3.jpg) no-repeat 50% fixed;
|
||||
//transition: background-image 1s ease-in-out;
|
||||
}
|
||||
|
||||
.homep-cover-img.hide-filter:before {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.landing__footer-icons {
|
||||
font-size: 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, h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.05rem;
|
||||
margin-bottom: 1.25rem
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.landing > section.padding_gallery > div {
|
||||
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__hero2-content {
|
||||
padding-bottom: 7.25rem;
|
||||
}
|
||||
.landing__hero-btns {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.q-col-gutter-sm {
|
||||
padding: .625rem .315rem;
|
||||
}
|
||||
|
||||
.text-subtitle1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.text-vers {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel_img_3 {
|
||||
//background-image: url(../../statics/images/cibo_sano.jpg);
|
||||
background-size: 500px 500px !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);
|
||||
}
|
||||
|
||||
.sfondo-grigio {
|
||||
padding: 1rem;
|
||||
color: $textcol;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
}
|
||||
|
||||
.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: 0.093rem;
|
||||
}
|
||||
|
||||
.q-carousel__slide{
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.step-text{
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
481
src/root/home/home.ts
Normal file
481
src/root/home/home.ts
Normal file
@@ -0,0 +1,481 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import { GlobalStore, UserStore } from '@store'
|
||||
|
||||
import { Logo } from '../../components/logo'
|
||||
|
||||
import { Footer } from '../../components/Footer'
|
||||
import { CMyPage } from '../../components/CMyPage/index'
|
||||
|
||||
import VueScrollReveal from 'vue-scroll-reveal'
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
import { func_tools, toolsext } from '@src/store/Modules/toolsext'
|
||||
import { Screen } from 'quasar'
|
||||
import MixinMetaTags from '@src/mixins/mixin-metatags'
|
||||
import { CCardCarousel, CEventsCalendar, CImgText, COpenStreetMap, CTitleBanner } from '@components'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
|
||||
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({
|
||||
mixins: [MixinBase],
|
||||
components: { Logo, Footer, CMyPage, CCardCarousel, CEventsCalendar, COpenStreetMap, CTitleBanner, CImgText }
|
||||
})
|
||||
export default class Home extends MixinBase {
|
||||
public text: string = ''
|
||||
public visibile: boolean = false
|
||||
public cardvisible: string = 'hidden'
|
||||
public displaycard: string = 'block'
|
||||
public $t: any
|
||||
// public firstClassSection: string = 'landing_background fade homep-cover-img animate-fade homep-cover-img-1'
|
||||
public firstClassSection: string = 'fade homep-cover-img animate-fade homep-cover-img-1'
|
||||
public $q
|
||||
public polling
|
||||
public slide = 'first'
|
||||
public slide_video = 'mp4_1'
|
||||
public mysteps = 0
|
||||
public myaudio = 0
|
||||
public mytestimonianze = 0
|
||||
public slide2 = 0
|
||||
public animare: number = 0
|
||||
public endload: boolean = false
|
||||
|
||||
public arrsteps = [
|
||||
{
|
||||
label: '1',
|
||||
value: 0,
|
||||
title: {
|
||||
it: '<strong>Giorno 1 - Contributore Finanziario</strong><br><br>' +
|
||||
'Entro nella chat, dono <strong>33€</strong> e ho già <strong>trovato 2 persone</strong> che vogliono partecipare al gioco.',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
myicon: 'fas fa-donate',
|
||||
},
|
||||
{
|
||||
label: '2',
|
||||
value: 1,
|
||||
title: {
|
||||
it: '<strong>Giorno 2 - Contributore solidale</strong><br><br>' +
|
||||
'Inserisco nella chat le mie 2 persone che verseranno i 33€.',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
myicon: 'fas fa-user-friends',
|
||||
myicon2: 'fas fa-coins'
|
||||
},
|
||||
{
|
||||
label: '3',
|
||||
value: 2,
|
||||
title: {
|
||||
it: '<strong>Giorno 3 - Tesoriere/segretario</strong><br><br>' +
|
||||
'Collaborare, aggiornare doni, fornire informazioni, ma anche conoscersi, condividere esperienze, passioni e sogni.',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
myicon: 'fas fa-piggy-bank',
|
||||
myicon2: 'far fa-laugh',
|
||||
myicon3: 'far fa-comments'
|
||||
},
|
||||
{
|
||||
label: '4',
|
||||
value: 3,
|
||||
title: {
|
||||
it: '<strong>Giorno 4 - Apertura tua Billettera</strong><br>' +
|
||||
'Creo il mio gruppo Whatsapp nel quale entrano i miei 2 ospiti, i 2 ospiti dei miei 2 ospiti, che porteranno altre 8 persone (4x2).<br>' +
|
||||
'<br>Ricevuti i 33€ da queste 8 persone (264€), mi tengo i mei <strong>iniziali 33€</strong> e <strong>dono 231 €</strong> alla Billettera "Mas Antigua".',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
myicon: 'fab fa-whatsapp',
|
||||
myicon2: 'fas fa-wallet'
|
||||
},
|
||||
{
|
||||
label: '5-6-7-8',
|
||||
value: 4,
|
||||
title: {
|
||||
it: '<strong>Giorno 5-6-7-8</strong><br>' +
|
||||
'Aspetto, da parte delle 8 nuove Billettere, le donazioni di 231€, per un totale di <strong>1848€</strong>.<br>' +
|
||||
'<br>Ringrazio l\'<strong>Universo</strong> per il <strong>dono</strong> ricevuto e fornisco <strong>aiuto</strong> a chi ne ha bisogno.<br>' +
|
||||
'Se desidero, posso <strong>ricominciare</strong> il gioco!',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
myicon: 'far fa-clock',
|
||||
myicon2: 'fas fa-euro-sign',
|
||||
myicon3: 'fas fa-praying-hands',
|
||||
myimg: '/' + tools.getimglogo(),
|
||||
}
|
||||
]
|
||||
|
||||
public todownload = {
|
||||
it: [
|
||||
{
|
||||
title: 'Billettera (passi 1-2-3).jpg',
|
||||
file: 'statics/images/it/Billetera_step_1_2_3.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Billettera (passo 4).jpg',
|
||||
file: 'statics/images/it/Billetera_step_4.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Passi semplificati.jpg',
|
||||
file: 'statics/images/it/passi_semplificati.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Spiegazione (PDF)',
|
||||
file: 'statics/files/it/Billetera_spiegazione.pdf'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
public audiofiles = {
|
||||
it: [
|
||||
{
|
||||
title: 'Chiara (1)',
|
||||
label: '1',
|
||||
value: 0,
|
||||
src: 'statics/audio/it/spiegazione_Billettera.mp3',
|
||||
type: 'audio/mp3'
|
||||
},
|
||||
{
|
||||
title: 'Altro',
|
||||
label: '2',
|
||||
value: 1,
|
||||
src: 'statics/audio/it/spiegazione_Billettera_2.mp3',
|
||||
type: 'audio/mp3'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
public testimonianze = {
|
||||
it: [
|
||||
{
|
||||
title: '1. Giovanni',
|
||||
label: '1',
|
||||
value: 0,
|
||||
text: '<p>Amici di questa meravigliosa Billettera, mi permetto di dare un mio punto di vista a ' +
|
||||
'questo meraviglioso gruppo di amici che si stanno sostenendo a partecipare <strong>donando e ricevendo</strong> questo dono economico. ' +
|
||||
'In questo progetto bisogna entrarci con il <strong>cuore</strong>, in questo gioco di economia circolare, e non con la mente.</p>' +
|
||||
'<p>L\'ego mentale che ha costruito il giro di denaro sul potere, sul ricevere soldi dal lavoro, sull\'arrivismo, sullo scambiare ore della propria vita con denaro,' +
|
||||
' e solitamente dalla competizione e dalla fatica, non può concepire che <strong>si può donare dei soldi ad amici conosciuti e sconosciuti e ricevere altrettanti doni indietro</strong>, ' +
|
||||
'anche in denaro, da altri amici, che ti permetteranno di gioire di questa ricchezza economica che arriva solo da fatto che si possono utilizzare ' +
|
||||
'i soldi anche con gesti di puro Amore.</p> ' +
|
||||
'<p>Quando lo proponete ad amici è naturale che vi sentirete chiedere : <em>"Una piramide, dov\'è la fregatura?"</em><br>' +
|
||||
'Personalmente io parlo della mia esperienza, che sono felice di fare un dono di 33€ e di riceverne altrettanti e non vedo dove sta il problema.<br> ' +
|
||||
'Forse il sentirsi dire dei no, ci rimanda subito al mentale che si sente rifiutato ed entra subito nel giudizio negativo per se e verso gli altri,' +
|
||||
'questo è un gioco che ci aiuterà a vedere tante facce dell\'ego che boicotterà, che ci depisterà, che ci illuderà, ma dietro a tutto questo ' +
|
||||
'ci sta l\'Amore e la Consapevolezza che ci aiuteranno ad andare oltre e a procedere verso questa nuova esperienza di scambi di doni tra belle ' +
|
||||
'anime che stanno già condividendo e sostenendosi a vicenda per portare una nuova visione sull\'<strong>economia circolare dei soldi</strong>.</p>' +
|
||||
'<p>Insomma questa è una chance, per riprendere anche gli <strong>schemi già visti</strong> di scambi a diversi livelli, ma con tutta la nuova tecnologia che ' +
|
||||
'abbiamo a disposizione, che ci aiuta a <strong>rimanere connessi continuamente</strong>, e con la nuova consapevolezza che finalmente l\'essere umano sta ' +
|
||||
'raggiungendo, e di usarli, i network, per <strong>ridistribuire</strong>, anche se solo in piccola parte, <strong>un po\' di regali, gioia, amore, amicizia e denaro ' +
|
||||
'sul pianeta</strong>.</p>' +
|
||||
'<p>Questa billetera è una vera chance di <strong>cooperazione ad una ottava superiore</strong>, che porta con sé, anche molti <strong>regali</strong> di consapevolezza, ' +
|
||||
'crescita correttezza, precisione, onestà, cooperazione, amore.</p>',
|
||||
},
|
||||
{
|
||||
title: '2. Luca',
|
||||
label: '2',
|
||||
value: 1,
|
||||
text: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
public advise = [
|
||||
{
|
||||
title: {
|
||||
it: 'La forza di questo gioco sono le Persone e la Collaborazione. Non siate timidi e scrivete agli amici su whatsapp, facebook, Telegram',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
color: 'white', icon: 'fas fa-hands-helping',
|
||||
textcolor: 'black'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
it: 'È un lavoro di squadra ma in cui ognuno deve assolutamente fare la sua parte<br>' +
|
||||
'La parte di ognuno in questo gioco è fare il dono e portare due persone<br>' +
|
||||
'Se manca una di queste due parti il gioco si ferma',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
color: 'white',
|
||||
icon: 'fas fa-users',
|
||||
textcolor: 'black'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
it: 'Per me personalmente la sto vivendo anche come una bellissima opportunità di risentire ' +
|
||||
'vecchi amici che non sento da tempo, ed avere un intento comune, anche solo un giochino, ci ' +
|
||||
'da di nuovo la possibilità di sentirci e di riconnetterci.<br>',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
color: 'white',
|
||||
icon: 'fas fa-hand-holding-heart',
|
||||
textcolor: 'black'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
it: 'Dietro ogni amico che anche non sentire da un bel pò, c\'è la possibilità di ' +
|
||||
'riscoprire la gioia ed il motivo che vi ha fatti essere amici, anche molto tempo fa',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
color: 'white',
|
||||
icon: 'far fa-smile-beam',
|
||||
textcolor: 'black'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
it: 'Ieri sera sono entrati nella mia Billettera 1 persona, che ne ha portate subito altre 2, che ' +
|
||||
'non sentivo da secoli, portando una gran gioia ed energia ed entusiasmo.<br> ' +
|
||||
'E\' stato molto bello risentirli 😊 <br>' +
|
||||
'Se non gli avessi scritto, non sarebbe mai successo.<br>',
|
||||
es: '',
|
||||
enUs: ''
|
||||
},
|
||||
color: 'white',
|
||||
icon: 'far fa-sun',
|
||||
textcolor: 'black'
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
// console.log('Home constructor...')
|
||||
this.initprompt()
|
||||
}
|
||||
|
||||
public meta() {
|
||||
return tools.metafunc(this)
|
||||
}
|
||||
|
||||
get isVerified() {
|
||||
return UserStore.state.my.verified_email
|
||||
}
|
||||
|
||||
get tools() {
|
||||
return tools
|
||||
}
|
||||
|
||||
public mounted() {
|
||||
|
||||
let primo = true
|
||||
const mytime = 10000
|
||||
this.polling = setInterval(() => {
|
||||
|
||||
this.firstClassSection = 'landing_background fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
|
||||
primo = !primo
|
||||
|
||||
// console.log('this.firstClassSection', this.firstClassSection)
|
||||
|
||||
}, mytime)
|
||||
}
|
||||
|
||||
public beforeDestroy() {
|
||||
// console.log('beforeDestroy')
|
||||
clearInterval(this.polling)
|
||||
}
|
||||
|
||||
public created() {
|
||||
this.animare = process.env.DEV ? 0 : 8000
|
||||
|
||||
GlobalStore.actions.prova()
|
||||
|
||||
this.endload = true
|
||||
}
|
||||
|
||||
get isLogged() {
|
||||
return UserStore.state.isLogged
|
||||
}
|
||||
|
||||
public mystilecard() {
|
||||
return {
|
||||
visibility: this.cardvisible,
|
||||
display: this.displaycard
|
||||
}
|
||||
}
|
||||
|
||||
get conta() {
|
||||
return GlobalStore.state.conta
|
||||
}
|
||||
|
||||
public getenv(myvar) {
|
||||
return process.env[myvar]
|
||||
}
|
||||
|
||||
set conta(valore) {
|
||||
GlobalStore.actions.setConta(valore)
|
||||
const my = this.$q.lang.isoName
|
||||
tools.showNotif(this.$q, String(my))
|
||||
}
|
||||
|
||||
public initprompt() {
|
||||
window.addEventListener('beforeinstallprompt', (event) => {
|
||||
// console.log('******************************** beforeinstallprompt fired')
|
||||
event.preventDefault()
|
||||
// console.log('§§§§§§§§§§§§§§§§§§§§ IMPOSTA DEFERRED PROMPT !!!!!!!!!!!!!!!!! ')
|
||||
// #Todo++ IMPOSTA DEFERRED PROMPT
|
||||
return false
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
get isInCostruction() {
|
||||
return process.env.IN_CONSTRUCTION === '1'
|
||||
}
|
||||
|
||||
public getPermission() {
|
||||
return Notification.permission
|
||||
}
|
||||
|
||||
public NotServiceWorker() {
|
||||
return (!('serviceWorker' in navigator))
|
||||
}
|
||||
|
||||
public PagLogin() {
|
||||
this.$router.replace('/signin')
|
||||
}
|
||||
|
||||
public PagReg() {
|
||||
this.$router.replace('/signup')
|
||||
}
|
||||
|
||||
public openCreatePostModal() {
|
||||
console.log('APERTO ! openCreatePostModal')
|
||||
|
||||
this.conta = this.conta + 1
|
||||
|
||||
this.visibile = !this.visibile
|
||||
|
||||
if (this.visibile) {
|
||||
this.displaycard = 'block'
|
||||
this.cardvisible = 'visible'
|
||||
} else {
|
||||
this.displaycard = 'block'
|
||||
this.cardvisible = 'hidden'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
get getappname() {
|
||||
return tools.getappname(this, false)
|
||||
}
|
||||
|
||||
get getArrDisciplines() {
|
||||
return GlobalStore.state.disciplines.filter((rec) => rec.showinhome)
|
||||
}
|
||||
|
||||
public getpath(myvideo) {
|
||||
return 'statics/video/' + func_tools.getLocale() + '/' + myvideo
|
||||
}
|
||||
|
||||
public getkey(youtube, title, isnum) {
|
||||
let mykey = 'MP4'
|
||||
if (youtube)
|
||||
mykey = 'YT'
|
||||
|
||||
if (isnum) {
|
||||
mykey += '_NUM'
|
||||
} else {
|
||||
if (title)
|
||||
mykey += '_TITLE_'
|
||||
else
|
||||
mykey += '_VIDEO_'
|
||||
}
|
||||
|
||||
return mykey
|
||||
}
|
||||
|
||||
public getvideourl(index, youtube) {
|
||||
const myvideo = this.getValDb(this.getkey(youtube, false, false) + index, false)
|
||||
if (myvideo)
|
||||
return this.getpath(myvideo)
|
||||
else
|
||||
return ''
|
||||
}
|
||||
|
||||
public getvideonum(youtube) {
|
||||
return this.getValDb(this.getkey(youtube, false, true), false)
|
||||
}
|
||||
|
||||
public mygetarrValDb(keystr, serv) {
|
||||
const myval = GlobalStore.getters.getValueSettingsByKey(keystr, serv)
|
||||
// console.log('AA: myval', myval)
|
||||
try {
|
||||
if (myval) {
|
||||
// console.log(' Entro')
|
||||
const myrec = JSON.parse(myval)
|
||||
// console.log('*************** getarrValDb')
|
||||
// console.table(myrec)
|
||||
return myrec
|
||||
} else {
|
||||
// console.log('NO MYVAL')
|
||||
return []
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Errore: ', e)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
public getvideotitle(index, youtube) {
|
||||
|
||||
const mykey = this.getkey(youtube, true, false) + index
|
||||
const ris = this.mygetarrValDb(mykey, false)
|
||||
|
||||
return tools.getelembylang(ris)
|
||||
}
|
||||
|
||||
public gettitle_advise(rec) {
|
||||
return rec.title[tools.getLocale()]
|
||||
}
|
||||
|
||||
public geticonlist(rec) {
|
||||
if (rec.icon) {
|
||||
return rec.icon
|
||||
} else {
|
||||
return 'fas fa-info'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public getaudiofiles() {
|
||||
return this.audiofiles[tools.getLocale()]
|
||||
}
|
||||
|
||||
public gettestimonianze() {
|
||||
return this.testimonianze[tools.getLocale()]
|
||||
}
|
||||
|
||||
public getvideomp4src(index) {
|
||||
return [{ src: this.getvideourl(index, false), type: 'video/mp4' }
|
||||
]
|
||||
}
|
||||
|
||||
public getvideoposter(index) {
|
||||
return ''
|
||||
}
|
||||
|
||||
public getfileimgdown(rec) {
|
||||
return rec.file[tools.getLocale()]
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
414
src/root/home/home.vue
Normal file
414
src/root/home/home.vue
Normal file
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<q-page>
|
||||
<CMyPage title="">
|
||||
<span>{{ setmeta({
|
||||
title: 'Home',
|
||||
description: $t('msg.myAppDescription'),
|
||||
keywords: $t('msg.keywords_base') } ) }}
|
||||
</span>
|
||||
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero maxwidth1200 text-white">
|
||||
<q-carousel
|
||||
animated
|
||||
swipeable
|
||||
infinite
|
||||
navigation
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
height="400px"
|
||||
>
|
||||
<q-carousel-slide name="first"
|
||||
:img-src="getsrcbyimg('../../statics/images/background.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{getappname}}</h1>
|
||||
<br>
|
||||
<h2 class="text-h4 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</h2>
|
||||
<h2 class="text-h4 shadow-max text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp2')}}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="second"
|
||||
:img-src="getsrcbyimg('../../statics/images/background2.jpg')" alt="">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<h1 class="text-h1 shadow-max">{{getappname}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true"
|
||||
class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third"
|
||||
:img-src="getsrcbyimg('../../statics/images/background3.jpg')">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero2-content row justify-center q-gutter-xs clgutter">
|
||||
<div class="row">
|
||||
<logo></logo>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div class="q-gutter-xs testo-banda clgutter">
|
||||
<div class="text-h1 shadow-max">{{getappname}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon text-h2 text-white material-icons">expand_more</i>-->
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div v-if="isLogged && !isVerified" class="text-verified">{{
|
||||
$t('components.authentication.email_verification.link_sent') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('text.how')" bgcolor="bg-primary" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.25rem; " myclass="myshad">
|
||||
<CImgText src="">
|
||||
<q-icon name="fas fa-gift" size="lg" inverted color="primary"></q-icon>
|
||||
<div class="q-pa-sm" v-if="toolsext.isLang('it')">
|
||||
<p class="cltexth4 text-green-8">È un gioco etico di <span class="boldhigh">Economia Circolare</span>
|
||||
dove ognuno
|
||||
entrando porta in dono <span class="boldhigh">33 €</span> ed esce con <span
|
||||
class="boldhigh">1848 €</span> alla fine del ciclo.</p>
|
||||
<p class="cltexth4 text-red-8">E' uno scambio di Reciproco Aiuto</p>
|
||||
|
||||
<p class="cltexth4 text-blue-8">
|
||||
E' un sistema Circolare UMANO, che, se seguito bene, con il minimo sforzo, si ottieme il massimo apporto.
|
||||
</p>
|
||||
</div>
|
||||
</CImgText>
|
||||
|
||||
</CTitleBanner>
|
||||
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('text.step')" bgcolor="bg-positive" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.25rem; ">
|
||||
<div class="q-gutter-md">
|
||||
<q-carousel
|
||||
v-model="mysteps"
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
swipeable
|
||||
control-color="white"
|
||||
padding
|
||||
ref="mysteps"
|
||||
height="400px"
|
||||
class="bg-primary text-white shadow-1 rounded-borders"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="top-left"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_left"
|
||||
@click="$refs.mysteps.previous()"></q-btn>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="top-right"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_right"
|
||||
@click="$refs.mysteps.next()"></q-btn>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
<q-carousel-slide v-for="(rec, index) in arrsteps" :key="index" :name="index"
|
||||
class="column no-wrap flex-center">
|
||||
<div class="row no-wrap items-center justify-around q-gutter-lg">
|
||||
<q-icon :name="rec.myicon" size="56px"></q-icon>
|
||||
<q-icon v-if="rec.myicon2" :name="rec.myicon2" size="56px"></q-icon>
|
||||
<q-icon v-if="rec.myicon3" :name="rec.myicon3" size="56px"></q-icon>
|
||||
<q-img v-if="rec.myimg" :src="rec.myimg" style="height: 56px; width: 56px;"></q-img>
|
||||
</div>
|
||||
<div class="q-mt-md text-center step-text" v-html="gettitle_advise(rec)">
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
<div class="row justify-center">
|
||||
<q-btn-toggle
|
||||
glossy
|
||||
v-model="mysteps"
|
||||
:options="arrsteps"
|
||||
></q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</CTitleBanner>
|
||||
|
||||
<section class="q-pa-sm bg-primary landing__swirl-bg">
|
||||
<div class="landing__features row justify-sm-around column">
|
||||
<q-carousel
|
||||
animated
|
||||
swipeable
|
||||
navigation
|
||||
infinite
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide_video"
|
||||
ref="slide_video"
|
||||
:height="tools.heightgallery(getValDb('MP4_W', false) / getValDb('MP4_H', false))"
|
||||
width="100%"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="top-left"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="keyboard_arrow_left"
|
||||
@click="$refs.slide_video.previous()"></q-btn>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="top-right"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="keyboard_arrow_right"
|
||||
@click="$refs.slide_video.next()"></q-btn>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
|
||||
<q-carousel-slide v-for="index in getvideonum(false)" :name="`mp4_`+index" :key="index">
|
||||
|
||||
<div v-if="getvideourl(index, false)"
|
||||
class="row justify-evenly items-center q-gutter-sm ">
|
||||
<div class="text-center">
|
||||
<div class="subtitle_small text-blue"
|
||||
v-html="getvideotitle(index, false)"></div>
|
||||
|
||||
<div class="">
|
||||
<q-media-player
|
||||
type="video"
|
||||
:sources="getvideomp4src(index)"
|
||||
:poster="getvideoposter(index)"
|
||||
>
|
||||
</q-media-player>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-carousel-slide>
|
||||
|
||||
<q-carousel-slide v-for="index in getvideonum(true)" :name="`yt_`+index" :key="index">
|
||||
<div v-if="getvideourl(index, true)"
|
||||
class="row justify-evenly items-center q-gutter-sm ">
|
||||
|
||||
<div class="text-center">
|
||||
<div class="subtitle_small text-blue" v-html="getvideotitle(index, true)"></div>
|
||||
<div class="">
|
||||
<iframe
|
||||
:width="tools.getwidthscale(mythis(), getValDb('YT_W', false), 800)"
|
||||
:height="tools.getheightbywidth(mythis(), getValDb('YT_W', false), getValDb('YT_H', false), 800)"
|
||||
:src="getvideourl(index, true)"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-carousel-slide>
|
||||
|
||||
</q-carousel>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('text.what')" bgcolor="bg-secondary" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.25rem; ">
|
||||
<div class="q-mx-md cltexth4" >
|
||||
1) Voglia di giocare, e desiderio di Donare 33 € per aiutare un'altra persona a realizzare i propri sogni.<br><br>
|
||||
<q-img src="/statics/images/it/Esempio_di_Billettera_di_Vera.jpg"></q-img>
|
||||
2) L'impegno di seguire delle indicazioni nei tempi stabiliti all' interno di una chat whatsapp, dove ogni passaggio è spiegato e guidato.<br><br>
|
||||
3) Parlare e condividere ai tuoi amici un messaggio dove spieghi questo sistema, impegnandoti così a trovare 2 persone interessate ad entrare.
|
||||
</div>
|
||||
|
||||
</CTitleBanner>
|
||||
|
||||
<!-- SUGGERIMENTI -->
|
||||
<CTitleBanner cl ass="q-pa-xs" :title="$t('text.advise')" bgcolor="bg-primary" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.25rem; " myclass="myshad">
|
||||
<div v-if="toolsext.isLang('it')">
|
||||
<q-list dense bordered padding class="rounded-borders">
|
||||
<div v-for="(rec, index) in advise" :key="index">
|
||||
<q-item :class="rec.color">
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="geticonlist(rec)" :color="rec.iconcolor" inverted></q-icon>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<span v-html="gettitle_advise(rec)" :style="`color: `+rec.textcolor"></span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator spaced/>
|
||||
</div>
|
||||
</q-list>
|
||||
</div>
|
||||
</CTitleBanner>
|
||||
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('text.testimonial')" bgcolor="bg-negative" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.25rem; ">
|
||||
|
||||
<q-carousel
|
||||
v-model="myaudio"
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
swipeable
|
||||
animated
|
||||
control-color="white"
|
||||
padding
|
||||
ref="myaudio"
|
||||
height="150px"
|
||||
class="text-white shadow-1 rounded-borders"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="top-left"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_left"
|
||||
@click="$refs.myaudio.previous()"></q-btn>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="top-right"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.6;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_right"
|
||||
@click="$refs.myaudio.next()"></q-btn>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
<q-carousel-slide v-for="(recaudio, index) in getaudiofiles()" :key="index" :name="index"
|
||||
class="column no-wrap flex-center">
|
||||
<div class="q-pa-sm text-subtitle2 text-blue">{{ recaudio.title }}</div>
|
||||
<q-media-player
|
||||
type="audio"
|
||||
:sources="[...recaudio]"
|
||||
background-color="deep-purple-3"
|
||||
:playback-rates="[ { label: 'Normal', value: 1 }, { label: '1.15x', value: 1.15 } ]"
|
||||
></q-media-player>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
<div class="row justify-center">
|
||||
<q-btn-toggle
|
||||
glossy
|
||||
v-model="myaudio"
|
||||
:options="getaudiofiles()"
|
||||
></q-btn-toggle>
|
||||
</div>
|
||||
|
||||
<q-carousel
|
||||
v-model="mytestimonianze"
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
swipeable
|
||||
animated
|
||||
control-color="white"
|
||||
padding
|
||||
ref="mytestimonianze"
|
||||
height="450px"
|
||||
class="text-white shadow-1 rounded-borders"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="bottom-left"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.4;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_left"
|
||||
@click="$refs.mytestimonianze.previous()"></q-btn>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="bottom-right"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.4;">
|
||||
<q-btn
|
||||
push round color="white" text-color="black" icon="arrow_right"
|
||||
@click="$refs.mytestimonianze.next()"></q-btn>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
<q-carousel-slide v-for="(rec, index) in gettestimonianze()" :key="index" :name="index"
|
||||
class="row flex-center">
|
||||
<div class="q-pa-sm text-subtitle2 text-blue">{{ rec.title }}</div>
|
||||
<div v-html="rec.text" class="text-black"></div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
<div class="row justify-center">
|
||||
<q-btn-toggle
|
||||
glossy
|
||||
v-model="mytestimonianze"
|
||||
:options="gettestimonianze()"
|
||||
></q-btn-toggle>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</CTitleBanner>
|
||||
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('text.download')" bgcolor="bg-warning" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.125rem;">
|
||||
|
||||
<div v-for="(rec, index) in todownload[toolsext.getLocale()]" :key="index" :name="index">
|
||||
<div class="q-pa-xs text-center text-subtitle1"><a :href="rec.file" target="_blank">{{rec.title}}</a></div>
|
||||
</div>
|
||||
|
||||
</CTitleBanner>
|
||||
|
||||
<!--<CTitleBanner class="q-pa-xs" :title="$t('text.faq')" bgcolor="bg-info" clcolor="text-white"
|
||||
mystyle="letter-spacing: 0.125rem;">
|
||||
|
||||
</CTitleBanner>-->
|
||||
|
||||
|
||||
<div v-if="!tools.isMobile()" style="margin: 60px 60px;"></div>
|
||||
|
||||
</div>
|
||||
</CMyPage>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './home.scss';
|
||||
</style>
|
||||
0
src/root/mypage/mypage.scss
Normal file
0
src/root/mypage/mypage.scss
Normal file
40
src/root/mypage/mypage.ts
Normal file
40
src/root/mypage/mypage.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop } from 'vue-property-decorator'
|
||||
import { GlobalStore, UserStore } from '@store'
|
||||
|
||||
import { tools } from '../../store/Modules/tools'
|
||||
import { toolsext } from '../../store/Modules/toolsext'
|
||||
import { static_data } from '../../db/static_data'
|
||||
import { Screen } from 'quasar'
|
||||
|
||||
import { colmypage } from '@src/store/Modules/fieldsTable'
|
||||
|
||||
import { CImgText } from '../../components/CImgText/index'
|
||||
import { CCard, CGridTableRec, CMyPage, CTitleBanner } from '@components'
|
||||
import MixinMetaTags from '../../mixins/mixin-metatags'
|
||||
import MixinBase from '@src/mixins/mixin-base'
|
||||
import { IMyPage } from '@src/model/GlobalStore'
|
||||
|
||||
@Component({
|
||||
mixins: [MixinBase],
|
||||
components: { CImgText, CCard, CMyPage, CTitleBanner }
|
||||
})
|
||||
export default class Mypage extends MixinMetaTags {
|
||||
public heightimg
|
||||
public imgback
|
||||
public rec: IMyPage = {}
|
||||
|
||||
public mounted() {
|
||||
console.log('this.$route.path', this.$route.path)
|
||||
this.rec = GlobalStore.getters.getPage(this.$route.path)
|
||||
console.log(this.rec)
|
||||
}
|
||||
|
||||
public meta() {
|
||||
return tools.metafunc(this)
|
||||
}
|
||||
|
||||
get static_data() {
|
||||
return static_data
|
||||
}
|
||||
}
|
||||
21
src/root/mypage/mypage.vue
Normal file
21
src/root/mypage/mypage.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<CMyPage :title="rec.title" :imgbackground="`statics/` + rec.imgback" :sizes="`max-height: ` + rec.heightimg + `px`">
|
||||
<span>{{ setmeta({
|
||||
title: rec.title,
|
||||
description: rec.description,
|
||||
keywords: rec.keywords } ) }}
|
||||
</span>
|
||||
|
||||
<div class="q-ma-sm q-gutter-sm q-pa-xs">
|
||||
<div v-html="rec.content"></div>
|
||||
</div>
|
||||
</CMyPage>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" src="./mypage.ts">
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import 'mypage.scss';
|
||||
</style>
|
||||
0
src/root/policy/policy.scss
Normal file
0
src/root/policy/policy.scss
Normal file
27
src/root/policy/policy.ts
Normal file
27
src/root/policy/policy.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
|
||||
import { static_data } from '@src/db/static_data'
|
||||
|
||||
import { PagePolicy } from '../../components/PagePolicy'
|
||||
import MixinMetaTags from '@src/mixins/mixin-metatags'
|
||||
import { tools } from '@src/store/Modules/tools'
|
||||
|
||||
@Component({
|
||||
name: 'Policy',
|
||||
components: { PagePolicy }
|
||||
})
|
||||
|
||||
export default class Policy extends MixinMetaTags {
|
||||
|
||||
public mioalert = false
|
||||
|
||||
public meta() {
|
||||
return tools.metafunc(this)
|
||||
}
|
||||
|
||||
get static_data() {
|
||||
return static_data
|
||||
}
|
||||
|
||||
}
|
||||
33
src/root/policy/policy.vue
Normal file
33
src/root/policy/policy.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<q-page class="">
|
||||
<div class="landing">
|
||||
<span>{{ setmeta({
|
||||
title: 'Policy',
|
||||
description: "Policy",
|
||||
keywords: 'Policy' } ) }}
|
||||
</span>
|
||||
<PagePolicy
|
||||
owneremail="notevole@freeplanet.app"
|
||||
SiteName="Notevole"
|
||||
ownerDataName="Notevole"
|
||||
managerData="Notevole"
|
||||
includeData="dati anagrafici (ragione sociale, nome, cognome), recapiti (telefono, indirizzo email)"
|
||||
url="notevole.freeplanet.app"
|
||||
lastdataupdate="28 dicembre 2019"
|
||||
country="Italia"
|
||||
>
|
||||
|
||||
</PagePolicy>
|
||||
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" src="./policy.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './policy.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user