67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin-Bereich</title>
|
|
<!-- Google Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
/* Styles specific to admin user list presentation */
|
|
.user-list-item {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
gap: 10px; /* Space between items */
|
|
}
|
|
.user-list-item:last-child { border-bottom: none; }
|
|
.user-list-item p { margin: 0; flex-basis: 22%; min-width: 150px; /* Grow/shrink basis */ }
|
|
.user-list-item .button-delete { flex-shrink: 0; /* Prevent button shrinking */ }
|
|
</style>
|
|
</head>
|
|
<body id="admin-page">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1 class="header-logo">Admin Bereich</h1> <!-- Use logo class for consistency -->
|
|
<div class="header-buttons">
|
|
<button id="themeToggleBtn" class="header-btn theme-toggle" aria-label="Toggle Theme">☀️</button> <!-- Added Theme Toggle -->
|
|
<button id="loadUserListBtn" class="header-btn">Liste neu laden</button> <!-- Renamed -->
|
|
<button id="welcomeButton" class="header-btn">Zurück zum Chat</button>
|
|
<button id="logoutBtn" class="header-btn">Abmelden</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="admin-container" style="padding: 20px; margin-top: 60px;"> <!-- Add padding -->
|
|
<h2>Benutzerverwaltung</h2>
|
|
<div id="user-list" style="background-color: var(--bg-primary); border-radius: var(--border-radius-medium); margin-top: 15px; box-shadow: var(--shadow-sm); overflow: hidden;">
|
|
<!-- User list items added by JS -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modals -->
|
|
<div id="custom-alert" class="custom-alert">
|
|
<div class="alert-content"> <span id="alert-message"></span> <button id="close-alert" class="close-btn">OK</button> </div>
|
|
</div>
|
|
<div id="custom-alert-confirm" class="custom-alert-confirm">
|
|
<div class="alert-content">
|
|
<p id="alert-message-confirm"></p>
|
|
<div style="display: flex; gap: 10px; margin-top: 10px;">
|
|
<button id="confirm-alert-confirm">Bestätigen</button>
|
|
<button id="close-alert-confirm">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script type="module" src="js/config.js"></script>
|
|
<script type="module" src="js/shared_functions.js"></script>
|
|
<script type="module" src="js/main.js"></script> <!-- main.js now handles theme toggle too -->
|
|
</body>
|
|
</html> |