<!-- VERSIONE: 00.00.29 -->
<!--
MODIFICHE E IMPLEMENTAZIONI EFFETTUATE (CHANGELOG):
PERCORSO ORIGINE FILE: P:\tripstricks\templates\index.html
CARTELLA BACKUP VERSIONATI DEL PROGETTO: H:\BackupSoftware\Backup_Progetti_Attivi\tripstricks
27/08/2026 07:35:47 - Versione 00.00.29 - Descrizioni: riscritti definitivamente su righe separate i blocchi JavaScript Tx solo testo dopo verifica del file reale.
27/08/2026 07:32:46 - Versione 00.00.28 - Descrizioni: normalizzata la formattazione dei blocchi JavaScript Tx su righe reali per mantenere il diff leggibile e verificabile.
27/08/2026 07:30:03 - Versione 00.00.27 - Descrizioni: riscritti in forma multilinea i blocchi JavaScript del comando Tx solo testo, senza cambiare la logica applicata.
27/08/2026 07:26:49 - Versione 00.00.26 - Descrizioni: il comando Tx converte la descrizione in solo testo e il salvataggio mantiene il marker grafico solo quando resta formattazione reale.
27/08/2026 07:09:52 - Versione 00.00.25 - Testata home: separato il logo su una prima riga dedicata e spostati titolo, badge/IP/Patreon a sinistra della seconda riga con tema, Backup e accesso a destra.
27/08/2026 06:38:28 - Versione 00.00.24 - Descrizioni: ridotta l'interlinea nella vista grafica e nell'editor, riportando righe e paragrafi a una spaziatura piu compatta.
27/08/2026 06:36:58 - Versione 00.00.23 - Risultati: all'apertura dettaglio la vista grafica viene mostrata solo per descrizioni ricche; per testo normale resta visibile la vista testo/codice.
27/08/2026 06:35:13 - Versione 00.00.22 - Toolbar descrizione: resa persistente la selezione del testo dopo i comandi di formattazione, evitando che venga sostituita da una selezione vuota sui controlli.
27/08/2026 06:33:09 - Versione 00.00.21 - Toolbar descrizione: forzata una sola riga per tutti i comandi di formattazione, con controlli compatti e scorrimento orizzontale quando serve; il menu carattere mantiene la scelta selezionata.
26/08/2026 23:43:09 - Versione 00.00.20 - Toolbar descrizione: mantenuta la selezione quando si usano colore/font/dimensione e reso operativo il reset colore automatico.
26/08/2026 23:22:58 - Versione 00.00.19 - Sostituiti i bottoni limitati colore/font/dimensione con controlli tipo editor: font a menu, dimensione numerica in punti, selettore colore e reset colore automatico.
26/08/2026 22:55:28 - Versione 00.00.18 - Aggiunta tavolozza colori testo e scelta tipo carattere nella toolbar grafica del nuovo inserimento descrizione.
26/08/2026 22:32:55 - Versione 00.00.17 - Rimosse righe vuote con spazi finali dal blocco Contatti per superare il controllo tecnico git diff --check prima del commit.
26/08/2026 19:22:46 - Versione 00.00.16 - Sostituiti i menu Stile/Dimensione con pulsanti tipografici, corretta la dimensione testo senza comando fontSize e preservati selezione e spazi iniziali in vista grafica.
26/08/2026 19:17:45 - Versione 00.00.15 - Impostata la vista grafica come visualizzazione iniziale delle descrizioni nei risultati, lasciando la vista testo selezionabile dal pulsante.
26/08/2026 19:16:22 - Versione 00.00.14 - Ripristinato il doppio clic di copia sulle descrizioni, anche in vista grafica, usando il punto reale del mouse prima della selection del browser.
26/08/2026 18:37:31 - Versione 00.00.13 - Riorganizzata la riga dei risultati: badge Categoria, Link, File e Privato sulla prima riga; titolo subito sotto.
26/08/2026 17:35:15 - Versione 00.00.12 - Aggiunto editor grafico per nuovo post, resa HTML sicura delle descrizioni ricche e Ctrl+A limitato ai blocchi descrizione.
03/08/2026 00:42:00 - Versione 00.00.11 - Copiato in fondo alla pagina il blocco Contatti Diretti dal sito personale, adattato ai temi Bootstrap chiaro/scuro.
03/08/2026 00:22:00 - Versione 00.00.10 - Sostituito il selettore tema con pulsante toggle Chiaro/Scuro; tema iniziale predefinito Scuro.
03/08/2026 00:16:00 - Versione 00.00.09 - Aggiunto riepilogo post nella testata risultati: totale personale per user e conteggi per autore per admin.
02/08/2026 23:53:00 - Versione 00.00.08 - Gli utenti role user possono inserire post e modificare/cancellare soltanto i propri; admin mantiene accesso completo.
02/08/2026 23:20:55 - Versione 00.00.07 - Rimossa spaziatura finale nel nuovo helper copia appunti.
02/08/2026 23:18:47 - Versione 00.00.07 - Corretto helper copia appunti e completato l'uso dell'offset globale per blocchi multilinea e righe normali.
02/08/2026 23:17:18 - Versione 00.00.07 - Aggiunta copia multilinea su doppio clic per blocchi delimitati da :>> e <<:.
20/07/2026 23:55:46 - Versione 00.00.06 - Aggiunta vista grafica opzionale per le descrizioni, mantenendo disponibile la vista testo/codice originale.
20/07/2026 10:33:48 - Versione 00.00.05 - Corretto il doppio clic sulla descrizione: quando una riga contiene piu simboli > o :>, viene copiato solo il blocco relativo al punto cliccato.
20/07/2026 10:18:08 - Versione 00.00.04 - Aggiunta richiesta password per il download degli allegati agli utenti non loggati.
14/07/2026 04:25:30 - Versione 00.00.03 - Aggiunto click sulla riga del post per aprire e chiudere il dettaglio con lo stesso comportamento del pulsante Visualizza.
14/07/2026 03:58:04 - Versione 00.00.02 - Dopo una ricerca testuale con Invio, il campo di ricerca globale mantiene il focus e il cursore resta alla fine del testo filtrato.
12/07/2026 08:12:49 - Versione 00.00.01 - Corretto il posizionamento del form Inserisci Nuovo Post: all'apertura va all'inizio del form e sul campo Titolo, non sul pulsante Salva Post.
-->

