@section('description', 'Imposta una data di inizio e una di fine per visualizzare il progresso nell'intervallo. Nessun orario; solo giorni. Funziona nel tuo fuso orario locale.')
@section('keywords', 'conto alla rovescia intervallo date, giorni rimanenti, progresso tra date, progresso date')
@section('content')
    <section class="main-content flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
        <nav class="text-sm text-gray-600 dark:text-gray-400 mb-4" itemscope itemtype="https://schema.org/BreadcrumbList">
        <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="https://it.asted.cloud" itemprop="item" class="hover:text-indigo-600">
                <span itemprop="name">Home</span>
            </a>
            <meta itemprop="position" content="1" /> /
        </span>
            <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a href="https://it.asted.cloud/instruments" itemprop="item" class="hover:text-indigo-600">
                <span itemprop="name">Strumenti</span>
            </a>
            <meta itemprop="position" content="2" /> /
        </span>
            <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name">Conto alla rovescia tra date</span>
            <meta itemprop="position" content="3" />
        </span>
        </nav>

        <h1 id="rangeTitle">Conto alla rovescia tra date</h1>

        <!-- Controlli -->
        <div id="rangeRoot"
             class="w-full sm:max-w-2xl mt-6 px-6 py-6 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Data di inizio</label>
                    <input id="inputStart" type="date"
                           class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 rounded-md">
                </div>
                <div>
                    <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Data di fine</label>
                    <input id="inputEnd" type="date"
                           class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 rounded-md">
                </div>
                <div class="flex items-end">
                    <button id="applyRange"
                            class="w-full text-sm px-3 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">
                        Applica
                    </button>
                </div>
            </div>

            <!-- Output (nascosto fino ad Applica) -->
            <div id="output" class="mt-6 hidden">
                <div class="flex items-center justify-between text-sm">
                    <div class="text-gray-600 dark:text-gray-300">
                        <span id="labelState">Tempo rimasto</span> — <span id="rangeLabel"></span>
                    </div>
                    <div class="text-gray-500 dark:text-gray-400">
                        Fuso orario: <span id="tzName"></span>
                    </div>
                </div>

                <!-- Griglia del conto alla rovescia -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4" aria-live="polite" aria-atomic="true">
                    <div class="text-center p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
                        <div id="days" class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white">—</div>
                        <div class="mt-1 text-xs uppercase tracking-wide text-gray-600 dark:text-gray-400">Giorni</div>
                    </div>
                    <div class="text-center p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
                        <div id="hours" class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white">—</div>
                        <div class="mt-1 text-xs uppercase tracking-wide text-gray-600 dark:text-gray-400">Ore</div>
                    </div>
                    <div class="text-center p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
                        <div id="minutes" class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white">—</div>
                        <div class="mt-1 text-xs uppercase tracking-wide text-gray-600 dark:text-gray-400">Minuti</div>
                    </div>
                    <div class="text-center p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
                        <div id="seconds" class="text-3xl sm:text-4xl font-extrabold tracking-tight dark:text-white">—</div>
                        <div class="mt-1 text-xs uppercase tracking-wide text-gray-600 dark:text-gray-400">Secondi</div>
                    </div>
                </div>

                <!-- Progresso dell'intervallo -->
                <div class="mt-4">
                    <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
                        <span>Progresso dell'intervallo</span>
                        <span id="rangeProgressLabel">0%</span>
                    </div>
                    <div class="w-full h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                        <div id="rangeProgressBar" class="h-3 bg-indigo-600 dark:bg-indigo-500" style="width: 0%;"></div>
                    </div>
                    <p id="humanLeft" class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"></p>
                </div>

                <div id="message"
                     class="mt-4 text-center text-lg font-semibold text-indigo-700 dark:text-indigo-300 hidden">
                    ✅ Completato!
                </div>
            </div>
        </div>

        <!-- SEO / Aiuto -->
        <div class="w-full sm:max-w-2xl mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md sm:rounded-lg">
            <div class="converter-content">
                <h3>Conto alla rovescia in tempo reale (solo date)</h3>
                <p class="text-gray-700 dark:text-gray-300 text-justify">
                    📅 Seleziona una data di <strong>inizio</strong> e una di <strong>fine</strong> — ti mostreremo il tempo tra di esse,
                    il numero totale di giorni dall'inizio alla fine, oltre a quanti giorni sono già trascorsi e quanti ne rimangono.
                    ⏳ Il timer non considera ore e minuti — solo le date, rendendolo ideale per progetti ed eventi a lungo termine.
                </p>

                <h4>Come funziona</h4>
                <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
                    <li>⏱ <strong>Prima dell'inizio:</strong> “Inizia tra …”, progresso = 0%.</li>
                    <li>📈 <strong>Durante il periodo:</strong> “Tempo rimasto …”, progresso aumenta fino al 100%.</li>
                    <li>✅ <strong>Dopo la fine:</strong> “Completato!”, progresso = 100%.</li>
                </ul>

                <h4>Casi d'uso</h4>
                <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
                    <li>🎯 Monitoraggio delle scadenze e dei piani dei progetti.</li>
                    <li>📆 Conto alla rovescia per vacanze, festività o date importanti.</li>
                    <li>🏆 Monitoraggio dei progressi in obiettivi di apprendimento o fitness.</li>
                </ul>
            </div>
        </div>

        <script>
            (function () {
                const titleEl = document.getElementById('rangeTitle');
                const tzEl = document.getElementById('tzName');
                const inputStart = document.getElementById('inputStart');
                const inputEnd = document.getElementById('inputEnd');
                const applyBtn = document.getElementById('applyRange');
                const output = document.getElementById('output');

                const labelState = document.getElementById('labelState');
                const rangeLabel = document.getElementById('rangeLabel');
                const progressBar = document.getElementById('rangeProgressBar');
                const progressLabel = document.getElementById('rangeProgressLabel');
                const humanEl = document.getElementById('humanLeft');
                const messageEl = document.getElementById('message');

                // ➕ nuovi elementi per il contatore
                const daysEl = document.getElementById('days');
                const hoursEl = document.getElementById('hours');
                const minutesEl = document.getElementById('minutes');
                const secondsEl = document.getElementById('seconds');

                let timer = null;
                let state = null; // { start: Date(00:00), end: Date(00:00) }

                try {
                    tzEl.textContent = Intl.DateTimeFormat().resolvedOptions().timeZone || 'Orario locale';
                } catch (e) {
                    tzEl.textContent = 'Orario locale';
                }

                // === vincoli reciproci delle date ===
                function isYmd(v) { return /^\d{4}-\d{2}-\d{2}$/.test(v); }

                function applyStartConstraints() {
                    const s = inputStart.value;
                    if (isYmd(s)) {
                        inputEnd.min = s;
                        if (isYmd(inputEnd.value) && inputEnd.value < s) inputEnd.value = s;
                    } else {
                        inputEnd.removeAttribute('min');
                    }
                }

                function applyEndConstraints() {
                    const e = inputEnd.value;
                    if (isYmd(e)) {
                        inputStart.max = e;
                        if (isYmd(inputStart.value) && inputStart.value > e) inputStart.value = e;
                    } else {
                        inputStart.removeAttribute('max');
                    }
                }

                inputStart.addEventListener('input', applyStartConstraints);
                inputStart.addEventListener('change', applyStartConstraints);
                inputEnd.addEventListener('input', applyEndConstraints);
                inputEnd.addEventListener('change', applyEndConstraints);
                applyStartConstraints();
                applyEndConstraints();

                // Helper
                function startOfDayLocal(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0,0); }
                function endOfDayLocal(d)   { return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23,59,59,999); }
                function parseDateInput(val) {
                    if (!val) return null;
                    const [y, m, d] = val.split('-').map(Number);
                    if (!y || !m || !d) return null;
                    return new Date(y, m - 1, d, 0, 0, 0, 0);
                }
                function fmtDate(d) {
                    return d.toLocaleDateString('it-IT', {
                        year: 'numeric', month: 'long', day: 'numeric'
                    });
                }
                function pad2(n) { return String(n).padStart(2, '0'); }

                function update() {

                    if (!state) return;

                    // nowMid per la logica dei "giorni" (progresso), nowReal per il timer in tempo reale
                    const nowReal = new Date();
                    const nowMid  = startOfDayLocal(nowReal);

                    // end è memorizzato come 00:00 della fine; per il conto alla rovescia usiamo la fine del giorno
                    const { start, end } = state;
                    const endEOD = endOfDayLocal(end);

                    if (!(end > start)) {
                        labelState.textContent = 'Intervallo non valido';
                        rangeLabel.textContent = '';
                        progressBar.style.width = '0%';
                        progressLabel.textContent = '0%';
                        humanEl.textContent = 'Seleziona un intervallo valido (la data di fine deve essere successiva a quella di inizio).';

                        // azzera i numeri del timer
                        daysEl.textContent = hoursEl.textContent = minutesEl.textContent = secondsEl.textContent = '—';
                        messageEl.classList.add('hidden');
                        return;
                    }

                    rangeLabel.textContent = `Inizio: ${fmtDate(start)} → Fine: ${fmtDate(end)}`;

                    // Fase e obiettivo per il contatore IN TEMPO REALE
                    let target = null;
                    if (nowReal < start) {
                        labelState.textContent = 'Inizia tra';
                        target = start; // prima dell'inizio contiamo fino alle 00:00 del giorno iniziale
                        messageEl.classList.add('hidden');
                    } else if (nowReal >= start && nowReal <= endEOD) {
                        labelState.textContent = 'Tempo rimasto';
                        target = endEOD; // durante l'intervallo contiamo fino alla fine del giorno finale
                        messageEl.classList.add('hidden');
                    } else {
                        labelState.textContent = 'Completato';
                        target = endEOD;
                        messageEl.classList.remove('hidden');
                    }

                    // === contatore in tempo reale in G/O/M/S ===
                    let diffMs = target - nowReal;
                    if (diffMs < 0) diffMs = 0;

                    const totalSeconds = Math.floor(diffMs / 1000);
                    const days   = Math.floor(totalSeconds / 86400);
                    const hours  = Math.floor((totalSeconds % 86400) / 3600);
                    const mins   = Math.floor((totalSeconds % 3600) / 60);
                    const secs   = totalSeconds % 60;

                    daysEl.textContent    = String(days);
                    hoursEl.textContent   = pad2(hours);
                    minutesEl.textContent = pad2(mins);
                    secondsEl.textContent = pad2(secs);

                    // Stringa leggibile per gli utenti
                    const nowDateStr = nowReal.toLocaleDateString('it-IT', {
                        day: '2-digit', month: '2-digit', year: '2-digit'
                    });

                    if (nowMid < start) {
                        const daysLeft = Math.ceil((start - nowMid) / 86400000);
                        humanEl.textContent = `Oggi ${nowDateStr} — ${daysLeft} ${daysLeft===1?'giorno':'giorni'} all'inizio`;
                    } else if (nowMid >= start && nowMid <= end) {
                        const daysLeft = Math.max(0, Math.ceil((end - nowMid) / 86400000));
                        humanEl.textContent = `Oggi ${nowDateStr} — ${daysLeft} ${daysLeft===1?'giorno':'giorni'} rimanenti`;
                    } else {
                        humanEl.textContent = `${nowDateStr} — Intervallo completato.`;
                    }
                    // === Progresso per giorni (calcolo dalla mezzanotte, senza ore) ===
                    const totalDays   = Math.max(1, Math.round((end - start) / 86400000));
                    const elapsedDays = Math.max(0, Math.min(totalDays, Math.round((nowMid - start) / 86400000)));
                    const pct = Math.max(0, Math.min(100, (elapsedDays / totalDays) * 100));
                    progressBar.style.width = pct.toFixed(2) + '%';
                    progressLabel.textContent = pct.toFixed(2) + '%';
                }

                applyBtn.addEventListener('click', () => {
                    const s = parseDateInput(inputStart.value);
                    const e = parseDateInput(inputEnd.value);

                    if (!s || !e || e <= s) {
                        alert('Imposta date di inizio e fine valide (la data di fine deve essere successiva a quella di inizio).');
                        return;
                    }

                    // salva start come 00:00 del giorno iniziale, end come 00:00 del giorno finale
                    state = { start: startOfDayLocal(s), end: startOfDayLocal(e) };

                    output.classList.remove('hidden');
                    update();
                    if (timer) clearInterval(timer);
                    timer = setInterval(update, 1000); // aggiorna ogni secondo per il contatore in tempo reale
                });

                // non mostrare nulla prima di cliccare su Applica
            })();
        </script>
    </section>
