"feat: Implement admin guest request feature"
This commit is contained in:
parent
8f3851290e
commit
1dc335709b
@ -237,6 +237,10 @@ def api_get_guest_request(request_id):
|
||||
def api_approve_request(request_id):
|
||||
"""Gastanfrage genehmigen."""
|
||||
try:
|
||||
data = request.get_json() or {}
|
||||
approval_notes = data.get('notes', '')
|
||||
printer_id = data.get('printer_id') # Optional: Drucker zuweisen/ändern
|
||||
|
||||
with get_cached_session() as db_session:
|
||||
guest_request = db_session.query(GuestRequest).filter_by(id=request_id).first()
|
||||
if not guest_request:
|
||||
@ -245,8 +249,22 @@ def api_approve_request(request_id):
|
||||
if guest_request.status != "pending":
|
||||
return jsonify({"error": "Anfrage wurde bereits bearbeitet"}), 400
|
||||
|
||||
# Drucker validieren, falls angegeben
|
||||
if printer_id:
|
||||
printer = db_session.query(Printer).filter_by(id=printer_id, active=True).first()
|
||||
if not printer:
|
||||
return jsonify({"error": "Ungültiger Drucker ausgewählt"}), 400
|
||||
guest_request.printer_id = printer_id
|
||||
|
||||
# Sicherstellen, dass ein Drucker zugewiesen ist
|
||||
if not guest_request.printer_id:
|
||||
return jsonify({"error": "Kein Drucker zugewiesen. Bitte wählen Sie einen Drucker aus."}), 400
|
||||
|
||||
# Anfrage genehmigen
|
||||
guest_request.status = "approved"
|
||||
guest_request.processed_by = current_user.id
|
||||
guest_request.processed_at = datetime.now()
|
||||
guest_request.approval_notes = approval_notes
|
||||
|
||||
# OTP generieren
|
||||
otp_plain = guest_request.generate_otp()
|
||||
@ -278,13 +296,16 @@ def api_approve_request(request_id):
|
||||
|
||||
db_session.commit()
|
||||
|
||||
logger.info(f"Gastanfrage {request_id} genehmigt von Benutzer {current_user.id}")
|
||||
logger.info(f"Gastanfrage {request_id} genehmigt von Admin {current_user.id} ({current_user.name})")
|
||||
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"status": "approved",
|
||||
"job_id": job.id,
|
||||
"otp": otp_plain # Nur in dieser Antwort wird der OTP-Klartext zurückgegeben
|
||||
"otp": otp_plain, # Nur in dieser Antwort wird der OTP-Klartext zurückgegeben
|
||||
"approved_by": current_user.name,
|
||||
"approved_at": guest_request.processed_at.isoformat(),
|
||||
"notes": approval_notes
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
@ -297,7 +318,10 @@ def api_deny_request(request_id):
|
||||
"""Gastanfrage ablehnen."""
|
||||
try:
|
||||
data = request.get_json() or {}
|
||||
reason = data.get('reason', '')
|
||||
rejection_reason = data.get('reason', '')
|
||||
|
||||
if not rejection_reason.strip():
|
||||
return jsonify({"error": "Ablehnungsgrund ist erforderlich"}), 400
|
||||
|
||||
with get_cached_session() as db_session:
|
||||
guest_request = db_session.query(GuestRequest).filter_by(id=request_id).first()
|
||||
@ -309,13 +333,20 @@ def api_deny_request(request_id):
|
||||
|
||||
# Anfrage ablehnen
|
||||
guest_request.status = "denied"
|
||||
guest_request.processed_by = current_user.id
|
||||
guest_request.processed_at = datetime.now()
|
||||
guest_request.rejection_reason = rejection_reason
|
||||
|
||||
db_session.commit()
|
||||
|
||||
logger.info(f"Gastanfrage {request_id} abgelehnt von Benutzer {current_user.id}")
|
||||
logger.info(f"Gastanfrage {request_id} abgelehnt von Admin {current_user.id} ({current_user.name}): {rejection_reason}")
|
||||
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"status": "denied"
|
||||
"status": "denied",
|
||||
"rejected_by": current_user.name,
|
||||
"rejected_at": guest_request.processed_at.isoformat(),
|
||||
"reason": rejection_reason
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
@ -444,4 +475,169 @@ def api_mark_notification_read(notification_id):
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Fehler beim Markieren der Benachrichtigung als gelesen: {str(e)}")
|
||||
return jsonify({"error": "Fehler beim Verarbeiten der Anfrage"}), 500
|
||||
return jsonify({"error": "Fehler beim Verarbeiten der Anfrage"}), 500
|
||||
|
||||
@guest_blueprint.route('/api/admin/requests', methods=['GET'])
|
||||
@approver_required
|
||||
def api_get_all_requests():
|
||||
"""Alle Gastanfragen für Admins abrufen."""
|
||||
try:
|
||||
# Filter-Parameter
|
||||
status_filter = request.args.get('status', 'all') # all, pending, approved, denied
|
||||
limit = int(request.args.get('limit', 50))
|
||||
offset = int(request.args.get('offset', 0))
|
||||
|
||||
with get_cached_session() as db_session:
|
||||
# Query mit eager loading
|
||||
query = db_session.query(GuestRequest).options(
|
||||
joinedload(GuestRequest.printer),
|
||||
joinedload(GuestRequest.job),
|
||||
joinedload(GuestRequest.processed_by_user)
|
||||
)
|
||||
|
||||
# Status-Filter anwenden
|
||||
if status_filter != 'all':
|
||||
query = query.filter(GuestRequest.status == status_filter)
|
||||
|
||||
# Sortierung: Pending zuerst, dann nach Erstellungsdatum
|
||||
query = query.order_by(
|
||||
desc(GuestRequest.status == 'pending'),
|
||||
desc(GuestRequest.created_at)
|
||||
)
|
||||
|
||||
# Pagination
|
||||
total_count = query.count()
|
||||
requests = query.offset(offset).limit(limit).all()
|
||||
|
||||
# Daten für Admin aufbereiten
|
||||
admin_requests = []
|
||||
for req in requests:
|
||||
request_data = req.to_dict()
|
||||
|
||||
# Zusätzliche Admin-Informationen
|
||||
request_data.update({
|
||||
"can_be_processed": req.status == "pending",
|
||||
"is_overdue": (
|
||||
req.status == "approved" and
|
||||
req.job and
|
||||
req.job.end_at < datetime.now()
|
||||
) if req.job else False,
|
||||
"time_since_creation": (datetime.now() - req.created_at).total_seconds() / 3600 if req.created_at else 0 # Stunden
|
||||
})
|
||||
|
||||
admin_requests.append(request_data)
|
||||
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"requests": admin_requests,
|
||||
"pagination": {
|
||||
"total": total_count,
|
||||
"limit": limit,
|
||||
"offset": offset,
|
||||
"has_more": (offset + limit) < total_count
|
||||
},
|
||||
"stats": {
|
||||
"total": total_count,
|
||||
"pending": db_session.query(GuestRequest).filter_by(status='pending').count(),
|
||||
"approved": db_session.query(GuestRequest).filter_by(status='approved').count(),
|
||||
"denied": db_session.query(GuestRequest).filter_by(status='denied').count()
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Fehler beim Abrufen der Admin-Gastanfragen: {str(e)}")
|
||||
return jsonify({"error": "Fehler beim Verarbeiten der Anfrage"}), 500
|
||||
|
||||
@guest_blueprint.route('/api/admin/requests/<int:request_id>', methods=['GET'])
|
||||
@approver_required
|
||||
def api_get_request_details(request_id):
|
||||
"""Detaillierte Informationen zu einer Gastanfrage für Admins abrufen."""
|
||||
try:
|
||||
with get_cached_session() as db_session:
|
||||
guest_request = db_session.query(GuestRequest).options(
|
||||
joinedload(GuestRequest.printer),
|
||||
joinedload(GuestRequest.job),
|
||||
joinedload(GuestRequest.processed_by_user)
|
||||
).filter_by(id=request_id).first()
|
||||
|
||||
if not guest_request:
|
||||
return jsonify({"error": "Anfrage nicht gefunden"}), 404
|
||||
|
||||
# Vollständige Admin-Informationen
|
||||
request_data = guest_request.to_dict()
|
||||
|
||||
# Verfügbare Drucker für Zuweisung
|
||||
available_printers = db_session.query(Printer).filter_by(active=True).all()
|
||||
request_data["available_printers"] = [p.to_dict() for p in available_printers]
|
||||
|
||||
# Job-Historie falls vorhanden
|
||||
if guest_request.job:
|
||||
job_data = guest_request.job.to_dict()
|
||||
job_data["is_active"] = guest_request.job.status in ["scheduled", "running"]
|
||||
job_data["is_overdue"] = guest_request.job.end_at < datetime.now() if guest_request.job.end_at else False
|
||||
request_data["job_details"] = job_data
|
||||
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"request": request_data
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Fehler beim Abrufen der Gastanfrage-Details: {str(e)}")
|
||||
return jsonify({"error": "Fehler beim Verarbeiten der Anfrage"}), 500
|
||||
|
||||
@guest_blueprint.route('/api/admin/requests/<int:request_id>/update', methods=['PUT'])
|
||||
@approver_required
|
||||
def api_update_request(request_id):
|
||||
"""Gastanfrage aktualisieren (nur für Admins)."""
|
||||
try:
|
||||
data = request.get_json()
|
||||
if not data:
|
||||
return jsonify({"error": "Keine Daten erhalten"}), 400
|
||||
|
||||
with get_cached_session() as db_session:
|
||||
guest_request = db_session.query(GuestRequest).filter_by(id=request_id).first()
|
||||
if not guest_request:
|
||||
return jsonify({"error": "Anfrage nicht gefunden"}), 404
|
||||
|
||||
# Erlaubte Felder für Updates
|
||||
allowed_fields = ['printer_id', 'duration_min', 'approval_notes', 'rejection_reason']
|
||||
changes_made = False
|
||||
|
||||
for field in allowed_fields:
|
||||
if field in data:
|
||||
if field == 'printer_id' and data[field]:
|
||||
# Drucker validieren
|
||||
printer = db_session.query(Printer).filter_by(id=data[field], active=True).first()
|
||||
if not printer:
|
||||
return jsonify({"error": "Ungültiger Drucker ausgewählt"}), 400
|
||||
|
||||
setattr(guest_request, field, data[field])
|
||||
changes_made = True
|
||||
|
||||
if changes_made:
|
||||
guest_request.processed_by = current_user.id
|
||||
guest_request.processed_at = datetime.now()
|
||||
db_session.commit()
|
||||
|
||||
logger.info(f"Gastanfrage {request_id} aktualisiert von Admin {current_user.id}")
|
||||
|
||||
return jsonify({
|
||||
"success": True,
|
||||
"message": "Anfrage erfolgreich aktualisiert",
|
||||
"updated_by": current_user.name,
|
||||
"updated_at": guest_request.processed_at.isoformat()
|
||||
})
|
||||
else:
|
||||
return jsonify({"error": "Keine Änderungen vorgenommen"}), 400
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Fehler beim Aktualisieren der Gastanfrage: {str(e)}")
|
||||
return jsonify({"error": "Fehler beim Verarbeiten der Anfrage"}), 500
|
||||
|
||||
# Admin-Routen
|
||||
@guest_blueprint.route('/admin/requests', methods=['GET'])
|
||||
@approver_required
|
||||
def admin_requests_management():
|
||||
"""Admin-Oberfläche für die Verwaltung von Gastanfragen."""
|
||||
return render_template('admin_guest_requests.html')
|
||||
Binary file not shown.
@ -1 +1,98 @@
|
||||
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Datenbank-Migration für Admin-Features in GuestRequest
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
import sqlite3
|
||||
from datetime import datetime
|
||||
|
||||
# Pfad zur App hinzufügen
|
||||
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
|
||||
|
||||
from config.settings import DATABASE_PATH
|
||||
from utils.logging_config import get_logger
|
||||
|
||||
logger = get_logger("migrate_admin")
|
||||
|
||||
def column_exists(cursor, table_name, column_name):
|
||||
"""Prüft, ob eine Spalte in einer Tabelle existiert."""
|
||||
cursor.execute(f"PRAGMA table_info({table_name})")
|
||||
columns = [row[1] for row in cursor.fetchall()]
|
||||
return column_name in columns
|
||||
|
||||
def migrate_admin_features():
|
||||
"""Fügt die neuen Admin-Felder zur guest_requests Tabelle hinzu."""
|
||||
|
||||
print(f"Datenbankpfad: {DATABASE_PATH}")
|
||||
|
||||
if not os.path.exists(DATABASE_PATH):
|
||||
print(f"FEHLER: Datenbankdatei nicht gefunden: {DATABASE_PATH}")
|
||||
return False
|
||||
|
||||
try:
|
||||
conn = sqlite3.connect(DATABASE_PATH)
|
||||
cursor = conn.cursor()
|
||||
|
||||
print("Aktuelle guest_requests Tabellen-Struktur:")
|
||||
cursor.execute("PRAGMA table_info(guest_requests)")
|
||||
columns = cursor.fetchall()
|
||||
for col in columns:
|
||||
print(f" {col[1]} ({col[2]})")
|
||||
|
||||
changes_made = False
|
||||
|
||||
# Neue Spalten hinzufügen, falls sie nicht existieren
|
||||
new_columns = [
|
||||
("processed_by", "INTEGER", "REFERENCES users(id)"),
|
||||
("processed_at", "DATETIME", None),
|
||||
("approval_notes", "TEXT", None),
|
||||
("rejection_reason", "TEXT", None)
|
||||
]
|
||||
|
||||
for column_name, column_type, constraint in new_columns:
|
||||
if not column_exists(cursor, 'guest_requests', column_name):
|
||||
print(f"Füge Spalte '{column_name}' hinzu...")
|
||||
sql = f"ALTER TABLE guest_requests ADD COLUMN {column_name} {column_type}"
|
||||
cursor.execute(sql)
|
||||
changes_made = True
|
||||
print(f"✓ Spalte '{column_name}' hinzugefügt")
|
||||
else:
|
||||
print(f"✓ Spalte '{column_name}' existiert bereits")
|
||||
|
||||
if changes_made:
|
||||
conn.commit()
|
||||
print("\nNeue guest_requests Tabellen-Struktur:")
|
||||
cursor.execute("PRAGMA table_info(guest_requests)")
|
||||
columns = cursor.fetchall()
|
||||
for col in columns:
|
||||
print(f" {col[1]} ({col[2]})")
|
||||
|
||||
conn.close()
|
||||
|
||||
if changes_made:
|
||||
print("\n✓ Admin-Features erfolgreich hinzugefügt")
|
||||
else:
|
||||
print("\n✓ Alle Admin-Features bereits vorhanden")
|
||||
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f"FEHLER bei der Migration: {str(e)}")
|
||||
logger.error(f"Fehler bei der Admin-Features Migration: {str(e)}")
|
||||
if 'conn' in locals():
|
||||
conn.rollback()
|
||||
conn.close()
|
||||
return False
|
||||
|
||||
if __name__ == "__main__":
|
||||
print("=== ADMIN-FEATURES MIGRATION ===")
|
||||
success = migrate_admin_features()
|
||||
|
||||
if success:
|
||||
print("\n✓ Migration erfolgreich!")
|
||||
sys.exit(0)
|
||||
else:
|
||||
print("\n✗ Migration fehlgeschlagen!")
|
||||
sys.exit(1)
|
||||
@ -803,7 +803,7 @@
|
||||
|
||||
/* Neue Navbar-Komponenten */
|
||||
.navbar-menu-new {
|
||||
@apply flex items-center justify-center space-x-1 md:space-x-1 lg:space-x-1 xl:space-x-1;
|
||||
@apply flex items-center justify-center space-x-0.5 md:space-x-1;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
@ -815,10 +815,12 @@
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@apply flex items-center space-x-2 px-2 py-2 rounded-lg text-sm font-medium transition-all duration-300;
|
||||
@apply flex items-center space-x-1.5 px-1.5 py-1.5 rounded-md text-xs font-medium transition-all duration-300;
|
||||
color: rgba(15, 23, 42, 0.8);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
white-space: nowrap;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.dark .nav-item {
|
||||
@ -833,8 +835,8 @@
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.05),
|
||||
0 2px 6px rgba(0, 0, 0, 0.04),
|
||||
0 8px 16px rgba(0, 0, 0, 0.05),
|
||||
0 2px 4px rgba(0, 0, 0, 0.04),
|
||||
0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -843,8 +845,8 @@
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 2px 6px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.2),
|
||||
0 2px 4px rgba(0, 0, 0, 0.15),
|
||||
0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
@ -853,8 +855,8 @@
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.08),
|
||||
0 3px 8px rgba(0, 0, 0, 0.06),
|
||||
0 8px 20px rgba(0, 0, 0, 0.08),
|
||||
0 3px 6px rgba(0, 0, 0, 0.06),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -864,29 +866,29 @@
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.3),
|
||||
0 3px 8px rgba(0, 0, 0, 0.2),
|
||||
0 8px 20px rgba(0, 0, 0, 0.3),
|
||||
0 3px 6px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* Dark Mode Toggle - Neues Design */
|
||||
/* Dark Mode Toggle - Kompakteres Design */
|
||||
.dark-mode-toggle-new {
|
||||
@apply relative p-2.5 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
|
||||
@apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.05),
|
||||
0 2px 8px rgba(0, 0, 0, 0.05),
|
||||
0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
color: #334155;
|
||||
z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: rgba(241, 245, 249, 0.9);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.08),
|
||||
0 2px 6px rgba(0, 0, 0, 0.06);
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.dark-mode-toggle-new:active {
|
||||
@ -898,7 +900,7 @@
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
@ -906,8 +908,8 @@
|
||||
.dark .dark-mode-toggle-new:hover {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
0 8px 16px rgba(0, 0, 0, 0.2),
|
||||
0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Icon-Animation */
|
||||
@ -1406,596 +1408,6 @@ footer {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content-new {
|
||||
@apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.15),
|
||||
0 15px 30px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
animation: modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.dark .modal-content-new {
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||||
0 15px 30px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
@keyframes modal-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Verbesserte Input-Felder für Modals */
|
||||
.input-new {
|
||||
@apply w-full px-3 py-2.5 bg-white/70 dark:bg-slate-700/70 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:border-transparent transition-all duration-200 backdrop-blur-lg;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .input-new {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Verbesserte Form-Labels */
|
||||
.form-label-new {
|
||||
@apply block mb-2 text-sm font-medium text-slate-900 dark:text-white;
|
||||
}
|
||||
|
||||
/* Dark Mode Toggle - Premium Design */
|
||||
.dark-mode-toggle-premium {
|
||||
@apply relative cursor-pointer outline-none focus:outline-none;
|
||||
z-index: 100; /* Stellt sicher, dass der Button über anderen Elementen liegt */
|
||||
}
|
||||
|
||||
.dark-mode-toggle-premium:focus-visible {
|
||||
@apply ring-2 ring-blue-500 ring-offset-2 dark:ring-blue-400 dark:ring-offset-slate-900 rounded-full;
|
||||
}
|
||||
|
||||
/* Animationen für verzögerte Pulse-Effekte */
|
||||
@keyframes delayed-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.animation-delay-500 {
|
||||
animation-delay: 0.5s;
|
||||
animation: delayed-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animation-delay-1000 {
|
||||
animation-delay: 1s;
|
||||
animation: delayed-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animation-delay-1500 {
|
||||
animation-delay: 1.5s;
|
||||
animation: delayed-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Improved icon transitions */
|
||||
.dark-mode-toggle-premium .sun-icon,
|
||||
.dark-mode-toggle-premium .moon-icon {
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Glassmorphism effect for better visual depth */
|
||||
.dark-mode-toggle-premium .backdrop-blur-md {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* Enhanced hover effects */
|
||||
.dark-mode-toggle-premium:hover .sun-icon svg,
|
||||
.dark-mode-toggle-premium:hover .moon-icon svg {
|
||||
filter: drop-shadow(0 0 8px currentColor);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Smooth gradient transitions */
|
||||
.dark-mode-toggle-premium .bg-gradient-to-r {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Better shadow effects */
|
||||
.dark-mode-toggle-premium .shadow-lg {
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .dark-mode-toggle-premium .shadow-lg {
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.3),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Rotation animation for smooth icon transitions */
|
||||
@keyframes icon-rotate-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotate(-90deg) scale(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dark-mode-toggle-premium .sun-icon.icon-enter,
|
||||
.dark-mode-toggle-premium .moon-icon.icon-enter {
|
||||
animation: icon-rotate-in 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Active state animation */
|
||||
.dark-mode-toggle-premium:active > div {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* User Menu Button - Neues Design */
|
||||
.user-menu-button-new {
|
||||
@apply flex items-center space-x-2 rounded-lg p-1.5 transition-all duration-300;
|
||||
background: rgba(241, 245, 249, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.04),
|
||||
0 1px 2px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.user-menu-button-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.06),
|
||||
0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.dark .user-menu-button-new {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.15),
|
||||
0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .user-menu-button-new:hover {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.15),
|
||||
0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* User Avatar - Neues Design */
|
||||
.user-avatar-new {
|
||||
@apply h-8 w-8 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-md transition-all duration-300;
|
||||
background: linear-gradient(135deg, #000000, #333333);
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.2),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .user-avatar-new {
|
||||
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
|
||||
color: #0f172a;
|
||||
box-shadow:
|
||||
0 2px 6px rgba(0, 0, 0, 0.3),
|
||||
0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Login Button - Neues Design */
|
||||
.login-button-new {
|
||||
@apply flex items-center px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all duration-300;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.1),
|
||||
0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-button-new:hover {
|
||||
@apply transform -translate-y-0.5;
|
||||
background: #333333;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.15),
|
||||
0 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .login-button-new {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.2),
|
||||
0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dark .login-button-new:hover {
|
||||
background: #f1f5f9;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.25),
|
||||
0 3px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile Menu - Neues Design */
|
||||
.mobile-menu-new {
|
||||
@apply w-full overflow-hidden transition-all duration-300 z-40;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-new.open {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
border-bottom: 1px solid rgba(241, 245, 249, 0.8);
|
||||
}
|
||||
|
||||
.dark .mobile-menu-new {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 1px solid rgba(30, 41, 59, 0.8);
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
@apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-800 dark:text-slate-200 transition-all duration-300;
|
||||
}
|
||||
|
||||
.mobile-nav-item:hover {
|
||||
background: rgba(241, 245, 249, 0.8);
|
||||
}
|
||||
|
||||
.dark .mobile-nav-item:hover {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
|
||||
.mobile-nav-item.active {
|
||||
background: rgba(241, 245, 249, 0.9);
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dark .mobile-nav-item.active {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
|
||||
.mb-stat-card {
|
||||
background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%);
|
||||
color: #0f172a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-radius: var(--card-radius);
|
||||
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.dark .mb-stat-card {
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%);
|
||||
color: var(--text-primary, #f8fafc);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Stats und Jobs Page Card Styles */
|
||||
.stats-card, .job-card {
|
||||
@apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300;
|
||||
backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--card-radius);
|
||||
}
|
||||
|
||||
/* Footer Styling - Verstärktes Glassmorphism */
|
||||
footer {
|
||||
@apply transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 -8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 -2px 8px rgba(0, 0, 0, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.dark footer {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 -8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 -2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Dropdown Pfeil Animation */
|
||||
.dropdown-arrow {
|
||||
@apply transition-transform duration-300;
|
||||
}
|
||||
|
||||
/* Mercedes-Benz Hintergrund mit Star-Pattern */
|
||||
.mercedes-star-bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mercedes-star-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
background-size: 40px 40px;
|
||||
z-index: -1;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.dark .mercedes-star-bg::after {
|
||||
opacity: 0.02;
|
||||
filter: invert(1) brightness(0.4);
|
||||
}
|
||||
|
||||
/* Zusätzliche Glassmorphism-Verbesserungen */
|
||||
.glass-effect {
|
||||
backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-effect {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Verbesserte Hover-Effekte für alle interaktiven Elemente */
|
||||
.glass-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.glass-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
||||
-webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.dark .glass-hover:hover {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 8px 16px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */
|
||||
.printer-card-new {
|
||||
@apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||
0 10px 20px rgba(0, 0, 0, 0.06),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--card-radius, 1rem);
|
||||
}
|
||||
|
||||
.dark .printer-card-new {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.4),
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Online Drucker-Karten mit stärkerem visuellen Unterschied */
|
||||
.printer-card-new.online {
|
||||
@apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 122, 85, 0.08),
|
||||
0 10px 20px rgba(0, 122, 85, 0.06),
|
||||
0 0 0 1px rgba(209, 250, 229, 0.4);
|
||||
}
|
||||
|
||||
.dark .printer-card-new.online {
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 10px 20px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 1px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Status-Badge mit verbesserten Styles */
|
||||
.status-badge-new {
|
||||
@apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .status-badge-new {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.status-badge-new.online {
|
||||
@apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300;
|
||||
}
|
||||
|
||||
.status-badge-new.offline {
|
||||
@apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300;
|
||||
}
|
||||
|
||||
/* Verbesserte Filterleiste */
|
||||
.filter-bar-new {
|
||||
@apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl;
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.05),
|
||||
0 5px 10px rgba(0, 0, 0, 0.03),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .filter-bar-new {
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.2),
|
||||
0 5px 10px rgba(0, 0, 0, 0.15),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.filter-btn-new {
|
||||
@apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium;
|
||||
}
|
||||
|
||||
.filter-btn-new.active {
|
||||
@apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .filter-btn-new.active {
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Verbesserte Aktionsschaltflächen */
|
||||
.action-btn-new {
|
||||
@apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.action-btn-new.primary {
|
||||
@apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500;
|
||||
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.primary {
|
||||
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
.action-btn-new.success {
|
||||
@apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500;
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.success {
|
||||
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.action-btn-new.danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500;
|
||||
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.dark .action-btn-new.danger {
|
||||
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Informationszeilen in Drucker-Karten */
|
||||
.printer-info-row {
|
||||
@apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5;
|
||||
}
|
||||
|
||||
.printer-info-icon {
|
||||
@apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0;
|
||||
}
|
||||
|
||||
/* Online-Indikator mit Pulseffekt */
|
||||
.online-indicator {
|
||||
@apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg;
|
||||
box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
|
||||
animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header mit verbesserten Status-Anzeigen */
|
||||
.status-overview-new {
|
||||
@apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg;
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.04),
|
||||
0 5px 10px rgba(0, 0, 0, 0.02),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .status-overview-new {
|
||||
box-shadow:
|
||||
0 10px 25px rgba(0, 0, 0, 0.15),
|
||||
0 5px 10px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@apply w-2.5 h-2.5 rounded-full;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
@apply bg-green-500;
|
||||
animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Verbesserte Modals mit Glassmorphism */
|
||||
.modal-new {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content-new {
|
||||
@apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
|
||||
box-shadow:
|
||||
|
||||
1
backend/app/templates/admin_guest_requests.html
Normal file
1
backend/app/templates/admin_guest_requests.html
Normal file
@ -0,0 +1 @@
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user