

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <script>(function(){var t=localStorage.getItem('preferredTheme');if(t==='light'||t==='dark'){document.documentElement.setAttribute('data-bs-theme',t);}})()</script>
      <!--
    Thank you for looking at my code. Many efforts, tears and countless hours hae been put into this. So, please keep this place tidied up and don't break anything. Cheers. And yes, thats a reference.
    Incidentally, all the calculations have the same result: 42.                                                                              
    -->
    

<!-- Analytics go here -->
<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//namary.nl/trckr68/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '7']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
    
    
    










  



<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Privacy-friendly calculators and tools for mortgages, loans, income, VAT, and more. Calculate mortgage costs, student loan payments, and make informed financial decisions.">
<meta name="author" content="Factcheck.nl">

<title>Factcheck.nl - Privacy-friendly Calculators &amp; Tools</title>


<link rel="canonical" href="https://www.factcheck.nl/">


<meta property="og:type" content="website">
<meta property="og:title" content="Factcheck.nl - Privacy-friendly Calculators &amp; Tools">
<meta property="og:description" content="Privacy-friendly calculators and tools for mortgages, loans, income, VAT, and more. Calculate mortgage costs, student loan payments, and make informed financial decisions.">
<meta property="og:url" content="https://www.factcheck.nl/">
<meta property="og:image" content="https://www.factcheck.nl/static/icons/favicon.png">
<meta property="og:site_name" content="Factcheck.nl">


<meta property="og:locale" content="en_GB">



<meta property="og:locale:alternate" content="nl_NL">



<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Factcheck.nl - Privacy-friendly Calculators &amp; Tools">
<meta name="twitter:description" content="Privacy-friendly calculators and tools for mortgages, loans, income, VAT, and more. Calculate mortgage costs, student loan payments, and make informed financial decisions.">
<meta name="twitter:image" content="https://www.factcheck.nl/static/icons/favicon.png">




<link rel="alternate" hreflang="en" href="https://www.factcheck.nl/">
<link rel="alternate" hreflang="x-default" href="https://www.factcheck.nl/">


<link rel="alternate" hreflang="nl" href="https://www.factcheck.nl/nl/">


    
    



  








<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Factcheck.nl",
  "url": "https://factcheck.nl/",
  "description": "Privacy-friendly calculators and tools for mortgages, loans, income, VAT, and more. Calculate mortgage costs, student loan payments, and make informed financial decisions.",
  "inLanguage": "en-GB",
  "publisher": {
    "@type": "Organization",
    "name": "Factcheck.nl",
    "url": "https://factcheck.nl/"
  }
}
</script>







    
    

<!-- PWA Configuration -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Factcheck.nl Calculators">
<meta name="theme-color" content="#000000">

<!-- Favicons and Icons -->
<link rel="icon" type="image/png" href="/static/icons/favicon.png">
<link rel="apple-touch-icon" href="/static/icons/favicon.png">

<!-- PWA Manifest -->
<link rel="manifest" href="/static/pwa/manifest.json">
<!-- End PWA Configuration -->  

<!-- Bootstrap core CSS -->
<link href="/static/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/static/styling/local-style.css" rel="stylesheet">

<!-- Bootstrap icons CSS -->
<link href="/static/fonts/bootstrapicons/bootstrap-icons.min.css" rel="stylesheet">

</head>

  <body class="">
    
    

<!-- The Menu goes here, all basic bootstrap stuff -->

