Insert Carosel (3 images to the HomePage)
This commit is contained in:
Paolo Arena
@@ -1,100 +1,289 @@
|
||||
<template>
|
||||
<q-page class="text-white">
|
||||
<div :class="firstClassSection">
|
||||
<div class="landing">
|
||||
<section>
|
||||
<div class="landing__hero">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-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">FreePlanet</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
<q-carousel
|
||||
animated
|
||||
:autoplay="7000"
|
||||
swipeable
|
||||
infinite
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
v-model="slide"
|
||||
height="100%"
|
||||
width="100%"
|
||||
>
|
||||
<q-carousel-slide name="first" class="homep-cover-img-1">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-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">FreePlanet</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
<div v-if="isInCostruction" style="margin: 5px;">
|
||||
<q-banner
|
||||
rounded
|
||||
class="bg-primary text-white"
|
||||
style="text-align: center;">
|
||||
|
||||
<span class="mybanner">{{$t('msg.underconstruction')}}</span>
|
||||
</q-banner>
|
||||
<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
|
||||
<q-btn rounded size="lg" color="primary" @click="PagLogin"
|
||||
class="btn-start">
|
||||
{{$t('login.enter')}}
|
||||
</q-btn>
|
||||
<q-btn rounded size="lg" color="positive" @click="PagReg"
|
||||
class="btn-start">
|
||||
{{$t('reg.submit')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLogged">
|
||||
<div>
|
||||
<!--<q-field-->
|
||||
<!--v-if="getPermission() === 'granted'"-->
|
||||
<!--icon="notifications"-->
|
||||
<!--class="shadow"-->
|
||||
<!--:label="$t('notification.titlegranted')"-->
|
||||
<!--:helper="$t('notification.statusnot')">-->
|
||||
<!--</q-field>-->
|
||||
<q-field
|
||||
v-if="NotServiceWorker()"
|
||||
class="shadow"
|
||||
icon="notifications"
|
||||
label="Service Worker not present"
|
||||
>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn v-if="getPermission() !== 'granted'"
|
||||
class="enable-notifications shadow"
|
||||
color="primary" rounded
|
||||
size="md"
|
||||
icon="notifications" @click="askfornotification"
|
||||
:label="$t('notification.ask')"/>
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<q-btn>
|
||||
|
||||
Canale Telegram: <a href="https://t.me/freeplanet_channel" target="_blank"
|
||||
style="color: white;">
|
||||
<q-icon class="fab fa-telegram" size="2rem"/>
|
||||
</a>
|
||||
</q-btn>
|
||||
-->
|
||||
|
||||
<div v-if="isInCostruction" style="margin: 5px;">
|
||||
<q-banner
|
||||
type="info"
|
||||
class="q-mb-sm">
|
||||
{{$t('msg.underconstruction')}}
|
||||
</q-banner>
|
||||
<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
|
||||
<q-btn rounded size="lg" color="primary" @click="PagLogin"
|
||||
class="btn-start">
|
||||
{{$t('login.enter')}}
|
||||
</q-btn>
|
||||
<q-btn rounded size="lg" color="positive" @click="PagReg" class="btn-start">
|
||||
{{$t('reg.submit')}}
|
||||
</q-btn>
|
||||
<div class="q-pt-md q-pl-sm">
|
||||
<div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLogged">
|
||||
<div>
|
||||
<!--<q-field-->
|
||||
<!--v-if="getPermission() === 'granted'"-->
|
||||
<!--icon="notifications"-->
|
||||
<!--class="shadow"-->
|
||||
<!--:label="$t('notification.titlegranted')"-->
|
||||
<!--:helper="$t('notification.statusnot')">-->
|
||||
<!--</q-field>-->
|
||||
<q-field
|
||||
v-if="NotServiceWorker()"
|
||||
class="shadow"
|
||||
icon="notifications"
|
||||
label="Service Worker not present"
|
||||
>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn v-if="getPermission() !== 'granted'"
|
||||
class="enable-notifications shadow"
|
||||
color="primary" rounded
|
||||
size="md"
|
||||
icon="notifications" @click="askfornotification"
|
||||
:label="$t('notification.ask')"/>
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="q-pt-md q-pl-sm">
|
||||
<div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true" class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
<div 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" class="homep-cover-img-2">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-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">FreePlanet</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
<div v-if="isInCostruction" style="margin: 5px;">
|
||||
<q-banner
|
||||
rounded
|
||||
class="bg-primary text-white"
|
||||
style="text-align: center;">
|
||||
|
||||
<span class="mybanner">{{$t('msg.underconstruction')}}</span>
|
||||
</q-banner>
|
||||
<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
|
||||
<q-btn rounded size="lg" color="primary" @click="PagLogin"
|
||||
class="btn-start">
|
||||
{{$t('login.enter')}}
|
||||
</q-btn>
|
||||
<q-btn rounded size="lg" color="positive" @click="PagReg"
|
||||
class="btn-start">
|
||||
{{$t('reg.submit')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLogged">
|
||||
<div>
|
||||
<!--<q-field-->
|
||||
<!--v-if="getPermission() === 'granted'"-->
|
||||
<!--icon="notifications"-->
|
||||
<!--class="shadow"-->
|
||||
<!--:label="$t('notification.titlegranted')"-->
|
||||
<!--:helper="$t('notification.statusnot')">-->
|
||||
<!--</q-field>-->
|
||||
<q-field
|
||||
v-if="NotServiceWorker()"
|
||||
class="shadow"
|
||||
icon="notifications"
|
||||
label="Service Worker not present"
|
||||
>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn v-if="getPermission() !== 'granted'"
|
||||
class="enable-notifications shadow"
|
||||
color="primary" rounded
|
||||
size="md"
|
||||
icon="notifications" @click="askfornotification"
|
||||
:label="$t('notification.ask')"/>
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="q-pt-md q-pl-sm">
|
||||
<div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true" class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
<!--<div class="absolute-bottom custom-caption">-->
|
||||
<!--<div class="text-h2">Second stop</div>-->
|
||||
<!--<div class="text-subtitle1">Famous City</div>-->
|
||||
<!--</div>-->
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="third" class="homep-cover-img-3">
|
||||
<div class="landing__header"></div>
|
||||
<div class="landing__hero-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">FreePlanet</div>
|
||||
<div class="text-subtitle1 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp')}}
|
||||
</div>
|
||||
<div class="text-subtitle1 shadow-max big text-italic q-pl-sm"><strong>{{$t('msg.sottoTitoloApp2')}}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle2 shadow text-italic q-pl-sm">
|
||||
{{$t('msg.sottoTitoloApp3')}}
|
||||
</div>
|
||||
|
||||
<div class="text-subtitle3 shadow text-italic q-pl-sm ">
|
||||
{{$t('msg.sottoTitoloApp4')}}
|
||||
</div>
|
||||
|
||||
<div v-if="isInCostruction" style="margin: 5px;">
|
||||
<q-banner
|
||||
rounded
|
||||
class="bg-primary text-white"
|
||||
style="text-align: center;">
|
||||
|
||||
<span class="mybanner">{{$t('msg.underconstruction')}}</span>
|
||||
</q-banner>
|
||||
<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!isLogged" style="margin: 5px; padding: 5px;" class="home">
|
||||
<q-btn rounded size="lg" color="primary" @click="PagLogin"
|
||||
class="btn-start">
|
||||
{{$t('login.enter')}}
|
||||
</q-btn>
|
||||
<q-btn rounded size="lg" color="positive" @click="PagReg"
|
||||
class="btn-start">
|
||||
{{$t('reg.submit')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLogged">
|
||||
<div>
|
||||
<!--<q-field-->
|
||||
<!--v-if="getPermission() === 'granted'"-->
|
||||
<!--icon="notifications"-->
|
||||
<!--class="shadow"-->
|
||||
<!--:label="$t('notification.titlegranted')"-->
|
||||
<!--:helper="$t('notification.statusnot')">-->
|
||||
<!--</q-field>-->
|
||||
<q-field
|
||||
v-if="NotServiceWorker()"
|
||||
class="shadow"
|
||||
icon="notifications"
|
||||
label="Service Worker not present"
|
||||
>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-btn v-if="getPermission() !== 'granted'"
|
||||
class="enable-notifications shadow"
|
||||
color="primary" rounded
|
||||
size="md"
|
||||
icon="notifications" @click="askfornotification"
|
||||
:label="$t('notification.ask')"/>
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
|
||||
<!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="q-pt-md q-pl-sm">
|
||||
<div class="text-body2">Ver. {{getenv('APP_VERSION')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing__arrow absolute-bottom text-center">
|
||||
<i aria-hidden="true" class="q-icon text-h2 text-white material-icons">expand_more</i>
|
||||
</div>
|
||||
<!--<div class="absolute-bottom custom-caption">-->
|
||||
<!--<div class="text-h2">Third stop</div>-->
|
||||
<!--<div class="text-subtitle1">Famous Bridge</div>-->
|
||||
<!--</div>-->
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -126,7 +315,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-sm-5">
|
||||
<div class="feature-item"><i aria-hidden="true"
|
||||
class="q-icon fas fa-apple-alt"> </i><h4>
|
||||
class="q-icon fas fa-apple-alt"> </i><h4>
|
||||
{{$t('homepage.freegas.title')}}</h4>
|
||||
<p class="feat-descr" v-html="$t('homepage.freegas.descr')"></p></div>
|
||||
</div>
|
||||
@@ -177,10 +366,10 @@
|
||||
<div class="text-center">
|
||||
<div class="landing__footer-icons row flex-center">
|
||||
<a href="https://www.facebook.com/freeplanetapp" target="_blank">
|
||||
<i aria-hidden="true" class="q-icon fab fa-facebook-f"> </i></a>
|
||||
<i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact"> </i></a>
|
||||
|
||||
<a :href="TelegramSupport" target="_blank">
|
||||
<i aria-hidden="true" class="q-icon fab fa-telegram"></i></a>
|
||||
<i aria-hidden="true" class="q-icon fab fa-telegram icon_contact"></i></a>
|
||||
|
||||
|
||||
<!--<a href="" target="_blank"><i aria-hidden="true" class="q-icon fab fa-github"> </i></a>-->
|
||||
@@ -193,10 +382,12 @@
|
||||
<!--class="q-icon fab fa-patreon"> </i></a>-->
|
||||
</div>
|
||||
|
||||
<div class="q-mt-md">Released under the
|
||||
<div class="q-mt-xs text-weight-thin" style="text-shadow: 4px 4px 8px #555;">
|
||||
Contacts
|
||||
<!--Released under the-->
|
||||
<!--<a href="https://github.com/quasarframework/quasar/blob/dev/LICENSE" target="_blank"-->
|
||||
<!--rel="noopener noreferrer" class="doc-link">-->
|
||||
MIT LICENSE
|
||||
<!--MIT LICENSE-->
|
||||
<!--<i aria-hidden="true"-->
|
||||
<!--class="q-icon material-icons">launch</i></a>-->
|
||||
<!--| <a href="https://www.iubenda.com/privacy-policy/40685560" target="_blank"-->
|
||||
@@ -206,7 +397,6 @@
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
|
||||
Reference in New Issue
Block a user