commit 3756b706c460dd50c8bb436258ecd12c7e1fb433 · dunkirk.sh/thistle

+5 -254

src/pages/admin.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Admin - Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

     

       10
       11
        
         <link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">

     

       11
       12
        
         <link rel="manifest" href="../../public/favicon/site.webmanifest">

     

       12
       13
        
         <link rel="stylesheet" href="../styles/main.css">

     

       13
       13
       -
         <style>

     

       14
       14
       -
           main {

     

       15
       15
       -
             max-width: 80rem;

     

       16
       16
       -
             margin: 0 auto;

     

       17
       17
       -
             padding: 2rem;

     

       18
       18
       -
           }

     

       19
       19
       -
       

     

       20
       20
       -
           h1 {

     

       21
       21
       -
             margin-bottom: 2rem;

     

       22
       22
       -
             color: var(--text);

     

       23
       23
       -
           }

     

       24
       24
       -
       

     

       25
       25
       -
           .section {

     

       26
       26
       -
             margin-bottom: 3rem;

     

       27
       27
       -
           }

     

       28
       28
       -
       

     

       29
       29
       -
           .section-title {

     

       30
       30
       -
             font-size: 1.5rem;

     

       31
       31
       -
             font-weight: 600;

     

       32
       32
       -
             color: var(--text);

     

       33
       33
       -
             margin-bottom: 1rem;

     

       34
       34
       -
             display: flex;

     

       35
       35
       -
             align-items: center;

     

       36
       36
       -
             gap: 0.5rem;

     

       37
       37
       -
           }

     

       38
       38
       -
       

     

       39
       39
       -
           .tabs {

     

       40
       40
       -
             display: flex;

     

       41
       41
       -
             gap: 1rem;

     

       42
       42
       -
             border-bottom: 2px solid var(--secondary);

     

       43
       43
       -
             margin-bottom: 2rem;

     

       44
       44
       -
           }

     

       45
       45
       -
       

     

       46
       46
       -
           .tab {

     

       47
       47
       -
             padding: 0.75rem 1.5rem;

     

       48
       48
       -
             border: none;

     

       49
       49
       -
             background: transparent;

     

       50
       50
       -
             color: var(--text);

     

       51
       51
       -
             cursor: pointer;

     

       52
       52
       -
             font-size: 1rem;

     

       53
       53
       -
             font-weight: 500;

     

       54
       54
       -
             font-family: inherit;

     

       55
       55
       -
             border-bottom: 2px solid transparent;

     

       56
       56
       -
             margin-bottom: -2px;

     

       57
       57
       -
             transition: all 0.2s;

     

       58
       58
       -
           }

     

       59
       59
       -
       

     

       60
       60
       -
           .tab:hover {

     

       61
       61
       -
             color: var(--primary);

     

       62
       62
       -
           }

     

       63
       63
       -
       

     

       64
       64
       -
           .tab.active {

     

       65
       65
       -
             color: var(--primary);

     

       66
       66
       -
             border-bottom-color: var(--primary);

     

       67
       67
       -
           }

     

       68
       68
       -
       

     

       69
       69
       -
           .tab-content {

     

       70
       70
       -
             display: none;

     

       71
       71
       -
           }

     

       72
       72
       -
       

     

       73
       73
       -
           .tab-content.active {

     

       74
       74
       -
             display: block;

     

       75
       75
       -
           }

     

       76
       76
       -
       

     

       77
       77
       -
           .empty-state {

     

       78
       78
       -
             text-align: center;

     

       79
       79
       -
             padding: 3rem;

     

       80
       80
       -
             color: var(--text);

     

       81
       81
       -
             opacity: 0.6;

     

       82
       82
       -
           }

     

       83
       83
       -
       

     

       84
       84
       -
           .loading {

     

       85
       85
       -
             text-align: center;

     

       86
       86
       -
             padding: 3rem;

     

       87
       87
       -
             color: var(--text);

     

       88
       88
       -
           }

     

       89
       89
       -
       

     

       90
       90
       -
           .error {

     

       91
       91
       -
             background: #fee2e2;

     

       92
       92
       -
             color: #991b1b;

     

       93
       93
       -
             padding: 1rem;

     

       94
       94
       -
             border-radius: 6px;

     

       95
       95
       -
             margin-bottom: 1rem;

     

       96
       96
       -
           }

     

       97
       97
       -
       

     

       98
       98
       -
           .stats {

     

       99
       99
       -
             display: grid;

     

       100
       100
       -
             grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

     

       101
       101
       -
             gap: 1rem;

     

       102
       102
       -
             margin-bottom: 2rem;

     

       103
       103
       -
           }

     

       104
       104
       -
       

     

       105
       105
       -
           .stat-card {

     

       106
       106
       -
             background: var(--background);

     

       107
       107
       -
             border: 2px solid var(--secondary);

     

       108
       108
       -
             border-radius: 8px;

     

       109
       109
       -
             padding: 1.5rem;

     

       110
       110
       -
           }

     

       111
       111
       -
       

     

       112
       112
       -
           .stat-value {

     

       113
       113
       -
             font-size: 2rem;

     

       114
       114
       -
             font-weight: 700;

     

       115
       115
       -
             color: var(--primary);

     

       116
       116
       -
             margin-bottom: 0.25rem;

     

       117
       117
       -
           }

     

       118
       118
       -
       

     

       119
       119
       -
           .stat-label {

     

       120
       120
       -
             color: var(--text);

     

       121
       121
       -
             opacity: 0.7;

     

       122
       122
       -
             font-size: 0.875rem;

     

       123
       123
       -
           }

     

       124
       124
       -
       

     

       125
       125
       -
           .timestamp {

     

       126
       126
       -
             color: var(--text);

     

       127
       127
       -
             opacity: 0.6;

     

       128
       128
       -
             font-size: 0.875rem;

     

       129
       129
       -
           }

     

       130
       130
       -
         </style>

     

       14
       14
       +
         <link rel="stylesheet" href="../styles/admin.css">

     

       131
       15
        
       </head>

     

       132
       16
        
       

     

       133
       17
        
       <body>

     