<nav class="navbar navbar-expand-lg fixed-top" id="mainNavbar" aria-label="Main navigation">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Factcheck.nl <span class="fs-6 fw-light" style="vertical-align: super;">beta</span></a>
      <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-collapse offcanvas-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item active">
            <a class="nav-link" href="/">Home</a>
          </li>

          <li class="nav-item active">
            <a class="nav-link" href="/premium">+Premium</a>
          </li>

          <li class="nav-item active">
            <a class="nav-link" href="https://www.patreon.com/cw/factchecknl" target="_blank">Patreon</a>
          </li>

          <li class="nav-item active">
            <a class="nav-link" href="/about">About</a>
          </li>


        </ul>

        <!-- Language Preference Toggle -->
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <span id="currentLangFlag">🇬🇧</span> <span id="currentLangText">EN</span>
            </a>
            
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langDropdown">
              <li><a class="dropdown-item" href="https://www.factcheck.nl/" onclick="setLanguagePreference('en')" id="langOptionEn">
                🇬🇧 English
              </a></li>
              <li><a class="dropdown-item" href="https://www.factcheck.nl/nl/" onclick="setLanguagePreference('nl')" id="langOptionNl">
                🇳🇱 Nederlands
              </a></li>
            </ul>
          </li>
        </ul>

        <script>
        // Language preference functionality
        function setLanguagePreference(lang) {
            localStorage.setItem('preferredLanguage', lang);
            updateLanguageDisplay(lang);
            
            // Apply translations if the function exists on the page
            if (typeof window.onLanguageChange === 'function') {
                window.onLanguageChange(lang);
            }
        }

        function updateLanguageDisplay(lang) {
            const flagSpan = document.getElementById('currentLangFlag');
            const textSpan = document.getElementById('currentLangText');
            const enOption = document.getElementById('langOptionEn');
            const nlOption = document.getElementById('langOptionNl');
            
            if (lang === 'nl') {
                flagSpan.textContent = '🇳🇱';
                textSpan.textContent = 'NL';
                if (nlOption) nlOption.classList.add('active');
                if (enOption) enOption.classList.remove('active');
            } else {
                flagSpan.textContent = '🇬🇧';
                textSpan.textContent = 'EN';
                if (enOption) enOption.classList.add('active');
                if (nlOption) nlOption.classList.remove('active');
            }
        }

        function getLanguagePreference() {
            // Check localStorage first
            const saved = localStorage.getItem('preferredLanguage');
            if (saved) return saved;
            
            // Fall back to browser language detection
            const browserLang = navigator.language || navigator.userLanguage;
            return browserLang.toLowerCase().startsWith('nl') ? 'nl' : 'en';
        }

        // Initialize language display on page load.
        // Source of truth for what the dropdown shows is the page's actual
        // language (set by Flask via <html lang="...">), not localStorage.
        document.addEventListener('DOMContentLoaded', function() {
            const pageLang = (document.documentElement.lang || 'en').toLowerCase().startsWith('nl') ? 'nl' : 'en';
            updateLanguageDisplay(pageLang);
        });
        </script>

        <!-- Theme Toggle -->
        <ul class="navbar-nav">
          <li class="nav-item">
            <button class="nav-link border-0 bg-transparent px-2 d-flex align-items-center justify-content-center mx-auto" id="themeToggle" type="button" aria-label="Toggle dark/light mode" title="Toggle theme">
              <i class="bi bi-moon-stars-fill" id="themeIcon"></i>
            </button>
          </li>
        </ul>

        <script>
        (function() {
          function applyTheme(theme) {
            document.documentElement.setAttribute('data-bs-theme', theme);
            localStorage.setItem('preferredTheme', theme);
            var icon = document.getElementById('themeIcon');
            if (icon) {
              icon.className = theme === 'light' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
            }
          }

          var btn = document.getElementById('themeToggle');
          if (btn) {
            btn.addEventListener('click', function() {
              var current = document.documentElement.getAttribute('data-bs-theme') || 'dark';
              applyTheme(current === 'dark' ? 'light' : 'dark');
            });
          }

          // Sync icon on load
          document.addEventListener('DOMContentLoaded', function() {
            var current = document.documentElement.getAttribute('data-bs-theme') || 'dark';
            var icon = document.getElementById('themeIcon');
            if (icon) {
              icon.className = current === 'light' ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
            }
          });
        })();
        </script>

        <!-- Patreon Login/Logout -->
        <ul class="navbar-nav">
          
          <li class="nav-item">
            <a class="nav-link" href="/account" title="View account details">
              <i class="bi bi-person"></i> Account
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/patreon/login">Login</a>
          </li>
          
        </ul>

      </div>
    </div>