<!doctype html>
<html lang="it"> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Archivio Tips&Tricks</title>
        <link rel="shortcut icon" href="/tips/static/fare-sito-web.png" type="image/x-icon">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <script>
            const updateTheme = () => {
                const savedTheme = localStorage.getItem('theme') || 'dark';
                document.documentElement.setAttribute('data-bs-theme', savedTheme);

                const themeToggle = document.getElementById('themeToggle');
                if (themeToggle) {
                    themeToggle.textContent = savedTheme === 'dark' ? '☀️ Chiaro' : '🌙 Scuro';
                    themeToggle.setAttribute(
                        'title',
                        savedTheme === 'dark'
                            ? 'Passa al tema chiaro'
                            : 'Passa al tema scuro'
                    );
                }
            };

            const toggleTheme = () => {
                const currentTheme =
                    document.documentElement.getAttribute('data-bs-theme') || 'dark';
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                localStorage.setItem('theme', newTheme);
                updateTheme();
            };

            updateTheme();
        </script>
        <style>
            .break-word { word-break: break-all; }
            .post-row-clickable { cursor: pointer; }
            .description-rendered {
                font-family: inherit;
                font-size: 0.98rem;
                line-height: 1.3;
                white-space: pre-wrap;
                overflow-x: hidden;
                cursor: default;
            }
            .description-rendered p { margin: 0 0 0.25rem; }
            .description-rendered p:last-child { margin-bottom: 0; }
            .description-rendered h3,
            .description-rendered h4,
            .description-rendered h5,
            .description-rendered h6 {
                margin: 0.9rem 0 0.45rem;
                font-weight: 700;
            }
            .description-rendered h3:first-child,
            .description-rendered h4:first-child,
            .description-rendered h5:first-child,
            .description-rendered h6:first-child { margin-top: 0; }
            .description-rendered ul,
            .description-rendered ol {
                margin: 0 0 0.75rem 1.35rem;
                padding: 0;
            }
            .description-rendered li { margin-bottom: 0.25rem; }
            .description-rendered code {
                padding: 0.1rem 0.3rem;
                border-radius: 0.25rem;
                background: var(--bs-secondary-bg);
                color: var(--bs-body-color);
            }
            .description-rendered .desc-code-block {
                margin: 0 0 0.75rem;
                padding: 0.85rem;
                border: 1px solid var(--bs-border-color);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
                overflow-x: auto;
            }
            .description-rendered blockquote {
                margin: 0 0 0.75rem;
                padding: 0.5rem 0.75rem;
                border-left: 0.25rem solid var(--bs-primary);
                background: var(--bs-body-bg);
                color: var(--bs-body-color);
            }
            .description-rendered .desc-tag-block {
                margin: 0 0 0.75rem;
                padding: 0.65rem 0.75rem;
                border: 1px solid var(--bs-border-color);
                border-left: 0.25rem solid var(--bs-info);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
            }
            .description-rendered .desc-tag-name {
                display: inline-block;
                margin-bottom: 0.35rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--bs-info-text-emphasis);
            }
            .description-rendered .desc-empty-line { height: 0.4rem; }
            .description-rendered a { word-break: break-all; }
            .description-rendered:focus,
            .rich-description-editor:focus {
                outline: 0;
                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
            }
            .rich-description-toolbar {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                gap: 0.25rem;
                padding: 0.35rem 0.4rem;
                border: 1px solid var(--bs-border-color);
                border-bottom: 0;
                border-radius: 0.375rem 0.375rem 0 0;
                background: var(--bs-body-bg);
                overflow-x: auto;
                overflow-y: hidden;
                white-space: nowrap;
            }
            .rich-description-toolbar > * { flex: 0 0 auto; }
            .rich-description-toolbar .btn {
                min-width: 2rem;
                padding: 0.25rem 0.45rem;
                white-space: nowrap;
            }
            .rich-description-toolbar .form-select,
            .rich-description-toolbar .form-control,
            .rich-description-toolbar .input-group-text {
                height: 1.85rem;
                font-size: 0.8rem;
            }
            .rich-description-block-select { width: 6.1rem; }
            .rich-description-font-select { width: 9.2rem; }
            .rich-description-size-control { width: 5.4rem; }
            .rich-description-size-control .form-control { padding-right: 0.2rem; }
            .rich-description-color-control { width: 7.8rem; }
            .rich-description-color-picker {
                width: 2.35rem;
                min-width: 2.35rem;
                padding: 0.12rem 0.2rem;
            }
            .rich-description-color-reset { min-width: 2.6rem; }
            .rich-description-editor {
                min-height: 14rem;
                padding: 0.85rem;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                line-height: 1.3;
                overflow-x: auto;
                white-space: pre-wrap;
            }
            .rich-description-editor:empty::before {
                content: attr(data-placeholder);
                color: var(--bs-secondary-color);
                pointer-events: none;
            }
            .rich-description-editor p,
            .rich-description-editor div { margin: 0 0 0.25rem; }
            .rich-description-editor h3,
            .rich-description-editor h4,
            .rich-description-editor h5,
            .rich-description-editor h6 { margin: 0.85rem 0 0.45rem; font-weight: 700; }
            .rich-description-editor ul,
            .rich-description-editor ol { margin: 0 0 0.75rem 1.35rem; padding: 0; }
            .rich-description-editor blockquote {
                margin: 0 0 0.75rem;
                padding: 0.5rem 0.75rem;
                border-left: 0.25rem solid var(--bs-primary);
                background: var(--bs-body-tertiary);
            }
            .rich-description-editor pre {
                margin: 0 0 0.75rem;
                padding: 0.85rem;
                border: 1px solid var(--bs-border-color);
                border-radius: 0.375rem;
                background: var(--bs-body-bg);
                overflow-x: auto;
            }
            .rich-description-wrapper .invalid-feedback { display: none; }
            .rich-description-wrapper.is-invalid .invalid-feedback { display: block; }
            .rich-description-wrapper.is-invalid .rich-description-editor { border-color: var(--bs-danger); }
        </style>
    </head>
    
    <body>
        
        <div class="container-fluid py-4">
            <div class="px-md-5 px-4">
                <div class="sticky-top bg-body pb-1" style="z-index: 1030; margin-top: -1.5rem; padding-top: 1.5rem;">
                    <div class="mb-2">
                        <img src="/tips/static/stefano_salvi_software_logo_blu_rifilato.png" alt="Logo" style="width: 180px; height: 50px; vertical-align: middle;">
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 border-bottom pb-3 gap-3">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <h1 class="m-0 d-inline-block me-2">Tips & Tricks</h1>

                            
                                <span class="badge bg-secondary align-middle">👤 Navigazione Libera (Ospite)</span>
                                <span class="badge bg-dark text-white align-middle" style="font-family: monospace;">
                                    Il tuo IP: 216.73.216.89
                                </span>
                                <a href="https://www.patreon.com/home" title="Patreon Home" target="_blank" class="align-middle">
                                    <img src="/tips/static/patreon.png" alt="Patreon" style="width: 24px; height: 24px;">
                                </a>
                                <span class="align-middle">(Patreon)</span>

                            
                        </div>

                        <div class="d-flex align-items-center justify-content-start justify-content-md-end flex-wrap gap-2 ms-md-auto">
                            <button
                                type="button"
                                id="themeToggle"
                                class="btn btn-sm btn-outline-secondary align-middle"
                                onclick="toggleTheme()"
                                title="Passa al tema chiaro">
                                🌙 Scuro
                            </button>

                            
                                <a href="/tips/login" class="btn btn-primary">Accedi</a>
                            
                        </div>
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded shadow-sm">
                        <form method="GET" action="/tips/" class="d-flex flex-wrap gap-2 flex-grow-1 m-0">
                            <input type="text" id="campo-ricerca-globale" name="search_titolo" class="form-control" style="min-width: 200px; flex: 1;" placeholder="Cerca in tutti i campi..." value="">
                            <button type="submit" class="btn btn-primary">Cerca</button>
                            
                                <a href="/tips/?reset=1" class="btn btn-outline-secondary">Resetta</a>
                            
                        </form>
                        <div class="text-md-end">
                            
                                <span title="Effettua l'accesso per abilitare l'inserimento" class="d-inline-block">
                                    <button type="button" class="btn btn-success fw-bold text-nowrap" disabled style="pointer-events: none;">➕ Inserisci Nuovo Post</button>
                                </span>
                            
                        </div>
                    </div>
                </div>

                
                    
                
                
                <form id="form-nuovo-post" action="/tips/add" method="POST" enctype="multipart/form-data" style="display: none;">
                    <div class="card shadow-sm mb-5 border-primary">
                        <div class="card-header bg-primary text-white fw-bold">
                        Nuovo Post
                    </div>

                    <div class="card-body">
                        <div class="row gx-2">
                            <div class="col-md-9">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Titolo</label>
                                    <input type="text" name="titolo" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Categoria</label>
                                    <input type="text" name="categoria" list="lista-categorie" class="form-control" placeholder="Seleziona o scrivi..." value="IA" autocomplete="off">
                                    <datalist id="lista-categorie">
                                        
                                            <option value="Acrobat"></option>
                                        
                                            <option value="Altro"></option>
                                        
                                            <option value="Hardware"></option>
                                        
                                            <option value="IA"></option>
                                        
                                            <option value="Installazioni"></option>
                                        
                                            <option value="Linux"></option>
                                        
                                            <option value="Motivazione"></option>
                                        
                                            <option value="Posta elettronica"></option>
                                        
                                            <option value="Powershell"></option>
                                        
                                            <option value="Rete"></option>
                                        
                                            <option value="Salute"></option>
                                        
                                            <option value="Server"></option>
                                        
                                            <option value="Server NAS"></option>
                                        
                                            <option value="Sistemi operativi"></option>
                                        
                                            <option value="Siti Web"></option>
                                        
                                            <option value="Stampanti"></option>
                                        
                                            <option value="VS CODE"></option>
                                        
                                            <option value="Video"></option>
                                        
                                            <option value="Windows"></option>
                                        
                                            <option value="Word"></option>
                                        
                                    </datalist>
                                </div>
                            </div>

                        </div>

                        <div class="mb-3 rich-description-wrapper" data-rich-description-wrapper>
                            <label class="form-label fw-bold">Descrizione / Codice</label>
                            <textarea id="nuovo-descrizione" name="descrizione" class="d-none" data-rich-description-source></textarea>
                            <div class="rich-description-toolbar" role="toolbar" aria-label="Comandi descrizione">
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="bold" title="Grassetto"><strong>B</strong></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="italic" title="Italico"><em>I</em></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="underline" title="Sottolineato"><u>U</u></button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="strikeThrough" title="Barrato"><s>S</s></button>
                                </div>
                                <select class="form-select form-select-sm rich-description-block-select" data-rich-block-select title="Stile paragrafo">
                                    <option value="">Stile</option>
                                    <option value="p">Normale</option>
                                    <option value="h3">Titolo 1</option>
                                    <option value="h4">Titolo 2</option>
                                    <option value="blockquote">Citazione</option>
                                    <option value="pre">Codice</option>
                                </select>
                                <select class="form-select form-select-sm rich-description-font-select" data-rich-font-select title="Tipo carattere">
                                    <option value="">Carattere</option>
                                    <option value='"Aptos", "Segoe UI", sans-serif'>Aptos</option>
                                    <option value="Arial, sans-serif">Arial</option>
                                    <option value="Calibri, sans-serif">Calibri</option>
                                    <option value="Georgia, serif">Serif</option>
                                    <option value="'Times New Roman', serif">Times New Roman</option>
                                    <option value="Verdana, sans-serif">Verdana</option>
                                    <option value="Consolas, monospace">Consolas</option>
                                    <option value="'Courier New', monospace">Courier New</option>
                                </select>
                                <div class="input-group input-group-sm rich-description-size-control" title="Dimensione testo">
                                    <input type="number" class="form-control" min="8" max="72" step="1" value="12" data-rich-size-input aria-label="Dimensione testo">
                                    <span class="input-group-text">pt</span>
                                </div>
                                <div class="input-group input-group-sm rich-description-color-control" title="Colore testo">
                                    <span class="input-group-text">A</span>
                                    <input type="color" class="form-control form-control-color rich-description-color-picker" value="#212529" data-rich-color-input aria-label="Colore testo">
                                    <button type="button" class="btn btn-outline-secondary rich-description-color-reset" data-rich-color-reset title="Nessun colore / colore automatico">Auto</button>
                                </div>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="insertUnorderedList" title="Elenco puntato">UL</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="insertOrderedList" title="Elenco numerato">OL</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="createLink" title="Collegamento">Link</button>
                                    <button type="button" class="btn btn-outline-secondary" data-rich-command="removeFormat" title="Rimuovi tutta la formattazione e salva come testo">Tx</button>
                                </div>
                            </div>
                            <div id="nuovo-descrizione-editor" class="form-control rich-description-editor" contenteditable="true" data-rich-description-editor data-rich-required="1" data-rich-original-mode="plain" data-source-id="nuovo-descrizione" data-placeholder="Scrivi qui il codice o la descrizione dell'appunto..."></div>
                            <div class="invalid-feedback rich-description-feedback">La descrizione e obbligatoria.</div>
                        </div>

                        <div class="col-12">
                            <div class="p-3 bg-body rounded border shadow-sm">
                                <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                <div id="links-container" class="mb-2">
                                    <div class="input-group mb-2">
                                        <input type="text" name="links" class="form-control" placeholder="URL (es. https://...)">
                                        <input type="text" name="link_notes" class="form-control" placeholder="Nota descrittiva facoltativa">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary fw-medium" onclick="addLinkField('links-container')">➕ Aggiungi Nuovo Link</button>
                            </div>
                        </div>
                            
                        <div class="col-12">
                            <div class="p-3 bg-body rounded border shadow-sm">
                                <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">📁 ALLEGATI (IMMAGINI/VIDEO/FILE):</div>
                                    <div id="file-container" class="mb-2">
                                        <div class="input-group mb-2">
                                            <input type="file" name="files" class="form-control">
                                            <button class="btn btn-outline-secondary" type="button" onclick="addFileField('file-container')">➕</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-3">
                            <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm">Salva Post</button>
                        </div>
                    </div>
                </form>

                <div class="mb-4 p-3 bg-body-tertiary rounded shadow-sm d-flex flex-wrap align-items-center gap-2">
                    <span class="fw-bold me-1">Filtra per Categoria:</span>
                    <a href="/tips/?categoria=" class="btn btn-sm btn-outline-secondary">Tutte</a>
                    
                        
                    
                        
                    
                        
                    
                        
                            <a href="/tips/?categoria=IA" class="btn btn-sm btn-primary fw-bold">IA</a>
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                </div>

                <div class="p-3 bg-body-tertiary rounded shadow-sm mb-4">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <h3 class="m-0">Risultati</h3>

                            
                        </div>

                        <span class="badge bg-info text-dark fs-6">Trovati: 4</span>
                    </div>
                    <div class="row g-0">
                        
                        <div class="col-12 mb-2">
                            <div class="card shadow-sm border-secondary-subtle">

                                <div class="card-header bg-body-secondary d-flex flex-column flex-md-row justify-content-between align-items-md-start py-2 gap-2 post-row-clickable" data-post-collapse-target="#collapse-tip-117">
                                    <div class="flex-grow-1 pe-md-3">
                                        <div class="d-flex align-items-center flex-wrap gap-1 mb-1">
                                            <span class="badge bg-primary">IA</span>
                                            
                                                <span class="badge bg-info text-dark" title="Contiene Link Utili">🔗 Link</span>
                                            
                                            
                                            
                                        </div>
                                        <div class="fw-bold text-body-emphasis" style="font-size: 1.1rem;">Guide e trucchi su Claude</div>
                                    </div>

                                    <div class="text-muted d-flex flex-wrap align-items-center gap-3 flex-shrink-0" style="font-size: 0.8rem;">

                                        <div class="d-flex flex-column text-start" style="line-height: 1.4;">
                                            
                                                <div>Autore: <strong>stefano</strong></div>
                                            
                                            <div>Inserito il: 2026-10-13 06:12:24</div>
                                        </div>
                                        
                                        <div class="d-flex align-items-center gap-1">
                                            <button class="btn btn-sm btn-outline-info text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-tip-117">
                                                Visualizza
                                            </button>

                                            
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="collapse" id="collapse-tip-117">
                                    <div class="card-body p-0 position-relative">
                                        
                                        <div class="d-flex flex-wrap justify-content-end gap-2 p-2 bg-body-tertiary border-bottom">
                                            <button type="button" class="btn btn-sm btn-outline-secondary " data-desc-wrap-button="117" onclick="toggleWrap(117, this)">A capo: No</button>
                                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleDescriptionView(117, this)">Vista: Grafica</button>
                                        </div>
                                        
                                        <pre id="desc-text-117" class="m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 " style="font-family: monospace; font-size: 0.95rem; overflow-x: auto; white-space: pre; cursor: pointer;" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti" tabindex="0" data-description-select-scope>Corso Claude</pre>
                                        <div id="desc-graphic-117" class="description-rendered m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 d-none" tabindex="0" data-description-select-scope data-description-rich="0" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti"></div>
                                    </div>
                                    
                                    
                                        <div class="card-footer bg-body-tertiary p-3 border-top">
                                            <div class="row g-3">
                                                
                                                <div class="col-12">
                                                    <div class="p-3 bg-body rounded border shadow-sm">
                                                        <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                                        <ul class="list-unstyled m-0">
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://www.youtube.com/watch?v=LwHYIyPx_2Y" target="_blank" class="text-decoration-none break-word fw-medium">https://www.youtube.com/watch?v=LwHYIyPx_2Y</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Claude da ZeroCo)</span>
                                                                
                                                            </li>
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://www.youtube.com/watch?v=7A9O15nq5Yw" target="_blank" class="text-decoration-none break-word fw-medium">https://www.youtube.com/watch?v=7A9O15nq5Yw</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Ho Provato a Trasformare 100€ in 1000€ con l&#39;AI)</span>
                                                                
                                                            </li>
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://www.youtube.com/channel/UCFermqARa66pnGJVV1PnYGA" target="_blank" class="text-decoration-none break-word fw-medium">https://www.youtube.com/channel/UCFermqARa66pnGJVV1PnYGA</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Canale YouTube Claude di Giuseppe Castagna)</span>
                                                                
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                

                                                
                                            </div>
                                        </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 mb-2">
                            <div class="card shadow-sm border-secondary-subtle">

                                <div class="card-header bg-body-secondary d-flex flex-column flex-md-row justify-content-between align-items-md-start py-2 gap-2 post-row-clickable" data-post-collapse-target="#collapse-tip-116">
                                    <div class="flex-grow-1 pe-md-3">
                                        <div class="d-flex align-items-center flex-wrap gap-1 mb-1">
                                            <span class="badge bg-primary">IA</span>
                                            
                                                <span class="badge bg-info text-dark" title="Contiene Link Utili">🔗 Link</span>
                                            
                                            
                                            
                                        </div>
                                        <div class="fw-bold text-body-emphasis" style="font-size: 1.1rem;">Claude Code 100% GRATIS - Come usarlo SENZA PAGARE (anche su computer economici)</div>
                                    </div>

                                    <div class="text-muted d-flex flex-wrap align-items-center gap-3 flex-shrink-0" style="font-size: 0.8rem;">

                                        <div class="d-flex flex-column text-start" style="line-height: 1.4;">
                                            
                                                <div>Autore: <strong>stefano</strong></div>
                                            
                                            <div>Inserito il: 2026-10-06 09:05:33</div>
                                        </div>
                                        
                                        <div class="d-flex align-items-center gap-1">
                                            <button class="btn btn-sm btn-outline-info text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-tip-116">
                                                Visualizza
                                            </button>

                                            
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="collapse" id="collapse-tip-116">
                                    <div class="card-body p-0 position-relative">
                                        
                                        <div class="d-flex flex-wrap justify-content-end gap-2 p-2 bg-body-tertiary border-bottom">
                                            <button type="button" class="btn btn-sm btn-outline-secondary d-none" data-desc-wrap-button="116" onclick="toggleWrap(116, this)">A capo: No</button>
                                            <button type="button" class="btn btn-sm btn-primary" onclick="toggleDescriptionView(116, this)">Vista: Testo</button>
                                        </div>
                                        
                                        <pre id="desc-text-116" class="m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 d-none" style="font-family: monospace; font-size: 0.95rem; overflow-x: auto; white-space: pre; cursor: pointer;" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti" tabindex="0" data-description-select-scope>Claude Code 100% GRATIS - Come usarlo SENZA PAGARE (anche su computer economici)
