perfect-pace/index.html at main · daniel-lee-user/perfect-pace · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPX Map</title>
    <!-- ensure integrity of imported libraries by using SHA-256 hash-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.elevation@0.0.3/dist/Leaflet.Elevation-0.0.2.css"
        integrity="sha384-jONMdyFYBZ+QzYQp+gGJSDkmD6Yi1ca1xk2/7/KRJXNF5JXQRBs9FPeY3ovbbxXF" crossorigin="anonymous">
    <link rel="stylesheet" href="src/styles2.css" />
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"
        integrity="sha384-+mbV2IY1Zk/X1p/nWllGySJSUN8uMs+gUAN10Or95UBH0fpj6GfKgPmgC5EXieXG"
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous"></script>
    <script src="https://d3js.org/d3.v3.min.js"
        integrity="sha384-N8EP0Yml0jN7e0DcXlZ6rt+iqKU9Ck6f1ZQ+j2puxatnBq4k9E8Q6vqBcY34LNbn"
        crossorigin="anonymous"></script>
    <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"
        integrity="sha384-qhsiITse/qx9/hyk3zeRbeTDEY+UNlaJoJyxV2JWlaLiXMjwZ1BP7nmri1/EyzLV"
        crossorigin="anonymous"></script>
    <script type="module" src="src/reloadscript.js" defer></script>
    <script type="module" src="src/mapscript.js" defer></script>
    <script type="module" src="src/elevationgraph2.js"></script>
</head>

<body>
    <div class="container">
        <div id="table-container">
            <div id="course-info-widget">
                <h3>Course Information</h3>
                <ul>
                    <li>Course Name: <span id="course-name">N/A</span></li>
                    <li>Total Distance: <span id="total-distance">0 mi</span></li>
                    <li>Elevation Change: <span id="elevation-change">0 ft</span></li>
                    <li>Goal Time: <span id="goal-time">00:00:00</span></li>
                </ul>
                <div>
                    <label for="segment-select-widget">Segment Method:</label>
                    <select id="segment-select-widget">
                        <option value="HILL">Hill Detection</option>
                        <option value="APPM">Per Mile</option>
                        <option value="APPKM">Per Kilometer</option>
                        <option value="AP">No Segments</option>
                        <option value="CUSTOM">Custom Segments</option>
                    </select>
                </div>
            </div>
            <h3>
                <span id="table-label">Segment Data</span>
                <select id="segment-select" class="segment-select">
                    <option value="segments">Segments</option>
                    <option value="miles">Miles/Kilometers</option>
                </select>
                <select id="unit-select" class="unit-select">
                    <option value="imperial">Imperial</option>
                    <option value="metric">Metric</option>
                </select>
            </h3>
            <div id="table-wrapper">
                <table id="data-table" border="1">
                    <tr>
                        <th>Segment</th>
                        <th>Start Distance</th>
                        <th>Pace</th>
                        <th>Segment Length</th>
                    </tr>
                </table>
            </div>
            <button id="clearButton" class="clear-button">Clear</button>
        </div>


        <!-- Placeholder box over the map -->
        <div id="paces-change">
            <h3>Upload GPX File</h3>
            <form>
                <div class="form-group">
                    <label for="time">Goal Time:
                        <input type="text" id="time" name="time" placeholder="hh:mm:ss"
                            pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$" required>
                    </label>
                </div>
                <div class="form-group">
                    <label for="gpxFile">Choose GPX file:
                        <input type="file" id="gpxFile" name="gpxFile" accept=".gpx">
                    </label>
                </div>
                <div class="form-group">
                    <button type="submit" onsubmit="return false" class="submit-button" id="submitBtn">Submit</button>
                </div>
            </form>
        </div>

        <div id="loadingScreen">
            <h1>Loading...</h1>
        </div>

        <div id="map"></div>
    </div>
</body>

</html>