Ole-Morten Duesund
d68dc1515b
- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11) - Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6) - Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6) - Legg til brødsmulesti på alle undersider (2.4.5) - Legg til sitemap-nav i footer på forsiden (2.4.5) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
164 lines
7.1 KiB
HTML
164 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nb">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Arvens forsprang — interaktiv kalkulator</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="nb_NO">
|
||
<meta property="og:site_name" content="Forskjeller">
|
||
<meta property="og:title" content="Arvens forsprang">
|
||
<meta property="og:description" content="Lik innsats, ulikt utgangspunkt — arvet formue vokser eksponentielt.">
|
||
<meta property="og:url" content="https://forskjeller.naiv.no/arv/">
|
||
<meta name="twitter:card" content="summary">
|
||
<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>
|
||
<!-- Privacy-friendly analytics by Plausible -->
|
||
<script async src="/js/script.js"></script>
|
||
<script>
|
||
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
|
||
plausible.init({ endpoint: "/api/event" })
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
|
||
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Arvens forsprang</nav>
|
||
|
||
<header>
|
||
<p class="eyebrow">Lik innsats. Ulikt utgangspunkt.</p>
|
||
<h1>Arvens<br><em>forsprang</em></h1>
|
||
<p class="lead">Person A starter fra null. Person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Se hvordan arv forsterkes over tid.</p>
|
||
<div class="stamp" aria-hidden="true">Fødselslotteriet</div>
|
||
</header>
|
||
|
||
<div class="small-diff-banner">
|
||
<span class="sd-icon" aria-hidden="true">↗</span>
|
||
<span>Pass på å velge rike foreldre. En arv på <strong id="banner-arv">500 000 kr</strong> vokser til over <strong id="banner-gap">—</strong> på <strong id="banner-aar">30</strong> år — uten at B løfter en finger.</span>
|
||
</div>
|
||
|
||
<main id="main">
|
||
|
||
<div class="controls-card">
|
||
<h2>Sjekk selv</h2>
|
||
<div class="controls-grid">
|
||
<div class="control-group">
|
||
<label for="inheritance">Arvebeløp (B mottar)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="inheritance" min="100000" max="3000000" step="50000" value="500000">
|
||
<span class="val-display" aria-live="polite" id="inheritance-out">500 000 kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="monthly">Månedlig sparing (begge)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="monthly" min="1000" max="20000" step="500" value="3000">
|
||
<span class="val-display" aria-live="polite" id="monthly-out">3 000 kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="rate">Årlig avkastning (%)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="rate" min="1" max="12" step="0.5" value="7">
|
||
<span class="val-display" aria-live="polite" id="rate-out">7,0 %</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label for="yrs">Antall år</label>
|
||
<div class="val-row">
|
||
<input type="range" id="yrs" min="5" max="40" step="1" value="30">
|
||
<span class="val-display" aria-live="polite" id="yrs-out">30 år</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-strip">
|
||
<div class="stat">
|
||
<div class="stat-label">Formue A etter <span class="yr-lbl">30</span> år</div>
|
||
<div class="stat-value" id="st-valA">—</div>
|
||
<div class="stat-sub" id="st-subA">startet fra null</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Formue B etter <span class="yr-lbl">30</span> år</div>
|
||
<div class="stat-value" id="st-valB">—</div>
|
||
<div class="stat-sub" id="st-subB">—</div>
|
||
</div>
|
||
<div class="stat stat-diff">
|
||
<div class="stat-label">B har mer (= arv med renter)</div>
|
||
<div class="stat-value" id="st-gap" style="color:var(--accent);">—</div>
|
||
<div class="stat-sub" id="st-gap-sub">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Arven har vokst til</div>
|
||
<div class="stat-value" id="st-grown" style="color:var(--purple);">—</div>
|
||
<div class="stat-sub" id="st-grown-sub">—</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Diagram 1: Formue over tid -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<h3 class="chart-title">Formue over tid</h3>
|
||
<div class="chart-desc">A sparer fra null, B starter med arv — begge sparer likt</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#1a4a8a;"></span>Person A</span>
|
||
<span><span class="swatch" style="background:#c0392b;"></span>Person B</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Formue over tid"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Diagram 2: Absolutt forskjell -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<h3 class="chart-title">Absolutt forskjell</h3>
|
||
<div class="chart-desc">Gapet = arven med rentes rente — vokser alltid</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap (arv × (1+r)ⁿ)</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Absolutt forskjell"></canvas></div>
|
||
</div>
|
||
|
||
<div class="insight" id="insight"></div>
|
||
|
||
<!-- Diagram 3: Arvens andel av Bs formue (prosent) -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<h3 class="chart-title">Arvens andel av Bs formue</h3>
|
||
<div class="chart-desc">Andelen synker over tid, men det absolutte beløpet vokser alltid</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#b5620a;"></span>Arv-andel (%)</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-200"><canvas id="chart3" role="img" aria-label="Diagram: Arvens andel av Bs formue"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Forklaring -->
|
||
<div class="explainer">
|
||
<h3>Arvet formue vokser av seg selv</h3>
|
||
<p>Når B arver en sum, vokser den med rentes rente — helt uavhengig av innsats. A kan spare like mye, like lenge, med samme avkastning — men vil <strong>aldri</strong> ta igjen forskjellen.</p>
|
||
<div class="formula-box">
|
||
Gap = <span>Arv × (1 + r)ⁿ</span><br>
|
||
Gapet vokser eksponentielt, uavhengig av spareinnsats
|
||
</div>
|
||
<p>Over tid utgjør arven en stadig mindre <em>andel</em> av Bs totale formue — fordi egne sparepenger også vokser. Men det absolutte gapet øker alltid. Lik innsats gir aldri lik formue når startlinjen er ulik.</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<a href="../">← Alle kalkulatorer</a> · 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>
|