- Installa App e pagina Home Riso.

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;
+  }
+}

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
     };
   },
 });

src/components/CCheckAppRunning/CCheckAppRunning.vue

@@ -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:
+    homescreen: {{ homescreen }} • isInRestrictedWebView: {{ isInRestrictedWebView }} •
-    {{ isInRestrictedWebView }} isInTelegramWebView: {{ tools.isInTelegramWebView() }}
+    isInTelegramWebView: {{ tools.isInTelegramWebView() }}
   </div>
 
+  <!-- Main Content -->
   <div
     v-if="finishLoading"
-    class="row justify-center"
+    class="install-app-container"
+  >
+    <!-- 🚫 WebView Ristretta (Telegram, ecc.) -->
+    <transition
+      name="fade"
+      mode="out-in"
     >
-    <!-- 🚫 Se sei in un WebView non compatibile (es. Telegram) -->
-
       <div
         v-if="isInRestrictedWebView"
-      class="text-center q-pa-md"
+        class="install-card restricted-webview"
       >
-      <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"
+          v-if="!showNotice"
-        style="border: 2px solid #dedede"
+          class="card-center"
-        class="shadow-1 q-ma-md"
         >
+          <div class="icon-wrapper warning">
             <q-icon
               name="fas fa-exclamation-triangle"
-          color="warning"
+              size="56px"
-          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>
+          <h3 class="card-title">Attenzione</h3>
-          <p class="text-body1 q-mt-md">
+          <p class="card-description">
-            Stai usando il browser interno di {{ webViewName }}.<br />
+            Stai usando il browser interno di {{ webViewName }}
-            <strong>Per installare l’app, apri questo link nel browser esterno.</strong>
+          </p>
+          <q-btn
+            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>
+
+        <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="tools.isInTelegramWebView()"
+              class="instruction-content"
+            >
+              <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>
+            </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"
-            label="Apri nel browser"
+                unelevated
+                rounded
                 color="primary"
-            glossy
                 icon="fas fa-external-link-alt"
-            class="q-mt-sm"
+                label="Apri nel browser"
+                class="open-browser-btn"
               />
             </div>
           </div>
+        </transition>
       </div>
 
-    <!-- ✅ Se sei nel browser esterno, ma non in modalità app -->
+      <!-- ✅ Browser Esterno - NON in modalità app -->
       <div
         v-else-if="!isAppRunning"
-      class="text-center"
+        class="install-card browser-install"
       >
-      <q-btn
+        <!-- Installazione con Prompt (Android Chrome, Desktop) -->
+        <div
           v-if="deferredPrompt"
-        glossy
+          class="card-center"
-        size="xl"
+        >
-        label="Installa App"
+          <div class="icon-wrapper success pulse">
-        @click="installApp"
+            <q-icon
-        icon="fas fa-mobile-alt"
+              name="fas fa-mobile-alt"
-        color="green"
+              size="56px"
-        text-color="white"
             />
-      <div v-else>
+          </div>
-        <!-- iOS -->
+          <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>
+
+        <!-- Istruzioni manuali -->
+        <div
+          v-else
+          class="manual-install"
+        >
+          <!-- iOS Safari -->
           <div
             v-if="$q.platform.is.ios && $q.platform.is.safari"
-          style="border: 2px solid #dedede"
+            class="platform-instructions"
-          class="shadow-1 q-ma-md"
           >
-          <q-btn
+            <div
-            glossy
+              class="platform-header"
-            size="xl"
-            label="Installa App"
               @click="viewiOS = !viewiOS"
-            icon="fab fa-apple"
+            >
-            color="green"
+              <div class="platform-info">
-            text-color="white"
+                <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>
+
             <q-slide-transition>
               <div
                 v-if="viewiOS"
-              class="q-mt-md"
+                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"
-                style="min-width: 350px"
+                    class="screenshot"
-                class="q-my-sm"
                   />
                   <q-img
                     src="/images/install_app_on_ios_1b.jpg"
-                class="q-mb-md"
+                    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">
+          <div
-          <q-btn
+            v-else-if="$q.platform.is.android"
-            glossy
+            class="platform-instructions"
-            size="lg"
+          >
-            label="Installa App"
+            <div
+              class="platform-header"
               @click="viewAndroid = !viewAndroid"
-            icon="fab fa-android"
+            >
-            color="green"
+              <div class="platform-info">
-            text-color="white"
+                <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="q-mt-md"
+                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 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>
+                  <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"
-                style="min-width: 350px"
+                    class="screenshot"
-                class="q-my-sm"
                   />
                   <q-img
                     src="/images/install_app_on_android_2.jpg"
                     fit="contain"
-                style="min-width: 350px"
+                    class="screenshot"
-                class="q-my-sm"
                   />
                   <q-img
                     src="/images/install_app_on_android_3.jpg"
                     fit="contain"
-                style="min-width: 350px"
+                    class="screenshot"
-                class="q-my-sm"
                   />
                 </div>
+              </div>
             </q-slide-transition>
           </div>
 
-        <!-- Altri browser (fallback) -->
+          <!-- Browser Desktop (Chrome, Brave, Edge, Firefox, Safari) -->
-        <div v-else>
+          <div
-          <q-btn
+            v-else-if="isDesktopBrowser && browserInfo.supported"
-            glossy
+            class="platform-instructions"
-            size="lg"
+          >
-            label="Installa App"
+            <div
-            @click="showOther = true"
+              class="platform-header"
-            icon="fas fa-mobile-alt"
+              @click="viewDesktop = !viewDesktop"
-            color="green"
+            >
-            text-color="white"
+              <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>
 
-          <div v-if="showOther">
+            <q-slide-transition>
-            <p class="text-body1">
+              <div
-              Apri questa pagina in <strong>Brave</strong> o <strong>Chrome</strong> per
+                v-if="viewDesktop"
-              installare l’app.
+                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>
+    </transition>
   </div>
 </template>
 

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() {
     // ==========================================

src/components/HomeRiso/HomeRiso.vue

@@ -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>
+                  moneta complementare basata sulla <strong>fiducia reciproca</strong> tra
-                  tra i membri della comunità.
+                  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>
+                <strong>Funziona su tutti i dispositivi</strong>
-                <span>Chrome, Firefox, Safari, Android, iPhone, PC</span>
+                <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>