Skip to content

Commit b5d1ab4

Browse files
fromdevfromdev
authored
Create Easy-Online-Counter.html
Create Easy-Online-Counter.html
1 parent e285287 commit b5d1ab4

1 file changed

Lines changed: 232 additions & 0 deletions

File tree

‎Easy-Online-Counter.html‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6+
<title>Easy Online Counter - Simple, Free Web Counter Tool</title>
7+
<meta name="description" content="Easy Online Counter is a free, mobile-optimized digital tally counter. Count anything instantly with a beautiful modern design and smooth animations." />
8+
<style>
9+
/* Reset and base */
10+
* {
11+
box-sizing: border-box;
12+
margin: 0;
13+
padding: 0;
14+
user-select: none;
15+
}
16+
17+
html, body {
18+
height: 100%;
19+
font-family: 'Segoe UI', sans-serif;
20+
background: linear-gradient(135deg, #667eea, #764ba2);
21+
display: flex;
22+
flex-direction: column;
23+
overflow-x: hidden;
24+
touch-action: manipulation;
25+
}
26+
27+
.app {
28+
flex: 1;
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: space-between;
32+
}
33+
34+
.counter-display {
35+
flex: 1;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
backdrop-filter: blur(12px);
40+
background: rgba(255, 255, 255, 0.1);
41+
color: #fff;
42+
font-weight: bold;
43+
font-size: clamp(4rem, 20vw, 10rem);
44+
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
45+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
46+
}
47+
48+
.counter-display.animate {
49+
transform: scale(1.2);
50+
}
51+
52+
.controls {
53+
display: flex;
54+
height: 50%;
55+
}
56+
57+
.btn {
58+
flex: 1;
59+
font-size: clamp(2rem, 5vw, 4rem);
60+
display: flex;
61+
justify-content: center;
62+
align-items: center;
63+
border: none;
64+
outline: none;
65+
background: rgba(255, 255, 255, 0.15);
66+
backdrop-filter: blur(10px);
67+
color: white;
68+
font-weight: bold;
69+
position: relative;
70+
overflow: hidden;
71+
cursor: pointer;
72+
transition: transform 0.15s ease-in-out, background 0.3s ease;
73+
}
74+
75+
.btn:active {
76+
transform: scale(0.96);
77+
}
78+
79+
.btn.plus {
80+
background: rgba(0, 255, 128, 0.15);
81+
}
82+
83+
.btn.minus {
84+
background: rgba(255, 0, 64, 0.15);
85+
}
86+
87+
.ripple {
88+
position: absolute;
89+
border-radius: 50%;
90+
background: rgba(255, 255, 255, 0.4);
91+
transform: scale(0);
92+
animation: ripple 0.6s linear;
93+
pointer-events: none;
94+
}
95+
96+
@keyframes ripple {
97+
to {
98+
transform: scale(4);
99+
opacity: 0;
100+
}
101+
}
102+
103+
@media (orientation: landscape) {
104+
.controls {
105+
height: 40%;
106+
}
107+
}
108+
109+
footer {
110+
padding: 2rem 1rem;
111+
background: #f5f5f5;
112+
color: #333;
113+
font-size: 1rem;
114+
line-height: 1.6;
115+
}
116+
117+
footer h2 {
118+
margin-top: 2rem;
119+
margin-bottom: 1rem;
120+
font-size: 1.5rem;
121+
}
122+
123+
footer h3 {
124+
margin-top: 1.2rem;
125+
font-size: 1.2rem;
126+
}
127+
128+
footer p, footer li {
129+
margin-bottom: 0.8rem;
130+
}
131+
132+
footer ul {
133+
list-style-type: disc;
134+
margin-left: 1.5rem;
135+
}
136+
</style>
137+
</head>
138+
<body>
139+
<div class="app">
140+
<div class="counter-display" id="counter">0</div>
141+
<div class="controls">
142+
<button class="btn minus" id="minus">-</button>
143+
<button class="btn plus" id="plus">+</button>
144+
</div>
145+
</div>
146+
147+
<footer>
148+
<h2>Easy Online Counter - Free, Instant Tally Counter</h2>
149+
<p>
150+
Welcome to <strong>Easy Online Counter</strong> — your free, fast, and user-friendly digital tally counter tool. Whether you're counting reps at the gym, keeping score in a game, or tracking event attendance, this simple web app helps you stay organized with just a tap.
151+
</p>
152+
<p>
153+
Designed for mobile and desktop use, our online counter is touch-optimized, highly responsive, and completely free to use. No login, no setup — just launch and count.
154+
</p>
155+
156+
<h2>Frequently Asked Questions (FAQ)</h2>
157+
158+
<h3>How do I use the Easy Online Counter?</h3>
159+
<ul>
160+
<li>Press the <strong>+</strong> button to increase the count.</li>
161+
<li>Press the <strong>-</strong> button to decrease the count.</li>
162+
<li>Use your keyboard's <strong>arrow keys</strong> or <strong>+ / -</strong> keys as shortcuts.</li>
163+
<li>Enjoy smooth animations and visual feedback for every tap.</li>
164+
</ul>
165+
166+
<h3>Why use this online counter?</h3>
167+
<ul>
168+
<li><strong>Mobile-friendly:</strong> Optimized for all screen sizes with a modern, app-like interface.</li>
169+
<li><strong>Fast and lightweight:</strong> Loads instantly without distractions.</li>
170+
<li><strong>Free and private:</strong> No tracking, no account needed, and no saved data.</li>
171+
<li><strong>Useful anywhere:</strong> Great for workouts, inventory counts, classroom activities, and more.</li>
172+
</ul>
173+
174+
<h3>Can I use this counter offline?</h3>
175+
<p>Currently, this tool works best with an internet connection. For offline support, consider bookmarking the page or installing it as a PWA in a future update.</p>
176+
</footer>
177+
178+
<script>
179+
const counterEl = document.getElementById('counter');
180+
const plusBtn = document.getElementById('plus');
181+
const minusBtn = document.getElementById('minus');
182+
183+
let count = 0;
184+
185+
function updateCounter(value) {
186+
count += value;
187+
counterEl.textContent = count;
188+
counterEl.classList.add('animate');
189+
setTimeout(() => counterEl.classList.remove('animate'), 200);
190+
}
191+
192+
function createRipple(e, button) {
193+
const ripple = document.createElement('span');
194+
const rect = button.getBoundingClientRect();
195+
const size = Math.max(button.clientWidth, button.clientHeight);
196+
ripple.className = 'ripple';
197+
ripple.style.width = ripple.style.height = size + 'px';
198+
ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
199+
ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
200+
button.appendChild(ripple);
201+
setTimeout(() => ripple.remove(), 600);
202+
}
203+
204+
plusBtn.addEventListener('click', (e) => {
205+
updateCounter(1);
206+
createRipple(e, plusBtn);
207+
});
208+
209+
minusBtn.addEventListener('click', (e) => {
210+
updateCounter(-1);
211+
createRipple(e, minusBtn);
212+
});
213+
214+
document.addEventListener('keydown', (e) => {
215+
if (e.key === '+' || e.key === '=' || e.key === 'ArrowUp') {
216+
updateCounter(1);
217+
} else if (e.key === '-' || e.key === 'ArrowDown') {
218+
updateCounter(-1);
219+
}
220+
});
221+
222+
let lastTouch = 0;
223+
document.addEventListener('touchend', (e) => {
224+
const now = new Date().getTime();
225+
if (now - lastTouch <= 300) {
226+
e.preventDefault();
227+
}
228+
lastTouch = now;
229+
}, { passive: false });
230+
</script>
231+
</body>
232+
</html>

0 commit comments

Comments
 (0)