From 05dc22dac60afe8f66133461a6bc06c6ee149184 Mon Sep 17 00:00:00 2001 From: Surya Paolo Date: Wed, 19 Nov 2025 01:02:47 +0100 Subject: [PATCH] - Installa App e pagina Home Riso. --- .../CCheckAppRunning/CCheckAppRunning.scss | 535 ++++++++++++++++++ .../CCheckAppRunning/CCheckAppRunning.ts | 24 +- .../CCheckAppRunning/CCheckAppRunning.vue | 524 ++++++++++++----- src/components/HomeRiso/HomeRiso.ts | 4 + src/components/HomeRiso/HomeRiso.vue | 23 +- 5 files changed, 947 insertions(+), 163 deletions(-) diff --git a/src/components/CCheckAppRunning/CCheckAppRunning.scss b/src/components/CCheckAppRunning/CCheckAppRunning.scss index e69de29b..fb9aea1b 100755 --- a/src/components/CCheckAppRunning/CCheckAppRunning.scss +++ b/src/components/CCheckAppRunning/CCheckAppRunning.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/components/CCheckAppRunning/CCheckAppRunning.ts b/src/components/CCheckAppRunning/CCheckAppRunning.ts index eb07807a..c049aad7 100755 --- a/src/components/CCheckAppRunning/CCheckAppRunning.ts +++ b/src/components/CCheckAppRunning/CCheckAppRunning.ts @@ -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 }; }, }); diff --git a/src/components/CCheckAppRunning/CCheckAppRunning.vue b/src/components/CCheckAppRunning/CCheckAppRunning.vue index 9f946c06..87741304 100755 --- a/src/components/CCheckAppRunning/CCheckAppRunning.vue +++ b/src/components/CCheckAppRunning/CCheckAppRunning.vue @@ -1,189 +1,399 @@ diff --git a/src/components/HomeRiso/HomeRiso.ts b/src/components/HomeRiso/HomeRiso.ts index 23ffba52..45c319d1 100644 --- a/src/components/HomeRiso/HomeRiso.ts +++ b/src/components/HomeRiso/HomeRiso.ts @@ -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() { // ========================================== diff --git a/src/components/HomeRiso/HomeRiso.vue b/src/components/HomeRiso/HomeRiso.vue index d50e12c3..53841ceb 100644 --- a/src/components/HomeRiso/HomeRiso.vue +++ b/src/components/HomeRiso/HomeRiso.vue @@ -310,8 +310,8 @@

Il RIS è 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 fiducia reciproca - tra i membri della comunità. + moneta complementare basata sulla fiducia reciproca tra + i membri della comunità.

@@ -345,6 +345,17 @@ /> Puoi combinarlo con Euro, baratto o dono
+
+ ℹ️ Il sistema "RIS" è ispirato a + *Si.cre.na.C.C* (Sistema di Credito Naturale a + Copertura Certa), ideato da Lorenzo Essente di Viterbo.
+ Per approfondimenti: 📗 + Vai al Libro +
@@ -657,8 +668,8 @@ size="md" />
- Multi-piattaforma - Chrome, Firefox, Safari, Android, iPhone, PC + Funziona su tutti i dispositivi + Smartphone, tablet o computer
@@ -669,7 +680,7 @@ />
Installazione facile - Senza passare dallo store, direttamente da riso.app + Usa dal web o salvala sul tuo dispositivo come un'app
@@ -684,6 +695,8 @@ + +