forked from MapComplete/MapComplete
		
	
		
			
				
	
	
		
			91 lines
		
	
	
	
		
			3 KiB
		
	
	
	
		
			Svelte
		
	
	
	
	
	
			
		
		
	
	
			91 lines
		
	
	
	
		
			3 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 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="flex flex-col items-center my-4">
 | 
						|
 | 
						|
        <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
 | 
						|
          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>
 |