Compare commits

..

7 Commits

Author SHA1 Message Date
Jason Hirsch
4ba17ca9bf Caroouusseelll gemacht und bookmarks 2025-02-21 22:12:13 +01:00
f78a365e75 anpassungen an kundenserver 2025-02-20 00:17:50 +01:00
4b1d7ca7be zeiterfassung für admin eingefügt 2025-02-19 21:47:29 +01:00
3757658539 letzte korrekturen und aufräumen 2025-02-19 21:39:15 +01:00
e097facef7 dashboard fix 2025-02-19 21:22:11 +01:00
d5a92d187f wallpaper fix 2025-02-19 21:14:02 +01:00
209a23509b styles geändert 2025-02-19 21:01:55 +01:00
9 changed files with 839 additions and 340 deletions

14
Dashboard_V2/Dockerfile Normal file
View File

@@ -0,0 +1,14 @@
FROM python:3.9-slim
WORKDIR /app
# Abhängigkeiten kopieren und installieren
COPY requirements.txt requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
# Anwendungscode kopieren
COPY . .
EXPOSE 9559
CMD ["python", "app.py"]

View File

@@ -12,7 +12,7 @@ EMAIL_SENDER = "clickcandit@gmail.com"
EMAIL_PASSWORD = "iuxexntistlwilhl"
app = Flask(__name__)
app.secret_key = "SUPER_SECRET_KEY" # Bitte anpassen
app.secret_key = "fiudsh9uw4hefjsefnjdsdh"
DATABASE = 'clickcandit.db'
@@ -32,7 +32,6 @@ def close_connection(exception):
def init_db():
with app.app_context():
db = get_db()
# Users
db.execute("""
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -42,7 +41,6 @@ def init_db():
is_admin INTEGER DEFAULT 0
);
""")
# Bookmarks
db.execute("""
CREATE TABLE IF NOT EXISTS bookmarks (
id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -50,14 +48,14 @@ 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
);
""")
# Notifications
db.execute("""
CREATE TABLE IF NOT EXISTS notifications (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER, -- NULL = für alle
user_id INTEGER,
message TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
is_read INTEGER DEFAULT 0
@@ -71,7 +69,6 @@ def init_db():
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
""")
# Time Tracking
db.execute("""
CREATE TABLE IF NOT EXISTS time_entries (
id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -82,7 +79,6 @@ def init_db():
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
""")
# Settings (OPTIONAL, falls du globale User-Einstellungen abspeichern willst)
db.execute("""
CREATE TABLE IF NOT EXISTS user_settings (
id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -94,17 +90,6 @@ def init_db():
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
""")
db.execute("""
CREATE TABLE IF NOT EXISTS settings (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER NOT NULL,
wallpaper TEXT DEFAULT '19.png',
city TEXT DEFAULT 'Berlin',
show_forecast INTEGER DEFAULT 1,
bookmarks TEXT DEFAULT '[]',
FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
);
""")
db.commit()
# ------------------------------------------------------------
@@ -204,7 +189,7 @@ def login():
flash("Benutzername oder Passwort falsch!", "red")
return render_template('login.html')
@app.route('/logout', methods=['POST'])
@app.route('/logout', methods=['GET', 'POST'])
def logout():
session.clear()
flash("Erfolgreich abgemeldet!", "green")
@@ -397,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
@@ -448,6 +449,25 @@ def time_tracking():
return redirect(url_for('dashboard'))
@app.route('/admin/time_tracking', methods=['GET'])
def admin_time_tracking():
if not is_admin():
flash("Zugriff verweigert!", "red")
return redirect(url_for('dashboard'))
db = get_db()
# Hole alle Zeiteinträge (JOIN mit users, damit wir den username sehen)
time_entries = db.execute("""
SELECT t.id, t.user_id, t.activity, t.start_time, t.end_time,
u.username
FROM time_entries t
JOIN users u ON t.user_id = u.id
ORDER BY t.start_time DESC
""").fetchall()
return render_template('admin_time_entries.html', time_entries=time_entries)
# ------------------------------------------------------------
# DASHBOARD
# ------------------------------------------------------------
@@ -460,40 +480,54 @@ def dashboard():
user_id = session['user_id']
db = get_db()
# User abfragen
# User und Settings ermitteln
user = db.execute("SELECT * FROM users WHERE id = ?", (user_id,)).fetchone()
if not user:
flash("Benutzer nicht gefunden.", "red")
return redirect(url_for('logout'))
# Settings aus user_settings
settings = db.execute("SELECT * FROM user_settings WHERE user_id = ?", (user_id,)).fetchone()
# Standardwerte
# Standardwerte aus settings
if not settings:
wallpaper = '19.png'
city = 'Berlin'
show_forecast = True
bookmarks = []
# (Dieses 'bookmarks' ist optional, kannst du weglassen,
# wenn du ausschließlich die DB-Tabelle 'bookmarks' nutzt)
bookmarks_setting = []
else:
wallpaper = settings['wallpaper']
city = settings['city']
show_forecast = bool(settings['show_forecast'])
if settings['bookmarks']:
bookmarks = settings['bookmarks'].split(",")
bookmarks_setting = settings['bookmarks'].split(",") # Nur als Fallback
else:
bookmarks = []
bookmarks_setting = []
# Wetter holen (wenn gewünscht)
current_temp, weather_icon, forecast = get_weather(city)
if current_temp is None:
current_temp = "N/A"
weather_icon = "fa-question"
forecast = []
# DB-Bookmarks für den eingeloggten User
user_bookmarks = db.execute("""
SELECT id, title, url, icon_class, bg_color
FROM bookmarks
WHERE user_id=?
ORDER BY id DESC
""", (user_id,)).fetchall()
# Domain, Logo usw.
domain = "example.com"
logo_path = url_for('static', filename='clickcandit.png')
# Notifications für diesen User (user_id) oder globale (user_id IS NULL)
notifications = db.execute("""
SELECT id, user_id, message, created_at
FROM notifications
WHERE user_id=? OR user_id IS NULL
ORDER BY created_at DESC
""", (user_id,)).fetchall()
# Ggf. Time-Entries (falls du sie zeigen willst)
time_entries = db.execute("""
SELECT *
FROM time_entries
WHERE user_id=?
ORDER BY start_time DESC
""", (user_id,)).fetchall()
# Beispiel-Apps
user_app_chunks = [
@@ -515,25 +549,83 @@ def dashboard():
]
]
# Wetter (Dummy oder API)
current_temp, weather_icon, forecast = get_weather(city)
if current_temp is None:
current_temp = "N/A"
weather_icon = "fa-question"
forecast = []
domain = "clickcandit.com/login"
logo_path = url_for('static', filename='clickcandit.png')
return render_template(
'dashboard.html',
user=user['username'],
wallpaper=wallpaper,
city=city,
show_forecast=show_forecast,
bookmarks=bookmarks,
bookmarks=bookmarks_setting, # falls noch gebraucht, sonst weglassen
current_temp=current_temp,
weather_icon=weather_icon,
forecast=forecast,
domain=domain,
logo_path=logo_path,
user_app_chunks=user_app_chunks
user_app_chunks=user_app_chunks,
# Hier die neuen Variablen:
user_bookmarks=user_bookmarks,
notifications=notifications,
time_entries=time_entries
)
# ------------------------------------------------------------
# SUPPORT & SETTINGS ROUTEN (Aus V1)
# ------------------------------------------------------------
@app.route('/delete_notification/<int:notif_id>', methods=['POST'])
def delete_notification(notif_id):
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 die Notification existiert
row = db.execute("""
SELECT user_id
FROM notifications
WHERE id=?
""", (notif_id,)).fetchone()
if not row:
flash("Benachrichtigung existiert nicht.", "red")
return redirect(url_for('dashboard'))
# Wenn user_id = NULL => globale Notification
# Du kannst selbst definieren, ob jeder sie löschen darf oder nur Admin
# Hier: Jeder kann globale Notification löschen, wenn er sie sieht.
# Oder du sagst: Nur Admin kann globale Notis löschen -> if row['user_id'] is None and not is_admin(): ...
if row['user_id'] is None:
# Optional: Nur Admin löschen
if not is_admin():
flash('Nicht erlaubt', 'red')
return redirect(url_for('dashboard'))
pass
else:
# Wenn es eine user-spezifische Notification ist: user_id muss übereinstimmen
if row['user_id'] != user_id:
flash("Keine Berechtigung, diese Benachrichtigung zu löschen.", "red")
return redirect(url_for('dashboard'))
# Benachrichtigung löschen
db.execute("DELETE FROM notifications WHERE id=?", (notif_id,))
db.commit()
flash("Benachrichtigung gelöscht!", "green")
return redirect(url_for('dashboard'))
@app.route('/send_support_message', methods=['POST'])
def send_support_message():
"""
@@ -580,12 +672,124 @@ def get_settings():
else:
# Falls noch kein Datensatz existiert
return jsonify({
"wallpaper": "1.png",
"wallpaper": "24.png",
"city": "",
"show_forecast": False,
"bookmarks": []
})
@app.context_processor
def inject_wallpaper():
"""
Dieser Context Processor wird bei jedem Template-Aufruf ausgeführt.
Ermittelt das Wallpaper des eingeloggten Benutzers (falls eingeloggt)
und stellt es allen Templates als Variable 'WALLPAPER_URL' bereit.
"""
if 'user_id' in session:
db = get_db()
row = db.execute("SELECT wallpaper FROM user_settings WHERE user_id=?", (session['user_id'],)).fetchone()
if row and row['wallpaper']:
# Bsp: row['wallpaper'] könnte '19.png' o. ä. sein
return {
"WALLPAPER_URL": url_for('static', filename=row['wallpaper'])
}
# Fallback: Wenn User nicht eingeloggt oder kein Wallpaper gesetzt
return {
"WALLPAPER_URL": url_for('static', filename='24.png')
}
@app.route('/admin/notifications/multi', methods=['POST'])
def add_notification_multi():
if not is_admin():
flash("Zugriff verweigert!", "red")
return redirect(url_for('dashboard'))
message = request.form.get('message')
target_list = request.form.getlist('target_users') # ['all'] oder ['1','2'] etc.
if not message:
flash("Bitte eine Nachricht eingeben.", "red")
return redirect(url_for('admin_panel'))
db = get_db()
# Wenn 'all' in der Liste, Notification für alle
if 'all' in target_list:
db.execute("INSERT INTO notifications (user_id, message) VALUES (NULL, ?)", (message,))
else:
# Sonst für jede ausgewählte ID
for uid in target_list:
db.execute("INSERT INTO notifications (user_id, message) VALUES (?, ?)", (uid, message))
db.commit()
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():
if not is_admin():
flash("Zugriff verweigert!", "red")
return redirect(url_for('dashboard'))
# Checkboxen im Template: name='target_users'
target_list = request.form.getlist('target_users') # Liste der IDs (Strings)
title = request.form.get('title')
url_ = request.form.get('url')
icon = request.form.get('icon_class', 'fas fa-bookmark')
# Ggf. Validierung
if not title or not url_:
flash("Bitte Titel und URL angeben!", "red")
return redirect(url_for('admin_panel'))
if not target_list:
flash("Bitte mindestens einen Benutzer auswählen!", "red")
return redirect(url_for('admin_panel'))
icon = request.form.get('icon_class')
db = get_db()
for uid in target_list:
db.execute(
"INSERT INTO bookmarks (user_id, title, url, icon_class) VALUES (?, ?, ?, ?)",
(uid, title, url_, icon)
)
db.commit()
flash("Neues Lesezeichen für mehrere Benutzer hinzugefügt!", "green")
return redirect(url_for('admin_panel'))
@app.route('/save_settings', methods=['POST'])
def save_settings():
"""
@@ -596,7 +800,7 @@ def save_settings():
return jsonify({"success": False, "error": "not logged in"}), 403
data = request.get_json()
wallpaper = data.get('wallpaper', '1.png')
wallpaper = data.get('wallpaper', '24.png')
city = data.get('city', '')
show_forecast = data.get('show_forecast', False)
bookmarks_list = data.get('bookmarks', [])
@@ -637,4 +841,4 @@ def get_weather(city):
# ------------------------------------------------------------
if __name__ == '__main__':
init_db()
app.run(debug=True)
app.run(debug=True, port=9559, host="0.0.0.0")

