From fb49116bba5a207ab20b49474ebc8a22dae932c6 Mon Sep 17 00:00:00 2001
From: michele <utente@MICHELE>
Date: Mon, 29 Sep 2025 09:46:23 +0200
Subject: [PATCH] Aggiunta classe lightbox in immagini portale (VT_page2 e
 VT_page3) Impaginazione pagina foto

---
 Views/Portale/VT_Page2.cshtml   | 103 ++++++++++++++++++++--
 Views/Portale/VT_Page3.cshtml   | 151 ++++++++++++++++++++++----------
 Views/Rapp_New/ShowImage.cshtml |  32 ++++---
 3 files changed, 224 insertions(+), 62 deletions(-)

diff --git a/Views/Portale/VT_Page2.cshtml b/Views/Portale/VT_Page2.cshtml
index 78bb392..2578b65 100644
--- a/Views/Portale/VT_Page2.cshtml
+++ b/Views/Portale/VT_Page2.cshtml
@@ -4,6 +4,68 @@
     ViewData["Title"] = "Virtual Task Pro";
 }
 
+<!-- CSS lightbox -->
+<style>
+    .lightbox {
+        display: none;
+        position: fixed;
+        z-index: 9999;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.8);
+        justify-content: center;
+        align-items: center;
+    }
+
+        /* .lightbox img {
+            max-width: 90%;
+            max-height: 80%;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(255,255,255,0.3);
+            animation: fadeIn 0.3s ease;
+        } */
+
+        .lightbox img {
+            width: 400px;
+            height: auto; /* mantiene proporzioni */
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(255,255,255,0.3);
+            animation: fadeIn 0.3s ease;
+        }
+
+        .lightbox .close {
+            position: absolute;
+            top: 20px;
+            right: 40px;
+            font-size: 40px;
+            color: #fff;
+            cursor: pointer;
+        }
+
+    @@keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+
+    .lightbox-img {
+        cursor: pointer;
+        transition: transform 0.2s;
+    }
+
+        .lightbox-img:hover {
+            transform: scale(1.05);
+        }
+</style>
+
 <div class="agy-project-wrapper agy-project-page-wrapper">
     <div class="container" style="width:100%; text-align:justify">
         <div>
@@ -30,8 +92,8 @@
             <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                 <div class="agy-about-img relative">
                     <div class="">
-                        <img src="~/assets/images/app1.png" alt="Virtual Task App" style="width:30%;height:30%;" />
-                        <img src="~/assets/images/app2.png" alt="Virtual Task App" style="width:30%;height:30%;" />
+                        <img src="~/assets/images/app1.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
+                        <img src="~/assets/images/app2.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
                     </div>
                 </div>
             </div>
@@ -60,7 +122,7 @@
                 <table style="width:100%">
                     <tr>
                         <th style="width:20%">
-                            <img src="~/assets/images/app3.png" alt="Virtual Task App" style="width:70%;height:70%;" />
+                            <img src="~/assets/images/app3.png" alt="Virtual Task App" style="width:70%;height:70%;" class="lightbox-img" />
                         </th>
                         <th style="width:70%">
                             <ol>
@@ -124,8 +186,8 @@
             <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                 <div class="agy-about-img relative">
                     <div class="">
-                        <img src="~/assets/images/app5.png" alt="Virtual Task App" style="width:30%;height:30%;" />
-                        <img src="~/assets/images/app6.png" alt="Virtual Task App" style="width:30%;height:30%;" />
+                        <img src="~/assets/images/app5.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
+                        <img src="~/assets/images/app6.png" alt="Virtual Task App" style="width:30%;height:30%;" class="lightbox-img" />
                     </div>
                 </div>
             </div>
@@ -164,6 +226,37 @@
     </div>
 </div>
 
