Gagnvirk Skýrslugreining: Vefur gegn Spillingu https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js body { font-family: ‘Inter’, sans-serif; background-color: #fdfcf9; color: #334155; } .tab-button { transition: all 0.3s ease; white-space: nowrap; } .tab-button.active { border-color: #a0522d; color: #a0522d; background-color: #f5efe8; } .content-section { display: none; } .content-section.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .expandable-title { cursor: pointer; user-select: none; transition: background-color 0.2s ease; } .expandable-title:hover { background-color: #f1f5f9; } .expandable-content { display: none; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; max-height: 0; padding-left: 1.5rem; border-left: 2px solid #e2e8f0; margin-left: 0.5rem; } .expandable-content.open { display: block; max-height: 2000px; } .menu-item-diagram div { border: 1px solid #cbd5e1; transition: all 0.2s ease; } .menu-item-diagram div:hover { background-color: #f5efe8; border-color: #a0522d; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .chart-container { position: relative; width: 100%; max-width: 650px; margin-left: auto; margin-right: auto; height: 350px; max-height: 450px; } @media (min-width: 768px) { .chart-container { height: 400px; } } .nav-container { position: sticky; top: 0; z-index: 50; background-color: #fdfcf9; padding-bottom: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .nav-scroller { -ms-overflow-style: none; scrollbar-width: none; } .nav-scroller::-webkit-scrollbar { display: none; } .icon-placeholder { display: inline-block; width: 1.5em; height: 1em; margin-right: 0.5em; text-align: center; } const reportData = { sections: [ { id: „inngangur“, title: „I. Inngangur“, intro: „Þessi hluti skýrslunnar fjallar um markmið og mikilvægi vitundarvakningar um spillingu. Hann útlistar hvers vegna slíkur vefur er nauðsynlegur og hvaða hlutverki honum er ætlað að gegna.“, content: `

Markmið Vefsvæðis (samkvæmt skýrslu)

• Auka skilning almennings á birtingarmyndum spillingar og skaðlegum áhrifum.
• Vekja til umhugsunar um umfang spillingar, alþjóðlega og á Íslandi (með gögnum).
• Bjóða upp á aðgengilegar upplýsingar og úrræði.
• Hvetja til virkrar þátttöku og aðgerða.
• Byggja upp traust með áreiðanlegum upplýsingum.

Vefurinn skal þjóna sem miðlæg auðlind, fræðsluvettvangur og hvatningartæki, ekki til að rannsaka einstök mál heldur styrkja grunn upplýstrar umræðu.

`}, { id: „fraedilegur_rammi“, title: „II. Fræðilegur Rammi“, intro: „Hér er farið yfir fræðilegar skilgreiningar á spillingu í alþjóðlegu samhengi og helstu birtingarmyndir og tegundir spillingar teknar fyrir.“, content: ` `}, { id: „ahrif_spillingar“, title: „III. Áhrif Spillingar“, intro: „Þessi kafli skýrslunnar greinir frá víðtækum afleiðingum spillingar fyrir samfélög, þ.m.t. efnahagsleg, samfélagsleg og umhverfisleg áhrif.“, content: ` `}, { id: „spilling_a_islandi“, title: „IV. Staðan á Íslandi“, intro: „Hér er fjallað um stöðu spillingar á Íslandi samkvæmt skýrslunni, byggt á alþjóðlegum mælingum, skýrslum frá GRECO og OECD, viðhorfi almennings og þekktum veikleikum. Athugið að skýrslan tiltekur að þessi hluti sé ‘Valfrjáls’ fyrir vefinn sem hún lýsir, en hér er tekið saman hvað skýrslan leggur til að hann innihaldi.“, content: ` `}, { id: „urraedi_og_fraedsla“, title: „V. Úrræði & Fræðsla“, intro: „Þessi hluti skýrslunnar leggur til að vefurinn þjóni sem upplýsingabanki og vísi á lög, reglur, stofnanir, tilkynningarleiðir og annað fræðsluefni.“, content: ` `}, { id: „taktu_thatt“, title: „VI. Taktu Þátt“, intro: „Þessi hluti er ætlaður til að virkja notendur og hvetja til aðgerða. Skýrslan leggur til beint ákall og ýmsar leiðir til þátttöku.“, content: `

Þín Rödd Skiptir Máli

`}, { id: „um_okkur“, title: „VIII. Um Okkur“, intro: „Skýrslan leggur mikla áherslu á gagnsæi um hverjir standa að vefnum til að byggja upp traust og trúverðugleika.“, content: `

Lykilatriði fyrir Trúverðugleika

• Aðstandendur: Skýrt hverjir standa að vefnum (einstaklingar, samtök?).
• Markmið og Gildi: Yfirlýsing um hlutleysi, áreiðanleika og gagnsæi.
• Fjármögnun: Fullkomið gagnsæi um alla fjármögnun til að sýna fram á óhæði.
• Ritstjórnarlegt Sjálfstæði: Yfirlýsing um sjálfstæði frá hagsmunaaðilum.

`}, { id: „proposed_menu_interactive“, title: „Tillaga að Valmynd“, intro: „Skýrslan leggur til ákveðna uppbyggingu fyrir vefinn sem hún lýsir. Hér getur þú séð yfirlit yfir þá valmynd og fengið stutta lýsingu á hverjum lið með því að smella á hann.“, content: `

Smelltu á valmyndarlið til að sjá stutta lýsingu úr skýrslunni.

` } ], proposedMenuItems: [ { name: „Forsíða (Heim)“, description: „Grípandi og skýr. Fyrirsögn, mynd/myndband, kynning á markmiðum, hlekkir á mikilvægar undirsíður. Nútímaleg, fagleg og traustvekjandi hönnun.“ }, { name: „Hvað er spilling?“, description: „Fræðsla um hugtakið. Skilgreining á einföldu máli (t.d. frá TI). Birtingarmyndir (mútur, fjárdráttur, frændhygli o.fl.) með dæmum og infógrafík. Tegundir spillingar (stjórnmála-, viðskipta- o.fl.).“ }, { name: „Áhrif spillingar“, description: „Afleiðingar fyrir samfélagið. Efnahagsleg (minni vöxtur, sóun), samfélagsleg (grafið undan trausti, ójafnrétti, veikt lýðræði), umhverfisleg (slakari reglugerðir). Nota raunveruleg/tilbúin dæmi, infógrafík.“ }, { name: „Spilling á Íslandi“, description: „Staðan hérlendis (ef við á og unnt er að styðja gögnum). Byggt á áreiðanlegum gögnum (GRECO, TI, innlendar rannsóknir). Umræða um regluverk, stofnanir, viðhorf almennings, þekkta veikleika. Varúð og hlutlægni.“ }, { name: „Úrræði & Fræðsla“, description: „Hagnýtar upplýsingar og ítarefni. Lög og reglur, stofnanir, tilkynningarleiðir (með áherslu á öryggi/nafnleynd), fræðsluefni (skýrslur, greinar), verkfærakista.“ }, { name: „Taktu þátt“, description: „Hvatning til aðgerða. Fræðstu og deildu, krefstu gagnsæis, styddu samtök, vertu fyrirmynd, taktu þátt í umræðu, möguleg undirskriftasöfnun.“ }, { name: „Fréttir / Blogg“, description: „Reglulegar uppfærslur og greinar. Nýleg spillingarmál (byggt á áreiðanlegum fréttum), viðtöl, greiningar, tilkynningar um viðburði.“ }, { name: „Um okkur“, description: „Upplýsingar um hverjir standa að vefnum. Hverjir, markmið og gildi, fjármögnun (fyrir óhæði).“ }, { name: „Hafðu samband“, description: „Samskiptaleiðir. Samskiptaform, netfang, mögulega símanúmer, tenglar á samfélagsmiðla.“ } ] }; const tabNavigation = document.getElementById(‘tab-navigation’); const mainContent = document.getElementById(‘main-content’); let oecdChartInstance = null; function initApp() { renderTabs(); renderContentSections(); if (reportData.sections.length > 0) { openTab(reportData.sections[0].id); } } function renderTabs() { reportData.sections.forEach((section) => { const button = document.createElement(‘button’); button.className = ‘tab-button text-sm md:text-base py-2 px-3 md:px-4 rounded-md border-b-2 border-transparent hover:bg-slate-100 text-slate-500 hover:text-slate-800 font-semibold’; button.textContent = section.title; button.dataset.tabId = section.id; button.onclick = () => openTab(section.id); tabNavigation.appendChild(button); }); } function renderContentSections() { reportData.sections.forEach(section => { const sectionDiv = document.createElement(‘div’); sectionDiv.id = section.id; sectionDiv.className = ‘content-section’; sectionDiv.innerHTML = ` `; mainContent.appendChild(sectionDiv); }); } function initExpandables(container) { container.querySelectorAll(‘.expandable-title’).forEach(title => { title.onclick = () => { const content = title.nextElementSibling; const icon = title.querySelector(‘span’); const isOpen = content.classList.contains(‘open’); content.classList.toggle(‘open’); icon.textContent = isOpen ? ‘+’ : ‘−’; }; }); } function openTab(tabId) { document.querySelectorAll(‘.content-section’).forEach(section => { section.classList.remove(‘active’); }); document.querySelectorAll(‘.tab-button’).forEach(button => { button.classList.remove(‘active’); }); const activeSection = document.getElementById(tabId); activeSection.classList.add(‘active’); const activeButton = document.querySelector(`.tab-button[data-tab-id=“${tabId}“]`); if (activeButton) { activeButton.classList.add(‘active’); } if (tabId === ‘spilling_a_islandi’ && !oecdChartInstance) { renderOECDChart(); } if (tabId === ‘proposed_menu_interactive’) { initProposedMenuDiagram(); } initExpandables(activeSection); } function renderOECDChart() { const ctx = document.getElementById(‘oecdChart’); if (!ctx) return; const data = { labels: [‘Hagsmunagæsla’, ‘Hagsmunaárekstrar’, ‘Fjármál flokka’, ‘Aðgangur að uppl.’, ‘Vernd uppljóstrara’], datasets: [ { label: ‘Reglur til staðar (%)’, data: [25, 60, 85, 90, 75], backgroundColor: ‘rgba(54, 162, 235, 0.6)’, borderColor: ‘rgba(54, 162, 235, 1)’, borderWidth: 1 }, { label: ‘Framkvæmd metin (%)’, data: [56, 50, 70, 80, 60], backgroundColor: ‘rgba(255, 159, 64, 0.6)’, borderColor: ‘rgba(255, 159, 64, 1)’, borderWidth: 1 } ] }; oecdChartInstance = new Chart(ctx.getContext(‘2d’), { type: ‘bar’, data: data, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: ‘% af OECD Viðmiðum’ } }, x: { ticks: { callback: function(value, index, values) { const label = this.getLabelForValue(value); if (label.length > 16) { return label.match(/.{1,16}/g); } return label; } } } }, plugins: { title: { display: true, text: ‘Mat OECD á reglum og framkvæmd gegn spillingu (Ísland, 2024)’ }, tooltip: { mode: ‘index’, intersect: false } } } }); } function initProposedMenuDiagram() { const diagramContainer = document.querySelector(‘#proposed_menu_interactive .menu-item-diagram’); const descriptionBox = document.getElementById(‘menu-item-description’); if (!diagramContainer || diagramContainer.dataset.initialized) return; diagramContainer.innerHTML = “; reportData.proposedMenuItems.forEach(item => { const menuItemDiv = document.createElement(‘div’); menuItemDiv.className = ‘p-3 rounded-lg shadow cursor-pointer bg-white text-slate-700 text-center font-semibold’; menuItemDiv.textContent = item.name; menuItemDiv.onclick = () => { descriptionBox.innerHTML = `

${item.name}

${item.description}

`; }; diagramContainer.appendChild(menuItemDiv); }); diagramContainer.dataset.initialized = ‘true’; } document.addEventListener(‘DOMContentLoaded’, initApp);