MapComplete/app/AppIndex.svelte

108 lines
3.4 KiB
Svelte

<script lang="ts">
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
import Translations from "../src/UI/i18n/Translations"
import Tr from "../src/UI/Base/Tr.svelte"
import LanguagePicker from "../src/UI/InputElement/LanguagePicker.svelte"
import { ariaLabel } from "../src/Utils/ariaLabel"
import Locale from "../src/UI/i18n/Locale"
import AccordionSingle from "../src/UI/Flowbite/AccordionSingle.svelte"
const t = Translations.t.app
const lng = Locale.language
let fdroid = t.downloadOnFDroid.current
let googleplay = t.getOnGoogle.current
let supportedVersions: { version: number; codename: string }[] = [
{ version: 9, codename: "pie" },
{ version: 10, codename: "quince-tart" },
{ version: 11, codename: "red-velvet-cake" },
{ version: 12, codename: "snow-cone" },
{ version: 13, codename: "tiramisu" },
]
</script>
<head>
<link rel="stylesheet" href="./assets/index-tailwind-output.css" />
<title><Tr t={t.title} /></title>
</head>
<div class="flex flex-col p-2 sm:p-4 md:p-8">
<div class="self-end" style="max-width: calc( 100vw - 4rem );">
<LanguagePicker availableLanguages={t.title.SupportedLanguages()} />
</div>
<div class="flex justify-around">
<div class="max-w-128 m-8 flex flex-col">
<h1>
<Tr t={t.title} />
</h1>
<Tr t={t.intro} />
<Tr cls="subtle" t={t.noPlayServices} />
<a
class="button primary flex justify-center"
href="https://builds.mapcomplete.org/apk/mapcomplete-latest.apk"
>
<DownloadIcon class="h-8 w-8" />
<Tr t={t.download} />
</a>
<a class="button" href="https://mapcomplete.org">
<Tr t={t.back} />
</a>
<AccordionSingle>
<div slot="header">
<Tr t={t.legacyHeader} />
</div>
<div class="flex flex-col">
<Tr t={t.legacyExplanation} />
{#each supportedVersions as v}
<a
class="button"
href={`https://builds.mapcomplete.org/apk/mapcomplete-latest-${
v.version
}-${v.codename.toUpperCase()}.apk`}
>
Android {v.version} ({v.codename})
</a>
{/each}
</div>
</AccordionSingle>
<a class="link-underline w-fit self-end" href="https://builds.mapcomplete.org/apk/">
<Tr t={t.older} />
</a>
<div class="my-4 flex flex-col items-center">
<a href="https://f-droid.org/packages/org.mapcomplete">
<img
src={`https://f-droid.org/badge/get-it-on-${$lng}.png`}
onerror="if (this.src !== 'fdroid.png') this.src = 'fdroid.png';"
alt={$fdroid}
style="width: 17rem"
/>
</a>
<a href="https://play.google.com/store/apps/details?id=org.mapcomplete">
<img
src={`./googleplay.svg`}
alt={$googleplay}
class="m-2"
style="width: 17rem"
/>
</a>
<a
rel="noopener"
href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://add/https://source.mapcomplete.org/MapComplete/android-wrapper/releases"
>
<img
style="width: 15rem"
class="p-4"
src="./badge_obtainium.png"
alt="Get on obtainium"
use:ariaLabel={t.getOnObtanium}
/>
</a>
</div>
</div>
</div>
</div>