260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Training Tracker</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1 class="header-title">Training Tracker</h1>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Dashboard View -->
|
|
<section id="view-dashboard" class="view active">
|
|
<h2>Dashboard</h2>
|
|
<div class="quick-actions">
|
|
<button class="btn btn-primary btn-large" onclick="app.startNewSession()">
|
|
Start New Session
|
|
</button>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Recent Sessions</h3>
|
|
<div id="recent-sessions" class="card-list">
|
|
<p class="empty-state">No sessions yet</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sessions View -->
|
|
<section id="view-sessions" class="view">
|
|
<div class="view-header">
|
|
<h2>Sessions</h2>
|
|
<button class="btn btn-primary" onclick="app.startNewSession()">New</button>
|
|
</div>
|
|
<div id="sessions-list" class="card-list">
|
|
<p class="empty-state">No sessions yet</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Session Detail View -->
|
|
<section id="view-session-detail" class="view">
|
|
<div class="view-header">
|
|
<button class="btn btn-text" onclick="app.navigateTo('sessions')">Back</button>
|
|
<h2 id="session-detail-title">Session</h2>
|
|
</div>
|
|
<div id="session-detail-content"></div>
|
|
</section>
|
|
|
|
<!-- Log Session View -->
|
|
<section id="view-log-session" class="view">
|
|
<div class="view-header">
|
|
<button class="btn btn-text" onclick="app.navigateTo('sessions')">Cancel</button>
|
|
<h2>Log Session</h2>
|
|
</div>
|
|
<form id="session-form" class="form">
|
|
<div class="form-group">
|
|
<label for="session-date">Date</label>
|
|
<input type="datetime-local" id="session-date" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="session-plan">Training Plan (Optional)</label>
|
|
<select id="session-plan">
|
|
<option value="">No plan</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="session-notes">Notes</label>
|
|
<textarea id="session-notes" rows="3" placeholder="How did it go?"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">Create Session</button>
|
|
</form>
|
|
|
|
<div id="session-entries-section" class="section hidden">
|
|
<h3>Exercises</h3>
|
|
<div id="session-entries" class="card-list"></div>
|
|
<button class="btn btn-secondary" onclick="app.showAddEntryForm()">Add Exercise</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Add Entry Modal -->
|
|
<div id="add-entry-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Add Exercise Entry</h3>
|
|
<button class="btn btn-text" onclick="app.hideAddEntryForm()">Cancel</button>
|
|
</div>
|
|
<form id="entry-form" class="form">
|
|
<div class="form-group">
|
|
<label for="entry-exercise">Exercise</label>
|
|
<select id="entry-exercise" required></select>
|
|
</div>
|
|
<div id="strength-fields">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="entry-weight">Weight (kg)</label>
|
|
<input type="number" id="entry-weight" step="0.5" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="entry-sets">Sets</label>
|
|
<input type="number" id="entry-sets" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="entry-reps">Reps</label>
|
|
<input type="number" id="entry-reps" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cardio-fields" class="hidden">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="entry-duration">Duration (min)</label>
|
|
<input type="number" id="entry-duration" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="entry-distance">Distance (km)</label>
|
|
<input type="number" id="entry-distance" step="0.1" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="entry-hr">Avg Heart Rate</label>
|
|
<input type="number" id="entry-hr" min="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="entry-notes">Notes</label>
|
|
<input type="text" id="entry-notes" placeholder="Optional notes">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">Add Entry</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Exercises View -->
|
|
<section id="view-exercises" class="view">
|
|
<div class="view-header">
|
|
<h2>Exercises</h2>
|
|
<button class="btn btn-primary" onclick="app.showExerciseForm()">Add</button>
|
|
</div>
|
|
<div class="tabs">
|
|
<button class="tab active" data-filter="all">All</button>
|
|
<button class="tab" data-filter="strength">Strength</button>
|
|
<button class="tab" data-filter="cardio">Cardio</button>
|
|
</div>
|
|
<div id="exercises-list" class="card-list">
|
|
<p class="empty-state">No exercises yet</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Exercise Form Modal -->
|
|
<div id="exercise-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="exercise-modal-title">Add Exercise</h3>
|
|
<button class="btn btn-text" onclick="app.hideExerciseForm()">Cancel</button>
|
|
</div>
|
|
<form id="exercise-form" class="form">
|
|
<input type="hidden" id="exercise-id">
|
|
<div class="form-group">
|
|
<label for="exercise-name">Name</label>
|
|
<input type="text" id="exercise-name" required placeholder="e.g., Bench Press">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exercise-type">Type</label>
|
|
<select id="exercise-type" required>
|
|
<option value="strength">Strength</option>
|
|
<option value="cardio">Cardio</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exercise-muscle">Muscle Group</label>
|
|
<input type="text" id="exercise-muscle" placeholder="e.g., Chest">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exercise-description">Description</label>
|
|
<textarea id="exercise-description" rows="2" placeholder="Optional description"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">Save Exercise</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plans View -->
|
|
<section id="view-plans" class="view">
|
|
<div class="view-header">
|
|
<h2>Training Plans</h2>
|
|
<button class="btn btn-primary" onclick="app.showPlanForm()">Add</button>
|
|
</div>
|
|
<div id="plans-list" class="card-list">
|
|
<p class="empty-state">No plans yet</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Plan Form Modal -->
|
|
<div id="plan-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="plan-modal-title">Add Training Plan</h3>
|
|
<button class="btn btn-text" onclick="app.hidePlanForm()">Cancel</button>
|
|
</div>
|
|
<form id="plan-form" class="form">
|
|
<input type="hidden" id="plan-id">
|
|
<div class="form-group">
|
|
<label for="plan-name">Name</label>
|
|
<input type="text" id="plan-name" required placeholder="e.g., Push Day">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="plan-description">Description</label>
|
|
<textarea id="plan-description" rows="2" placeholder="Optional description"></textarea>
|
|
</div>
|
|
<div class="section">
|
|
<h4>Exercises</h4>
|
|
<div id="plan-exercises-list"></div>
|
|
<button type="button" class="btn btn-secondary" onclick="app.addPlanExercise()">Add Exercise</button>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">Save Plan</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Detail View -->
|
|
<section id="view-plan-detail" class="view">
|
|
<div class="view-header">
|
|
<button class="btn btn-text" onclick="app.navigateTo('plans')">Back</button>
|
|
<h2 id="plan-detail-title">Plan</h2>
|
|
</div>
|
|
<div id="plan-detail-content"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<nav class="bottom-nav">
|
|
<button class="nav-item active" data-view="dashboard">
|
|
<span class="nav-icon">🏠</span>
|
|
<span class="nav-label">Home</span>
|
|
</button>
|
|
<button class="nav-item" data-view="sessions">
|
|
<span class="nav-icon">📝</span>
|
|
<span class="nav-label">Sessions</span>
|
|
</button>
|
|
<button class="nav-item" data-view="exercises">
|
|
<span class="nav-icon">💪</span>
|
|
<span class="nav-label">Exercises</span>
|
|
</button>
|
|
<button class="nav-item" data-view="plans">
|
|
<span class="nav-icon">📋</span>
|
|
<span class="nav-label">Plans</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<script src="js/api.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|