···

       
22
       
 
       
	static override styles = css`

     

       
23
       
 
       
		:host {

     

       
24
       
 
       
			display: block;

     

       
25
       
-
       
			position: fixed;

     

       
26
       
-
       
			top: 2rem;

     

       
27
       
-
       
			right: 2rem;

     

       
28
       
-
       
			z-index: 1000;

     

       
29
       
 
       
		}

     

       
30
       
 
       


     

       
31
       
 
       
		.auth-button {

     
···

       
98
       
 
       
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

     

       
99
       
 
       
		}

     

       
100
       
 
       


     

       
101
       
-
       
		.modal h2 {

     

       
102
       
 
       
			margin-top: 0;

     

       
0
       
 
       

     

       
103
       
 
       
			color: var(--text);

     

       
104
       
-
       
			font-size: 1.777rem;

     

       
105
       
 
       
		}

     

       
106
       
 
       


     

       
107
       
-
       
		.modal form {

     

       
108
       
-
       
			display: flex;

     

       
109
       
-
       
			flex-direction: column;

     

       
110
       
-
       
			gap: 1rem;

     

       
111
       
 
       
		}

     

       
112
       
 
       


     

       
113
       
-
       
		.field {

     

       
114
       
-
       
			display: flex;

     

       
115
       
-
       
			flex-direction: column;

     

       
116
       
-
       
			gap: 0.5rem;

     

       
117
       
-
       
		}

     

       
118
       
-
       


     

       
119
       
-
       
		.field label {

     

       
120
       
 
       
			font-weight: 500;

     

       
121
       
 
       
			color: var(--text);

     

       
0
       
 
       

     

       
122
       
 
       
		}

     

       
123
       
 
       


     

       
124
       
-
       
		.field input {

     

       
0
       
 
       

     

       
125
       
 
       
			padding: 0.75rem;

     

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

     

       
127
       
 
       
			border-radius: 6px;

     
···

       
129
       
 
       
			font-family: inherit;

     

       
130
       
 
       
			background: var(--background);

     

       
131
       
 
       
			color: var(--text);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
132
       
 
       
		}

     

       
133
       
 
       


     

       
134
       
-
       
		.field input:focus {

     

       
135
       
 
       
			outline: none;

     

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

     

       
137
       
 
       
		}

     

       
138
       
 
       


     

       
139
       
-
       
		.error {

     

       
140
       
 
       
			color: var(--accent);

     

       
141
       
 
       
			font-size: 0.875rem;

     

       
142
       
-
       
			margin: 0;

     

       
143
       
 
       
		}

     

       
144
       
 
       


     

       
145
       
-
       
		.btn {

     

       
146
       
 
       
			padding: 0.75rem 1.5rem;

     

       
0
       
 
       

     

       
147
       
 
       
			border-radius: 6px;

     

       
148
       
 
       
			font-size: 1rem;

     

       
149
       
 
       
			font-weight: 500;

     

       
150
       
 
       
			cursor: pointer;

     

       
151
       
 
       
			transition: all 0.2s;

     

       
152
       
 
       
			font-family: inherit;

     

       
153
       
-
       
			border: 2px solid;

     

       
154
       
 
       
		}

     

       
155
       
 
       


     

       
156
       
-
       
		.btn:disabled {

     

       
157
       
-
       
			opacity: 0.5;

     

       
158
       
 
       
			cursor: not-allowed;

     

       
159
       
 
       
		}

     

       
160
       
 
       


     

       
161
       
-
       
		.btn-affirmative {

     

       
162
       
 
       
			background: var(--primary);

     

       
163
       
 
       
			color: white;

     

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

     

       
165
       
 
       
		}

     

       
166
       
 
       


     

       
167
       
-
       
		.btn-affirmative:hover:not(:disabled) {

     

       
168
       
 
       
			background: transparent;

     

       
169
       
 
       
			color: var(--primary);

     

       
170
       
 
       
		}

     
···

       
210
       
 
       
			display: flex;

     

       
211
       
 
       
			flex-direction: column;

     

       
212
       
 
       
			gap: 0.5rem;

     

       
0
       
 
       

     

       
213
       
 
       
		}

     

       
214
       
 
       


     

       
215
       
 
       
		.user-menu a,

     
···

       
273
       
 
       


     

       
274
       
 
       
	private closeModal() {

     

       
275
       
 
       
		this.showModal = false;

     

       
0
       
 
       

     

       
276
       
 
       
		this.email = "";

     

       
277
       
 
       
		this.password = "";

     

       
278
       
 
       
		this.name = "";

     

       
279
       
 
       
		this.error = "";

     

       
280
       
-
       
		this.needsRegistration = false;

     

       
281
       
 
       
	}

     

       
282
       
 
       


     

       
283
       
 
       
	private async handleSubmit(e: Event) {

     
···

       
289
       
 
       
			if (this.needsRegistration) {

     

       
290
       
 
       
				const response = await fetch("/api/auth/register", {

     

       
291
       
 
       
					method: "POST",

     

       
292
       
-
       
					headers: { "Content-Type": "application/json" },

     

       
0
       
 
       

     

       
0
       
 
       

     

       
293
       
 
       
					body: JSON.stringify({

     

       
294
       
 
       
						email: this.email,

     

       
295
       
 
       
						password: this.password,

     

       
296
       
-
       
						name: this.name,

     

       
297
       
 
       
					}),

     

       
298
       
 
       
				});

     

       
299
       
 
       


     
···

       
310
       
 
       
			} else {

     

       
311
       
 
       
				const response = await fetch("/api/auth/login", {

     

       
312
       
 
       
					method: "POST",

     

       
313
       
-
       
					headers: { "Content-Type": "application/json" },

     

       
0
       
 
       

     

       
0
       
 
       

     

       
314
       
 
       
					body: JSON.stringify({

     

       
315
       
 
       
						email: this.email,

     

       
316
       
 
       
						password: this.password,

     
···

       
343
       
 
       
		}

     

       
344
       
 
       
	}

     

       
345
       
 
       


     

       
346
       
-
       
	async handleLogout() {

     

       
347
       
 
       
		try {

     

       
348
       
 
       
			await fetch("/api/auth/logout", { method: "POST" });

     

       
349
       
 
       
			this.user = null;

     
···

       
353
       
 
       
		}

     

       
354
       
 
       
	}

     

       
355
       
 
       


     

       
356
       
-
       
	private toggleUserMenu() {

     

       
357
       
 
       
		this.showModal = !this.showModal;

     

       
358
       
 
       
	}

     

       
359
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
360
       
 
       
	override render() {

     

       
361
       
 
       
		if (this.loading) {

     

       
362
       
 
       
			return html`<div class="loading">Loading...</div>`;

     

       
363
       
 
       
		}

     

       
364
       
 
       


     

       
365
       
-
       
		if (this.user) {

     

       
366
       
-
       
			return html`

     

       
