Add Telegram Mini App (web UI + API server + localtunnel)

- server.py: aiohttp API serving webapp/ and REST endpoints using existing db.py
- start.py: orchestrator that loads token, starts server + localtunnel + bot
- webapp/: Mini App frontend (Log, History, Stats) with Telegram-native theming
- bot.py: added Mini App menu button and inline button on /start
- flake.nix: added aiohttp + localtunnel, nix run now uses start.py
This commit is contained in:
Danny 2026-03-24 20:17:36 +01:00
parent 817cf8fd95
commit f025e5fd19
7 changed files with 1007 additions and 12 deletions

55
webapp/index.html Normal file
View file

@ -0,0 +1,55 @@
<!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">
<nav id="tabs">
<button class="tab active" data-view="log">Log</button>
<button class="tab" data-view="history">History</button>
<button class="tab" data-view="stats">Stats</button>
</nav>
<!-- ═══ LOG VIEW ═══ -->
<div id="view-log" class="view active">
<div class="card" id="text-input-card">
<textarea id="inp-raw" class="input" rows="6"
placeholder="Bench press: 4x8x35&#10;Lateral raise: 4x8x4&#10;&#10;Squats: 5x5x30"></textarea>
<div class="hint">Same format as the bot. Blank line = new group. Consecutive lines = superset.</div>
<button id="btn-save" class="btn btn-primary">Save Workout</button>
</div>
<!-- Quick-add from history -->
<div id="suggestions" style="display:none">
<div class="section-label">Recent exercises</div>
<div id="suggestion-chips"></div>
</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>
<button id="btn-load-more" class="btn btn-secondary" style="display:none">Load more</button>
</div>
<!-- ═══ STATS VIEW ═══ -->
<div id="view-stats" class="view">
<div id="stats-content" class="empty-state">
<div class="empty-icon">📊</div>
<p>Loading…</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>