{"id":308,"date":"2025-08-16T09:52:22","date_gmt":"2025-08-16T09:52:22","guid":{"rendered":"https:\/\/sviluppo.protezionecivilecantello.it\/?page_id=308"},"modified":"2026-08-01T13:27:59","modified_gmt":"2026-08-01T13:27:59","slug":"comunicazioni-urgenti","status":"publish","type":"page","link":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/allerte-e-avvisi\/comunicazioni-urgenti\/","title":{"rendered":"Comunicazioni Urgenti"},"content":{"rendered":"<style>\np, li {<br \/>\n    font-family: \"Titillium Web\", Geneva, Tahoma, sans-serif;<br \/>\n    font-size: 18px;<br \/>\n    line-height: 1.6;<br \/>\n    color: #333;<br \/>\n}<br \/>\n<\/style>\n\n\n<!--\n  ================================================================\n  WIDGET ALLERTE DA GOOGLE SHEETS\n  ================================================================\n  ISTRUZIONI:\n  1. In WordPress, aggiungi un blocco \"HTML personalizzato\" (Custom HTML)\n     nella pagina o sezione dove vuoi mostrare le allerte.\n  2. Incolla TUTTO questo codice cosi' com'e' (CSS + HTML + JS insieme).\n  3. Se vuoi cambiare il link del foglio Google, modifica la costante\n     CSV_URL qui sotto.\n  4. Nel foglio Google, la colonna \"attiva\" deve contenere TRUE (o SI\/1)\n     per le righe che vuoi mostrare, FALSE (o NO\/0) per quelle nascoste.\n  5. La colonna \"tipologia\" determina icona e colori. Valori riconosciuti\n     di default (case-insensitive, vedi oggetto TIPOLOGIE piu' sotto):\n       - allerta \/ attenzione \/ pericolo  -> triangolo rosso (come da foto)\n       - chiusura                          -> triangolo rosso\n       - avviso                            -> triangolo arancione\n       - informazione \/ info               -> cerchio blu informativo\n       - manutenzione                      -> chiave inglese, grigio\n       - (qualsiasi altro valore)          -> stile di default neutro\n  ================================================================\n-->\n\n<style>\n  .gs-allerte-wrap {\n    max-width: 900px;\n    margin: 24px auto;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n  }\n\n  .gs-allerta-card {\n    display: flex;\n    align-items: flex-start;\n    gap: 20px;\n    border-radius: 10px;\n    padding: 20px 24px;\n    margin-bottom: 18px;\n    border: 1px solid rgba(0,0,0,0.06);\n    box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n  }\n\n  .gs-allerta-icon {\n    flex: 0 0 auto;\n    width: 54px;\n    height: 54px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .gs-allerta-icon svg { width: 100%; height: 100%; }\n\n  .gs-allerta-content { flex: 1 1 auto; min-width: 0; }\n\n  .gs-allerta-titolo {\n    font-size: 22px;\n    font-weight: 800;\n    margin: 0 0 8px 0;\n    line-height: 1.25;\n    color: #1a1a1a;\n  }\n\n  .gs-allerta-desc {\n    font-size: 15px;\n    line-height: 1.55;\n    color: #2b2b2b;\n    white-space: pre-line; \/* rispetta gli \"a capo\" scritti nel foglio *\/\n  }\n\n  .gs-allerta-desc strong { font-weight: 700; }\n\n  .gs-allerte-empty,\n  .gs-allerte-loading {\n    text-align: center;\n    color: #777;\n    padding: 20px;\n    font-size: 14px;\n  }\n\n  \/* --- Varianti colore per tipologia --- *\/\n\n  .gs-tipo-allerta   { background: #f9dd6b; border-color: #e9c94a; }\n  .gs-tipo-chiusura  { background: #f9dd6b; border-color: #e9c94a; }\n  .gs-tipo-avviso    { background: #ffe9cf; border-color: #f3c98f; }\n  .gs-tipo-info      { background: #dcecfb; border-color: #b7d6f3; }\n  .gs-tipo-manutenzione { background: #eceeef; border-color: #d6d9db; }\n  .gs-tipo-default   { background: #f1f1f1; border-color: #dfdfdf; }\n\n  @media (max-width: 600px) {\n    .gs-allerta-card { padding: 16px; gap: 14px; }\n    .gs-allerta-icon { width: 40px; height: 40px; }\n    .gs-allerta-titolo { font-size: 18px; }\n  }\n<\/style>\n\n<div id=\"gs-allerte-container\" class=\"gs-allerte-wrap\">\n  <div class=\"gs-allerte-loading\">Caricamento allerte&#8230;<\/div>\n<\/div>\n\n<script>\n(function () {\n  \/\/ ---- CONFIGURAZIONE -------------------------------------------------\n  \/\/ Punta al proxy PHP sul TUO sito (stesso dominio), creato con il file\n  \/\/ proxy-allerte-functions.php. Se il tuo sito e' es. https:\/\/tuosito.it\n  \/\/ l'endpoint sara' https:\/\/tuosito.it\/wp-json\/allerte\/v1\/csv\n  \/\/ (window.location.origin lo calcola automaticamente da solo).\n  var CSV_URL = window.location.origin + \"\/wp-json\/allerte\/v1\/csv\";\n\n  \/\/ Mappa tipologia (minuscolo) -> { classe css, icona svg }\n  var ICONE = {\n    triangolo: '<svg viewBox=\"0 0 100 90\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n      '<path d=\"M50 5 L95 82 L5 82 Z\" fill=\"none\" stroke=\"#e30613\" stroke-width=\"9\" stroke-linejoin=\"round\"\/>' +\n      '<rect x=\"45\" y=\"32\" width=\"10\" height=\"30\" rx=\"3\" fill=\"#000\"\/>' +\n      '<circle cx=\"50\" cy=\"72\" r=\"6\" fill=\"#000\"\/>' +\n      '<\/svg>',\n    info: '<svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n      '<circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"#1f6fd6\"\/>' +\n      '<rect x=\"44\" y=\"42\" width=\"12\" height=\"34\" rx=\"3\" fill=\"#fff\"\/>' +\n      '<circle cx=\"50\" cy=\"28\" r=\"7\" fill=\"#fff\"\/>' +\n      '<\/svg>',\n    chiave: '<svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">' +\n      '<path d=\"M70 15c-11 0-20 9-20 20 0 2 .2 4 .6 6L20 71v9h9l30-30.6c2 .4 4 .6 6 .6 11 0 20-9 20-20S81 15 70 15z\" fill=\"#555\"\/>' +\n      '<\/svg>'\n  };\n\n  var TIPOLOGIE = {\n    \"allerta\":       { classe: \"gs-tipo-allerta\",  icona: ICONE.triangolo },\n    \"attenzione\":    { classe: \"gs-tipo-allerta\",  icona: ICONE.triangolo },\n    \"pericolo\":      { classe: \"gs-tipo-allerta\",  icona: ICONE.triangolo },\n    \"chiusura\":      { classe: \"gs-tipo-chiusura\", icona: ICONE.triangolo },\n    \"avviso\":        { classe: \"gs-tipo-avviso\",   icona: ICONE.triangolo },\n    \"informazione\":  { classe: \"gs-tipo-info\",     icona: ICONE.info },\n    \"info\":          { classe: \"gs-tipo-info\",     icona: ICONE.info },\n    \"manutenzione\":  { classe: \"gs-tipo-manutenzione\", icona: ICONE.chiave }\n  };\n  var TIPOLOGIA_DEFAULT = { classe: \"gs-tipo-default\", icona: ICONE.info };\n\n  \/\/ ---- PARSER CSV (gestisce virgole e \"a capo\" dentro alle celle tra virgolette) ----\n  function parseCSV(text) {\n    var rows = [];\n    var row = [];\n    var field = \"\";\n    var inQuotes = false;\n\n    for (var i = 0; i < text.length; i++) {\n      var c = text[i];\n      var next = text[i + 1];\n\n      if (inQuotes) {\n        if (c === '\"' &#038;&#038; next === '\"') { field += '\"'; i++; }\n        else if (c === '\"') { inQuotes = false; }\n        else { field += c; }\n      } else {\n        if (c === '\"') { inQuotes = true; }\n        else if (c === ',') { row.push(field); field = \"\"; }\n        else if (c === '\\r') { \/* ignora *\/ }\n        else if (c === '\\n') { row.push(field); rows.push(row); row = []; field = \"\"; }\n        else { field += c; }\n      }\n    }\n    if (field.length > 0 || row.length > 0) { row.push(field); rows.push(row); }\n    return rows.filter(function (r) { return r.length > 1 || (r[0] && r[0].trim() !== \"\"); });\n  }\n\n  function isAttiva(val) {\n    if (!val) return false;\n    var v = val.trim().toLowerCase();\n    return v === \"true\" || v === \"si\" || v === \"s\u00ec\" || v === \"1\" || v === \"x\" || v === \"yes\";\n  }\n\n  function escapeHtml(str) {\n    return String(str)\n      .replace(\/&\/g, \"&amp;\")\n      .replace(\/<\/g, \"&lt;\")\n      .replace(\/>\/g, \"&gt;\");\n  }\n\n  \/\/ Converte **testo** in <strong>testo<\/strong> per permettere grassetto scritto nel foglio\n  function formatDescrizione(str) {\n    var safe = escapeHtml(str);\n    return safe.replace(\/\\*\\*(.+?)\\*\\*\/g, \"<strong>$1<\/strong>\");\n  }\n\n  function render(rows) {\n    var container = document.getElementById(\"gs-allerte-container\");\n    if (!rows.length) {\n      container.innerHTML = '<div class=\"gs-allerte-empty\">Nessuna allerta attiva al momento.<\/div>';\n      return;\n    }\n\n    var header = rows[0].map(function (h) { return h.trim().toLowerCase(); });\n    var idxTipologia = header.indexOf(\"tipologia\");\n    var idxTitolo = header.indexOf(\"titolo\");\n    var idxDescrizione = header.indexOf(\"descrizione\");\n    var idxAttiva = header.indexOf(\"attiva\");\n\n    var html = \"\";\n    var count = 0;\n\n    for (var i = 1; i < rows.length; i++) {\n      var r = rows[i];\n      if (!r || r.length < 2) continue;\n\n      var attivaVal = idxAttiva >= 0 ? r[idxAttiva] : \"\";\n      if (!isAttiva(attivaVal)) continue;\n\n      var tipologiaRaw = (idxTipologia >= 0 ? r[idxTipologia] : \"\").trim();\n      var tipologiaKey = tipologiaRaw.toLowerCase();\n      var titolo = idxTitolo >= 0 ? r[idxTitolo] : \"\";\n      var descrizione = idxDescrizione >= 0 ? r[idxDescrizione] : \"\";\n\n      var conf = TIPOLOGIE[tipologiaKey] || TIPOLOGIA_DEFAULT;\n\n      html += '<div class=\"gs-allerta-card ' + conf.classe + '\">' +\n                '<div class=\"gs-allerta-icon\">' + conf.icona + '<\/div>' +\n                '<div class=\"gs-allerta-content\">' +\n                  '<p class=\"gs-allerta-titolo\">' + escapeHtml(titolo) + '<\/p>' +\n                  '<div class=\"gs-allerta-desc\">' + formatDescrizione(descrizione) + '<\/div>' +\n                '<\/div>' +\n              '<\/div>';\n      count++;\n    }\n\n    if (count === 0) {\n      container.innerHTML = '<div class=\"gs-allerte-empty\">Nessuna allerta attiva al momento.<\/div>';\n    } else {\n      container.innerHTML = html;\n    }\n  }\n\n  function withCacheBust(url) {\n    return url + (url.indexOf(\"?\") > -1 ? \"&\" : \"?\") + \"_=\" + Date.now();\n  }\n\n  function tryFetch(url) {\n    return fetch(url, { cache: \"no-store\" }).then(function (res) {\n      if (!res.ok) throw new Error(\"HTTP \" + res.status);\n      return res.text();\n    });\n  }\n\n  \/\/ 1\u00b0 tentativo: fetch diretto al CSV pubblicato\n  tryFetch(withCacheBust(CSV_URL))\n    .then(function (text) {\n      render(parseCSV(text));\n    })\n    .catch(function (err1) {\n      console.warn(\"Fetch diretto fallito (probabile blocco CORS), provo con proxy...\", err1);\n      \/\/ 2\u00b0 tentativo: passa attraverso un proxy CORS pubblico\n      var proxyUrl = \"https:\/\/corsproxy.io\/?url=\" + encodeURIComponent(withCacheBust(CSV_URL));\n      tryFetch(proxyUrl)\n        .then(function (text) {\n          render(parseCSV(text));\n        })\n        .catch(function (err2) {\n          var container = document.getElementById(\"gs-allerte-container\");\n          container.innerHTML = '<div class=\"gs-allerte-empty\">Impossibile caricare le allerte al momento. Riprova pi\u00f9 tardi.<\/div>';\n          console.error(\"Errore widget allerte - fetch diretto:\", err1);\n          console.error(\"Errore widget allerte - fetch via proxy:\", err2);\n        });\n    });\n})();\n<\/script>\n\n\n<p><strong>Informazioni generali<\/strong><\/p>\n<p>Questa sezione raccoglie tutte le <strong>comunicazioni urgenti<\/strong> della Protezione Civile di Cantello. Qui vengono pubblicati avvisi rapidi e aggiornamenti relativi a <strong>emergenze in corso<\/strong>, <strong>criticit\u00e0 meteo<\/strong>, <strong>interventi sul territorio<\/strong> o altre situazioni che richiedono attenzione immediata da parte della popolazione.<\/p>\n<p><strong>Tipologie di comunicazioni<\/strong><\/p>\n<ul>\n<li><strong>Allerte meteo<\/strong> e aggiornamenti sui bollettini regionali.<\/li>\n<li><strong>Interruzioni viabilit\u00e0<\/strong> (chiusura strade, ponti, sottopassi).<\/li>\n<li><strong>Emergenze ambientali<\/strong> (allagamenti, frane, incendi boschivi).<\/li>\n<li><strong>Avvisi sanitari o di sicurezza pubblica<\/strong> trasmessi dal Comune o da enti competenti.<\/li>\n<li><strong>Indicazioni operative<\/strong> per i cittadini (punti di raccolta, comportamenti da seguire).<\/li>\n<\/ul>\n<p><strong>Canali di diffusione<\/strong><\/p>\n<ul>\n<li>Questa pagina del sito web ufficiale.<\/li>\n<li><strong>Pagina Facebook<\/strong> della Protezione Civile di Cantello.<\/li>\n<li>Comunicazioni tramite <strong>WhatsApp<\/strong> e messaggistica rapida.<\/li>\n<li>Avvisi pubblicati dal <strong>Comune di Cantello<\/strong>.<\/li>\n<\/ul>\n<p><strong>Cosa fare<\/strong><\/p>\n<ul>\n<li>Verifica periodicamente questa sezione per eventuali <strong>avvisi attivi<\/strong>.<\/li>\n<li>Segui sempre le <strong>indicazioni fornite<\/strong> dalle autorit\u00e0.<\/li>\n<li>In caso di emergenza, utilizza il <strong>numero H24<\/strong> della Protezione Civile di Cantello per comunicazioni urgenti.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Caricamento allerte&#8230; Informazioni generali Questa sezione raccoglie tutte le comunicazioni urgenti della Protezione Civile di Cantello.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":344,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"class_list":["post-308","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/pages\/308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":10,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/pages\/308\/revisions"}],"predecessor-version":[{"id":556,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/pages\/308\/revisions\/556"}],"up":[{"embeddable":true,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/pages\/344"}],"wp:attachment":[{"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sviluppo.protezionecivilecantello.it\/index.php\/wp-json\/wp\/v2\/tags?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}