mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-02 16:52:31 +00:00
use homepage as default page
This commit is contained in:
vcoppe
@@ -1,16 +1,50 @@
|
||||
<script lang="ts">
|
||||
import App from '$lib/components/App.svelte';
|
||||
import { base } from '$app/paths';
|
||||
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 { 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';
|
||||
import routingScreenshot from '$lib/assets/img/routing.png?enhanced';
|
||||
import mapboxOutdoorsMap from '$lib/assets/img/mapbox-outdoors.png?enhanced';
|
||||
import mapboxSatelliteMap from '$lib/assets/img/mapbox-satellite.png?enhanced';
|
||||
import ignMap from '$lib/assets/img/ign.png?enhanced';
|
||||
import cyclosmMap from '$lib/assets/img/cyclosm.png?enhanced';
|
||||
import waymarkedMap from '$lib/assets/img/waymarked.png?enhanced';
|
||||
import mapScreenshot from '$lib/assets/img/map.png?enhanced';
|
||||
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>gpx.studio — {$_('metadata.app_title')}</title>
|
||||
<title>gpx.studio — {$_('metadata.home_title')}</title>
|
||||
<meta name="description" content={$_('metadata.description')} />
|
||||
<meta property="og:title" content="gpx.studio — {$_('metadata.app_title')}" />
|
||||
<meta property="og:title" content="gpx.studio — {$_('metadata.home_title')}" />
|
||||
<meta property="og:description" content={$_('metadata.description')} />
|
||||
<meta name="twitter:title" content="gpx.studio — {$_('metadata.app_title')}" />
|
||||
<meta name="twitter:title" content="gpx.studio — {$_('metadata.home_title')}" />
|
||||
<meta name="twitter:description" content={$_('metadata.description')} />
|
||||
|
||||
<link rel="alternate" hreflang="x-default" href="{base}/" />
|
||||
@@ -23,4 +57,168 @@
|
||||
{/each}
|
||||
</svelte:head>
|
||||
|
||||
<App />
|
||||
<div class="space-y-24 my-24">
|
||||
<div class="px-12 w-full flex flex-col items-center">
|
||||
<div class="flex flex-col gap-6 items-center max-w-3xl">
|
||||
<div class="text-6xl font-black text-center">{$_('metadata.app_title')}</div>
|
||||
<div class="text-xl text-muted-foreground text-center">
|
||||
{$_('metadata.description')}
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-center gap-3">
|
||||
<Button href="./app" class="w-1/3 min-w-fit">
|
||||
<Map size="18" class="mr-1.5" />
|
||||
{$_('homepage.app')}
|
||||
</Button>
|
||||
<Button variant="secondary" href="./documentation" class="w-1/3 min-w-fit">
|
||||
<BookOpenText size="18" class="mr-1.5" />
|
||||
<span>{$_('homepage.documentation')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<enhanced:img
|
||||
src={routingScreenshot}
|
||||
alt="Screenshot of the gpx.studio map in 3D."
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-24 w-full flex flex-col items-center">
|
||||
<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
|
||||
<div class="markdown text-center">
|
||||
<h1>{$_('homepage.route_planning')}</h1>
|
||||
<p class="text-muted-foreground">{$_('homepage.route_planning_description')}</p>
|
||||
</div>
|
||||
<div class="p-3 w-fit rounded-md border shadow-xl">
|
||||
<Routing minimizable={false} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-24 w-full flex flex-col items-center">
|
||||
<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">
|
||||
<div class="markdown text-center md:hidden">
|
||||
<h1>{$_('homepage.file_processing')}</h1>
|
||||
<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<Toolbar />
|
||||
</div>
|
||||
<div class="markdown text-center hidden md:block">
|
||||
<h1>{$_('homepage.file_processing')}</h1>
|
||||
<p class="text-muted-foreground">{$_('homepage.file_processing_description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-24 w-full flex flex-col items-center">
|
||||
<div
|
||||
class="markdown flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl"
|
||||
>
|
||||
<div class="markdown text-center">
|
||||
<h1>{$_('homepage.maps')}</h1>
|
||||
<p class="text-muted-foreground">{$_('homepage.maps_description')}</p>
|
||||
</div>
|
||||
<div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
|
||||
<enhanced:img
|
||||
src={mapboxOutdoorsMap}
|
||||
alt="Mapbox Outdoors map screenshot."
|
||||
class="absolute"
|
||||
style="clip-path: inset(0 50% 50% 0);"
|
||||
/>
|
||||
<enhanced:img
|
||||
src={mapboxSatelliteMap}
|
||||
alt="Mapbox Satellite map screenshot."
|
||||
class="absolute"
|
||||
style="clip-path: inset(0 0 50% 50%);"
|
||||
/>
|
||||
<enhanced:img
|
||||
src={ignMap}
|
||||
alt="IGN map screenshot."
|
||||
class="absolute"
|
||||
style="clip-path: inset(50% 50% 0 0);"
|
||||
/>
|
||||
<enhanced:img
|
||||
src={cyclosmMap}
|
||||
alt="CyclOSM map screenshot."
|
||||
class="absolute"
|
||||
style="clip-path: inset(50% 0 0 50%);"
|
||||
/>
|
||||
<enhanced:img src={waymarkedMap} alt="Waymarked Trails map screenshot." class="absolute" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 md:px-12">
|
||||
<div class="markdown text-center">
|
||||
<h1>{$_('homepage.data_visualization')}</h1>
|
||||
<p class="text-muted-foreground">{$_('homepage.data_visualization_description')}</p>
|
||||
</div>
|
||||
<div class="h-48 w-full">
|
||||
<ElevationProfile
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
additionalDatasets={$additionalDatasets}
|
||||
elevationFill={$elevationFill}
|
||||
panelSize={200}
|
||||
distanceUnits={$distanceUnits}
|
||||
velocityUnits={$velocityUnits}
|
||||
temperatureUnits={$temperatureUnits}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="h-10 w-fit">
|
||||
<GPXStatistics
|
||||
{gpxStatistics}
|
||||
{slicedGPXStatistics}
|
||||
panelSize={192}
|
||||
orientation={'horizontal'}
|
||||
velocityUnits={$velocityUnits}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<enhanced:img
|
||||
src={mapScreenshot}
|
||||
alt="Screenshot of the gpx.studio map in 3D."
|
||||
class="w-full"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-12 flex flex-col items-center">
|
||||
<div class="max-w-5xl flex flex-col items-center gap-6">
|
||||
<DocsLoader path="about/funding.md" />
|
||||
<Button
|
||||
href="https://ko-fi.com/gpxstudio"
|
||||
target="_blank"
|
||||
class="w-1/3 min-w-fit bg-support text-base"
|
||||
>
|
||||
<Heart size="16" class="mr-1" fill="rgb(var(--support))" />
|
||||
<span>{$_('homepage.support_button')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-12 flex flex-col items-center">
|
||||
<div class="max-w-5xl">
|
||||
<DocsLoader path="about/translation.md" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-12 md:px-24 flex flex-col items-center">
|
||||
<div
|
||||
class="max-w-4xl flex flex-col md:flex-row items-center justify-center gap-x-12 gap-y-6 p-6 border rounded-2xl shadow-xl"
|
||||
>
|
||||
<div class="shrink-0 flex flex-col sm:flex-row md:flex-col items-center gap-x-4 gap-y-2">
|
||||
<div class="text-lg font-semibold text-muted-foreground">
|
||||
❤️ {$_('homepage.supported_by')}
|
||||
</div>
|
||||
<a href="https://www.mapbox.com/" target="_blank">
|
||||
<Logo company="mapbox" class="w-60" />
|
||||
</a>
|
||||
</div>
|
||||
<DocsLoader path="about/mapbox.md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user