</nav>

    <main class="container">

      

<div class="container-fluid hero-section mt-5">
    <div class="hero-badge mb-4">
        <i class="bi bi-shield-check me-1"></i>Privacy-friendly &middot; No account required
    </div>
    <h1 class="hero-title">Smarter tools,<br><span class="hero-title-accent">better decisions.</span></h1>
    <p class="hero-description">Calculate mortgage costs, salary, VAT, and more &mdash; free, fast, and your data stays yours.</p>
    <div class="hero-actions">
        <a href="#tools" class="hero-btn-primary"><i class="bi bi-grid me-2"></i>Browse all tools</a>
        <a href="/premium" target="_blank" rel="noopener" class="hero-btn-secondary"><i class="bi bi-star me-2"></i>Discover Premium</a>
    </div>
    <div class="hero-stats">
        <div class="hero-stat">
            <i class="bi bi-lock hero-stat-icon"></i>
            <span>No tracking</span>
        </div>
        <div class="hero-stat">
            <i class="bi bi-lightning hero-stat-icon"></i>
            <span>Instant results</span>
        </div>
        <div class="hero-stat">
            <i class="bi bi-geo-alt hero-stat-icon"></i>
            <span>Built in the Netherlands</span>
        </div>
        <div class="hero-stat">
            <i class="bi bi-calculator hero-stat-icon"></i>
            <span>20+ free tools</span>
        </div>
    </div>
</div>

<span id="tools"></span>

<div class="container-fluid">
    <h2 class="section-header mb-4">Search</h2>
    <div class="row gx-5">
        <div class="col-12">
            <div class="my-4">
                <input type="text" id="toolSearch" class="form-control form-control-lg" placeholder="Search for tools..." style="background: rgba(0,0,0,0.7); color: white; border: 1px solid #666;">
            </div>
        </div>
    </div>
</div>

<!-- FAVORITES SECTION (populated by JavaScript) -->
<div class="container-fluid mt-5" id="favoritesSection" style="display: none;" data-favorites-heading="Favorites">
    <h2 class="section-header mb-5">Favorites</h2>
    <div class="row gx-5" id="favoritesContainer" data-card-heading="Your Tools">
        <!-- Favorites will be dynamically inserted here -->
    </div>
</div>

<!-- Finance & Money -->
<div class="container-fluid mt-5">
    <h2 class="section-header mb-5">Finance &amp; Money</h2>
    <div class="row gx-5">
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="mortgage house property">
                <h3>Mortgages</h3>
                <ul>
                    <li><a href="/en/mortgage/mortgage" class="tool-link" data-tool="mortgage calculator">Mortgage calculator</a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="loan loans">
                <h3>Loans</h3>
                <ul>
                    <li><a href="/en/loans/loancost" class="tool-link" data-tool="loan cost">Loan calculator</a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="investing investment">
                <h3>Investing</h3>
                <ul>
                    <li><a href="/en/investing/compoundinterest" class="tool-link" data-tool="compound interest">Compound interest calculator</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Business -->
<div class="container-fluid mt-5">
    <h2 class="section-header mb-5">Business</h2>
    <div class="row gx-5">
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="price increase business">
                <h3>Price increase</h3>
                <ul>
                    <li><a href="/en/business/priceincrease" class="tool-link" data-tool="price increase">Price increase calculator</a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="date and time">
                <h3>Date and time</h3>
                <ul>
                    <li><a href="/en/datetime/datecalc" class="tool-link" data-tool="date difference">Date difference calculator</a></li>
                    <li><a href="/en/datetime/timecalc" class="tool-link" data-tool="time difference">Time difference calculator</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Family budget -->