367
       
-
       
				<div>

     

       
368
       
-
       
					<button class="auth-button" @click=${this.toggleUserMenu}>

     

       
369
       
-
       
						<img

     

       
370
       
-
       
							src="https://hostedboringavatars.vercel.app/api/marble?size=24&name=${this.user.avatar}&colors=2d3142ff,4f5d75ff,bfc0c0ff,ef8354ff"

     

       
371
       
-
       
							alt="Avatar"

     

       
372
       
-
       
							style="border-radius: 50%; width: 24px; height: 24px;"

     

       
373
       
-
       
						/>

     

       
374
       
-
       
						<span class="email">${this.user.name ?? this.user.email}</span>

     

       
375
       
-
       
						<span>▼</span>

     

       
376
       
-
       
					</button>

     

       
377
       
-
       
					${

     

       
378
       
-
       
						this.showModal

     

       
379
       
-
       
							? html`

     

       
380
       
-
       
							<div class="user-menu">

     

       
381
       
-
       
							<a href="/transcribe" @click=${this.closeModal}>Transcribe</a>

     

       
382
       
-
       
							<a href="/settings" @click=${this.closeModal}>Settings</a>

     

       
383
       
-
       
							 <button @click=${this.handleLogout}>Logout</button>

     

       
384
       
-
       
							</div>

     

       
385
       
-
       
					  `

     

       
386
       
-
       
							: ""

     

       
387
       
-
       
					}

     

       
388
       
-
       
				</div>

     

       
389
       
-
       
			`;

     

       
390
       
-
       
		}

     

       
391
       
-
       


     

       
392
       
 
       
		return html`

     

       
393
       
-
       
			<div>

     

       
394
       
-
       
				<button class="auth-button" @click=${this.openModal}>Login</button>

     

       
