Spegilmyndir Valdsins: Narsissismi og Spilling á Íslandi
<a href="https://cdn.tailwindcss.com">https://cdn.tailwindcss.com</a>
<a href="https://cdn.jsdelivr.net/npm/chart.js">https://cdn.jsdelivr.net/npm/chart.js</a>
<!-- Chosen Palette: Calm Harmony (Slate, Teal, White) -->
<!-- Application Structure Plan: A multi-section, single-page application with a sticky top navigation bar. The structure guides the user through a logical narrative: 1. Introduction (The Core Thesis), 2. The Problem (Defining Narcissism & Corruption, showing CPI data), 3. The Psychology (Explaining the Dark Triad and its mechanisms), 4. The Evidence (Interactive case studies), 5. The Context (Cultural factors), and 6. The Solutions (Recommendations). This thematic, scrolling structure was chosen over a direct report-to-page mapping to create a more engaging and digestible user journey, allowing users to explore from the general to the specific at their own pace. -->
<!-- Visualization & Content Choices:
- Iceland CPI Trend: Report Info ->--> Iceland's falling CPI score compared to Nordics. Goal -> Compare/Show Change. Viz -> Line Chart (Chart.js/Canvas). Interaction -> Hover tooltips for specific data points. Justification -> Best method for time-series comparison.
- Dark Triad & Mechanisms: Report Info -> The Dark Triad and psychological mediators. Goal -> Organize/Inform. Viz -> HTML/CSS diagram and interactive cards. Interaction -> Click/hover to reveal explanatory text. Justification -> Progressive disclosure to avoid information overload.
- Case Studies: Report Info -> Analysis of 4 Icelandic cases. Goal -> Compare/Organize. Viz -> Tabbed interface (HTML/CSS/JS) with a consistent grid layout for analysis points. Interaction -> Click tabs to switch content. Justification -> Standard UI for managing related but distinct content blocks cleanly.
- Recommendations: Report Info -> List of proposed solutions. Goal -> Organize/Inform. Viz -> Accordion (HTML/CSS/JS). Interaction -> Click to expand categories. Justification -> Compactly presents lists of information.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc; /* slate-50 */
color: #1e293b; /* slate-800 */
}
.chart-container {
position: relative;
background-color: white;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.nav-link.active {
font-weight: 700;
color: #0d9488; /* teal-600 */
border-bottom: 2px solid #0d9488;
}
.tab.active {
background-color: #0d9488; /* teal-600 */
color: white;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
<header id="header" class="bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-sm">
<div class="flex items-center justify-between h-16">
<div class="flex-shrink-0">
<h1 class="text-xl font-bold text-slate-800">Spegilmyndir Valdsins</h1>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#heim" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Heim</a>
<a href="#vandinn" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Vandinn</a>
<a href="#saelgraedin" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Sálfræðin</a>
<a href="#tilvikin" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Tilvikin</a>
<a href="#menningin" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Menningin</a>
<a href="#lausnirnar" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-700 hover:text-teal-600 transition-colors">Lausnir</a>
</div>
</div>
<div class="md:hidden">
<span class="sr-only">Opna valmynd</span>
</div>
</div>
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#heim" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Heim</a>
<a href="#vandinn" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Vandinn</a>
<a href="#saelgraedin" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Sálfræðin</a>
<a href="#tilvikin" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Tilvikin</a>
<a href="#menningin" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Menningin</a>
<a href="#lausnirnar" class="nav-link-mobile block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-teal-600 hover:bg-slate-50">Lausnir</a>
</div>
</div>
</header>
<main>
<section id="heim" class="py-20 md:py-32">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tight">Spegilmyndir Valdsins</h2>
<p class="mt-4 max-w-3xl mx-auto text-lg md:text-xl text-slate-600">Gagnvirk greining á sterkum, óbeinum tengslum milli narsissískra persónueinkenna og kerfisbundinnar spillingar á Íslandi.</p>
<p class="mt-6 text-slate-500">Skrunaðu niður til að kanna hvernig sálfræði, menning og völd fléttast saman.</p>
<div class="mt-8 text-3xl animate-bounce text-slate-400">↓</div>
</div>
</section>
<section id="vandinn" class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-slate-900">Vandinn: Sprunga í Sjálfsmyndinni</h3>
<p class="mt-3 max-w-2xl mx-auto text-lg text-slate-600">Þessi hluti skilgreinir lykilhugtökin, narsissisma og spillingu, og sýnir fram á áhyggjuefni í gögnum: Þótt Ísland standi vel alþjóðlega hefur spillingarvísitalan fallið hratt og er nú langt á eftir hinum Norðurlöndunum.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div class="bg-slate-50 p-6 rounded-lg">
<h4 class="text-2xl font-bold text-slate-800 mb-2">Hvað er narsissismi?</h4>
<p class="text-slate-600">Yfirgripsmikið mynstur stórmennsku, þörf fyrir aðdáun og skortur á samkennd. Í skýrslunni er lögð áhersla á undirklínísk einkenni (t.d. tilkall, nýtingu á öðrum) sem geta birst í valdastöðum, frekar en formlega geðgreiningu.</p>
</div>
<div class="bg-slate-50 p-6 rounded-lg">
<h4 class="text-2xl font-bold text-slate-800 mb-2">Hvað er spilling?</h4>
<p class="text-slate-600">„Misbeiting á opinberu valdi til persónulegs ávinnings.“ Þetta getur birst sem frændhygli, leyndarhyggja, mútur og kerfisbundnir veikleikar sem grafa undan trausti almennings á stofnunum.</p>
</div>
</div>
<div class="chart-container w-full max-w-4xl mx-auto h-96 md:h-[50vh] max-h-[500px]">
</div>
<p class="text-center mt-4 text-sm text-slate-500">Heimild: Transparency International Corruption Perceptions Index (CPI)</p>
</div>
</section>
<section id="saelgraedin" class="py-16 md:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-slate-900">Sálfræðivélin</h3>
<p class="mt-3 max-w-2xl mx-auto text-lg text-slate-600">Alþjóðlegar rannsóknir sýna að persónueinkenni "Myrka Þríhyrningsins" geta ýtt undir spillingu. Hér skoðum við þessi einkenni og þá sálfræðilegu ferla sem réttlæta siðlausa hegðun.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="flex justify-center">
<div class="relative w-80 h-80">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-40 bg-slate-200 rounded-full flex items-center justify-center text-center p-2 transform rotate-0">
<span class="font-bold text-slate-700">Narsissismi<br><small class="font-normal">(Stórmennska, tilkall)</small></span>
</div>
<div class="absolute bottom-0 left-0 w-40 h-40 bg-slate-200 rounded-full flex items-center justify-center text-center p-2 transform rotate-0">
<span class="font-bold text-slate-700">Makíavellismi<br><small class="font-normal">(Útreikningur, hagræðing)</small></span>
</div>
<div class="absolute bottom-0 right-0 w-40 h-40 bg-slate-200 rounded-full flex items-center justify-center text-center p-2 transform rotate-0">
<span class="font-bold text-slate-700">Siðblinda<br><small class="font-normal">(Hvatvísi, skortur á iðrun)</small></span>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-32 h-32 bg-teal-600 rounded-full flex items-center justify-center text-white font-bold text-center p-2 shadow-lg">Hinn Myrki Þríhyrningur</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h4 class="text-xl font-bold text-slate-800">Oftrú á eigin gæfu</h4>
<p class="mt-2 text-slate-600">Einstaklingar ofmeta líkurnar á ávinningi og vanmeta líkurnar á refsingu. Þetta verður sálfræðilegt "leyfi" til að taka áhættu sem aðrir forðast.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h4 class="text-xl font-bold text-slate-800">Siðferðisleg afneitun</h4>
<p class="mt-2 text-slate-600">Vitrænar aðferðir til að réttlæta eigin hegðun, t.d. með því að fegra gjörðir ("þóknun" í stað "mútu"), dreifa ábyrgð ("allir gera þetta") eða kenna öðrum um.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h4 class="text-xl font-bold text-slate-800">Skert næmi fyrir áhættu</h4>
<p class="mt-2 text-slate-600">Rannsóknir sýna að háar refsingar hafa takmarkaðri fælingarmátt á þessa einstaklinga. Ávinningurinn vegur þyngra en hugsanlegur kostnaður.</p>
</div>
</div>
</div>
</div>
</section>
<section id="tilvikin" class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-slate-900">Bergmál á Íslandi: Valin Tilvik</h3>
<p class="mt-3 max-w-2xl mx-auto text-lg text-slate-600">Hér er farið yfir fjögur stór íslensk mál sem sýna hvernig sálfræðilegu þættirnir birtast í raunveruleikanum. Veldu mál til að skoða greininguna.</p>
</div>
<div class="w-full max-w-5xl mx-auto">
<div class="mb-4 flex space-x-1 p-1 bg-slate-100 rounded-lg">
Hrunið 2008
Wintris-málið
Samherjamálið
Íslandsbankasala
</div>
<div id="tab-content" class="p-4 bg-slate-50 rounded-lg min-h-[300px]">
</div>
</div>
</div>
</section>
<section id="menningin" class="py-16 md:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-slate-900">Gróðrarstían: Menning og Samfélag</h3>
<p class="mt-3 max-w-2xl mx-auto text-lg text-slate-600">Spilling verður ekki til í tómarúmi. Íslenskir menningarþættir, ásamt hugmyndafræði markaðshyggju, sköpuðu umhverfi þar sem narsissísk hegðun fékk að dafna.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h4 class="text-xl font-bold text-slate-800">Einstaklingshyggja & Áhættusækni</h4>
<p class="mt-2 text-slate-600">Menning sem leggur áherslu á skammtímaárangur og "áræðni" getur verðlaunað sjálfhverfa hegðun og litið framhjá langtímahagsmunum samfélagsins.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h4 class="text-xl font-bold text-slate-800">Smæð samfélagsins & Frændhygli</h4>
<p class="mt-2 text-slate-600">Náin tengslanet geta orðið að óformlegri smurolíu kerfisins, þar sem tryggð við "innsta hring" vegur þyngra en formlegar reglur og almannahagur.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm col-span-1 md:col-span-2 lg:col-span-1">
<h4 class="text-xl font-bold text-slate-800">Markaðshyggja & Siðrof</h4>
<p class="mt-2 text-slate-600">Þegar öll mannleg samskipti eru metin á mælikvarða viðskipta skapast siðferðilegt tómarúm. Farið er eftir lagabókstafnum en andi laganna er hunsaður.</p>
</div>
</div>
</div>
</section>
<section id="lausnirnar" class="py-16 md:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-slate-900">Leiðin Fram á Við</h3>
<p class="mt-3 max-w-2xl mx-auto text-lg text-slate-600">Aðgerðir gegn spillingu þurfa að vera jafn margþættar og vandinn sjálfur. Þær snúast ekki bara um lög, heldur um menningu, siðferði og ábyrgð.</p>
</div>
<div class="max-w-3xl mx-auto space-y-4">
<div class="accordion-item bg-slate-50 rounded-lg">
<span>Stjórnkerfislegar umbætur</span>
<span class="accordion-icon transform transition-transform text-teal-600">▼</span>
<div class="accordion-content px-4 pb-4 text-slate-600">
<ul class="list-disc list-inside space-y-2">
<li>Efla sjálfstæði eftirlitsstofnana (t.d. Ríkisendurskoðunar).</li>
<li>Innleiða fullt gagnsæi í eignarhaldi fyrirtækja og fjármögnun flokka.</li>
<li>Tryggja virka og öfluga vernd uppljóstrara.</li>
<li>Skýra reglur um persónulega ábyrgð stjórnenda og stjórnmálamanna.</li>
</ul>
</div>
</div>
<div class="accordion-item bg-slate-50 rounded-lg">
<span>Siðferðileg og menningarleg íhlutun</span>
<span class="accordion-icon transform transition-transform text-teal-600">▼</span>
<div class="accordion-content px-4 pb-4 text-slate-600">
<ul class="list-disc list-inside space-y-2">
<li>Efla kennslu í siðfræði og gagnrýnni hugsun á öllum skólastigum.</li>
<li>Styrkja siðanefndir fagstétta og virkni siðareglna.</li>
<li>Styðja við óháða, rannsakandi og gagnrýna fjölmiðlun.</li>
</ul>
</div>
</div>
<div class="accordion-item bg-slate-50 rounded-lg">
<span>Forvarnir á sviði forystu</span>
<span class="accordion-icon transform transition-transform text-teal-600">▼</span>
<div class="accordion-content px-4 pb-4 text-slate-600">
<ul class="list-disc list-inside space-y-2">
<li>Auka meðvitund um sálfræðilega áhættuþætti við val á leiðtogum.</li>
<li>Nýta sálfræðilega þekkingu í ráðningarferlum fyrir æðstu stöður.</li>
<li>Tryggja öfluga mótvægiskrafta (t.d. óháð stjórnareftirlit) ef einstaklingar með áhættuhegðun eru ráðnir.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-slate-800 text-white">
<div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8 text-center text-sm">
<p>© 2025 Spegilmyndir Valdsins. Gagnvirk úrvinnsla byggð á skýrslu um narsissisma og spillingu.</p>
<p class="text-slate-400 mt-1">Þetta er ekki formleg fræðileg útgáfa heldur gagnvirk framsetning á greiningu.</p>
</div>
</footer>
document.addEventListener('DOMContentLoaded', function() {
const chartData = {
years: [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024],
countries: {
'Ísland': [86, 79, 78, 77, 76, 78, 75, 74, 74, 72, 77],
'Danmörk': [92, 91, 90, 88, 88, 87, 88, 88, 90, 90, 90],
'Finnland': [89, 89, 89, 85, 85, 86, 85, 88, 87, 87, 87],
'Noregur': [86, 87, 85, 85, 84, 84, 84, 85, 84, 84, 84],
'Svíþjóð': [87, 89, 88, 84, 85, 85, 85, 85, 83, 82, 82]
}
};
const caseStudiesData = {
hrunid: {
title: 'Útrásin og hrunið 2008',
summary: 'Efnahagshrunið var ekki bara fjármálakreppa heldur hrun menningar sem einkenndist af stórmennsku og virðingarleysi fyrir reglum. Hetjudýrkun fjölmiðla og samfélags magnaði upp áhættusækni og oftrú á eigin gæfu.',
analysis: [
{ icon: '🏆', label: 'Stórmennska / Tilkall', text: 'Gríðarlegur vöxtur banka, lúxuslífsstíll, tilkall til óeðlilegra lána.' },
{ icon: '💔', label: 'Skortur á samkennd', text: 'Vanræksla á almennum viðskiptavinum, sala á áhættusömum vörum til almennings.' },
{ icon: '🎭', label: 'Siðferðisleg afneitun', text: 'Reglur taldar „hindranir“, ábyrgð dreift, skaði afneitaður.' },
{ icon: '🎲', label: 'Oftrú á gæfu', text: 'Fordæmalaus áhættutaka byggð á trú á eigin yfirburðum.' },
{ icon: '🗣️', label: 'Árásir á gagnrýnendur', text: 'Gagnrýni á bankakerfið var vísað á bug sem öfund eða vanþekking.' }
]
},
wintris: {
title: 'Panamaskjölin og Wintris-málið (2016)',
summary: 'Málið snerist um augljósa hagsmunaárekstra þáverandi forsætisráðherra. Viðbrögð hans þegar málið var afhjúpað — reiði, afneitun og árás á fjölmiðla — eru kennslubókardæmi um narsissíska vörn.',
analysis: [
{ icon: '👑', label: 'Stórmennska / Tilkall', text: 'Tilkall ráðherra til að vera undanskilinn reglum um hagsmunaárekstra.' },
{ icon: '🤷', label: 'Skortur á samkennd', text: 'Skeytingarleysi um skaðann sem málið olli trausti almennings.' },
{ icon: '📜', label: 'Siðferðisleg afneitun', text: 'Réttlætingar eftir á og tilraunir til að endurskrifa atburðarásina.' },
{ icon: '🤫', label: 'Oftrú á gæfu', text: 'Trú á að hægt væri að halda málinu leyndu og komast upp með það.' },
{ icon: '🎤', label: 'Árásir á gagnrýnendur', text: 'Gengið út úr viðtali, hótanir um málsóknir gegn fjölmiðlum.' }
]
},
samherji: {
title: 'Samherjamálið (2019)',
summary: 'Stærsta spillingarmál Íslandssögunnar sýndi fram á kerfisbundnar mútugreiðslur og peningaþvætti. Viðbrögð fyrirtækisins fylgdu kunnuglegu mynstri: algjör neitun og markvissar árásir á trúverðugleika uppljóstrara og fjölmiðla.',
analysis: [
{ icon: '🌍', label: 'Stórmennska / Tilkall', text: 'Trú á rétt fyrirtækisins til að tryggja sér auðlindir með öllum ráðum.' },
{ icon: '💸', label: 'Skortur á samkennd', text: 'Skeytingarleysi um afleiðingar mútugreiðslna fyrir namibískt samfélag.' },
{ icon: '🛡️', label: 'Siðferðisleg afneitun', text: 'Algjör neitun á sök, tilraun til að kenna undirmönnum um.' },
{ icon: '🕸️', label: 'Oftrú á gæfu', text: 'Trú á að flókið net aflandsfélaga myndi koma í veg fyrir uppgötvun.' },
{ icon: '📢', label: 'Árásir á gagnrýnendur', text: 'Markvissar árásir á trúverðugleika uppljóstrara og fjölmiðla.' }
]
},
islandsbanki: {
title: 'Sala Íslandsbanka (2022)',
summary: 'Salan á hlut ríkisins einkenndist af skorti á gagnsæi, huglægu mati og hagsmunaárekstrum. Viðbrögð ábyrgðaraðila við harðri gagnrýni Ríkisendurskoðunar voru að hafna henni alfarið, sem bendir til stofnanabundins narsissisma.',
analysis: [
{ icon: '🏦', label: 'Stórmennska / Tilkall', text: 'Tilkall Bankasýslunnar til að skilgreina ferlið sjálf, þrátt fyrir gagnrýni.' },
{ icon: '📉', label: 'Skortur á samkennd', text: 'Skortur á tilliti til almannahagsmuna um hámarksverð og gagnsæi.' },
{ icon: '✅', label: 'Siðferðisleg afneitun', text: 'Hafnaði niðurstöðum, kallaði umdeilda sölu „farsæla“.' },
{ icon: '🤔', label: 'Oftrú á gæfu', text: 'Trú á að hægt væri að framkvæma söluna án alvarlegra afleiðinga.' },
{ icon: ' auditors', label: 'Árásir á gagnrýnendur', text: 'Gagnrýndi Ríkisendurskoðun fyrir vanþekkingu og langan rannsóknartíma.' }
]
}
};
const ctx = document.getElementById('corruptionIndexChart').getContext('2d');
const cpiChart = new Chart(ctx, {
type: 'line',
data: {
labels: chartData.years,
datasets: [
{
label: 'Ísland',
data: chartData.countries['Ísland'],
borderColor: '#ef4444', // red-500
backgroundColor: '#ef4444',
borderWidth: 3,
tension: 0.1
},
{
label: 'Danmörk',
data: chartData.countries['Danmörk'],
borderColor: '#0d9488', // teal-600
backgroundColor: '#0d9488',
borderWidth: 2,
tension: 0.1,
borderDash: [5, 5]
},
{
label: 'Finnland',
data: chartData.countries['Finnland'],
borderColor: '#3b82f6', // blue-500
backgroundColor: '#3b82f6',
borderWidth: 1,
tension: 0.1,
},
{
label: 'Noregur',
data: chartData.countries['Noregur'],
borderColor: '#f97316', // orange-500
backgroundColor: '#f97316',
borderWidth: 1,
tension: 0.1,
},
{
label: 'Svíþjóð',
data: chartData.countries['Svíþjóð'],
borderColor: '#eab308', // yellow-500
backgroundColor: '#eab308',
borderWidth: 1,
tension: 0.1,
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Þróun Spillingarvísitölu (CPI) 2014-2024',
font: { size: 18, weight: 'bold' },
color: '#1e293b'
},
subtitle: {
display: true,
text: 'Hærri einkunn þýðir minni spilling. Ísland hefur sigið niður á við, ólíkt nágrönnum sínum.',
font: { size: 12 },
color: '#64748b',
padding: { bottom: 20 }
},
tooltip: {
mode: 'index',
intersect: false,
},
},
scales: {
y: {
beginAtZero: false,
min: 70,
max: 95,
title: {
display: true,
text: 'Stig (af 100)'
}
},
x: {
title: {
display: true,
text: 'Ár'
}
}
}
}
});
const tabs = document.querySelectorAll('.tab');
const tabContentContainer = document.getElementById('tab-content');
function renderTabContent(tabId) {
const content = caseStudiesData[tabId];
if (!content) return;
let analysisHtml = content.analysis.map(item => `
<div class="flex items-start space-x-4">
<div class="text-2xl">${item.icon}</div>
<div>
<h6 class="font-bold text-slate-700">${item.label}</h6>
<p class="text-sm text-slate-600">${item.text}</p>
</div>
</div>
`).join('');
tabContentContainer.innerHTML = `
<h4 class="text-2xl font-bold text-slate-800 mb-2">${content.title}</h4>
<p class="text-slate-600 mb-6">${content.summary}</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
${analysisHtml}
</div>
`;
}
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active', 'bg-teal-600', 'text-white'));
tab.classList.add('active', 'bg-teal-600', 'text-white');
renderTabContent(tab.dataset.tab);
});
});
renderTabContent('hrunid');
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const header = item.querySelector('.accordion-header');
const content = item.querySelector('.accordion-content');
const icon = item.querySelector('.accordion-icon');
header.addEventListener('click', () => {
const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
accordionItems.forEach(i => {
i.querySelector('.accordion-content').style.maxHeight = '0px';
i.querySelector('.accordion-icon').style.transform = 'rotate(0deg)';
});
if (!isOpen) {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
});
});
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
document.querySelectorAll('.nav-link-mobile').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('main section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === entry.target.id) {
link.classList.add('active');
}
});
}
});
}, { rootMargin: '-50% 0px -50% 0px' });
sections.forEach(section => {
observer.observe(section);
});
});
Heimasíða Prakkarans með öllu 
Færðu inn athugasemd