Skip to content

Commit 79e4193

Browse files
TobiasMue91TobiasMue91
committed
- update push up tool
1 parent 048a4c9 commit 79e4193

File tree

2 files changed

+319
-178
lines changed

2 files changed

+319
-178
lines changed

‎tools/push_ups/app.html‎

Lines changed: 94 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,104 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Push-Up Counter</title>
7-
<script src="https://cdn.tailwindcss.com"></script>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>PushTracker Pro</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
89
</head>
9-
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
10-
<div class="bg-white p-8 rounded-lg shadow-md max-w-md w-full">
11-
<h1 class="text-3xl font-bold mb-6 text-center text-indigo-600">Push-Up Counter</h1>
12-
13-
<div id="videoContainer" class="mb-6">
14-
<video id="video" class="w-full h-64 object-cover rounded-lg" autoplay muted></video>
15-
</div>
16-
17-
<div class="flex justify-between mb-6">
18-
<button id="switchCamera" class="bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition">Switch Camera</button>
19-
<button id="startStop" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Start</button>
20-
</div>
21-
22-
<div id="stats" class="mb-6">
23-
<div class="flex justify-between mb-2">
24-
<span class="font-semibold">Push-ups:</span>
25-
<span id="pushUpCount" class="text-indigo-600 font-bold">0</span>
10+
<body class="bg-gray-50 min-h-screen font-['Inter']">
11+
<div class="container mx-auto px-4 py-6 max-w-lg">
12+
<header class="mb-6 text-center"><h1 class="text-3xl font-bold text-indigo-600">PushTracker Pro</h1>
13+
<p class="text-gray-600">Track your push-ups, earn rewards, get fit.</p></header>
14+
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
15+
<div class="relative">
16+
<video id="video" class="w-full h-64 object-cover" autoplay muted></video>
17+
<div id="pushupFeedback"
18+
class="absolute inset-0 bg-green-500 bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity">
19+
<span class="text-white text-4xl font-bold">+1</span></div>
20+
</div>
21+
<div class="p-4">
22+
<div class="flex justify-between items-center">
23+
<button id="switchCameraBtn"
24+
class="bg-gray-100 text-gray-700 px-3 py-2 rounded-lg font-medium hover:bg-gray-200 transition">
25+
Switch Camera
26+
</button>
27+
<button id="calibrateBtn"
28+
class="bg-indigo-100 text-indigo-700 px-3 py-2 rounded-lg font-medium hover:bg-indigo-200 transition">
29+
Calibrate
30+
</button>
31+
<button id="startStopBtn"
32+
class="bg-green-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-green-600 transition">
33+
Start
34+
</button>
35+
</div>
36+
</div>
2637
</div>
27-
<div class="flex justify-between">
28-
<span class="font-semibold">Tokens:</span>
29-
<span id="tokenCount" class="text-indigo-600 font-bold">0</span>
38+
<div class="bg-white rounded-lg shadow-md p-5 mb-6">
39+
<div class="flex justify-between items-center mb-4">
40+
<div class="text-center"><p class="text-sm text-gray-500">Push-ups</p>
41+
<p id="pushUpCount" class="text-3xl font-bold text-indigo-600">0</p></div>
42+
<div class="text-center"><p class="text-sm text-gray-500">Tokens</p>
43+
<p id="tokenCount" class="text-3xl font-bold text-indigo-600">0</p></div>
44+
<div class="text-center"><p class="text-sm text-gray-500">Streak</p>
45+
<p id="streakCount" class="text-3xl font-bold text-indigo-600">0</p></div>
46+
</div>
47+
<div>
48+
<div class="flex justify-between items-center mb-1"><span class="text-sm text-gray-600">Progress to next token</span><span
49+
id="progressText" class="text-sm text-gray-600">0/10</span></div>
50+
<div class="w-full bg-gray-200 rounded-full h-2">
51+
<div id="progressBar" class="bg-indigo-600 h-2 rounded-full" style="width: 0%"></div>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="bg-white rounded-lg shadow-md p-5 mb-6"><h2 class="text-lg font-semibold text-gray-800 mb-4">
56+
Settings</h2>
57+
<div class="space-y-4">
58+
<div><label for="pushUpsPerToken" class="block text-sm font-medium text-gray-700 mb-1">Push-ups per
59+
token</label><input type="number" id="pushUpsPerToken" value="10" min="1"
60+
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
61+
</div>
62+
<div><label for="sensitivitySlider" class="block text-sm font-medium text-gray-700 mb-1">Detection
63+
Sensitivity</label><input type="range" id="sensitivitySlider" min="1" max="20" value="10"
64+
class="w-full"></div>
65+
</div>
66+
</div>
67+
<div class="bg-white rounded-lg shadow-md p-5 mb-6">
68+
<div class="flex justify-between items-center mb-4"><h2 class="text-lg font-semibold text-gray-800">Rewards</h2>
69+
<button id="editRewardsBtn" class="text-indigo-600 font-medium hover:text-indigo-800 transition">Edit
70+
</button>
71+
</div>
72+
<div id="rewardsList" class="space-y-3"></div>
73+
<div id="rewardEditor" class="hidden mt-4 border-t pt-4"><textarea id="rewardJSON" rows="6"
74+
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent mb-3"></textarea>
75+
<div class="flex justify-end">
76+
<button id="cancelEditBtn"
77+
class="mr-2 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
78+
Cancel
79+
</button>
80+
<button id="saveRewardsBtn"
81+
class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Save
82+
</button>
83+
</div>
84+
</div>
85+
</div>
86+
<div class="bg-white rounded-lg shadow-md p-5">
87+
<details>
88+
<summary class="text-lg font-semibold text-gray-800 cursor-pointer">How to use</summary>
89+
<div class="mt-3 text-gray-600">
90+
<ol class="list-decimal pl-5 space-y-2">
91+
<li>Position your device so the camera can see you during push-ups</li>
92+
<li>Press "Calibrate" and do a test push-up for optimal detection</li>
93+
<li>Hit "Start" and begin your workout</li>
94+
<li>For every <span id="pushUpsPerTokenInHelp">10</span> push-ups, you'll earn 1 token</li>
95+
<li>Use tokens to redeem rewards you've set up</li>
96+
</ol>
97+
<p class="mt-2">For best results, ensure good lighting and position your device at an angle where your
98+
up/down movement is clearly visible.</p></div>
99+
</details>
30100
</div>
31-
</div>
32-
33-
<div class="mb-6">
34-
<label for="pushUpsPerToken" class="block mb-2 font-semibold">Push-ups per token:</label>
35-
<input type="number" id="pushUpsPerToken" value="10" min="1" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
36-
</div>
37-
38-
<div class="mb-6">
39-
<h3 class="text-xl font-semibold mb-2">Rewards:</h3>
40-
<button id="editRewards" class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 transition mb-4">Edit Rewards</button>
41-
<div id="rewards" class="space-y-4"></div>
42-
</div>
43-
44-
<div id="rewardEditor" class="hidden mb-6">
45-
<textarea id="rewardJSON" rows="10" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-2"></textarea>
46-
<button id="saveRewards" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">Save Rewards</button>
47-
</div>
48101
</div>
49-
50102
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
51103
<script src="app.js"></script>
52104
</body>

0 commit comments

Comments
 (0)