|
1 | | -<!-- To run locally using Visual Studio Code, you can use: python -m http.server 8000, and open http://localhost:8000 --> |
2 | | -<!-- It is also possible to emulate a mobile device by means of F12 in the browser and toggle device toolbar --> |
3 | | -<!-- Reminder: Hard refresh (Ctrl + Shift + R on Windows/Linux, Cmd + Shift + R on Mac) forces the browser to re-download all files instead of using cached versions. --> |
4 | 1 | <!DOCTYPE html> |
5 | | -<html> |
| 2 | +<html lang="en"> |
6 | 3 | <head> |
7 | | - <meta name="description" content="Find every group ride in Boulder County on one interactive map, updated twice daily from Strava."> |
| 4 | + <!-- Dev notes: python -m http.server 8000 → http://localhost:8000 |
| 5 | + Mobile emulation: F12 → toggle device toolbar |
| 6 | + Hard refresh: Ctrl+Shift+R (Win/Linux) · Cmd+Shift+R (Mac) --> |
| 7 | + |
| 8 | + <!-- Character encoding --> |
| 9 | + <meta charset="utf-8"> |
| 10 | + |
| 11 | + <!-- Page identity --> |
8 | 12 | <title>Boulder Group Rides – All clubs, one map</title> |
9 | | - <meta charset="utf-8" /> |
| 13 | + <meta name="description" content="Find every group ride in Boulder County on one interactive map, updated twice daily from Strava."> |
| 14 | + |
| 15 | + <!-- Viewport --> |
10 | 16 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
11 | 17 |
|
12 | | - <!-- Progressive Web App (Android) to feel like an app--> |
| 18 | + <!-- Progressive Web App to feel like an app--> |
13 | 19 | <link rel="manifest" href="/manifest.json"> |
14 | | - |
15 | | - <!-- Enable standalone app mode --> |
16 | | - <meta name="mobile-web-app-capable" content="yes"> <!-- Android (legacy) --> |
| 20 | + <meta name="mobile-web-app-capable" content="yes"> <!-- Android --> |
17 | 21 | <meta name="apple-mobile-web-app-capable" content="yes"> <!-- iOS --> |
18 | | - |
19 | | - <!-- App name (iOS home screen) --> |
20 | 22 | <meta name="apple-mobile-web-app-title" content="Boulder Rides"> |
21 | | - |
22 | | - <!-- Status bar --> |
23 | 23 | <meta name="apple-mobile-web-app-status-bar-style" content="default"> |
24 | 24 |
|
25 | 25 | <!-- Favicon --> |
|
150 | 150 | padding: 8px 16px; |
151 | 151 | min-width: 72px; /* Forces "More" to match "Metric" width */ |
152 | 152 | font-size: 0.9em; |
153 | | - font-family: Arial, sans-serif; |
154 | 153 | font-weight: bold; |
155 | 154 | cursor: pointer; |
156 | 155 | box-shadow: 0 2px 8px rgba(0,0,0,0.25); |
|
170 | 169 | padding: 8px 16px; |
171 | 170 | min-width: 72px; /* Matches "More" button width */ |
172 | 171 | font-size: 0.9em; |
173 | | - font-family: Arial, sans-serif; |
174 | 172 | font-weight: bold; |
175 | 173 | cursor: pointer; |
176 | 174 | box-shadow: 0 2px 8px rgba(0,0,0,0.25); |
|
215 | 213 | border-radius: 20px; |
216 | 214 | padding: 7px 16px; |
217 | 215 | font-size: 0.9em; |
218 | | - font-family: Arial, sans-serif; |
219 | 216 | font-weight: bold; |
220 | 217 | cursor: pointer; |
221 | 218 | box-shadow: 0 2px 8px rgba(0,0,0,0.2); |
@@ -780,8 +777,14 @@ <h2>Contact & support</h2> |
780 | 777 | }); |
781 | 778 | }); |
782 | 779 |
|
783 | | - // Palette of colors (will cycle if more routes in a day than colors) |
784 | | - const colors = ['blue', 'red', 'green', 'black', 'brown', '#ff7f0e', 'purple']; |
| 780 | + // Palette of colors for regular rides (will cycle if more routes in a day than colors) |
| 781 | + const colors = ['blue', 'red', 'green', 'black', 'brown', '#ff7f0e']; |
| 782 | + // Nicer colors to consider in the future: |
| 783 | + //const colors = ['#1E88E5','#E53935','#43A047','#FB8C00','#8E24AA','#6D4C41','#D81B60']; |
| 784 | + // Purple shades for women-only rides (cycles if more than 3): |
| 785 | + const womenColors = ['#6F42C1 ', '#AB47BC', '#8A63D2']; |
| 786 | + let womenIdx = 0; |
| 787 | + let regularIdx = 0; |
785 | 788 |
|
786 | 789 | // Collect all polylines |
787 | 790 | const fg = L.featureGroup().addTo(map); |
@@ -820,7 +823,9 @@ <h2>Contact & support</h2> |
820 | 823 |
|
821 | 824 | routes.forEach((ride, idx) => { |
822 | 825 | if (ride.route && ride.route.length > 0) { |
823 | | - const color = colors[idx % colors.length]; // cycle colors if more routes than colors |
| 826 | + const color = ride.women_only |
| 827 | + ? womenColors[womenIdx++ % womenColors.length] |
| 828 | + : colors[regularIdx++ % colors.length]; |
824 | 829 | ride.color = color; // store so openSheet can use it |
825 | 830 | const rideTime = formatTime12h(ride.date.split(" ")[1]); // convert time to 12-hour format (AM/PM) |
826 | 831 |
|
|
0 commit comments