馃 distributed transcription service
thistle.dunkirk.sh
dunkirk.sh
1import { css, html, LitElement } from "lit";
2import { customElement, property } from "lit/decorators.js";
3
4// Simple counter web component using Lit
5@customElement("counter-component")
6export class CounterComponent extends LitElement {
7 @property({ type: Number }) count = 10;
8
9 static override styles = css`
10 :host {
11 display: block;
12 margin: 2rem 0;
13 padding: 2rem;
14 border: 1px solid var(--secondary);
15 border-radius: 8px;
16 text-align: center;
17 background: white;
18 }
19
20 .counter-display {
21 font-size: 3rem;
22 font-weight: bold;
23 margin: 1rem 0;
24 font-family: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, serif;
25 color: var(--primary);
26 }
27
28 button {
29 font-family: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, serif;
30 font-size: 1rem;
31 padding: 0.75rem 1.5rem;
32 margin: 0 0.5rem;
33 border: 2px solid var(--primary);
34 background: var(--background);
35 color: var(--text);
36 cursor: pointer;
37 border-radius: 4px;
38 transition: all 0.2s ease;
39 }
40
41 button:hover {
42 background: var(--primary);
43 color: var(--background);
44 }
45
46 button:active {
47 transform: scale(0.95);
48 }
49
50 button.reset {
51 border-color: var(--accent);
52 }
53
54 button.reset:hover {
55 background: var(--accent);
56 color: var(--background);
57 }
58 `;
59
60 private resetCounter() {
61 this.count = 0;
62 }
63
64 override render() {
65 return html`
66 <div>
67 <h3>Counter</h3>
68 <div class="counter-display">${this.count}</div>
69 <div>
70 <button @click=${() => this.count--}>-</button>
71 <button class="reset" @click=${this.resetCounter}>Reset</button>
72 <button @click=${() => this.count++}>+</button>
73 </div>
74 </div>
75 `;
76 }
77}