<div class="container-fluid mt-5">
    <h2 class="section-header mb-5">Family budget</h2>
    <div class="row gx-5">
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="shopping">
                <h3>Shopping</h3>
                <ul>
                    <li><a href="/en/shopping/amazon3rdparty" class="tool-link" data-tool="3rd party seller filter amazon">Amazon 3rd party filter</a></li>
                    <li><a href="/en/shopping/euimportcalculator" class="tool-link" data-tool="EU Import Importing calculator">EU Import calculator</a></li>
                    <li><a href="/en/shopping/vatcalculator" class="tool-link" data-tool="VAT BTW Sales tax">Sales tax calculator (VAT)</a></li>
                    <li><a href="/en/shopping/discountcalculator" class="tool-link" data-tool="Discount calculator">Discount calculator</a></li>
                    <li><a href="/en/currency/currencyconverter" class="tool-link" data-tool="Currency converter usd eur gbp cad">Currency converter</a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="planning">
                <h3>Planning</h3>
                <ul>
                    <li><a href="/en/home/groceries" class="tool-link" data-tool="Grocery planner">Grocery planner <span class="badge bg-secondary text-dark">Premium</span></a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="income wage salary">
                <h3>Income</h3>
                <ul>
                    <li><a href="/en/income/hourlywage" class="tool-link" data-tool="Hourly wage calculator">Hourly wage calculator</a></li>
                    <li><a href="/en/income/monthlywage" class="tool-link" data-tool="Monthly wage calculator">Monthly wage calculator</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Measurements & conversions -->
<div class="container-fluid mt-5">
    <h2 class="section-header mb-5">Measurements &amp; conversions</h2>
    <div class="row gx-5">
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="measurements length fluids">
                <h3>Measurements</h3>
                <ul>
                    <li><a href="/en/measurements/lengthconversion" class="tool-link" data-tool="Length conversion m ft in cm km mi yd feet inches yards meters kilometers miles">Length conversion</a></li>
                    <li><a href="/en/measurements/fluids" class="tool-link" data-tool="Fluids converter ml fl oz gill cups pints quarts lts gal">Fluids converter</a></li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="p-3 bg-transparent-black rounded shadow-sm tool-card" data-tools="it megabyte megabit">
                <h3>IT</h3>
                <ul>
                    <li><a href="/en/it/megabyte" class="tool-link" data-tool="Megabit megabyte converter mb gb tb mbit gbit mbyte">Megabit, megabyte converter</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>



