馃 distributed transcription service
thistle.dunkirk.sh
dunkirk.sh
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Admin - Thistle</title>
8 <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">
9 <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">
10 <link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">
11 <link rel="manifest" href="../../public/favicon/site.webmanifest">
12 <link rel="stylesheet" href="../styles/main.css">
13 <link rel="stylesheet" href="../styles/admin.css">
14</head>
15
16<body>
17 <header>
18 <div class="header-content">
19 <a href="/" class="site-title">
20 <img src="../../public/favicon/favicon-32x32.png" alt="Thistle logo">
21 <span>Thistle</span>
22 </a>
23 <auth-component></auth-component>
24 </div>
25 </header>
26
27 <main>
28 <h1>Admin Dashboard</h1>
29
30 <div id="error-message" class="error hidden"></div>
31
32 <div id="loading" class="loading">Loading...</div>
33
34 <div id="content" class="hidden">
35 <div class="stats">
36 <div class="stat-card">
37 <div class="stat-value" id="total-users">0</div>
38 <div class="stat-label">Total Users</div>
39 </div>
40 <div class="stat-card">
41 <div class="stat-value" id="total-transcriptions">0</div>
42 <div class="stat-label">Total Transcriptions</div>
43 </div>
44 <div class="stat-card">
45 <div class="stat-value" id="failed-transcriptions">0</div>
46 <div class="stat-label">Failed Transcriptions</div>
47 </div>
48 </div>
49
50 <div class="tabs">
51 <button class="tab active" data-tab="pending">Pending Recordings</button>
52 <button class="tab" data-tab="transcriptions">Transcriptions</button>
53 <button class="tab" data-tab="users">Users</button>
54 <button class="tab" data-tab="classes">Classes</button>
55 </div>
56
57 <div id="pending-tab" class="tab-content active">
58 <div class="section">
59 <h2 class="section-title">Pending Recordings</h2>
60 <admin-pending-recordings></admin-pending-recordings>
61 </div>
62 </div>
63
64 <div id="transcriptions-tab" class="tab-content">
65 <div class="section">
66 <h2 class="section-title">All Transcriptions</h2>
67 <admin-transcriptions id="transcriptions-component"></admin-transcriptions>
68 </div>
69 </div>
70
71 <div id="users-tab" class="tab-content">
72 <div class="section">
73 <h2 class="section-title">All Users</h2>
74 <admin-users id="users-component"></admin-users>
75 </div>
76 </div>
77
78 <div id="classes-tab" class="tab-content">
79 <div class="section">
80 <h2 class="section-title">Manage Classes</h2>
81 <admin-classes></admin-classes>
82 </div>
83 </div>
84 </div>
85 </main>
86
87 <user-modal id="user-modal"></user-modal>
88 <transcript-modal id="transcript-modal"></transcript-modal>
89
90 <script type="module" src="../components/auth.ts"></script>
91 <script type="module" src="../components/admin-pending-recordings.ts"></script>
92 <script type="module" src="../components/admin-transcriptions.ts"></script>
93 <script type="module" src="../components/admin-users.ts"></script>
94 <script type="module" src="../components/admin-classes.ts"></script>
95 <script type="module" src="../components/user-modal.ts"></script>
96 <script type="module" src="../components/transcript-view-modal.ts"></script>
97 <script type="module" src="./admin.ts"></script>
98</body>
99
100</html>