Binary file not shown.

View File

@@ -0,0 +1,17 @@
version: "3.7"
services:
web:
build: .
ports:
- "9559:9559"
volumes:
- ./clickcandit.db:/app/clickcandit.db
- ./:/app
environment:
- FLASK_ENV=production
- SMTP_SERVER=smtp.gmail.com
- SMTP_PORT=465
- EMAIL_SENDER=clickcandit@gmail.com
- EMAIL_PASSWORD=iuxexntistlwilhl
- APP_SECRET_KEY=fiudsh9uw4hefjsefnjdsdh
restart: always

View File

@@ -1,2 +1,3 @@
Flask
Werkzeug
Flask>=2.2
gunicorn

View File

@@ -1,148 +1,180 @@
<!-- templates/admin.html -->
{% extends "base.html" %}
{% block title %}Admin-Bereich{% endblock %}
{% block title %}
Admin-Bereich
{% endblock title %}
{% block content %}
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
<h1 class="text-3xl font-bold mb-6">Admin-Bereich</h1>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10">
<h1 class="text-3xl font-bold text-center mb-8">Admin-Bereich</h1>
<!-- Flash-Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
<div class="bg-{{ category }}-500 text-white p-3 rounded mb-4">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<!-- Benutzer anlegen -->
<div class="glassmorphism p-4 rounded shadow-lg mb-8">
<h2 class="text-xl font-semibold mb-2">Neuen Benutzer anlegen</h2>
<!-- Grid Layout für Boxen -->
<div class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
<!-- NEUEN BENUTZER ANLEGEN -->
<div class="glassmorphism p-6 rounded shadow flex flex-col">
<h2 class="text-xl font-semibold mb-4">Neuen Benutzer anlegen</h2>
<form method="POST" action="{{ url_for('admin_panel') }}" class="space-y-4">
<div>
<label class="block mb-1">Benutzername</label>
<input type="text" name="new_username" class="p-2 border rounded w-full" required>
<label class="block mb-1 font-medium">Benutzername:</label>
<input type="text" name="new_username" required class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>
<div>
<label class="block mb-1">Passwort</label>
<input type="password" name="new_password" class="p-2 border rounded w-full" required>
<label class="block mb-1 font-medium">Passwort:</label>
<input type="password" name="new_password" required class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" name="new_is_admin" class="form-checkbox h-5 w-5 text-blue-600" />
<span class="ml-2">Als Admin markieren</span>
</label>
<div class="flex items-center space-x-2">
<input type="checkbox" name="new_is_admin" class="h-5 w-5 rounded border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
<span class="font-medium">Als Admin markieren</span>
</div>
<button type="submit" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-3 px-6 rounded shadow transition duration-200">
Erstellen
</button>
</form>
</div>
<!-- Benutzerübersicht -->
<div class="glassmorphism p-4 rounded shadow-lg mb-8">
<h2 class="text-xl font-semibold mb-2">Benutzerverwaltung</h2>
<!-- BENUTZERVERWALTUNG -->
<div style="background-color: transparent !important;" class="glassmorphism p-6 rounded shadow flex flex-col">
<h2 class="text-xl font-semibold mb-4">Benutzerverwaltung</h2>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="border-b">
<th class="px-2 py-1">ID</th>
<th class="px-2 py-1">Username</th>
<th class="px-2 py-1">Admin?</th>
<th class="px-2 py-1"></th>
<th class="p-3 text-left">ID</th>
<th class="p-3 text-left">Username</th>
<th class="p-3 text-left">Admin?</th>
<th class="p-3 text-left">Aktion</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr class="border-b">
<td class="px-2 py-1">{{ u.id }}</td>
<td class="px-2 py-1">{{ u.username }}</td>
<td class="px-2 py-1">{{ 'Ja' if u.is_admin else 'Nein' }}</td>
<td class="px-2 py-1 text-right">
{% if u.id != session.user_id %}
<form method="POST" action="{{ url_for('delete_user', user_id=u.id) }}" onsubmit="return confirm('Benutzer wirklich löschen?')">
<button class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 text-sm">
<td class="p-3">{{ u.id }}</td>
<td class="p-3">{{ u.username }}</td>
<td class="p-3">{{ 'Ja' if u.is_admin else 'Nein' }}</td>
<td class="p-3 space-x-2">
<a href="{{ url_for('manage_bookmarks', user_id=u.id) }}"
style="margin: 10px !important;" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm transition duration-200">
Lesezeichen
</a>
<form method="POST" action="{{ url_for('delete_user', user_id=u.id) }}" class="inline"
onsubmit="return confirm('Benutzer wirklich löschen?')">
<button style="margin: 10px !important;" class="bg-red-500 text-white px-4 py-2 rounded text-sm transition duration-200">
Löschen
</button>
</form>
{% else %}
<span class="text-xs text-gray-400">[Eigener Account]</span>
{% endif %}
<a href="{{ url_for('manage_bookmarks', user_id=u.id) }}" class="ml-3 bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 text-sm">
Lesezeichen
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Benachrichtigung erstellen -->
<div class="glassmorphism p-4 rounded shadow-lg mb-8">
<h2 class="text-xl font-semibold mb-2">Benachrichtigung erstellen</h2>
<form method="POST" action="{{ url_for('add_notification') }}" class="space-y-4">
<!-- BENACHRICHTIGUNG ERSTELLEN (MULTI-USER) -->
<div class="glassmorphism p-6 rounded shadow flex flex-col">
<h2 class="text-xl font-semibold mb-4">Benachrichtigung erstellen</h2>
<form method="POST" action="{{ url_for('add_notification_multi') }}" class="space-y-4">
<div>
<label class="block mb-1">Nachricht</label>
<textarea name="message" class="p-2 border rounded w-full" rows="2" required></textarea>
<label class="block mb-1 font-medium">Nachricht:</label>
<textarea name="message" rows="3" required class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400"></textarea>
</div>
<div>
<label class="block mb-1">Für Benutzer</label>
<select name="user_id" class="p-2 border rounded w-full">
<option value="all">Alle</option>
<p class="mb-2 font-medium">Für welche Benutzer?</p>
<div class="flex flex-wrap gap-2">
<label class="inline-flex items-center gap-1 bg-gray-200 dark:bg-gray-800 p-2 rounded cursor-pointer"
for="notify_all">
<input type="checkbox" id="notify_all" name="target_users" value="all" class="h-5 w-5 rounded border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
Alle
</label>
{% for u in users %}
<option value="{{ u.id }}">{{ u.username }}</option>
<label class="inline-flex items-center gap-1 bg-gray-200 dark:bg-gray-800 p-2 rounded cursor-pointer">
<input type="checkbox" name="target_users" value="{{ u.id }}" class="h-5 w-5 rounded border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
{{ u.username }}
</label>
{% endfor %}
</select>
</div>
<button type="submit" class="bg-purple-500 text-white py-2 px-4 rounded hover:bg-purple-600">
</div>
<button type="submit" class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded shadow transition duration-200">
Senden
</button>
</form>
</div>
<!-- Falls man Lesezeichen für EINEN User verwaltet -->
{% if single_user is defined and single_user %}
<div class="glassmorphism p-4 rounded shadow-lg mb-8">
<h2 class="text-xl font-semibold mb-2">
Lesezeichen für {{ single_user.username }}
</h2>
<form method="POST" class="space-y-4">
<div>
<label class="block mb-1">Titel</label>
<input type="text" name="title" class="p-2 border rounded w-full" required>
<!-- LESEZEICHEN-VERWALTUNG (MULTI-USER) -->
<div class="glassmorphism p-6 rounded shadow flex flex-col">
<h2 class="text-xl font-semibold mb-4">Lesezeichen-Verwaltung</h2>
<form method="POST" action="{{ url_for('add_bookmarks_multi') }}" class="space-y-4">
<p class="font-medium">Für welche Benutzer soll das Lesezeichen gelten?</p>
<div class="flex flex-wrap gap-2">
{% for u in users %}
<label class="inline-flex items-center gap-1 bg-gray-200 dark:bg-gray-800 p-2 rounded cursor-pointer">
<input type="checkbox" name="target_users" value="{{ u.id }}" class="h-5 w-5 rounded border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
{{ u.username }}
</label>
{% endfor %}
</div>
<div>
<label class="block mb-1">URL</label>
<input type="text" name="url" class="p-2 border rounded w-full" required>
<label class="block mb-1 font-medium">Titel:</label>
<input type="text" name="title" required class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>
<div>
<label class="block mb-1">Icon (FontAwesome CSS-Klasse)</label>
<input type="text" name="icon_class" class="p-2 border rounded w-full" placeholder="z.B. fas fa-user">
<label class="block mb-1 font-medium">URL:</label>
<input type="text" name="url" required class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>
<button type="submit" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
<div>
<label class="block mb-1 font-medium">Icon (FontAwesome CSS-Klasse):</label>
<input type="text" name="icon_class" placeholder="z.B. fas fa-user" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400" />
</div>
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded shadow transition duration-200">
Hinzufügen
</button>
</form>
<!-- Tabelle der vorhandenen Bookmarks -->
<ul class="mt-4 space-y-2">
{% if single_user and bookmarks %}
<p class="mt-6 mb-4 font-semibold">Lesezeichen für {{ single_user.username }}:</p>
<ul class="space-y-3">
{% for bm in bookmarks %}
<li class="bg-gray-100 dark:bg-gray-700 p-2 rounded flex justify-between items-center">
<li class="bg-gray-200 dark:bg-gray-800 p-3 rounded flex justify-between items-center">
<div>
<i class="{{ bm.icon_class }} mr-2"></i>
<a href="{{ bm.url }}" target="_blank" class="text-blue-600 hover:underline">{{ bm.title }}</a>
<a href="{{ bm.url }}" target="_blank" class="text-blue-500 hover:underline">
{{ bm.title }}
</a>
</div>
<form method="POST" action="{{ url_for('delete_bookmark', bookmark_id=bm.id, user_id=single_user.id) }}" onsubmit="return confirm('Lesezeichen wirklich löschen?')">
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button>
<form method="POST"
action="{{ url_for('delete_bookmark', bookmark_id=bm.id, user_id=single_user.id) }}"
onsubmit="return confirm('Lesezeichen wirklich löschen?')">
<button class="text-red-500 hover:text-red-700 transition duration-200">
<i class="fas fa-trash-alt"></i>
</button>
</form>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<p class="text-sm text-gray-400 mt-6">Wähle oben in der Benutzerverwaltung „Lesezeichen“ für einen Nutzer aus, um konkrete Einträge zu sehen.</p>
{% endif %}
</div>
<a href="{{ url_for('admin_time_tracking') }}"
class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
Zeiterfassung einsehen
</a>
<a href="{{ url_for('dashboard') }}" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
</div> <!-- Grid Ende -->
<a href="{{ url_for('dashboard') }}"
class="inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded shadow transition duration-200 mt-8">
Zurück zum Dashboard
</a>
</div>