<script>
// =====================
// SEARCH FUNCTIONALITY
// =====================

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('toolSearch');
    if (!searchInput) return;

    const toolCards = document.querySelectorAll('.tool-card');
    const toolLinks = document.querySelectorAll('.tool-link');

    let searchTimeout;
    const DEBOUNCE_DELAY = 400;

    const searchResultsContainer = document.createElement('div');
    searchResultsContainer.id = 'searchResultsContainer';
    searchResultsContainer.className = 'container-fluid mt-5';
    searchResultsContainer.style.display = 'none';

    const searchInputContainer = searchInput.closest('.container-fluid');
    searchInputContainer.parentNode.insertBefore(searchResultsContainer, searchInputContainer.nextSibling);

    const originalParents = new Map();
    toolCards.forEach(function(card) {
        originalParents.set(card, card.parentNode);
    });

    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);

        searchTimeout = setTimeout(function() {
            const searchTerm = searchInput.value.toLowerCase().trim();

            if (searchTerm === '') {
                searchResultsContainer.style.display = 'none';

                document.querySelectorAll('.section-header').forEach(function(header) {
                    header.style.display = 'block';
                });

                toolCards.forEach(function(card) {
                    const originalParent = originalParents.get(card);
                    if (originalParent && card.parentNode !== originalParent) {
                        originalParent.appendChild(card);
                    }
                    card.style.display = 'block';
                    card.style.opacity = '1';
                    card.style.boxShadow = '';
                    card.style.border = '';
                });

                toolLinks.forEach(function(link) {
                    link.style.backgroundColor = '';
                    link.style.color = '';
                    link.style.fontWeight = '';
                });
                return;
            }

            const cardsWithMatches = new Set();

            toolLinks.forEach(function(link) {
                const linkText = link.textContent.toLowerCase();
                const linkData = (link.getAttribute('data-tool') || '').toLowerCase();
                const matches = linkText.includes(searchTerm) || linkData.includes(searchTerm);

                if (matches) {
                    link.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
                    link.style.color = '#fff';
                    link.style.fontWeight = 'bold';

                    const parentCard = link.closest('.tool-card');
                    if (parentCard) {
                        cardsWithMatches.add(parentCard);
                    }
                } else {
                    link.style.backgroundColor = '';
                    link.style.color = '';
                    link.style.fontWeight = '';
                }
            });

            toolCards.forEach(function(card) {
                const cardTools = card.getAttribute('data-tools');
                if (cardTools && cardTools.toLowerCase().includes(searchTerm)) {
                    cardsWithMatches.add(card);
                }
            });

            searchResultsContainer.innerHTML = '';

            const matchingCards = Array.from(cardsWithMatches);
            const cardsPerRow = 3;
            for (let i = 0; i < matchingCards.length; i += cardsPerRow) {
                const row = document.createElement('div');
                row.className = 'row gx-5';

                matchingCards.slice(i, i + cardsPerRow).forEach(function(card) {
                    card.style.display = 'block';
                    card.style.opacity = '1';
                    card.style.boxShadow = '0 0 15px rgba(255, 255, 255, 0.3)';
                    card.style.border = '2px solid rgba(255, 255, 255, 0.5)';

                    const cardWrapper = document.createElement('div');
                    cardWrapper.className = 'col-12 col-md-4';
                    cardWrapper.appendChild(card);
                    row.appendChild(cardWrapper);
                });

                searchResultsContainer.appendChild(row);
            }

            toolCards.forEach(function(card) {
                if (!cardsWithMatches.has(card)) {
                    card.style.display = 'none';
                }
            });

            if (cardsWithMatches.size > 0) {
                searchResultsContainer.style.display = 'block';

                const sectionsWithMatches = new Set();
                cardsWithMatches.forEach(function(card) {
                    const parentSection = card.closest('.container-fluid');
                    if (parentSection) {
                        sectionsWithMatches.add(parentSection);
                    }
                });

                document.querySelectorAll('.container-fluid').forEach(function(section) {
                    const sectionHeader = section.querySelector('.section-header');
                    if (sectionHeader) {
                        sectionHeader.style.display = sectionsWithMatches.has(section) ? 'block' : 'none';
                    }
                });
            }
        }, DEBOUNCE_DELAY);
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            searchInput.value = '';
            searchInput.dispatchEvent(new Event('input'));
        }
    });
});


// =====================
// FAVORITES FUNCTIONALITY
// =====================

function getFavorites() {
    const favorites = localStorage.getItem('toolFavorites');
    return favorites ? JSON.parse(favorites) : [];
}

function saveFavorites(favorites) {
    localStorage.setItem('toolFavorites', JSON.stringify(favorites));
}

function toggleFavorite(href) {
    let favorites = getFavorites();
    const index = favorites.indexOf(href);

    if (index > -1) {
        favorites.splice(index, 1);
    } else {
        favorites.push(href);
    }

    saveFavorites(favorites);
    updateFavoriteStars();
    renderFavoritesSection();
}

function updateFavoriteStars() {
    const favorites = getFavorites();
    document.querySelectorAll('.favorite-star').forEach(function(star) {
        const href = star.dataset.href;
        if (favorites.includes(href)) {
            star.classList.remove('bi-star');
            star.classList.add('bi-star-fill');
            star.style.color = 'white';
        } else {
            star.classList.remove('bi-star-fill');
            star.classList.add('bi-star');
            star.style.color = '#888';
        }
    });
}

