snauwcounter/app/templates/privacy.html

{% extends "base.html" %}

{% block title %}Privacy Beleid - Snauw Counter{% endblock %}

{% block content %}
<div class="card">
    <h1>🔒 Privacy Beleid</h1>
    <p><em>Laatst bijgewerkt: 9 januari 2026</em></p>

    <h2>Onze Inzet voor Privacy</h2>
    <p>Snauw Counter is ontworpen met privacy als uitgangspunt. We begrijpen dat de gegevens die je met ons deelt gevoelig zijn, en we nemen de bescherming ervan zeer serieus.</p>

    <h2>Welke Gegevens Verzamelen We?</h2>

    <h3>Voor Anonieme Gebruikers</h3>
    <ul>
        <li>✅ <strong>Lokale opslag</strong>: Incidenten worden alleen opgeslagen in je browser (localStorage)</li>
        <li>✅ <strong>Geen server opslag</strong>: Je gegevens verlaten je apparaat niet</li>
        <li>✅ <strong>Geen tracking</strong>: We volgen geen gebruikersgedrag</li>
        <li>✅ <strong>Geen analytics</strong>: Geen Google Analytics of vergelijkbare diensten</li>
    </ul>

    <h3>Voor Geregistreerde Gebruikers</h3>
    <ul>
        <li>📧 <strong>E-mailadres</strong>: Voor account identificatie</li>
        <li>🔐 <strong>Gehashed wachtwoord</strong>: Veilig opgeslagen (niet leesbaar)</li>
        <li>📊 <strong>Incident gegevens</strong>: Datum/tijd, ernstscore, opmerkingen</li>
        <li>🕒 <strong>Account metadata</strong>: Aanmaakdatum, laatste login</li>
    </ul>

    <h2>Hoe Gebruiken We Je Gegevens?</h2>
    <ul>
        <li>📈 <strong>Statistieken tonen</strong>: Om je persoonlijke trends te berekenen</li>
        <li>🔐 <strong>Account beheer</strong>: Voor inloggen en authenticatie</li>
        <li>💾 <strong>Data synchronisatie</strong>: Tussen je verschillende apparaten</li>
        <li>🛡️ <strong>Beveiliging</strong>: Om je account te beschermen</li>
    </ul>

    <p><strong>We delen NOOIT je gegevens met derden voor marketing of commerciële doeleinden.</strong></p>

    <h2>Gegevensbeveiliging</h2>
    <ul>
        <li>🔒 <strong>Versleuteling</strong>: Alle gevoelige gegevens worden versleuteld opgeslagen</li>
        <li>🛡️ <strong>Beveiligde verbindingen</strong>: HTTPS voor alle communicatie</li>
        <li>⚡ <strong>Beperkte toegang</strong>: Alleen essentiële systemen hebben toegang</li>
        <li>🔄 <strong>Reguliere backups</strong>: Met versleuteling voor disaster recovery</li>
    </ul>

    <h2>Je Rechten (GDPR/AVG)</h2>

    <div style="background: #e3f2fd; padding: 1rem; border-radius: 8px; border-left: 4px solid #2196f3; margin: 1rem 0;">
        <h4>🇪🇺 Je GDPR Rechten:</h4>
        <ul>
            <li><strong>Recht op informatie</strong>: Dit privacy beleid</li>
            <li><strong>Recht op toegang</strong>: Inzage in je opgeslagen gegevens</li>
            <li><strong>Recht op correctie</strong>: Wijzigen van onjuiste gegevens</li>
            <li><strong>Recht op verwijdering</strong>: "Recht om vergeten te worden"</li>
            <li><strong>Recht op overdraagbaarheid</strong>: Export van je gegevens</li>
            <li><strong>Recht op bezwaar</strong>: Tegen verwerking van je gegevens</li>
        </ul>
    </div>

    <h3>Hoe Oefen Je Deze Rechten Uit?</h3>

    {% if current_user.is_authenticated %}
        <div class="stats-grid" style="margin: 1rem 0;">
            <button onclick="window.location.href='{{ url_for('main.export_data') }}'" class="btn btn-secondary">
                📥 Gegevens Exporteren
            </button>
            <button onclick="showDeleteConfirmation()" class="btn btn-danger">
                🗑️ Account Verwijderen
            </button>
        </div>
    {% else %}
        <div class="stats-grid" style="margin: 1rem 0;">
            <button onclick="exportData()" class="btn btn-secondary">
                📥 Lokale Gegevens Exporteren
            </button>
            <button onclick="deleteAllData()" class="btn btn-danger">
                🗑️ Lokale Gegevens Wissen
            </button>
        </div>
    {% endif %}

    <h2>Cookies & Lokale Opslag</h2>

    <h3>Essentiële Cookies (Altijd Actief)</h3>
    <ul>
        <li>🍪 <strong>Sessie cookie</strong>: Voor ingelogde gebruikers (session management)</li>
        <li>📱 <strong>Voorkeuren</strong>: UI instellingen en privacy notice status</li>
    </ul>

    <h3>Lokale Browser Opslag</h3>
    <ul>
        <li>💾 <strong>localStorage</strong>: Voor anonieme gebruikers om incidenten bij te houden</li>
        <li>⚙️ <strong>App instellingen</strong>: Gebruikersvoorkeuren en UI state</li>
    </ul>

    <p style="background: #fff3cd; padding: 1rem; border-radius: 8px; border: 1px solid #ffeaa7;">
        <strong>⚠️ Let op:</strong> Als je lokale browser gegevens wist (cache/cookies leegmaken),
        verlies je als anonieme gebruiker al je opgeslagen incidenten.
        <a href="{{ url_for('main.register') }}">Maak een account</a> om dit te voorkomen.
    </p>

    <h2>Gegevensretentie</h2>
    <ul>
        <li>📊 <strong>Incident gegevens</strong>: Onbeperkt (of tot je account verwijdert)</li>
        <li>🔐 <strong>Account gegevens</strong>: Tot account verwijdering</li>
        <li>💾 <strong>Backups</strong>: Maximaal 90 dagen na verwijdering</li>
        <li>📱 <strong>Lokale gegevens</strong>: Tot je ze handmatig wist of browser cache leegt</li>
    </ul>

    <h2>Contact & Vragen</h2>
    <p>Heb je vragen over je privacy of dit beleid? </p>

    <div style="background: #f8f9fa; padding: 1rem; border-radius: 8px; border: 1px solid #dee2e6;">
        <p><strong>📧 Data Protection Officer:</strong></p>
        <p>E-mail: privacy@snauwcounter.app<br>
        Reactietijd: Binnen 72 uur</p>

        <p><strong>🏢 Verwerkingsverantwoordelijke:</strong></p>
        <p>Snauw Counter Development Team<br>
        Nederland</p>
    </div>