···

       144
       28
        
         <main>

     

       145
       29
        
           <h1>Admin Dashboard</h1>

     

       146
       30
        
       

     

       147
       147
       -
           <div id="error-message" class="error" style="display: none;"></div>

     

       31
       31
       +
           <div id="error-message" class="error hidden"></div>

     

       148
       32
        
       

     

       149
       33
        
           <div id="loading" class="loading">Loading...</div>

     

       150
       34
        
       

     

       151
       151
       -
           <div id="content" style="display: none;">

     

       35
       35
       +
           <div id="content" class="hidden">

     

       152
       36
        
             <div class="stats">

     

       153
       37
        
               <div class="stat-card">

     

       154
       38
        
                 <div class="stat-value" id="total-users">0</div>

     
···

       211
       95
        
         <script type="module" src="../components/admin-classes.ts"></script>

     

       212
       96
        
         <script type="module" src="../components/user-modal.ts"></script>

     

       213
       97
        
         <script type="module" src="../components/transcript-view-modal.ts"></script>

     

       214
       214
       -
         <script type="module">

     

       215
       215
       -
           const transcriptionsComponent = document.getElementById('transcriptions-component');

     

       216
       216
       -
           const usersComponent = document.getElementById('users-component');

     

       217
       217
       -
           const userModal = document.getElementById('user-modal');

     

       218
       218
       -
           const transcriptModal = document.getElementById('transcript-modal');

     

       219
       219
       -
           const errorMessage = document.getElementById('error-message');

     

       220
       220
       -
           const loading = document.getElementById('loading');

     

       221
       221
       -
           const content = document.getElementById('content');

     

       222
       222
       -
       

     

       223
       223
       -
           // Modal functions

     

       224
       224
       -
           function openUserModal(userId) {

     

       225
       225
       -
             userModal.setAttribute('open', '');

     

       226
       226
       -
             userModal.userId = userId;

     

       227
       227
       -
           }

     

       228
       228
       -
       

     

       229
       229
       -
           function closeUserModal() {

     

       230
       230
       -
             userModal.removeAttribute('open');

     

       231
       231
       -
             userModal.userId = null;

     

       232
       232
       -
           }

     

       233
       233
       -
       

     

       234
       234
       -
           function openTranscriptModal(transcriptId) {

     

       235
       235
       -
             transcriptModal.setAttribute('open', '');

     

       236
       236
       -
             transcriptModal.transcriptId = transcriptId;

     

       237
       237
       -
           }

     

       238
       238
       -
       

     

       239
       239
       -
           function closeTranscriptModal() {

     

       240
       240
       -
             transcriptModal.removeAttribute('open');

     

       241
       241
       -
             transcriptModal.transcriptId = null;

     

       242
       242
       -
           }

     

       243
       243
       -
       

     

       244
       244
       -
           // Listen for component events

     

       245
       245
       -
           transcriptionsComponent.addEventListener('open-transcription', (e) => {

     

       246
       246
       -
             openTranscriptModal(e.detail.id);

     

       247
       247
       -
           });

     

       248
       248
       -
       

     

       249
       249
       -
           usersComponent.addEventListener('open-user', (e) => {

     

       250
       250
       -
             openUserModal(e.detail.id);

     

       251
       251
       -
           });

     

       252
       252
       -
       

     

       253
       253
       -
           // Listen for modal close events

     

       254
       254
       -
           userModal.addEventListener('close', closeUserModal);

     

       255
       255
       -
           userModal.addEventListener('user-updated', async () => {

     

       256
       256
       -
             await loadStats();

     

       257
       257
       -
           });

     

       258
       258
       -
           userModal.addEventListener('click', (e) => {

     

       259
       259
       -
             if (e.target === userModal) closeUserModal();

     

       260
       260
       -
           });

     

       261
       261
       -
       

     

       262
       262
       -
           transcriptModal.addEventListener('close', closeTranscriptModal);

     

       263
       263
       -
           transcriptModal.addEventListener('transcript-deleted', async () => {

     

       264
       264
       -
             await loadStats();

     

       265
       265
       -
           });

     

       266
       266
       -
           transcriptModal.addEventListener('click', (e) => {

     

       267
       267
       -
             if (e.target === transcriptModal) closeTranscriptModal();

     

       268
       268
       -
           });

     

       269
       269
       -
       

     

       270
       270
       -
           async function loadStats() {

     

       271
       271
       -
             try {

     

       272
       272
       -
               const [transcriptionsRes, usersRes] = await Promise.all([

     

       273
       273
       -
                 fetch('/api/admin/transcriptions'),

     

       274
       274
       -
                 fetch('/api/admin/users')

     

       275
       275
       -
               ]);

     

       276
       276
       -
       

     

       277
       277
       -
               if (!transcriptionsRes.ok || !usersRes.ok) {

     

       278
       278
       -
                 if (transcriptionsRes.status === 403 || usersRes.status === 403) {

     

       279
       279
       -
                   window.location.href = '/';

     

       280
       280
       -
                   return;

     

       281
       281
       -
                 }

     

       282
       282
       -
                 throw new Error('Failed to load admin data');

     

       283
       283
       -
               }

     

       284
       284
       -
       

     

       285
       285
       -
               const transcriptions = await transcriptionsRes.json();

     

       286
       286
       -
               const users = await usersRes.json();

     

       287
       287
       -
       

     

       288
       288
       -
               document.getElementById('total-users').textContent = users.length;

     

       289
       289
       -
               document.getElementById('total-transcriptions').textContent = transcriptions.length;

     

       290
       290
       -
               

     

       291
       291
       -
               const failed = transcriptions.filter(t => t.status === 'failed');

     

       292
       292
       -
               document.getElementById('failed-transcriptions').textContent = failed.length;

     

       293
       293
       -
       

     

       294
       294
       -
               loading.style.display = 'none';

     

       295
       295
       -
               content.style.display = 'block';

     

       296
       296
       -
             } catch (error) {

     

       297
       297
       -
               errorMessage.textContent = error.message;

     

       298
       298
       -
               errorMessage.style.display = 'block';

     

       299
       299
       -
               loading.style.display = 'none';

     

       300
       300
       -
             }

     

       301
       301
       -
           }

     

       302
       302
       -
       

     

       303
       303
       -
           // Tab switching

     

       304
       304
       -
           function switchTab(tabName) {

     

       305
       305
       -
             document.querySelectorAll('.tab').forEach(t => {

     

       306
       306
       -
               t.classList.remove('active');

     

       307
       307
       -
             });

     

       308
       308
       -
             document.querySelectorAll('.tab-content').forEach(c => {

     

       309
       309
       -
               c.classList.remove('active');

     

       310
       310
       -
             });

     

       311
       311
       -
       

     

       312
       312
       -
             const tabButton = document.querySelector(`[data-tab="${tabName}"]`);

     

       313
       313
       -
             const tabContent = document.getElementById(`${tabName}-tab`);

     

       314
       314
       -
             

     

       315
       315
       -
             if (tabButton && tabContent) {

     

       316
       316
       -
               tabButton.classList.add('active');

     

       317
       317
       -
               tabContent.classList.add('active');

     

       318
       318
       -
               

     

       319
       319
       -
               // Update URL without reloading

     

       320
       320
       -
               const url = new URL(window.location.href);

     

       321
       321
       -
               url.searchParams.set('tab', tabName);

     

       322
       322
       -
               // Remove subtab param when leaving classes tab

     

       323
       323
       -
               if (tabName !== 'classes') {

     

       324
       324
       -
                 url.searchParams.delete('subtab');

     

       325
       325
       -
               }

     

       326
       326
       -
               window.history.pushState({}, '', url);

     

       327
       327
       -
             }

     

       328
       328
       -
           }

     

       329
       329
       -
       

     

       330
       330
       -
           document.querySelectorAll('.tab').forEach(tab => {

     

       331
       331
       -
             tab.addEventListener('click', () => {

     

       332
       332
       -
               switchTab(tab.dataset.tab);

     

       333
       333
       -
             });

     

       334
       334
       -
           });

     

       335
       335
       -
       

     

       336
       336
       -
           // Check for tab query parameter on load

     

       337
       337
       -
           const params = new URLSearchParams(window.location.search);

     

       338
       338
       -
           const initialTab = params.get('tab');

     

       339
       339
       -
           const validTabs = ['pending', 'transcriptions', 'users', 'classes'];

     

       340
       340
       -
           

     

       341
       341
       -
           if (initialTab && validTabs.includes(initialTab)) {

     

       342
       342
       -
             switchTab(initialTab);

     

       343
       343
       -
           }

     

       344
       344
       -
       

     

       345
       345
       -
           // Initialize

     

       346
       346
       -
           loadStats();

     

       347
       347
       -
         </script>

     

       98
       98
       +
         <script type="module" src="./admin.ts"></script>

     

       348
       99
        
       </body>

     

       349
       100
        
       

     

       350
       101
        
       </html>