Ho usato Claude Code per più di 200 ore 

Per scaricare Claude Code 👉 https://code.claude.com/docs/en/quick...
Per scaricare Antigravity 👉 https://antigravity.google
Marketplace con Skill di Anthropic 👉 https://github.com/anthropics/claude-...
Per la mia newsletter gratuita 👉 https://antonioguadagno.substack.com</pre>
                                        <div id="desc-graphic-116" class="description-rendered m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 " tabindex="0" data-description-select-scope data-description-rich="1" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti"><div>Claude Code 100% GRATIS - Come usarlo SENZA PAGARE (anche su computer economici)</div><div><span style="color: rgb(0, 0, 0); font-size: 1rem">Ho usato Claude Code per più di 200 ore </span></div><div><span style="color: rgb(0, 0, 0); font-size: 1rem"><br></span></div><div><span style="color: rgb(255, 255, 255)"></span><span style="color: rgb(5, 5, 5)"><span style="color: rgb(255, 255, 255)">Per scaricare Claude Code 👉 </span><span style="color: rgb(62, 166, 255)"><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUZZTVljSHdYOHQ2anJsWnhUTlNRZXNYOVh5enxBTl9pYzRlTTJXQU93dWhEbGZyTlVrQ0dpWG9paGE1RjA0SWdqd3J3QV9YZFBKODF2WHBudUo3YjMzYmktRi1JdERmY3lSVUV2cDBwY2RTell0M21OdXZwM1AwRGpiTEd3T3Ju&amp;q=https%3A%2F%2Fcode.claude.com%2Fdocs%2Fen%2Fquickstart&amp;v=_UmT8n5IVNk" target="_blank" rel="noopener noreferrer">https://code.claude.com/docs/en/quick...</a></span><span style="color: rgb(255, 255, 255)">