+<!-- Lightbox HTML -->
+<div class="lightbox" id="lightbox">
+    <span class="close" id="lightbox-close">&times;</span>
+    <img id="lightbox-img" src="" alt="Anteprima immagine">
+</div>
+
+@section Scripts {
+    <script>
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightbox-img');
+        const closeBtn = document.getElementById('lightbox-close');
+
+        document.querySelectorAll('.lightbox-img').forEach(img => {
+            img.addEventListener('click', () => {
+                lightboxImg.src = img.src;
+                lightbox.style.display = 'flex';
+            });
+        });
+
+        closeBtn.addEventListener('click', () => {
+            lightbox.style.display = 'none';
+        });
+
+        lightbox.addEventListener('click', (e) => {
+            if (e.target === lightbox) {
+                lightbox.style.display = 'none';
+            }
+        });
+    </script>
+}
+
 @* <script>
     $('.zoom').click(function () {
         var imageUrl = $(this).attr('src');
diff --git a/Views/Portale/VT_Page3.cshtml b/Views/Portale/VT_Page3.cshtml
index db63a18..8e3ca82 100644
--- a/Views/Portale/VT_Page3.cshtml
+++ b/Views/Portale/VT_Page3.cshtml
@@ -1,8 +1,63 @@
- @{
+@{
     Layout = "~/Views/Shared/_LayoutAreaRiservata.cshtml";
     ViewData["Title"] = "Task Manager";
 }
 
+<!-- CSS lightbox -->
+<style>
+    .lightbox {
+        display: none;
+        position: fixed;
+        z-index: 9999;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.8);
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* .lightbox img {
+        max-width: 90%;
+        max-height: 80%;
+        border-radius: 10px;
+        box-shadow: 0 0 20px rgba(255,255,255,0.3);
+        animation: fadeIn 0.3s ease;
+    } */
+
+    .lightbox img {
+        width:1200px;
+        height: auto; /* mantiene proporzioni */
+        border-radius: 10px;
+        box-shadow: 0 0 20px rgba(255,255,255,0.3);
+        animation: fadeIn 0.3s ease;
+    }
+
+    .lightbox .close {
+        position: absolute;
+        top: 20px;
+        right: 40px;
+        font-size: 40px;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    @@keyframes fadeIn {
+        from { opacity: 0; transform: scale(0.9); }
+        to { opacity: 1; transform: scale(1); }
+    }
+
+    .lightbox-img {
+        cursor: pointer;
+        transition: transform 0.2s;
+    }
+
+    .lightbox-img:hover {
+        transform: scale(1.05);
+    }
+</style>
+
 <div class="agy-project-wrapper agy-project-page-wrapper">
     <div class="container" style="width:100%; text-align:justify">
         <div>
@@ -10,7 +65,7 @@
             <br />
             <div class="agy-about-img relative">
                 <div class="">
-                    <img src="~/assets/images/pro1.png" alt="Virtual Task App" style="width:55%;height:55%;" />
+                    <img src="~/assets/images/pro1.png" alt="Virtual Task App" style="width:50%;height:50%;" class="lightbox-img" />
                 </div>
             </div>
         </div>
@@ -25,33 +80,15 @@
                 <br />
                 <p>
                     <ul>
-                        <li>
-                            A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti.
-                        </li>
-                        <li>
-                            B. Gestione Manutenzioni programmate previste per l'IMPIANTO.
-                        </li>
-                        <li>
-                            C. Gestione Contratti con specifica degli impianti, calcolo delle rate e  relativa fatturazione.
-                        </li>
-                        <li>
-                            D. Gestione Commesse di lavoro con aggancio all'analitica standard.
-                        </li>
-                        <li>
-                            E. Completa gestione delle chiamate di intervento, dall'inserimento alla sua assegnazione a tecnico e consuntivazione.
-                        </li>
-                        <li>
-                            F. Gestione RAPPORTINI DI INTERVENTO come consuntivi tecnici siano essi legati a manutenzioni, commesse o chiamate.
-                        </li>
-                        <li>
-                            G. Fatturazione canoni dei contratti. 
-                        </li>
-                        <li>
-                            H. Fatturazione rapportini di intervento.
-                        </li>
-                        <li>
-                            I. Fatturazione commesse ad avanzamento lavoro.
-                        </li>
+                        <li>A. Gestione anagrafica IMPIANTO con dati tecnici ed eventuale composizione specifica componenti.</li>
+                        <li>B. Gestione Manutenzioni programmate previste per l'IMPIANTO.</li>
+                        <li>C. Gestione Contratti con specifica degli impianti, calcolo delle rate e  relativa fatturazione.</li>
+                        <li>D. Gestione Commesse di lavoro con aggancio all'analitica standard.</li>
+                        <li>E. Completa gestione delle chiamate di intervento, dall'inserimento alla sua assegnazione a tecnico e consuntivazione.</li>
+                        <li>F. Gestione RAPPORTINI DI INTERVENTO come consuntivi tecnici siano essi legati a manutenzioni, commesse o chiamate.</li>
+                        <li>G. Fatturazione canoni dei contratti.</li>
+                        <li>H. Fatturazione rapportini di intervento.</li>
+                        <li>I. Fatturazione commesse ad avanzamento lavoro.</li>
                     </ul>
                 </p>
             </div>
@@ -62,46 +99,38 @@
             <br />
             <div class="agy-about-img relative">
                 <div class="">
-                    <img src="~/assets/images/pro2.png" alt="Virtual Task App" style="width:55%;height:55%;" />
+                    <img src="~/assets/images/pro2.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
                 </div>
             </div>
         </div>
         <br />
         <div class="container" style="width:100%; text-align:justify">
-            <p>
-                <h4>
-                    Cruscotto Operativo Chiamate
-                </h4>
-            </p>
+            <p><h4>Cruscotto Operativo Chiamate</h4></p>
             <br />
             <div class="agy-about-img relative">
                 <div class="">
-                    <img src="~/assets/images/pro3.png" alt="Virtual Task App" style="width:55%;height:55%;" />
-                    <img src="~/assets/images/pro4.png" alt="Virtual Task App" style="width:55%;height:55%;" />
+                    <img src="~/assets/images/pro3.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
+                    <img src="~/assets/images/pro4.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
                 </div>
             </div>
         </div>
         <br />
         <div class="container" style="width:100%; text-align:justify">
-            <p>
-                <h4>
-                    Gestione Rapportini
-                </h4>
-            </p>
+            <p><h4>Gestione Rapportini</h4></p>
             <br />
             <p>Dettaglio rapportini</p>
             <br />
             <div class="agy-about-img relative">
                 <div class="">
-                    <img src="~/assets/images/pro5.png" alt="Virtual Task App" style="width:55%;height:55%;" />
-                    <img src="~/assets/images/pro6.png" alt="Virtual Task App" style="width:55%;height:55%;" />
-                    <img src="~/assets/images/pro7.png" alt="Virtual Task App" style="width:55%;height:55%;" />
+                    <img src="~/assets/images/pro5.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
+                    <img src="~/assets/images/pro6.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
+                    <img src="~/assets/images/pro7.png" alt="Virtual Task App" style="width:55%;height:55%;" class="lightbox-img" />
                 </div>
             </div>
         </div>
         <div class="container" style="width:100%; text-align:justify">
             <p>
-                Il Polo Informatico garantisce comunque la possibilità di potere customizzare tale App secondo le esigenze del cliente, modificando loghi, layout e colori ma anche delineando 
+                Il Polo Informatico garantisce comunque la possibilità di potere customizzare tale App secondo le esigenze del cliente, modificando loghi, layout e colori ma anche delineando
                 nuovi possibili flussi e/o implementando nuove funzionalità.
                 Infine Vuoi aggiungere delle funzionalità? Le nostre app per la gestione dei clienti sono <b>totalmente personalizzabili</b> per offrire un’esperienza di utilizzo unica.
             </p>
@@ -109,3 +138,33 @@
     </div>
 </div>
 
+<!-- Lightbox HTML -->
+<div class="lightbox" id="lightbox">
+    <span class="close" id="lightbox-close">&times;</span>
+    <img id="lightbox-img" src="" alt="Anteprima immagine">
+</div>
+
+@section Scripts {
+    <script>
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = document.getElementById('lightbox-img');
+        const closeBtn = document.getElementById('lightbox-close');
+
+        document.querySelectorAll('.lightbox-img').forEach(img => {
+            img.addEventListener('click', () => {
+                lightboxImg.src = img.src;
+                lightbox.style.display = 'flex';
+            });
+        });
+
+        closeBtn.addEventListener('click', () => {
+            lightbox.style.display = 'none';
+        });
+
+        lightbox.addEventListener('click', (e) => {
+            if (e.target === lightbox) {
+                lightbox.style.display = 'none';
+            }
+        });
+    </script>
+}
diff --git a/Views/Rapp_New/ShowImage.cshtml b/Views/Rapp_New/ShowImage.cshtml
index 6e462c8..6b0fa82 100644
--- a/Views/Rapp_New/ShowImage.cshtml
+++ b/Views/Rapp_New/ShowImage.cshtml
@@ -5,15 +5,25 @@
 
 <h2>@ViewData["Title"]</h2>
 
-@if (!string.IsNullOrEmpty(fileName))
-{
-    <div>
-        <img src="@Url.Action("GetImage", "Rapp_New", new { filePath = fileName })"
-             alt="Immagine: @fileName"
-             style="max-width:600px; height:auto; border:1px solid #ccc;" />
+
+<div class="agy-project-wrapper agy-project-page-wrapper">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-4">
+                @if (!string.IsNullOrEmpty(fileName))
+                {
+                    <div>
+                        <img src="@Url.Action("GetImage", "Rapp_New", new { filePath = fileName })"
+                             alt="Immagine: @fileName"
+                             style="max-width:600px; height:auto; border:1px solid #ccc;" />
+                    </div>
+                }
+                else
+                {
+                    <p>Nessuna immagine specificata.</p>
+                }
+            </div>
+        </div>
     </div>
-}
-else
-{
-    <p>Nessuna immagine specificata.</p>
-}
+</div>
+