View File

@@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block title %}Zeiterfassung aller Benutzer{% endblock title %}
{% block content %}
<div class="container mx-auto py-8 px-4">
<h1 class="text-2xl font-bold mb-4">Zeiterfassung (alle Benutzer)</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 mb-2 rounded">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="overflow-x-auto">
<table class="table-auto w-full text-left">
<thead>
<tr class="border-b">
<th class="px-2 py-1">ID</th>
<th class="px-2 py-1">Benutzer</th>
<th class="px-2 py-1">Aktivität</th>
<th class="px-2 py-1">Start</th>
<th class="px-2 py-1">Ende</th>
<th class="px-2 py-1">Dauer</th>
</tr>
</thead>
<tbody>
{% for entry in time_entries %}
<tr class="border-b">
<td class="px-2 py-1">{{ entry.id }}</td>
<td class="px-2 py-1">{{ entry.username }}</td>
<td class="px-2 py-1">{{ entry.activity }}</td>
<td class="px-2 py-1">{{ entry.start_time }}</td>
<td class="px-2 py-1">
{% if entry.end_time %}
{{ entry.end_time }}
{% else %}
<span class="text-sm text-gray-600">läuft …</span>
{% endif %}
</td>
<td class="px-2 py-1">
{% if entry.end_time %}
<!-- Beispielhafter Zeitunterschied in Minuten -->
{% set duration = (entry.end_time|datetime - entry.start_time|datetime).total_seconds() / 60 %}
{{ duration|round(2) }} Minuten
{% else %}
...
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ url_for('admin_panel') }}"
class="inline-block bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600">
Zurück zum Admin-Menü
</a>
</div>
{% endblock content %}