Per scaricare Antigravity 👉 </span><span style="color: rgb(62, 166, 255)"><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUZZTVljR0ttSUlPOWR6dHREaE85ZDhRSmFWZ3xBTl9pYzRkdFVqSWI5OVVZdWhNVFNpbTl0SU1Dd2NueDNKS1BWc0tsZnN6TDRaWkRTWm1DV2ZYRU4tbDVJVEg3Z0pIdWt4VzlFUmFLZnFScklfQ250azVDT2o3d1hHa2ZHeHpJ&amp;q=https%3A%2F%2Fantigravity.google%2F&amp;v=_UmT8n5IVNk" target="_blank" rel="noopener noreferrer">https://antigravity.google</a></span><span style="color: rgb(255, 255, 255)">
Marketplace con Skill di Anthropic 👉 </span><span style="color: rgb(62, 166, 255)"><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUZZTVljRUxpSFJsdnNUcWhNLVFZZlRPM3pMRXxBTl9pYzRkNk5naV8xZTM5eGlqRUlidE9OcjhISWdpenFHel9qWlFEb2ZtOGxPdHRqZUJWV19rV05nWFVvbXlYZzk1aDh5RlJleFRneUxFajMtOUlHWUxGd24xcDVaemJIZHFt&amp;q=https%3A%2F%2Fgithub.com%2Fanthropics%2Fclaude-plugins-official.git&amp;v=_UmT8n5IVNk" target="_blank" rel="noopener noreferrer">https://github.com/anthropics/claude-...</a></span><span style="color: rgb(255, 255, 255)">
Per la mia newsletter gratuita 👉 </span><span style="color: rgb(62, 166, 255)"><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUZZTVljR0QwSTE5UlVrNnotSVJ2S3N6NUNHRnxBTl9pYzRmY0M4NXk0cEpibGJBQk52MkZBLXQyXzFITEVjYVpydktpWnVQZHJfeU5DbWdIWHF6c05TbWdVMTdrTnhzbEZaLW45ZG9oSmxfVXVOTXB3TlhHNjJiVTFjTF9fNl9r&amp;q=https%3A%2F%2Fantonioguadagno.substack.com%2F&amp;v=_UmT8n5IVNk" target="_blank" rel="noopener noreferrer">https://antonioguadagno.substack.com</a></span></span><span style="color: rgb(62, 166, 255)"><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUZZTVljR0QwSTE5UlVrNnotSVJ2S3N6NUNHRnxBTl9pYzRmY0M4NXk0cEpibGJBQk52MkZBLXQyXzFITEVjYVpydktpWnVQZHJfeU5DbWdIWHF6c05TbWdVMTdrTnhzbEZaLW45ZG9oSmxfVXVOTXB3TlhHNjJiVTFjTF9fNl9r&amp;q=https%3A%2F%2Fantonioguadagno.substack.com%2F&amp;v=_UmT8n5IVNk" target="_blank" rel="noopener noreferrer"></a></span><span style="color: rgb(0, 0, 0); font-size: 1rem"></span></div></div>
                                    </div>
                                    
                                    
                                        <div class="card-footer bg-body-tertiary p-3 border-top">
                                            <div class="row g-3">
                                                
                                                <div class="col-12">
                                                    <div class="p-3 bg-body rounded border shadow-sm">
                                                        <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                                        <ul class="list-unstyled m-0">
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://www.youtube.com/watch?v=5RqDNkmjAw8" target="_blank" class="text-decoration-none break-word fw-medium">https://www.youtube.com/watch?v=5RqDNkmjAw8</a>
                                                                
                                                            </li>
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://www.youtube.com/watch?v=_UmT8n5IVNk" target="_blank" class="text-decoration-none break-word fw-medium">https://www.youtube.com/watch?v=_UmT8n5IVNk</a>
                                                                
                                                            </li>
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://antigravity.google/" target="_blank" class="text-decoration-none break-word fw-medium">https://antigravity.google/</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Download Antigravity)</span>
                                                                
                                                            </li>
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://antonioguadagno.substack.com" target="_blank" class="text-decoration-none break-word fw-medium">https://antonioguadagno.substack.com</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Sito Antonio Guadagno)</span>
                                                                
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                

                                                
                                            </div>
                                        </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 mb-2">
                            <div class="card shadow-sm border-secondary-subtle">

                                <div class="card-header bg-body-secondary d-flex flex-column flex-md-row justify-content-between align-items-md-start py-2 gap-2 post-row-clickable" data-post-collapse-target="#collapse-tip-88">
                                    <div class="flex-grow-1 pe-md-3">
                                        <div class="d-flex align-items-center flex-wrap gap-1 mb-1">
                                            <span class="badge bg-primary">IA</span>
                                            
                                                <span class="badge bg-info text-dark" title="Contiene Link Utili">🔗 Link</span>
                                            
                                            
                                            
                                        </div>
                                        <div class="fw-bold text-body-emphasis" style="font-size: 1.1rem;">Trucchi per IA, ChatGPT, Claude, prompt per istruzioni utili</div>
                                    </div>

                                    <div class="text-muted d-flex flex-wrap align-items-center gap-3 flex-shrink-0" style="font-size: 0.8rem;">

                                        <div class="d-flex flex-column text-start" style="line-height: 1.4;">
                                            
                                                <div>Autore: <strong>stefano</strong></div>
                                            
                                            <div>Inserito il: 2026-07-20 23:22:03</div>
                                        </div>
                                        
                                        <div class="d-flex align-items-center gap-1">
                                            <button class="btn btn-sm btn-outline-info text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-tip-88">
                                                Visualizza
                                            </button>

                                            
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="collapse" id="collapse-tip-88">
                                    <div class="card-body p-0 position-relative">
                                        
                                        <div class="d-flex flex-wrap justify-content-end gap-2 p-2 bg-body-tertiary border-bottom">
                                            <button type="button" class="btn btn-sm btn-outline-secondary " data-desc-wrap-button="88" onclick="toggleWrap(88, this)">A capo: No</button>
                                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleDescriptionView(88, this)">Vista: Grafica</button>
                                        </div>
                                        
                                        <pre id="desc-text-88" class="m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 " style="font-family: monospace; font-size: 0.95rem; overflow-x: auto; white-space: pre; cursor: pointer;" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti" tabindex="0" data-description-select-scope>Prompt per istruzioni 
Fai da mentore spietato per me, metti in discussione le mie convinzioni.
Stressa ogni idea che ti porto o chiedo.
Voglio pensiero solido non validazioni.

4 Prompt XML per IA LLM 
&lt;ruolo&gt; descrizione ruolo &lt;/ruolo&gt;
&lt;contesto&gt; descrizione contesto&lt;/contesto&gt;
&lt;istruzione&gt; descrizione istruzione&lt;/istruzione&gt;
&lt;formato&gt; descrizione formato&lt;/formato&gt;

CHATGPT 
--------------------------------------------------------------------------
Prima del prompt non da ragione a prescindere ma è piu onesto &gt; /killcritic 
Prima del prompt per avere risposte piu umane &gt; /human
Pensa meglio e da risposte migliori &gt; /x10think
Mostra i pro ed i contro sulle domande &gt; /debate  &gt; /roast
Risposte essenziali e concrete &gt; /human
Rendere concetti complessi piu accessibili &gt; /ELI10
Riassuno in sintesi stritturata &gt; /ALT3
Approfondire ragionamenti e avere alternative &gt; /Deep

CLAUDE 
---------------------------------------------------------------------------
1) Prima del prompt, sblocca stile di risposta più aggressiva possibile &gt; /godmode
2) Alla fine del prompt per attivare il livello piu avanzato disponibile &gt; L99
3) Prima del prompt per applicare un framework decisionale al problema e poi indica come risolvere &gt; OODA
4) Dopo il prompt costruisce una app funzionante &gt; Artefacts
5) Prima del prompt genera una risposta umanizzata che supera anche i rilevatori di AI &gt; /ghost

5 Plugin importanti da instllare per CLAUDE
1) Brand Voice (Per scrivere testi)
2) PDF Viewer 
3) Design
4) Operation 
5) Productivity

6) Cloude Code Setup
7) Superpower
8) Creator
9) code semplify
10) context7@claude-pluging-official
11) Playwright