function renderFavoritesSection() {
    const favorites = getFavorites();
    const favoritesSection = document.getElementById('favoritesSection');
    const favoritesContainer = document.getElementById('favoritesContainer');
    if (!favoritesSection || !favoritesContainer) return;

    favoritesContainer.innerHTML = '';

    if (favorites.length === 0) {
        favoritesSection.style.display = 'none';
        return;
    }

    favoritesSection.style.display = 'block';

    const allToolLinks = document.querySelectorAll('.tool-card .tool-link');
    const favoriteLinks = [];

    allToolLinks.forEach(function(link) {
        const href = link.getAttribute('href');
        if (favorites.includes(href)) {
            const textSpan = link.querySelector('span');
            favoriteLinks.push({
                href: href,
                html: textSpan ? textSpan.innerHTML : link.textContent.trim(),
                dataTools: link.getAttribute('data-tool') || ''
            });
        }
    });

    if (favoriteLinks.length === 0) return;

    const cardCol = document.createElement('div');
    cardCol.className = 'col-12 col-md-4';

    const card = document.createElement('div');
    card.className = 'p-3 bg-transparent-black rounded shadow-sm tool-card';
    card.setAttribute('data-tools', 'favorites');

    const heading = document.createElement('h2');
    heading.textContent = favoritesContainer.dataset.cardHeading || 'Your Tools';
    card.appendChild(heading);

    const ul = document.createElement('ul');

    favoriteLinks.forEach(function(fav) {
        const li = document.createElement('li');

        const link = document.createElement('a');
        link.href = fav.href;
        link.className = 'tool-link';
        link.setAttribute('data-tool', fav.dataTools);
        link.style.display = 'flex';
        link.style.alignItems = 'center';
        link.style.justifyContent = 'space-between';

        const textSpan = document.createElement('span');
        textSpan.innerHTML = fav.html;
        link.appendChild(textSpan);

        const star = document.createElement('i');
        star.className = 'bi bi-star-fill favorite-star';
        star.dataset.href = fav.href;
        star.style.color = 'white';
        star.style.cursor = 'pointer';
        star.style.marginLeft = 'auto';
        star.title = 'Remove from favorites';
        star.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            toggleFavorite(fav.href);
        });

        link.appendChild(star);
        li.appendChild(link);
        ul.appendChild(li);
    });

    card.appendChild(ul);
    cardCol.appendChild(card);
    favoritesContainer.appendChild(cardCol);
}

function addFavoriteStars() {
    const favorites = getFavorites();

    document.querySelectorAll('.tool-link').forEach(function(link) {
        if (link.querySelector('.favorite-star')) {
            return;
        }

        const href = link.getAttribute('href');
        const isFavorite = favorites.includes(href);

        const textSpan = document.createElement('span');
        textSpan.innerHTML = link.innerHTML;
        link.innerHTML = '';
        link.appendChild(textSpan);

        const star = document.createElement('i');
        star.className = isFavorite ? 'bi bi-star-fill favorite-star' : 'bi bi-star favorite-star';
        star.dataset.href = href;
        star.style.color = isFavorite ? 'white' : '#888';
        star.style.cursor = 'pointer';
        star.style.marginLeft = 'auto';
        star.title = isFavorite ? 'Remove from favorites' : 'Add to favorites';

        star.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            toggleFavorite(href);
        });

        link.appendChild(star);
        link.style.display = 'flex';
        link.style.alignItems = 'center';
        link.style.justifyContent = 'space-between';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    addFavoriteStars();
    renderFavoritesSection();
});
</script>



    </main>

    

