Calendari <\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f9f9f9;\n margin: 0;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #007BFF;\n margin-bottom: 30px;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n th, td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n }\n th {\n background-color: #000000;\n color: white;\n font-weight: 600;\n }\n tr {\n transition: all 0.3s ease;\n }\n tr:hover {\n background-color: #e1f5fe;\n transform: translateX(-2px);\n }\n .tooltip {\n position: absolute;\n z-index: 1000;\n background: white;\n border: 1px solid #ddd;\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n max-width: 400px;\n display: none;\n word-wrap: break-word;\n }\n .tooltip img {\n max-width: 100%;\n height: auto;\n margin: 10px 0;\n border-radius: 4px;\n }\n .tooltip h3 {\n margin: 0;\n color: #007BFF;\n }\n .tooltip p {\n margin: 10px 0 0;\n line-height: 1.5;\n color: #666;\n }\n .filters {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n }\n .filters > * {\n width: 100%;\n }\n .filters label {\n margin-bottom: 5px;\n display: block;\n }\n .filters input {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n }\n .pagination {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .pagination button {\n padding: 10px 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .pagination button:hover {\n background-color: #0056b3;\n }\n .pagination button:disabled {\n background: #e0e0e0;\n cursor: not-allowed;\n }\n @media (max-width: 768px) {\n table, th, td {\n font-size: 14px;\n }\n .filters {\n gap: 10px;\n }\n .filters input {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>Calendari <\/h1>\n\n <div class=\"filters\">\n <div class=\"search-group\">\n <label for=\"search\">Cerca:<\/label>\n <input type=\"text\" id=\"search\" placeholder=\"Parole chiave\" onkeyup=\"applyFilters()\">\n <\/div>\n \n <div class=\"region-group\">\n <label for=\"regione\">Regione:<\/label>\n <input type=\"text\" id=\"regione\" placeholder=\"Inserisci regione\" onkeyup=\"applyFilters()\">\n <\/div>\n <\/div>\n\n <table>\n <thead>\n <tr>\n <th>Calendario<\/th>\n <th>Regione<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"calendario\">\n \n <\/tbody>\n <\/table>\n\n <div class=\"pagination\">\n <button id=\"prevPage\" onclick=\"changePage('prev')\">Pagina Precedente<\/button>\n <button id=\"nextPage\" onclick=\"changePage('next')\">Pagina Successiva<\/button>\n <\/div>\n\n <div id=\"tooltip\" class=\"tooltip\"><\/div>\n\n <script>\n let postsLoaded = [];\n let filteredPosts = [];\n let currentPage = 1;\n const postsPerPage = 30;\n\n \/\/ Funzione di decodifica HTML\n function decodeHTMLEntities(text) {\n const textArea = document.createElement('textarea');\n textArea.innerHTML = text;\n return textArea.value;\n }\n\n \/\/ Recupero dei post\n async function fetchData() {\n try {\n const response = await fetch('https:\/\/www.ciclocolor.com\/wp-json\/wp\/v2\/posts?categories=36&per_page=100&_embed');\n const postsData = await response.json();\n\n \/\/ Processa i post\n const processedPosts = postsData.map(post => {\n const title = decodeHTMLEntities(post.title.rendered);\n \n \/\/ ESTRATTORE REGIONE\n const regionPart = title.split('\u2013').pop().trim();\n const region = regionPart ? regionPart : 'Italia'; \/\/ Default a Italia\n\n return {\n ...post,\n title: title,\n region: region,\n decodedTitle: decodeHTMLEntities(post.title.rendered)\n };\n });\n\n \/\/ Aggiorna i dati\n postsLoaded = processedPosts;\n filteredPosts = [...postsLoaded];\n updateTable();\n } catch (error) {\n console.error(\"Errore durante il recupero dei dati:\", error);\n document.getElementById('calendario').innerHTML = `\n <tr>\n <td colspan=\"2\" style=\"text-align:center; color:red;\">\n Errore nel caricamento dei dati. Verifica la connessione o i permessi CORS.\n <\/td>\n <\/tr>`;\n }\n }\n\n \/\/ Aggiornamento tabella\n function updateTable() {\n const tbody = document.getElementById('calendario');\n tbody.innerHTML = '';\n\n const start = (currentPage - 1) * postsPerPage;\n const end = start + postsPerPage;\n const currentPosts = filteredPosts.slice(start, end);\n\n currentPosts.forEach(post => {\n const row = document.createElement('tr');\n \n \/\/ Colonna Calendario\n const titleCell = document.createElement('td');\n const link = document.createElement('a');\n link.href = post.link;\n link.target = '_blank';\n link.className = 'post-link';\n link.dataset.id = post.id;\n link.textContent = post.title || 'Senza titolo';\n link.style.cursor = 'pointer';\n titleCell.appendChild(link);\n\n \/\/ Colonna Regione\n const regionCell = document.createElement('td');\n regionCell.textContent = post.region;\n\n row.appendChild(titleCell);\n row.appendChild(regionCell);\n \n tbody.appendChild(row);\n });\n\n updatePaginationButtons();\n addEventListeners();\n }\n\n \/\/ Funzione di filtraggio\n function applyFilters() {\n const searchQuery = document.getElementById('search').value.trim().toUpperCase().split(\/\\s+\/);\n const regionFilter = document.getElementById('regione').value.trim().toUpperCase();\n\n filteredPosts = postsLoaded.filter(post => {\n \/\/ Controllo parole chiave\n const titleMatch = searchQuery.every(word => \n post.decodedTitle.toUpperCase().includes(word)\n );\n \n \/\/ Controllo regione\n const regionMatch = regionFilter === '' || \n (post.region && post.region.toUpperCase().includes(regionFilter));\n\n return titleMatch && regionMatch;\n });\n\n currentPage = 1;\n updateTable();\n }\n\n \/\/ Gestione anteprima\n function showTooltip(e) {\n const postId = e.target.dataset.id;\n const post = postsLoaded.find(p => p.id === parseInt(postId));\n const tooltip = document.getElementById('tooltip');\n \n let content = `<h3>${post.title}<\/h3>`;\n \n if (post._embedded && post._embedded['wp:featuredmedia'][0]) {\n const img = post._embedded['wp:featuredmedia'][0].source_url;\n content += `<img decoding=\"async\" src=\"${img}\" alt=\"Immagine\">`;\n }\n \n if (post.excerpt && post.excerpt.rendered) {\n const text = decodeHTMLEntities(post.excerpt.rendered).replace(\/<[^>]+>\/g, '').substring(0, 150) + '...';\n content += `<p>${text}<\/p>`;\n }\n\n tooltip.innerHTML = content;\n const rect = e.target.getBoundingClientRect();\n tooltip.style.top = `${rect.bottom + 10}px`;\n tooltip.style.left = `${rect.left + window.scrollX}px`;\n tooltip.style.display = 'block';\n }\n\n \/\/ Gestione eventi\n function addEventListeners() {\n const links = document.querySelectorAll('.post-link');\n links.forEach(link => {\n link.addEventListener('mouseenter', showTooltip);\n link.addEventListener('mouseleave', () => {\n document.getElementById('tooltip').style.display = 'none';\n });\n });\n }\n\n \/\/ Paginazione\n function changePage(direction) {\n if (direction === 'prev' && currentPage > 1) currentPage--;\n else if (direction === 'next' && currentPage < getTotalPages()) currentPage++;\n updateTable();\n }\n\n function getTotalPages() {\n return Math.ceil(filteredPosts.length \/ postsPerPage);\n }\n\n function updatePaginationButtons() {\n const prev = document.getElementById('prevPage');\n const next = document.getElementById('nextPage');\n \n prev.disabled = currentPage === 1;\n next.disabled = currentPage >= getTotalPages();\n }\n\n \/\/ Avvio\n document.addEventListener('DOMContentLoaded', async () => {\n await fetchData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calendari Calendari Cerca: Regione: Calendario Regione Pagina Precedente Pagina Successiva<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-154673","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/comments?post=154673"}],"version-history":[{"count":4,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673\/revisions"}],"predecessor-version":[{"id":154683,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673\/revisions\/154683"}],"wp:attachment":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/media?parent=154673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":154673,"date":"2025-03-07T21:22:01","date_gmt":"2025-03-07T20:22:01","guid":{"rendered":"https:\/\/www.ciclocolor.com\/?page_id=154673"},"modified":"2025-03-07T22:56:15","modified_gmt":"2025-03-07T21:56:15","slug":"ricerca-calendario","status":"publish","type":"page","link":"https:\/\/ciclocolor.com\/ricerca-calendario\/","title":{"rendered":"Ricerca Calendario"},"content":{"rendered":"\n\n\n\n \n \n Calendari <\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f9f9f9;\n margin: 0;\n padding: 20px;\n }\n h1 {\n text-align: center;\n color: #007BFF;\n margin-bottom: 30px;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 20px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n th, td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n }\n th {\n background-color: #000000;\n color: white;\n font-weight: 600;\n }\n tr {\n transition: all 0.3s ease;\n }\n tr:hover {\n background-color: #e1f5fe;\n transform: translateX(-2px);\n }\n .tooltip {\n position: absolute;\n z-index: 1000;\n background: white;\n border: 1px solid #ddd;\n padding: 15px;\n border-radius: 8px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n max-width: 400px;\n display: none;\n word-wrap: break-word;\n }\n .tooltip img {\n max-width: 100%;\n height: auto;\n margin: 10px 0;\n border-radius: 4px;\n }\n .tooltip h3 {\n margin: 0;\n color: #007BFF;\n }\n .tooltip p {\n margin: 10px 0 0;\n line-height: 1.5;\n color: #666;\n }\n .filters {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n }\n .filters > * {\n width: 100%;\n }\n .filters label {\n margin-bottom: 5px;\n display: block;\n }\n .filters input {\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 14px;\n }\n .pagination {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .pagination button {\n padding: 10px 20px;\n background-color: #007BFF;\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s;\n }\n .pagination button:hover {\n background-color: #0056b3;\n }\n .pagination button:disabled {\n background: #e0e0e0;\n cursor: not-allowed;\n }\n @media (max-width: 768px) {\n table, th, td {\n font-size: 14px;\n }\n .filters {\n gap: 10px;\n }\n .filters input {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>Calendari <\/h1>\n\n <div class=\"filters\">\n <div class=\"search-group\">\n <label for=\"search\">Cerca:<\/label>\n <input type=\"text\" id=\"search\" placeholder=\"Parole chiave\" onkeyup=\"applyFilters()\">\n <\/div>\n \n <div class=\"region-group\">\n <label for=\"regione\">Regione:<\/label>\n <input type=\"text\" id=\"regione\" placeholder=\"Inserisci regione\" onkeyup=\"applyFilters()\">\n <\/div>\n <\/div>\n\n <table>\n <thead>\n <tr>\n <th>Calendario<\/th>\n <th>Regione<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"calendario\">\n \n <\/tbody>\n <\/table>\n\n <div class=\"pagination\">\n <button id=\"prevPage\" onclick=\"changePage('prev')\">Pagina Precedente<\/button>\n <button id=\"nextPage\" onclick=\"changePage('next')\">Pagina Successiva<\/button>\n <\/div>\n\n <div id=\"tooltip\" class=\"tooltip\"><\/div>\n\n <script>\n let postsLoaded = [];\n let filteredPosts = [];\n let currentPage = 1;\n const postsPerPage = 30;\n\n \/\/ Funzione di decodifica HTML\n function decodeHTMLEntities(text) {\n const textArea = document.createElement('textarea');\n textArea.innerHTML = text;\n return textArea.value;\n }\n\n \/\/ Recupero dei post\n async function fetchData() {\n try {\n const response = await fetch('https:\/\/www.ciclocolor.com\/wp-json\/wp\/v2\/posts?categories=36&per_page=100&_embed');\n const postsData = await response.json();\n\n \/\/ Processa i post\n const processedPosts = postsData.map(post => {\n const title = decodeHTMLEntities(post.title.rendered);\n \n \/\/ ESTRATTORE REGIONE\n const regionPart = title.split('\u2013').pop().trim();\n const region = regionPart ? regionPart : 'Italia'; \/\/ Default a Italia\n\n return {\n ...post,\n title: title,\n region: region,\n decodedTitle: decodeHTMLEntities(post.title.rendered)\n };\n });\n\n \/\/ Aggiorna i dati\n postsLoaded = processedPosts;\n filteredPosts = [...postsLoaded];\n updateTable();\n } catch (error) {\n console.error(\"Errore durante il recupero dei dati:\", error);\n document.getElementById('calendario').innerHTML = `\n <tr>\n <td colspan=\"2\" style=\"text-align:center; color:red;\">\n Errore nel caricamento dei dati. Verifica la connessione o i permessi CORS.\n <\/td>\n <\/tr>`;\n }\n }\n\n \/\/ Aggiornamento tabella\n function updateTable() {\n const tbody = document.getElementById('calendario');\n tbody.innerHTML = '';\n\n const start = (currentPage - 1) * postsPerPage;\n const end = start + postsPerPage;\n const currentPosts = filteredPosts.slice(start, end);\n\n currentPosts.forEach(post => {\n const row = document.createElement('tr');\n \n \/\/ Colonna Calendario\n const titleCell = document.createElement('td');\n const link = document.createElement('a');\n link.href = post.link;\n link.target = '_blank';\n link.className = 'post-link';\n link.dataset.id = post.id;\n link.textContent = post.title || 'Senza titolo';\n link.style.cursor = 'pointer';\n titleCell.appendChild(link);\n\n \/\/ Colonna Regione\n const regionCell = document.createElement('td');\n regionCell.textContent = post.region;\n\n row.appendChild(titleCell);\n row.appendChild(regionCell);\n \n tbody.appendChild(row);\n });\n\n updatePaginationButtons();\n addEventListeners();\n }\n\n \/\/ Funzione di filtraggio\n function applyFilters() {\n const searchQuery = document.getElementById('search').value.trim().toUpperCase().split(\/\\s+\/);\n const regionFilter = document.getElementById('regione').value.trim().toUpperCase();\n\n filteredPosts = postsLoaded.filter(post => {\n \/\/ Controllo parole chiave\n const titleMatch = searchQuery.every(word => \n post.decodedTitle.toUpperCase().includes(word)\n );\n \n \/\/ Controllo regione\n const regionMatch = regionFilter === '' || \n (post.region && post.region.toUpperCase().includes(regionFilter));\n\n return titleMatch && regionMatch;\n });\n\n currentPage = 1;\n updateTable();\n }\n\n \/\/ Gestione anteprima\n function showTooltip(e) {\n const postId = e.target.dataset.id;\n const post = postsLoaded.find(p => p.id === parseInt(postId));\n const tooltip = document.getElementById('tooltip');\n \n let content = `<h3>${post.title}<\/h3>`;\n \n if (post._embedded && post._embedded['wp:featuredmedia'][0]) {\n const img = post._embedded['wp:featuredmedia'][0].source_url;\n content += `<img decoding=\"async\" src=\"${img}\" alt=\"Immagine\">`;\n }\n \n if (post.excerpt && post.excerpt.rendered) {\n const text = decodeHTMLEntities(post.excerpt.rendered).replace(\/<[^>]+>\/g, '').substring(0, 150) + '...';\n content += `<p>${text}<\/p>`;\n }\n\n tooltip.innerHTML = content;\n const rect = e.target.getBoundingClientRect();\n tooltip.style.top = `${rect.bottom + 10}px`;\n tooltip.style.left = `${rect.left + window.scrollX}px`;\n tooltip.style.display = 'block';\n }\n\n \/\/ Gestione eventi\n function addEventListeners() {\n const links = document.querySelectorAll('.post-link');\n links.forEach(link => {\n link.addEventListener('mouseenter', showTooltip);\n link.addEventListener('mouseleave', () => {\n document.getElementById('tooltip').style.display = 'none';\n });\n });\n }\n\n \/\/ Paginazione\n function changePage(direction) {\n if (direction === 'prev' && currentPage > 1) currentPage--;\n else if (direction === 'next' && currentPage < getTotalPages()) currentPage++;\n updateTable();\n }\n\n function getTotalPages() {\n return Math.ceil(filteredPosts.length \/ postsPerPage);\n }\n\n function updatePaginationButtons() {\n const prev = document.getElementById('prevPage');\n const next = document.getElementById('nextPage');\n \n prev.disabled = currentPage === 1;\n next.disabled = currentPage >= getTotalPages();\n }\n\n \/\/ Avvio\n document.addEventListener('DOMContentLoaded', async () => {\n await fetchData();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calendari Calendari Cerca: Regione: Calendario Regione Pagina Precedente Pagina Successiva<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-154673","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/comments?post=154673"}],"version-history":[{"count":4,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673\/revisions"}],"predecessor-version":[{"id":154683,"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/pages\/154673\/revisions\/154683"}],"wp:attachment":[{"href":"https:\/\/ciclocolor.com\/wp-json\/wp\/v2\/media?parent=154673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}