@smbcloud / fatapp-web
Code Commits Issues Pulls Cloud Agent CI/CD
dependabot/npm_and_yarn/tsx-4.23.15
dependabot/npm_and_yarn/astro-7.4.0 dependabot/npm_and_yarn/astrojs/mdx-7.0.8 dependabot/npm_and_yarn/astrojs/sitemap-3.7.4 dependabot/npm_and_yarn/katex-0.19.0 dependabot/npm_and_yarn/prettier-3.9.10 dependabot/npm_and_yarn/sharp-0.35.5 dependabot/npm_and_yarn/tsx-4.23.15 dependabot/npm_and_yarn/typescript-eslint-8.71.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.71.2 development main
astro 55 lines 1.13 KB
Raw
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 <style>
10 .counter-card {
11 border: 1px solid var(--border);
12 width: 100%;
13 height: 12rem;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 border-radius: 10px;
18 }
19
20 .counter-container {
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 }
25
26 .counter-button {
27 background-color: var(--text-primary);
28 color: var(--bg);
29 border: none;
30 font-family: var(--font-mono);
31 font-size: var(--font-size-s);
32 border-radius: 12px;
33 cursor: pointer;
34 width: 160px;
35 height: 44px;
36 transition: all 0.15s ease-in-out;
37 }
38
39 .counter-button:hover {
40 opacity: 0.9;
41 }
42 </style>
43
44 <script>
45 let count = 0
46 const button = document.getElementById('counter-btn')
47 const valueSpan = document.getElementById('counter-value')
48
49 if (button && valueSpan) {
50 button.addEventListener('click', () => {
51 count++
52 valueSpan.textContent = count.toString()
53 })
54 }
55 </script>