<footer class="bg-black text-center text-white">
    <!-- Copyright -->
    <div class="text-center p-3">
       ©<script>document.write(new Date().getFullYear());</script> Copyright Factcheck.nl, all rights reserved. Made in &#x1F1EA;&#x1F1FA;.
    </div>
    <!-- Copyright -->
</footer>

    

<script src="/static/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/csrf-refresh.js"></script>
<script src="/static/js/calculator-overlay.js"></script>
<script src="/static/pwa/registerserviceworker.js"></script>
<script src="/static/dist/js/menucollapse-bootstrap.js"></script>

    
<div id="cookieNotice" class="cookie-notice" style="display: none;">
  <div class="cookie-notice-content">
    <p class="cookie-notice-text">
      <i class="bi bi-info-circle me-2"></i>
      We use only essential session cookies to ensure the website functions properly. No tracking cookies are used.
      <a href="/about" class="cookie-notice-link">Learn more</a>
    </p>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="acceptCookies()">
      Got it
    </button>
  </div>
</div>

<style>
/* Cookie notice styling */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--ft-container-bg);
  border-top: 1px solid var(--ft-container-border);
  backdrop-filter: blur(10px);
  padding: 1rem;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-notice-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-notice-text {
  margin: 0;
  color: var(--ft-text-body);
  font-size: 0.9rem;
  line-height: 1.5;
  flex: 1;
}

.cookie-notice-link {
  color: #0d6efd;
  text-decoration: underline;
  margin-left: 0.5rem;
}

.cookie-notice-link:hover {
  color: #0a58ca;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cookie-notice-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .cookie-notice-text {
    font-size: 0.85rem;
  }
}
</style>

<script>
// Check if user has already accepted cookies
function checkCookieConsent() {
  const cookieConsent = localStorage.getItem('cookieConsent');
  if (!cookieConsent) {
    // Show the cookie notice after a short delay
    setTimeout(function() {
      document.getElementById('cookieNotice').style.display = 'block';
    }, 500);
  }
}

// Accept cookies function
function acceptCookies() {
  localStorage.setItem('cookieConsent', 'accepted');
  const notice = document.getElementById('cookieNotice');
  notice.style.animation = 'slideDown 0.3s ease-out';
  
  setTimeout(function() {
    notice.style.display = 'none';
  }, 300);
}

// Add slideDown animation
const style = document.createElement('style');
style.textContent = `
  @keyframes slideDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(100%);
      opacity: 0;
    }
  }
`;
document.head.appendChild(style);

// Check on page load
document.addEventListener('DOMContentLoaded', checkCookieConsent);
</script>


    
<div class="modal fade calculator-modal" id="calculatorOverlay" tabindex="-1" aria-labelledby="calculatorOverlayTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable modal-fullscreen-sm-down calculator-overlay-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calculatorOverlayTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body p-0">
        <iframe id="calculatorOverlayFrame"
                class="calculator-overlay-frame"
                title=""
                src="about:blank"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" id="calculatorOverlayClose" data-bs-dismiss="modal">Sluiten</button>
        <button type="button" class="btn btn-outline-primary" id="calculatorOverlayApply">Gebruik waarde</button>
      </div>
    </div>
  </div>
</div>

    
<div class="modal fade calculator-modal" id="calculatorLoadConfirm" tabindex="-1" aria-labelledby="calculatorLoadConfirmTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calculatorLoadConfirmTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        <p id="calculatorLoadConfirmMessage" class="mb-3"></p>
        <p id="calculatorLoadConfirmValue" class="calculator-load-confirm-value mb-0"></p>
      </div>
      <div class="modal-footer flex-wrap">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" id="calculatorLoadConfirmCancel">Annuleren</button>
        <button type="button" class="btn btn-outline-primary" id="calculatorLoadConfirmRecalculate">Bereken opnieuw</button>
        <button type="button" class="btn btn-primary" id="calculatorLoadConfirmLoad">Laad waarde</button>
      </div>
    </div>
  </div>
</div>

  </body>
</html>