allard
1071 lines
38 KiB
HTML
1071 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mijn Belastingdienst – Aangifte Inkomstenbelasting 2024</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: 'Source Sans 3', Arial, sans-serif;
|
||
font-size: 14px;
|
||
color: #1a1a1a;
|
||
background: #fff;
|
||
}
|
||
|
||
/* ── Top logo bar ── */
|
||
.top-logo-bar {
|
||
border-bottom: 1px solid #ccc;
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.top-logo-bar img {
|
||
height: 44px;
|
||
}
|
||
.logo-placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.logo-shield {
|
||
width: 44px;
|
||
height: 44px;
|
||
background: #154273;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.logo-shield svg { width: 28px; height: 28px; }
|
||
.logo-site-name {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* ── Header ── */
|
||
.main-header {
|
||
background: #c8daea;
|
||
padding: 12px 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #a8c0d8;
|
||
}
|
||
.main-header .app-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
}
|
||
.main-header .user-name {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
/* ── Layout ── */
|
||
.app-body {
|
||
display: flex;
|
||
min-height: calc(100vh - 120px);
|
||
}
|
||
|
||
/* ── Sidebar ── */
|
||
.sidebar {
|
||
width: 280px;
|
||
min-width: 280px;
|
||
border-right: 1px solid #ddd;
|
||
padding: 20px 0;
|
||
background: #fff;
|
||
overflow-y: auto;
|
||
}
|
||
.sidebar-title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
padding: 0 16px 12px 16px;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.nav-tree { list-style: none; }
|
||
.nav-tree li { }
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 5px 16px;
|
||
font-size: 13px;
|
||
color: #1a1a1a;
|
||
cursor: pointer;
|
||
line-height: 1.4;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item:hover { background: #e8f0f8; }
|
||
.nav-item.active {
|
||
background: #dce8f5;
|
||
font-weight: 600;
|
||
color: #154273;
|
||
}
|
||
.nav-item.section-header {
|
||
font-weight: 600;
|
||
padding-top: 8px;
|
||
}
|
||
.nav-item .chevron {
|
||
font-size: 10px;
|
||
color: #333;
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-sub {
|
||
list-style: none;
|
||
padding-left: 24px;
|
||
}
|
||
.nav-sub .nav-item { font-weight: 400; }
|
||
|
||
/* ── Main content ── */
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 28px 36px;
|
||
max-width: 820px;
|
||
}
|
||
|
||
.content-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
}
|
||
.content-subtitle {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
/* ── Employer block ── */
|
||
.employer-block {
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
margin-bottom: 24px;
|
||
background: #fff;
|
||
}
|
||
|
||
.employer-header {
|
||
background: #f5f5f5;
|
||
border-bottom: 1px solid #ccc;
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.employer-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
.collapse-icon {
|
||
color: #154273;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.btn-verwijderen {
|
||
background: none;
|
||
border: none;
|
||
color: #154273;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-family: inherit;
|
||
text-decoration: underline;
|
||
}
|
||
.btn-verwijderen:hover { color: #0f2f52; }
|
||
.trash-icon { font-size: 14px; }
|
||
|
||
.employer-body { padding: 20px; }
|
||
|
||
/* ── Form row ── */
|
||
.form-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 16px;
|
||
gap: 16px;
|
||
}
|
||
.form-label-col {
|
||
min-width: 200px;
|
||
font-size: 14px;
|
||
padding-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
flex-shrink: 0;
|
||
}
|
||
.form-value-col {
|
||
flex: 1;
|
||
}
|
||
|
||
.help-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 1px solid #154273;
|
||
color: #154273;
|
||
border-radius: 2px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
background: white;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.bd-text-input {
|
||
width: 100%;
|
||
max-width: 320px;
|
||
border: 1px solid #aaa;
|
||
border-radius: 2px;
|
||
padding: 6px 10px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
background: #eaf3fb;
|
||
color: #1a1a1a;
|
||
}
|
||
.bd-text-input:focus {
|
||
outline: none;
|
||
border-color: #154273;
|
||
box-shadow: 0 0 0 2px rgba(21,66,115,0.2);
|
||
}
|
||
.bd-text-input[readonly] {
|
||
background: #f0f0f0;
|
||
color: #555;
|
||
}
|
||
|
||
/* ── Three-column money fields ── */
|
||
.money-row {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin-bottom: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
.money-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.money-label {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.money-input-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #aaa;
|
||
border-radius: 2px;
|
||
background: #eaf3fb;
|
||
overflow: hidden;
|
||
width: 130px;
|
||
}
|
||
.money-input-wrap .euro-sign {
|
||
padding: 6px 8px;
|
||
background: #eaf3fb;
|
||
font-size: 14px;
|
||
color: #333;
|
||
border-right: 1px solid #aaa;
|
||
flex-shrink: 0;
|
||
}
|
||
.money-input-wrap input {
|
||
border: none;
|
||
background: #eaf3fb;
|
||
padding: 6px 8px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
width: 100%;
|
||
text-align: right;
|
||
}
|
||
.money-input-wrap input:focus { outline: none; }
|
||
|
||
/* ── Sub-section title ── */
|
||
.sub-section-title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin: 20px 0 12px 0;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
/* ── Radio ── */
|
||
.radio-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin-top: 4px;
|
||
}
|
||
.radio-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 5px 12px 5px 0;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.radio-option input[type="radio"] {
|
||
accent-color: #154273;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
/* ── Add button ── */
|
||
.btn-toevoegen {
|
||
background: none;
|
||
border: 1px solid #154273;
|
||
color: #154273;
|
||
padding: 6px 16px;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
margin-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.btn-toevoegen:hover { background: #e8f0f8; }
|
||
|
||
/* ── Textarea ── */
|
||
.form-textarea {
|
||
width: 100%;
|
||
max-width: 480px;
|
||
border: 1px solid #aaa;
|
||
border-radius: 2px;
|
||
padding: 6px 10px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
background: #eaf3fb;
|
||
resize: vertical;
|
||
min-height: 60px;
|
||
}
|
||
|
||
/* ── Bottom nav ── */
|
||
.bottom-nav {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 32px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
.btn-primary {
|
||
background: #154273;
|
||
color: white;
|
||
border: none;
|
||
padding: 9px 24px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: inherit;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.btn-primary:hover { background: #1a5296; }
|
||
.btn-secondary {
|
||
background: white;
|
||
color: #154273;
|
||
border: 1px solid #154273;
|
||
padding: 8px 20px;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.btn-secondary:hover { background: #e8f0f8; }
|
||
|
||
/* ── Tooltip ── */
|
||
.tooltip {
|
||
display: none;
|
||
position: absolute;
|
||
background: #154273;
|
||
color: white;
|
||
padding: 8px 12px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
max-width: 240px;
|
||
line-height: 1.5;
|
||
z-index: 100;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
||
}
|
||
.tooltip::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -6px; left: 12px;
|
||
border: 6px solid transparent;
|
||
border-bottom-color: #154273;
|
||
border-top: none;
|
||
}
|
||
.help-container { position: relative; display: inline-block; }
|
||
.help-container:hover .tooltip { display: block; top: 100%; margin-top: 4px; left: 0; }
|
||
|
||
/* ── Toast ── */
|
||
.toast {
|
||
position: fixed; bottom: 24px; right: 24px;
|
||
background: #39870c; color: white;
|
||
padding: 12px 20px; border-radius: 3px;
|
||
font-size: 13px; font-weight: 600;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
||
transform: translateY(60px); opacity: 0;
|
||
transition: all 0.3s ease; z-index: 1000;
|
||
}
|
||
.toast.show { transform: translateY(0); opacity: 1; }
|
||
|
||
/* ── Divider ── */
|
||
hr.section-divider { border: none; border-top: 1px solid #e0e0e0; margin: 20px 0; }
|
||
|
||
/* ── Pension blocks ── */
|
||
.pension-block {
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
margin-bottom: 16px;
|
||
background: #fff;
|
||
}
|
||
.pension-header {
|
||
background: #f5f5f5;
|
||
border-bottom: 1px solid #ccc;
|
||
padding: 9px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ── Tabs ── */
|
||
.section-tabs { display: none; }
|
||
.section-tabs.active-section { display: block; }
|
||
|
||
/* ── Info text ── */
|
||
.info-text {
|
||
font-size: 13px;
|
||
color: #555;
|
||
margin-bottom: 16px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.sidebar { display: none; }
|
||
.main-content { padding: 16px; }
|
||
.money-row { flex-wrap: wrap; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Top logo -->
|
||
<div class="top-logo-bar">
|
||
<div class="logo-placeholder">
|
||
<div class="logo-shield">
|
||
<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M14 2L4 7v7c0 5.5 4.3 10.7 10 12 5.7-1.3 10-6.5 10-12V7L14 2z" fill="white" opacity="0.9"/>
|
||
<path d="M14 2L4 7v7c0 5.5 4.3 10.7 10 12 5.7-1.3 10-6.5 10-12V7L14 2z" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1"/>
|
||
<text x="9" y="19" font-size="12" font-weight="bold" fill="#154273" font-family="Arial">BD</text>
|
||
</svg>
|
||
</div>
|
||
<span class="logo-site-name">Belastingdienst</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main header -->
|
||
<div class="main-header">
|
||
<span class="app-title">Mijn Belastingdienst</span>
|
||
<span class="user-name">A C KRINGS</span>
|
||
</div>
|
||
|
||
<!-- App body -->
|
||
<div class="app-body">
|
||
|
||
<!-- Sidebar nav -->
|
||
<nav class="sidebar">
|
||
<div class="sidebar-title">Aangifte Inkomstenbelasting 2024</div>
|
||
<ul class="nav-tree">
|
||
<li><span class="nav-item" onclick="showSection('intro')">Introductie</span></li>
|
||
<li><span class="nav-item" onclick="showSection('persoonlijk')">Persoonlijke gegevens A C KRINGS</span></li>
|
||
<li><span class="nav-item" onclick="showSection('partner')">Partner</span></li>
|
||
<li><span class="nav-item" onclick="showSection('vooraf')">Vooraf ingevulde gegevens</span></li>
|
||
<li><span class="nav-item" onclick="showSection('partner-gegevens')">Persoonlijke gegevens partner</span></li>
|
||
<li><span class="nav-item" onclick="showSection('kinderen')">Persoonlijke gegevens kinderen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('onderneming')">Onderneming</span></li>
|
||
|
||
<li>
|
||
<span class="nav-item section-header" onclick="toggleNav('nav-inkomsten')">
|
||
<span class="chevron" id="chev-nav-inkomsten">▼</span> Inkomsten
|
||
</span>
|
||
<ul class="nav-sub" id="nav-inkomsten">
|
||
<li><span class="nav-item active" onclick="showSection('loondienst')">Inkomsten uit loondienst</span></li>
|
||
<li><span class="nav-item" onclick="showSection('pensioen')">Pensioen en andere uitkeringen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('overige-inkomsten')">Overige inkomsten</span></li>
|
||
<li><span class="nav-item" onclick="showSection('beschikbaar')">Inkomsten uit beschikbaar gestelde bezittingen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('partneralimentatie')">Partneralimentatie</span></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li><span class="nav-item" onclick="showSection('woningen')">Woningen en andere onroerende zaken</span></li>
|
||
|
||
<li>
|
||
<span class="nav-item section-header" onclick="toggleNav('nav-bank')">
|
||
<span class="chevron" id="chev-nav-bank">▲</span> Bankrekeningen en andere bezittingen
|
||
</span>
|
||
<ul class="nav-sub" id="nav-bank" style="display:none">
|
||
<li><span class="nav-item" onclick="showSection('bank')">Bank- en spaarrekeningen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('aanmerkelijk')">Aanmerkelijk belang</span></li>
|
||
<li><span class="nav-item" onclick="showSection('beleggingen')">Beleggingen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('kapitaalverzekeringen')">Kapitaalverzekeringen</span></li>
|
||
<li><span class="nav-item" onclick="showSection('bouwdepots')">Bouwdepots</span></li>
|
||
<li><span class="nav-item" onclick="showSection('andere-bezittingen')">Andere bezittingen</span></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<span class="nav-item section-header" onclick="toggleNav('nav-hypotheken')">
|
||
<span class="chevron" id="chev-nav-hypotheken">▼</span> Hypotheken en andere schulden
|
||
</span>
|
||
<ul class="nav-sub" id="nav-hypotheken">
|
||
<li><span class="nav-item" onclick="showSection('hypotheken')">Hypotheken en leningen woning</span></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<span class="nav-item section-header" onclick="toggleNav('nav-uitgaven')">
|
||
<span class="chevron" id="chev-nav-uitgaven">▲</span> Uitgaven
|
||
</span>
|
||
<ul class="nav-sub" id="nav-uitgaven" style="display:none">
|
||
<li><span class="nav-item" onclick="showSection('lijfrente')">Uitgaven voor lijfrente</span></li>
|
||
<li><span class="nav-item" onclick="showSection('zorgkosten')">Zorgkosten</span></li>
|
||
<li><span class="nav-item" onclick="showSection('giften')">Giften</span></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- Main content -->
|
||
<main class="main-content">
|
||
|
||
<!-- LOONDIENST section -->
|
||
<div id="section-loondienst" class="section-tabs active-section">
|
||
<div class="content-title">Inkomsten uit loondienst</div>
|
||
<div class="content-subtitle">A C KRINGS</div>
|
||
|
||
<!-- Employer block: Ministerie van Financiën -->
|
||
<div class="employer-block" id="employer-0">
|
||
<div class="employer-header" onclick="toggleEmployer(0)">
|
||
<div class="employer-header-left">
|
||
<span class="collapse-icon" id="emp-icon-0">∧</span>
|
||
Werkgever: MINISTERIE VAN FINANCIEN
|
||
</div>
|
||
<button class="btn-verwijderen" onclick="event.stopPropagation(); verwijderWerkgever(0)">
|
||
<span class="trash-icon">🗑</span> verwijderen
|
||
</button>
|
||
</div>
|
||
<div class="employer-body" id="emp-body-0">
|
||
<div class="form-row">
|
||
<div class="form-label-col">
|
||
Soort inkomsten:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">Het soort inkomsten bepaalt hoe de loonheffing wordt berekend. Loon binnen Nederland is het meest gangbaar.</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-value-col">
|
||
<input class="bd-text-input" type="text" value="Loon binnen Nederland" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">
|
||
Werkgever:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">De naam van uw werkgever zoals vermeld op uw jaaropgave.</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-value-col">
|
||
<input class="bd-text-input" type="text" id="wg0-naam" value="MINISTERIE VAN FINANCIEN">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">
|
||
Loon:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">Het brutoloon zoals vermeld op uw jaaropgave (rubriek 1).</div>
|
||
</div>
|
||
</div>
|
||
<div class="money-input-wrap">
|
||
<span class="euro-sign">€</span>
|
||
<input type="number" id="wg0-loon" value="118231" oninput="herbereken()">
|
||
</div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">
|
||
Loonheffing:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">De ingehouden loonheffing zoals vermeld op uw jaaropgave (rubriek 2).</div>
|
||
</div>
|
||
</div>
|
||
<div class="money-input-wrap">
|
||
<span class="euro-sign">€</span>
|
||
<input type="number" id="wg0-loonheffing" value="41992" oninput="herbereken()">
|
||
</div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">
|
||
Arbeidskorting:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">De arbeidskorting die uw werkgever al heeft verrekend (rubriek 5).</div>
|
||
</div>
|
||
</div>
|
||
<div class="money-input-wrap">
|
||
<span class="euro-sign">€</span>
|
||
<input type="number" id="wg0-arbeidskorting" value="869" oninput="herbereken()">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label-col" style="align-self:flex-start; padding-top: 4px;">
|
||
Andere inkomsten bij deze werkgever waarop geen loonheffing wordt ingehouden (zoals fooien):
|
||
<div class="help-container" style="margin-left:4px">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">Bijv. fooien of andere inkomsten die niet op de loonstrook staan.</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-value-col" style="padding-top:4px">
|
||
<div class="money-input-wrap">
|
||
<span class="euro-sign">€</span>
|
||
<input type="number" id="wg0-andere" value="0" oninput="herbereken()">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub-section-title">Reiskosten MINISTERIE VAN FINANCIEN</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">
|
||
Reisde U met openbaar vervoer naar het werk?:
|
||
<div class="help-container">
|
||
<button class="help-btn">?</button>
|
||
<div class="tooltip">U kunt reiskosten aftrekken als u met openbaar vervoer reisde en geen of onvoldoende vergoeding ontving.</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-value-col">
|
||
<div class="radio-row">
|
||
<label class="radio-option"><input type="radio" name="reiskosten-0" value="ja"> ja</label>
|
||
<label class="radio-option"><input type="radio" name="reiskosten-0" value="nee" checked> nee</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add employer button -->
|
||
<button class="btn-toevoegen" onclick="alert('Werkgever toevoegen wordt opgeslagen in CouchDB')">
|
||
＋ Werkgever toevoegen
|
||
</button>
|
||
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="opslaanEnVolgende()">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="showSection('vooraf')">◀ Vorige</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PENSIOEN section -->
|
||
<div id="section-pensioen" class="section-tabs">
|
||
<div class="content-title">Pensioen en andere uitkeringen</div>
|
||
<div class="content-subtitle">A C KRINGS</div>
|
||
<p class="info-text">Hieronder staan de ontvangen pensioenen en uitkeringen. Controleer de bedragen aan de hand van uw jaaropgaven.</p>
|
||
|
||
<div class="pension-block">
|
||
<div class="pension-header" onclick="togglePension(this)">
|
||
<span>∧ Nationale Nederlanden – € 646</span>
|
||
<button class="btn-verwijderen" onclick="event.stopPropagation()"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Loon:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="646"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Loonheffing:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="114"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pension-block">
|
||
<div class="pension-header" onclick="togglePension(this)">
|
||
<span>∧ ABP – € 45.926</span>
|
||
<button class="btn-verwijderen" onclick="event.stopPropagation()"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Loon:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="45926"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Loonheffing:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="10149"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pension-block">
|
||
<div class="pension-header" onclick="togglePension(this)">
|
||
<span>∧ Nationale Nederlanden – € 472</span>
|
||
<button class="btn-verwijderen" onclick="event.stopPropagation()"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Loon:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="472"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Loonheffing:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="82"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pension-block">
|
||
<div class="pension-header" onclick="togglePension(this)">
|
||
<span>∧ UWV – € 13.336</span>
|
||
<button class="btn-verwijderen" onclick="event.stopPropagation()"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Loon:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="13336"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Loonheffing:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="2538"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-toevoegen">＋ Uitkering toevoegen</button>
|
||
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="opslaanEnVolgende()">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="showSection('loondienst')">◀ Vorige</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WONINGEN section -->
|
||
<div id="section-woningen" class="section-tabs">
|
||
<div class="content-title">Woningen en andere onroerende zaken</div>
|
||
<div class="content-subtitle">A C KRINGS</div>
|
||
|
||
<div class="employer-block">
|
||
<div class="employer-header">
|
||
<div class="employer-header-left">∧ Warnsveld – Postcode 7231GH nr. 42</div>
|
||
<button class="btn-verwijderen"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="form-row">
|
||
<div class="form-label-col">Situatie begin jaar:</div>
|
||
<div class="form-value-col">
|
||
<input class="bd-text-input" type="text" value="woning: Hoofdverblijf" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">WOZ-waarde:</div>
|
||
<div class="form-value-col">
|
||
<div class="money-input-wrap">
|
||
<span class="euro-sign">€</span>
|
||
<input type="number" value="528000">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Verhuurd in 2024?</div>
|
||
<div class="form-value-col">
|
||
<div class="radio-row">
|
||
<label class="radio-option"><input type="radio" name="verhuurd" value="ja"> ja</label>
|
||
<label class="radio-option"><input type="radio" name="verhuurd" value="nee" checked> nee</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Erfpachtcanon betaald?</div>
|
||
<div class="form-value-col">
|
||
<div class="radio-row">
|
||
<label class="radio-option"><input type="radio" name="erfpacht" value="ja"> ja</label>
|
||
<label class="radio-option"><input type="radio" name="erfpacht" value="nee" checked> nee</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="opslaanEnVolgende()">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="showSection('pensioen')">◀ Vorige</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HYPOTHEKEN section -->
|
||
<div id="section-hypotheken" class="section-tabs">
|
||
<div class="content-title">Hypotheken en andere schulden</div>
|
||
<div class="content-subtitle">A C KRINGS</div>
|
||
|
||
<div class="employer-block">
|
||
<div class="employer-header">
|
||
<div class="employer-header-left">∧ BijBouwe – nr. 290396101</div>
|
||
<button class="btn-verwijderen"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Schuld 01-01-2024:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="217500"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Schuld 31-12-2024:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="217500"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Rente betaald:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="3546"></div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Schuld voor eigen woning?</div>
|
||
<div class="form-value-col">
|
||
<div class="radio-row">
|
||
<label class="radio-option"><input type="radio" name="woning-schuld" value="ja" checked> ja</label>
|
||
<label class="radio-option"><input type="radio" name="woning-schuld" value="nee"> nee</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="employer-block">
|
||
<div class="employer-header">
|
||
<div class="employer-header-left">∧ BijBouwe – nr. 290396101 (aflossing)</div>
|
||
<button class="btn-verwijderen"><span class="trash-icon">🗑</span> verwijderen</button>
|
||
</div>
|
||
<div class="employer-body">
|
||
<div class="money-row">
|
||
<div class="money-col">
|
||
<div class="money-label">Schuld 01-01-2024:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="88431"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Schuld 31-12-2024:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="85263"></div>
|
||
</div>
|
||
<div class="money-col">
|
||
<div class="money-label">Rente betaald:</div>
|
||
<div class="money-input-wrap"><span class="euro-sign">€</span><input type="number" value="1423"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-toevoegen">＋ Lening toevoegen</button>
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="opslaanEnVolgende()">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="showSection('woningen')">◀ Vorige</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Placeholder sections -->
|
||
<div id="section-intro" class="section-tabs">
|
||
<div class="content-title">Introductie</div>
|
||
<p class="info-text" style="margin-top:12px">Welkom bij de aangifte Inkomstenbelasting 2024. Doorloop alle stappen via het menu links. Uw gegevens worden opgeslagen als CouchDB-document zodra u op <strong>Opslaan</strong> klikt.</p>
|
||
<div class="bottom-nav"><button class="btn-primary" onclick="showSection('persoonlijk')">Volgende ▶</button></div>
|
||
</div>
|
||
<div id="section-persoonlijk" class="section-tabs">
|
||
<div class="content-title">Persoonlijke gegevens A C KRINGS</div>
|
||
<div style="margin-top:12px">
|
||
<div class="form-row">
|
||
<div class="form-label-col">Naam:</div>
|
||
<div class="form-value-col"><input class="bd-text-input" type="text" value="A C KRINGS"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Geboortedatum:</div>
|
||
<div class="form-value-col"><input class="bd-text-input" type="date" value="1956-05-22"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Burgerservicenummer:</div>
|
||
<div class="form-value-col"><input class="bd-text-input" type="text" value="4444444444"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="showSection('partner')">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
<div id="section-partner" class="section-tabs">
|
||
<div class="content-title">Partner</div>
|
||
<div style="margin-top:12px">
|
||
<div class="form-row">
|
||
<div class="form-label-col">Naam partner:</div>
|
||
<div class="form-value-col"><input class="bd-text-input" type="text" value="H M A VAN DER POL"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Geboortedatum partner:</div>
|
||
<div class="form-value-col"><input class="bd-text-input" type="date" value="1960-05-15"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-label-col">Fiscale partner?</div>
|
||
<div class="form-value-col">
|
||
<div class="radio-row">
|
||
<label class="radio-option"><input type="radio" name="fiscaal" value="ja" checked> ja</label>
|
||
<label class="radio-option"><input type="radio" name="fiscaal" value="nee"> nee</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<button class="btn-primary" onclick="showSection('loondienst')">Volgende ▶</button>
|
||
<button class="btn-secondary" onclick="opslaanConcept()">💾 Opslaan</button>
|
||
</div>
|
||
</div>
|
||
<div id="section-vooraf" class="section-tabs">
|
||
<div class="content-title">Vooraf ingevulde gegevens</div>
|
||
<p class="info-text" style="margin-top:12px">De Belastingdienst heeft een aantal gegevens vooraf ingevuld op basis van informatie van uw werkgever(s), pensioenuitvoerder(s) en andere instanties. Controleer deze gegevens zorgvuldig.</p>
|
||
<div class="bottom-nav"><button class="btn-primary" onclick="showSection('loondienst')">Naar inkomsten ▶</button></div>
|
||
</div>
|
||
<div id="section-partner-gegevens" class="section-tabs"><div class="content-title">Persoonlijke gegevens partner</div><p class="info-text" style="margin-top:12px">H M A VAN DER POL – BSN: 3333333333</p></div>
|
||
<div id="section-kinderen" class="section-tabs"><div class="content-title">Persoonlijke gegevens kinderen</div><p class="info-text" style="margin-top:12px">2 kinderen geregistreerd: A M KRINGS (2005) en A C KRINGS (2006).</p></div>
|
||
<div id="section-onderneming" class="section-tabs"><div class="content-title">Onderneming</div><p class="info-text" style="margin-top:12px">Ondernemer IB: nee. Geldverstrekker: ja.</p></div>
|
||
<div id="section-overige-inkomsten" class="section-tabs"><div class="content-title">Overige inkomsten</div><p class="info-text" style="margin-top:12px">Geen overige inkomsten opgegeven.</p></div>
|
||
<div id="section-beschikbaar" class="section-tabs"><div class="content-title">Inkomsten uit beschikbaar gestelde bezittingen</div></div>
|
||
<div id="section-partneralimentatie" class="section-tabs"><div class="content-title">Partneralimentatie</div></div>
|
||
<div id="section-bank" class="section-tabs"><div class="content-title">Bank- en spaarrekeningen</div></div>
|
||
<div id="section-aanmerkelijk" class="section-tabs"><div class="content-title">Aanmerkelijk belang</div></div>
|
||
<div id="section-beleggingen" class="section-tabs"><div class="content-title">Beleggingen</div></div>
|
||
<div id="section-kapitaalverzekeringen" class="section-tabs"><div class="content-title">Kapitaalverzekeringen</div></div>
|
||
<div id="section-bouwdepots" class="section-tabs"><div class="content-title">Bouwdepots</div></div>
|
||
<div id="section-andere-bezittingen" class="section-tabs"><div class="content-title">Andere bezittingen</div></div>
|
||
<div id="section-lijfrente" class="section-tabs"><div class="content-title">Uitgaven voor lijfrente</div></div>
|
||
<div id="section-zorgkosten" class="section-tabs"><div class="content-title">Zorgkosten</div></div>
|
||
<div id="section-giften" class="section-tabs"><div class="content-title">Giften</div></div>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Toast -->
|
||
<div class="toast" id="toast">✓ Opgeslagen in CouchDB</div>
|
||
|
||
<script>
|
||
function showSection(id) {
|
||
document.querySelectorAll('.section-tabs').forEach(s => s.classList.remove('active-section'));
|
||
const el = document.getElementById('section-' + id);
|
||
if (el) el.classList.add('active-section');
|
||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
document.querySelectorAll('.nav-item').forEach(n => {
|
||
if (n.getAttribute('onclick') && n.getAttribute('onclick').includes("'" + id + "'")) {
|
||
n.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
function toggleNav(id) {
|
||
const el = document.getElementById(id);
|
||
const chev = document.getElementById('chev-' + id);
|
||
if (el.style.display === 'none') {
|
||
el.style.display = 'block';
|
||
if (chev) chev.textContent = '▼';
|
||
} else {
|
||
el.style.display = 'none';
|
||
if (chev) chev.textContent = '▲';
|
||
}
|
||
}
|
||
|
||
function toggleEmployer(idx) {
|
||
const body = document.getElementById('emp-body-' + idx);
|
||
const icon = document.getElementById('emp-icon-' + idx);
|
||
if (body.style.display === 'none') {
|
||
body.style.display = 'block';
|
||
icon.textContent = '∧';
|
||
} else {
|
||
body.style.display = 'none';
|
||
icon.textContent = '∨';
|
||
}
|
||
}
|
||
|
||
function togglePension(header) {
|
||
const body = header.nextElementSibling;
|
||
const span = header.querySelector('span');
|
||
if (body.style.display === 'none') {
|
||
body.style.display = 'block';
|
||
span.textContent = span.textContent.replace('∨', '∧');
|
||
} else {
|
||
body.style.display = 'none';
|
||
span.textContent = span.textContent.replace('∧', '∨');
|
||
}
|
||
}
|
||
|
||
function verwijderWerkgever(idx) {
|
||
if (confirm('Werkgever verwijderen?')) {
|
||
document.getElementById('employer-' + idx).style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function opslaanConcept() {
|
||
const data = {
|
||
_id: "aangifte-2024-allard",
|
||
login_naam: "allard",
|
||
jaar_aangifte: 2024,
|
||
naam: "A C KRINGS",
|
||
inkomstenUitLoondienst: [{
|
||
werkgever: document.getElementById('wg0-naam').value,
|
||
loon: parseInt(document.getElementById('wg0-loon').value),
|
||
loonheffing: parseInt(document.getElementById('wg0-loonheffing').value),
|
||
arbeidskorting: parseInt(document.getElementById('wg0-arbeidskorting').value),
|
||
andereInkomsten: parseInt(document.getElementById('wg0-andere').value) || null,
|
||
}],
|
||
saved_at: new Date().toISOString()
|
||
};
|
||
console.log('CouchDB PUT:', JSON.stringify(data, null, 2));
|
||
showToast('✓ Concept opgeslagen in CouchDB');
|
||
}
|
||
|
||
function opslaanEnVolgende() { opslaanConcept(); }
|
||
function herbereken() {}
|
||
|
||
function showToast(msg) {
|
||
const t = document.getElementById('toast');
|
||
t.textContent = msg;
|
||
t.classList.add('show');
|
||
setTimeout(() => t.classList.remove('show'), 3000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|