395
       
 
       
				${

     

       
396
       
-
       
					this.showModal

     

       
397
       
 
       
						? html`

     

       
398
       
-
       
							<div class="modal-overlay" @click=${this.closeModal}>

     

       
399
       
-
       
								<div class="modal" @click=${(e: Event) => e.stopPropagation()}>

     

       
400
       
-
       
									<h2>${this.needsRegistration ? "Complete Registration" : "Login"}</h2>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
401
       
 
       
									${

     

       
402
       
 
       
										this.needsRegistration

     

       
403
       
 
       
											? html`

     

       
404
       
-
       
												<p class="info-text">

     

       
405
       
-
       
													Welcome! We'll create an account for <strong>${this.email}</strong>

     

       
406
       
-
       
												</p>

     

       
407
       
-
       
										  `

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
408
       
 
       
											: ""

     

       
409
       
 
       
									}

     

       
410
       
-
       
									<form @submit=${this.handleSubmit}>

     

       
411
       
-
       
										<div class="field">

     

       
412
       
-
       
											<label for="email">Email</label>

     

       
413
       
-
       
											<input

     

       
414
       
-
       
												type="email"

     

       
415
       
-
       
												id="email"

     

       
416
       
-
       
												.value=${this.email}

     

       
417
       
-
       
												@input=${(e: InputEvent) => {

     

       
418
       
-
       
													this.email = (e.target as HTMLInputElement).value;

     

       
419
       
-
       
												}}

     

       
420
       
-
       
												required

     

       
421
       
-
       
												?disabled=${this.needsRegistration}

     

       
422
       
-
       
											/>

     

       
423
       
-
       
										</div>

     

       
424
       
 
       


     

       
425
       
-
       
										${

     

       
426
       
-
       
											this.needsRegistration

     

       
427
       
-
       
												? html`

     

       
428
       
-
       
													<div class="field">

     

       
429
       
-
       
														<label for="name">Name</label>

     

       
430
       
-
       
														<input

     

       
431
       
-
       
															type="text"

     

       
432
       
-
       
															id="name"

     

       
433
       
-
       
															.value=${this.name}

     

       
434
       
-
       
															@input=${(e: InputEvent) => {

     

       
435
       
-
       
																this.name = (

     

       
436
       
-
       
																	e.target as HTMLInputElement

     

       
437
       
-
       
																).value;

     

       
438
       
-
       
															}}

     

       
439
       
-
       
															required

     

       
440
       
-
       
															placeholder="What should we call you?"

     

       
441
       
-
       
														/>

     

       
442
       
-
       
													</div>

     

       
443
       
-
       
											  `

     

       
444
       
-
       
												: ""

     

       
445
       
-
       
										}

     

       
446
       
-
       


     

       
447
       
-
       
										<div class="field">

     

       
448
       
-
       
											<label for="password">${this.needsRegistration ? "Create Password" : "Password"}</label>

     

       
449
       
-
       
											<input

     

       
450
       
-
       
												type="password"

     

       
451
       
-
       
												id="password"

     

       
452
       
-
       
												.value=${this.password}

     

       
453
       
-
       
												@input=${(e: InputEvent) => {

     

       
454
       
-
       
													this.password = (e.target as HTMLInputElement).value;

     

       
455
       
-
       
												}}

     

       
456
       
-
       
												required

     

       
457
       
-
       
												minlength="8"

     

       
458
       
-
       
												placeholder=${this.needsRegistration ? "At least 8 characters plz" : ""}

     

       
459
       
-
       
											/>

     

       
460
       
-
       
										</div>

     

       
461
       
 
       


     

       
462
       
-
       
										${this.error ? html`<p class="error">${this.error}</p>` : ""}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
463
       
 
       


     

       
464
       
-
       
										<div class="modal-actions">

     

       
465
       
-
       
											<button

     

       
466
       
-
       
												type="submit"

     

       
467
       
-
       
												class="btn btn-affirmative"

     

       
468
       
-
       
												?disabled=${this.isSubmitting}

     

       
469
       
-
       
											>

     

       
470
       
-
       
												${

     

       
471
       
-
       
													this.isSubmitting

     

       
472
       
-
       
														? "Loading..."

     

       
473
       
-
       
														: this.needsRegistration

     

       
474
       
-
       
															? "Create Account"

     

       
475
       
-
       
															: "Login"

     

       
476
       
-
       
												}

     

       
477
       
-
       
											</button>

     

       
478
       
-
       
											<button

     

       
479
       
-
       
												type="button"

     

       
480
       
-
       
												class="btn btn-neutral"

     

       
481
       
-
       
												@click=${this.closeModal}

     

       
482
       
-
       
											>

     

       
483
       
-
       
												Cancel

     

       
484
       
-
       
											</button>

     

       
485
       
-
       
										</div>

     

       
486
       
-
       
									</form>

     

       
487
       
-
       
								</div>

     

       
488
       
 
       
							</div>

     

       
489
       
-
       
					  `

     

       
490
       
-
       
						: ""

     

       
491
       
-
       
				}

     

       
492
       
-
       
			</div>

     

       
493
       
 
       
		`;

     

       
494
       
 
       
	}

     

       
495
       
 
       
}

     

···

       
22
       
 
       
	static override styles = css`

     

       
23
       
 
       
		:host {

     

       
24
       
 
       
			display: block;

     

       
25
       
+
       
		}

     

       
26
       
+
       


     

       
27
       
+
       
		.auth-container {

     

       
28
       
+
       
			position: relative;

     

       
29
       
 
       
		}

     

       
30
       
 
       


     

       
31
       
 
       
		.auth-button {

     
···

       
98
       
 
       
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

     

       
99
       
 
       
		}

     

       
100
       
 
       


     

       
101
       
+
       
		.modal-title {

     

       
102
       
 
       
			margin-top: 0;

     

       
103
       
+
       
			margin-bottom: 1rem;

     

       
104
       
 
       
			color: var(--text);

     

       
0
       
 
       

     

       
105
       
 
       
		}

     

       
106
       
 
       


     

       
107
       
