"Refactor CSS and HTML for admin templates (feat)"

backend/app/static/css/input.css

@@ -72,6 +72,275 @@
   .transition-all-colors {
     @apply transition-colors duration-300;
   }
+  
+  /* Admin Panel Container */
+  .admin-container {
+    @apply max-w-7xl mx-auto p-4 md:p-8;
+  }
+  
+  /* Admin Stats Cards */
+  .admin-stats {
+    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8;
+  }
+  
+  .stat-card {
+    @apply bg-white dark:bg-dark-surface rounded-xl border border-gray-200 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
+  }
+  
+  .stat-icon {
+    @apply absolute top-4 right-4 opacity-15 text-4xl;
+  }
+  
+  .stat-title {
+    @apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase;
+  }
+  
+  .stat-value {
+    @apply text-2xl font-bold text-slate-900 dark:text-white mb-1;
+  }
+  
+  .stat-desc {
+    @apply text-sm text-slate-500 dark:text-slate-400;
+  }
+  
+  /* Navigation Tabs */
+  .nav-tabs {
+    @apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto;
+  }
+  
+  .nav-tab {
+    @apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50;
+  }
+  
+  .nav-tab.active {
+    @apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium;
+  }
+  
+  /* Tab Content */
+  .tab-content {
+    @apply mt-8;
+  }
+  
+  .tab-pane {
+    @apply hidden;
+  }
+  
+  .tab-pane.active {
+    @apply block;
+  }
+  
+  /* Formulare für Admin Panel */
+  .form-group {
+    @apply mb-4;
+  }
+  
+  .form-label {
+    @apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300;
+  }
+  
+  .form-input,
+  .form-select,
+  .form-textarea {
+    @apply w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200;
+  }
+  
+  /* Tabellen im Admin Panel */
+  .admin-table {
+    @apply min-w-full divide-y divide-gray-200 dark:divide-slate-700;
+  }
+  
+  .admin-table thead {
+    @apply bg-slate-50 dark:bg-slate-800;
+  }
+  
+  .admin-table th {
+    @apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
+  }
+  
+  .admin-table tbody {
+    @apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700;
+  }
+  
+  .admin-table tr {
+    @apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
+  }
+  
+  .admin-table td {
+    @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white;
+  }
+  
+  /* Status Badges */
+  .badge {
+    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
+  }
+  
+  .badge-success {
+    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
+  }
+  
+  .badge-error {
+    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
+  }
+  
+  .badge-warning {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
+  }
+  
+  .badge-info {
+    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
+  }
+  
+  /* Drucker-Karten */
+  .printer-card {
+    @apply bg-white dark:bg-dark-surface rounded-xl border border-gray-200 dark:border-slate-700/30 p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
+  }
+  
+  .printer-header {
+    @apply flex justify-between items-center mb-4;
+  }
+  
+  .printer-name {
+    @apply text-xl font-bold text-slate-900 dark:text-white;
+  }
+  
+  .printer-actions {
+    @apply flex space-x-2;
+  }
+  
+  .printer-info {
+    @apply grid grid-cols-2 gap-4 mb-4;
+  }
+  
+  .printer-status {
+    @apply flex items-center mt-4;
+  }
+  
+  /* Status Indikatoren */
+  .status-indicator {
+    @apply w-3 h-3 rounded-full mr-2;
+  }
+  
+  .status-running {
+    @apply bg-green-500;
+    animation: pulse 2s infinite;
+  }
+  
+  .status-stopped {
+    @apply bg-red-500;
+  }
+  
+  /* Pulse Animation */
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scale(1.1);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  /* Log-Einträge */
+  .log-entry {
+    @apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
+  }
+  
+  .log-debug {
+    @apply border-gray-400 dark:border-gray-500;
+  }
+  
+  .log-info {
+    @apply border-blue-400 dark:border-blue-500;
+  }
+  
+  .log-warning {
+    @apply border-yellow-400 dark:border-yellow-500;
+  }
+  
+  .log-error {
+    @apply border-red-400 dark:border-red-500;
+  }
+  
+  .log-critical {
+    @apply border-purple-400 dark:border-purple-500;
+  }
+  
+  /* Scheduler Status */
+  .scheduler-status {
+    @apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md;
+  }
+  
+  /* Fortschrittsbalken */
+  .progress-bar {
+    @apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden;
+  }
+  
+  .progress-bar-fill {
+    @apply h-full transition-all duration-300;
+  }
+  
+  .progress-bar-fill-blue {
+    @apply bg-blue-500 dark:bg-blue-600;
+  }
+  
+  .progress-bar-fill-green {
+    @apply bg-green-500 dark:bg-green-600;
+  }
+  
+  .progress-bar-fill-purple {
+    @apply bg-purple-500 dark:bg-purple-600;
+  }
+  
+  /* Benachrichtigungen */
+  .notification {
+    @apply fixed top-4 right-4 max-w-md p-4 rounded-lg shadow-lg transform translate-x-full opacity-0 transition-all duration-300 z-50 bg-white dark:bg-slate-800 border-l-4;
+  }
+  
+  .notification.show {
+    @apply translate-x-0 opacity-100;
+  }
+  
+  .notification-success {
+    @apply border-green-500;
+  }
+  
+  .notification-error {
+    @apply border-red-500;
+  }
+  
+  .notification-warning {
+    @apply border-yellow-500;
+  }
+  
+  .notification-info {
+    @apply border-blue-500;
+  }
+  
+  /* Alerts */
+  .alert {
+    @apply p-4 rounded-lg border mb-4;
+  }
+  
+  .alert-success {
+    @apply bg-green-50 border-green-500 text-green-800 dark:bg-green-900/30 dark:text-green-200;
+  }
+  
+  .alert-error {
+    @apply bg-red-50 border-red-500 text-red-800 dark:bg-red-900/30 dark:text-red-200;
+  }
+  
+  .alert-warning {
+    @apply bg-yellow-50 border-yellow-500 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200;
+  }
+  
+  .alert-info {
+    @apply bg-blue-50 border-blue-500 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200;
+  }
 }
 
 /* Glassmorphism Flash Messages */

backend/app/templates/admin.html

@@ -6,7 +6,6 @@
 {{ super() }}
 <!-- CSRF Token für AJAX-Anfragen -->
 <meta name="csrf-token" content="{{ csrf_token() }}">
-<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
 <script src="{{ url_for('static', filename='js/admin.js') }}" defer></script>
 {% endblock %}