@endsection
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8K8YL4JWY3"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-8K8YL4JWY3');
    </script>
    <meta name="google-adsense-account" content="ca-pub-8538145733027754">
    
    <title>Conto alla rovescia tra date – Giorni e Progresso | Asted Cloud</title>
    <meta name="description" content="Asted Cloud – creatore di siti web gratuito, sistemi CRM, ERP e HRM per le aziende. Crea siti web, gestisci progetti e personale online senza costi aggiuntivi.">
    <meta name="keywords" content="creatore di siti gratuito, creazione siti web, sistema CRM, sistema ERP, sistema HRM, servizi online, Asted Cloud">
    
    <link rel="canonical" href="https://it.asted.cloud/instruments/betweendata">
    
            <link rel="alternate" hreflang="x-default" href="https://asted.cloud/instruments/betweendata">
        <link rel="alternate" hreflang="en" href="https://asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="ar" href="https://ar.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="bg" href="https://bg.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="cs" href="https://cs.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="de" href="https://de.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="es" href="https://es.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="fr" href="https://fr.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="el" href="https://el.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="he" href="https://he.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="hu" href="https://hu.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="it" href="https://it.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="ja" href="https://ja.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="ko" href="https://ko.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="pl" href="https://pl.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="pt" href="https://pt.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="ro" href="https://ro.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="ru" href="https://ru.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="tr" href="https://tr.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="uk" href="https://uk.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="vi" href="https://vi.asted.cloud/instruments/betweendata">
                    <link rel="alternate" hreflang="zh" href="https://zh.asted.cloud/instruments/betweendata">
                
    <meta property="og:title" content="Conto alla rovescia tra date – Giorni e Progresso | Asted Cloud">
    <meta property="og:description" content="Crea un sito web gratuitamente e utilizza i sistemi CRM, ERP e HRM per gestire la tua attività – tutto su Asted Cloud!">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://it.asted.cloud/instruments/betweendata">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
    <link rel="apple-touch-icon" href="/favicon.png">
    <meta property="og:image" content="https://it.asted.cloud/favicon.png">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Conto alla rovescia tra date – Giorni e Progresso | Asted Cloud">
    <meta name="twitter:description" content="Asted Cloud – creatore di siti web e sistemi aziendali. CRM, ERP, HRM – gratis e online!">
    <meta name="twitter:image" content="https://it.asted.cloud/favicon.png">
    
        <script type="application/ld+json">{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://it.asted.cloud/#organization",
            "name": "Asted Cloud",
            "url": "https://it.asted.cloud",
            "logo": {
                "@type": "ImageObject",
                "url": "https://it.asted.cloud/favicon.png"
            }
        },
        {
            "@type": "WebSite",
            "@id": "https://it.asted.cloud/#website",
            "url": "https://it.asted.cloud",
            "name": "Asted Cloud",
            "publisher": {
                "@id": "https://it.asted.cloud/#organization"
            },
            "potentialAction": {
                "@type": "SearchAction",
                "target": {
                    "@type": "EntryPoint",
                    "urlTemplate": "https://it.asted.cloud/search?q={search_term_string}"
                },
                "query-input": "required name=search_term_string"
            }
        }
    ]
}</script>
    <script type="application/ld+json">{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "@id": "https://it.asted.cloud/instruments/betweendata",
    "name": "Conto alla rovescia tra date – Giorni e Progresso | Asted Cloud",
    "description": "Asted Cloud - a free website builder, CRM, ERP, and HRM systems for business.",
    "url": "https://it.asted.cloud/instruments/betweendata",
    "isPartOf": {
        "@id": "https://it.asted.cloud/#website"
    },
    "publisher": {
        "@id": "https://it.asted.cloud/#organization"
    },
    "inLanguage": "it"
}</script>
    
    
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css?v=6">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8538145733027754"
            crossorigin="anonymous"></script>