</pre>
                                        <div id="desc-graphic-88" class="description-rendered m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 d-none" tabindex="0" data-description-select-scope data-description-rich="0" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti"></div>
                                    </div>
                                    
                                    
                                        <div class="card-footer bg-body-tertiary p-3 border-top">
                                            <div class="row g-3">
                                                
                                                <div class="col-12">
                                                    <div class="p-3 bg-body rounded border shadow-sm">
                                                        <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                                        <ul class="list-unstyled m-0">
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://salchiarenza.ai/claude/?fbclid=IwY2xjawTAF-VleHRuA2FlbQIxMABicmlkETBMWUU1Zm52UUpwVXl5NVhxc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHvwg2sHG841IbIF707kN2W4NHp0I1cCkkC-9n3J90P8tgP355evp1SMj8m9U_aem_J4WY35f6MeV9sugbQskD6g" target="_blank" class="text-decoration-none break-word fw-medium">https://salchiarenza.ai/claude/?fbclid=IwY2xjawTAF-VleHRuA2FlbQIxMABicmlkETBMWUU1Zm52UUpwVXl5NVhxc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHvwg2sHG841IbIF707kN2W4NHp0I1cCkkC-9n3J90P8tgP355evp1SMj8m9U_aem_J4WY35f6MeV9sugbQskD6g</a>
                                                                
                                                                    <span class="text-muted small ms-1">(Plugin utili per claude)</span>
                                                                
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                

                                                
                                            </div>
                                        </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-12 mb-2">
                            <div class="card shadow-sm border-secondary-subtle">

                                <div class="card-header bg-body-secondary d-flex flex-column flex-md-row justify-content-between align-items-md-start py-2 gap-2 post-row-clickable" data-post-collapse-target="#collapse-tip-83">
                                    <div class="flex-grow-1 pe-md-3">
                                        <div class="d-flex align-items-center flex-wrap gap-1 mb-1">
                                            <span class="badge bg-primary">IA</span>
                                            
                                                <span class="badge bg-info text-dark" title="Contiene Link Utili">🔗 Link</span>
                                            
                                            
                                            
                                        </div>
                                        <div class="fw-bold text-body-emphasis" style="font-size: 1.1rem;">KIMI</div>
                                    </div>

                                    <div class="text-muted d-flex flex-wrap align-items-center gap-3 flex-shrink-0" style="font-size: 0.8rem;">

                                        <div class="d-flex flex-column text-start" style="line-height: 1.4;">
                                            
                                                <div>Autore: <strong>stefano</strong></div>
                                            
                                            <div>Inserito il: 2026-07-12 08:42:09</div>
                                        </div>
                                        
                                        <div class="d-flex align-items-center gap-1">
                                            <button class="btn btn-sm btn-outline-info text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-tip-83">
                                                Visualizza
                                            </button>

                                            
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="collapse" id="collapse-tip-83">
                                    <div class="card-body p-0 position-relative">
                                        
                                        <div class="d-flex flex-wrap justify-content-end gap-2 p-2 bg-body-tertiary border-bottom">
                                            <button type="button" class="btn btn-sm btn-outline-secondary " data-desc-wrap-button="83" onclick="toggleWrap(83, this)">A capo: No</button>
                                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="toggleDescriptionView(83, this)">Vista: Grafica</button>
                                        </div>
                                        
                                        <pre id="desc-text-83" class="m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 " style="font-family: monospace; font-size: 0.95rem; overflow-x: auto; white-space: pre; cursor: pointer;" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti" tabindex="0" data-description-select-scope>prompt per installare kini code da powershell
