Initial commit

app/templates/leaderboard.html

@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+{% block title %}Leaderboard — WeightTracker{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <h1>🏆 Leaderboard</h1>
+    <p>Ranked by % body weight lost. May the best loser win!</p>
+</div>
+
+<!-- Comparison Chart -->
+<div class="card" style="margin-bottom: 1.5rem;">
+    <div class="card-header">
+        <h2>📊 % Weight Lost Comparison</h2>
+    </div>
+    <div class="chart-container">
+        <canvas id="comparisonChart"></canvas>
+    </div>
+</div>
+
+<!-- Leaderboard Table -->
+<div class="card">
+    {% if ranked %}
+    <div class="table-wrap">
+        <table>
+            <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Name</th>
+                    <th>Start</th>
+                    <th>Current</th>
+                    <th>Lost (kg)</th>
+                    <th>Lost (%)</th>
+                    <th>Goal Progress</th>
+                    <th>Check-ins</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for u in ranked %}
+                <tr>
+                    <td>
+                        <span
+                            class="rank-badge {{ 'rank-1' if loop.index == 1 else 'rank-2' if loop.index == 2 else 'rank-3' if loop.index == 3 else 'rank-other' }}">
+                            {{ loop.index }}
+                        </span>
+                    </td>
+                    <td style="font-weight: 600; color: var(--text-primary);">{{ u.display_name or u.username }}</td>
+                    <td>{{ '%.1f' % (u.starting_weight_kg | float) if u.starting_weight_kg else '—' }}</td>
+                    <td>{{ '%.1f' % (u.current_weight | float) if u.current_weight else '—' }}</td>
+                    <td>
+                        <span
+                            style="color: {{ 'var(--success)' if u.weight_lost > 0 else 'var(--danger)' if u.weight_lost < 0 else 'var(--text-muted)' }}; font-weight: 600;">
+                            {{ '%+.1f' % (-u.weight_lost) if u.weight_lost != 0 else '0.0' }}
+                        </span>
+                    </td>
+                    <td>
+                        <span
+                            style="color: {{ 'var(--success)' if u.pct_lost > 0 else 'var(--danger)' if u.pct_lost < 0 else 'var(--text-muted)' }}; font-weight: 700;">
+                            {{ '%.1f' % u.pct_lost }}%
+                        </span>
+                    </td>
+                    <td>
+                        {% if u.goal_progress is not none %}
+                        <div style="display: flex; align-items: center; gap: 0.5rem;">
+                            <div class="progress-bar-track" style="flex: 1;">
+                                <div class="progress-bar-fill" style="width: {{ u.goal_progress }}%;"></div>
+                            </div>
+                            <span style="font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;">{{ '%.0f' %
+                                u.goal_progress }}%</span>
+                        </div>
+                        {% else %}
+                        <span style="color: var(--text-muted);">—</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ u.total_checkins }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-state-icon">🏆</div>
+        <h3>No competitors yet</h3>
+        <p>Start checking in to appear on the leaderboard!</p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        fetch('/api/comparison')
+            .then(r => r.json())
+            .then(data => {
+                if (data.names.length > 0) {
+                    createComparisonChart('comparisonChart', data.names, data.pct_lost);
+                }
+            });
+    });
+</script>
+{% endblock %}