- Installa App e pagina Home Riso.
This commit is contained in:
Surya Paolo
@@ -0,0 +1,535 @@
|
||||
// Debug Info
|
||||
.debug-info {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.debug-label {
|
||||
font-weight: 700;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Container principale
|
||||
.install-app-container {
|
||||
padding: 1.5rem;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Card base
|
||||
.install-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// Layout centrato
|
||||
.card-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
// Wrapper icona
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: rgba(107, 142, 35, 0.1);
|
||||
color: #6b8e23;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(107, 142, 35, 0.15);
|
||||
color: #6b8e23;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
&.ios {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.android {
|
||||
background: rgba(60, 186, 84, 0.1);
|
||||
color: #3cba54;
|
||||
}
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Titoli e descrizioni
|
||||
.card-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
// Bottone installazione
|
||||
.install-btn {
|
||||
padding: 0.875rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
min-width: 200px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 24px rgba(107, 142, 35, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Box istruzioni (WebView ristretta)
|
||||
.instructions-box {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
|
||||
.instructions-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
|
||||
.instruction-content {
|
||||
.instruction-text {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #78350f;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.open-browser-btn {
|
||||
width: 100%;
|
||||
padding: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Lista step
|
||||
.step-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #6b8e23 0%, #556b2f 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #374151;
|
||||
|
||||
strong {
|
||||
color: #6b8e23;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Istruzioni piattaforma (iOS/Android)
|
||||
.platform-instructions {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.fallback {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
|
||||
.fallback-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 1rem 0 0.75rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.fallback-text {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
|
||||
strong {
|
||||
color: #3b82f6;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||||
}
|
||||
|
||||
.platform-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.icon-wrapper {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.platform-text {
|
||||
text-align: left;
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.25rem 0;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
color: #9ca3af;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-content {
|
||||
padding: 1.5rem;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
|
||||
.step-list {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.screenshots {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
|
||||
.screenshot {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animazioni
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-fade-leave-to {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 768px) {
|
||||
.install-app-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.install-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
&.ios,
|
||||
&.android {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.install-btn {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.instructions-box {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.step-list .step-item {
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-header {
|
||||
padding: 1rem;
|
||||
|
||||
.platform-info {
|
||||
gap: 0.75rem;
|
||||
|
||||
.platform-text {
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-content {
|
||||
padding: 1rem;
|
||||
|
||||
.screenshots {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.instructions-box {
|
||||
.instructions-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-header {
|
||||
.platform-info {
|
||||
.icon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
body.body--dark {
|
||||
.install-card {
|
||||
background: rgba(30, 30, 30, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.instructions-box {
|
||||
background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
|
||||
|
||||
.instructions-header h4 {
|
||||
color: #fef3c7;
|
||||
}
|
||||
|
||||
.instruction-content .instruction-text {
|
||||
color: #fde68a;
|
||||
}
|
||||
}
|
||||
|
||||
.step-list .step-item {
|
||||
background: #1f2937;
|
||||
|
||||
.step-text {
|
||||
color: #d1d5db;
|
||||
|
||||
strong {
|
||||
color: #86a54a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-instructions {
|
||||
background: #1f2937;
|
||||
|
||||
&.fallback {
|
||||
.fallback-title {
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
.fallback-text {
|
||||
color: #d1d5db;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-header {
|
||||
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
|
||||
}
|
||||
|
||||
.platform-info .platform-text {
|
||||
h4 {
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platform-content {
|
||||
background: #111827;
|
||||
border-top-color: #374151;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,13 @@
|
||||
import { defineComponent, ref, computed, onMounted } from 'vue';
|
||||
import { useGlobalStore } from '@store/globalStore';
|
||||
import { tools } from '@tools';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CCheckAppRunning',
|
||||
setup() {
|
||||
const globalStore = useGlobalStore();
|
||||
const $q = useQuasar();
|
||||
|
||||
const isAppRunning = computed(() => globalStore.isAppRunning === true);
|
||||
const finishLoading = computed(() => globalStore.finishLoading === true);
|
||||
@@ -14,6 +16,7 @@ export default defineComponent({
|
||||
|
||||
const viewiOS = ref(false);
|
||||
const viewAndroid = ref(false);
|
||||
const viewDesktop = ref(false); // NUOVO
|
||||
const showNotice = ref(false);
|
||||
const showOther = ref(false);
|
||||
|
||||
@@ -30,7 +33,23 @@ export default defineComponent({
|
||||
|
||||
const matchedWebView = webViewDetectors.find(({ test }) => test.test(navigator.userAgent));
|
||||
const isInRestrictedWebView = !!matchedWebView;
|
||||
const webViewName = matchedWebView ? matchedWebView.name : 'un’app';
|
||||
const webViewName = matchedWebView ? matchedWebView.name : 'un\'app';
|
||||
|
||||
// NUOVO: Rileva se è un browser desktop che supporta PWA
|
||||
const isDesktopBrowser = computed(() => {
|
||||
return !$q.platform.is.mobile && !$q.platform.is.ios && !$q.platform.is.android;
|
||||
});
|
||||
|
||||
// NUOVO: Rileva browser specifici
|
||||
const browserInfo = computed(() => {
|
||||
const ua = navigator.userAgent;
|
||||
if (ua.includes('Edg/')) return { name: 'Edge', supported: true };
|
||||
if (ua.includes('Chrome') && !ua.includes('Edg')) return { name: 'Chrome', supported: true };
|
||||
if (ua.includes('Brave')) return { name: 'Brave', supported: true };
|
||||
if (ua.includes('Firefox')) return { name: 'Firefox', supported: true };
|
||||
if (ua.includes('Safari') && !ua.includes('Chrome')) return { name: 'Safari', supported: true };
|
||||
return { name: 'questo browser', supported: false };
|
||||
});
|
||||
|
||||
// === Installazione ===
|
||||
function installApp() {
|
||||
@@ -56,12 +75,15 @@ export default defineComponent({
|
||||
homescreen,
|
||||
viewiOS,
|
||||
viewAndroid,
|
||||
viewDesktop, // NUOVO
|
||||
installApp,
|
||||
isInRestrictedWebView,
|
||||
webViewName,
|
||||
currentUrl,
|
||||
showNotice,
|
||||
showOther,
|
||||
isDesktopBrowser, // NUOVO
|
||||
browserInfo, // NUOVO
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,189 +1,399 @@
|
||||
<template>
|
||||
<!-- Debug Info -->
|
||||
<div
|
||||
v-if="tools.isDebugOn()"
|
||||
class="bg-red text-white q-pa-xs"
|
||||
class="debug-info"
|
||||
>
|
||||
<span class="debug-label">Debug:</span>
|
||||
isAppRunning: {{ isAppRunning }} • deferredPrompt: {{ !!deferredPrompt }} •
|
||||
homescreen: {{ homescreen }} isInRestrictedWebView:
|
||||
{{ isInRestrictedWebView }} isInTelegramWebView: {{ tools.isInTelegramWebView() }}
|
||||
homescreen: {{ homescreen }} • isInRestrictedWebView: {{ isInRestrictedWebView }} •
|
||||
isInTelegramWebView: {{ tools.isInTelegramWebView() }}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div
|
||||
v-if="finishLoading"
|
||||
class="row justify-center"
|
||||
class="install-app-container"
|
||||
>
|
||||
<!-- 🚫 Se sei in un WebView non compatibile (es. Telegram) -->
|
||||
|
||||
<div
|
||||
v-if="isInRestrictedWebView"
|
||||
class="text-center q-pa-md"
|
||||
<!-- 🚫 WebView Ristretta (Telegram, ecc.) -->
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
>
|
||||
<q-btn
|
||||
v-if="!showNotice"
|
||||
v-model="showNotice"
|
||||
glossy
|
||||
size="xl"
|
||||
label="Installa App"
|
||||
@click="showNotice = true"
|
||||
icon="fas fa-mobile-alt"
|
||||
color="green"
|
||||
text-color="white"
|
||||
/>
|
||||
<div
|
||||
v-if="showNotice"
|
||||
style="border: 2px solid #dedede"
|
||||
class="shadow-1 q-ma-md"
|
||||
v-if="isInRestrictedWebView"
|
||||
class="install-card restricted-webview"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-exclamation-triangle"
|
||||
color="warning"
|
||||
size="xl"
|
||||
/>
|
||||
<div v-if="tools.isInTelegramWebView()">
|
||||
<p class="text-body1 q-mt-md">
|
||||
Stai usando il browser interno di {{ webViewName }}.<br />
|
||||
Per installare l’app Clicca sui <strong>tre puntini "⋮"</strong> in alto e
|
||||
scegli <em>“Apri con...”</em>
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="text-body1 q-mt-md">
|
||||
Stai usando il browser interno di {{ webViewName }}.<br />
|
||||
<strong>Per installare l’app, apri questo link nel browser esterno.</strong>
|
||||
</p>
|
||||
<q-btn
|
||||
:href="currentUrl"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
label="Apri nel browser"
|
||||
color="primary"
|
||||
glossy
|
||||
icon="fas fa-external-link-alt"
|
||||
class="q-mt-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ✅ Se sei nel browser esterno, ma non in modalità app -->
|
||||
<div
|
||||
v-else-if="!isAppRunning"
|
||||
class="text-center"
|
||||
>
|
||||
<q-btn
|
||||
v-if="deferredPrompt"
|
||||
glossy
|
||||
size="xl"
|
||||
label="Installa App"
|
||||
@click="installApp"
|
||||
icon="fas fa-mobile-alt"
|
||||
color="green"
|
||||
text-color="white"
|
||||
/>
|
||||
<div v-else>
|
||||
<!-- iOS -->
|
||||
<div
|
||||
v-if="$q.platform.is.ios && $q.platform.is.safari"
|
||||
style="border: 2px solid #dedede"
|
||||
class="shadow-1 q-ma-md"
|
||||
v-if="!showNotice"
|
||||
class="card-center"
|
||||
>
|
||||
<div class="icon-wrapper warning">
|
||||
<q-icon
|
||||
name="fas fa-exclamation-triangle"
|
||||
size="56px"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="card-title">Attenzione</h3>
|
||||
<p class="card-description">
|
||||
Stai usando il browser interno di {{ webViewName }}
|
||||
</p>
|
||||
<q-btn
|
||||
glossy
|
||||
size="xl"
|
||||
label="Installa App"
|
||||
@click="viewiOS = !viewiOS"
|
||||
icon="fab fa-apple"
|
||||
color="green"
|
||||
text-color="white"
|
||||
/>
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="viewiOS"
|
||||
class="q-mt-md"
|
||||
>
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_1.png"
|
||||
fit="contain"
|
||||
style="min-width: 350px"
|
||||
class="q-my-sm"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_1b.jpg"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_2.jpg"
|
||||
fit="contain"
|
||||
/>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
unelevated
|
||||
rounded
|
||||
size="lg"
|
||||
color="primary"
|
||||
class="install-btn"
|
||||
@click="showNotice = true"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-info-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
Come procedere
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- Android -->
|
||||
<div v-else-if="$q.platform.is.android">
|
||||
<q-btn
|
||||
glossy
|
||||
size="lg"
|
||||
label="Installa App"
|
||||
@click="viewAndroid = !viewAndroid"
|
||||
icon="fab fa-android"
|
||||
color="green"
|
||||
text-color="white"
|
||||
/>
|
||||
<q-slide-transition>
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
v-if="showNotice"
|
||||
class="instructions-box"
|
||||
>
|
||||
<div class="instructions-header">
|
||||
<q-icon
|
||||
name="fas fa-lightbulb"
|
||||
size="32px"
|
||||
color="warning"
|
||||
/>
|
||||
<h4>Istruzioni per l'installazione</h4>
|
||||
</div>
|
||||
|
||||
<!-- Telegram -->
|
||||
<div
|
||||
v-if="viewAndroid"
|
||||
class="q-mt-md"
|
||||
v-if="tools.isInTelegramWebView()"
|
||||
class="instruction-content"
|
||||
>
|
||||
<div class="q-ma-sm text-body1">
|
||||
1) Clicca sui <strong>tre puntini ⋮</strong><br />
|
||||
2) Scegli <strong>“Installa app”</strong> o
|
||||
<strong>“Aggiungi alla home”</strong><br />
|
||||
3) Apri l’app dalla schermata Home.
|
||||
<div class="step-list">
|
||||
<div class="step-item">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-text"
|
||||
>Clicca sui <strong>tre puntini "⋮"</strong> in alto a destra</span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-text">Scegli <strong>"Apri con..."</strong></span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-text"
|
||||
>Seleziona il tuo browser (Chrome, Firefox, Safari...)</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<q-img
|
||||
src="/images/install_app_on_android_1.jpg"
|
||||
fit="contain"
|
||||
style="min-width: 350px"
|
||||
class="q-my-sm"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_android_2.jpg"
|
||||
fit="contain"
|
||||
style="min-width: 350px"
|
||||
class="q-my-sm"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_android_3.jpg"
|
||||
fit="contain"
|
||||
style="min-width: 350px"
|
||||
class="q-my-sm"
|
||||
</div>
|
||||
|
||||
<!-- Altri WebView -->
|
||||
<div
|
||||
v-else
|
||||
class="instruction-content"
|
||||
>
|
||||
<p class="instruction-text">
|
||||
Per installare l'app, devi aprire questo link nel browser esterno (Chrome,
|
||||
Safari, Firefox...)
|
||||
</p>
|
||||
<q-btn
|
||||
:href="currentUrl"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
icon="fas fa-external-link-alt"
|
||||
label="Apri nel browser"
|
||||
class="open-browser-btn"
|
||||
/>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- ✅ Browser Esterno - NON in modalità app -->
|
||||
<div
|
||||
v-else-if="!isAppRunning"
|
||||
class="install-card browser-install"
|
||||
>
|
||||
<!-- Installazione con Prompt (Android Chrome, Desktop) -->
|
||||
<div
|
||||
v-if="deferredPrompt"
|
||||
class="card-center"
|
||||
>
|
||||
<div class="icon-wrapper success pulse">
|
||||
<q-icon
|
||||
name="fas fa-mobile-alt"
|
||||
size="56px"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="card-title">Installa l'App</h3>
|
||||
<p class="card-description">
|
||||
Aggiungi RISO alla tua schermata home per un accesso rapido e un'esperienza
|
||||
migliore
|
||||
</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
size="lg"
|
||||
color="primary"
|
||||
class="install-btn"
|
||||
@click="installApp"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-download"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
Installa ora
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- Altri browser (fallback) -->
|
||||
<div v-else>
|
||||
<q-btn
|
||||
glossy
|
||||
size="lg"
|
||||
label="Installa App"
|
||||
@click="showOther = true"
|
||||
icon="fas fa-mobile-alt"
|
||||
color="green"
|
||||
text-color="white"
|
||||
/>
|
||||
<!-- Istruzioni manuali -->
|
||||
<div
|
||||
v-else
|
||||
class="manual-install"
|
||||
>
|
||||
<!-- iOS Safari -->
|
||||
<div
|
||||
v-if="$q.platform.is.ios && $q.platform.is.safari"
|
||||
class="platform-instructions"
|
||||
>
|
||||
<div
|
||||
class="platform-header"
|
||||
@click="viewiOS = !viewiOS"
|
||||
>
|
||||
<div class="platform-info">
|
||||
<div class="icon-wrapper ios">
|
||||
<q-icon
|
||||
name="fab fa-apple"
|
||||
size="48px"
|
||||
/>
|
||||
</div>
|
||||
<div class="platform-text">
|
||||
<h4>Installa su iOS</h4>
|
||||
<p>Clicca per vedere le istruzioni</p>
|
||||
</div>
|
||||
</div>
|
||||
<q-icon
|
||||
:name="viewiOS ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
|
||||
size="24px"
|
||||
class="chevron-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showOther">
|
||||
<p class="text-body1">
|
||||
Apri questa pagina in <strong>Brave</strong> o <strong>Chrome</strong> per
|
||||
installare l’app.
|
||||
</p>
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="viewiOS"
|
||||
class="platform-content"
|
||||
>
|
||||
<div class="step-list">
|
||||
<div class="step-item">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-text"
|
||||
>Tocca il pulsante <strong>Condividi</strong>
|
||||
<q-icon name="ios_share"
|
||||
/></span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-text"
|
||||
>Scorri e seleziona <strong>"Aggiungi a Home"</strong></span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-text"
|
||||
>Conferma toccando <strong>"Aggiungi"</strong></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screenshots">
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_1.png"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_1b.jpg"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_ios_2.jpg"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
|
||||
<!-- Android -->
|
||||
<div
|
||||
v-else-if="$q.platform.is.android"
|
||||
class="platform-instructions"
|
||||
>
|
||||
<div
|
||||
class="platform-header"
|
||||
@click="viewAndroid = !viewAndroid"
|
||||
>
|
||||
<div class="platform-info">
|
||||
<div class="icon-wrapper android">
|
||||
<q-icon
|
||||
name="fab fa-android"
|
||||
size="48px"
|
||||
/>
|
||||
</div>
|
||||
<div class="platform-text">
|
||||
<h4>Installa su Android</h4>
|
||||
<p>Clicca per vedere le istruzioni</p>
|
||||
</div>
|
||||
</div>
|
||||
<q-icon
|
||||
:name="viewAndroid ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
|
||||
size="24px"
|
||||
class="chevron-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="viewAndroid"
|
||||
class="platform-content"
|
||||
>
|
||||
<div class="step-list">
|
||||
<div class="step-item">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-text"
|
||||
>Tocca i <strong>tre puntini ⋮</strong> in alto a destra</span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-text"
|
||||
>Scegli <strong>"Installa app"</strong> o
|
||||
<strong>"Aggiungi alla home"</strong></span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-text"
|
||||
>Conferma e apri l'app dalla schermata Home</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screenshots">
|
||||
<q-img
|
||||
src="/images/install_app_on_android_1.jpg"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_android_2.jpg"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
<q-img
|
||||
src="/images/install_app_on_android_3.jpg"
|
||||
fit="contain"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
|
||||
<!-- Browser Desktop (Chrome, Brave, Edge, Firefox, Safari) -->
|
||||
<div
|
||||
v-else-if="isDesktopBrowser && browserInfo.supported"
|
||||
class="platform-instructions"
|
||||
>
|
||||
<div
|
||||
class="platform-header"
|
||||
@click="viewDesktop = !viewDesktop"
|
||||
>
|
||||
<div class="platform-info">
|
||||
<div class="icon-wrapper info">
|
||||
<q-icon
|
||||
name="fas fa-desktop"
|
||||
size="48px"
|
||||
/>
|
||||
</div>
|
||||
<div class="platform-text">
|
||||
<h4>Installa su {{ browserInfo.name }}</h4>
|
||||
<p>Clicca per vedere le istruzioni</p>
|
||||
</div>
|
||||
</div>
|
||||
<q-icon
|
||||
:name="viewDesktop ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
|
||||
size="24px"
|
||||
class="chevron-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-slide-transition>
|
||||
<div
|
||||
v-if="viewDesktop"
|
||||
class="platform-content"
|
||||
>
|
||||
<div class="step-list">
|
||||
<div class="step-item">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-text"
|
||||
>Clicca sull'icona <strong>Installa</strong> nella barra degli
|
||||
indirizzi (a destra)</span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-text"
|
||||
>Oppure apri il <strong>menu del browser</strong> (⋮) e scegli
|
||||
<strong>"Installa RISO..."</strong></span
|
||||
>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-text"
|
||||
>Conferma l'installazione e l'app si aprirà in una finestra
|
||||
dedicata</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
</div>
|
||||
|
||||
<!-- Altri Browser (Fallback) - solo per browser veramente non supportati -->
|
||||
<div
|
||||
v-else
|
||||
class="platform-instructions fallback"
|
||||
>
|
||||
<div class="card-center">
|
||||
<div class="icon-wrapper info">
|
||||
<q-icon
|
||||
name="fas fa-info-circle"
|
||||
size="48px"
|
||||
/>
|
||||
</div>
|
||||
<h4 class="fallback-title">Browser non compatibile</h4>
|
||||
<p class="fallback-text">
|
||||
Per installare l'app, apri questa pagina in <strong>Chrome</strong>,
|
||||
<strong>Firefox</strong>, <strong>Brave</strong> o <strong>Edge</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -6,6 +6,9 @@ import { useGlobalStore } from 'app/src/store';
|
||||
|
||||
import { static_data } from '@src/db/static_data'
|
||||
|
||||
import { CCheckAppRunning } from '@src/components/CCheckAppRunning';
|
||||
|
||||
|
||||
// ==========================================
|
||||
// TYPES
|
||||
// ==========================================
|
||||
@@ -29,6 +32,7 @@ interface HeroImage {
|
||||
// ==========================================
|
||||
export default defineComponent({
|
||||
name: 'RisoHomepage',
|
||||
components: { CCheckAppRunning },
|
||||
|
||||
setup() {
|
||||
// ==========================================
|
||||
|
||||
@@ -310,8 +310,8 @@
|
||||
<p class="ris-description">
|
||||
Il <strong>RIS</strong> è l'unità di misura del valore dei beni e
|
||||
servizi per lo scambio tra i membri di una comunità territoriale. È una
|
||||
moneta complementare basata sulla <strong>fiducia reciproca</strong>
|
||||
tra i membri della comunità.
|
||||
moneta complementare basata sulla <strong>fiducia reciproca</strong> tra
|
||||
i membri della comunità.<br />
|
||||
</p>
|
||||
<q-separator class="q-my-md" />
|
||||
<div class="ris-features">
|
||||
@@ -345,6 +345,17 @@
|
||||
/>
|
||||
<span>Puoi combinarlo con Euro, baratto o dono</span>
|
||||
</div>
|
||||
<div class="q-my-md text-italic text-h7-dense">
|
||||
ℹ️ Il sistema "RIS" è ispirato a
|
||||
<strong>*Si.cre.na.C.C*</strong> (Sistema di Credito Naturale a
|
||||
Copertura Certa), ideato da Lorenzo Essente di Viterbo.<br />
|
||||
Per approfondimenti: 📗
|
||||
<a
|
||||
href="https://sicrenacc.info/"
|
||||
target="_blank"
|
||||
>Vai al Libro</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
@@ -657,8 +668,8 @@
|
||||
size="md"
|
||||
/>
|
||||
<div class="cta-feature-text">
|
||||
<strong>Multi-piattaforma</strong>
|
||||
<span>Chrome, Firefox, Safari, Android, iPhone, PC</span>
|
||||
<strong>Funziona su tutti i dispositivi</strong>
|
||||
<span>Smartphone, tablet o computer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -669,7 +680,7 @@
|
||||
/>
|
||||
<div class="cta-feature-text">
|
||||
<strong>Installazione facile</strong>
|
||||
<span>Senza passare dallo store, direttamente da riso.app</span>
|
||||
<span>Usa dal web o salvala sul tuo dispositivo come un'app</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -684,6 +695,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CCheckAppRunning />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user