e6a11f2eed
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 20s
160 lines
8.8 KiB
HTML
160 lines
8.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Admin Dashboard - Mischkomposition</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="/assets/css/main.min.css" />
|
|
<style>
|
|
body { background: #111418; }
|
|
.dashboard-shell { display:block; padding: 1.25em; max-width: 1320px; margin: 0 auto; width: 100%; }
|
|
.admin-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1em; align-items: start; }
|
|
.admin-section { background: rgba(20,23,27,0.92); border: 1px solid rgba(255,255,255,0.08); padding: 1em; border-radius: 8px; min-width: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
|
|
.admin-section h2 { margin: 0 0 .75em 0; font-size: .95em; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
|
|
.admin-section p { margin: 0 0 .75em 0; color: rgba(255,255,255,.62); font-size: .9em; }
|
|
.admin-section.wide { grid-column: 1 / -1; }
|
|
.toolbar-row, .compact-form { display:flex; gap:.55em; flex-wrap:wrap; align-items:flex-end; }
|
|
.compact-form .field-inline { min-width: 150px; flex: 1 1 150px; }
|
|
.compact-form label { display:block; margin: 0 0 .25em 0; font-size:.72em; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55); }
|
|
.compact-form input, .compact-form select { height: 2.45em; }
|
|
table { width: 100%; border-collapse: collapse; font-size: .9em; }
|
|
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.09); vertical-align: middle; }
|
|
th { color: rgba(255,255,255,.58); font-size: .72em; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }
|
|
.badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.76em; line-height: 1.6; }
|
|
.badge-admin { background: #e44d26; }
|
|
.badge-user { background: #2196F3; }
|
|
.badge-client { background: #4CAF50; }
|
|
.badge-expired { background: #666; }
|
|
.folder-badge { background: rgba(52,165,142,.16); color:#8ee6d2; margin: 2px 3px 2px 0; border: 1px solid rgba(52,165,142,.28); }
|
|
.muted { color: rgba(255,255,255,.48); }
|
|
.btn-small { padding: 3px 9px; font-size: 0.78em; margin: 2px; cursor: pointer; height: auto; line-height: 1.6; border-radius: 5px; }
|
|
.btn-danger { border-color: rgba(228,77,38,.55) !important; color: #ffad9c !important; }
|
|
.folder-row { cursor: pointer; transition: background 0.2s; }
|
|
.folder-row:hover { background: rgba(255,255,255,0.1); }
|
|
.folder-row.assigned { background: rgba(76,175,80,0.25); }
|
|
.folder-row.assigned:hover { background: rgba(76,175,80,0.35); }
|
|
.folder-status { font-weight: bold; }
|
|
.folder-status.yes { color: #4CAF50; }
|
|
.folder-status.no { color: #888; }
|
|
#folder-table-wrap { display: none; margin-top: 1em; }
|
|
.folder-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:.75em; }
|
|
.folder-card { border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding:.85em; background: rgba(255,255,255,.035); }
|
|
.folder-card h3 { margin:0 0 .35em 0; font-size:1em; color:#fff; }
|
|
.folder-meta { display:flex; gap:.45em; flex-wrap:wrap; margin:.5em 0; }
|
|
.folder-pill { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.15em .55em; font-size:.78em; color:rgba(255,255,255,.68); }
|
|
.folder-actions { margin-top:.65em; display:flex; gap:.35em; flex-wrap:wrap; }
|
|
.access-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:.35em .7em; margin-top:.75em; }
|
|
.access-item { display:flex; align-items:center; gap:.45em; padding:.45em .55em; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(255,255,255,.025); cursor:pointer; }
|
|
.access-item input { width:auto; margin:0; }
|
|
.preview-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:.55em; margin-top:.75em; max-height: 360px; overflow:auto; padding-right:.25em; }
|
|
.preview-grid a { border:0; display:block; border-radius:6px; overflow:hidden; background:#0b0d10; aspect-ratio: 1 / 1; }
|
|
.preview-grid img { width:100%; height:100%; object-fit:cover; display:block; }
|
|
#folder-preview-title { margin-top:0; }
|
|
#assign-status, #sync-status { font-size:.85em; color:#8ee6d2; }
|
|
@media screen and (max-width: 900px) {
|
|
.admin-grid { grid-template-columns: 1fr; }
|
|
.admin-section { padding: .9em; }
|
|
.dashboard-shell { padding: .75em; }
|
|
table { font-size:.82em; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="is-preload">
|
|
<div id="wrapper">
|
|
<header id="header">
|
|
<h1><a href="/index.html"><strong>Mischkomposition</strong> Admin</a></h1>
|
|
<nav><ul>
|
|
<li><a href="#" id="logout-btn">Logout <i class="fa fa-sign-out"></i></a></li>
|
|
</ul></nav>
|
|
</header>
|
|
|
|
<div id="main" class="dashboard-shell">
|
|
<div class="admin-grid">
|
|
|
|
<div class="admin-section">
|
|
<h2>Nutzer erstellen</h2>
|
|
<form id="create-user-form" class="compact-form">
|
|
<div class="field-inline">
|
|
<label>Username</label>
|
|
<input type="text" id="new-username" placeholder="Nutzername" required />
|
|
</div>
|
|
<div class="field-inline">
|
|
<label>Passwort</label>
|
|
<input type="password" id="new-password" placeholder="Passwort" required />
|
|
</div>
|
|
<div class="field-inline">
|
|
<label>Rolle</label>
|
|
<select id="new-role">
|
|
<option value="client">Client (30 Tage)</option>
|
|
<option value="user">User (permanent)</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<button type="submit">Erstellen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Website aktualisieren</h2>
|
|
<p>Laedt das neueste Registry-Image und startet den Container neu.</p>
|
|
<button id="sync-site" class="btn-small">Sync starten</button>
|
|
<span id="sync-status" style="margin-left:10px;"></span>
|
|
</div>
|
|
|
|
<div class="admin-section wide">
|
|
<h2>Nutzer, Rollen und Ordnerzugriffe</h2>
|
|
<table>
|
|
<thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Status</th><th>Ordnerzugriff</th><th>Aktionen</th></tr></thead>
|
|
<tbody id="users-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="admin-section wide">
|
|
<h2>Ordner im Bilderpfad</h2>
|
|
<p>Unterordner sind privat. Nur explizit freigegebene Nutzer sehen sie nach dem Login.</p>
|
|
<div id="folders-overview" class="folder-grid"></div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Ordner-Zuweisung</h2>
|
|
<p>Nutzer waehlen, Ordner anhaken, fertig.</p>
|
|
<select id="user-select"><option value="">Nutzer waehlen...</option></select>
|
|
<div id="folder-table-wrap">
|
|
<div id="folder-access-list" class="access-list"></div>
|
|
<span id="assign-status" style="display:inline-block; margin-top:10px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2 id="folder-preview-title">Ordnerinhalt</h2>
|
|
<p id="folder-preview-note">Waehle in der Ordneruebersicht "Ansehen".</p>
|
|
<div id="folder-preview" class="preview-grid"></div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Eigenes Passwort aendern</h2>
|
|
<form id="admin-pw-form" class="compact-form">
|
|
<div class="field-inline">
|
|
<label>Altes Passwort</label>
|
|
<input type="password" id="admin-pw-old" required />
|
|
</div>
|
|
<div class="field-inline">
|
|
<label>Neues Passwort</label>
|
|
<input type="password" id="admin-pw-new" required />
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="btn-small">Aendern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/assets/js/jquery.min.js"></script>
|
|
<script src="/assets/js/admin.js?v=2"></script>
|
|
</body>
|
|
</html>
|