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