+
       
		.form-group {

     

       
108
       
+
       
			margin-bottom: 1rem;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
109
       
 
       
		}

     

       
110
       
 
       


     

       
111
       
+
       
		label {

     

       
112
       
+
       
			display: block;

     

       
113
       
+
       
			margin-bottom: 0.25rem;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
114
       
 
       
			font-weight: 500;

     

       
115
       
 
       
			color: var(--text);

     

       
116
       
+
       
			font-size: 0.875rem;

     

       
117
       
 
       
		}

     

       
118
       
 
       


     

       
119
       
+
       
		input {

     

       
120
       
+
       
			width: 100%;

     

       
121
       
 
       
			padding: 0.75rem;

     

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

     

       
123
       
 
       
			border-radius: 6px;

     
···

       
125
       
 
       
			font-family: inherit;

     

       
126
       
 
       
			background: var(--background);

     

       
127
       
 
       
			color: var(--text);

     

       
128
       
+
       
			transition: all 0.2s;

     

       
129
       
+
       
			box-sizing: border-box;

     

       
130
       
 
       
		}

     

       
131
       
 
       


     

       
132
       
+
       
		input:focus {

     

       
133
       
 
       
			outline: none;

     

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

     

       
135
       
 
       
		}

     

       
136
       
 
       


     

       
137
       
+
       
		.error-message {

     

       
138
       
 
       
			color: var(--accent);

     

       
139
       
 
       
			font-size: 0.875rem;

     

       
140
       
+
       
			margin-top: 1rem;

     

       
141
       
 
       
		}

     

       
142
       
 
       


     

       
143
       
+
       
		button {

     

       
144
       
 
       
			padding: 0.75rem 1.5rem;

     

       
145
       
+
       
			border: 2px solid var(--primary);

     

       
146
       
 
       
			border-radius: 6px;

     

       
147
       
 
       
			font-size: 1rem;

     

       
148
       
 
       
			font-weight: 500;

     

       
149
       
 
       
			cursor: pointer;

     

       
150
       
 
       
			transition: all 0.2s;

     

       
151
       
 
       
			font-family: inherit;

     

       
0
       
 
       

     

       
152
       
 
       
		}

     

       
153
       
 
       


     

       
154
       
+
       
		button:disabled {

     

       
155
       
+
       
			opacity: 0.6;

     

       
156
       
 
       
			cursor: not-allowed;

     

       
157
       
 
       
		}

     

       
158
       
 
       


     

       
159
       
+
       
		.btn-primary {

     

       
160
       
 
       
			background: var(--primary);

     

       
161
       
 
       
			color: white;

     

       
162
       
+
       
			flex: 1;

     

       
163
       
 
       
		}

     

       
164
       
 
       


     

       
165
       
+
       
		.btn-primary:hover:not(:disabled) {

     

       
166
       
 
       
			background: transparent;

     

       
167
       
 
       
			color: var(--primary);

     

       
168
       
 
       
		}

     
···

       
208
       
 
       
			display: flex;

     

       
209
       
 
       
			flex-direction: column;

     

       
210
       
 
       
			gap: 0.5rem;

     

       
211
       
+
       
			z-index: 100;

     

       
212
       
 
       
		}

     

       
213
       
 
       


     

       
214
       
 
       
		.user-menu a,

     
···

       
272
       
 
       


     

       
273
       
 
       
	private closeModal() {

     

       
274
       
 
       
		this.showModal = false;

     

       
275
       
+
       
		this.needsRegistration = false;

     

       
276
       
 
       
		this.email = "";

     

       
277
       
 
       
		this.password = "";

     

       
278
       
 
       
		this.name = "";

     

       
279
       
 
       
		this.error = "";

     

       
0
       
 
       

     

       
280
       
 
       
	}

     

       
