510 lines
25 KiB
HTML
510 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ title }} - MYP Platform{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl">
|
|
<!-- Header -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-purple-700 rounded-lg flex items-center justify-center mr-4">
|
|
<i class="fas fa-file-contract text-white text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Rechtliche Hinweise</h1>
|
|
<p class="text-gray-600">Datenschutz, Nutzungsbedingungen und weitere rechtliche Informationen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
|
|
<a href="#datenschutz" class="flex items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
|
|
<i class="fas fa-shield-alt text-blue-600 mr-3"></i>
|
|
<span class="font-medium text-blue-900">Datenschutz</span>
|
|
</a>
|
|
<a href="#nutzungsbedingungen" class="flex items-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
|
|
<i class="fas fa-file-signature text-green-600 mr-3"></i>
|
|
<span class="font-medium text-green-900">AGB</span>
|
|
</a>
|
|
<a href="#cookies" class="flex items-center p-4 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<i class="fas fa-cookie-bite text-amber-600 mr-3"></i>
|
|
<span class="font-medium text-amber-900">Cookies</span>
|
|
</a>
|
|
<a href="#sicherheit" class="flex items-center p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
|
|
<i class="fas fa-lock text-red-600 mr-3"></i>
|
|
<span class="font-medium text-red-900">Sicherheit</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datenschutzerklärung -->
|
|
<section id="datenschutz" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<i class="fas fa-shield-alt text-blue-600 mr-3"></i>
|
|
Datenschutzerklärung
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Grundsätzliches -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">1. Grundsätzliches zum Datenschutz</h3>
|
|
<div class="bg-blue-50 rounded-lg p-6">
|
|
<p class="text-gray-700 mb-4">
|
|
Der Schutz Ihrer persönlichen Daten ist uns wichtig. Diese Datenschutzerklärung informiert Sie über
|
|
die Art, den Umfang und Zweck der Verarbeitung personenbezogener Daten innerhalb des MYP-Systems
|
|
(Manage Your Printers) der Mercedes-Benz AG.
|
|
</p>
|
|
<p class="text-gray-700">
|
|
Verantwortlicher im Sinne der Datenschutz-Grundverordnung (DSGVO) ist die Mercedes-Benz AG,
|
|
vertreten durch die Ausbildungsabteilung.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datenerhebung -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">2. Erhebung und Verarbeitung personenbezogener Daten</h3>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-gray-900 mb-3">Registrierungsdaten</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Benutzername</li>
|
|
<li>• E-Mail-Adresse (Mercedes-Benz)</li>
|
|
<li>• Name und Abteilung</li>
|
|
<li>• Rolle im System</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-gray-900 mb-3">Nutzungsdaten</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Druckaufträge und -verlauf</li>
|
|
<li>• Login-Zeiten und -Häufigkeit</li>
|
|
<li>• IP-Adresse und Browser-Info</li>
|
|
<li>• Systemaktivitäten</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zweck der Datenverarbeitung -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">3. Zweck der Datenverarbeitung</h3>
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-3">Primäre Zwecke</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Bereitstellung der 3D-Druck-Services</li>
|
|
<li>• Verwaltung von Druckaufträgen</li>
|
|
<li>• Benutzerauthentifizierung</li>
|
|
<li>• Ressourcenplanung</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-3">Sekundäre Zwecke</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Systemoptimierung</li>
|
|
<li>• Qualitätssicherung</li>
|
|
<li>• Ausbildungszwecke</li>
|
|
<li>• Sicherheitsüberwachung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rechtsgrundlage -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">4. Rechtsgrundlage</h3>
|
|
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
|
|
<p class="text-gray-700 mb-4">
|
|
Die Verarbeitung erfolgt auf Grundlage von:
|
|
</p>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• <strong>Art. 6 Abs. 1 lit. b DSGVO:</strong> Vertragserfüllung (Nutzung der Druckdienste)</li>
|
|
<li>• <strong>Art. 6 Abs. 1 lit. f DSGVO:</strong> Berechtigte Interessen (Systemsicherheit, Optimierung)</li>
|
|
<li>• <strong>Art. 6 Abs. 1 lit. c DSGVO:</strong> Rechtliche Verpflichtung (Dokumentation, Compliance)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ihre Rechte -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">5. Ihre Rechte</h3>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-blue-900 mb-2">Auskunftsrecht</h4>
|
|
<p class="text-blue-800 text-sm">Art. 15 DSGVO</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-green-900 mb-2">Berichtigungsrecht</h4>
|
|
<p class="text-green-800 text-sm">Art. 16 DSGVO</p>
|
|
</div>
|
|
<div class="bg-red-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-red-900 mb-2">Löschungsrecht</h4>
|
|
<p class="text-red-800 text-sm">Art. 17 DSGVO</p>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-purple-900 mb-2">Einschränkungsrecht</h4>
|
|
<p class="text-purple-800 text-sm">Art. 18 DSGVO</p>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-amber-900 mb-2">Datenübertragbarkeit</h4>
|
|
<p class="text-amber-800 text-sm">Art. 20 DSGVO</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-gray-900 mb-2">Widerspruchsrecht</h4>
|
|
<p class="text-gray-700 text-sm">Art. 21 DSGVO</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Nutzungsbedingungen -->
|
|
<section id="nutzungsbedingungen" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<i class="fas fa-file-signature text-green-600 mr-3"></i>
|
|
Allgemeine Nutzungsbedingungen
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Geltungsbereich -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">1. Geltungsbereich</h3>
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<p class="text-gray-700">
|
|
Diese Nutzungsbedingungen gelten für die Nutzung des MYP-Systems (Manage Your Printers)
|
|
durch Mitarbeiter und Auszubildende der Mercedes-Benz AG. Mit der Registrierung und
|
|
Nutzung des Systems erkennen Sie diese Bedingungen an.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nutzungsrechte -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">2. Nutzungsrechte und -pflichten</h3>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-green-900 mb-3">Erlaubte Nutzung</h4>
|
|
<ul class="text-green-800 space-y-2">
|
|
<li>• Druckaufträge für Ausbildungszwecke</li>
|
|
<li>• Prototyping und Projektarbeit</li>
|
|
<li>• Lernmaterialien und Demonstrationen</li>
|
|
<li>• Interne Mercedes-Benz Projekte</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-red-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-red-900 mb-3">Verbotene Nutzung</h4>
|
|
<ul class="text-red-800 space-y-2">
|
|
<li>• Kommerzielle Zwecke ohne Genehmigung</li>
|
|
<li>• Urheberrechtsverletzungen</li>
|
|
<li>• Gefährliche oder illegale Objekte</li>
|
|
<li>• Systemmanipulation oder -missbrauch</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verantwortlichkeiten -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">3. Verantwortlichkeiten</h3>
|
|
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-3">Nutzer-Verantwortung</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Sichere Aufbewahrung der Zugangsdaten</li>
|
|
<li>• Einhaltung der Sicherheitsrichtlinien</li>
|
|
<li>• Ordnungsgemäße Nutzung der Geräte</li>
|
|
<li>• Meldung von Problemen</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-3">System-Verantwortung</h4>
|
|
<ul class="text-gray-700 space-y-2">
|
|
<li>• Bereitstellung der Infrastruktur</li>
|
|
<li>• Wartung und Support</li>
|
|
<li>• Datenschutz und Sicherheit</li>
|
|
<li>• Kontinuierliche Verbesserung</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cookie-Policy -->
|
|
<section id="cookies" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<i class="fas fa-cookie-bite text-amber-600 mr-3"></i>
|
|
Cookie-Richtlinie
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Was sind Cookies -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Was sind Cookies?</h3>
|
|
<div class="bg-amber-50 rounded-lg p-6">
|
|
<p class="text-gray-700">
|
|
Cookies sind kleine Textdateien, die beim Besuch einer Website auf Ihrem Computer gespeichert werden.
|
|
Sie helfen dabei, Ihre Präferenzen zu speichern und die Funktionalität der Website zu verbessern.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cookie-Kategorien -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Verwendete Cookie-Kategorien</h3>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-blue-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-blue-900 mb-3">Technisch notwendige Cookies</h4>
|
|
<ul class="text-blue-800 space-y-2">
|
|
<li>• Session-Management</li>
|
|
<li>• Anmeldestatus</li>
|
|
<li>• CSRF-Schutz</li>
|
|
<li>• Spracheinstellungen</li>
|
|
</ul>
|
|
<p class="text-blue-700 text-sm mt-3">Diese Cookies sind für die Funktionalität der Website erforderlich.</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-green-900 mb-3">Funktionale Cookies</h4>
|
|
<ul class="text-green-800 space-y-2">
|
|
<li>• Benutzereinstellungen</li>
|
|
<li>• Dashboard-Konfiguration</li>
|
|
<li>• Theme-Präferenzen</li>
|
|
<li>• Accessibility-Optionen</li>
|
|
</ul>
|
|
<p class="text-green-700 text-sm mt-3">Diese Cookies verbessern die Benutzererfahrung.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cookie-Kontrolle -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Cookie-Kontrolle</h3>
|
|
<div class="bg-gray-50 rounded-lg p-6">
|
|
<p class="text-gray-700 mb-4">
|
|
Sie können Cookies in Ihren Browser-Einstellungen verwalten. Beachten Sie jedoch, dass das
|
|
Deaktivieren bestimmter Cookies die Funktionalität der Website beeinträchtigen kann.
|
|
</p>
|
|
<div class="grid md:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-lg p-4 border">
|
|
<h5 class="font-semibold text-gray-900 mb-2">Chrome</h5>
|
|
<p class="text-gray-600 text-sm">Einstellungen → Datenschutz und Sicherheit → Cookies</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-4 border">
|
|
<h5 class="font-semibold text-gray-900 mb-2">Firefox</h5>
|
|
<p class="text-gray-600 text-sm">Einstellungen → Datenschutz & Sicherheit</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-4 border">
|
|
<h5 class="font-semibold text-gray-900 mb-2">Edge</h5>
|
|
<p class="text-gray-600 text-sm">Einstellungen → Cookies und Websiteberechtigungen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sicherheitsrichtlinien -->
|
|
<section id="sicherheit" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<i class="fas fa-lock text-red-600 mr-3"></i>
|
|
Sicherheitsrichtlinien
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Technische Sicherheit -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Technische Sicherheitsmaßnahmen</h3>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="bg-red-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-red-900 mb-3">Infrastruktursicherheit</h4>
|
|
<ul class="text-red-800 space-y-2">
|
|
<li>• HTTPS-Verschlüsselung</li>
|
|
<li>• Sichere Datenübertragung</li>
|
|
<li>• Regelmäßige Security-Updates</li>
|
|
<li>• Firewalls und Intrusion Detection</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-lg p-6">
|
|
<h4 class="font-semibold text-blue-900 mb-3">Anwendungssicherheit</h4>
|
|
<ul class="text-blue-800 space-y-2">
|
|
<li>• Sichere Authentifizierung</li>
|
|
<li>• Rollenbasierte Zugriffskontrolle</li>
|
|
<li>• Input-Validierung</li>
|
|
<li>• Session-Management</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benutzer-Sicherheit -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Empfehlungen für Benutzer</h3>
|
|
<div class="bg-green-50 rounded-lg p-6">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-green-900 mb-3">Passwort-Sicherheit</h4>
|
|
<ul class="text-green-800 space-y-2">
|
|
<li>• Verwenden Sie starke Passwörter</li>
|
|
<li>• Teilen Sie keine Zugangsdaten</li>
|
|
<li>• Melden Sie sich nach der Nutzung ab</li>
|
|
<li>• Verwenden Sie nicht öffentliche Computer</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-green-900 mb-3">Allgemeine Sicherheit</h4>
|
|
<ul class="text-green-800 space-y-2">
|
|
<li>• Halten Sie Ihren Browser aktuell</li>
|
|
<li>• Verwenden Sie Antivirus-Software</li>
|
|
<li>• Seien Sie vorsichtig bei Downloads</li>
|
|
<li>• Melden Sie verdächtige Aktivitäten</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Incident Response -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Sicherheitsvorfälle melden</h3>
|
|
<div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
|
|
<p class="text-gray-700 mb-4">
|
|
Falls Sie einen Sicherheitsvorfall bemerken oder vermuten, wenden Sie sich umgehend an:
|
|
</p>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-2">Technischer Support</h4>
|
|
<p class="text-gray-700">
|
|
E-Mail: <a href="mailto:till.tomczak@mercedes-benz.com" class="text-blue-600 hover:text-blue-800">
|
|
till.tomczak@mercedes-benz.com
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 mb-2">IT-Sicherheit</h4>
|
|
<p class="text-gray-700">
|
|
Interne IT-Security-Hotline
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Kontakt und Weitere Informationen -->
|
|
<section class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
|
<i class="fas fa-info-circle text-blue-600 mr-3"></i>
|
|
Weitere Informationen
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Kontakt -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Bei Fragen wenden Sie sich an:</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i>
|
|
<div>
|
|
<p class="font-medium text-gray-900">E-Mail</p>
|
|
<a href="mailto:till.tomczak@mercedes-benz.com" class="text-blue-600 hover:text-blue-800">
|
|
till.tomczak@mercedes-benz.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-building text-blue-600 mt-1 mr-3"></i>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Abteilung</p>
|
|
<p class="text-gray-700">Ausbildungsabteilung - 3D-Druck</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Updates -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Aktualisierungen</h3>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<p class="text-gray-700 mb-2">
|
|
Diese rechtlichen Hinweise können bei Bedarf aktualisiert werden.
|
|
Über wesentliche Änderungen werden Sie informiert.
|
|
</p>
|
|
<p class="text-sm text-gray-600">
|
|
Stand: {{ moment().format('DD.MM.YYYY') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div class="flex flex-wrap gap-4 justify-center">
|
|
<a href="{{ url_for('index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
|
<i class="fas fa-home mr-2"></i>
|
|
Zur Startseite
|
|
</a>
|
|
<a href="{{ url_for('imprint') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
Impressum
|
|
</a>
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
|
|
<i class="fas fa-chart-line mr-2"></i>
|
|
Dashboard
|
|
</a>
|
|
<a href="{{ url_for('user_settings') }}" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
|
|
<i class="fas fa-cog mr-2"></i>
|
|
Einstellungen
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll-to-Top Button -->
|
|
<button id="scrollToTop" class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-all duration-300 opacity-0 pointer-events-none">
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|
|
|
|
<script>
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Scroll-to-top functionality
|
|
const scrollToTopBtn = document.getElementById('scrollToTop');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.pageYOffset > 300) {
|
|
scrollToTopBtn.classList.remove('opacity-0', 'pointer-events-none');
|
|
scrollToTopBtn.classList.add('opacity-100');
|
|
} else {
|
|
scrollToTopBtn.classList.add('opacity-0', 'pointer-events-none');
|
|
scrollToTopBtn.classList.remove('opacity-100');
|
|
}
|
|
});
|
|
|
|
scrollToTopBtn.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |