VirtualTask/Views/Portale/VT_Page3.cshtml

@{
    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>
            <p><h5>MY DESK</h5></p>
            <br />
            <div class="agy-about-img relative">
                <div class="">
                    <img src="~/assets/images/pro1.png" alt="Virtual Task App" style="width:50%;height:50%;" class="lightbox-img" />
                </div>
            </div>
        </div>
        <br />
        <div class="container" style="width:100%; text-align:justify">
            <div>
                <p>
                    Le funzionalità messe a disposizione dal verticale permettono il controllo e la gestione di tutte le varie tipologie di impianto che l'azienda si trova a dover gestire per il parco clienti.
                </p>
                <br />
                <p>Nello specifico le funzionalità principali sono:</p>
                <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>
                    </ul>
                </p>
            </div>
        </div>
        <br />
        <div class="container" style="width:100%; text-align:justify">
            <p><h4>Gestione impianti</h4></p>
            <br />
            <div class="agy-about-img relative">
                <div class="">
                    <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>
            <br />
            <div class="agy-about-img relative">
                <div class="">
                    <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>
            <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%;" 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
                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>
        </div>
    </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>
}