&gt; irm https://code.kimi.com/kimi-code/install.ps1 | iex</pre>
                                        <div id="desc-graphic-83" class="description-rendered m-0 p-3 bg-body-tertiary border-bottom text-body border-0 rounded-0 d-none" tabindex="0" data-description-select-scope data-description-rich="0" ondblclick="copyClickedLine(event)" title="Fai doppio clic sul testo dopo > o :> per copiarlo negli appunti"></div>
                                    </div>
                                    
                                    
                                        <div class="card-footer bg-body-tertiary p-3 border-top">
                                            <div class="row g-3">
                                                
                                                <div class="col-12">
                                                    <div class="p-3 bg-body rounded border shadow-sm">
                                                        <div class="fw-bold text-secondary mb-3" style="font-size: 0.85rem; letter-spacing: 0.5px;">🔗 LINK UTILI:</div>
                                                        <ul class="list-unstyled m-0">
                                                            
                                                            <li class="mb-2 text-truncate">
                                                                🔗 <a href="https://marketplace.visualstudio.com/items?itemName=moonshot-ai.kimi-code" target="_blank" class="text-decoration-none break-word fw-medium">https://marketplace.visualstudio.com/items?itemName=moonshot-ai.kimi-code</a>
                                                                
                                                                    <span class="text-muted small ms-1">(KIMI Plugin per VS CODE)</span>
                                                                
                                                            </li>
                                                            
                                                        </ul>
                                                    </div>
                                                </div>
                                                

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

    <div class="contact-card mt-4 mb-4" style="background: linear-gradient(145deg, var(--bs-body-bg), var(--bs-secondary-bg)); border: 1px solid var(--bs-border-color); padding: 35px; border-radius: 12px; text-align: left; box-shadow: 0 15px 35px rgba(0,0,0,0.08);">
        <h3 style="margin-bottom: 25px; color: var(--bs-body-color); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px;">
            <span style="color: var(--bs-primary);">⚡</span> Contatti Diretti
        </h3>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;">

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="font-size: 1.1rem; width: 28px; height: 28px; background: rgba(0, 82, 255, 0.08); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">📞</div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Telefono</div>
                </div>
                <div>
                    <a href="Voce.:+393351508511" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Cell.: +39 335 1508511</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(37, 211, 102, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #25D366;" viewBox="0 0 24 24">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.713-1.455L0 24zm6.79-4.141c1.559.926 3.109 1.411 4.743 1.412 5.536 0 10.04-4.432 10.044-9.879.002-2.638-1.025-5.117-2.892-6.988-1.867-1.871-4.35-2.901-6.992-2.902-5.543 0-10.046 4.434-10.05 9.882-.001 1.727.461 3.415 1.339 4.904l-.995 3.636 3.757-.965zm11.599-5.115c-.326-.162-1.926-.938-2.222-1.045-.297-.108-.512-.162-.726.162-.215.324-.833 1.046-1.02 1.262-.188.216-.376.243-.702.082-.326-.162-1.375-.501-2.62-1.601-.968-.853-1.621-1.908-1.812-2.23-.191-.324-.02-.5-.182-.661-.147-.146-.326-.379-.489-.569-.163-.189-.217-.324-.326-.54-.109-.217-.055-.405-.027-.568.028-.162.215-.513.326-.676.11-.163.147-.27.221-.432.074-.162.037-.306.018-.468-.018-.163-.215-.938-.297-1.13-.08-.192-.163-.166-.222-.169l-.19-.004c-.215 0-.563.081-.857.399-.294.319-1.124 1.081-1.124 2.637 0 1.555 1.153 3.059 1.314 3.275.162.217 2.27 3.42 5.498 4.793.768.327 1.368.521 1.832.667.772.243 1.474.208 2.028.127.618-.091 1.926-.777 2.197-1.492.271-.715.271-1.326.19-1.454-.08-.127-.296-.209-.622-.372z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">WhatsApp</div>
                </div>
                <div>
                    <a href="https://wa.me/393242509985" target="_blank" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Inviami messaggio</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(234, 67, 53, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #EA4335;" viewBox="0 0 24 24">
                            <path d="M24 5.457v13.086c0 .804-.652 1.457-1.457 1.457h-3.828V9.172L12 14.162 3.285 9.172v10.828H1.457C.652 20 0 19.348 0 18.543V5.457c0-.796.643-1.442 1.437-1.455L3.37 4l8.63 4.931L20.63 4l1.933.002c.794.013 1.437.659 1.437 1.455z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Email</div>
                </div>
                <div style="min-width: 0;">
                    <a href="mailto:stefano@stefano-salvi.it" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">stefano@stefano-salvi.it</a>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--bs-border-color); border-radius: 8px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div style="width: 28px; height: 28px; background: rgba(24, 119, 242, 0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                        <svg style="width: 16px; height: 16px; fill: #1877F2;" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </div>
                    <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-weight: 600;">Facebook</div>
                </div>
                <div>
                    <a href="https://www.facebook.com/share/1DENUMH9JF/" target="_blank" style="color: var(--bs-primary); text-decoration: none; font-weight: 600; font-size: 0.85rem;">Visita il mio profilo fb</a>
                </div>
            </div>

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

        
        <div class="modal fade" id="downloadPasswordModal" tabindex="-1" aria-labelledby="downloadPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="downloadPasswordForm" method="POST" target="_blank">
                        <div class="modal-header">
                            <h5 class="modal-title" id="downloadPasswordModalLabel">Password download</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-2 fw-semibold text-truncate" id="downloadPasswordFilename"></div>
                            <div class="form-floating">
                                <input type="password" name="download_password" class="form-control" id="downloadPasswordInput" placeholder="Password" required autocomplete="off">
                                <label for="downloadPasswordInput">Password</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annulla</button>
                            <button type="submit" class="btn btn-primary">Scarica</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        

        <div class="modal fade" id="backupModal" tabindex="-1" aria-labelledby="backupModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="backupModalLabel">Gestione Backup Database</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Esporta i dati</h6>
                    <p class="text-muted small">Scarica l'intero contenuto attuale dell'archivio in un file JSON.</p>
                    <a href="/tips/export" class="btn btn-primary btn-sm mb-4">📥 Scarica Backup JSON</a>
                    <hr>
                    <h6>Importa i dati</h6>
                    <p class="text-muted small">Carica un file JSON precedentemente scaricato. I dati verranno aggiunti a quelli esistenti.</p>
                    <form action="/tips/import" method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <input class="form-control form-control-sm" type="file" name="backup_file" accept=".json" required>
                        </div>
                        <button type="submit" class="btn btn-success btn-sm">📤 Carica e Importa dati</button>
                    </form>
                </div>
                </div>
            </div>
        </div>

        <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="btn btn-primary rounded-circle shadow-lg d-flex align-items-center justify-content-center" style="position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; z-index: 9999; font-size: 1.25rem; border: none !important;" title="Torna ad inizio pagina">
            ▲
        </button>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            const RICH_DESCRIPTION_MARKER = '<!--TRIPSTRICKS_RICH_TEXT-->';

            document.addEventListener("DOMContentLoaded", () => {
                updateTheme();

                const campoRicercaGlobale = document.getElementById('campo-ricerca-globale');
                const ricercaGlobaleAttiva = false;
                if (ricercaGlobaleAttiva && campoRicercaGlobale) {
                    campoRicercaGlobale.focus();
                    const posizioneFinale = campoRicercaGlobale.value.length;
                    campoRicercaGlobale.setSelectionRange(posizioneFinale, posizioneFinale);
                }

                document.querySelectorAll('[data-post-collapse-target]').forEach((rigaPost) => {
                    rigaPost.addEventListener('click', (event) => {
                        if (event.target.closest('a, button, form, input, select, textarea, label')) {
                            return;
                        }

                        const selezioneTesto = window.getSelection();
                        if (selezioneTesto && selezioneTesto.toString().trim() !== '') {
                            return;
                        }

                        const targetCollapse = document.querySelector(rigaPost.dataset.postCollapseTarget);
                        if (!targetCollapse) {
                            return;
                        }

                        bootstrap.Collapse.getOrCreateInstance(targetCollapse, { toggle: false }).toggle();
                    });
                });

                const downloadPasswordModal = document.getElementById('downloadPasswordModal');
                if (downloadPasswordModal) {
                    const downloadPasswordForm = document.getElementById('downloadPasswordForm');
                    const downloadPasswordFilename = document.getElementById('downloadPasswordFilename');
                    const downloadPasswordInput = document.getElementById('downloadPasswordInput');

                    downloadPasswordModal.addEventListener('show.bs.modal', (event) => {
                        const trigger = event.relatedTarget;
                        if (!trigger || !downloadPasswordForm) {
                            return;
                        }

                        downloadPasswordForm.action = trigger.getAttribute('data-download-url') || '';
                        if (downloadPasswordFilename) {
                            downloadPasswordFilename.textContent = trigger.getAttribute('data-download-filename') || '';
                        }
                        if (downloadPasswordInput) {
                            downloadPasswordInput.value = '';
                        }
                    });

                    downloadPasswordModal.addEventListener('shown.bs.modal', () => {
                        if (downloadPasswordInput) {
                            downloadPasswordInput.focus();
                        }
                    });

                    if (downloadPasswordForm) {
                        downloadPasswordForm.addEventListener('submit', () => {
                            const modalInstance = bootstrap.Modal.getInstance(downloadPasswordModal);
                            if (modalInstance) {
                                modalInstance.hide();
                            }
                        });
                    }
                }

                initRichDescriptionEditors();
                initDescriptionSelectScopes();

                document.querySelectorAll('[id^="desc-text-"]').forEach((descrizioneTesto) => {
                    const id = descrizioneTesto.id.replace('desc-text-', '');
                    const descrizioneGrafica = document.getElementById('desc-graphic-' + id);
                    if (descrizioneGrafica && descrizioneGrafica.dataset.descriptionRich !== '1') {
                        descrizioneGrafica.innerHTML = renderDescriptionAsGraphic(descrizioneTesto.textContent);
                    }
                });
            });

            function toggleNuovoPost() {
                const form = document.getElementById('form-nuovo-post');
                if (form.style.display === 'none') {
                    form.style.display = 'block';
                    const campoTitolo = form.querySelector('input[name="titolo"]');
                    const intestazioneSticky = document.querySelector('.sticky-top');

                    function posizionaNuovoPostAllInizio() {
                        const margineAlto = intestazioneSticky ? intestazioneSticky.offsetHeight + 12 : 0;
                        const posizioneForm = form.getBoundingClientRect().top + window.pageYOffset;
                        window.scrollTo({
                            top: Math.max(0, posizioneForm - margineAlto),
                            left: 0,
                            behavior: 'auto'
                        });
                        if (campoTitolo) {
                            try {
                                campoTitolo.focus({ preventScroll: true });
                            } catch (_) {
                                campoTitolo.focus();
                            }
                        }
                    }
 
                    posizionaNuovoPostAllInizio();
                    requestAnimationFrame(posizionaNuovoPostAllInizio);
                    setTimeout(posizionaNuovoPostAllInizio, 120);
                } else {
                    form.style.display = 'none';
                }
            }

            function selectDescriptionElementContent(element) {
                const range = document.createRange();
                range.selectNodeContents(element);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
            }

            function saveRichDescriptionSelection(editor, options = {}) {
                const selection = window.getSelection();
                if (!selection || !selection.rangeCount) {
                    return;
                }
                const range = selection.getRangeAt(0);
                const allowCollapsed = options.allowCollapsed !== false;
                if (editor.contains(range.commonAncestorContainer) && (allowCollapsed || !range.collapsed)) {
                    editor._richDescriptionRange = range.cloneRange();
                }
            }

            function restoreRichDescriptionSelection(editor) {
                const selection = window.getSelection();
                if (!selection) {
                    return;
                }
                editor.focus();
                selection.removeAllRanges();
                if (editor._richDescriptionRange) {
                    try {
                        selection.addRange(editor._richDescriptionRange);
                        return;
                    } catch (_) {
                        editor._richDescriptionRange = null;
                    }
                }
                const range = document.createRange();
                range.selectNodeContents(editor);
                range.collapse(false);
                selection.addRange(range);
            }

            function restoreRichDescriptionSelectionAfterCommand(editor) {
                restoreRichDescriptionSelection(editor);
                requestAnimationFrame(() => restoreRichDescriptionSelection(editor));
                setTimeout(() => restoreRichDescriptionSelection(editor), 0);
            }

            function keepRichDescriptionSelection(editor, range) {
                const selection = window.getSelection();
                if (!selection || !range) {
                    return;
                }
                editor.focus();
                selection.removeAllRanges();
                selection.addRange(range);
                editor._richDescriptionRange = range.cloneRange();
            }

            function normalizeRichDescriptionEditor(editor) {
                editor.querySelectorAll('font[size="7"]').forEach((fontNode) => {
                    const span = document.createElement('span');
                    span.style.fontSize = fontNode.dataset.richFontSize || '1rem';
                    while (fontNode.firstChild) {
                        span.appendChild(fontNode.firstChild);
                    }
                    fontNode.replaceWith(span);
                });
                editor.querySelectorAll('a[href]').forEach((link) => {
                    let href = (link.getAttribute('href') || '').trim();
                    if (href && !/^[a-z][a-z0-9+.-]*:/i.test(href)) {
                        href = 'https://' + href;
                    }
                    link.setAttribute('href', href);
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'noopener noreferrer');
                });
            }

            function richDescriptionText(editor) {
                return (editor.textContent || '').replace(/\u00a0/g, ' ').trim();
            }

            function richDescriptionPlainText(editor) {
                return (editor.innerText || editor.textContent || '')
                    .replace(/\u00a0/g, ' ')
                    .replace(/\r\n/g, '\n')
                    .replace(/\r/g, '\n');
            }

            function richDescriptionHasGraphicFormatting(editor) {
                return Boolean(editor.querySelector('strong, b, em, i, u, s, ul, ol, li, blockquote, pre, code, h3, h4, h5, h6, a, span[style]'));
            }

            function resetRichDescriptionToPlainText(editor) {
                const plainText = richDescriptionPlainText(editor);
                editor.innerHTML = '';
                editor.textContent = plainText;
                editor.dataset.richOriginalMode = 'plain';
                markRichDescriptionDirty(editor);
                syncRichDescriptionSource(editor);
                selectDescriptionElementContent(editor);
                saveRichDescriptionSelection(editor, { allowCollapsed: false });
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function markRichDescriptionDirty(editor) {
                editor.dataset.richDirty = '1';
            }
            function syncRichDescriptionSource(editor) {
                const source = document.getElementById(editor.dataset.sourceId);
                if (!source) {
                    return;
                }
                if (editor.dataset.richOriginalMode === 'plain' && editor.dataset.richDirty !== '1') {
                    return;
                }
                normalizeRichDescriptionEditor(editor);
                const plainText = richDescriptionPlainText(editor);
                if (!plainText.trim()) {
                    source.value = '';
                    return;
                }
                source.value = richDescriptionHasGraphicFormatting(editor)
                    ? RICH_DESCRIPTION_MARKER + editor.innerHTML
                    : plainText;
            }

            function runRichDescriptionCommand(button) {
                const wrapper = button.closest('[data-rich-description-wrapper]');
                const editor = wrapper ? wrapper.querySelector('[data-rich-description-editor]') : null;
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                const command = button.dataset.richCommand;
                if (command === 'removeFormat') {
                    resetRichDescriptionToPlainText(editor);
                    return;
                }
                if (command === 'createLink') {
                    let href = prompt('Inserisci URL del collegamento:');
                    if (!href) {
                        return;
                    }
                    href = href.trim();
                    if (href && !/^[a-z][a-z0-9+.-]*:/i.test(href)) {
                        href = 'https://' + href;
                    }
                    document.execCommand('createLink', false, href);
                } else {
                    document.execCommand(command, false, null);
                }
                markRichDescriptionDirty(editor);
                normalizeRichDescriptionEditor(editor);
                saveRichDescriptionSelection(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function richDescriptionEditorForControl(control) {
                const wrapper = control.closest('[data-rich-description-wrapper]');
                return wrapper ? wrapper.querySelector('[data-rich-description-editor]') : null;
            }

            function applyRichDescriptionBlock(select) {
                const blockValue = select.value;
                if (!blockValue) {
                    return;
                }
                const editor = richDescriptionEditorForControl(select);
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                document.execCommand('formatBlock', false, blockValue);
                markRichDescriptionDirty(editor);
                saveRichDescriptionSelection(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
                select.selectedIndex = 0;
            }

            function normalizeRichDescriptionPointSize(value) {
                const numericValue = Number.parseInt(value, 10);
                if (!Number.isFinite(numericValue)) {
                    return '';
                }
                const clampedValue = Math.max(8, Math.min(72, numericValue));
                return `${clampedValue}pt`;
            }

            function applyRichDescriptionInlineStyle(control, styleProperty, styleValue) {
                if (!styleValue) {
                    return;
                }
                const editor = richDescriptionEditorForControl(control);
                if (!editor) {
                    return;
                }
                restoreRichDescriptionSelection(editor);
                const selection = window.getSelection();
                if (!selection || !selection.rangeCount) {
                    return;
                }
                const range = selection.getRangeAt(0);
                if (!editor.contains(range.commonAncestorContainer) || range.collapsed) {
                    return;
                }
                const span = document.createElement('span');
                span.style[styleProperty] = styleValue;
                try {
                    range.surroundContents(span);
                } catch (_) {
                    const fragment = range.extractContents();
                    span.appendChild(fragment);
                    range.insertNode(span);
                }
                const selectedRange = document.createRange();
                selectedRange.selectNodeContents(span);
                keepRichDescriptionSelection(editor, selectedRange);
                markRichDescriptionDirty(editor);
                normalizeRichDescriptionEditor(editor);
                syncRichDescriptionSource(editor);
                restoreRichDescriptionSelectionAfterCommand(editor);
            }

            function applyRichDescriptionSize(input) {
                const sizeValue = normalizeRichDescriptionPointSize(input.value);
                if (!sizeValue) {
                    return;
                }
                input.value = Number.parseInt(sizeValue, 10);
                applyRichDescriptionInlineStyle(input, 'fontSize', sizeValue);
            }

            function applyRichDescriptionColor(input) {
                applyRichDescriptionInlineStyle(input, 'color', input.value);
            }

            function resetRichDescriptionColor(button) {
                applyRichDescriptionInlineStyle(button, 'color', 'var(--bs-body-color)');
            }

            function applyRichDescriptionFont(select) {
                if (!select.value) {
                    return;
                }
                applyRichDescriptionInlineStyle(select, 'fontFamily', select.value);
            }

            function validateRichDescriptionForm(form) {
                let valid = true;
                let firstInvalid = null;
                form.querySelectorAll('[data-rich-description-editor]').forEach((editor) => {
                    syncRichDescriptionSource(editor);
                    const wrapper = editor.closest('[data-rich-description-wrapper]');
                    const invalid = editor.dataset.richRequired === '1' && !richDescriptionText(editor);
                    if (wrapper) {
                        wrapper.classList.toggle('is-invalid', invalid);
                    }
                    if (invalid) {
                        valid = false;
                        firstInvalid = firstInvalid || editor;
                    }
                });
                if (!valid && firstInvalid) {
                    firstInvalid.focus();
                }
                return valid;
            }

            function initRichDescriptionEditors() {
                document.querySelectorAll('[data-rich-description-editor]').forEach((editor) => {
                    if (editor.dataset.richInitialized === '1') {
                        return;
                    }
                    editor.dataset.richInitialized = '1';
                    editor.dataset.richDirty = '0';
                    editor.addEventListener('keyup', () => saveRichDescriptionSelection(editor));
                    editor.addEventListener('mouseup', () => saveRichDescriptionSelection(editor));
                    editor.addEventListener('input', () => {
                        markRichDescriptionDirty(editor);
                        saveRichDescriptionSelection(editor);
                        syncRichDescriptionSource(editor);
                    });
                    editor.addEventListener('blur', () => syncRichDescriptionSource(editor));
                    editor.addEventListener('keydown', (event) => {
                        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
                            event.preventDefault();
                            selectDescriptionElementContent(editor);
                            saveRichDescriptionSelection(editor);
                            return;
                        }
                        if (event.key === 'Tab') {
                            event.preventDefault();
                            restoreRichDescriptionSelection(editor);
                            document.execCommand('insertText', false, '    ');
                            markRichDescriptionDirty(editor);
                            saveRichDescriptionSelection(editor);
                            syncRichDescriptionSource(editor);
                        }
                    });

                    const wrapper = editor.closest('[data-rich-description-wrapper]');
                    if (wrapper) {
                        const toolbar = wrapper.querySelector('.rich-description-toolbar');
                        if (toolbar) {
                            toolbar.addEventListener('pointerdown', () => saveRichDescriptionSelection(editor, { allowCollapsed: false }), true);
                            toolbar.addEventListener('mousedown', () => saveRichDescriptionSelection(editor, { allowCollapsed: false }), true);
                        }
                        wrapper.querySelectorAll('[data-rich-command]').forEach((button) => {
                            button.addEventListener('mousedown', (event) => event.preventDefault());
                            button.addEventListener('click', () => runRichDescriptionCommand(button));
                        });
                        wrapper.querySelectorAll('[data-rich-block-select]').forEach((select) => {
                            select.addEventListener('change', () => applyRichDescriptionBlock(select));
                        });
                        wrapper.querySelectorAll('[data-rich-size-input]').forEach((input) => {
                            input.addEventListener('change', () => applyRichDescriptionSize(input));
                        });
                        wrapper.querySelectorAll('[data-rich-color-input]').forEach((input) => {
                            input.addEventListener('change', () => applyRichDescriptionColor(input));
                        });
                        wrapper.querySelectorAll('[data-rich-color-reset]').forEach((button) => {
                            button.addEventListener('mousedown', (event) => event.preventDefault());
                            button.addEventListener('click', () => resetRichDescriptionColor(button));
                        });
                        wrapper.querySelectorAll('[data-rich-font-select]').forEach((select) => {
                            select.addEventListener('change', () => applyRichDescriptionFont(select));
                        });
                    }

                    const form = editor.closest('form');
                    if (form && form.dataset.richSubmitInitialized !== '1') {
                        form.dataset.richSubmitInitialized = '1';
                        form.addEventListener('submit', (event) => {
                            if (!validateRichDescriptionForm(form)) {
                                event.preventDefault();
                            }
                        });
                    }
                });
            }

            function initDescriptionSelectScopes() {
                document.querySelectorAll('[data-description-select-scope]').forEach((area) => {
                    if (area.dataset.selectScopeInitialized === '1') {
                        return;
                    }
                    area.dataset.selectScopeInitialized = '1';
                    area.addEventListener('click', () => {
                        const selection = window.getSelection();
                        if (!selection || selection.toString() === '') {
                            area.focus({ preventScroll: true });
                        }
                    });
                    area.addEventListener('keydown', (event) => {
                        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
                            event.preventDefault();
                            selectDescriptionElementContent(area);
                        }
                    });
                });
            }

            function copyTextToClipboard(testoDaCopiare) {
                navigator.clipboard.writeText(testoDaCopiare).then(() => {
                    const toast = document.createElement('div');
                    toast.className = 'position-fixed bg-success text-white px-3 py-2 rounded shadow-lg fw-bold';
                    toast.style.bottom = '90px';
                    toast.style.right = '30px';
                    toast.style.zIndex = '10000';
                    toast.style.fontFamily = 'monospace';
                    toast.textContent = 'TESTO COPIATO NEGLI APPUNTI!';
                    document.body.appendChild(toast);

                    setTimeout(() => toast.remove(), 2000);
                }).catch(err => {
                    console.error("Errore di copia:", err);
                });
            }

            function textOffsetFromNode(container, targetNode, targetOffset) {
                const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
                let offsetTotale = 0;
                let nodoCorrente;

                while ((nodoCorrente = walker.nextNode())) {
                    if (nodoCorrente === targetNode) {
                        return offsetTotale + targetOffset;
                    }
                    offsetTotale += nodoCorrente.textContent.length;
                }

                return null;
            }

            function multilineCopyBlockAtOffset(text, offset) {
                const markerStart = ':>>';
                const markerEnd = '<<:';
                const start = text.lastIndexOf(markerStart, offset);
                if (start === -1) {
                    return '';
                }

                const contentStart = start + markerStart.length;
                const end = text.indexOf(markerEnd, contentStart);
                if (end === -1 || offset < contentStart || offset >= end) {
                    return '';
                }

                const nextStart = text.indexOf(markerStart, contentStart);
                if (nextStart !== -1 && nextStart < end) {
                    return '';
                }

                return text
                    .substring(contentStart, end)
                    .replace(/^[\t \u00A0]*\r?\n/, '')
                    .replace(/\r?\n[\t \u00A0]*$/, '')
                    .split(/\r?\n/)
                    .filter(line => !/^[\t \u00A0]*#/.test(line))
                    .join('\n')
                    .replace(/^[\t \u00A0]+/, '')
                    .replace(/[\t \u00A0]+$/, '');
            }

            function copyClickedLine(event) {
                let node = null;
                let offset = 0;

                if (document.caretPositionFromPoint) {
                    const posizioneClick = document.caretPositionFromPoint(event.clientX, event.clientY);
                    if (posizioneClick && event.currentTarget.contains(posizioneClick.offsetNode)) {
                        node = posizioneClick.offsetNode;
                        offset = posizioneClick.offset;
                    }
                } else if (document.caretRangeFromPoint) {
                    const posizioneClick = document.caretRangeFromPoint(event.clientX, event.clientY);
                    if (posizioneClick && event.currentTarget.contains(posizioneClick.startContainer)) {
                        node = posizioneClick.startContainer;
                        offset = posizioneClick.startOffset;
                    }
                }

                if (!node) {
                    const selection = window.getSelection();
                    if (!selection || !selection.rangeCount) return;

                    const range = selection.getRangeAt(0);
                    node = range.startContainer;
                    offset = range.startOffset;
                }

                if (node.nodeType !== Node.TEXT_NODE) return;

                const text = event.currentTarget.textContent;
                const offsetNelTesto = textOffsetFromNode(event.currentTarget, node, offset);
                if (offsetNelTesto === null) return;

                const bloccoMultiriga = multilineCopyBlockAtOffset(text, offsetNelTesto);
                if (bloccoMultiriga) {
                    copyTextToClipboard(bloccoMultiriga);
                    return;
                }

                // Isola la riga intera cliccata
                let startOfLine = text.lastIndexOf('\n', offsetNelTesto - 1) + 1;
                let endOfLine = text.indexOf('\n', offsetNelTesto);
                if (endOfLine === -1) endOfLine = text.length;

                const lineText = text.substring(startOfLine, endOfLine);
                const offsetNellaRiga = Math.max(0, Math.min(offsetNelTesto - startOfLine, lineText.length));
                const simboli = [];
                const regexSimboli = /:>|>/g;
                let matchSimbolo;

                while ((matchSimbolo = regexSimboli.exec(lineText)) !== null) {
                    simboli.push({
                        start: matchSimbolo.index,
                        end: matchSimbolo.index + matchSimbolo[0].length
                    });
                }

                if (!simboli.length) {
                    return;
                }

                let simboloDaCopiare = null;
                for (const simbolo of simboli) {
                    if (offsetNellaRiga >= simbolo.start && offsetNellaRiga <= simbolo.end) {
                        simboloDaCopiare = simbolo;
                        break;
                    }
                    if (simbolo.end <= offsetNellaRiga) {
                        simboloDaCopiare = simbolo;
                    }
                    if (simbolo.start > offsetNellaRiga) {
                        break;
                    }
                }

                if (!simboloDaCopiare) {
                    return;
                }

                const simboloSuccessivo = simboli.find(simbolo => simbolo.start > simboloDaCopiare.start);
                const fineBlocco = simboloSuccessivo ? simboloSuccessivo.start : lineText.length;
                const testoDaCopiare = lineText
                    .substring(simboloDaCopiare.end, fineBlocco)
                    .replace(/^[\s\u00A0\t]+/, "")
                    .replace(/[\s\u00A0\t]+$/, "");

                if (!testoDaCopiare) {
                    return;
                }
 
                copyTextToClipboard(testoDaCopiare);
            }      

            function escapeHtml(value) {
                return String(value)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function formatInlineDescription(value) {
                let html = escapeHtml(value);
                html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
                html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
                html = html.replace(/\bhttps?:\/\/[^\s<]+/g, (url) => {
                    return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
                });
                return html;
            }

            function renderDescriptionAsGraphic(text) {
                const lines = String(text || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
                const html = [];
                let listType = null;
                let inCodeBlock = false;
                let codeLines = [];

                function closeList() {
                    if (listType) {
                        html.push(`</${listType}>`);
                        listType = null;
                    }
                }

                function flushCodeBlock() {
                    html.push(`<pre class="desc-code-block"><code>${escapeHtml(codeLines.join('\n'))}</code></pre>`);
                    codeLines = [];
                }

                lines.forEach((line) => {
                    const trimmed = line.trim();

                    if (/^\s*```/.test(line)) {
                        closeList();
                        if (inCodeBlock) {
                            flushCodeBlock();
                            inCodeBlock = false;
                        } else {
                            inCodeBlock = true;
                            codeLines = [];
                        }
                        return;
                    }

                    if (inCodeBlock) {
                        codeLines.push(line);
                        return;
                    }

                    if (!trimmed) {
                        closeList();
                        html.push('<div class="desc-empty-line"></div>');
                        return;
                    }

                    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
                        closeList();
                        html.push('<hr class="my-3">');
                        return;
                    }

                    const tagBlock = trimmed.match(/^<([A-Za-z][\w-]*)>\s*(.*?)\s*<\/\1>$/);
                    if (tagBlock) {
                        closeList();
                        html.push(`<div class="desc-tag-block"><span class="desc-tag-name">${escapeHtml(tagBlock[1])}</span><div>${formatInlineDescription(tagBlock[2])}</div></div>`);
                        return;
                    }

                    const heading = trimmed.match(/^(#{1,3})\s+(.+)$/);
                    if (heading) {
                        closeList();
                        const level = heading[1].length + 3;
                        html.push(`<h${level}>${formatInlineDescription(heading[2])}</h${level}>`);
                        return;
                    }

                    const bullet = trimmed.match(/^[-*]\s+(.+)$/);
                    if (bullet) {
                        if (listType !== 'ul') {
                            closeList();
                            listType = 'ul';
                            html.push('<ul>');
                        }
                        html.push(`<li>${formatInlineDescription(bullet[1])}</li>`);
                        return;
                    }

                    const ordered = trimmed.match(/^\d+[.)]\s+(.+)$/);
                    if (ordered) {
                        if (listType !== 'ol') {
                            closeList();
                            listType = 'ol';
                            html.push('<ol>');
                        }
                        html.push(`<li>${formatInlineDescription(ordered[1])}</li>`);
                        return;
                    }

                    const quote = trimmed.match(/^>\s+(.+)$/);
                    if (quote) {
                        closeList();
                        html.push(`<blockquote>${formatInlineDescription(quote[1])}</blockquote>`);
                        return;
                    }

                    closeList();
                    html.push(`<p>${formatInlineDescription(line)}</p>`);
                });

                closeList();
                if (inCodeBlock) {
                    flushCodeBlock();
                }

                return html.join('');
            }

            function toggleDescriptionView(id, btn) {
                const plain = document.getElementById('desc-text-' + id);
                const graphic = document.getElementById('desc-graphic-' + id);
                const wrapButton = document.querySelector(`[data-desc-wrap-button="${id}"]`);

                if (!plain || !graphic) {
                    return;
                }

                if (graphic.classList.contains('d-none')) {
                    plain.classList.add('d-none');
                    graphic.classList.remove('d-none');
                    btn.textContent = 'Vista: Testo';
                    btn.classList.remove('btn-outline-primary');
                    btn.classList.add('btn-primary');
                    if (wrapButton) {
                        wrapButton.classList.add('d-none');
                    }
                } else {
                    graphic.classList.add('d-none');
                    plain.classList.remove('d-none');
                    btn.textContent = 'Vista: Grafica';
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-outline-primary');
                    if (wrapButton) {
                        wrapButton.classList.remove('d-none');
                    }
                }
            }
                  
            function toggleWrap(id, btn) {
                const p = document.getElementById('desc-text-' + id);
                if (p) {
                    if (p.style.whiteSpace === 'pre-wrap') {
                        p.style.whiteSpace = 'pre';
                        btn.textContent = 'A capo: No';
                        btn.classList.remove('btn-outline-success');
                        btn.classList.add('btn-outline-secondary');
                    } else {
                        p.style.whiteSpace === 'pre-wrap';
                        p.style.whiteSpace = 'pre-wrap';
                        btn.textContent = 'A capo: Sì';
                        btn.classList.remove('btn-outline-secondary');
                        btn.classList.add('btn-outline-success');
                    }
                }
            }

            function addLinkField(containerId) {
                const container = document.getElementById(containerId);
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="text" name="links" class="form-control" placeholder="Nuovo Link URL...">
                    <input type="text" name="link_notes" class="form-control" placeholder="Nota...">
                    <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Elimina</button>
                `;
                container.appendChild(div);
            }

            function addFileField(containerId) {
                const container = document.getElementById(containerId);
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="file" name="files" class="form-control">
                    <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Elimina</button>
                `;
                container.appendChild(div);
            }
        </script>
    </body>
</html>