View File

@@ -37,7 +37,7 @@
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
border-radius: 15px !important;
}
.dark .glassmorphism {
background: rgba(0, 0, 0, 0.2);
@@ -66,9 +66,9 @@
</style>
</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors duration-300"
style="background-image: url('{{ url_for('static', filename='1.png') }}');">
style="background-image: url('{{ WALLPAPER_URL }}');">
{% block content %}{% endblock %}
{% block content %}{% endblock content %}
<script>
// Dark Mode init

View File

@@ -24,15 +24,14 @@
<!-- 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;" class="flex flex-col sm:flex-row items-center justify-center">
<input type="text" style="background-color: transparent !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;" class="bg-transparent border-0 outline-none text-gray-800 dark:text-white ml-2">
<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-4 py-2 rounded hover:bg-green-600 ml-2">
<button type="submit" class="bg-green-500 text-white px-2 py-2 rounded hover:bg-green-600 ml-2">
Los
</button>
</form>
@@ -43,7 +42,7 @@
{% if messages %}
<div class="mb-4 w-full max-w-lg">
{% for category, message in messages %}
<div class="alert flex items-center bg-{{ category }}-500 text-white text-sm font-bold px-4 py-3 mb-2"
<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"
@@ -69,9 +68,18 @@
{% 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">
<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>
@@ -85,7 +93,7 @@
<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" placeholder="Aktivität"
<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">
@@ -108,62 +116,135 @@
</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 %}
<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">
<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>
<!-- 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>
</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">
<!-- 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">
<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">
<!-- 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">
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">
<!-- 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>
</div>
<!-- =========================== MODALS =========================== -->
<!-- =========================== MODALS =========================== -->
<!-- Home Modal -->
<div id="homeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<!-- 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>
@@ -173,15 +254,14 @@
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">
<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>
</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">
<!-- 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>
@@ -213,10 +293,10 @@
Schließen
</button>
</div>
</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">
<!-- 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>
@@ -226,9 +306,7 @@
<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"
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>
@@ -255,6 +333,8 @@
Schließen
</button>
</div>
</div>
</div>
<!-- JavaScript fürs Dashboard -->
@@ -279,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"
});
@@ -329,7 +409,7 @@
});
});
// Websuche (inline)
// Websuche
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');
const searchEngine = document.getElementById('searchEngine');
@@ -346,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', () => {
@@ -374,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');
@@ -422,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 %}