Embed

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ricerca Portale Genitori Soli</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: transparent;
        }

        .search-results-container {
            max-height: 550px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #e2e8f0 transparent;
        }

        .search-results-container::-webkit-scrollbar {
            width: 5px;
        }

        .search-results-container::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 20px;
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .result-item-link {
            display: block;
            text-decoration: none;
            padding: 1.15rem;
            transition: all 0.2s ease-out;
            border-left: 4px solid transparent;
        }

        .result-item-link:hover {
            background-color: #f8fafc;
            border-left-color: #2563eb;
            transform: translateX(5px);
        }

        .highlight {
            background-color: #dbeafe;
            color: #1e40af;
            padding: 0.1rem 0.2rem;
            border-radius: 3px;
            font-weight: 700;
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-in {
            animation: slideInUp 0.3s ease-out forwards;
        }
    </style>
</head>
<body class="p-4">

    <div class="max-w-3xl mx-auto relative">
        
        
        <div class="flex items-center justify-center gap-4 mb-2 animate-in">
            
            <div class="flex-shrink-0">
                <h1 id="ui-main-title" class="text-3xl font-extrabold text-slate-800 tracking-tight">
                    Ricerca
                </h1>
            </div>

            
            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-blue-50 text-blue-600 rounded-2xl shadow-sm border border-blue-100">
                <i class="fas fa-search text-xl"></i>
            </div>
            
            
            <div class="relative flex-grow max-w-xl group">
                <input 
                    type="text" 
                    id="searchInput" 
                    placeholder="Caricamento..." 
                    class="w-full px-6 py-4 bg-white border-2 border-slate-100 rounded-2xl shadow-xl focus:outline-none focus:border-blue-500 transition-all text-lg text-slate-800"
                    autocomplete="off"
                >
                <button id="clearBtn" class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-300 hover:text-red-500 hidden">
                    <i class="fas fa-times-circle text-xl"></i>
                </button>
            </div>
        </div>

        
        <div class="text-center mb-6 animate-in">
            <p id="ui-subtitle" class="text-slate-400 text-[11px] font-semibold uppercase tracking-wider">Database ufficiale Portale Genitori Soli</p>
        </div>
        
        
        <div class="flex flex-wrap justify-center gap-2 mt-4" id="ui-tags-container">
            
        </div>

        
        <div id="resultsPanel" class="absolute z-[999] w-full mt-4 glass-effect rounded-3xl shadow-2xl hidden overflow-hidden border border-slate-100 animate-in">
            <div class="px-6 py-4 bg-slate-50/50 border-b border-slate-100 flex justify-between items-center">
                <span id="resultCount" class="text-[10px] font-black text-slate-400 uppercase tracking-widest">0 Risultati</span>
                <span id="ui-verified-label" class="text-[10px] text-blue-600 font-bold uppercase">Link Verificati <i class="fas fa-check-circle ml-1"></i></span>
            </div>
            
            <div id="resultsList" class="search-results-container divide-y divide-slate-100">
                
            </div>
        </div>
    </div>

    <script>
        /**
         * ==========================================
         * 1. CONFIGURAZIONE TESTI E INTERFACCIA
         * Modifica questi valori per cambiare i testi
         * ==========================================
         */
        const UI_TEXTS = {
            mainTitle: "Ricerca",
            subtitle: "Database ufficiale Portale Genitori Soli",
            inputPlaceholder: "Cerca ctu, avvocato, figli, esperti...",
            verifiedLabel: "Link Verificati",
            noResults: "Nessun risultato trovato per ",
            resultsSuffix: "Risultati",
            tags: [
                { id: "figli", label: "#Figli", color: "blue" },
                { id: "ctu", label: "#CTU", color: "red" },
                { id: "esperti", label: "#Esperti", color: "purple" },
                { id: "legge", label: "#Legge", color: "slate" }
            ]
        };

        /**
         * ==========================================
         * 2. DATABASE DEI LINK (URL)
         * Aggiungi o rimuovi oggetti qui per il database
         * ==========================================
         */
        const siteData = [
            { url: "https://ilportaledeigenitorisoli.com/", title: "Home Page - Portale Genitori Soli", keywords: ["figli", "aiuto", "genitori", "soli", "legge", "famiglia", "supporto"] },
            { url: "https://ilportaledeigenitorisoli.com/chi-siamo", title: "Chi Siamo - Missione e Associazione", keywords: ["associazione", "progetto", "missione", "staff", "chi siamo"] },
            { url: "https://ilportaledeigenitorisoli.com/contatti", title: "Contatti e Assistenza", keywords: ["aiuto", "scrivici", "assistenza", "whatsapp", "telefono", "email", "contatti"] },
            { url: "https://ilportaledeigenitorisoli.com/i-nostri-esperti", title: "I Nostri Esperti Professionisti", keywords: ["legge", "avvocato", "psicologo", "professionista", "consulenza", "legale", "esperti", "ctp", "perito"] },
            { url: "https://ilportaledeigenitorisoli.com/l-avvocato-risponde", title: "L'Avvocato Risponde", keywords: ["legge", "avvocato", "diritti", "consulenza", "legale", "giudice", "tribunale"] },
            { url: "https://ilportaledeigenitorisoli.com/affidamento-dei-figli", title: "Affidamento dei Figli e CTU", keywords: ["legge", "figli", "minori", "affido", "collocamento", "visite", "ctu", "perizia", "consulenza tecnica d'ufficio"] }
        ];

        // Riferimenti DOM
        const searchInput = document.getElementById('searchInput');
        const resultsPanel = document.getElementById('resultsPanel');
        const resultsList = document.getElementById('resultsList');
        const resultCount = document.getElementById('resultCount');
        const clearBtn = document.getElementById('clearBtn');
        const tagsContainer = document.getElementById('ui-tags-container');

        /**
         * 3. INIZIALIZZAZIONE UI
         */
        function initUI() {
            document.getElementById('ui-main-title').textContent = UI_TEXTS.mainTitle;
            document.getElementById('ui-subtitle').textContent = UI_TEXTS.subtitle;
            searchInput.placeholder = UI_TEXTS.inputPlaceholder;
            document.getElementById('ui-verified-label').innerHTML = `${UI_TEXTS.verifiedLabel} <i class="fas fa-check-circle ml-1"></i>`;
            
            // Generazione dinamica tag
            UI_TEXTS.tags.forEach(tag => {
                const btn = document.createElement('button');
                btn.onclick = () => fillSearch(tag.id);
                btn.className = `text-[10px] bg-${tag.color}-50 text-${tag.color}-700 px-3 py-1 rounded-full font-bold hover:bg-${tag.color}-600 hover:text-white transition-all uppercase tracking-wide`;
                btn.textContent = tag.label;
                tagsContainer.appendChild(btn);
            });
        }

        /**
         * 4. LOGICA DI RICERCA
         */
        function fillSearch(val) {
            searchInput.value = val;
            performSearch(val.toLowerCase().trim());
            searchInput.focus();
        }

        searchInput.addEventListener('input', (e) => {
            performSearch(e.target.value.toLowerCase().trim());
        });

        function countOccurrences(text, word) {
            if (!word) return 0;
            const regex = new RegExp(word, 'gi');
            const matches = text.match(regex);
            return matches ? matches.length : 0;
        }

        function performSearch(query) {
            if (!query || query.length === 0) {
                hideResults();
                return;
            }

            const results = siteData
                .map(item => {
                    const titleScore = countOccurrences(item.title, query) * 10;
                    const keywordScore = item.keywords.reduce((acc, k) => acc + countOccurrences(k, query), 0);
                    const totalScore = titleScore + keywordScore;
                    return { ...item, score: totalScore };
                })
                .filter(item => item.score > 0)
                .sort((a, b) => b.score - a.score);

            displayResults(results, query);
        }

        function displayResults(results, query) {
            resultsList.innerHTML = '';
            
            if (results.length === 0) {
                resultsList.innerHTML = `
                    <div class="p-10 text-center text-slate-400">
                        <p class="italic text-sm">${UI_TEXTS.noResults} "${query}" nel database ufficiale.</p>
                    </div>`;
            } else {
                results.forEach(res => {
                    const item = document.createElement('div');
                    item.innerHTML = `
                        <a href="${res.url}" target="_blank" class="result-item-link">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shrink-0 shadow-lg relative">
                                    <i class="fas fa-link text-[10px]"></i>
                                    ${res.score > 10 ? '<span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full border-2 border-white"></span>' : ''}
                                </div>
                                <div class="overflow-hidden">
                                    <h4 class="text-slate-900 font-bold text-sm truncate">${highlight(res.title, query)}</h4>
                                    <p class="text-[9px] text-slate-400 font-medium uppercase tracking-wider truncate">${res.url}</p>
                                </div>
                                <div class="ml-auto flex items-center gap-2">
                                    <i class="fas fa-chevron-right text-slate-200 text-xs"></i>
                                </div>
                            </div>
                        </a>
                    `;
                    resultsList.appendChild(item);
                });
            }

            resultCount.textContent = `${results.length} ${UI_TEXTS.resultsSuffix}`;
            resultsPanel.classList.remove('hidden');
            clearBtn.classList.remove('hidden');
        }

        function highlight(text, query) {
            const regex = new RegExp(`(${query})`, 'gi');
            return text.replace(regex, '<span class="highlight">$1</span>');
        }

        function hideResults() {
            resultsPanel.classList.add('hidden');
            clearBtn.classList.add('hidden');
        }

        clearBtn.addEventListener('click', () => {
            searchInput.value = '';
            hideResults();
        });

        document.addEventListener('click', (e) => {
            if (!resultsPanel.contains(e.target) && e.target !== searchInput && !e.target.closest('button')) {
                hideResults();
            }
        });

        // Avvio configurazione
        window.onload = initUI;
    </script>
</body>
</html>

il portale dei genitori soli

Il Portale dei Genitori Soli non è un ente governativo (come potrebbe essere il portale INPS), ma un'iniziativa privata di supporto che funge da "bussola" per i genitori single. Si occupa di semplificare la burocrazia, offrire consigli pratici sulla gestione economica dei figli e fornire un punto di riferimento umano per non affrontare da soli il trauma e le difficoltà della fine di una relazione.