169 lines
7 KiB
HTML
169 lines
7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nb">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Lønnsforskjellen vokser — interaktiv kalkulator</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<p class="eyebrow">Samme prosent. Ikke det samme resultatet.</p>
|
||
<h1>Lønnsforskjellen<br><em>vokser</em></h1>
|
||
<p class="lead">Prosentvise lønnstillegg ser rettferdige ut — men de gjør de rike rikere, hvert eneste år. Se hva som skjer over tid.</p>
|
||
<div class="stamp">Spis de rike</div>
|
||
</header>
|
||
|
||
<div class="small-diff-banner">
|
||
<span class="sd-icon">↗</span>
|
||
<span>Selv en liten forskjell på <strong>50 000 kr</strong> i startlønn blir til over <strong id="banner-gap">—</strong> i løpet av en karriere — med identisk prosentvekst.</span>
|
||
</div>
|
||
|
||
<main>
|
||
|
||
<div class="controls-card">
|
||
<h2>Sjekk selv</h2>
|
||
<div class="controls-grid">
|
||
<div class="control-group">
|
||
<label>Lønn A — lav startlønn</label>
|
||
<div class="val-row">
|
||
<input type="range" id="salA" min="300000" max="1200000" step="10000" value="500000">
|
||
<span class="val-display" id="salA-out">500 000 kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Lønn B — høy startlønn</label>
|
||
<div class="val-row">
|
||
<input type="range" id="salB" min="300000" max="2000000" step="10000" value="550000">
|
||
<span class="val-display" id="salB-out">550 000 kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Årslig lønnsvekst (% — lik for begge)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="pct" min="1" max="10" step="0.5" value="3.5">
|
||
<span class="val-display" id="pct-out">3,5 %</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Antall år</label>
|
||
<div class="val-row">
|
||
<input type="range" id="yrs" min="5" max="40" step="1" value="20">
|
||
<span class="val-display" id="yrs-out">20 år</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-strip">
|
||
<div class="stat">
|
||
<div class="stat-label">Lønn A etter <span class="yr-lbl">20</span> år</div>
|
||
<div class="stat-value" id="st-finalA">—</div>
|
||
<div class="stat-sub" id="st-monthA">—</div>
|
||
<div class="stat-sub" id="st-subA" style="margin-top:2px;">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Lønn B etter <span class="yr-lbl">20</span> år</div>
|
||
<div class="stat-value" id="st-finalB">—</div>
|
||
<div class="stat-sub" id="st-monthB">—</div>
|
||
<div class="stat-sub" id="st-subB" style="margin-top:2px;">—</div>
|
||
</div>
|
||
<div class="stat stat-diff">
|
||
<div class="stat-label">B tjener mer enn A</div>
|
||
<div class="stat-value" id="st-diffyr" style="color:var(--accent);">—</div>
|
||
<div class="stat-sub" id="st-diffmnd">—</div>
|
||
<div class="stat-sub" id="st-diffstart" style="margin-top:2px;">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Akkumulert differanse</div>
|
||
<div class="stat-value" id="st-cumgap">—</div>
|
||
<div class="stat-sub" id="st-cumgap-sub">over <span class="yr-lbl">20</span> år</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Diagram 1: Årslønn -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Årslønn over tid</div>
|
||
<div class="chart-desc">Begge lønninger vokser med samme prosentsats</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#1a4a8a;"></span>Lønn A</span>
|
||
<span><span class="swatch" style="background:#c0392b;"></span>Lønn B</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Diagram 2: Årlig gap -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Absolutt lønnsforskjell per år</div>
|
||
<div class="chart-desc">Kroneforskjellen i årslønn — vokser hvert år</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap (år)</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
|
||
</div>
|
||
|
||
<div class="insight" id="insight-monthly"></div>
|
||
|
||
<!-- Diagram 3: Månedlig gap -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Lønnsforskjell per måned</div>
|
||
<div class="chart-desc">Hva B mottar ekstra på kontoen — hver måned</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#2c6e49;"></span>Gap (måned)</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-200"><canvas id="chart3"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Diagram 4: Akkumulert -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Akkumulert total lønn utbetalt</div>
|
||
<div class="chart-desc">Summen av alle utbetalinger gjennom hele perioden</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#1a4a8a;"></span>Akkum. A</span>
|
||
<span><span class="swatch" style="background:#c0392b;"></span>Akkum. B</span>
|
||
<span><span class="swatch" style="background:#b5620a;"></span>Akkum. gap</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-240"><canvas id="chart4"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Forklaring -->
|
||
<div class="explainer">
|
||
<h3>Hvorfor er dette viktig?</h3>
|
||
<p>Prosentvise lønnstillegg <strong>ser</strong> rettferdige ut fordi alle får det samme prosenttallet. Men matematikken er asymmetrisk: jo høyere startlønn, jo flere kroner får man i absolutt tillegg — hvert eneste år.</p>
|
||
<div class="formula-box">
|
||
Lønn etter n år = <span>Startlønn × (1 + vekst)ⁿ</span><br>
|
||
Kroneforskjell = <span>(B₀ − A₀) × (1 + vekst)ⁿ</span>
|
||
</div>
|
||
<p>Legg merke til at faktoren <em>(B₀ − A₀)</em> — den opprinnelige forskjellen — aldri forsvinner. Den <strong>multipliseres</strong> eksponentielt. Det er derfor gapet vokser selv om begge får akkurat samme prosentsats.</p>
|
||
<p>Alternativet som bremser gapet er <strong>kronetillegg</strong>: et fast beløp til alle, uavhengig av lønnsnivå. Det gir lavtlønte relativt sett mer og bremser den eksponentielle gapveksten. Norske fagforbund har historisk kjempet for nettopp dette.</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
Laget med Chart.js · Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a>
|
||
</footer>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|