Skip to content

Commit a6b1fbe

Browse files
fromdevfromdev
authored
Update Click-Counter.html
1 parent e3cd097 commit a6b1fbe

1 file changed

Lines changed: 138 additions & 2 deletions

File tree

‎Click-Counter.html‎

Lines changed: 138 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,141 @@
1-
<!-- HTML HEAD and styles remain unchanged... -->
2-
<!-- BODY below with changes marked inline -->
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7+
<title>Click Counter - Simple, Free Online Button Click Tracker</title>
8+
<meta name="description" content="Click Counter is a free, mobile-friendly digital tool that tracks button clicks instantly. Count anything with smooth animations and a beautiful modern UI." />
9+
<meta name="keywords" content="Click Counter, online click tracker, button click counter, digital clicker, web click tally, click count tool" />
10+
<style>
11+
/* Styles unchanged for modern look and feel */
12+
* {
13+
box-sizing: border-box;
14+
margin: 0;
15+
padding: 0;
16+
user-select: none;
17+
}
18+
19+
html, body {
20+
height: 100%;
21+
font-family: 'Segoe UI', sans-serif;
22+
background: linear-gradient(135deg, #667eea, #764ba2);
23+
overflow-x: hidden;
24+
overflow-y: auto;
25+
touch-action: manipulation;
26+
}
27+
28+
.app {
29+
height: 100vh;
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: space-between;
33+
}
34+
35+
.click-display {
36+
flex: 1;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
backdrop-filter: blur(12px);
41+
background: rgba(255, 255, 255, 0.1);
42+
color: #fff;
43+
font-weight: bold;
44+
font-size: clamp(4rem, 20vw, 10rem);
45+
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
46+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47+
}
48+
49+
.click-display.animate {
50+
transform: scale(1.2);
51+
}
52+
53+
.controls {
54+
display: flex;
55+
height: 50%;
56+
}
57+
58+
.btn {
59+
flex: 1;
60+
font-size: clamp(2rem, 5vw, 4rem);
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
border: none;
65+
outline: none;
66+
background: rgba(255, 255, 255, 0.15);
67+
backdrop-filter: blur(10px);
68+
color: white;
69+
font-weight: bold;
70+
position: relative;
71+
overflow: hidden;
72+
cursor: pointer;
73+
transition: transform 0.15s ease-in-out, background 0.3s ease;
74+
}
75+
76+
.btn:active {
77+
transform: scale(0.96);
78+
}
79+
80+
.btn.plus {
81+
background: rgba(0, 255, 128, 0.15);
82+
}
83+
84+
.btn.minus {
85+
background: rgba(255, 0, 64, 0.15);
86+
}
87+
88+
.ripple {
89+
position: absolute;
90+
border-radius: 50%;
91+
background: rgba(255, 255, 255, 0.4);
92+
transform: scale(0);
93+
animation: ripple 0.6s linear;
94+
pointer-events: none;
95+
}
96+
97+
@keyframes ripple {
98+
to {
99+
transform: scale(4);
100+
opacity: 0;
101+
}
102+
}
103+
104+
@media (orientation: landscape) {
105+
.controls {
106+
height: 40%;
107+
}
108+
}
109+
110+
footer {
111+
padding: 2rem 1rem;
112+
background: #f5f5f5;
113+
color: #333;
114+
font-size: 1rem;
115+
line-height: 1.6;
116+
}
117+
118+
footer h2 {
119+
margin-top: 2rem;
120+
margin-bottom: 1rem;
121+
font-size: 1.5rem;
122+
}
123+
124+
footer h3 {
125+
margin-top: 1.2rem;
126+
font-size: 1.2rem;
127+
}
128+
129+
footer p, footer li {
130+
margin-bottom: 0.8rem;
131+
}
132+
133+
footer ul {
134+
list-style-type: disc;
135+
margin-left: 1.5rem;
136+
}
137+
</style>
138+
</head>
3139

4140
<body>
5141
<div class="app">

0 commit comments

Comments
 (0)