281
       
 
       


     

       
282
       
 
       
	private async handleSubmit(e: Event) {

     
···

       
288
       
 
       
			if (this.needsRegistration) {

     

       
289
       
 
       
				const response = await fetch("/api/auth/register", {

     

       
290
       
 
       
					method: "POST",

     

       
291
       
+
       
					headers: {

     

       
292
       
+
       
						"Content-Type": "application/json",

     

       
293
       
+
       
					},

     

       
294
       
 
       
					body: JSON.stringify({

     

       
295
       
 
       
						email: this.email,

     

       
296
       
 
       
						password: this.password,

     

       
297
       
+
       
						name: this.name || null,

     

       
298
       
 
       
					}),

     

       
299
       
 
       
				});

     

       
300
       
 
       


     
···

       
311
       
 
       
			} else {

     

       
312
       
 
       
				const response = await fetch("/api/auth/login", {

     

       
313
       
 
       
					method: "POST",

     

       
314
       
+
       
					headers: {

     

       
315
       
+
       
						"Content-Type": "application/json",

     

       
316
       
+
       
					},

     

       
317
       
 
       
					body: JSON.stringify({

     

       
318
       
 
       
						email: this.email,

     

       
319
       
 
       
						password: this.password,

     
···

       
346
       
 
       
		}

     

       
347
       
 
       
	}

     

       
348
       
 
       


     

       
349
       
+
       
	private async handleLogout() {

     

       
350
       
 
       
		try {

     

       
351
       
 
       
			await fetch("/api/auth/logout", { method: "POST" });

     

       
352
       
 
       
			this.user = null;

     
···

       
356
       
 
       
		}

     

       
357
       
 
       
	}

     

       
358
       
 
       


     

       
359
       
+
       
	private toggleMenu() {

     

       
360
       
 
       
		this.showModal = !this.showModal;

     

       
361
       
 
       
	}

     

       
362
       
 
       


     

       
363
       
+
       
	private handleEmailInput(e: Event) {

     

       
364
       
+
       
		this.email = (e.target as HTMLInputElement).value;

     

       
365
       
+
       
	}

     

       
366
       
+
       


     

       
367
       
+
       
	private handleNameInput(e: Event) {

     

       
368
       
+
       
		this.name = (e.target as HTMLInputElement).value;

     

       
369
       
+
       
	}

     

       
370
       
+
       


     

       
371
       
+
       
	private handlePasswordInput(e: Event) {

     

       
372
       
+
       
		this.password = (e.target as HTMLInputElement).value;

     

       
373
       
+
       
	}

     

       
374
       
+
       


     

       
375
       
 
       
	override render() {

     

       
376
       
 
       
		if (this.loading) {

     

       
377
       
 
       
			return html`<div class="loading">Loading...</div>`;

     

       
378
       
 
       
		}

     

       
379
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
380
       
 
       
		return html`

     

       
381
       
+
       
			<div class="auth-container">

     

       
0
       
 
       

     

       
382
       
 
       
				${

     

       
383
       
+
       
					this.user

     

       
384
       
 
       
						? html`

     

       
385
       
+
       
							<button class="auth-button" @click=${this.toggleMenu}>

     

       
386
       
+
       
								<div class="user-info">

     

       
387
       
+
       
									<img

     

       
388
       
+
       
										src="https://hostedboringavatars.vercel.app/api/marble?size=32&name=${this.user.avatar}&colors=2d3142ff,4f5d75ff,bfc0c0ff,ef8354ff"

     

       
389
       
+
       
										alt="Avatar"

     

       
390
       
+
       
										width="32"

     

       
391
       
+
       
										height="32"

     

       
392
       
+
       
										style="border-radius: 50%"

     

       
393
       
+
       
									/>

     

       
394
       
+
       
									<span class="email">${this.user.name ?? this.user.email}</span>

     

       
395
       
+
       
								</div>

     

       
396
       
+
       
							</button>

     

       
397
       
+
       
							${

     

       
398
       
+
       
								this.showModal

     

       
399
       
+
       
									? html`

     

       
400
       
+
       
										<div class="user-menu">

     

       
401
       
+
       
											<a href="/transcribe" @click=${this.closeModal}>Transcribe</a>

     

       
402
       
+
       
											<a href="/settings" @click=${this.closeModal}>Settings</a>

     

       
403
       
+
       
											<button @click=${this.handleLogout}>Logout</button>

     

       
404
       
+
       
										</div>

     

       
405
       
+
       
									`

     

       
406
       
+
       
									: ""

     

       
407
       
+
       
							}

     

       
408
       
+
       
						`

     

       
409
       
+
       
						: html`

     

       
410
       
+
       
							<button class="auth-button" @click=${this.openModal}>

     

       
411
       
+
       
								Sign In

     

       
412
       
+
       
							</button>

     

       
413
       
+
       
						`

     

       
414
       
+
       
				}

     

       
415
       
+
       
			</div>

     

       
416
       
+
       


     

       
417
       
+
       
			${

     

       
418
       
+
       
				this.showModal && !this.user

     

       
419
       
+
       
					? html`

     

       
420
       
+
       
						<div class="modal-overlay" @click=${this.closeModal}>

     

       
421
       
+
       
							<div class="modal" @click=${(e: Event) => e.stopPropagation()}>

     

       
422
       
+
       
								<h2 class="modal-title">

     

       
423
       
+
       
									${this.needsRegistration ? "Create Account" : "Sign In"}

     

       
424
       
+
       
								</h2>

     

       
425
       
+
       


     

       
426
       
+
       
								${

     

       
427
       
+
       
									this.needsRegistration

     

       
428
       
+
       
										? html`

     

       
429
       
+
       
											<p class="info-text">

     

       
430
       
+
       
												That email isn't registered yet. Let's create an

     

       
431
       
+
       
												account!

     

       
432
       
+
       
											</p>

     

       
433
       
+
       
										`

     

       
434
       
+
       
										: ""

     

       
435
       
+
       
								}

     

       
436
       
+
       


     

       
437
       
+
       
								<form @submit=${this.handleSubmit}>

     

       
438
       
+
       
									<div class="form-group">

     

       
439
       
+
       
										<label for="email">Email</label>

     

       
440
       
+
       
										<input

     

       
441
       
+
       
											type="email"

     

       
442
       
+
       
											id="email"

     

       
443
       
+
       
											.value=${this.email}

     

       
444
       
+
       
											@input=${this.handleEmailInput}

     

       
445
       
+
       
											required

     

       
446
       
+
       
											?disabled=${this.isSubmitting}

     

       
447
       
+
       
										/>

     

       
448
       
+
       
									</div>

     

       
449
       
+
       


     

       
450
       
 
       
									${

     

       
451
       
 
       
										this.needsRegistration

     

       
452
       
 
       
											? html`

     

       
453
       
+
       
												<div class="form-group">

     

       
454
       
+
       
													<label for="name">Name (optional)</label>

     

       
455
       
+
       
													<input

     

       
456
       
+
       
														type="text"

     

       
457
       
+
       
														id="name"

     

       
458
       
+
       
														.value=${this.name}

     

       
459
       
+
       
														@input=${this.handleNameInput}

     

       
460
       
+
       
														?disabled=${this.isSubmitting}

     

       
461
       
+
       
													/>

     

       
462
       
+
       
												</div>

     

       
463
       
+
       
											`

     

       
464
       
 
       
											: ""

     

       
465
       
 
       
									}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
466
       
 
       


     

       
467
       
+
       
									<div class="form-group">

     

       
468
       
+
       
										<label for="password">Password</label>

     

       
469
       
+
       
										<input

     

       
470
       
+
       
											type="password"

     

       
471
       
+
       
											id="password"

     

       
472
       
+
       
											.value=${this.password}

     

       
473
       
+
       
											@input=${this.handlePasswordInput}

     

       
474
       
+
       
											required

     

       
475
       
+
       
											?disabled=${this.isSubmitting}

     

       
476
       
+
       
										/>

     

       
477
       
+
       
									</div>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
478
       
 
       


     

       
479
       
+
       
									${

     

       
480
       
+
       
										this.error

     

       
481
       
+
       
											? html`<div class="error-message">${this.error}</div>`

     

       
482
       
+
       
											: ""

     

       
483
       
+
       
									}

     

       
484
       
 
       


     

       
485
       
+
       
									<div class="modal-actions">

     

       
486
       
+
       
										<button

     

       
487
       
+
       
											type="submit"

     

       
488
       
+
       
											class="btn-primary"

     

       
489
       
+
       
											?disabled=${this.isSubmitting}

     

       
490
       
+
       
										>

     

       
491
       
+
       
											${

     

       
492
       
+
       
												this.isSubmitting

     

       
493
       
+
       
													? "Loading..."

     

       
494
       
+
       
													: this.needsRegistration

     

       
495
       
+
       
														? "Create Account"

     

       
496
       
+
       
														: "Sign In"

     

       
497
       
+
       
											}

     

       
498
       
+
       
										</button>

     

       
499
       
+
       
										<button

     

       
500
       
+
       
											type="button"

     

       
501
       
+
       
											class="btn-neutral"

     

       
502
       
+
       
											@click=${this.closeModal}

     

       
503
       
+
       
											?disabled=${this.isSubmitting}

     

       
504
       
+
       
										>

     

       
505
       
+
       
											Cancel

     

       
506
       
+
       
										</button>

     

       
507
       
+
       
									</div>

     

       
508
       
+
       
								</form>

     

       
509
       
 
       
							</div>

     

       
510
       
+
       
						</div>

     

       
511
       
+
       
					`

     

       
512
       
+
       
					: ""

     

       
513
       
+
       
			}

     

       
514
       
 
       
		`;

     

       
515
       
 
       
	}

     

       
516
       
 
       
}

     

···

       
176
       
 
       
					email: user.email,

     

       
177
       
 
       
					name: user.name,

     

       
178
       
 
       
					avatar: user.avatar,

     

       
0
       
 
       

     

       
179
       
 
       
				});

     

       
180
       
 
       
			},

     

       
