131 lines
4.2 KiB
HTML
131 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MumBullet Dashboard</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>MumBullet Dashboard</h1>
|
|
<nav>
|
|
<button id="queueTab" class="tab-button active">Queue</button>
|
|
<button id="usersTab" class="tab-button">Users</button>
|
|
<button id="cacheTab" class="tab-button">Cache</button>
|
|
<button id="logoutButton">Logout</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="queueSection" class="tab-content active">
|
|
<h2>Music Queue</h2>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Now Playing</h3>
|
|
</div>
|
|
<div class="card-content" id="nowPlaying">
|
|
<p>Nothing playing</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Queue</h3>
|
|
<button id="clearQueueButton" class="danger-button">Clear Queue</button>
|
|
</div>
|
|
<div class="card-content">
|
|
<ul id="queueList" class="queue-list">
|
|
<li class="empty-message">Queue is empty</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="usersSection" class="tab-content">
|
|
<h2>User Management</h2>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Users</h3>
|
|
<button id="addUserButton">Add User</button>
|
|
</div>
|
|
<div class="card-content">
|
|
<table id="usersTable" class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Permission Level</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="empty-message">
|
|
<td colspan="3">No users found</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addUserModal" class="modal">
|
|
<div class="modal-content">
|
|
<h3>Add User</h3>
|
|
<form id="addUserForm">
|
|
<div class="form-group">
|
|
<label for="newUsername">Username</label>
|
|
<input type="text" id="newUsername" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPermissionLevel">Permission Level</label>
|
|
<select id="newPermissionLevel" name="permissionLevel" required>
|
|
<option value="0">None</option>
|
|
<option value="1">View Only</option>
|
|
<option value="2">Read/Write</option>
|
|
<option value="3">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" id="cancelAddUser">Cancel</button>
|
|
<button type="submit">Add User</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="cacheSection" class="tab-content">
|
|
<h2>Cache Management</h2>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Cache Statistics</h3>
|
|
<button id="clearCacheButton" class="danger-button">Clear Cache</button>
|
|
</div>
|
|
<div class="card-content">
|
|
<div id="cacheStats" class="stats-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Songs</span>
|
|
<span class="stat-value" id="cacheSongCount">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Size</span>
|
|
<span class="stat-value" id="cacheSize">0 MB</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Max Size</span>
|
|
<span class="stat-value" id="cacheMaxSize">0 MB</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Usage</span>
|
|
<div class="progress-bar">
|
|
<div id="cacheUsage" class="progress-value" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html> |