Caroouusseelll gemacht und bookmarks
This commit is contained in:
Jason Hirsch
@@ -48,6 +48,7 @@ def init_db():
|
||||
title TEXT NOT NULL,
|
||||
url TEXT NOT NULL,
|
||||
icon_class TEXT NOT NULL DEFAULT 'fas fa-bookmark',
|
||||
bg_color TEXT NOT NULL DEFAULT 'fas fa-bookmark',
|
||||
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||
);
|
||||
""")
|
||||
@@ -381,16 +382,32 @@ def manage_bookmarks(user_id):
|
||||
bookmarks = db.execute("SELECT * FROM bookmarks WHERE user_id=?", (user_id,)).fetchall()
|
||||
return render_template('admin.html', single_user=user, bookmarks=bookmarks)
|
||||
|
||||
@app.route('/admin/delete_bookmark/<int:bookmark_id>/<int:user_id>', methods=['POST'])
|
||||
def delete_bookmark(bookmark_id, user_id):
|
||||
if not is_admin():
|
||||
flash("Zugriff verweigert!", "red")
|
||||
return redirect(url_for('dashboard'))
|
||||
@app.route('/bookmarks/delete/<int:bookmark_id>', methods=['POST'])
|
||||
def delete_bookmark(bookmark_id):
|
||||
"""Löscht ein Lesezeichen, wenn der Benutzer es besitzt oder Admin ist."""
|
||||
if 'user_id' not in session:
|
||||
flash("Bitte melde dich an!", "red")
|
||||
return redirect(url_for('login'))
|
||||
|
||||
user_id = session['user_id']
|
||||
db = get_db()
|
||||
|
||||
# Prüfen, ob der Benutzer das Lesezeichen besitzt
|
||||
bookmark = db.execute("SELECT user_id FROM bookmarks WHERE id=?", (bookmark_id,)).fetchone()
|
||||
if not bookmark:
|
||||
flash("Lesezeichen nicht gefunden!", "red")
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
# Benutzer darf nur eigene Lesezeichen löschen, Admin kann alle löschen
|
||||
if bookmark['user_id'] != user_id and not is_admin():
|
||||
flash("Keine Berechtigung zum Löschen!", "red")
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
db.execute("DELETE FROM bookmarks WHERE id=?", (bookmark_id,))
|
||||
db.commit()
|
||||
|
||||
flash("Lesezeichen gelöscht!", "green")
|
||||
return redirect(url_for('manage_bookmarks', user_id=user_id))
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
# ------------------------------------------------------------
|
||||
# ZEITERFASSUNG
|
||||
@@ -490,7 +507,7 @@ def dashboard():
|
||||
|
||||
# DB-Bookmarks für den eingeloggten User
|
||||
user_bookmarks = db.execute("""
|
||||
SELECT id, title, url, icon_class
|
||||
SELECT id, title, url, icon_class, bg_color
|
||||
FROM bookmarks
|
||||
WHERE user_id=?
|
||||
ORDER BY id DESC
|
||||
@@ -708,6 +725,37 @@ def add_notification_multi():
|
||||
flash("Benachrichtigungen erstellt!", "green")
|
||||
return redirect(url_for('admin_panel'))
|
||||
|
||||
# ------------------------------------------------------------
|
||||
# BENUTZER-LESEZEICHEN (nur für sich selbst)
|
||||
# ------------------------------------------------------------
|
||||
|
||||
@app.route('/bookmarks/add', methods=['POST'])
|
||||
def add_bookmark():
|
||||
if 'user_id' not in session:
|
||||
flash("Bitte melde dich an!", "red")
|
||||
return redirect(url_for('login'))
|
||||
|
||||
user_id = session['user_id']
|
||||
title = request.form.get('title')
|
||||
url_ = request.form.get('url')
|
||||
icon_class = request.form.get('icon_class', 'fas fa-bookmark')
|
||||
bg_color = request.form.get('bg_color', 'bg-blue-500') # Standardfarbe
|
||||
|
||||
if not title or not url_:
|
||||
flash("Bitte Titel und URL angeben!", "red")
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
db = get_db()
|
||||
db.execute(
|
||||
"INSERT INTO bookmarks (user_id, title, url, icon_class, bg_color) VALUES (?, ?, ?, ?, ?)",
|
||||
(user_id, title, url_, icon_class, bg_color)
|
||||
)
|
||||
db.commit()
|
||||
|
||||
flash("Lesezeichen erfolgreich hinzugefügt!", "green")
|
||||
return redirect(url_for('dashboard'))
|
||||
|
||||
|
||||
|
||||
@app.route('/admin/bookmarks/multi', methods=['POST'])
|
||||
def add_bookmarks_multi():
|
||||
|
||||
@@ -25,9 +25,8 @@
|
||||
<!-- 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" />
|
||||
<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>
|
||||
@@ -41,7 +40,7 @@
|
||||
<!-- Flash-Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="mb-4 w-full max-w-lg ">
|
||||
<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">
|
||||
@@ -117,153 +116,225 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Carousel (für Lesezeichen) -->
|
||||
<!-- Bookmark Carousel -->
|
||||
<div class="glassmorphism p-4 mb-12 relative w-full max-w-3xl rounded">
|
||||
<div id="appCarousel" class="overflow-hidden">
|
||||
<div class="flex transition-transform duration-300 ease-in-out">
|
||||
<div class="w-full flex-shrink-0">
|
||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
{% for bm in user_bookmarks %}
|
||||
<a href="{{ bm.url }}" class="flex flex-col items-center" title="{{ bm.title }}" target="_blank">
|
||||
<div class="w-12 h-12 flex items-center justify-center bg-blue-500 rounded-xl mb-1
|
||||
transition-transform hover:scale-110">
|
||||
<i class="{{ bm.icon_class }} text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-center text-xs font-medium">{{ bm.title }}</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 V1) -->
|
||||
<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 %}
|
||||
|
||||
<!-- Einstellungen (öffnet Settings-Modal V1) -->
|
||||
<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 (aus V1, mit ProblemType/E-Mail/Nachricht + sendSupportMessage) -->
|
||||
<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 (aus V1, mit Wallpaper-Auswahl, Stadt, etc.) -->
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- 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 }}" />
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<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">
|
||||
<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 -->
|
||||
@@ -288,7 +359,7 @@
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// GSAP-Effekte
|
||||
// GSAP-Effekte (vorausgesetzt, GSAP ist in base.html eingebunden)
|
||||
gsap.from(".glassmorphism", {
|
||||
duration: 1, opacity: 0, y: 50, stagger: 0.2, ease: "power3.out"
|
||||
});
|
||||
@@ -338,7 +409,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Websuche (inline)
|
||||
// Websuche
|
||||
const searchForm = document.getElementById('searchForm');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const searchEngine = document.getElementById('searchEngine');
|
||||
@@ -355,7 +426,7 @@
|
||||
window.open(url, '_blank');
|
||||
});
|
||||
|
||||
// Support Modal: Nachricht senden (aus V1)
|
||||
// Support Modal: Nachricht senden
|
||||
const sendSupportMessage = document.getElementById('sendSupportMessage');
|
||||
if (sendSupportMessage) {
|
||||
sendSupportMessage.addEventListener('click', () => {
|
||||
@@ -383,16 +454,15 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Settings Modal (Wallpaper, Stadt, etc.) aus V1
|
||||
// Lese/Schreibe Settings per '/get_settings' und '/save_settings'
|
||||
// Settings Modal: Wallpaper und Stadt
|
||||
let selectedWallpaper = '{{ wallpaper }}';
|
||||
|
||||
// Markiere ausgewähltes Wallpaper
|
||||
const wallpaperThumbs = document.querySelectorAll('.wallpaper-thumb');
|
||||
wallpaperThumbs.forEach(thumb => {
|
||||
thumb.addEventListener('click', function() {
|
||||
wallpaperThumbs.forEach(t => t.classList.remove('border-blue-500'));
|
||||
wallpaperThumbs.forEach(t => t.classList.add('border-transparent'));
|
||||
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');
|
||||
@@ -431,5 +501,93 @@
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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 %}
|
||||
|
||||
Reference in New Issue
Block a user