181
       
 
       
		},

     

···

       
176
       
 
       
					email: user.email,

     

       
177
       
 
       
					name: user.name,

     

       
178
       
 
       
					avatar: user.avatar,

     

       
179
       
+
       
					created_at: user.created_at,

     

       
180
       
 
       
				});

     

       
181
       
 
       
			},

     

       
182
       
 
       
		},

     

···

       
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
       
-
       
    main {

     

       
13
       
-
       
      max-width: 48rem;

     

       
14
       
-
       
      text-align: center;

     

       
15
       
-
       
      padding: 4rem 2rem;

     

       
16
       
-
       
    }

     

       
17
       
-
       


     

       
18
       
 
       
    .hero-title {

     

       
19
       
 
       
      font-size: 3rem;

     

       
20
       
 
       
      font-weight: 700;

     
···

       
27
       
 
       
      color: var(--text);

     

       
28
       
 
       
      opacity: 0.8;

     

       
29
       
 
       
      margin-bottom: 2rem;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       
    }

     

       
31
       
 
       


     

       
32
       
 
       
    .cta-buttons {

     
···

       
85
       
 
       
</head>

     

       
86
       
 
       


     

       
87
       
 
       
<body>

     

       
88
       
-
       
  <auth-component></auth-component>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
89
       
 
       


     

       
90
       
 
       
  <main>

     

       
91
       
 
       
    <h1 class="hero-title">Thistle</h1>

     

···

       
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>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
12
       
 
       
    .hero-title {

     

       
13
       
 
       
      font-size: 3rem;

     

       
14
       
 
       
      font-weight: 700;

     
···

       
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 {

     
···

       
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>

     

···

       
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">

     

       
0
       
 
       

     

       
11
       
 
       
	<style>

     

       
12
       
-
       
		.back-link {

     

       
13
       
-
       
			display: inline-flex;

     

       
14
       
-
       
			align-items: center;

     

       
15
       
-
       
			gap: 0.5rem;

     

       
16
       
-
       
			color: var(--text);

     

       
17
       
-
       
			opacity: 0.7;

     

       
18
       
-
       
			text-decoration: none;

     

       
19
       
-
       
			font-size: 0.875rem;

     

       
20
       
-
       
			margin-bottom: 2rem;

     

       
21
       
-
       
			transition: opacity 0.2s;

     

       
22
       
-
       
		}

     

       
23
       
-
       


     

       
24
       
-
       
		.back-link:hover {

     

       
25
       
-
       
			opacity: 1;

     

       
26
       
 
       
		}

     

       
27
       
 
       
	</style>

     

       
28
       
 
       
</head>

     

       
29
       
 
       


     

       
30
       
 
       
<body>

     

       
31
       
-
       
	<auth-component></auth-component>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
32
       
 
       


     

       
33
       
 
       
	<main>

     

       
34
       
-
       
		<a href="/" class="back-link">

     

       
35
       
-
       
			← Back to Home

     

       
36
       
-
       
		</a>

     

       
37
       
-
       


     

       
38
       
-
       
		<h1>Settings</h1>

     

       
39
       
 
       
		<user-settings></user-settings>

     

       
40
       
 
       
	</main>

     

       
41
       
 
       


     
···

       
43
       
 
       
	<script type="module" src="../components/user-settings.ts"></script>

     

       
44
       
 
       
</body>

     

       
45
       
 
       


     

       
46
       
-
       
</html>

     

···

       
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
       
+
       


     

       
12
       
 
       
	<style>

     

       
13
       
+
       
		main {

     

       
14
       
+
       
			max-width: 64rem !important;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
15
       
 
       
		}

     

       
16
       
 
       
	</style>

     

       
17
       
 
       
</head>

     

       
18
       
 
       


     

       
19
       
 
       
<body>

     

       
20
       
+
       
	<header>

     

       
21
       
+
       
		<div class="header-content">

     

       
22
       
+
       
			<a href="/" class="site-title">

     

       
23
       
+
       
				<span>🪻</span>

     

       
24
       
+
       
				<span>Thistle - Settings</span>

     

       
25
       
+
       
			</a>

     

       
26
       
+
       
			<auth-component></auth-component>

     

       
27
       
+
       
		</div>

     

       
28
       
+
       
	</header>

     

       
29
       
 
       


     

       
30
       
 
       
	<main>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
31
       
 
       
		<user-settings></user-settings>

     

       
32
       
 
       
	</main>

     

       
33
       
 
       


     
···

       
35
       
 
       
	<script type="module" src="../components/user-settings.ts"></script>

     

       
36
       
 
       
</body>

     

       
37
       
 
       


     

       
38
       
+
       
</html>
     

···

       
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
       
-
       
    main {

     

       
13
       
-
       
      max-width: 48rem;

     

       
14
       
-
       
    }

     

       
15
       
-
       


     

       
16
       
 
       
    .page-header {

     

       
17
       
 
       
      text-align: center;

     

       
18
       
 
       
      margin-bottom: 3rem;

     
···

       
30
       
 
       
      color: var(--text);

     

       
31
       
 
       
      opacity: 0.8;

     

       
32
       
 
       
    }

     

       
33
       
-
       


     

       
34
       
-
       
    .back-link {

     

       
35
       
-
       
      display: inline-flex;

     

       
36
       
-
       
      align-items: center;

     

       
37
       
-
       
      gap: 0.5rem;

     

       
38
       
-
       
      color: var(--text);

     

       
39
       
-
       
      opacity: 0.7;

     

       
40
       
-
       
      text-decoration: none;

     

       
41
       
-
       
      font-size: 0.875rem;

     

       
42
       
-
       
      margin-bottom: 2rem;

     

       
43
       
-
       
      transition: opacity 0.2s;

     

       
44
       
-
       
    }

     

       
45
       
-
       


     

       
46
       
-
       
    .back-link:hover {

     

       
47
       
-
       
      opacity: 1;

     

       
48
       
-
       
    }

     

       
49
       
 
       
  </style>

     

       
50
       
 
       
</head>

     

       
51
       
 
       


     

       
52
       
 
       
<body>

     

       
53
       
-
       
  <auth-component></auth-component>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
54
       
 
       


     

       
55
       
 
       
  <main>

     

       
56
       
-
       
    <a href="/" class="back-link">

     

       
57
       
-
       
      ← Back to Home

     

       
58
       
-
       
    </a>

     

       
59
       
-
       


     

       
60
       
 
       
    <div class="page-header">

     

       
61
       
 
       
      <h1 class="page-title">Audio Transcription</h1>

     

       
62
       
 
       
      <p class="page-subtitle">Upload your audio files and get accurate transcripts powered by AI</p>

     
···

       
69
       
 
       
  <script type="module" src="../components/transcription.ts"></script>

     

       
70
       
 
       
</body>

     

       
71
       
 
       


     

       
72
       
-
       
</html>

     

···

       
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>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
12
       
 
       
    .page-header {

     

       
13
       
 
       
      text-align: center;

     

       
14
       
 
       
      margin-bottom: 3rem;

     
···

       
26
       
 
       
      color: var(--text);

     

       
27
       
 
       
      opacity: 0.8;

     

       
28
       
 
       
    }

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
29
       
 
       
  </style>

     

       
30
       
 
       
</head>

     

       
31
       
 
       


     

       
32
       
 
       
<body>

     

       
33
       
+
       
  <header>

     

       
34
       
+
       
    <div class="header-content">

     

       
35
       
+
       
      <a href="/" class="site-title">

     

       
36
       
+
       
        <span>🪻</span>

     

       
37
       
+
       
        <span>Thistle - Transcription</span>

     

       
38
       
+
       
      </a>

     

       
39
       
+
       
      <auth-component></auth-component>

     

       
40
       
+
       
    </div>

     

       
41
       
+
       
  </header>

     

       
42
       
 
       


     

       
43
       
 
       
  <main>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
44
       
 
       
    <div class="page-header">

     

       
45
       
 
       
      <h1 class="page-title">Audio Transcription</h1>

     

       
46
       
 
       
      <p class="page-subtitle">Upload your audio files and get accurate transcripts powered by AI</p>

     
···

       
53
       
 
       
  <script type="module" src="../components/transcription.ts"></script>

     

       
54
       
 
       
</body>

     

       
55
       
 
       


     

       
56
       
+
       
</html>
     

···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
/* Header styles shared across all pages */

     

       
2
       
+
       


     

       
3
       
+
       
header {

     

       
4
       
+
       
  position: sticky;

     

       
5
       
+
       
  top: 0;

     

       
6
       
+
       
  z-index: 1000;

     

       
7
       
+
       
  background: var(--background);

     

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

     

       
9
       
+
       
  padding: 1rem 2rem;

     

       
10
       
+
       
  margin: -2rem -2rem 2rem -2rem;

     

       
11
       
+
       
}

     

       
12
       
+
       


     

       
13
       
+
       
.header-content {

     

       
14
       
+
       
  max-width: 1200px;

     

       
15
       
+
       
  margin: 0 auto;

     

       
16
       
+
       
  display: flex;

     

       
17
       
+
       
  justify-content: space-between;

     

       
18
       
+
       
  align-items: center;

     

       
19
       
+
       
}

     

       
20
       
+
       


     

       
21
       
+
       
.site-title {

     

       
22
       
+
       
  font-size: 1.5rem;

     

       
23
       
+
       
  font-weight: 600;

     

       
24
       
+
       
  color: var(--text);

     

       
25
       
+
       
  text-decoration: none;

     

       
26
       
+
       
  display: flex;

     

       
27
       
+
       
  align-items: center;

     

       
28
       
+
       
  gap: 0.5rem;

     

       
29
       
+
       
}

     

       
30
       
+
       


     

       
31
       
+
       
.site-title:hover {

     

       
32
       
+
       
  color: var(--primary);

     

       
33
       
+
       
}

     

···

       
1
       
 
       
@import url('./buttons.css');

     

       
0
       
 
       

     

       
2
       
 
       


     

       
3
       
 
       
:root {

     

       
4
       
 
       
  /* Color palette */

     
···

       
78
       
 
       


     

       
79
       
 
       
main {

     

       
80
       
 
       
  margin: 0 auto;

     

       
0
       
 
       

     

       
81
       
 
       
}
     

···

       
1
       
 
       
@import url('./buttons.css');

     

       
2
       
+
       
@import url('./header.css');

     

       
3
       
 
       


     

       
4
       
 
       
:root {

     

       
5
       
 
       
  /* Color palette */

     
···

       
79
       
 
       


     

       
80
       
 
       
main {

     

       
81
       
 
       
  margin: 0 auto;

     

       
82
       
+
       
  max-width: 48rem;

     

       
83
       
 
       
}