Skip to content

Commit d20527d

Browse files
ToniBloney23ToniBloney23
authored
Update index.html
1 parent a3140c6 commit d20527d

File tree

1 file changed

+71
-31
lines changed

1 file changed

+71
-31
lines changed

‎index.html‎

Lines changed: 71 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,79 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>Wall Ball Rep Tracker</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
710
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
811
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
912
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
1013
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
1114
<style>
1215
body {
13-
background: #121212;
14-
color: #fff;
15-
text-align: center;
16-
font-family: sans-serif;
16+
background: #1a1a1a;
17+
color: #f0f0f0;
18+
font-family: 'Roboto', sans-serif;
1719
margin: 0;
18-
padding: 1rem;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
min-height: 100vh;
1925
}
2026
h1 {
21-
margin-bottom: 1rem;
27+
margin-bottom: 0.5rem;
28+
font-size: 2.5rem;
29+
color: #4CAF50;
30+
}
31+
p {
32+
margin-bottom: 2rem;
33+
font-size: 1.1rem;
34+
color: #ccc;
2235
}
2336
#reps-container {
24-
font-size: 2.5rem;
25-
margin-bottom: 1rem;
37+
font-size: 3rem;
38+
margin-bottom: 1.5rem;
2639
display: flex;
2740
justify-content: center;
2841
align-items: center;
29-
gap: 1rem;
42+
gap: 1.5rem;
43+
background: #2c2c2c;
44+
padding: 1rem 2rem;
45+
border-radius: 10px;
46+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
3047
}
31-
#reset-button {
32-
font-size: 1.2rem;
33-
padding: 0.5rem 1rem;
34-
background: #FF5722;
48+
#reset-button, #view-toggle {
49+
font-size: 1rem;
50+
padding: 0.6rem 1.2rem;
3551
border: none;
3652
border-radius: 5px;
3753
color: white;
3854
cursor: pointer;
39-
transition: background 0.3s;
55+
transition: background-color 0.3s, transform 0.2s;
56+
text-transform: uppercase;
57+
letter-spacing: 1px;
58+
}
59+
60+
#reset-button {
61+
background: #f44336;
4062
}
63+
4164
#reset-button:hover {
42-
background: #F4511E;
65+
background: #d32f2f;
66+
transform: translateY(-2px);
67+
}
68+
69+
#controls-container {
70+
margin-top: 1.5rem;
71+
}
72+
73+
#view-toggle {
74+
background: #2196F3;
75+
}
76+
77+
#view-toggle:hover {
78+
background: #1976D2;
79+
transform: translateY(-2px);
4380
}
4481
.retry-button {
4582
font-size: 1rem;
@@ -63,26 +100,29 @@
63100
width: 640px;
64101
height: 480px;
65102
border-radius: 10px;
66-
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
103+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
67104
display: block;
68-
margin: 0 auto;
105+
margin: 1rem auto;
69106
}
70107
</style>
71108
</head>
72109
<body>
73-
<h1>Wall Ball Rep Tracker (Chrome)</h1>
74-
<div id="controls-container" style="margin-bottom: 1rem;">
75-
<button id="view-toggle" style="margin-left: 1rem; padding: 0.5rem; background: #333; color: white; border: 1px solid #555; border-radius: 5px; cursor: pointer;">Show Dots</button>
76-
</div>
77-
<div id="reps-container">
78-
<div id="reps">Reps: 0</div>
79-
<button id="reset-button" onclick="resetReps()">Reset</button>
80-
</div>
81-
<div id="camera-status" style="display: none; margin: 1rem auto; padding: 1rem; background: rgba(0,0,0,0.7); border-radius: 5px; max-width: 400px;">
82-
Requesting camera access...
110+
<div class="container">
111+
<h1>Wall Ball Rep Tracker</h1>
112+
<p>Use your camera to count your wall ball reps automatically.</p>
113+
<div id="reps-container">
114+
<div id="reps">Reps: 0</div>
115+
<button id="reset-button" onclick="resetReps()">Reset</button>
116+
</div>
117+
<canvas id="canvas"></canvas>
118+
<div id="controls-container">
119+
<button id="view-toggle">Show Dots</button>
120+
</div>
121+
<div id="camera-status" style="display: none; margin: 1rem auto; padding: 1rem; background: rgba(0,0,0,0.7); border-radius: 5px; max-width: 400px;">
122+
Requesting camera access...
123+
</div>
124+
<video id="video" autoplay playsinline muted style="display: none;"></video>
83125
</div>
84-
<video id="video" autoplay playsinline muted style="display: none;"></video>
85-
<canvas id="canvas"></canvas>
86126
<audio id="rep-sound" src="https://actions.google.com/sounds/v1/sports/tennis_ball_hit_bounce.ogg"></audio>
87127

88128
<script>
@@ -188,10 +228,10 @@ <h1>Wall Ball Rep Tracker (Chrome)</h1>
188228
}
189229
const distance = Math.abs(wrist.y - shoulder.y);
190230

191-
if (distance < 50) { // Hand is up
231+
if (distance < 70) { // Hand is up
192232
stage = 'up';
193233
}
194-
if (distance > 100 && stage === 'up') { // Hand is down
234+
if (distance > 120 && stage === 'up') { // Hand is down
195235
stage = 'down';
196236
reps++;
197237
document.getElementById('reps').textContent = `Reps: ${reps}`;

0 commit comments

Comments
 (0)