forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<div class="counter-card">
2 <div class="counter-container">
3 <button id="counter-btn" class="counter-button">
4 Click me (<span id="counter-value">0</span>)
5 </button>
6 </div>
7</div>
8
9<script is:inline>
10 let count = 0
11
12 function setupCounter() {
13 const button = document.getElementById('counter-btn')
14 const valueSpan = document.getElementById('counter-value')
15
16 if (button && valueSpan) {
17 valueSpan.textContent = count.toString()
18 button.onclick = function () {
19 count++
20 valueSpan.textContent = count.toString()
21 }
22 }
23 }
24
25 setupCounter()
26
27 document.addEventListener('astro:page-load', setupCounter)
28</script>
29
30<style>
31 .counter-card {
32 border: 1px solid var(--border);
33 width: 100%;
34 height: 12rem;
35 display: flex;
36 align-items: center;
37 justify-content: center;
38 border-radius: 10px;
39 }
40 .counter-container {
41 display: flex;
42 justify-content: center;
43 align-items: center;
44 }
45 .counter-button {
46 background-color: var(--text-primary);
47 color: var(--bg);
48 border: none;
49 font-family: var(--mono);
50 font-size: var(--font-size-s);
51 border-radius: 12px;
52 cursor: pointer;
53 width: 160px;
54 height: 44px;
55 transition: all 0.15s ease-in-out;
56 }
57 .counter-button:hover {
58 opacity: 0.9;
59 }
60</style>