Add dark mode support and replace group assignment with playlist assignment

- Added comprehensive dark mode styling to all pages:
  * Dashboard (workflow guide, secondary text, log items)
  * Admin panel with user management system
  * Content/playlist management page
  * Upload media page
  * Add player page

- Implemented user management system:
  * Create/edit/delete users
  * Two role types (user/admin)
  * Reset password functionality
  * Role-based permissions

- Replaced group assignment with playlist assignment:
  * Players now directly assigned to playlists
  * Updated add player form and backend
  * Removed group selection from player creation

- Fixed bugs:
  * Updated instance_path configuration for SQLite
  * Fixed import path in app factory
  * Updated dependencies (Pillow 11.0.0, removed gevent)

- Added start.sh script for easy development server launch
This commit is contained in:
DigiServer Developer
2025-11-14 22:16:52 +02:00
parent 498c03ef00
commit 9d4f932a95
13 changed files with 1070 additions and 65 deletions

View File

@@ -19,17 +19,32 @@
cursor: pointer;
}
body.dark-mode .upload-zone {
background: #1a202c;
border-color: #4a5568;
}
.upload-zone:hover {
border-color: #667eea;
background: #f0f2ff;
}
body.dark-mode .upload-zone:hover {
border-color: #7c3aed;
background: #2d3748;
}
.upload-zone.dragover {
border-color: #667eea;
background: #e8ebff;
transform: scale(1.02);
}
body.dark-mode .upload-zone.dragover {
border-color: #7c3aed;
background: #2d3748;
}
.file-input-wrapper {
margin: 20px 0;
}
@@ -53,6 +68,11 @@
margin-bottom: 10px;
}
body.dark-mode .file-item {
background: #2d3748;
border-color: #4a5568;
}
.file-info {
display: flex;
align-items: center;
@@ -87,6 +107,10 @@
color: #333;
}
body.dark-mode .form-group label {
color: #e2e8f0;
}
.form-control {
width: 100%;
padding: 12px;
@@ -95,12 +119,23 @@
font-size: 14px;
}
body.dark-mode .form-control {
background: #1a202c;
border-color: #4a5568;
color: #e2e8f0;
}
.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
body.dark-mode .form-control:focus {
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}
.btn-upload {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
@@ -125,6 +160,26 @@
transform: none;
}
/* Dark mode text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
color: #e2e8f0;
}
body.dark-mode p,
body.dark-mode small {
color: #a0aec0;
}
body.dark-mode .file-info > div > div {
color: #e2e8f0;
}
body.dark-mode .file-info > div > div:last-child {
color: #718096;
}
.playlist-selector {
background: #f8f9fa;
padding: 20px;
@@ -133,10 +188,20 @@
border: 2px solid #dee2e6;
}
body.dark-mode .playlist-selector {
background: #1a202c;
border-color: #4a5568;
}
.playlist-selector.selected {
border-color: #667eea;
background: #f0f2ff;
}
body.dark-mode .playlist-selector.selected {
border-color: #7c3aed;
background: #2d3748;
}
</style>
<div class="upload-container">