</head>

<body class="bg-[#FDFDFC] dark:bg-[#0a0a0a] text-[#1b1b18]">
<main>
    <header class="container-fluid">
        <div class="container d-flex flex-wrap align-items-center justify-content-between py-3 mb-4">
            <!-- ASTED: Logo -->
            <a href="/" class="d-flex align-items-center text-dark text-decoration-none me-2 logo">
                <span class="fs-4">ASTED CLOUD
                </span>
            </a>

            <!-- ASTED: Burger Menu (Mobile Only) -->
            <div class="burger-menu-wrapper">
                <!-- ASTED: Burger Menu Button -->
<button type="button" class="burger-menu-btn" aria-label="Toggle navigation" aria-expanded="false">
    <svg class="burger-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
        <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
    <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
        <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
</button>

<!-- ASTED: Mobile Navigation Menu -->
<div class="mobile-nav-menu">
    <div class="mobile-nav-search">
        <div
            id="mobileHeaderSearchPanel"
        class="mobile-header-search"
    data-suggest-url="https://it.asted.cloud/search/suggest"
    data-search-url="https://it.asted.cloud/search"
    data-view-all-text="View all search results"
    data-no-results-text="No results"
    data-blog-label="Blog"
    data-news-label="Notizie"
    data-tool-label="Tools"
>
    <div class="dropdown w-100 position-relative">
        <input
                            id="mobileHeaderSearchInput"
                        type="search"
            class="form-control"
            placeholder="Cerca tra utenti, blog e strumenti"
            autocomplete="off"
            aria-label="Cerca tra utenti, blog e strumenti"
        />

        <div
                            id="mobileHeaderSearchResults"
                        class="dropdown-menu w-100"
                            aria-labelledby="mobileHeaderSearchInput"
                    ></div>
    </div>