</div>

<div class="card" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white;">
    <h3>✅ Privacy First Belofte</h3>
    <p>Snauw Counter is gebouwd vanuit de overtuiging dat privacy een fundamenteel recht is. We verzamelen alleen wat noodzakelijk is, beveiligen alles wat we opslaan, en geven jou altijd volledige controle over je gegevens.</p>

    <p><strong>Jouw vertrouwen is onze verantwoordelijkheid.</strong></p>
</div>
{% endblock %}

{% block scripts %}
<script>
function showDeleteConfirmation() {
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <div class="modal-header">
                <h3>⚠️ Account Verwijderen</h3>
                <button onclick="closeModal()" class="close-btn">✕</button>
            </div>
            <div class="modal-body">
                <p><strong>Dit is permanent en kan niet ongedaan worden gemaakt.</strong></p>
                <p>We zullen verwijderen:</p>
                <ul>
                    <li>✅ Je account en login gegevens</li>
                    <li>✅ Alle geregistreerde incidenten</li>
                    <li>✅ Alle statistieken en trends</li>
                    <li>✅ Backups binnen 90 dagen</li>
                </ul>

                <form action="{{ url_for('main.delete_account') }}" method="POST">
                    <div class="form-group">
                        <label for="confirm-delete">Type "DELETE" om te bevestigen:</label>
                        <input type="text" id="confirm-delete" name="confirm" required
                               placeholder="DELETE" style="text-transform: uppercase;">
                    </div>

                    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                        <button type="submit" class="btn btn-danger">🗑️ Permanent Verwijderen</button>
                        <button type="button" onclick="closeModal()" class="btn btn-secondary">Annuleren</button>
                    </div>
                </form>
            </div>
        </div>
    `;

    document.body.appendChild(modal);
}

function closeModal() {
    const modal = document.querySelector('.modal');
    if (modal) {
        modal.remove();
    }
}

// Mark body as authenticated for JavaScript
document.body.dataset.isAuthenticated = {{ 'true' if current_user.is_authenticated else 'false' }};
</script>
{% endblock %}