ae09ab2eec
Telegram workout tracker bot with Mini App web UI, SQLite database, API server, and cloudflared tunnel support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
|
<title>Workout Tracker</title>
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Navigation tabs -->
|
|
<nav id="tabs">
|
|
<button class="tab active" data-view="workout">Workout</button>
|
|
<button class="tab" data-view="exercises">Exercises</button>
|
|
<button class="tab" data-view="history">History</button>
|
|
</nav>
|
|
|
|
<!-- ═══ WORKOUT VIEW ═══ -->
|
|
<div id="view-workout" class="view active">
|
|
<!-- No active workout state -->
|
|
<div id="no-workout">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🏋️</div>
|
|
<p>No active workout</p>
|
|
<button id="btn-start-workout" class="btn btn-primary">Start Workout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active workout state -->
|
|
<div id="active-workout" style="display:none">
|
|
<div class="workout-header">
|
|
<span id="workout-timer">00:00</span>
|
|
<button id="btn-finish-workout" class="btn btn-danger btn-sm">Finish</button>
|
|
</div>
|
|
|
|
<!-- Add set form -->
|
|
<div class="card" id="add-set-card">
|
|
<select id="sel-exercise" class="input">
|
|
<option value="">Select exercise…</option>
|
|
</select>
|
|
<div class="set-inputs">
|
|
<div class="input-group">
|
|
<label>Reps</label>
|
|
<input type="number" id="inp-reps" class="input" min="1" value="10" inputmode="numeric" />
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Weight (kg)</label>
|
|
<input type="number" id="inp-weight" class="input" min="0" step="0.5" value="20" inputmode="decimal" />
|
|
</div>
|
|
</div>
|
|
<button id="btn-add-set" class="btn btn-primary">Log Set</button>
|
|
</div>
|
|
|
|
<!-- Logged sets list -->
|
|
<div id="sets-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ EXERCISES VIEW ═══ -->
|
|
<div id="view-exercises" class="view">
|
|
<div class="card">
|
|
<div class="add-exercise-row">
|
|
<input type="text" id="inp-exercise-name" class="input" placeholder="New exercise name…" />
|
|
<button id="btn-add-exercise" class="btn btn-primary btn-sm">Add</button>
|
|
</div>
|
|
</div>
|
|
<div id="exercises-list"></div>
|
|
</div>
|
|
|
|
<!-- ═══ HISTORY VIEW ═══ -->
|
|
<div id="view-history" class="view">
|
|
<div id="history-list"></div>
|
|
<div id="no-history" class="empty-state">
|
|
<div class="empty-icon">📋</div>
|
|
<p>No workouts yet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|