-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (117 loc) · 5.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Running Pace Chart</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- container for pace estimation -->
<div class="container">
<div class="header-container">
<h1>Run Pace Estimator</h1>
<p>Estimate your running paces based on your race distance and time.</p>
</div>
<br>
<div class="column-wrapper">
<!-- Column 1: Select Race Distance -->
<div class="estimator-distance-select same-width">
<h2>
<span class="step-number">1</span>
<span class="step-title">Select Your Race Distance</span>
</h2>
<br>
<div class="estimator-distance-select-group">
<div class="distance-option">
<input type="radio" id="distance-5k" name="distance" value="5k">
<label for="distance-5k">5K</label>
</div>
<div class="distance-option">
<input type="radio" id="distance-10k" name="distance" value="10k">
<label for="distance-10k">10K</label>
</div>
<div class="distance-option">
<input type="radio" id="distance-half" name="distance" value="half">
<label for="distance-half">Half Marathon</label>
</div>
<div class="distance-option">
<input type="radio" id="distance-full" name="distance" value="full">
<label for="distance-full">Full Marathon</label>
</div>
</div>
</div>
<!-- Column 2: Enter Recent Finish Time -->
<div class="estimator-race-input same-width">
<h2>
<span class="step-number">2</span>
<span class="step-title">Enter Your Recent Finish Time</span>
</h2>
<br>
<div class="estimator-race-input-group">
<!-- <label for="race-time">Race Time (hh:mm:ss):</label> -->
<input type="text" id="race-time" placeholder="HH:MM:SS">
<span id="race-time-error" style="color: red; display: none;">Please enter time in hh:mm:ss format (e.g., 01:30:45).</span>
</div>
<br>
<!-- Centering the button with a container -->
<div class="button-container">
<button id="calculate-paces">Calculate Paces</button>
</div>
</div>
<!-- Column 3: Pace Results -->
<div class="estimator-race-results same-width">
<h2>
<span class="step-number">3</span>
<span class="step-title">Estimated Paces</span>
</h2>
<br>
<div id="estimator-race-results-output" class="estimator-race-results">
<p class="result">Estimated VO2 Pace: <span id="vo2-estimate" class="vo2-color"></span></p>
<p class="result">Estimated LT2 Pace: <span id="lt2-estimate" class="lt2-color"></span></p>
<p class="result">Estimated LT1 Pace: <span id="lt1-estimate" class="lt1-color"></span></p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="column-wrapper">
<div class="input-section same-width">
<div class="instructions">
<h2>Enter Running Paces <span class="tooltip">?<span class="tooltiptext">Use the sliders or input boxes to set your VO2, LT1, and LT2 paces. The chart will update automatically.</span></span></h2>
</div>
<div class="input-group">
<label for="vo2Input">VO2 (min:sec):</label>
<input type="text" id="vo2Input" value="3:30">
<input type="range" id="vo2Slider" min="60" max="600" value="210">
</div>
<div class="input-group">
<label for="lt2Input">LT2 (min:sec):</label>
<input type="text" id="lt2Input" value="4:00">
<input type="range" id="lt2Slider" min="60" max="600" value="240">
</div>
<div class="input-group">
<label for="lt1Input">LT1 (min:sec):</label>
<input type="text" id="lt1Input" value="5:00">
<input type="range" id="lt1Slider" min="60" max="600" value="300">
</div>
</div>
<div class="chart-section same-width">
<canvas id="chart" width="600" height="400"></canvas>
</div>
<div class="results-section same-width">
<div class="results">
<h2>Results Summary</h2>
</div>
<div id="results-summary">
<!-- Advice will be inserted here -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</body>
</html>