-
+
+
-
+
158
? 'flex-col'
: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-t-md"
type="single"
@@ -564,7 +570,7 @@
158
? 'flex-col'
: 'flex-row'} flex-wrap gap-0 min-h-0 content-center border rounded-b-md -mt-[1px]"
type="multiple"
@@ -574,7 +580,7 @@
diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte
index b4fb984a..fa59c1d9 100644
--- a/website/src/lib/components/GPXStatistics.svelte
+++ b/website/src/lib/components/GPXStatistics.svelte
@@ -3,15 +3,17 @@
import Tooltip from '$lib/components/Tooltip.svelte';
import WithUnits from '$lib/components/WithUnits.svelte';
- import { gpxStatistics, slicedGPXStatistics } from '$lib/stores';
- import { settings } from '$lib/db';
-
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
import { _ } from 'svelte-i18n';
import type { GPXStatistics } from 'gpx';
+ import type { Writable } from 'svelte/store';
- const { velocityUnits, elevationProfile, bottomPanelSize } = settings;
+ export let gpxStatistics: Writable;
+ export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
+ export let velocityUnits: 'speed' | 'pace';
+ export let orientation: 'horizontal' | 'vertical';
+ export let panelSize: number;
let statistics: GPXStatistics;
@@ -23,14 +25,14 @@
@@ -48,8 +50,8 @@
{$_('quantities.elevation')}
- {#if $bottomPanelSize > 120 || !$elevationProfile}
-
+ {#if panelSize > 120 || orientation === 'horizontal'}
+
{/if}
- {#if $bottomPanelSize > 160 || !$elevationProfile}
-
+ {#if panelSize > 160 || orientation === 'horizontal'}
+
-
+
diff --git a/website/src/lib/components/docs/DocsLoader.svelte b/website/src/lib/components/docs/DocsLoader.svelte
index 39054a74..8eaeee44 100644
--- a/website/src/lib/components/docs/DocsLoader.svelte
+++ b/website/src/lib/components/docs/DocsLoader.svelte
@@ -15,7 +15,7 @@
{#if module !== undefined}
-
+
('additionalDatasets', []),
+ elevationFill: dexieSettingStore<'slope' | 'surface' | undefined>('elevationFill', undefined),
verticalFileView: dexieSettingStore('fileView', false),
mode: dexieSettingStore('mode', (() => {
let currentMode: string | undefined = get(mode);
diff --git a/website/src/lib/docs/en/about/funding.md b/website/src/lib/docs/en/about/funding.md
index 3dbd30f7..f79e6c8d 100644
--- a/website/src/lib/docs/en/about/funding.md
+++ b/website/src/lib/docs/en/about/funding.md
@@ -1,7 +1,7 @@
# Help keep the website free (and ad-free) 🙏
-Each time you add or move a track point, we make a request to our servers to retrieve a route on the road network.
-We also rely on APIs from [Mapbox](https://mapbox.com) to load beautiful maps, retrieve elevation data and process geocoding requests (looking for a place in the search bar).
+Each time you add or move GPS points, we make a request to our servers to retrieve a route on the road network.
+We also rely on APIs from Mapbox to load beautiful maps, retrieve elevation data and process geocoding requests (looking for a place in the search bar).
Unfortunately this is very costly so if you like the tool and use it frequently, please consider making even a small donation so that this website can stay **free** and **ad-free**.
Thank you very much for your support! ❤️
\ No newline at end of file
diff --git a/website/src/lib/docs/en/about/mapbox.md b/website/src/lib/docs/en/about/mapbox.md
index 56a37279..22cd3a90 100644
--- a/website/src/lib/docs/en/about/mapbox.md
+++ b/website/src/lib/docs/en/about/mapbox.md
@@ -1,4 +1,5 @@
-[Mapbox](https://mapbox.com) is the company that provides some of the beautiful maps on this website.
-They also develop the [map engine](https://github.com/mapbox/mapbox-gl-js) which powers *gpx.studio*.
-We are incredibly lucky and grateful to have joined their [Community](https://www.mapbox.com/community) program, which supports nonprofits, educational institutions, and positive impact organizations.
+Mapbox is the company that provides some of the beautiful maps on this website.
+They also develop the map engine which powers *gpx.studio*.
+
+We are incredibly lucky and grateful to have joined their Community program, which supports nonprofits, educational institutions, and positive impact organizations.
This means that *gpx.studio* can benefit from Mapbox tools at discounted prices, which greatly contributes to the financial viability of the project and to offering the best possible user experience.
diff --git a/website/src/lib/docs/en/about/maps.md b/website/src/lib/docs/en/about/maps.md
new file mode 100644
index 00000000..44e89834
--- /dev/null
+++ b/website/src/lib/docs/en/about/maps.md
@@ -0,0 +1,3 @@
+# Global and local maps
+
+A large collection of basemaps and overlays to help you craft your next outdoor adventure, or visualize your latest achievement.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/about/plot.md b/website/src/lib/docs/en/about/plot.md
new file mode 100644
index 00000000..a1b33f8f
--- /dev/null
+++ b/website/src/lib/docs/en/about/plot.md
@@ -0,0 +1,3 @@
+# Data visualization
+
+An interactive elevation profile with detailed statistics to analyze recorded activities and future objectives.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/about/routing.md b/website/src/lib/docs/en/about/routing.md
new file mode 100644
index 00000000..0170c2af
--- /dev/null
+++ b/website/src/lib/docs/en/about/routing.md
@@ -0,0 +1,3 @@
+# Route planning
+
+An intuitive interface to create itineraries tailored to each sport, based on OpenStreetMap data.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/about/tools.md b/website/src/lib/docs/en/about/tools.md
new file mode 100644
index 00000000..8865f469
--- /dev/null
+++ b/website/src/lib/docs/en/about/tools.md
@@ -0,0 +1,3 @@
+# Advanced file processing tools
+
+A suite of tools for performing all common file processing tasks, and which can be applied to multiple files at once.
\ No newline at end of file
diff --git a/website/src/lib/docs/en/about/translation.md b/website/src/lib/docs/en/about/translation.md
index 44286bbd..ec5b3ecc 100644
--- a/website/src/lib/docs/en/about/translation.md
+++ b/website/src/lib/docs/en/about/translation.md
@@ -1,6 +1,7 @@
# Translation 🗣
The website is translated by volunteers on a collaborative translation platform.
-You can help complete and improve the translations by joining the [Crowdin project](https://crowdin.com/project/gpxstudio).
+You can help complete and improve the translations by joining the Crowdin project.
[Get in touch](#contact) if you would like to start the translation in a new language.
+
Any help is greatly appreciated!
\ No newline at end of file
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index be74f214..28d64ae9 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -2,7 +2,7 @@
"metadata": {
"app_title": "the online GPX file editor",
"about_title": "about",
- "description": "View, edit and create GPX files online with advanced route planning capabilities, file processing tools and beautiful maps."
+ "description": "View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
},
"menu": {
"new": "New",
diff --git a/website/src/routes/[...language]/about/+page.svelte b/website/src/routes/[...language]/about/+page.svelte
index 348da3f9..33a6fe8a 100644
--- a/website/src/routes/[...language]/about/+page.svelte
+++ b/website/src/routes/[...language]/about/+page.svelte
@@ -3,10 +3,34 @@
import { Button } from '$lib/components/ui/button';
import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
import Logo from '$lib/components/Logo.svelte';
+ import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+ import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+ import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import { languages } from '$lib/languages';
- import { Heart } from 'lucide-svelte';
- import { mode } from 'mode-watcher';
+ import { settings } from '$lib/db';
+ import { BookOpenText, Heart, Map } from 'lucide-svelte';
import { _ } from 'svelte-i18n';
+
+ import { exampleGPXFile } from '$lib/assets/example';
+ import { writable } from 'svelte/store';
+ import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
+ import { currentTool, Tool } from '$lib/stores';
+ import { onDestroy, onMount } from 'svelte';
+
+ let gpxStatistics = writable(exampleGPXFile.getStatistics());
+ let slicedGPXStatistics = writable(undefined);
+ let additionalDatasets = writable(['speed', 'atemp']);
+ let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
+
+ const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+ onMount(() => {
+ currentTool.set(Tool.SCISSORS);
+ });
+
+ onDestroy(() => {
+ currentTool.set(null);
+ });
@@ -27,55 +51,145 @@
{/each}
-
-
{/if}
diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts
index d4746e6c..a51ba00e 100644
--- a/website/src/lib/db.ts
+++ b/website/src/lib/db.ts
@@ -82,9 +82,11 @@ function dexieUninitializedSettingStore(setting: string, initial: any): Writable
export const settings = {
distanceUnits: dexieSettingStore<'metric' | 'imperial'>('distanceUnits', 'metric'),
- velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
- temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
+ velocityUnits: dexieSettingStore<'speed' | 'pace'>('velocityUnits', 'speed'),
+ temperatureUnits: dexieSettingStore<'celsius' | 'fahrenheit'>('temperatureUnits', 'celsius'),
elevationProfile: dexieSettingStore('elevationProfile', true),
+ additionalDatasets: dexieSettingStore
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/website/src/lib/components/toolbar/ToolbarItemMenu.svelte b/website/src/lib/components/toolbar/ToolbarItemMenu.svelte
index d44f5277..2598f53c 100644
--- a/website/src/lib/components/toolbar/ToolbarItemMenu.svelte
+++ b/website/src/lib/components/toolbar/ToolbarItemMenu.svelte
@@ -1,5 +1,6 @@
-{#if $minimizeRoutingMenu}
+{#if minimized}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
@@ -207,9 +209,11 @@
{$_('toolbar.routing.help')}
{/if}
-
+ {#if minimizable}
+
+ {/if}
-
TODO hero section
-
-
TODO show toolbar, advanced route planning and file editing tools
+
+
+
+
+
+ {$_('metadata.app_title')}
+
+ {$_('metadata.description')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
+
-
+
- 
-
- TODO elevation profile (use component?)
-
-
-
- TODO show several squares with different basemaps of the same place
-
- )",
@@ -57,6 +50,9 @@ const config = {
},
fontFamily: {
sans: [...fontFamily.sans]
+ },
+ screens: {
+ "xs": "500px",
}
}
},
-
-
-
-
+
diff --git a/website/static/cyclosm.png b/website/static/cyclosm.png
new file mode 100644
index 00000000..16456c6d
Binary files /dev/null and b/website/static/cyclosm.png differ
diff --git a/website/static/ign.png b/website/static/ign.png
new file mode 100644
index 00000000..ed3b13e5
Binary files /dev/null and b/website/static/ign.png differ
diff --git a/website/static/mapbox-outdoors.png b/website/static/mapbox-outdoors.png
new file mode 100644
index 00000000..841d16b3
Binary files /dev/null and b/website/static/mapbox-outdoors.png differ
diff --git a/website/static/mapbox-satellite.png b/website/static/mapbox-satellite.png
new file mode 100644
index 00000000..169bfe15
Binary files /dev/null and b/website/static/mapbox-satellite.png differ
diff --git a/website/static/profile-dark.png b/website/static/profile-dark.png
deleted file mode 100644
index 62c23d82..00000000
Binary files a/website/static/profile-dark.png and /dev/null differ
diff --git a/website/static/profile-light.png b/website/static/profile-light.png
deleted file mode 100644
index 4dd83c7e..00000000
Binary files a/website/static/profile-light.png and /dev/null differ
diff --git a/website/static/waymarked.png b/website/static/waymarked.png
new file mode 100644
index 00000000..43561e16
Binary files /dev/null and b/website/static/waymarked.png differ
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 09f5c0b6..6d15d673 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -6,13 +6,6 @@ const config = {
content: ["./src/**/*.{html,js,svelte,ts}"],
safelist: ["dark"],
theme: {
- container: {
- center: true,
- padding: "2rem",
- screens: {
- "2xl": "1400px"
- }
- },
extend: {
colors: {
border: "hsl(var(--border) /