Margine \u2014 Generatore edizione<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Source+Sans+3:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }<\/p>\n<p> :root {\n --orange: #FF8040;\n --orange-light: #FFF0E8;\n --ink: #1C1C1A;\n --ink-mid: #4A4A46;\n --ink-soft: #888880;\n --paper: #FAFAF7;\n --paper-warm: #F5F3EE;\n --rule: #D8D5CE;\n --green-ok: #2D7A4F;\n --green-bg: #EAF5EF;\n --font-display: 'Cormorant Garamond', Georgia, serif;\n --font-body: 'Source Sans 3', Helvetica, sans-serif;\n }<\/p>\n<p> body {\n background: var(--paper-warm);\n color: var(--ink);\n font-family: var(--font-body);\n font-size: 15px;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n min-height: 100vh;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 TOPBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .topbar {\n background: var(--ink);\n padding: 12px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .topbar-brand {\n display: flex;\n align-items: baseline;\n gap: 12px;\n }\n .topbar-logo {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 15px;\n color: #fff;\n }\n .topbar-logo span { color: var(--orange); }\n .topbar-divider {\n width: 1px;\n height: 14px;\n background: rgba(255,255,255,0.2);\n }\n .topbar-tool {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 16px;\n color: rgba(255,255,255,0.6);\n }\n .topbar-hint {\n font-size: 11px;\n color: rgba(255,255,255,0.3);\n letter-spacing: 0.06em;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .workspace {\n max-width: 980px;\n margin: 0 auto;\n padding: 40px 40px 60px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n align-items: start;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 PANNELLO FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .panel {\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 32px;\n }\n .panel-title {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ink-soft);\n margin-bottom: 24px;\n padding-bottom: 12px;\n border-bottom: 1px solid var(--rule);\n }<\/p>\n<p> .field { margin-bottom: 20px; }\n .field:last-of-type { margin-bottom: 0; }<\/p>\n<p> label {\n display: block;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--ink-mid);\n margin-bottom: 6px;\n }\n label .opt {\n font-weight: 300;\n text-transform: none;\n letter-spacing: 0;\n color: var(--ink-soft);\n font-size: 10px;\n }<\/p>\n<p> input[type=\"text\"],\n input[type=\"number\"],\n input[type=\"url\"],\n textarea {\n width: 100%;\n padding: 10px 13px;\n border: 1px solid var(--rule);\n background: var(--paper-warm);\n color: var(--ink);\n font-family: var(--font-body);\n font-size: 14px;\n outline: none;\n transition: border-color 0.15s, background 0.15s;\n resize: none;\n line-height: 1.5;\n }\n input[type=\"text\"]:focus,\n input[type=\"number\"]:focus,\n input[type=\"url\"]:focus,\n textarea:focus {\n border-color: var(--orange);\n background: var(--orange-light);\n }\n input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }<\/p>\n<p> .field-hint {\n font-size: 11px;\n color: var(--ink-soft);\n margin-top: 5px;\n line-height: 1.4;\n }<\/p>\n<p> .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 PANNELLO PREVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .preview-panel { position: sticky; top: 40px; }<\/p>\n<p> \/* Mini ribbon preview *\/\n .preview-ribbon {\n background: var(--ink);\n padding: 8px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 10px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n font-weight: 300;\n }\n .preview-ribbon-left { display: flex; gap: 12px; align-items: center; }\n .preview-ribbon-date { color: rgba(255,255,255,0.8); }\n .preview-ribbon-n {\n color: var(--orange);\n border-left: 1px solid rgba(255,255,255,0.2);\n padding-left: 12px;\n }\n .preview-ribbon-right { color: rgba(255,255,255,0.3); font-size: 9px; }<\/p>\n<p> \/* Mini header preview *\/\n .preview-header {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-top: none;\n padding: 16px;\n text-align: center;\n border-bottom: 2px solid var(--ink);\n }\n .preview-name {\n font-family: var(--font-display);\n font-size: 26px;\n font-weight: 400;\n color: var(--ink);\n letter-spacing: 0.04em;\n }\n .preview-tagline {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 11px;\n color: var(--ink-mid);\n margin-top: 2px;\n }\n .preview-quote {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 10px;\n color: var(--ink-soft);\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--rule);\n line-height: 1.4;\n }<\/p>\n<p> \/* Mini hero preview *\/\n .preview-hero {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-top: none;\n padding: 16px;\n }\n .preview-eyebrow {\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 6px;\n }\n .preview-title {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 300;\n line-height: 1.1;\n color: var(--ink);\n margin-bottom: 8px;\n }\n .preview-title em { font-style: italic; color: var(--orange); }\n .preview-intro {\n font-size: 12px;\n color: var(--ink-mid);\n line-height: 1.5;\n }<\/p>\n<p> \/* URL output *\/\n .url-section {\n margin-top: 20px;\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 20px;\n }\n .url-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--ink-soft);\n margin-bottom: 10px;\n }\n .url-box {\n background: var(--ink);\n padding: 12px 14px;\n font-family: monospace;\n font-size: 11px;\n color: rgba(250,250,247,0.75);\n line-height: 1.5;\n word-break: break-all;\n min-height: 48px;\n border-left: 3px solid var(--orange);\n margin-bottom: 12px;\n }\n .url-box .param-key { color: var(--orange); }\n .url-box .param-val { color: #fff; }<\/p>\n<p> .btn-row { display: flex; gap: 10px; }<\/p>\n<p> .btn {\n flex: 1;\n padding: 11px 16px;\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n .btn-primary {\n background: var(--orange);\n color: #fff;\n }\n .btn-primary:hover { background: #e56a2a; }\n .btn-secondary {\n background: transparent;\n color: var(--ink-mid);\n border: 1px solid var(--rule);\n }\n .btn-secondary:hover { background: var(--paper-warm); color: var(--ink); }<\/p>\n<p> .copy-feedback {\n font-size: 11px;\n color: var(--green-ok);\n background: var(--green-bg);\n padding: 7px 12px;\n margin-top: 8px;\n display: none;\n align-items: center;\n gap: 6px;\n }\n .copy-feedback.visible { display: flex; }<\/p>\n<p> \/* Sezione link storici *\/\n .history-section {\n grid-column: 1 \/ -1;\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 28px 32px;\n }\n .history-title {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ink-soft);\n padding-bottom: 14px;\n border-bottom: 1px solid var(--rule);\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .history-clear {\n font-size: 10px;\n color: var(--ink-soft);\n cursor: pointer;\n background: none;\n border: none;\n font-family: var(--font-body);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: color 0.15s;\n }\n .history-clear:hover { color: var(--orange); }<\/p>\n<p> .history-empty {\n font-size: 13px;\n color: var(--ink-soft);\n font-style: italic;\n padding: 8px 0;\n }\n .history-list { list-style: none; }\n .history-item {\n display: grid;\n grid-template-columns: 40px 1fr auto;\n gap: 16px;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid var(--rule);\n }\n .history-item:last-child { border-bottom: none; }\n .history-n {\n font-family: var(--font-display);\n font-size: 22px;\n color: var(--orange);\n font-weight: 300;\n line-height: 1;\n text-align: center;\n }\n .history-info {}\n .history-info-title {\n font-weight: 600;\n font-size: 14px;\n color: var(--ink);\n margin-bottom: 2px;\n }\n .history-info-meta {\n font-size: 11px;\n color: var(--ink-soft);\n }\n .history-actions { display: flex; gap: 8px; }\n .history-btn {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n background: none;\n border: 1px solid var(--rule);\n color: var(--ink-mid);\n padding: 5px 10px;\n cursor: pointer;\n font-family: var(--font-body);\n transition: color 0.15s, border-color 0.15s;\n }\n .history-btn:hover { color: var(--orange); border-color: var(--orange); }<\/p>\n<p> @media (max-width: 700px) {\n .workspace { grid-template-columns: 1fr; padding: 24px 20px 40px; }\n .preview-panel { position: static; }\n .topbar { padding: 12px 20px; }\n .history-section { grid-column: 1; }\n .field-row { grid-template-columns: 1fr; }\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"topbar\">\n<div class=\"topbar-brand\">\n<div class=\"topbar-logo\">Cover<span>fop<\/span><\/div>\n<div class=\"topbar-divider\"><\/div>\n<div class=\"topbar-tool\">Margine \u2014 generatore edizione<\/div>\n<\/p><\/div>\n<div class=\"topbar-hint\">Uso interno \u00b7 Co.Ver.Fo.P.<\/div>\n<\/div>\n<div class=\"workspace\">\n<p> <\/p>\n<div class=\"panel\">\n<div class=\"panel-title\">Dati dell’edizione<\/div>\n<div class=\"field field-row\">\n<div>\n <label for=\"f-n\">Numero edizione<\/label><br \/>\n <input type=\"number\" id=\"f-n\" placeholder=\"es. 12\" min=\"1\">\n <\/div>\n<div>\n <label for=\"f-mese\">Mese <span class=\"opt\">(lascia vuoto = automatico)<\/span><\/label><br \/>\n <input type=\"text\" id=\"f-mese\" placeholder=\"es. Maggio 2026\">\n <\/div>\n<\/p><\/div>\n<div class=\"field\">\n <label for=\"f-titolo\">Titolo dell’edizione<\/label><br \/>\n <input type=\"text\" id=\"f-titolo\" placeholder=\"es. Lavoro che cambia\"><\/p>\n<div class=\"field-hint\">La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero.<\/div>\n<\/p><\/div>\n<div class=\"field\">\n <label for=\"f-sommario\">Testo introduttivo <span class=\"opt\">(sommario hero)<\/span><\/label><br \/>\n <textarea id=\"f-sommario\" rows=\"4\" placeholder=\"Breve presentazione dell'edizione, 2-3 righe.\"><\/textarea>\n <\/div>\n<div class=\"field\" style=\"margin-top:4px;\">\n <label for=\"f-base\">URL base della landing page<\/label><br \/>\n <input type=\"url\" id=\"f-base\" value=\"https:\/\/www.coverfop.it\/index.php\/margine\/\" placeholder=\"https:\/\/www.coverfop.it\/margine\/\"><\/p>\n<div class=\"field-hint\">L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"preview-panel\">\n<p> <\/p>\n<div class=\"preview-ribbon\">\n<div class=\"preview-ribbon-left\">\n <span class=\"preview-ribbon-date\" id=\"pv-date\">\u2014<\/span><br \/>\n <span class=\"preview-ribbon-n\" id=\"pv-n\">\u2014<\/span>\n <\/div>\n<div class=\"preview-ribbon-right\">Co.Ver.Fo.P. \u00b7 Vercelli<\/div>\n<\/p><\/div>\n<div class=\"preview-header\">\n<div class=\"preview-name\">Margine<\/div>\n<div class=\"preview-tagline\">La newsletter di Coverfop<\/div>\n<div class=\"preview-quote\">Non si capisce una cosa finch\u00e9 non la si \u00e8 anche vissuta.<\/div>\n<\/p><\/div>\n<div class=\"preview-hero\">\n<div class=\"preview-eyebrow\" id=\"pv-eyebrow\">Edizione del mese<\/div>\n<div class=\"preview-title\" id=\"pv-title\"><em>Il titolo apparir\u00e0 qui<\/em><\/div>\n<div class=\"preview-intro\" id=\"pv-intro\">Il sommario apparir\u00e0 qui.<\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"url-section\">\n<div class=\"url-label\">Link generato<\/div>\n<div class=\"url-box\" id=\"url-display\">\n <span style=\"color:rgba(250,250,247,0.3);\">Compila i campi per generare il link.<\/span>\n <\/div>\n<div class=\"btn-row\">\n <button class=\"btn btn-primary\" onclick=\"copyURL()\">Copia link<\/button><br \/>\n <button class=\"btn btn-secondary\" onclick=\"openPreview()\">Apri preview<\/button><br \/>\n <button class=\"btn btn-secondary\" onclick=\"saveEdizione()\">Salva<\/button>\n <\/div>\n<div class=\"copy-feedback\" id=\"copy-feedback\">\n \u2713 Link copiato negli appunti\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"history-section\">\n<div class=\"history-title\">\n <span>Edizioni salvate<\/span><br \/>\n <button class=\"history-clear\" onclick=\"clearHistory()\">Cancella tutto<\/button>\n <\/div>\n<div id=\"history-container\">\n<div class=\"history-empty\">Nessuna edizione salvata. Usa il pulsante “Salva” dopo aver generato un link.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n const GIORNI = ['domenica','luned\u00ec','marted\u00ec','mercoled\u00ec','gioved\u00ec','venerd\u00ec','sabato'];\n const MESI_IT = ['gennaio','febbraio','marzo','aprile','maggio','giugno',\n 'luglio','agosto','settembre','ottobre','novembre','dicembre'];<\/p>\n<p> function capFirst(s) { return s.charAt(0).toUpperCase() + s.slice(1); }<\/p>\n<p> function formatDateIT(d) {\n return `${capFirst(GIORNI[d.getDay()])} ${d.getDate()} ${MESI_IT[d.getMonth()]} ${d.getFullYear()}`;\n }<\/p>\n<p> \/\/ \u2500\u2500 Ribbon data\n const oggi = new Date();\n document.getElementById('pv-date').textContent = formatDateIT(oggi).toUpperCase();<\/p>\n<p> \/\/ \u2500\u2500 Genera URL\n let currentURL = '';<\/p>\n<p> function buildURL() {\n const n = document.getElementById('f-n').value.trim();\n const mese = document.getElementById('f-mese').value.trim();\n const titolo = document.getElementById('f-titolo').value.trim();\n const sommario = document.getElementById('f-sommario').value.trim();\n let base = document.getElementById('f-base').value.trim();<\/p>\n<p> if (!base) base = 'https:\/\/www.coverfop.it\/margine\/';\n if (!base.endsWith('\/') && !base.includes('?')) base += '\/';<\/p>\n<p> const params = new URLSearchParams();\n if (n) params.set('n', n);\n if (titolo) params.set('titolo', titolo);\n if (sommario) params.set('sommario', sommario);\n if (mese) params.set('mese', mese);<\/p>\n<p> currentURL = params.toString() ? `${base}?${params.toString()}` : base;<\/p>\n<p> \/\/ Aggiorna display URL con evidenziazione\n const urlDisplay = document.getElementById('url-display');\n if (params.toString()) {\n let html = `<span style=\"color:rgba(250,250,247,0.5)\">${escHTML(base)}?<\/span>`;\n for (const [k, v] of params.entries()) {\n html += `<span class=\"param-key\">${escHTML(k)}<\/span>=<span class=\"param-val\">${escHTML(encodeURIComponent(v))}<\/span>&`;\n }\n html = html.replace(\/&$\/, '');\n urlDisplay.innerHTML = html;\n } else {\n urlDisplay.innerHTML = `<span style=\"color:rgba(250,250,247,0.5)\">${escHTML(base)}<\/span>`;\n }<\/p>\n<p> \/\/ Aggiorna preview\n updatePreview(n, mese, titolo, sommario);\n }<\/p>\n<p> function escHTML(s) {\n return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\n }<\/p>\n<p> function updatePreview(n, mese, titolo, sommario) {\n \/\/ Ribbon\n document.getElementById('pv-n').textContent = n ? `N. ${n}` : '\u2014';<\/p>\n<p> \/\/ Eyebrow\n let eyebrow;\n if (mese) {\n eyebrow = `Edizione di ${mese}`;\n } else {\n eyebrow = `Edizione di ${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`;\n }\n document.getElementById('pv-eyebrow').textContent = eyebrow;<\/p>\n<p> \/\/ Titolo hero\n const titleEl = document.getElementById('pv-title');\n if (titolo) {\n const parole = titolo.split(' ');\n const met\u00e0 = Math.ceil(parole.length \/ 2);\n const prima = parole.slice(0, met\u00e0).join(' ');\n const seconda = parole.slice(met\u00e0).join(' ');\n titleEl.innerHTML = seconda\n ? `${escHTML(prima)}<br \/><em>${escHTML(seconda)}<\/em>`\n : `<em>${escHTML(prima)}<\/em>`;\n } else {\n titleEl.innerHTML = '<em>Il titolo apparir\u00e0 qui<\/em>';\n }<\/p>\n<p> \/\/ Sommario\n const introEl = document.getElementById('pv-intro');\n introEl.textContent = sommario || 'Il sommario apparir\u00e0 qui.';\n }<\/p>\n<p> \/\/ \u2500\u2500 Listeners in tempo reale\n ['f-n','f-mese','f-titolo','f-sommario','f-base'].forEach(id => {\n document.getElementById(id).addEventListener('input', buildURL);\n });<\/p>\n<p> \/\/ \u2500\u2500 Copia URL\n function copyURL() {\n if (!currentURL) return;\n navigator.clipboard.writeText(currentURL).then(() => {\n const fb = document.getElementById('copy-feedback');\n fb.classList.add('visible');\n setTimeout(() => fb.classList.remove('visible'), 2500);\n });\n }<\/p>\n<p> \/\/ \u2500\u2500 Apri preview\n function openPreview() {\n if (!currentURL) return;\n window.open(currentURL, '_blank');\n }<\/p>\n<p> \/\/ \u2500\u2500 Salva edizione nello storico (localStorage)\n function saveEdizione() {\n const n = document.getElementById('f-n').value.trim();\n const mese = document.getElementById('f-mese').value.trim();\n const titolo = document.getElementById('f-titolo').value.trim();\n if (!n && !titolo) {\n alert('Inserisci almeno il numero edizione o il titolo prima di salvare.');\n return;\n }\n const history = loadHistory();\n const entry = {\n id: Date.now(),\n n: n || '\u2014',\n mese: mese || `${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`,\n titolo: titolo || '(senza titolo)',\n url: currentURL,\n salvato: new Date().toLocaleDateString('it-IT')\n };\n history.unshift(entry);\n localStorage.setItem('margine_history', JSON.stringify(history));\n renderHistory();\n }<\/p>\n<p> \/\/ \u2500\u2500 Carica storico\n function loadHistory() {\n try {\n return JSON.parse(localStorage.getItem('margine_history') || '[]');\n } catch { return []; }\n }<\/p>\n<p> \/\/ \u2500\u2500 Render storico\n function renderHistory() {\n const history = loadHistory();\n const container = document.getElementById('history-container');\n if (!history.length) {\n container.innerHTML = '<\/p>\n<div class=\"history-empty\">Nessuna edizione salvata. Usa il pulsante \"Salva\" dopo aver generato un link.<\/div>\n<p>';\n return;\n }\n const ul = document.createElement('ul');\n ul.className = 'history-list';\n history.forEach(entry => {\n const li = document.createElement('li');\n li.className = 'history-item';\n li.innerHTML = `<\/p>\n<div class=\"history-n\">${escHTML(entry.n)}<\/div>\n<div class=\"history-info\">\n<div class=\"history-info-title\">${escHTML(entry.titolo)}<\/div>\n<div class=\"history-info-meta\">${escHTML(entry.mese)} \u00b7 Salvato il ${escHTML(entry.salvato)}<\/div>\n<\/p><\/div>\n<div class=\"history-actions\">\n <button class=\"history-btn\" onclick=\"copyHistoryURL('${escHTML(entry.url)}')\">Copia link<\/button>\n <button class=\"history-btn\" onclick=\"loadIntoForm(${entry.id})\">Carica<\/button>\n <button class=\"history-btn\" onclick=\"deleteEntry(${entry.id})\">Elimina<\/button>\n <\/div>\n<p>`;\n ul.appendChild(li);\n });\n container.innerHTML = '';\n container.appendChild(ul);\n }<\/p>\n<p> function copyHistoryURL(url) {\n navigator.clipboard.writeText(url).then(() => alert('Link copiato: ' + url));\n }<\/p>\n<p> function loadIntoForm(id) {\n const history = loadHistory();\n const entry = history.find(e => e.id === id);\n if (!entry) return;\n const url = new URL(entry.url.startsWith('http') ? entry.url : 'https:\/\/placeholder.it\/' + entry.url);\n document.getElementById('f-n').value = url.searchParams.get('n') || '';\n document.getElementById('f-mese').value = url.searchParams.get('mese') || '';\n document.getElementById('f-titolo').value = url.searchParams.get('titolo') || '';\n document.getElementById('f-sommario').value = url.searchParams.get('sommario') || '';\n document.getElementById('f-base').value = url.origin + url.pathname;\n buildURL();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }<\/p>\n<p> function deleteEntry(id) {\n let history = loadHistory();\n history = history.filter(e => e.id !== id);\n localStorage.setItem('margine_history', JSON.stringify(history));\n renderHistory();\n }<\/p>\n<p> function clearHistory() {\n if (!confirm('Cancellare tutto lo storico delle edizioni?')) return;\n localStorage.removeItem('margine_history');\n renderHistory();\n }<\/p>\n<p> \/\/ \u2500\u2500 Init\n buildURL();\n renderHistory();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\\\"panel\\\">\\n <\/p>\n<div class=\\\"panel-title\\\">Dati dell’edizione<\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field field-row\\\">\\n <\/p>\n<div>\\n <label for=\\\"f-n\\\">Numero edizione<\/label>\\n <input type=\\\"number\\\" id=\\\"f-n\\\" placeholder=\\\"es. 12\\\" min=\\\"1\\\">\\n <\/div>\n<p>\\n <\/p>\n<div>\\n <label for=\\\"f-mese\\\">Mese <span class=\\\"opt\\\">(lascia vuoto = automatico)<\/span><\/label>\\n <input type=\\\"text\\\" id=\\\"f-mese\\\" placeholder=\\\"es. Maggio 2026\\\">\\n <\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\">\\n <label for=\\\"f-titolo\\\">Titolo dell’edizione<\/label>\\n <input type=\\\"text\\\" id=\\\"f-titolo\\\" placeholder=\\\"es. Lavoro che cambia\\\">\\n <\/p>\n<div class=\\\"field-hint\\\">La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\">\\n <label for=\\\"f-sommario\\\">Testo introduttivo <span class=\\\"opt\\\">(sommario hero)<\/span><\/label>\\n <textarea id=\\\"f-sommario\\\" rows=\\\"4\\\" placeholder=\\\"Breve presentazione dell'edizione, 2-3 righe.\\\"><\/textarea>\\n <\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\" style=\\\"margin-top:4px;\\\">\\n <label for=\\\"f-base\\\">URL base della landing page<\/label>\\n <input type=\\\"url\\\" id=\\\"f-base\\\" value=\\\"https:\/\/www.coverfop.it\/index.php\/margine\/\\\" placeholder=\\\"https:\/\/www.coverfop.it\/margine\/\\\">\\n <\/p>\n<div class=\\\"field-hint\\\">L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"preview-panel\\\">\\n\\n \\n <\/p>\n<div class=\\\"preview-ribbon\\\">\\n <\/p>\n<div class=\\\"preview-ribbon-left\\\">\\n <span class=\\\"preview-ribbon-date\\\" id=\\\"pv-date\\\">\u2014<\/span>\\n <span class=\\\"preview-ribbon-n\\\" id=\\\"pv-n\\\">\u2014<\/span>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-ribbon-right\\\">Co.Ver.Fo.P. \u00b7 Vercelli<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-header\\\">\\n <\/p>\n<div class=\\\"preview-name\\\">Margine<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-tagline\\\">La newsletter di Coverfop<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-quote\\\">Non si capisce una cosa finch\u00e9 non la si \u00e8 anche vissuta.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-hero\\\">\\n <\/p>\n<div class=\\\"preview-eyebrow\\\" id=\\\"pv-eyebrow\\\">Edizione del mese<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-title\\\" id=\\\"pv-title\\\"><em>Il titolo apparir\u00e0 qui<\/em><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-intro\\\" id=\\\"pv-intro\\\">Il sommario apparir\u00e0 qui.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"url-section\\\">\\n <\/p>\n<div class=\\\"url-label\\\">Link generato<\/div>\n<p>\\n <\/p>\n<div class=\\\"url-box\\\" id=\\\"url-display\\\">\\n <span style=\\\"color:rgba(250,250,247,0.3);\\\">Compila i campi per generare il link.<\/span>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"btn-row\\\">\\n <button class=\\\"btn btn-primary\\\" onclick=\\\"copyURL()\\\">Copia link<\/button>\\n <button class=\\\"btn btn-secondary\\\" onclick=\\\"openPreview()\\\">Apri preview<\/button>\\n <button class=\\\"btn btn-secondary\\\" onclick=\\\"saveEdizione()\\\">Salva<\/button>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"copy-feedback\\\" id=\\\"copy-feedback\\\">\\n \u2713 Link copiato negli appunti\\n <\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"history-section\\\">\\n <\/p>\n<div class=\\\"history-title\\\">\\n <span>Edizioni salvate<\/span>\\n <button class=\\\"history-clear\\\" onclick=\\\"clearHistory()\\\">Cancella tutto<\/button>\\n <\/div>\n<p>\\n <\/p>\n<div id=\\\"history-container\\\">\\n <\/p>\n<div class=\\\"history-empty\\\">Nessuna edizione salvata. Usa il pulsante \\”Salva\\” dopo aver generato un link.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n<\/p><\/div>\n<p>\\n\\n<script>\\n const GIORNI = ['domenica','luned\u00ec','marted\u00ec','mercoled\u00ec','gioved\u00ec','venerd\u00ec','sabato'];\\n const MESI_IT = ['gennaio','febbraio','marzo','aprile','maggio','giugno',\\n 'luglio','agosto','settembre','ottobre','novembre','dicembre'];\\n\\n function capFirst(s) { return s.charAt(0).toUpperCase() + s.slice(1); }\\n\\n function formatDateIT(d) {\\n return `${capFirst(GIORNI[d.getDay()])} ${d.getDate()} ${MESI_IT[d.getMonth()]} ${d.getFullYear()}`;\\n }\\n\\n \/\/ \u2500\u2500 Ribbon data\\n const oggi = new Date();\\n document.getElementById('pv-date').textContent = formatDateIT(oggi).toUpperCase();\\n\\n \/\/ \u2500\u2500 Genera URL\\n let currentURL = '';\\n\\n function buildURL() {\\n const n = document.getElementById('f-n').value.trim();\\n const mese = document.getElementById('f-mese').value.trim();\\n const titolo = document.getElementById('f-titolo').value.trim();\\n const sommario = document.getElementById('f-sommario').value.trim();\\n let base = document.getElementById('f-base').value.trim();\\n\\n if (!base) base = 'https:\/\/www.coverfop.it\/margine\/';\\n if (!base.endsWith('\/') && !base.includes('?')) base += '\/';\\n\\n const params = new URLSearchParams();\\n if (n) params.set('n', n);\\n if (titolo) params.set('titolo', titolo);\\n if (sommario) params.set('sommario', sommario);\\n if (mese) params.set('mese', mese);\\n\\n currentURL = params.toString() ? `${base}?${params.toString()}` : base;\\n\\n \/\/ Aggiorna display URL con evidenziazione\\n const urlDisplay = document.getElementById('url-display');\\n if (params.toString()) {\\n let html = `<span style=\\\"color:rgba(250,250,247,0.5)\\\">${escHTML(base)}?<\/span>`;\\n for (const [k, v] of params.entries()) {\\n html += `<span class=\\\"param-key\\\">${escHTML(k)}<\/span>=<span class=\\\"param-val\\\">${escHTML(encodeURIComponent(v))}<\/span>&`;\\n }\\n html = html.replace(\/&$\/, '');\\n urlDisplay.innerHTML = html;\\n } else {\\n urlDisplay.innerHTML = `<span style=\\\"color:rgba(250,250,247,0.5)\\\">${escHTML(base)}<\/span>`;\\n }\\n\\n \/\/ Aggiorna preview\\n updatePreview(n, mese, titolo, sommario);\\n }\\n\\n function escHTML(s) {\\n return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\\n }\\n\\n function updatePreview(n, mese, titolo, sommario) {\\n \/\/ Ribbon\\n document.getElementById('pv-n').textContent = n ? `N. ${n}` : '\u2014';\\n\\n \/\/ Eyebrow\\n let eyebrow;\\n if (mese) {\\n eyebrow = `Edizione di ${mese}`;\\n } else {\\n eyebrow = `Edizione di ${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`;\\n }\\n document.getElementById('pv-eyebrow').textContent = eyebrow;\\n\\n \/\/ Titolo hero\\n const titleEl = document.getElementById('pv-title');\\n if (titolo) {\\n const parole = titolo.split(' ');\\n const met\u00e0 = Math.ceil(parole.length \/ 2);\\n const prima = parole.slice(0, met\u00e0).join(' ');\\n const seconda = parole.slice(met\u00e0).join(' ');\\n titleEl.innerHTML = seconda\\n ? `${escHTML(prima)}<br \/><em>${escHTML(seconda)}<\/em>`\\n : `<em>${escHTML(prima)}<\/em>`;\\n } else {\\n titleEl.innerHTML = '<em>Il titolo apparir\u00e0 qui<\/em>';\\n }\\n\\n \/\/ Sommario\\n const introEl = document.getElementById('pv-intro');\\n introEl.textContent = sommario || 'Il sommario apparir\u00e0 qui.';\\n }\\n\\n \/\/ \u2500\u2500 Listeners in tempo reale\\n ['f-n','f-mese','f-titolo','f-sommario','f-base'].forEach(id => {\\n document.getElementById(id).addEventListener('input', buildURL);\\n });\\n\\n \/\/ \u2500\u2500 Copia URL\\n function copyURL() {\\n if (!currentURL) return;\\n navigator.clipboard.writeText(currentURL).then(() => {\\n const fb = document.getElementById('copy-feedback');\\n fb.classList.add('visible');\\n setTimeout(() => fb.classList.remove('visible'), 2500);\\n });\\n }\\n\\n \/\/ \u2500\u2500 Apri preview\\n function openPreview() {\\n if (!currentURL) return;\\n window.open(currentURL, '_blank');\\n }\\n\\n \/\/ \u2500\u2500 Salva edizione nello storico (localStorage)\\n function saveEdizione() {\\n const n = document.getElementById('f-n').value.trim();\\n const mese = document.getElementById('f-mese').value.trim();\\n const titolo = document.getElementById('f-titolo').value.trim();\\n if (!n && !titolo) {\\n alert('Inserisci almeno il numero edizione o il titolo prima di salvare.');\\n return;\\n }\\n const history = loadHistory();\\n const entry = {\\n id: Date.now(),\\n n: n || '\u2014',\\n mese: mese || `${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`,\\n titolo: titolo || '(senza titolo)',\\n url: currentURL,\\n salvato: new Date().toLocaleDateString('it-IT')\\n };\\n history.unshift(entry);\\n localStorage.setItem('margine_history', JSON.stringify(history));\\n renderHistory();\\n }\\n\\n \/\/ \u2500\u2500 Carica storico\\n function loadHistory() {\\n try {\\n return JSON.parse(localStorage.getItem('margine_history') || '[]');\\n } catch { return []; }\\n }\\n\\n \/\/ \u2500\u2500 Render storico\\n function renderHistory() {\\n const history = loadHistory();\\n const container = document.getElementById('history-container');\\n if (!history.length) {\\n container.innerHTML = '<\/p>\n<div class=\\\"history-empty\\\">Nessuna edizione salvata. Usa il pulsante \\\"Salva\\\" dopo aver generato un link.<\/div>\n<p>';\\n return;\\n }\\n const ul = document.createElement('ul');\\n ul.className = 'history-list';\\n history.forEach(entry => {\\n const li = document.createElement('li');\\n li.className = 'history-item';\\n li.innerHTML = `\\n <\/p>\n<div class=\\\"history-n\\\">${escHTML(entry.n)}<\/div>\n<p>\\n <\/p>\n<div class=\\\"history-info\\\">\\n <\/p>\n<div class=\\\"history-info-title\\\">${escHTML(entry.titolo)}<\/div>\n<p>\\n <\/p>\n<div class=\\\"history-info-meta\\\">${escHTML(entry.mese)} \u00b7 Salvato il ${escHTML(entry.salvato)}<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"history-actions\\\">\\n <button class=\\\"history-btn\\\" onclick=\\\"copyHistoryURL('${escHTML(entry.url)}')\\\">Copia link<\/button>\\n <button class=\\\"history-btn\\\" onclick=\\\"loadIntoForm(${entry.id})\\\">Carica<\/button>\\n <button class=\\\"history-btn\\\" onclick=\\\"deleteEntry(${entry.id})\\\">Elimina<\/button>\\n <\/div>\n<p>`;\\n ul.appendChild(li);\\n });\\n container.innerHTML = '';\\n container.appendChild(ul);\\n }\\n\\n function copyHistoryURL(url) {\\n navigator.clipboard.writeText(url).then(() => alert('Link copiato: ' + url));\\n }\\n\\n function loadIntoForm(id) {\\n const history = loadHistory();\\n const entry = history.find(e => e.id === id);\\n if (!entry) return;\\n const url = new URL(entry.url.startsWith('http') ? entry.url : 'https:\/\/placeholder.it\/' + entry.url);\\n document.getElementById('f-n').value = url.searchParams.get('n') || '';\\n document.getElementById('f-mese').value = url.searchParams.get('mese') || '';\\n document.getElementById('f-titolo').value = url.searchParams.get('titolo') || '';\\n document.getElementById('f-sommario').value = url.searchParams.get('sommario') || '';\\n document.getElementById('f-base').value = url.origin + url.pathname;\\n buildURL();\\n window.scrollTo({ top: 0, behavior: 'smooth' });\\n }\\n\\n function deleteEntry(id) {\\n let history = loadHistory();\\n history = history.filter(e => e.id !== id);\\n localStorage.setItem('margine_history', JSON.stringify(history));\\n renderHistory();\\n }\\n\\n function clearHistory() {\\n if (!confirm('Cancellare tutto lo storico delle edizioni?')) return;\\n localStorage.removeItem('margine_history');\\n renderHistory();\\n }\\n\\n \/\/ \u2500\u2500 Init\\n buildURL();\\n renderHistory();\\n<\/script>\\n<\/body>\\n<\/html>\\n”}}]}]}]}],”version”:”5.0.32″} –><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Margine \u2014 Generatore edizione Coverfop Margine \u2014 generatore edizione Uso interno \u00b7 Co.Ver.Fo.P. Dati dell’edizione Numero edizione Mese (lascia vuoto = automatico) Titolo dell’edizione La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero. Testo introduttivo (sommario hero) URL base della landing page L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito. \u2014 \u2014 Co.Ver.Fo.P. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-15328","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/comments?post=15328"}],"version-history":[{"count":2,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328\/revisions"}],"predecessor-version":[{"id":15330,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328\/revisions\/15330"}],"wp:attachment":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/media?parent=15328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n
\n
\nMargine \u2014 Generatore edizione<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Source+Sans+3:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }<\/p>\n<p> :root {\n --orange: #FF8040;\n --orange-light: #FFF0E8;\n --ink: #1C1C1A;\n --ink-mid: #4A4A46;\n --ink-soft: #888880;\n --paper: #FAFAF7;\n --paper-warm: #F5F3EE;\n --rule: #D8D5CE;\n --green-ok: #2D7A4F;\n --green-bg: #EAF5EF;\n --font-display: 'Cormorant Garamond', Georgia, serif;\n --font-body: 'Source Sans 3', Helvetica, sans-serif;\n }<\/p>\n<p> body {\n background: var(--paper-warm);\n color: var(--ink);\n font-family: var(--font-body);\n font-size: 15px;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n min-height: 100vh;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 TOPBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .topbar {\n background: var(--ink);\n padding: 12px 40px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .topbar-brand {\n display: flex;\n align-items: baseline;\n gap: 12px;\n }\n .topbar-logo {\n font-family: var(--font-body);\n font-weight: 600;\n font-size: 15px;\n color: #fff;\n }\n .topbar-logo span { color: var(--orange); }\n .topbar-divider {\n width: 1px;\n height: 14px;\n background: rgba(255,255,255,0.2);\n }\n .topbar-tool {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 16px;\n color: rgba(255,255,255,0.6);\n }\n .topbar-hint {\n font-size: 11px;\n color: rgba(255,255,255,0.3);\n letter-spacing: 0.06em;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .workspace {\n max-width: 980px;\n margin: 0 auto;\n padding: 40px 40px 60px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n align-items: start;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 PANNELLO FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .panel {\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 32px;\n }\n .panel-title {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ink-soft);\n margin-bottom: 24px;\n padding-bottom: 12px;\n border-bottom: 1px solid var(--rule);\n }<\/p>\n<p> .field { margin-bottom: 20px; }\n .field:last-of-type { margin-bottom: 0; }<\/p>\n<p> label {\n display: block;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--ink-mid);\n margin-bottom: 6px;\n }\n label .opt {\n font-weight: 300;\n text-transform: none;\n letter-spacing: 0;\n color: var(--ink-soft);\n font-size: 10px;\n }<\/p>\n<p> input[type=\"text\"],\n input[type=\"number\"],\n input[type=\"url\"],\n textarea {\n width: 100%;\n padding: 10px 13px;\n border: 1px solid var(--rule);\n background: var(--paper-warm);\n color: var(--ink);\n font-family: var(--font-body);\n font-size: 14px;\n outline: none;\n transition: border-color 0.15s, background 0.15s;\n resize: none;\n line-height: 1.5;\n }\n input[type=\"text\"]:focus,\n input[type=\"number\"]:focus,\n input[type=\"url\"]:focus,\n textarea:focus {\n border-color: var(--orange);\n background: var(--orange-light);\n }\n input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }<\/p>\n<p> .field-hint {\n font-size: 11px;\n color: var(--ink-soft);\n margin-top: 5px;\n line-height: 1.4;\n }<\/p>\n<p> .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }<\/p>\n<p> \/* \u2500\u2500\u2500 PANNELLO PREVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .preview-panel { position: sticky; top: 40px; }<\/p>\n<p> \/* Mini ribbon preview *\/\n .preview-ribbon {\n background: var(--ink);\n padding: 8px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 10px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n font-weight: 300;\n }\n .preview-ribbon-left { display: flex; gap: 12px; align-items: center; }\n .preview-ribbon-date { color: rgba(255,255,255,0.8); }\n .preview-ribbon-n {\n color: var(--orange);\n border-left: 1px solid rgba(255,255,255,0.2);\n padding-left: 12px;\n }\n .preview-ribbon-right { color: rgba(255,255,255,0.3); font-size: 9px; }<\/p>\n<p> \/* Mini header preview *\/\n .preview-header {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-top: none;\n padding: 16px;\n text-align: center;\n border-bottom: 2px solid var(--ink);\n }\n .preview-name {\n font-family: var(--font-display);\n font-size: 26px;\n font-weight: 400;\n color: var(--ink);\n letter-spacing: 0.04em;\n }\n .preview-tagline {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 11px;\n color: var(--ink-mid);\n margin-top: 2px;\n }\n .preview-quote {\n font-family: var(--font-display);\n font-style: italic;\n font-size: 10px;\n color: var(--ink-soft);\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--rule);\n line-height: 1.4;\n }<\/p>\n<p> \/* Mini hero preview *\/\n .preview-hero {\n background: var(--paper);\n border: 1px solid var(--rule);\n border-top: none;\n padding: 16px;\n }\n .preview-eyebrow {\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 6px;\n }\n .preview-title {\n font-family: var(--font-display);\n font-size: 22px;\n font-weight: 300;\n line-height: 1.1;\n color: var(--ink);\n margin-bottom: 8px;\n }\n .preview-title em { font-style: italic; color: var(--orange); }\n .preview-intro {\n font-size: 12px;\n color: var(--ink-mid);\n line-height: 1.5;\n }<\/p>\n<p> \/* URL output *\/\n .url-section {\n margin-top: 20px;\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 20px;\n }\n .url-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--ink-soft);\n margin-bottom: 10px;\n }\n .url-box {\n background: var(--ink);\n padding: 12px 14px;\n font-family: monospace;\n font-size: 11px;\n color: rgba(250,250,247,0.75);\n line-height: 1.5;\n word-break: break-all;\n min-height: 48px;\n border-left: 3px solid var(--orange);\n margin-bottom: 12px;\n }\n .url-box .param-key { color: var(--orange); }\n .url-box .param-val { color: #fff; }<\/p>\n<p> .btn-row { display: flex; gap: 10px; }<\/p>\n<p> .btn {\n flex: 1;\n padding: 11px 16px;\n font-family: var(--font-body);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n .btn-primary {\n background: var(--orange);\n color: #fff;\n }\n .btn-primary:hover { background: #e56a2a; }\n .btn-secondary {\n background: transparent;\n color: var(--ink-mid);\n border: 1px solid var(--rule);\n }\n .btn-secondary:hover { background: var(--paper-warm); color: var(--ink); }<\/p>\n<p> .copy-feedback {\n font-size: 11px;\n color: var(--green-ok);\n background: var(--green-bg);\n padding: 7px 12px;\n margin-top: 8px;\n display: none;\n align-items: center;\n gap: 6px;\n }\n .copy-feedback.visible { display: flex; }<\/p>\n<p> \/* Sezione link storici *\/\n .history-section {\n grid-column: 1 \/ -1;\n background: var(--paper);\n border: 1px solid var(--rule);\n padding: 28px 32px;\n }\n .history-title {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--ink-soft);\n padding-bottom: 14px;\n border-bottom: 1px solid var(--rule);\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .history-clear {\n font-size: 10px;\n color: var(--ink-soft);\n cursor: pointer;\n background: none;\n border: none;\n font-family: var(--font-body);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: color 0.15s;\n }\n .history-clear:hover { color: var(--orange); }<\/p>\n<p> .history-empty {\n font-size: 13px;\n color: var(--ink-soft);\n font-style: italic;\n padding: 8px 0;\n }\n .history-list { list-style: none; }\n .history-item {\n display: grid;\n grid-template-columns: 40px 1fr auto;\n gap: 16px;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid var(--rule);\n }\n .history-item:last-child { border-bottom: none; }\n .history-n {\n font-family: var(--font-display);\n font-size: 22px;\n color: var(--orange);\n font-weight: 300;\n line-height: 1;\n text-align: center;\n }\n .history-info {}\n .history-info-title {\n font-weight: 600;\n font-size: 14px;\n color: var(--ink);\n margin-bottom: 2px;\n }\n .history-info-meta {\n font-size: 11px;\n color: var(--ink-soft);\n }\n .history-actions { display: flex; gap: 8px; }\n .history-btn {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n background: none;\n border: 1px solid var(--rule);\n color: var(--ink-mid);\n padding: 5px 10px;\n cursor: pointer;\n font-family: var(--font-body);\n transition: color 0.15s, border-color 0.15s;\n }\n .history-btn:hover { color: var(--orange); border-color: var(--orange); }<\/p>\n<p> @media (max-width: 700px) {\n .workspace { grid-template-columns: 1fr; padding: 24px 20px 40px; }\n .preview-panel { position: static; }\n .topbar { padding: 12px 20px; }\n .history-section { grid-column: 1; }\n .field-row { grid-template-columns: 1fr; }\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"topbar\">\n<div class=\"topbar-brand\">\n<div class=\"topbar-logo\">Cover<span>fop<\/span><\/div>\n<div class=\"topbar-divider\"><\/div>\n<div class=\"topbar-tool\">Margine \u2014 generatore edizione<\/div>\n<\/p><\/div>\n<div class=\"topbar-hint\">Uso interno \u00b7 Co.Ver.Fo.P.<\/div>\n<\/div>\n<div class=\"workspace\">\n<p> <\/p>\n<div class=\"panel\">\n<div class=\"panel-title\">Dati dell’edizione<\/div>\n<div class=\"field field-row\">\n<div>\n <label for=\"f-n\">Numero edizione<\/label><br \/>\n <input type=\"number\" id=\"f-n\" placeholder=\"es. 12\" min=\"1\">\n <\/div>\n<div>\n <label for=\"f-mese\">Mese <span class=\"opt\">(lascia vuoto = automatico)<\/span><\/label><br \/>\n <input type=\"text\" id=\"f-mese\" placeholder=\"es. Maggio 2026\">\n <\/div>\n<\/p><\/div>\n<div class=\"field\">\n <label for=\"f-titolo\">Titolo dell’edizione<\/label><br \/>\n <input type=\"text\" id=\"f-titolo\" placeholder=\"es. Lavoro che cambia\"><\/p>\n<div class=\"field-hint\">La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero.<\/div>\n<\/p><\/div>\n<div class=\"field\">\n <label for=\"f-sommario\">Testo introduttivo <span class=\"opt\">(sommario hero)<\/span><\/label><br \/>\n <textarea id=\"f-sommario\" rows=\"4\" placeholder=\"Breve presentazione dell'edizione, 2-3 righe.\"><\/textarea>\n <\/div>\n<div class=\"field\" style=\"margin-top:4px;\">\n <label for=\"f-base\">URL base della landing page<\/label><br \/>\n <input type=\"url\" id=\"f-base\" value=\"https:\/\/www.coverfop.it\/index.php\/margine\/\" placeholder=\"https:\/\/www.coverfop.it\/margine\/\"><\/p>\n<div class=\"field-hint\">L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"preview-panel\">\n<p> <\/p>\n<div class=\"preview-ribbon\">\n<div class=\"preview-ribbon-left\">\n <span class=\"preview-ribbon-date\" id=\"pv-date\">\u2014<\/span><br \/>\n <span class=\"preview-ribbon-n\" id=\"pv-n\">\u2014<\/span>\n <\/div>\n<div class=\"preview-ribbon-right\">Co.Ver.Fo.P. \u00b7 Vercelli<\/div>\n<\/p><\/div>\n<div class=\"preview-header\">\n<div class=\"preview-name\">Margine<\/div>\n<div class=\"preview-tagline\">La newsletter di Coverfop<\/div>\n<div class=\"preview-quote\">Non si capisce una cosa finch\u00e9 non la si \u00e8 anche vissuta.<\/div>\n<\/p><\/div>\n<div class=\"preview-hero\">\n<div class=\"preview-eyebrow\" id=\"pv-eyebrow\">Edizione del mese<\/div>\n<div class=\"preview-title\" id=\"pv-title\"><em>Il titolo apparir\u00e0 qui<\/em><\/div>\n<div class=\"preview-intro\" id=\"pv-intro\">Il sommario apparir\u00e0 qui.<\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"url-section\">\n<div class=\"url-label\">Link generato<\/div>\n<div class=\"url-box\" id=\"url-display\">\n <span style=\"color:rgba(250,250,247,0.3);\">Compila i campi per generare il link.<\/span>\n <\/div>\n<div class=\"btn-row\">\n <button class=\"btn btn-primary\" onclick=\"copyURL()\">Copia link<\/button><br \/>\n <button class=\"btn btn-secondary\" onclick=\"openPreview()\">Apri preview<\/button><br \/>\n <button class=\"btn btn-secondary\" onclick=\"saveEdizione()\">Salva<\/button>\n <\/div>\n<div class=\"copy-feedback\" id=\"copy-feedback\">\n \u2713 Link copiato negli appunti\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"history-section\">\n<div class=\"history-title\">\n <span>Edizioni salvate<\/span><br \/>\n <button class=\"history-clear\" onclick=\"clearHistory()\">Cancella tutto<\/button>\n <\/div>\n<div id=\"history-container\">\n<div class=\"history-empty\">Nessuna edizione salvata. Usa il pulsante “Salva” dopo aver generato un link.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n const GIORNI = ['domenica','luned\u00ec','marted\u00ec','mercoled\u00ec','gioved\u00ec','venerd\u00ec','sabato'];\n const MESI_IT = ['gennaio','febbraio','marzo','aprile','maggio','giugno',\n 'luglio','agosto','settembre','ottobre','novembre','dicembre'];<\/p>\n<p> function capFirst(s) { return s.charAt(0).toUpperCase() + s.slice(1); }<\/p>\n<p> function formatDateIT(d) {\n return `${capFirst(GIORNI[d.getDay()])} ${d.getDate()} ${MESI_IT[d.getMonth()]} ${d.getFullYear()}`;\n }<\/p>\n<p> \/\/ \u2500\u2500 Ribbon data\n const oggi = new Date();\n document.getElementById('pv-date').textContent = formatDateIT(oggi).toUpperCase();<\/p>\n<p> \/\/ \u2500\u2500 Genera URL\n let currentURL = '';<\/p>\n<p> function buildURL() {\n const n = document.getElementById('f-n').value.trim();\n const mese = document.getElementById('f-mese').value.trim();\n const titolo = document.getElementById('f-titolo').value.trim();\n const sommario = document.getElementById('f-sommario').value.trim();\n let base = document.getElementById('f-base').value.trim();<\/p>\n<p> if (!base) base = 'https:\/\/www.coverfop.it\/margine\/';\n if (!base.endsWith('\/') && !base.includes('?')) base += '\/';<\/p>\n<p> const params = new URLSearchParams();\n if (n) params.set('n', n);\n if (titolo) params.set('titolo', titolo);\n if (sommario) params.set('sommario', sommario);\n if (mese) params.set('mese', mese);<\/p>\n<p> currentURL = params.toString() ? `${base}?${params.toString()}` : base;<\/p>\n<p> \/\/ Aggiorna display URL con evidenziazione\n const urlDisplay = document.getElementById('url-display');\n if (params.toString()) {\n let html = `<span style=\"color:rgba(250,250,247,0.5)\">${escHTML(base)}?<\/span>`;\n for (const [k, v] of params.entries()) {\n html += `<span class=\"param-key\">${escHTML(k)}<\/span>=<span class=\"param-val\">${escHTML(encodeURIComponent(v))}<\/span>&`;\n }\n html = html.replace(\/&$\/, '');\n urlDisplay.innerHTML = html;\n } else {\n urlDisplay.innerHTML = `<span style=\"color:rgba(250,250,247,0.5)\">${escHTML(base)}<\/span>`;\n }<\/p>\n<p> \/\/ Aggiorna preview\n updatePreview(n, mese, titolo, sommario);\n }<\/p>\n<p> function escHTML(s) {\n return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\n }<\/p>\n<p> function updatePreview(n, mese, titolo, sommario) {\n \/\/ Ribbon\n document.getElementById('pv-n').textContent = n ? `N. ${n}` : '\u2014';<\/p>\n<p> \/\/ Eyebrow\n let eyebrow;\n if (mese) {\n eyebrow = `Edizione di ${mese}`;\n } else {\n eyebrow = `Edizione di ${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`;\n }\n document.getElementById('pv-eyebrow').textContent = eyebrow;<\/p>\n<p> \/\/ Titolo hero\n const titleEl = document.getElementById('pv-title');\n if (titolo) {\n const parole = titolo.split(' ');\n const met\u00e0 = Math.ceil(parole.length \/ 2);\n const prima = parole.slice(0, met\u00e0).join(' ');\n const seconda = parole.slice(met\u00e0).join(' ');\n titleEl.innerHTML = seconda\n ? `${escHTML(prima)}<br \/><em>${escHTML(seconda)}<\/em>`\n : `<em>${escHTML(prima)}<\/em>`;\n } else {\n titleEl.innerHTML = '<em>Il titolo apparir\u00e0 qui<\/em>';\n }<\/p>\n<p> \/\/ Sommario\n const introEl = document.getElementById('pv-intro');\n introEl.textContent = sommario || 'Il sommario apparir\u00e0 qui.';\n }<\/p>\n<p> \/\/ \u2500\u2500 Listeners in tempo reale\n ['f-n','f-mese','f-titolo','f-sommario','f-base'].forEach(id => {\n document.getElementById(id).addEventListener('input', buildURL);\n });<\/p>\n<p> \/\/ \u2500\u2500 Copia URL\n function copyURL() {\n if (!currentURL) return;\n navigator.clipboard.writeText(currentURL).then(() => {\n const fb = document.getElementById('copy-feedback');\n fb.classList.add('visible');\n setTimeout(() => fb.classList.remove('visible'), 2500);\n });\n }<\/p>\n<p> \/\/ \u2500\u2500 Apri preview\n function openPreview() {\n if (!currentURL) return;\n window.open(currentURL, '_blank');\n }<\/p>\n<p> \/\/ \u2500\u2500 Salva edizione nello storico (localStorage)\n function saveEdizione() {\n const n = document.getElementById('f-n').value.trim();\n const mese = document.getElementById('f-mese').value.trim();\n const titolo = document.getElementById('f-titolo').value.trim();\n if (!n && !titolo) {\n alert('Inserisci almeno il numero edizione o il titolo prima di salvare.');\n return;\n }\n const history = loadHistory();\n const entry = {\n id: Date.now(),\n n: n || '\u2014',\n mese: mese || `${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`,\n titolo: titolo || '(senza titolo)',\n url: currentURL,\n salvato: new Date().toLocaleDateString('it-IT')\n };\n history.unshift(entry);\n localStorage.setItem('margine_history', JSON.stringify(history));\n renderHistory();\n }<\/p>\n<p> \/\/ \u2500\u2500 Carica storico\n function loadHistory() {\n try {\n return JSON.parse(localStorage.getItem('margine_history') || '[]');\n } catch { return []; }\n }<\/p>\n<p> \/\/ \u2500\u2500 Render storico\n function renderHistory() {\n const history = loadHistory();\n const container = document.getElementById('history-container');\n if (!history.length) {\n container.innerHTML = '<\/p>\n<div class=\"history-empty\">Nessuna edizione salvata. Usa il pulsante \"Salva\" dopo aver generato un link.<\/div>\n<p>';\n return;\n }\n const ul = document.createElement('ul');\n ul.className = 'history-list';\n history.forEach(entry => {\n const li = document.createElement('li');\n li.className = 'history-item';\n li.innerHTML = `<\/p>\n<div class=\"history-n\">${escHTML(entry.n)}<\/div>\n<div class=\"history-info\">\n<div class=\"history-info-title\">${escHTML(entry.titolo)}<\/div>\n<div class=\"history-info-meta\">${escHTML(entry.mese)} \u00b7 Salvato il ${escHTML(entry.salvato)}<\/div>\n<\/p><\/div>\n<div class=\"history-actions\">\n <button class=\"history-btn\" onclick=\"copyHistoryURL('${escHTML(entry.url)}')\">Copia link<\/button>\n <button class=\"history-btn\" onclick=\"loadIntoForm(${entry.id})\">Carica<\/button>\n <button class=\"history-btn\" onclick=\"deleteEntry(${entry.id})\">Elimina<\/button>\n <\/div>\n<p>`;\n ul.appendChild(li);\n });\n container.innerHTML = '';\n container.appendChild(ul);\n }<\/p>\n<p> function copyHistoryURL(url) {\n navigator.clipboard.writeText(url).then(() => alert('Link copiato: ' + url));\n }<\/p>\n<p> function loadIntoForm(id) {\n const history = loadHistory();\n const entry = history.find(e => e.id === id);\n if (!entry) return;\n const url = new URL(entry.url.startsWith('http') ? entry.url : 'https:\/\/placeholder.it\/' + entry.url);\n document.getElementById('f-n').value = url.searchParams.get('n') || '';\n document.getElementById('f-mese').value = url.searchParams.get('mese') || '';\n document.getElementById('f-titolo').value = url.searchParams.get('titolo') || '';\n document.getElementById('f-sommario').value = url.searchParams.get('sommario') || '';\n document.getElementById('f-base').value = url.origin + url.pathname;\n buildURL();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }<\/p>\n<p> function deleteEntry(id) {\n let history = loadHistory();\n history = history.filter(e => e.id !== id);\n localStorage.setItem('margine_history', JSON.stringify(history));\n renderHistory();\n }<\/p>\n<p> function clearHistory() {\n if (!confirm('Cancellare tutto lo storico delle edizioni?')) return;\n localStorage.removeItem('margine_history');\n renderHistory();\n }<\/p>\n<p> \/\/ \u2500\u2500 Init\n buildURL();\n renderHistory();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<\/div>\n<p><br \/>\n\\n <\/p>\n<div class=\\\"panel\\\">\\n <\/p>\n<div class=\\\"panel-title\\\">Dati dell’edizione<\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field field-row\\\">\\n <\/p>\n<div>\\n <label for=\\\"f-n\\\">Numero edizione<\/label>\\n <input type=\\\"number\\\" id=\\\"f-n\\\" placeholder=\\\"es. 12\\\" min=\\\"1\\\">\\n <\/div>\n<p>\\n <\/p>\n<div>\\n <label for=\\\"f-mese\\\">Mese <span class=\\\"opt\\\">(lascia vuoto = automatico)<\/span><\/label>\\n <input type=\\\"text\\\" id=\\\"f-mese\\\" placeholder=\\\"es. Maggio 2026\\\">\\n <\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\">\\n <label for=\\\"f-titolo\\\">Titolo dell’edizione<\/label>\\n <input type=\\\"text\\\" id=\\\"f-titolo\\\" placeholder=\\\"es. Lavoro che cambia\\\">\\n <\/p>\n<div class=\\\"field-hint\\\">La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\">\\n <label for=\\\"f-sommario\\\">Testo introduttivo <span class=\\\"opt\\\">(sommario hero)<\/span><\/label>\\n <textarea id=\\\"f-sommario\\\" rows=\\\"4\\\" placeholder=\\\"Breve presentazione dell'edizione, 2-3 righe.\\\"><\/textarea>\\n <\/div>\n<p>\\n\\n <\/p>\n<div class=\\\"field\\\" style=\\\"margin-top:4px;\\\">\\n <label for=\\\"f-base\\\">URL base della landing page<\/label>\\n <input type=\\\"url\\\" id=\\\"f-base\\\" value=\\\"https:\/\/www.coverfop.it\/index.php\/margine\/\\\" placeholder=\\\"https:\/\/www.coverfop.it\/margine\/\\\">\\n <\/p>\n<div class=\\\"field-hint\\\">L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"preview-panel\\\">\\n\\n \\n <\/p>\n<div class=\\\"preview-ribbon\\\">\\n <\/p>\n<div class=\\\"preview-ribbon-left\\\">\\n <span class=\\\"preview-ribbon-date\\\" id=\\\"pv-date\\\">\u2014<\/span>\\n <span class=\\\"preview-ribbon-n\\\" id=\\\"pv-n\\\">\u2014<\/span>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-ribbon-right\\\">Co.Ver.Fo.P. \u00b7 Vercelli<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-header\\\">\\n <\/p>\n<div class=\\\"preview-name\\\">Margine<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-tagline\\\">La newsletter di Coverfop<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-quote\\\">Non si capisce una cosa finch\u00e9 non la si \u00e8 anche vissuta.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-hero\\\">\\n <\/p>\n<div class=\\\"preview-eyebrow\\\" id=\\\"pv-eyebrow\\\">Edizione del mese<\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-title\\\" id=\\\"pv-title\\\"><em>Il titolo apparir\u00e0 qui<\/em><\/div>\n<p>\\n <\/p>\n<div class=\\\"preview-intro\\\" id=\\\"pv-intro\\\">Il sommario apparir\u00e0 qui.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"url-section\\\">\\n <\/p>\n<div class=\\\"url-label\\\">Link generato<\/div>\n<p>\\n <\/p>\n<div class=\\\"url-box\\\" id=\\\"url-display\\\">\\n <span style=\\\"color:rgba(250,250,247,0.3);\\\">Compila i campi per generare il link.<\/span>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"btn-row\\\">\\n <button class=\\\"btn btn-primary\\\" onclick=\\\"copyURL()\\\">Copia link<\/button>\\n <button class=\\\"btn btn-secondary\\\" onclick=\\\"openPreview()\\\">Apri preview<\/button>\\n <button class=\\\"btn btn-secondary\\\" onclick=\\\"saveEdizione()\\\">Salva<\/button>\\n <\/div>\n<p>\\n <\/p>\n<div class=\\\"copy-feedback\\\" id=\\\"copy-feedback\\\">\\n \u2713 Link copiato negli appunti\\n <\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n <\/p><\/div>\n<p>\\n\\n \\n <\/p>\n<div class=\\\"history-section\\\">\\n <\/p>\n<div class=\\\"history-title\\\">\\n <span>Edizioni salvate<\/span>\\n <button class=\\\"history-clear\\\" onclick=\\\"clearHistory()\\\">Cancella tutto<\/button>\\n <\/div>\n<p>\\n <\/p>\n<div id=\\\"history-container\\\">\\n <\/p>\n<div class=\\\"history-empty\\\">Nessuna edizione salvata. Usa il pulsante \\”Salva\\” dopo aver generato un link.<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p><\/div>\n<p>\\n\\n<\/p><\/div>\n<p>\\n\\n<script>\\n const GIORNI = ['domenica','luned\u00ec','marted\u00ec','mercoled\u00ec','gioved\u00ec','venerd\u00ec','sabato'];\\n const MESI_IT = ['gennaio','febbraio','marzo','aprile','maggio','giugno',\\n 'luglio','agosto','settembre','ottobre','novembre','dicembre'];\\n\\n function capFirst(s) { return s.charAt(0).toUpperCase() + s.slice(1); }\\n\\n function formatDateIT(d) {\\n return `${capFirst(GIORNI[d.getDay()])} ${d.getDate()} ${MESI_IT[d.getMonth()]} ${d.getFullYear()}`;\\n }\\n\\n \/\/ \u2500\u2500 Ribbon data\\n const oggi = new Date();\\n document.getElementById('pv-date').textContent = formatDateIT(oggi).toUpperCase();\\n\\n \/\/ \u2500\u2500 Genera URL\\n let currentURL = '';\\n\\n function buildURL() {\\n const n = document.getElementById('f-n').value.trim();\\n const mese = document.getElementById('f-mese').value.trim();\\n const titolo = document.getElementById('f-titolo').value.trim();\\n const sommario = document.getElementById('f-sommario').value.trim();\\n let base = document.getElementById('f-base').value.trim();\\n\\n if (!base) base = 'https:\/\/www.coverfop.it\/margine\/';\\n if (!base.endsWith('\/') && !base.includes('?')) base += '\/';\\n\\n const params = new URLSearchParams();\\n if (n) params.set('n', n);\\n if (titolo) params.set('titolo', titolo);\\n if (sommario) params.set('sommario', sommario);\\n if (mese) params.set('mese', mese);\\n\\n currentURL = params.toString() ? `${base}?${params.toString()}` : base;\\n\\n \/\/ Aggiorna display URL con evidenziazione\\n const urlDisplay = document.getElementById('url-display');\\n if (params.toString()) {\\n let html = `<span style=\\\"color:rgba(250,250,247,0.5)\\\">${escHTML(base)}?<\/span>`;\\n for (const [k, v] of params.entries()) {\\n html += `<span class=\\\"param-key\\\">${escHTML(k)}<\/span>=<span class=\\\"param-val\\\">${escHTML(encodeURIComponent(v))}<\/span>&`;\\n }\\n html = html.replace(\/&$\/, '');\\n urlDisplay.innerHTML = html;\\n } else {\\n urlDisplay.innerHTML = `<span style=\\\"color:rgba(250,250,247,0.5)\\\">${escHTML(base)}<\/span>`;\\n }\\n\\n \/\/ Aggiorna preview\\n updatePreview(n, mese, titolo, sommario);\\n }\\n\\n function escHTML(s) {\\n return s.replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>');\\n }\\n\\n function updatePreview(n, mese, titolo, sommario) {\\n \/\/ Ribbon\\n document.getElementById('pv-n').textContent = n ? `N. ${n}` : '\u2014';\\n\\n \/\/ Eyebrow\\n let eyebrow;\\n if (mese) {\\n eyebrow = `Edizione di ${mese}`;\\n } else {\\n eyebrow = `Edizione di ${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`;\\n }\\n document.getElementById('pv-eyebrow').textContent = eyebrow;\\n\\n \/\/ Titolo hero\\n const titleEl = document.getElementById('pv-title');\\n if (titolo) {\\n const parole = titolo.split(' ');\\n const met\u00e0 = Math.ceil(parole.length \/ 2);\\n const prima = parole.slice(0, met\u00e0).join(' ');\\n const seconda = parole.slice(met\u00e0).join(' ');\\n titleEl.innerHTML = seconda\\n ? `${escHTML(prima)}<br \/><em>${escHTML(seconda)}<\/em>`\\n : `<em>${escHTML(prima)}<\/em>`;\\n } else {\\n titleEl.innerHTML = '<em>Il titolo apparir\u00e0 qui<\/em>';\\n }\\n\\n \/\/ Sommario\\n const introEl = document.getElementById('pv-intro');\\n introEl.textContent = sommario || 'Il sommario apparir\u00e0 qui.';\\n }\\n\\n \/\/ \u2500\u2500 Listeners in tempo reale\\n ['f-n','f-mese','f-titolo','f-sommario','f-base'].forEach(id => {\\n document.getElementById(id).addEventListener('input', buildURL);\\n });\\n\\n \/\/ \u2500\u2500 Copia URL\\n function copyURL() {\\n if (!currentURL) return;\\n navigator.clipboard.writeText(currentURL).then(() => {\\n const fb = document.getElementById('copy-feedback');\\n fb.classList.add('visible');\\n setTimeout(() => fb.classList.remove('visible'), 2500);\\n });\\n }\\n\\n \/\/ \u2500\u2500 Apri preview\\n function openPreview() {\\n if (!currentURL) return;\\n window.open(currentURL, '_blank');\\n }\\n\\n \/\/ \u2500\u2500 Salva edizione nello storico (localStorage)\\n function saveEdizione() {\\n const n = document.getElementById('f-n').value.trim();\\n const mese = document.getElementById('f-mese').value.trim();\\n const titolo = document.getElementById('f-titolo').value.trim();\\n if (!n && !titolo) {\\n alert('Inserisci almeno il numero edizione o il titolo prima di salvare.');\\n return;\\n }\\n const history = loadHistory();\\n const entry = {\\n id: Date.now(),\\n n: n || '\u2014',\\n mese: mese || `${capFirst(MESI_IT[oggi.getMonth()])} ${oggi.getFullYear()}`,\\n titolo: titolo || '(senza titolo)',\\n url: currentURL,\\n salvato: new Date().toLocaleDateString('it-IT')\\n };\\n history.unshift(entry);\\n localStorage.setItem('margine_history', JSON.stringify(history));\\n renderHistory();\\n }\\n\\n \/\/ \u2500\u2500 Carica storico\\n function loadHistory() {\\n try {\\n return JSON.parse(localStorage.getItem('margine_history') || '[]');\\n } catch { return []; }\\n }\\n\\n \/\/ \u2500\u2500 Render storico\\n function renderHistory() {\\n const history = loadHistory();\\n const container = document.getElementById('history-container');\\n if (!history.length) {\\n container.innerHTML = '<\/p>\n<div class=\\\"history-empty\\\">Nessuna edizione salvata. Usa il pulsante \\\"Salva\\\" dopo aver generato un link.<\/div>\n<p>';\\n return;\\n }\\n const ul = document.createElement('ul');\\n ul.className = 'history-list';\\n history.forEach(entry => {\\n const li = document.createElement('li');\\n li.className = 'history-item';\\n li.innerHTML = `\\n <\/p>\n<div class=\\\"history-n\\\">${escHTML(entry.n)}<\/div>\n<p>\\n <\/p>\n<div class=\\\"history-info\\\">\\n <\/p>\n<div class=\\\"history-info-title\\\">${escHTML(entry.titolo)}<\/div>\n<p>\\n <\/p>\n<div class=\\\"history-info-meta\\\">${escHTML(entry.mese)} \u00b7 Salvato il ${escHTML(entry.salvato)}<\/div>\n<p>\\n <\/p><\/div>\n<p>\\n <\/p>\n<div class=\\\"history-actions\\\">\\n <button class=\\\"history-btn\\\" onclick=\\\"copyHistoryURL('${escHTML(entry.url)}')\\\">Copia link<\/button>\\n <button class=\\\"history-btn\\\" onclick=\\\"loadIntoForm(${entry.id})\\\">Carica<\/button>\\n <button class=\\\"history-btn\\\" onclick=\\\"deleteEntry(${entry.id})\\\">Elimina<\/button>\\n <\/div>\n<p>`;\\n ul.appendChild(li);\\n });\\n container.innerHTML = '';\\n container.appendChild(ul);\\n }\\n\\n function copyHistoryURL(url) {\\n navigator.clipboard.writeText(url).then(() => alert('Link copiato: ' + url));\\n }\\n\\n function loadIntoForm(id) {\\n const history = loadHistory();\\n const entry = history.find(e => e.id === id);\\n if (!entry) return;\\n const url = new URL(entry.url.startsWith('http') ? entry.url : 'https:\/\/placeholder.it\/' + entry.url);\\n document.getElementById('f-n').value = url.searchParams.get('n') || '';\\n document.getElementById('f-mese').value = url.searchParams.get('mese') || '';\\n document.getElementById('f-titolo').value = url.searchParams.get('titolo') || '';\\n document.getElementById('f-sommario').value = url.searchParams.get('sommario') || '';\\n document.getElementById('f-base').value = url.origin + url.pathname;\\n buildURL();\\n window.scrollTo({ top: 0, behavior: 'smooth' });\\n }\\n\\n function deleteEntry(id) {\\n let history = loadHistory();\\n history = history.filter(e => e.id !== id);\\n localStorage.setItem('margine_history', JSON.stringify(history));\\n renderHistory();\\n }\\n\\n function clearHistory() {\\n if (!confirm('Cancellare tutto lo storico delle edizioni?')) return;\\n localStorage.removeItem('margine_history');\\n renderHistory();\\n }\\n\\n \/\/ \u2500\u2500 Init\\n buildURL();\\n renderHistory();\\n<\/script>\\n<\/body>\\n<\/html>\\n”}}]}]}]}],”version”:”5.0.32″} –><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Margine \u2014 Generatore edizione Coverfop Margine \u2014 generatore edizione Uso interno \u00b7 Co.Ver.Fo.P. Dati dell’edizione Numero edizione Mese (lascia vuoto = automatico) Titolo dell’edizione La seconda met\u00e0 andr\u00e0 in corsivo arancio nel titolo hero. Testo introduttivo (sommario hero) URL base della landing page L’indirizzo dove \u00e8 pubblicata la pagina sul tuo sito. \u2014 \u2014 Co.Ver.Fo.P. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-15328","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/comments?post=15328"}],"version-history":[{"count":2,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328\/revisions"}],"predecessor-version":[{"id":15330,"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/pages\/15328\/revisions\/15330"}],"wp:attachment":[{"href":"https:\/\/www.coverfop.it\/index.php\/wp-json\/wp\/v2\/media?parent=15328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}