594 lines
28 KiB
HTML
594 lines
28 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto p-4 sm:p-6 lg:p-8 pb-20 flex flex-col items-center">
|
|
|
|
<!-- Dark Mode Toggle (Button oben rechts) -->
|
|
<button id="darkModeToggle"
|
|
class="fixed top-4 right-4 w-12 h-12 rounded-xl bg-gray-200 dark:bg-gray-800 z-10 transition-colors duration-300">
|
|
<i class="fas fa-sun text-yellow-400 dark:hidden text-xl"></i>
|
|
<i class="fas fa-moon text-blue-200 hidden dark:inline text-xl"></i>
|
|
</button>
|
|
|
|
<!-- Logo / User Greeting -->
|
|
<div class="flex flex-col items-center justify-center space-y-4 text-center mb-6">
|
|
<a id="logo-link" href="https://{{ domain }}" target="_blank">
|
|
<img id="logo-img" src="{{ logo_path }}" alt="Firmenlogo" class="w-20 h-auto mb-2">
|
|
</a>
|
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white transition-colors duration-300">
|
|
Willkommen zurück, {{ user }}
|
|
</h1>
|
|
<div id="clock" class="text-xl sm:text-2xl font-semibold"></div>
|
|
</div>
|
|
|
|
<!-- Websuche: ohne Input-BG/Border -->
|
|
<div class="glassmorphism p-4 shadow-lg mb-6 w-full max-w-lg">
|
|
<form id="searchForm" style="background-color: transparent !important; padding-bottom: 2px;" class="flex flex-col sm:flex-row items-center justify-center">
|
|
<input type="text" style="background-color: transparent !important; padding-bottom: 2px !important;" id="searchInput" placeholder="Suche..."
|
|
class="flex-grow bg-transparent border-0 outline-none placeholder-gray-500 text-gray-800 dark:placeholder-gray-300" />
|
|
<select id="searchEngine" style="background-color: transparent !important; padding-bottom: 2px !important;" class="bg-transparent border-0 outline-none text-gray-800 dark:text-white ml-2">
|
|
<option value="qwant">Qwant</option>
|
|
<option value="google">Google</option>
|
|
</select>
|
|
<button type="submit" class="bg-green-500 text-white px-2 py-2 rounded hover:bg-green-600 ml-2">
|
|
Los
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Flash-Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="mb-4 w-full max-w-lg">
|
|
{% for category, message in messages %}
|
|
<div style="border-radius: 15px !important;" class="alert flex items-center bg-{{ category }}-500 text-white text-sm font-bold px-4 py-3 mb-2"
|
|
role="alert">
|
|
<p>{{ message }}</p>
|
|
<svg class="fill-current h-6 w-6 text-white ml-auto close-flash" role="button"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<title>Schließen</title>
|
|
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029
|
|
a1.2 1.2 0 1 1-1.697-1.697L8.302 10 5.651 7.349
|
|
a1.2 1.2 0 1 1 1.697-1.697L10 8.181l2.651-2.529
|
|
a1.2 1.2 0 1 1 1.697 1.697L11.698 10l2.651 2.651
|
|
a1.2 1.2 0 0 1 0 1.698z"/>
|
|
</svg>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Widgets: Benachrichtigungen / Zeiterfassung -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 w-full max-w-3xl">
|
|
<!-- Benachrichtigungen -->
|
|
<div class="glassmorphism p-4 shadow-lg rounded">
|
|
<h2 class="text-lg font-semibold mb-2">Benachrichtigungen</h2>
|
|
{% if notifications %}
|
|
<ul class="space-y-2 max-h-56 overflow-auto">
|
|
{% for note in notifications %}
|
|
<li class="bg-gray-100 dark:bg-gray-700 p-2 rounded flex justify-between items-center">
|
|
<div>
|
|
{{ note.message }}<br>
|
|
<span class="text-xs text-gray-500">{{ note.created_at }}</span>
|
|
</div>
|
|
<form method="POST" action="{{ url_for('delete_notification', notif_id=note.id) }}"
|
|
onsubmit="return confirm('Benachrichtigung wirklich löschen?')"
|
|
class="inline">
|
|
<button class="text-red-500 hover:text-red-700 text-sm ml-2" title="Benachrichtigung löschen">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="text-sm">Keine neuen Benachrichtigungen</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Zeiterfassung -->
|
|
<div class="glassmorphism p-4 shadow-lg sm:col-span-2 rounded">
|
|
<h2 class="text-lg font-semibold mb-2">Zeiterfassung</h2>
|
|
<form action="{{ url_for('time_tracking') }}" method="POST"
|
|
class="mb-4 flex flex-col sm:flex-row items-center">
|
|
<input type="text" name="activity" style="border-bottom: solid rgb(240, 222, 222) !important; border-top: none !important; border-left: none !important; border-right: none !important; background-color: transparent !important;" placeholder="Aktivität"
|
|
class="p-2 border rounded mb-2 sm:mb-0 sm:mr-2 flex-1 text-gray-800" />
|
|
<button type="submit" name="action" value="start"
|
|
class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2">
|
|
Start
|
|
</button>
|
|
<button type="submit" name="action" value="stop"
|
|
class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
|
|
Stopp
|
|
</button>
|
|
</form>
|
|
<div class="max-h-40 overflow-auto">
|
|
{% for entry in time_entries %}
|
|
<div class="bg-gray-100 dark:bg-gray-700 p-2 mb-2 rounded">
|
|
<strong>{{ entry.activity }}</strong><br>
|
|
Start: {{ entry.start_time }}<br>
|
|
Ende: {% if entry.end_time %}{{ entry.end_time }}{% else %}<em>läuft</em>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bookmark Carousel -->
|
|
<div class="glassmorphism p-4 mb-12 relative w-full max-w-3xl rounded">
|
|
<div id="carouselContainer" class="overflow-hidden relative">
|
|
<div id="carouselTrack" class="flex transition-transform duration-500 ease-in-out">
|
|
{% for chunk in user_bookmarks | batch(5) %}
|
|
<div class="carousel-slide w-full flex-shrink-0 grid grid-cols-3 sm:grid-cols-5 gap-4">
|
|
{% for bm in chunk %}
|
|
<div class="relative group">
|
|
<a href="{{ bm.url }}" class="flex flex-col items-center" title="{{ bm.title }}" target="_blank">
|
|
<!-- Hier wurde "fas" vorangestellt, um sicherzustellen, dass FontAwesome-Icons korrekt angezeigt werden -->
|
|
<div class="w-12 h-12 flex items-center justify-center {{ bm.bg_color }} rounded-xl mb-1 transition-transform hover:scale-110">
|
|
<i class="fas {{ bm.icon_class }} text-white text-xl"></i>
|
|
</div>
|
|
<p class="text-center text-xs font-medium">{{ bm.title }}</p>
|
|
</a>
|
|
<!-- Löschen-Button -->
|
|
<form method="POST" action="{{ url_for('delete_bookmark', bookmark_id=bm.id) }}"
|
|
onsubmit="return confirm('Lesezeichen wirklich löschen?')"
|
|
class="absolute top-0 right-0 p-1 hidden group-hover:block">
|
|
<button class="text-red-500 hover:text-red-700 text-sm" title="Lesezeichen löschen">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<button id="carouselPrev" class="absolute left-0 top-1/2 transform -translate-y-1/2 p-2 bg-gray-800 text-white rounded-full shadow-md hover:bg-gray-600">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</button>
|
|
<button id="carouselNext" class="absolute right-0 top-1/2 transform -translate-y-1/2 p-2 bg-gray-800 text-white rounded-full shadow-md hover:bg-gray-600">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Bookmark-Modal -->
|
|
<div id="bookmarkModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-auto">
|
|
<h2 class="text-2xl font-bold mb-4">Neues Lesezeichen hinzufügen</h2>
|
|
|
|
<form id="bookmarkForm" action="{{ url_for('add_bookmark') }}" method="POST">
|
|
<!-- Titel -->
|
|
<label class="block text-lg font-semibold mb-1">Titel</label>
|
|
<input type="text" name="title" id="bookmarkTitle"
|
|
class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Titel eingeben" required>
|
|
|
|
<!-- URL -->
|
|
<label class="block text-lg font-semibold mb-1">URL</label>
|
|
<input type="url" name="url" id="bookmarkUrl"
|
|
class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
placeholder="https://example.com" required>
|
|
|
|
<!-- Icon Auswahl -->
|
|
<label class="block text-lg font-semibold mb-2">Icon wählen</label>
|
|
<div class="grid grid-cols-5 gap-3 mb-4">
|
|
{% for icon in ['fa-bookmark', 'fa-star', 'fa-link', 'fa-heart', 'fa-cog', 'fa-chart-bar', 'fa-play', 'fa-music', 'fa-film', 'fa-envelope'] %}
|
|
<button type="button" class="icon-option p-3 rounded bg-gray-200 dark:bg-gray-700"
|
|
data-icon="{{ icon }}">
|
|
<i class="fas {{ icon }} text-xl"></i>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
<input type="hidden" name="icon_class" id="selectedIcon" value="fa-bookmark">
|
|
|
|
<!-- Farbe Auswahl -->
|
|
<label class="block text-lg font-semibold mb-2">Hintergrundfarbe wählen</label>
|
|
<div class="flex space-x-2 mb-4">
|
|
{% for color in ['bg-blue-500', 'bg-green-500', 'bg-red-500', 'bg-yellow-500', 'bg-purple-500', 'bg-gray-500'] %}
|
|
<button type="button" class="color-option w-10 h-10 rounded-full {{ color }}" data-color="{{ color }}"></button>
|
|
{% endfor %}
|
|
</div>
|
|
<input type="hidden" name="bg_color" id="selectedColor" value="bg-blue-500">
|
|
|
|
<!-- Vorschau -->
|
|
<div class="flex items-center justify-center mb-4">
|
|
<div id="bookmarkPreview" class="w-12 h-12 flex items-center justify-center bg-blue-500 rounded-xl">
|
|
<i id="previewIcon" class="fas fa-bookmark text-white text-xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speichern Button -->
|
|
<button type="submit" class="w-full bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Schließen Button -->
|
|
<button id="closeBookmarkModal" class="mt-4 w-full bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dock -->
|
|
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 glassmorphism p-2 flex space-x-4 rounded">
|
|
<!-- Home Modal -->
|
|
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-xl transition-colors duration-200" data-modal="homeModal">
|
|
<i class="fas fa-home text-white text-xl"></i>
|
|
</button>
|
|
<!-- Support-Button (öffnet Support-Modal) -->
|
|
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-purple-500 hover:bg-purple-600 rounded-xl transition-colors duration-200" data-modal="supportModal">
|
|
<i class="fas fa-question-circle text-white text-xl"></i>
|
|
</button>
|
|
<!-- Admin-Button nur zeigen, wenn is_admin == 1 -->
|
|
{% if session.is_admin == 1 %}
|
|
<a href="{{ url_for('admin_panel') }}"
|
|
class="dock-icon w-12 h-12 flex items-center justify-center bg-yellow-500 hover:bg-yellow-600 rounded-xl transition-colors duration-200">
|
|
<i class="fas fa-user-shield text-white text-xl"></i>
|
|
</a>
|
|
{% endif %}
|
|
<!-- Dock-Icon für Lesezeichen hinzufügen -->
|
|
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-xl transition-colors duration-200" id="openBookmarkModal" data-modal="bookmarkModal">
|
|
<i class="fas fa-bookmark text-white text-xl"></i>
|
|
</button>
|
|
<!-- Einstellungen (öffnet Settings-Modal) -->
|
|
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-yellow-700 hover:bg-yellow-800 rounded-xl transition-colors duration-200" data-modal="settingsModal">
|
|
<i class="fas fa-cog text-white text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- =========================== MODALS =========================== -->
|
|
|
|
<!-- Home Modal -->
|
|
<div id="homeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
|
|
<h2 class="text-2xl font-bold mb-4">Willkommen Zuhause!</h2>
|
|
<p class="mb-4">Schneller Zugriff auf wichtige Einstellungen.</p>
|
|
<!-- z.B. Logout oder Konto löschen -->
|
|
<form action="{{ url_for('logout') }}" method="POST" class="mb-3 mt-2">
|
|
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Abmelden
|
|
</button>
|
|
</form>
|
|
<button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white font-bold py-2 px-4 rounded close-modal">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Modal -->
|
|
<div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
|
<div class="glassmorphism bg-white dark:bg-gray-800 p-8 rounded-lg max-w-md w-full mx-auto shadow-lg">
|
|
<h2 class="text-2xl font-bold mb-4">Support kontaktieren</h2>
|
|
|
|
<!-- Dropdown zur Kategorisierung des Problems -->
|
|
<label for="problemType" class="block mb-2 text-lg font-semibold">Art des Problems</label>
|
|
<select id="problemType" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white">
|
|
<option value="Technisches Problem">Technisches Problem</option>
|
|
<option value="Account Problem">Account Problem</option>
|
|
<option value="Sonstiges">Sonstiges</option>
|
|
</select>
|
|
|
|
<!-- Eingabefeld für E-Mail -->
|
|
<label for="emailInput" class="block mb-2 text-lg font-semibold">Ihre E-Mail</label>
|
|
<input type="email" id="emailInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Ihre E-Mail-Adresse" />
|
|
|
|
<!-- Eingabefeld für Nachricht -->
|
|
<label for="messageInput" class="block mb-2 text-lg font-semibold">Nachricht</label>
|
|
<textarea id="messageInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white" rows="4"
|
|
placeholder="Beschreiben Sie Ihr Problem"></textarea>
|
|
|
|
<!-- Button zum Senden der Nachricht -->
|
|
<button id="sendSupportMessage" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors duration-200">
|
|
Nachricht senden
|
|
</button>
|
|
|
|
<!-- Schließen-Button -->
|
|
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-200 close-modal">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center overflow-auto z-50">
|
|
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded-lg w-full max-w-md max-h-screen overflow-y-auto mx-4 shadow-lg">
|
|
<h2 class="text-2xl font-bold mb-4">Einstellungen</h2>
|
|
<p>Hier können Sie Ihre Einstellungen anpassen und das System nach Ihren Wünschen konfigurieren.</p>
|
|
|
|
<!-- Hintergrundbild auswählen -->
|
|
<h3 class="text-lg font-semibold mb-2 mt-4">Hintergrundbild auswählen</h3>
|
|
<div id="wallpaperSelection" class="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-4">
|
|
{% for i in range(1, 27) %}
|
|
<img src="{{ url_for('static', filename=i ~ '.png') }}" alt="Wallpaper {{ i }}"
|
|
class="w-full h-auto wallpaper-thumb cursor-pointer border-2 {% if wallpaper == i ~ '.png' %}border-blue-500{% else %}border-transparent{% endif %} rounded"
|
|
data-wallpaper="{{ i }}.png">
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Stadt ändern -->
|
|
<h3 class="text-lg font-semibold mb-2">Stadt ändern</h3>
|
|
<input type="text" id="cityInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Ihre Stadt" value="{{ city }}" />
|
|
|
|
<!-- Unsichtbarer Wetter-Toggle (V1-Fallback) -->
|
|
<div style="display: none;">
|
|
<h3 class="text-lg font-semibold mb-2">Wochenvorhersage anzeigen</h3>
|
|
<label class="inline-flex items-center mt-2">
|
|
<input type="checkbox" id="weatherForecastToggle" class="form-checkbox h-5 w-5 text-blue-600"
|
|
{% if show_forecast %}checked{% endif %} />
|
|
<span class="ml-2 text-gray-700 dark:text-gray-300">Wochenvorhersage anzeigen</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button id="saveSettings" class="mt-4 bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 transition-colors duration-200">
|
|
Speichern
|
|
</button>
|
|
<button class="mt-4 ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition-colors duration-200 close-modal">
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- JavaScript fürs Dashboard -->
|
|
<script>
|
|
// Dark Mode Button
|
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
darkModeToggle.addEventListener('click', () => {
|
|
document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
|
|
});
|
|
|
|
// Uhrzeit
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleTimeString('de-DE');
|
|
const dateString = now.toLocaleDateString('de-DE', {
|
|
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
|
|
});
|
|
document.getElementById('clock').innerHTML =
|
|
`${timeString}<br><span class="text-sm font-normal">${dateString}</span>`;
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
|
|
// GSAP-Effekte (vorausgesetzt, GSAP ist in base.html eingebunden)
|
|
gsap.from(".glassmorphism", {
|
|
duration: 1, opacity: 0, y: 50, stagger: 0.2, ease: "power3.out"
|
|
});
|
|
gsap.from(".dock-icon", {
|
|
duration: 0.5, opacity: 0, y: 20, stagger: 0.1, ease: "back.out(1.7)", delay: 1
|
|
});
|
|
|
|
// Flash-Meldungen schließen
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const closeButtons = document.querySelectorAll('.close-flash');
|
|
closeButtons.forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
const alertBox = this.closest('.alert');
|
|
alertBox.style.transition = 'opacity 0.5s ease';
|
|
alertBox.style.opacity = '0';
|
|
setTimeout(() => alertBox.remove(), 500);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Modals (Home, Support, Settings)
|
|
const modals = document.querySelectorAll('[id$="Modal"]');
|
|
const modalTriggers = document.querySelectorAll('[data-modal]');
|
|
const closeModalButtons = document.querySelectorAll('.close-modal');
|
|
|
|
modalTriggers.forEach(trigger => {
|
|
trigger.addEventListener('click', () => {
|
|
const modalId = trigger.getAttribute('data-modal');
|
|
const modal = document.getElementById(modalId);
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
});
|
|
});
|
|
closeModalButtons.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const modal = btn.closest('[id$="Modal"]');
|
|
modal.classList.remove('flex');
|
|
modal.classList.add('hidden');
|
|
});
|
|
});
|
|
modals.forEach(m => {
|
|
m.addEventListener('click', (e) => {
|
|
if (e.target === m) {
|
|
m.classList.remove('flex');
|
|
m.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Websuche
|
|
const searchForm = document.getElementById('searchForm');
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchEngine = document.getElementById('searchEngine');
|
|
searchForm.addEventListener('submit', (evt) => {
|
|
evt.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
if (!query) return;
|
|
let url = '';
|
|
if (searchEngine.value === 'qwant') {
|
|
url = `https://www.qwant.com/?q=${encodeURIComponent(query)}`;
|
|
} else {
|
|
url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
|
|
}
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
// Support Modal: Nachricht senden
|
|
const sendSupportMessage = document.getElementById('sendSupportMessage');
|
|
if (sendSupportMessage) {
|
|
sendSupportMessage.addEventListener('click', () => {
|
|
const email = document.getElementById('emailInput').value.trim();
|
|
const problemType = document.getElementById('problemType').value;
|
|
const message = document.getElementById('messageInput').value.trim();
|
|
if (email && message) {
|
|
fetch('/send_support_message', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, problemType, message })
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
alert('Ihre Nachricht wurde erfolgreich gesendet.');
|
|
const modal = document.getElementById('supportModal');
|
|
modal.classList.remove('flex');
|
|
modal.classList.add('hidden');
|
|
} else {
|
|
alert('Fehler beim Senden der Nachricht.');
|
|
}
|
|
});
|
|
} else {
|
|
alert('Bitte E-Mail und Nachricht ausfüllen.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Settings Modal: Wallpaper und Stadt
|
|
let selectedWallpaper = '{{ wallpaper }}';
|
|
const wallpaperThumbs = document.querySelectorAll('.wallpaper-thumb');
|
|
wallpaperThumbs.forEach(thumb => {
|
|
thumb.addEventListener('click', function() {
|
|
wallpaperThumbs.forEach(t => {
|
|
t.classList.remove('border-blue-500');
|
|
t.classList.add('border-transparent');
|
|
});
|
|
this.classList.remove('border-transparent');
|
|
this.classList.add('border-blue-500');
|
|
selectedWallpaper = this.getAttribute('data-wallpaper');
|
|
});
|
|
});
|
|
|
|
const saveSettingsBtn = document.getElementById('saveSettings');
|
|
if (saveSettingsBtn) {
|
|
saveSettingsBtn.addEventListener('click', () => {
|
|
const city = document.getElementById('cityInput').value.trim();
|
|
const showForecast = document.getElementById('weatherForecastToggle').checked;
|
|
// Alte Settings laden
|
|
fetch('/get_settings')
|
|
.then(response => response.json())
|
|
.then(settings => {
|
|
const bookmarks = settings.bookmarks || [];
|
|
// Neue Settings absenden
|
|
fetch('/save_settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
wallpaper: selectedWallpaper,
|
|
city: city,
|
|
show_forecast: showForecast,
|
|
bookmarks: bookmarks
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Fehler beim Speichern der Einstellungen.');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Icon Auswahl
|
|
const iconButtons = document.querySelectorAll('.icon-option');
|
|
const selectedIconInput = document.getElementById('selectedIcon');
|
|
const previewIcon = document.getElementById('previewIcon');
|
|
iconButtons.forEach(button => {
|
|
button.addEventListener("click", function () {
|
|
// Alle Buttons zurücksetzen
|
|
iconButtons.forEach(btn => btn.classList.remove("bg-blue-500"));
|
|
// Aktuelles Icon markieren
|
|
this.classList.add("bg-blue-500");
|
|
// Icon-Name setzen
|
|
const iconClass = this.getAttribute("data-icon");
|
|
selectedIconInput.value = iconClass;
|
|
previewIcon.className = `fas ${iconClass} text-white text-xl`;
|
|
});
|
|
});
|
|
|
|
// Farb-Auswahl: Live Vorschau für die Hintergrundfarbe
|
|
const colorButtons = document.querySelectorAll('.color-option');
|
|
const selectedColorInput = document.getElementById('selectedColor');
|
|
const bookmarkPreview = document.getElementById('bookmarkPreview');
|
|
colorButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Optional: optisch markieren (hier per ring)
|
|
colorButtons.forEach(btn => btn.classList.remove('ring-2', 'ring-white'));
|
|
this.classList.add('ring-2', 'ring-white');
|
|
const colorClass = this.getAttribute('data-color');
|
|
selectedColorInput.value = colorClass;
|
|
// Hintergrund der Vorschau aktualisieren
|
|
bookmarkPreview.className = `w-12 h-12 flex items-center justify-center rounded-xl ${colorClass}`;
|
|
});
|
|
});
|
|
|
|
// Öffnen des Bookmark-Modals über Dock-Icon
|
|
const openBookmarkModal = document.getElementById('openBookmarkModal');
|
|
if (openBookmarkModal) {
|
|
openBookmarkModal.addEventListener('click', () => {
|
|
const modal = document.getElementById('bookmarkModal');
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
});
|
|
}
|
|
// Schließen des Bookmark-Modals über Schließen-Button
|
|
const closeBookmarkModal = document.getElementById('closeBookmarkModal');
|
|
if (closeBookmarkModal) {
|
|
closeBookmarkModal.addEventListener('click', () => {
|
|
const modal = document.getElementById('bookmarkModal');
|
|
modal.classList.remove('flex');
|
|
modal.classList.add('hidden');
|
|
});
|
|
}
|
|
|
|
// <!-- JavaScript für das Carousel -->
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const track = document.getElementById("carouselTrack");
|
|
const slides = document.querySelectorAll(".carousel-slide");
|
|
const prevButton = document.getElementById("carouselPrev");
|
|
const nextButton = document.getElementById("carouselNext");
|
|
|
|
let currentIndex = 0;
|
|
const totalSlides = slides.length;
|
|
|
|
function updateCarousel() {
|
|
const newTransformValue = `translateX(-${currentIndex * 100}%)`;
|
|
track.style.transform = newTransformValue;
|
|
}
|
|
|
|
nextButton.addEventListener("click", function () {
|
|
if (currentIndex < totalSlides - 1) {
|
|
currentIndex++;
|
|
updateCarousel();
|
|
}
|
|
});
|
|
|
|
prevButton.addEventListener("click", function () {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
updateCarousel();
|
|
}
|
|
});
|
|
|
|
// Falls nur eine Seite vorhanden ist, Navigation ausblenden
|
|
if (totalSlides <= 1) {
|
|
prevButton.style.display = "none";
|
|
nextButton.style.display = "none";
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock content %}
|