</div>
    </div>

    <ul class="mobile-nav-list">
        <li class="mobile-nav-item"><a href="https://it.asted.cloud/portal" class="mobile-nav-link">Portale di notizie</a></li>
        <li class="mobile-nav-item"><a href="/feed" class="mobile-nav-link">Feed</a></li>
        <li class="mobile-nav-item"><a href="/blog" class="mobile-nav-link">Blog</a></li>

        <!-- Language Dropdown for Mobile -->
        <li class="mobile-nav-item mobile-nav-dropdown">
            <button type="button" class="mobile-nav-dropdown-toggle">
                                It - Italiano
                <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                    <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <ul class="mobile-nav-dropdown-menu">
                                                            <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="ar"
                                 dir="rtl"                                 href="https://ar.asted.cloud/instruments/betweendata"
                            >
                                Ar - العربية
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="bg"
                                                                href="https://bg.asted.cloud/instruments/betweendata"
                            >
                                Bg - Български
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="cs"
                                                                href="https://cs.asted.cloud/instruments/betweendata"
                            >
                                Cs - Čeština
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="de"
                                                                href="https://de.asted.cloud/instruments/betweendata"
                            >
                                De - Deutsch
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="en"
                                                                href="https://asted.cloud/instruments/betweendata"
                            >
                                En - English
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="es"
                                                                href="https://es.asted.cloud/instruments/betweendata"
                            >
                                Es - Español
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="fr"
                                                                href="https://fr.asted.cloud/instruments/betweendata"
                            >
                                Fr - Français
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="el"
                                                                href="https://el.asted.cloud/instruments/betweendata"
                            >
                                El - Ελληνικά
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="he"
                                 dir="rtl"                                 href="https://he.asted.cloud/instruments/betweendata"
                            >
                                He - עברית
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="hu"
                                                                href="https://hu.asted.cloud/instruments/betweendata"
                            >
                                Hu - Magyar
                            </a>
                        </li>
                                                                                                                    <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="ja"
                                                                href="https://ja.asted.cloud/instruments/betweendata"
                            >
                                Ja - 日本語
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="ko"
                                                                href="https://ko.asted.cloud/instruments/betweendata"
                            >
                                Ko - 한국어
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="pl"
                                                                href="https://pl.asted.cloud/instruments/betweendata"
                            >
                                Pl - Polski
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="pt"
                                                                href="https://pt.asted.cloud/instruments/betweendata"
                            >
                                Pt - Português
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="ro"
                                                                href="https://ro.asted.cloud/instruments/betweendata"
                            >
                                Ro - Română
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="ru"
                                                                href="https://ru.asted.cloud/instruments/betweendata"
                            >
                                Ru - Русский
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="tr"
                                                                href="https://tr.asted.cloud/instruments/betweendata"
                            >
                                Tr - Türkçe
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="uk"
                                                                href="https://uk.asted.cloud/instruments/betweendata"
                            >
                                Uk - Українська
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="vi"
                                                                href="https://vi.asted.cloud/instruments/betweendata"
                            >
                                Vi - Tiếng Việt
                            </a>
                        </li>
                                                                                <li>
                                                        <a
                                class="mobile-nav-dropdown-item"
                                lang="zh"
                                                                href="https://zh.asted.cloud/instruments/betweendata"
                            >
                                Zh - 简体中文
                            </a>
                        </li>
                                                </ul>
        </li>
    </ul>
</div>
            </div>

            <!-- ASTED: Navigation (Desktop & Tablet) -->
            <ul class="nav justify-content-center flex-grow-1 desktop-nav">
                <li class="nav-item"><a href="/feed" class="nav-link">Feed</a></li>

                <li class="nav-item"><a href="https://it.asted.cloud/portal" class="nav-link">Portale di notizie</a></li>
                <li class="nav-item"><a href="/blog" class="nav-link">Blog</a></li>

                <li class="nav-item">
    <button
        type="button"
        class="nav-link border-0 bg-transparent header-search-toggle"
        aria-label="Cerca"
        aria-expanded="false"
        aria-controls="headerSearchPanel"
    >
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" class="w-5 h-5">
            <path d="M21 21l-4.35-4.35m1.35-5.15a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
</li>
                <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle text-uppercase" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        It - Italiano
    </a>
    <ul class="dropdown-menu">
                                    <li>
                                        <a
                        class="dropdown-item"
                        lang="ar"
                         dir="rtl"                         href="https://ar.asted.cloud/instruments/betweendata"
                    >
                        Ar - العربية
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="bg"
                                                href="https://bg.asted.cloud/instruments/betweendata"
                    >
                        Bg - Български
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="cs"
                                                href="https://cs.asted.cloud/instruments/betweendata"
                    >
                        Cs - Čeština
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="de"
                                                href="https://de.asted.cloud/instruments/betweendata"
                    >
                        De - Deutsch
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="en"
                                                href="https://asted.cloud/instruments/betweendata"
                    >
                        En - English
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="es"
                                                href="https://es.asted.cloud/instruments/betweendata"
                    >
                        Es - Español
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="fr"
                                                href="https://fr.asted.cloud/instruments/betweendata"
                    >
                        Fr - Français
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="el"
                                                href="https://el.asted.cloud/instruments/betweendata"
                    >
                        El - Ελληνικά
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="he"
                         dir="rtl"                         href="https://he.asted.cloud/instruments/betweendata"
                    >
                        He - עברית
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="hu"
                                                href="https://hu.asted.cloud/instruments/betweendata"
                    >
                        Hu - Magyar
                    </a>
                </li>
                                                                    <li>
                                        <a
                        class="dropdown-item"
                        lang="ja"
                                                href="https://ja.asted.cloud/instruments/betweendata"
                    >
                        Ja - 日本語
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="ko"
                                                href="https://ko.asted.cloud/instruments/betweendata"
                    >
                        Ko - 한국어
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="pl"
                                                href="https://pl.asted.cloud/instruments/betweendata"
                    >
                        Pl - Polski
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="pt"
                                                href="https://pt.asted.cloud/instruments/betweendata"
                    >
                        Pt - Português
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="ro"
                                                href="https://ro.asted.cloud/instruments/betweendata"
                    >
                        Ro - Română
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="ru"
                                                href="https://ru.asted.cloud/instruments/betweendata"
                    >
                        Ru - Русский
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="tr"
                                                href="https://tr.asted.cloud/instruments/betweendata"
                    >
                        Tr - Türkçe
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="uk"
                                                href="https://uk.asted.cloud/instruments/betweendata"
                    >
                        Uk - Українська
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="vi"
                                                href="https://vi.asted.cloud/instruments/betweendata"
                    >
                        Vi - Tiếng Việt
                    </a>
                </li>
                                                <li>
                                        <a
                        class="dropdown-item"
                        lang="zh"
                                                href="https://zh.asted.cloud/instruments/betweendata"
                    >
                        Zh - 简体中文
                    </a>
                </li>
                        </ul>