+136

src/pages/admin.ts

···

       1
       1
       +
       const transcriptionsComponent = document.getElementById('transcriptions-component') as any;

     

       2
       2
       +
       const usersComponent = document.getElementById('users-component') as any;

     

       3
       3
       +
       const userModal = document.getElementById('user-modal') as any;

     

       4
       4
       +
       const transcriptModal = document.getElementById('transcript-modal') as any;

     

       5
       5
       +
       const errorMessage = document.getElementById('error-message') as HTMLElement;

     

       6
       6
       +
       const loading = document.getElementById('loading') as HTMLElement;

     

       7
       7
       +
       const content = document.getElementById('content') as HTMLElement;

     

       8
       8
       +
       

     

       9
       9
       +
       // Modal functions

     

       10
       10
       +
       function openUserModal(userId: string) {

     

       11
       11
       +
         userModal.setAttribute('open', '');

     

       12
       12
       +
         userModal.userId = userId;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

       15
       15
       +
       function closeUserModal() {

     

       16
       16
       +
         userModal.removeAttribute('open');

     

       17
       17
       +
         userModal.userId = null;

     

       18
       18
       +
       }

     

       19
       19
       +
       

     

       20
       20
       +
       function openTranscriptModal(transcriptId: string) {

     

       21
       21
       +
         transcriptModal.setAttribute('open', '');

     

       22
       22
       +
         transcriptModal.transcriptId = transcriptId;

     

       23
       23
       +
       }

     

       24
       24
       +
       

     

       25
       25
       +
       function closeTranscriptModal() {

     

       26
       26
       +
         transcriptModal.removeAttribute('open');

     

       27
       27
       +
         transcriptModal.transcriptId = null;

     

       28
       28
       +
       }

     

       29
       29
       +
       

     

       30
       30
       +
       // Listen for component events

     

       31
       31
       +
       transcriptionsComponent?.addEventListener('open-transcription', (e: CustomEvent) => {

     

       32
       32
       +
         openTranscriptModal(e.detail.id);

     

       33
       33
       +
       });

     

       34
       34
       +
       

     

       35
       35
       +
       usersComponent?.addEventListener('open-user', (e: CustomEvent) => {

     

       36
       36
       +
         openUserModal(e.detail.id);

     

       37
       37
       +
       });

     

       38
       38
       +
       

     

       39
       39
       +
       // Listen for modal close events

     

       40
       40
       +
       userModal?.addEventListener('close', closeUserModal);

     

       41
       41
       +
       userModal?.addEventListener('user-updated', async () => {

     

       42
       42
       +
         await loadStats();

     

       43
       43
       +
       });

     

       44
       44
       +
       userModal?.addEventListener('click', (e: MouseEvent) => {

     

       45
       45
       +
         if (e.target === userModal) closeUserModal();

     

       46
       46
       +
       });

     

       47
       47
       +
       

     

       48
       48
       +
       transcriptModal?.addEventListener('close', closeTranscriptModal);

     

       49
       49
       +
       transcriptModal?.addEventListener('transcript-deleted', async () => {

     

       50
       50
       +
         await loadStats();

     

       51
       51
       +
       });

     

       52
       52
       +
       transcriptModal?.addEventListener('click', (e: MouseEvent) => {

     

       53
       53
       +
         if (e.target === transcriptModal) closeTranscriptModal();

     

       54
       54
       +
       });

     

       55
       55
       +
       

     

       56
       56
       +
       async function loadStats() {

     

       57
       57
       +
         try {

     

       58
       58
       +
           const [transcriptionsRes, usersRes] = await Promise.all([

     

       59
       59
       +
             fetch('/api/admin/transcriptions'),

     

       60
       60
       +
             fetch('/api/admin/users')

     

       61
       61
       +
           ]);

     

       62
       62
       +
       

     

       63
       63
       +
           if (!transcriptionsRes.ok || !usersRes.ok) {

     

       64
       64
       +
             if (transcriptionsRes.status === 403 || usersRes.status === 403) {

     

       65
       65
       +
               window.location.href = '/';

     

       66
       66
       +
               return;

     

       67
       67
       +
             }

     

       68
       68
       +
             throw new Error('Failed to load admin data');

     

       69
       69
       +
           }

     

       70
       70
       +
       

     

       71
       71
       +
           const transcriptions = await transcriptionsRes.json();

     

       72
       72
       +
           const users = await usersRes.json();

     

       73
       73
       +
       

     

       74
       74
       +
           const totalUsers = document.getElementById('total-users');

     

       75
       75
       +
           const totalTranscriptions = document.getElementById('total-transcriptions');

     

       76
       76
       +
           const failedTranscriptions = document.getElementById('failed-transcriptions');

     

       77
       77
       +
           

     

       78
       78
       +
           if (totalUsers) totalUsers.textContent = users.length.toString();

     

       79
       79
       +
           if (totalTranscriptions) totalTranscriptions.textContent = transcriptions.length.toString();

     

       80
       80
       +
           

     

       81
       81
       +
           const failed = transcriptions.filter((t: any) => t.status === 'failed');

     

       82
       82
       +
           if (failedTranscriptions) failedTranscriptions.textContent = failed.length.toString();

     

       83
       83
       +
       

     

       84
       84
       +
           loading.classList.add('hidden');

     

       85
       85
       +
           content.classList.remove('hidden');

     

       86
       86
       +
         } catch (error) {

     

       87
       87
       +
           errorMessage.textContent = (error as Error).message;

     

       88
       88
       +
           errorMessage.classList.remove('hidden');

     

       89
       89
       +
           loading.classList.add('hidden');

     

       90
       90
       +
         }

     

       91
       91
       +
       }

     

       92
       92
       +
       

     

       93
       93
       +
       // Tab switching

     

       94
       94
       +
       function switchTab(tabName: string) {

     

       95
       95
       +
         document.querySelectorAll('.tab').forEach(t => {

     

       96
       96
       +
           t.classList.remove('active');

     

       97
       97
       +
         });

     

       98
       98
       +
         document.querySelectorAll('.tab-content').forEach(c => {

     

       99
       99
       +
           c.classList.remove('active');

     

       100
       100
       +
         });

     

       101
       101
       +
       

     

       102
       102
       +
         const tabButton = document.querySelector(`[data-tab="${tabName}"]`);

     

       103
       103
       +
         const tabContent = document.getElementById(`${tabName}-tab`);

     

       104
       104
       +
         

     

       105
       105
       +
         if (tabButton && tabContent) {

     

       106
       106
       +
           tabButton.classList.add('active');

     

       107
       107
       +
           tabContent.classList.add('active');

     

       108
       108
       +
           

     

       109
       109
       +
           // Update URL without reloading

     

       110
       110
       +
           const url = new URL(window.location.href);

     

       111
       111
       +
           url.searchParams.set('tab', tabName);

     

       112
       112
       +
           // Remove subtab param when leaving classes tab

     

       113
       113
       +
           if (tabName !== 'classes') {

     

       114
       114
       +
             url.searchParams.delete('subtab');

     

       115
       115
       +
           }

     

       116
       116
       +
           window.history.pushState({}, '', url);

     

       117
       117
       +
         }

     

       118
       118
       +
       }

     

       119
       119
       +
       

     

       120
       120
       +
       document.querySelectorAll('.tab').forEach(tab => {

     

       121
       121
       +
         tab.addEventListener('click', () => {

     

       122
       122
       +
           switchTab((tab as HTMLElement).dataset.tab || '');

     

       123
       123
       +
         });

     

       124
       124
       +
       });

     

       125
       125
       +
       

     

       126
       126
       +
       // Check for tab query parameter on load

     

       127
       127
       +
       const params = new URLSearchParams(window.location.search);

     

       128
       128
       +
       const initialTab = params.get('tab');

     

       129
       129
       +
       const validTabs = ['pending', 'transcriptions', 'users', 'classes'];

     

       130
       130
       +
       

     

       131
       131
       +
       if (initialTab && validTabs.includes(initialTab)) {

     

       132
       132
       +
         switchTab(initialTab);

     

       133
       133
       +
       }

     

       134
       134
       +
       

     

       135
       135
       +
       // Initialize

     

       136
       136
       +
       loadStats();

src/pages/checkout.html

···

       4
       4
        
       <head>

     

       5
       5
        
       	<meta charset="UTF-8">

     

       6
       6
        
       	<meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
       	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
       	<title>Success! - Thistle</title>

     

       8
       9
        
       	<link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
       	<link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

src/pages/class.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Class - Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

src/pages/classes.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Classes - Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

+3 -85

src/pages/index.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

     

       10
       11
        
         <link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">

     

       11
       12
        
         <link rel="manifest" href="../../public/favicon/site.webmanifest">

     

       12
       13
        
         <link rel="stylesheet" href="../styles/main.css">

     

       13
       13
       -
         <style>

     

       14
       14
       -
           .hero-title {

     

       15
       15
       -
             font-size: 3rem;

     

       16
       16
       -
             font-weight: 700;

     

       17
       17
       -
             color: var(--text);

     

       18
       18
       -
             margin-bottom: 1rem;

     

       19
       19
       -
           }

     

       20
       20
       -
       

     

       21
       21
       -
           .hero-subtitle {

     

       22
       22
       -
             font-size: 1.25rem;

     

       23
       23
       -
             color: var(--text);

     

       24
       24
       -
             opacity: 0.8;

     

       25
       25
       -
             margin-bottom: 2rem;

     

       26
       26
       -
           }

     

       27
       27
       -
       

     

       28
       28
       -
           main {

     

       29
       29
       -
             text-align: center;

     

       30
       30
       -
             padding: 4rem 2rem;

     

       31
       31
       -
           }

     

       32
       32
       -
       

     

       33
       33
       -
           .cta-buttons {

     

       34
       34
       -
             display: flex;

     

       35
       35
       -
             gap: 1rem;

     

       36
       36
       -
             justify-content: center;

     

       37
       37
       -
             margin-top: 2rem;

     

       38
       38
       -
           }

     

       39
       39
       -
       

     

       40
       40
       -
           .btn {

     

       41
       41
       -
             padding: 0.75rem 1.5rem;

     

       42
       42
       -
             border-radius: 6px;

     

       43
       43
       -
             font-size: 1rem;

     

       44
       44
       -
             font-weight: 500;

     

       45
       45
       -
             cursor: pointer;

     

       46
       46
       -
             transition: all 0.2s;

     

       47
       47
       -
             font-family: inherit;

     

       48
       48
       -
             border: 2px solid;

     

       49
       49
       -
             text-decoration: none;

     

       50
       50
       -
             display: inline-block;

     

       51
       51
       -
           }

     

       52
       52
       -
       

     

       53
       53
       -
           .btn-primary {

     

       54
       54
       -
             background: var(--primary);

     

       55
       55
       -
             color: white;

     

       56
       56
       -
             border-color: var(--primary);

     

       57
       57
       -
           }

     

       58
       58
       -
       

     

       59
       59
       -
           .btn-primary:hover {

     

       60
       60
       -
             background: transparent;

     

       61
       61
       -
             color: var(--primary);

     

       62
       62
       -
           }

     

       63
       63
       -
       

     

       64
       64
       -
           .btn-secondary {

     

       65
       65
       -
             background: transparent;

     

       66
       66
       -
             color: var(--text);

     

       67
       67
       -
             border-color: var(--secondary);

     

       68
       68
       -
           }

     

       69
       69
       -
       

     

       70
       70
       -
           .btn-secondary:hover {

     

       71
       71
       -
             border-color: var(--primary);

     

       72
       72
       -
             color: var(--primary);

     

       73
       73
       -
           }

     

       74
       74
       -
       

     

       75
       75
       -
           @media (max-width: 640px) {

     

       76
       76
       -
             .hero-title {

     

       77
       77
       -
               font-size: 2.5rem;

     

       78
       78
       -
             }

     

       79
       79
       -
       

     

       80
       80
       -
             .cta-buttons {

     

       81
       81
       -
               flex-direction: column;

     

       82
       82
       -
               align-items: center;

     

       83
       83
       -
             }

     

       84
       84
       -
           }

     

       85
       85
       -
         </style>

     

       14
       14
       +
         <link rel="stylesheet" href="../styles/index.css">

     

       86
       15
        
       </head>

     

       87
       16
        
       

     

       88
       17
        
       <body>

     
···

       106
       35
        
         </main>

     

       107
       36
        
       

     

       108
       37
        
         <script type="module" src="../components/auth.ts"></script>

     

       109
       109
       -
         <script type="module">

     

       110
       110
       -
           document.getElementById('start-btn').addEventListener('click', async () => {

     

       111
       111
       -
             const authComponent = document.querySelector('auth-component');

     

       112
       112
       -
             const isLoggedIn = await authComponent.isAuthenticated();

     

       113
       113
       -
       

     

       114
       114
       -
             if (isLoggedIn) {

     

       115
       115
       -
               window.location.href = '/classes';

     

       116
       116
       -
             } else {

     

       117
       117
       -
               authComponent.openAuthModal();

     

       118
       118
       -
             }

     

       119
       119
       -
           });

     

       120
       120
       -
         </script>

     

       38
       38
       +
         <script type="module" src="./index.ts"></script>

     

       121
       39
        
       </body>

     

       122
       40
        
       

     

       123
       41
        
       </html>

+10

src/pages/index.ts

···

       1
       1
       +
       document.getElementById('start-btn')?.addEventListener('click', async () => {

     

       2
       2
       +
         const authComponent = document.querySelector('auth-component') as any;

     

       3
       3
       +
         const isLoggedIn = await authComponent.isAuthenticated();

     

       4
       4
       +
       

     

       5
       5
       +
         if (isLoggedIn) {

     

       6
       6
       +
           window.location.href = '/classes';

     

       7
       7
       +
         } else {

     

       8
       8
       +
           authComponent.openAuthModal();

     

       9
       9
       +
         }

     

       10
       10
       +
       });

+3 -20

src/pages/reset-password.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Reset Password - Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

     

       10
       11
        
         <link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">

     

       11
       12
        
         <link rel="manifest" href="../../public/favicon/site.webmanifest">

     

       12
       13
        
         <link rel="stylesheet" href="../styles/main.css">

     

       13
       13
       -
         <style>

     

       14
       14
       -
           main {

     

       15
       15
       -
             display: flex;

     

       16
       16
       -
             align-items: center;

     

       17
       17
       -
             justify-content: center;

     

       18
       18
       -
             padding: 4rem 1rem;

     

       19
       19
       -
           }

     

       20
       20
       -
         </style>

     

       14
       14
       +
         <link rel="stylesheet" href="../styles/reset-password.css">

     

       21
       15
        
       </head>

     

       22
       16
        
       

     

       23
       17
        
       <body>

     
···

       37
       31
        
       

     

       38
       32
        
         <script type="module" src="../components/auth.ts"></script>

     

       39
       33
        
         <script type="module" src="../components/reset-password-form.ts"></script>

     

       40
       40
       -
         <script type="module">

     

       41
       41
       -
           // Wait for component to be defined before setting token

     

       42
       42
       -
           await customElements.whenDefined('reset-password-form');

     

       43
       43
       -
           

     

       44
       44
       -
           // Get token from URL and pass to component

     

       45
       45
       -
           const urlParams = new URLSearchParams(window.location.search);

     

       46
       46
       -
           const token = urlParams.get('token');

     

       47
       47
       -
           const resetForm = document.getElementById('reset-form');

     

       48
       48
       -
           if (resetForm) {

     

       49
       49
       -
             resetForm.token = token;

     

       50
       50
       -
           }

     

       51
       51
       -
         </script>

     

       34
       34
       +
         <script type="module" src="./reset-password.ts"></script>

     

       52
       35
        
       </body>

     

       53
       36
        
       

     

       54
       37
        
       </html>

+10

src/pages/reset-password.ts

···

       1
       1
       +
       // Wait for component to be defined before setting token

     

       2
       2
       +
       await customElements.whenDefined('reset-password-form');

     

       3
       3
       +
       

     

       4
       4
       +
       // Get token from URL and pass to component

     

       5
       5
       +
       const urlParams = new URLSearchParams(window.location.search);

     

       6
       6
       +
       const token = urlParams.get('token');

     

       7
       7
       +
       const resetForm = document.getElementById('reset-form') as any;

     

       8
       8
       +
       if (resetForm) {

     

       9
       9
       +
         resetForm.token = token;

     

       10
       10
       +
       }

+2 -6

src/pages/settings.html

···

       4
       4
        
       <head>

     

       5
       5
        
       	<meta charset="UTF-8">

     

       6
       6
        
       	<meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
       	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
       	<title>Settings - Thistle</title>

     

       8
       9
        
       	<link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
       	<link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

     

       10
       11
        
       	<link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">

     

       11
       12
        
       	<link rel="manifest" href="../../public/favicon/site.webmanifest">

     

       12
       13
        
       	<link rel="stylesheet" href="../styles/main.css">

     

       13
       13
       -
       

     

       14
       14
       -
       	<style>

     

       15
       15
       -
       		main {

     

       16
       16
       -
       			max-width: 64rem;

     

       17
       17
       -
       		}

     

       18
       18
       -
       	</style>

     

       14
       14
       +
       	<link rel="stylesheet" href="../styles/settings.css">

     

       19
       15
        
       </head>

     

       20
       16
        
       

     

       21
       17
        
       <body>

+4 -21

src/pages/transcribe.html

···

       4
       4
        
       <head>

     

       5
       5
        
         <meta charset="UTF-8">

     

       6
       6
        
         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       7
       7
       +
         <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'self'; frame-ancestors 'none'; object-src 'none'">

     

       7
       8
        
         <title>Transcribe - Thistle</title>

     

       8
       9
        
         <link rel="apple-touch-icon" sizes="180x180" href="../../public/favicon/apple-touch-icon.png">

     

       9
       10
        
         <link rel="icon" type="image/png" sizes="32x32" href="../../public/favicon/favicon-32x32.png">

     

       10
       11
        
         <link rel="icon" type="image/png" sizes="16x16" href="../../public/favicon/favicon-16x16.png">

     

       11
       12
        
         <link rel="manifest" href="../../public/favicon/site.webmanifest">

     

       12
       13
        
         <link rel="stylesheet" href="../styles/main.css">

     

       13
       13
       -
         <style>

     

       14
       14
       -
           .page-header {

     

       15
       15
       -
             text-align: center;

     

       16
       16
       -
             margin-bottom: 3rem;

     

       17
       17
       -
           }

     

       18
       18
       -
       

     

       19
       19
       -
           .page-title {

     

       20
       20
       -
             font-size: 2.5rem;

     

       21
       21
       -
             font-weight: 700;

     

       22
       22
       -
             color: var(--text);

     

       23
       23
       -
             margin-bottom: 0.5rem;

     

       24
       24
       -
           }

     

       25
       25
       -
       

     

       26
       26
       -
           .page-subtitle {

     

       27
       27
       -
             font-size: 1.125rem;

     

       28
       28
       -
             color: var(--text);

     

       29
       29
       -
             opacity: 0.8;

     

       30
       30
       -
           }

     

       31
       31
       -
         </style>

     

       14
       14
       +
         <link rel="stylesheet" href="../styles/transcribe.css">

     

       32
       15
        
       </head>

     

       33
       16
        
       

     

       34
       17
        
       <body>

     
···

       43
       26
        
         </header>

     

       44
       27
        
       

     

       45
       28
        
         <main>

     

       46
       46
       -
           <div style="margin-bottom: 1rem;">

     

       47
       47
       -
             <a href="/classes" style="color: var(--paynes-gray); text-decoration: none; font-size: 0.875rem;">

     

       29
       29
       +
           <div class="mb-1">

     

       30
       30
       +
             <a href="/classes" class="back-link">

     

       48
       31
        
               ← Back to classes

     

       49
       32
        
             </a>

     

       50
       33
        
           </div>

+120

src/styles/admin.css

···

       1
       1
       +
       main {

     

       2
       2
       +
         max-width: 80rem;

     

       3
       3
       +
         margin: 0 auto;

     

       4
       4
       +
         padding: 2rem;

     

       5
       5
       +
       }

     

       6
       6
       +
       

     

       7
       7
       +
       h1 {

     

       8
       8
       +
         margin-bottom: 2rem;

     

       9
       9
       +
         color: var(--text);

     

       10
       10
       +
       }

     

       11
       11
       +
       

     

       12
       12
       +
       .section {

     

       13
       13
       +
         margin-bottom: 3rem;

     

       14
       14
       +
       }

     

       15
       15
       +
       

     

       16
       16
       +
       .section-title {

     

       17
       17
       +
         font-size: 1.5rem;

     

       18
       18
       +
         font-weight: 600;

     

       19
       19
       +
         color: var(--text);

     

       20
       20
       +
         margin-bottom: 1rem;

     

       21
       21
       +
         display: flex;

     

       22
       22
       +
         align-items: center;

     

       23
       23
       +
         gap: 0.5rem;

     

       24
       24
       +
       }

     

       25
       25
       +
       

     

       26
       26
       +
       .tabs {

     

       27
       27
       +
         display: flex;

     

       28
       28
       +
         gap: 1rem;

     

       29
       29
       +
         border-bottom: 2px solid var(--secondary);

     

       30
       30
       +
         margin-bottom: 2rem;

     

       31
       31
       +
       }

     

       32
       32
       +
       

     

       33
       33
       +
       .tab {

     

       34
       34
       +
         padding: 0.75rem 1.5rem;

     

       35
       35
       +
         border: none;

     

       36
       36
       +
         background: transparent;

     

       37
       37
       +
         color: var(--text);

     

       38
       38
       +
         cursor: pointer;

     

       39
       39
       +
         font-size: 1rem;

     

       40
       40
       +
         font-weight: 500;

     

       41
       41
       +
         font-family: inherit;

     

       42
       42
       +
         border-bottom: 2px solid transparent;

     

       43
       43
       +
         margin-bottom: -2px;

     

       44
       44
       +
         transition: all 0.2s;

     

       45
       45
       +
       }

     

       46
       46
       +
       

     

       47
       47
       +
       .tab:hover {

     

       48
       48
       +
         color: var(--primary);

     

       49
       49
       +
       }

     

       50
       50
       +
       

     

       51
       51
       +
       .tab.active {

     

       52
       52
       +
         color: var(--primary);

     

       53
       53
       +
         border-bottom-color: var(--primary);

     

       54
       54
       +
       }

     

       55
       55
       +
       

     

       56
       56
       +
       .tab-content {

     

       57
       57
       +
         display: none;

     

       58
       58
       +
       }

     

       59
       59
       +
       

     

       60
       60
       +
       .tab-content.active {

     

       61
       61
       +
         display: block;

     

       62
       62
       +
       }

     

       63
       63
       +
       

     

       64
       64
       +
       .empty-state {

     

       65
       65
       +
         text-align: center;

     

       66
       66
       +
         padding: 3rem;

     

       67
       67
       +
         color: var(--text);

     

       68
       68
       +
         opacity: 0.6;

     

       69
       69
       +
       }

     

       70
       70
       +
       

     

       71
       71
       +
       .loading {

     

       72
       72
       +
         text-align: center;

     

       73
       73
       +
         padding: 3rem;

     

       74
       74
       +
         color: var(--text);

     

       75
       75
       +
       }

     

       76
       76
       +
       

     

       77
       77
       +
       .error {

     

       78
       78
       +
         background: #fee2e2;

     

       79
       79
       +
         color: #991b1b;

     

       80
       80
       +
         padding: 1rem;

     

       81
       81
       +
         border-radius: 6px;

     

       82
       82
       +
         margin-bottom: 1rem;

     

       83
       83
       +
       }

     

       84
       84
       +
       

     

       85
       85
       +
       .stats {

     

       86
       86
       +
         display: grid;

     

       87
       87
       +
         grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

     

       88
       88
       +
         gap: 1rem;

     

       89
       89
       +
         margin-bottom: 2rem;

     

       90
       90
       +
       }

     

       91
       91
       +
       

     

       92
       92
       +
       .stat-card {

     

       93
       93
       +
         background: var(--background);

     

       94
       94
       +
         border: 2px solid var(--secondary);

     

       95
       95
       +
         border-radius: 8px;

     

       96
       96
       +
         padding: 1.5rem;

     

       97
       97
       +
       }

     

       98
       98
       +
       

     

       99
       99
       +
       .stat-value {

     

       100
       100
       +
         font-size: 2rem;

     

       101
       101
       +
         font-weight: 700;

     

       102
       102
       +
         color: var(--primary);

     

       103
       103
       +
         margin-bottom: 0.25rem;

     

       104
       104
       +
       }

     

       105
       105
       +
       

     

       106
       106
       +
       .stat-label {

     

       107
       107
       +
         color: var(--text);

     

       108
       108
       +
         opacity: 0.7;

     

       109
       109
       +
         font-size: 0.875rem;

     

       110
       110
       +
       }

     

       111
       111
       +
       

     

       112
       112
       +
       .timestamp {

     

       113
       113
       +
         color: var(--text);

     

       114
       114
       +
         opacity: 0.6;

     

       115
       115
       +
         font-size: 0.875rem;

     

       116
       116
       +
       }

     

       117
       117
       +
       

     

       118
       118
       +
       .hidden {

     

       119
       119
       +
         display: none;

     

       120
       120
       +
       }

+71

src/styles/index.css

···

       1
       1
       +
       .hero-title {

     

       2
       2
       +
         font-size: 3rem;

     

       3
       3
       +
         font-weight: 700;

     

       4
       4
       +
         color: var(--text);

     

       5
       5
       +
         margin-bottom: 1rem;

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       .hero-subtitle {

     

       9
       9
       +
         font-size: 1.25rem;

     

       10
       10
       +
         color: var(--text);

     

       11
       11
       +
         opacity: 0.8;

     

       12
       12
       +
         margin-bottom: 2rem;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

       15
       15
       +
       main {

     

       16
       16
       +
         text-align: center;

     

       17
       17
       +
         padding: 4rem 2rem;

     

       18
       18
       +
       }

     

       19
       19
       +
       

     

       20
       20
       +
       .cta-buttons {

     

       21
       21
       +
         display: flex;

     

       22
       22
       +
         gap: 1rem;

     

       23
       23
       +
         justify-content: center;

     

       24
       24
       +
         margin-top: 2rem;

     

       25
       25
       +
       }

     

       26
       26
       +
       

     

       27
       27
       +
       .btn {

     

       28
       28
       +
         padding: 0.75rem 1.5rem;

     

       29
       29
       +
         border-radius: 6px;

     

       30
       30
       +
         font-size: 1rem;

     

       31
       31
       +
         font-weight: 500;

     

       32
       32
       +
         cursor: pointer;

     

       33
       33
       +
         transition: all 0.2s;

     

       34
       34
       +
         font-family: inherit;

     

       35
       35
       +
         border: 2px solid;

     

       36
       36
       +
         text-decoration: none;

     

       37
       37
       +
         display: inline-block;

     

       38
       38
       +
       }

     

       39
       39
       +
       

     

       40
       40
       +
       .btn-primary {

     

       41
       41
       +
         background: var(--primary);

     

       42
       42
       +
         color: white;

     

       43
       43
       +
         border-color: var(--primary);

     

       44
       44
       +
       }

     

       45
       45
       +
       

     

       46
       46
       +
       .btn-primary:hover {

     

       47
       47
       +
         background: transparent;

     

       48
       48
       +
         color: var(--primary);

     

       49
       49
       +
       }

     

       50
       50
       +
       

     

       51
       51
       +
       .btn-secondary {

     

       52
       52
       +
         background: transparent;

     

       53
       53
       +
         color: var(--text);

     

       54
       54
       +
         border-color: var(--secondary);

     

       55
       55
       +
       }

     

       56
       56
       +
       

     

       57
       57
       +
       .btn-secondary:hover {

     

       58
       58
       +
         border-color: var(--primary);

     

       59
       59
       +
         color: var(--primary);

     

       60
       60
       +
       }

     

       61
       61
       +
       

     

       62
       62
       +
       @media (max-width: 640px) {

     

       63
       63
       +
         .hero-title {

     

       64
       64
       +
           font-size: 2.5rem;

     

       65
       65
       +
         }

     

       66
       66
       +
       

     

       67
       67
       +
         .cta-buttons {

     

       68
       68
       +
           flex-direction: column;

     

       69
       69
       +
           align-items: center;

     

       70
       70
       +
         }

     

       71
       71
       +
       }

src/styles/reset-password.css

···

       1
       1
       +
       main {

     

       2
       2
       +
         display: flex;

     

       3
       3
       +
         align-items: center;

     

       4
       4
       +
         justify-content: center;

     

       5
       5
       +
         padding: 4rem 1rem;

     

       6
       6
       +
       }

src/styles/settings.css

···

       1
       1
       +
       main {

     

       2
       2
       +
         max-width: 64rem;

     

       3
       3
       +
       }

+27

src/styles/transcribe.css

···

       1
       1
       +
       .page-header {

     

       2
       2
       +
         text-align: center;

     

       3
       3
       +
         margin-bottom: 3rem;

     

       4
       4
       +
       }

     

       5
       5
       +
       

     

       6
       6
       +
       .page-title {

     

       7
       7
       +
         font-size: 2.5rem;

     

       8
       8
       +
         font-weight: 700;

     

       9
       9
       +
         color: var(--text);

     

       10
       10
       +
         margin-bottom: 0.5rem;

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       .page-subtitle {

     

       14
       14
       +
         font-size: 1.125rem;

     

       15
       15
       +
         color: var(--text);

     

       16
       16
       +
         opacity: 0.8;

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       .back-link {

     

       20
       20
       +
         color: var(--paynes-gray);

     

       21
       21
       +
         text-decoration: none;

     

       22
       22
       +
         font-size: 0.875rem;

     

       23
       23
       +
       }

     

       24
       24
       +
       

     

       25
       25
       +
       .mb-1 {

     

       26
       26
       +
         margin-bottom: 1rem;

     

       27
       27
       +
       }