馃 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>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 <style>
14 .hero-title {
15 font-size: 3rem;
16 font-weight: 700;
17 color: var(--text);
18 margin-bottom: 1rem;
19 }
20
21 .hero-subtitle {
22 font-size: 1.25rem;
23 color: var(--text);
24 opacity: 0.8;
25 margin-bottom: 2rem;
26 }
27
28 main {
29 text-align: center;
30 padding: 4rem 2rem;
31 }
32
33 .cta-buttons {
34 display: flex;
35 gap: 1rem;
36 justify-content: center;
37 margin-top: 2rem;
38 }
39
40 .btn {
41 padding: 0.75rem 1.5rem;
42 border-radius: 6px;
43 font-size: 1rem;
44 font-weight: 500;
45 cursor: pointer;
46 transition: all 0.2s;
47 font-family: inherit;
48 border: 2px solid;
49 text-decoration: none;
50 display: inline-block;
51 }
52
53 .btn-primary {
54 background: var(--primary);
55 color: white;
56 border-color: var(--primary);
57 }
58
59 .btn-primary:hover {
60 background: transparent;
61 color: var(--primary);
62 }
63
64 .btn-secondary {
65 background: transparent;
66 color: var(--text);
67 border-color: var(--secondary);
68 }
69
70 .btn-secondary:hover {
71 border-color: var(--primary);
72 color: var(--primary);
73 }
74
75 @media (max-width: 640px) {
76 .hero-title {
77 font-size: 2.5rem;
78 }
79
80 .cta-buttons {
81 flex-direction: column;
82 align-items: center;
83 }
84 }
85 </style>
86</head>
87
88<body>
89 <header>
90 <div class="header-content">
91 <a href="/" class="site-title">
92 <img src="../../public/favicon/favicon-32x32.png" alt="Thistle logo">
93 <span>Thistle</span>
94 </a>
95 <auth-component></auth-component>
96 </div>
97 </header>
98
99 <main>
100 <h1 class="hero-title">Thistle</h1>
101 <p class="hero-subtitle">AI-powered audio transcription made simple</p>
102
103 <div class="cta-buttons">
104 <button id="start-btn" class="btn btn-primary">Start Transcribing</button>
105 </div>
106 </main>
107
108 <script type="module" src="../components/auth.ts"></script>
109 <script type="module">
110 document.getElementById('start-btn').addEventListener('click', async () => {
111 const authComponent = document.querySelector('auth-component');
112 const isLoggedIn = await authComponent.isAuthenticated();
113
114 if (isLoggedIn) {
115 window.location.href = '/classes';
116 } else {
117 authComponent.openAuthModal();
118 }
119 });
120 </script>
121</body>
122
123</html>