</li>
            </ul>
            <div class="auth-entry-actions">
        <button type="button" class="btn btn-success personal-account-btn auth-entry-btn"
            data-bs-toggle="modal" data-bs-target="#authModal"
            onclick="switchAuthTab('auth-tab-register')">
            <span class="btn-text">Registrazione</span>
            <svg class="btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM20 8v6M23 11h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        <button type="button" class="btn btn-success personal-account-btn auth-entry-btn"
            data-bs-toggle="modal" data-bs-target="#authModal"
            onclick="switchAuthTab('auth-tab-login')">
            <span class="btn-text">Accesso</span>
            <svg class="btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
    </div>

<div class="modal fade auth-modal" id="authModal" tabindex="-1" aria-labelledby="authModalLabel" aria-describedby="authModalDescription" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable auth-modal__dialog">
        <div class="modal-content border-0 auth-modal__content">
            <div class="modal-header border-0 auth-modal__header">
                <div class="auth-modal__header-top">
                    <div class="auth-modal__brand">
                        <img src="/favicon.png" alt="Asted Cloud" width="28" height="28" style="width: 28px;height: 28px;" class="auth-modal__brand-icon">
                        <div>
                            <div class="auth-modal__brand-name">Asted Cloud</div>
                            <div class="auth-modal__brand-caption">Accesso sicuro</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white auth-modal__close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
                </div>

                <div class="auth-modal__headline">
                    <span class="auth-modal__eyebrow">Accesso al profilo</span>
                    <h2 class="auth-modal__title" id="authModalLabel">Bentornato</h2>
                    <p class="auth-modal__subtitle" id="authModalDescription">Accedi per gestire il tuo profilo, messaggi e progetti.</p>
                </div>

                <ul class="nav auth-modal__tabs" id="authTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button
                            class="nav-link active auth-modal__tab"
                            id="auth-tab-login"
                            data-bs-toggle="tab"
                            data-bs-target="#auth-panel-login"
                            data-auth-title="Bentornato"
                            data-auth-subtitle="Accedi per gestire il tuo profilo, messaggi e progetti."
                            type="button"
                            role="tab"
                            aria-controls="auth-panel-login"
                            aria-selected="true"
                        >Accedi</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button
                            class="nav-link auth-modal__tab"
                            id="auth-tab-register"
                            data-bs-toggle="tab"
                            data-bs-target="#auth-panel-register"
                            data-auth-title="Crea il tuo account"
                            data-auth-subtitle="Registrati una volta per salvare i progressi, gestire i progetti e tenere tutto in un unico posto."
                            type="button"
                            role="tab"
                            aria-controls="auth-panel-register"
                            aria-selected="false"
                        >Registrazione</button>
                    </li>
                </ul>
            </div>

            <div class="modal-body auth-modal__body">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="auth-panel-login" role="tabpanel" aria-labelledby="auth-tab-login" tabindex="0">
                        <div class="auth-modal__panel">
                            <a href="https://it.asted.cloud/auth/google" class="auth-google-btn">
                                <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
                                    <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
                                    <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
                                    <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
                                </svg>
                                <span>Continua con Google</span>
                            </a>

                            <div class="auth-divider">o</div>

                            <form method="POST" action="https://it.asted.cloud/login" novalidate>
                                <input type="hidden" name="_token" value="B7XBj0wrzV01PjeG7rsmHQo1ImMbxqEg8UItwjg3" autocomplete="off">                                <input type="hidden" name="_form" value="login">

                                <div class="auth-field">
                                    <label for="modal-login-email" class="auth-label">Email</label>
                                    <input
                                        id="modal-login-email"
                                        type="email"
                                        name="email"
                                        value=""
                                        class="form-control auth-form-control "
                                        placeholder="you@example.com"
                                        required
                                        autocomplete="username"
                                    >
                                                                    </div>

                                <div class="auth-field">
                                    <div class="auth-field-row">
                                        <label for="modal-login-password" class="auth-label mb-0">Password</label>
                                                                                    <a href="https://it.asted.cloud/forgot-password" class="auth-helper-link">Hai dimenticato la password?</a>
                                                                            </div>
                                    <div class="auth-input-wrap">
                                        <input
                                            id="modal-login-password"
                                            type="password"
                                            name="password"
                                            class="form-control auth-form-control auth-form-control--with-toggle "
                                            placeholder="Password"
                                            required
                                            autocomplete="current-password"
                                        >
                                        <button type="button" class="auth-password-toggle" data-target="modal-login-password" aria-label="Mostra password" aria-pressed="false">
                                            <span data-auth-toggle-label data-show="Mostra" data-hide="Nascondi">Mostra</span>
                                        </button>
                                    </div>
                                                                    </div>

                                <div class="auth-field auth-field--checkbox">
                                    <div class="form-check auth-check">
                                        <input type="checkbox" class="form-check-input" id="modal-remember" name="remember">
                                        <label class="form-check-label" for="modal-remember">Ricordami</label>
                                    </div>
                                </div>

                                <button type="submit" class="auth-submit-btn">Accedi</button>
                            </form>

                            <div class="auth-switch-link">
                                Non hai un account?
                                <button type="button" class="auth-switch-link__action" onclick="switchAuthTab('auth-tab-register')">Registrati &rarr;</button>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="auth-panel-register" role="tabpanel" aria-labelledby="auth-tab-register" tabindex="0">
                        <div class="auth-modal__panel">
                            <a href="https://it.asted.cloud/auth/google" class="auth-google-btn">
                                <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
                                    <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
                                    <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
                                    <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
                                </svg>
                                <span>Continua con Google</span>
                            </a>

                            <div class="auth-divider">o</div>

                            <form method="POST" action="https://it.asted.cloud/register" novalidate>
                                <input type="hidden" name="_token" value="B7XBj0wrzV01PjeG7rsmHQo1ImMbxqEg8UItwjg3" autocomplete="off">                                <input type="hidden" name="_form" value="register">

                                <div class="auth-field">
                                    <label for="modal-register-name" class="auth-label">Nome</label>
                                    <input
                                        id="modal-register-name"
                                        type="text"
                                        name="name"
                                        value=""
                                        class="form-control auth-form-control "
                                        placeholder="Il tuo nome"
                                        required
                                        autocomplete="name"
                                    >
                                                                    </div>

                                <div class="auth-field">
                                    <label for="modal-register-email" class="auth-label">Email</label>
                                    <input
                                        id="modal-register-email"
                                        type="email"
                                        name="email"
                                        value=""
                                        class="form-control auth-form-control "
                                        placeholder="you@example.com"
                                        required
                                        autocomplete="username"
                                    >
                                                                    </div>

                                <div class="auth-field">
                                    <label for="modal-register-password" class="auth-label">Password</label>
                                    <div class="auth-input-wrap">
                                        <input
                                            id="modal-register-password"
                                            type="password"
                                            name="password"
                                            class="form-control auth-form-control auth-form-control--with-toggle "
                                            placeholder="Password"
                                            required
                                            autocomplete="new-password"
                                        >
                                        <button type="button" class="auth-password-toggle" data-target="modal-register-password" aria-label="Mostra password" aria-pressed="false">
                                            <span data-auth-toggle-label data-show="Mostra" data-hide="Nascondi">Mostra</span>
                                        </button>
                                    </div>
                                    <div class="auth-note">Usa almeno 8 caratteri per una password più sicura.</div>
                                                                    </div>

                                <div class="auth-field">
                                    <label for="modal-register-password-confirm" class="auth-label">Conferma password</label>
                                    <div class="auth-input-wrap">
                                        <input
                                            id="modal-register-password-confirm"
                                            type="password"
                                            name="password_confirmation"
                                            class="form-control auth-form-control auth-form-control--with-toggle"
                                            placeholder="Confirm password"
                                            required
                                            autocomplete="new-password"
                                        >
                                        <button type="button" class="auth-password-toggle" data-target="modal-register-password-confirm" aria-label="Mostra password" aria-pressed="false">
                                            <span data-auth-toggle-label data-show="Mostra" data-hide="Nascondi">Mostra</span>
                                        </button>
                                    </div>
                                </div>

                                <button type="submit" class="auth-submit-btn">Crea account</button>
                            </form>

                            <div class="auth-switch-link">
                                Hai già un account?
                                <button type="button" class="auth-switch-link__action" onclick="switchAuthTab('auth-tab-login')">Accedi &rarr;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window.__authPendingTabId = window.__authPendingTabId || 'auth-tab-login';
window.switchAuthTab = function (tabId) {
    window.__authPendingTabId = tabId;

    if (typeof window.__applyAuthTab === 'function') {
        window.__applyAuthTab(tabId);
    }
};

document.addEventListener('DOMContentLoaded', function () {
    var modalEl = document.getElementById('authModal');

    if (!modalEl || typeof bootstrap === 'undefined') {
        return;
    }

    if (document.body && modalEl.parentNode !== document.body) {
        document.body.appendChild(modalEl);
    }

    var authModal = bootstrap.Modal.getOrCreateInstance(modalEl);
    var titleEl = document.getElementById('authModalLabel');
    var subtitleEl = document.getElementById('authModalDescription');
    var initialTabId = window.__authPendingTabId || 'auth-tab-login';

    function syncModalText(tabButton) {
        if (!tabButton) {
            return;
        }

        if (titleEl) {
            titleEl.textContent = tabButton.getAttribute('data-auth-title') || tabButton.textContent.trim();
        }

        if (subtitleEl) {
            subtitleEl.textContent = tabButton.getAttribute('data-auth-subtitle') || '';
        }
    }

    function focusActiveField() {
        var activePanel = modalEl.querySelector('.tab-pane.active.show') || modalEl.querySelector('.tab-pane.active');

        if (!activePanel) {
            return;
        }

        var targetField = activePanel.querySelector('.is-invalid') ||
            activePanel.querySelector('input:not([type="hidden"]):not([type="checkbox"])');

        if (!targetField) {
            return;
        }

        window.requestAnimationFrame(function () {
            targetField.focus();
        });
    }

    function markAuthBackdrop() {
        window.setTimeout(function () {
            var backdrops = document.querySelectorAll('.modal-backdrop');
            var backdrop = backdrops.length ? backdrops[backdrops.length - 1] : null;

            if (backdrop) {
                backdrop.classList.add('auth-modal-backdrop');
            }
        }, 0);
    }

    function showAuthTab(tabId) {
        var tabButton = document.getElementById(tabId);

        if (!tabButton) {
            return;
        }

        window.__authPendingTabId = tabId;
        bootstrap.Tab.getOrCreateInstance(tabButton).show();
        syncModalText(tabButton);
    }

    window.__applyAuthTab = showAuthTab;

    modalEl.addEventListener('show.bs.modal', function () {
        markAuthBackdrop();
    });

    modalEl.addEventListener('shown.bs.modal', function () {
        showAuthTab(window.__authPendingTabId || initialTabId);
        focusActiveField();
    });

    modalEl.addEventListener('hidden.bs.modal', function () {
        var backdrops = document.querySelectorAll('.modal-backdrop.auth-modal-backdrop');

        backdrops.forEach(function (backdrop) {
            backdrop.classList.remove('auth-modal-backdrop');
        });
    });

    modalEl.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (tabButton) {
        tabButton.addEventListener('shown.bs.tab', function (event) {
            var target = event.target;
            window.__authPendingTabId = target.id;
            syncModalText(target);
            focusActiveField();
        });
    });

    modalEl.querySelectorAll('.auth-password-toggle').forEach(function (toggle) {
        toggle.addEventListener('click', function () {
            var inputId = toggle.getAttribute('data-target');
            var input = inputId ? document.getElementById(inputId) : null;
            var label = toggle.querySelector('[data-auth-toggle-label]');

            if (!input) {
                return;
            }

            var shouldShow = input.type === 'password';
            input.type = shouldShow ? 'text' : 'password';
            toggle.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
            toggle.classList.toggle('is-active', shouldShow);

            if (label) {
                label.textContent = shouldShow ? label.getAttribute('data-hide') : label.getAttribute('data-show');
            }
        });
    });

    syncModalText(document.getElementById(initialTabId));

    });
</script>

















        </div>
        <div id="headerSearchPanel" class="header-search-panel">
    <div class="container">
        <div class="py-3">
            <div
        class="header-search-box"
    data-suggest-url="https://it.asted.cloud/search/suggest"
    data-search-url="https://it.asted.cloud/search"
    data-view-all-text="View all search results"
    data-no-results-text="No results"
    data-blog-label="Blog"
    data-news-label="Notizie"
    data-tool-label="Tools"
>
    <div class="dropdown w-100 position-relative">
        <input
                            id="headerSearchInput"
                        type="search"
            class="form-control"
            placeholder="Cerca tra utenti, blog e strumenti"
            autocomplete="off"
            aria-label="Cerca tra utenti, blog e strumenti"
        />

        <div
                            id="headerSearchResults"
                        class="dropdown-menu w-100"
                            aria-labelledby="headerSearchInput"
                    ></div>
    </div>
</div>
        </div>
    </div>
</div>
    </header>
    <div class="page-shell">
            </div>
    <section id="comments" class="main-content bg-gray-100 py-10 dark:bg-gray-900">
    <div class="container">
        <div class="mx-auto max-w-7xl">
            <div class="overflow-hidden rounded-xl border border-gray-200/60 bg-white shadow-sm dark:border-gray-700/60 dark:bg-gray-800">
                <header class="border-b border-gray-200/60 px-6 py-6 dark:border-gray-700/60">
                    <h2 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
                        Commenti
                        <span class="text-gray-500 dark:text-gray-400">(0)</span>
                    </h2>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                        Condividi la tua opinione — per favore, sii cortese e resta in tema.
                    </p>
                </header>

                <div class="px-6 py-6">
                    
                    
                                                                        <div
                                class="mb-4 rounded-lg border border-dashed border-gray-300 bg-white p-6 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                Non ci sono ancora commenti. Lascia un commento e condividi la tua opinione!
                            </div>
                        
                        <form method="POST" action="https://it.asted.cloud/instruments/betweendata/comments" class="space-y-4">
                            <input type="hidden" name="_token" value="B7XBj0wrzV01PjeG7rsmHQo1ImMbxqEg8UItwjg3" autocomplete="off">
                            <div>
                                <label for="body"
                                       class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">
                                    Commento
                                </label>
                                <textarea id="body" name="body" rows="4" required  disabled                                           class="w-full rounded-md border-gray-300 bg-white text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:ring-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100  cursor-not-allowed opacity-60 "></textarea>
                                                            </div>

                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <button type="submit"  disabled aria-disabled="true"                                         class="inline-flex w-full items-center justify-center rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white dark:focus-visible:ring-gray-600 dark:focus-visible:ring-offset-gray-800 sm:w-auto  cursor-not-allowed opacity-50 hover:bg-gray-900 ">
                                    Invia
                                </button>

                                                                    <p class="text-sm text-gray-600 dark:text-gray-300">
                                        Per lasciare un commento, accedi.
                                    </p>
                                                            </div>
                        </form>

                        
                                                    <div class="mt-6 rounded-lg border border-gray-200/60 bg-white p-5 dark:border-gray-700/60 dark:bg-gray-900/30">
                                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                    Accedi per commentare
                                </h3>

                                <form method="POST" action="https://it.asted.cloud/login" class="mt-4 space-y-4">
                                    <input type="hidden" name="_token" value="B7XBj0wrzV01PjeG7rsmHQo1ImMbxqEg8UItwjg3" autocomplete="off">
                                    <div>
                                        <label for="login_email" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">
                                            Email
                                        </label>
                                        <input id="login_email" name="email" type="email" required autocomplete="username"
                                               value=""
                                               class="w-full rounded-md border-gray-300 bg-white text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:ring-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"/>
                                    </div>

                                    <div>
                                        <label for="login_password" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">
                                            Password
                                        </label>
                                        <input id="login_password" name="password" type="password" required autocomplete="current-password"
                                               class="w-full rounded-md border-gray-300 bg-white text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:ring-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"/>
                                    </div>

                                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                        <button type="submit"
                                                class="inline-flex w-full items-center justify-center rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white dark:focus-visible:ring-gray-600 dark:focus-visible:ring-offset-gray-800 sm:w-auto">
                                            Accedi
                                        </button>

                                        <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
                                                                                            <a href="https://it.asted.cloud/forgot-password" class="underline hover:text-gray-900 dark:hover:text-white">
                                                    Hai dimenticato la password?
                                                </a>
                                            
                                                                                            <a href="https://it.asted.cloud/register" class="underline hover:text-gray-900 dark:hover:text-white">
                                                    Crea account
                                                </a>
                                                                                    </div>
                                    </div>
                                </form>
                            </div>
                                                            </div>

                            </div>
        </div>
    </div>
</section>

    <style>
        @keyframes votePop {
            0% { transform: scale(1); }
            55% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }
        .vote-pop {
            animation: votePop 180ms ease-out;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const setVoteButtonActive = (button, active) => {
                if (!button) return;
                button.setAttribute('aria-pressed', active ? 'true' : 'false');
            };

            const inFlightComments = new Set();

            const setCommentVoteDisabled = (commentId, disabled) => {
                document
                    .querySelectorAll(`form[data-comment-vote-form][data-comment-id="${commentId}"] button[type="submit"]`)
                    .forEach((button) => {
                        button.disabled = !!disabled;
                    });
            };

            const readVoteState = (commentId) => {
                const widget = document.querySelector(`[data-comment-votes][data-comment-id="${commentId}"]`);
                if (!widget) {
                    return { up: 0, down: 0, value: 0 };
                }

                const upCountEl = widget.querySelector('[data-vote-count="up"]');
                const downCountEl = widget.querySelector('[data-vote-count="down"]');

                const up = Number.parseInt(upCountEl?.textContent ?? '0', 10) || 0;
                const down = Number.parseInt(downCountEl?.textContent ?? '0', 10) || 0;

                const upPressed = widget.querySelector('[data-vote-button="up"]')?.getAttribute('aria-pressed') === 'true';
                const downPressed = widget.querySelector('[data-vote-button="down"]')?.getAttribute('aria-pressed') === 'true';

                const value = upPressed ? 1 : downPressed ? -1 : 0;

                return { up, down, value };
            };

            const computeOptimisticVote = (state, clickedValue) => {
                const currentValue = Number(state.value ?? 0) || 0;
                const up = Number(state.up ?? 0) || 0;
                const down = Number(state.down ?? 0) || 0;

                let nextValue = currentValue;
                let nextUp = up;
                let nextDown = down;

                if (clickedValue === 1) {
                    if (currentValue === 1) {
                        nextValue = 0;
                        nextUp = Math.max(0, up - 1);
                    } else {
                        nextValue = 1;
                        nextUp = up + 1;
                        if (currentValue === -1) {
                            nextDown = Math.max(0, down - 1);
                        }
                    }
                }

                if (clickedValue === -1) {
                    if (currentValue === -1) {
                        nextValue = 0;
                        nextDown = Math.max(0, down - 1);
                    } else {
                        nextValue = -1;
                        nextDown = down + 1;
                        if (currentValue === 1) {
                            nextUp = Math.max(0, up - 1);
                        }
                    }
                }

                return { up: nextUp, down: nextDown, value: nextValue };
            };

            const playVoteAnimation = (button) => {
                if (!button) return;

                button.classList.remove('vote-pop');
                // Force reflow to restart animation
                void button.offsetWidth;
                button.classList.add('vote-pop');
            };

            const updateVoteWidgets = (commentId, upVotesCount, downVotesCount, viewerVoteValue) => {
                const widgets = document.querySelectorAll(`[data-comment-votes][data-comment-id="${commentId}"]`);

                widgets.forEach((widget) => {
                    const upCount = widget.querySelector('[data-vote-count="up"]');
                    if (upCount) {
                        upCount.textContent = String(upVotesCount ?? 0);
                        upCount.classList.toggle('hidden', Number(upVotesCount ?? 0) < 1);
                    }

                    const downCount = widget.querySelector('[data-vote-count="down"]');
                    if (downCount) {
                        downCount.textContent = String(downVotesCount ?? 0);
                        downCount.classList.toggle('hidden', Number(downVotesCount ?? 0) < 1);
                    }

                    setVoteButtonActive(widget.querySelector('[data-vote-button="up"]'), Number(viewerVoteValue ?? 0) === 1);
                    setVoteButtonActive(widget.querySelector('[data-vote-button="down"]'), Number(viewerVoteValue ?? 0) === -1);
                });
            };

            document.addEventListener('submit', async (event) => {
                const form = event.target;
                if (!(form instanceof HTMLFormElement)) return;
                if (!form.matches('form[data-comment-vote-form]')) return;

                const submitButton = form.querySelector('button[type="submit"]');
                if (submitButton?.disabled) return;

                const commentId = form.dataset.commentId;
                const clickedValue = Number.parseInt(form.dataset.voteValue ?? '', 10);
                if (!commentId || ![1, -1].includes(clickedValue)) return;

                event.preventDefault();

                if (inFlightComments.has(commentId)) return;
                inFlightComments.add(commentId);

                const prevState = readVoteState(commentId);
                const optimisticState = computeOptimisticVote(prevState, clickedValue);

                updateVoteWidgets(commentId, optimisticState.up, optimisticState.down, optimisticState.value);
                playVoteAnimation(submitButton);
                setCommentVoteDisabled(commentId, true);

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(form),
                        credentials: 'same-origin',
                    });

                    if (!response.ok) {
                        throw new Error('Vote request failed');
                    }

                    const payload = await response.json();
                    if (!payload || typeof payload.comment_id === 'undefined') {
                        throw new Error('Invalid response');
                    }

                    updateVoteWidgets(payload.comment_id, payload.up_votes_count, payload.down_votes_count, payload.viewer_vote_value);
                } catch (error) {
                    updateVoteWidgets(commentId, prevState.up, prevState.down, prevState.value);
                }

                setCommentVoteDisabled(commentId, false);
                inFlightComments.delete(commentId);
            });
        });
    </script>


    <footer class="container-fluid">
        <div class="container">
            <div class="row footer-p">
                <div class="col-md-4">
                    <div class="footer-title">ASTED PRINCIPALE</div>
                    <ul class="footer-menu">
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="https://it.asted.cloud/abloutus">Informazioni su Asted Cloud</a></li>
                        <li><a href="/verification">Scopri di più sulla verifica</a></li>
                        <li><a href="https://it.asted.cloud/agreement">Accordo utente</a></li>
                        <li><a href="/policy">Politica sulla Privacy</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <div class="footer-title">ASTED PIATTAFORMA</div>
                    <ul class="footer-menu">
                        
                        <li><a href="https://it.asted.cloud/plans">Prezzi</a></li>
                        <li><a href="https://it.asted.cloud/astedstatistics">Statistiche</a></li>
                        <li><a href="https://it.asted.cloud/astedservers">Server Asted</a></li>
                        <li><a href="https://it.asted.cloud/versions">Cronologia versioni</a></li>
                        <li><a href="https://it.asted.cloud/rating/followers">Classifica utenti</a></li>
                        <li><a href="https://it.asted.cloud/sitemap">Mappa del sito</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <div class="footer-title">ASTED UTILI...</div>
                    <ul class="footer-menu">
                        <li><a href="/instruments">Strumenti</a></li>
                        <li><a href="https://it.asted.cloud/wiki">Wiki</a></li>
                        <li><a href="/siteanalyzer">Analisi del sito</a></li>
                        <li><a href="/cmschecker">Verifica CMS</a></li>
                        <li><a href="/youtube">Analitica YouTube</a></li>
                        <li><a href="/quiz">Quiz</a></li>
                        <li><a href="/abuse">Segnala una violazione</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <div class="copyright">
        Powered by <img src="/img/ac.svg" alt="logo" class="asted"> Asted Cloud
    </div>
</main>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js?v=4"></script>
</body>
</html>