mirror of
https://github.com/immich-app/static-pages.git
synced 2026-09-30 13:23:05 +08:00
feat: update download page (#760)
* feat: update download page * chore: pr feedback
This commit is contained in:
Jason Rasmussen
@@ -86,8 +86,9 @@
|
||||
and share your precious memories on both Apple and Android.
|
||||
</Text>
|
||||
|
||||
<div class="my-8 flex h-full justify-around gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-col items-start justify-around gap-4">
|
||||
<div class="my-8 h-full lg:my-4">
|
||||
<div class="my-8 flex h-full gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-col items-start gap-4">
|
||||
<a href={Constants.Get.Android}>
|
||||
<img src={playStoreBadge} alt="Playstore Badge" class="w-48" />
|
||||
</a>
|
||||
@@ -97,6 +98,7 @@
|
||||
</div>
|
||||
<img src={themeManager.value === 'dark' ? qrCodeDark : qrCodeLight} alt="QRCode" class="h-36 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet media()}
|
||||
<img src={featureMobile} alt="Mobile app" class="object-scale-down" />
|
||||
|
||||
@@ -1,146 +1,125 @@
|
||||
<script lang="ts">
|
||||
import qrCodeDark from '$common/img/app-qr-code-dark.svg';
|
||||
import qrCodeLight from '$common/img/app-qr-code-light.svg';
|
||||
import kubernetesIcon from '$common/img/kubernetes.webp';
|
||||
import portainerIcon from '$common/img/portainer.svg';
|
||||
import truenasIcon from '$common/img/truenas-scale.svg';
|
||||
import unraidIcon from '$common/img/unraid.svg';
|
||||
import { siteMetadata } from '$lib';
|
||||
import featureMobile from '$lib/assets/img/feature-mobile.webp';
|
||||
import FeatureHighlight from '$lib/components/FeatureHighlight.svelte';
|
||||
import PageContent from '$lib/components/PageContent.svelte';
|
||||
import {
|
||||
appStoreBadge,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Constants,
|
||||
Container,
|
||||
fdroidBadge,
|
||||
Heading,
|
||||
Icon,
|
||||
Link,
|
||||
Logo,
|
||||
playStoreBadge,
|
||||
SiteMetadata,
|
||||
Stack,
|
||||
Text,
|
||||
themeManager,
|
||||
} from '@immich/ui';
|
||||
import { mdiAndroid, mdiDocker } from '@mdi/js';
|
||||
import { mdiOpenInNew } from '@mdi/js';
|
||||
import { siDocker } from 'simple-icons';
|
||||
|
||||
const pageMetadata = {
|
||||
title: 'Download',
|
||||
description: 'Download Immich app and start backing up your photos and videos securely to your own server',
|
||||
title: 'Download Immich',
|
||||
description: 'Install Immich on a server and download mobile apps to start backing up your photos and videos.',
|
||||
};
|
||||
</script>
|
||||
|
||||
<SiteMetadata site={siteMetadata} page={pageMetadata} />
|
||||
|
||||
<PageContent>
|
||||
<Container size="large" center>
|
||||
<Container size="large" center class="my-16 flex flex-col items-center text-center">
|
||||
<Logo size="giant" variant="logo" class="mb-4 border" />
|
||||
<Heading size="title" class="mb-4" tag="h1">{pageMetadata.title}</Heading>
|
||||
|
||||
<div class="mb-4">
|
||||
<Heading size="large" tag="h2">Mobile Apps</Heading>
|
||||
<Text color="muted">{pageMetadata.description}</Text>
|
||||
</div>
|
||||
|
||||
<div class="l mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2">
|
||||
<Card color="secondary">
|
||||
<CardHeader>
|
||||
<CardTitle>Android</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Stack gap={4}>
|
||||
<a href={Constants.Get.Android}>
|
||||
<img class="mx-auto h-16" alt="Get it on Google Play" src={playStoreBadge} />
|
||||
</a>
|
||||
<a href={Constants.Get.FDroid}>
|
||||
<img class="mx-auto h-16 rounded-xl border border-dark" alt="Get it on F-Droid" src={fdroidBadge} />
|
||||
</a>
|
||||
<Button
|
||||
class="light mx-auto h-16 border"
|
||||
size="giant"
|
||||
variant="filled"
|
||||
href={Constants.Get.GithubRelease}
|
||||
color="secondary"
|
||||
>
|
||||
<Icon icon={mdiAndroid} size="2em" />
|
||||
<Text>Download APK</Text>
|
||||
</Button>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card color="secondary">
|
||||
<CardHeader>
|
||||
<CardTitle>iOS</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<a href={Constants.Get.iOS}>
|
||||
<img class="mx-auto mt-4 h-16" alt="Download on the App Store" src={appStoreBadge} />
|
||||
</a>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<Heading size="large" tag="h2">Server</Heading>
|
||||
<Text color="muted">Download, setup, and run Immich on your own server</Text>
|
||||
</div>
|
||||
|
||||
<section class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card color="secondary" class="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Docker Compose</CardTitle>
|
||||
<CardDescription>Run Immich on <Link href="https://www.docker.com/">Docker</Link></CardDescription>
|
||||
</CardHeader>
|
||||
<CardBody class="flex items-center justify-center align-middle">
|
||||
<Icon icon={mdiDocker} size="6rem" color="#0db7ed" />
|
||||
</CardBody>
|
||||
<CardFooter class="flex flex-col gap-2">
|
||||
<Button fullWidth href="https://immich.app/docs/install/docker-compose">View Instructions</Button>
|
||||
<Button fullWidth color="secondary" href="/docker-compose-builder">Build a Compose File</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card color="secondary" class="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Portainer</CardTitle>
|
||||
<CardDescription>Run Immich on <Link href="https://www.portainer.io/">Portainer</Link></CardDescription>
|
||||
</CardHeader>
|
||||
<CardBody class="flex items-center justify-center align-middle">
|
||||
<img src={portainerIcon} class="w-20" alt="Portainer logo" />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button fullWidth href="https://immich.app/docs/install/portainer">View Instructions</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card color="secondary" class="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Unraid</CardTitle>
|
||||
<CardDescription>Run Immich on <Link href="https://unraid.net/">Unraid</Link></CardDescription>
|
||||
</CardHeader>
|
||||
<CardBody class="flex items-center justify-center align-middle">
|
||||
<img src={unraidIcon} class="w-24" alt="UnRaid logo" />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button fullWidth href="https://immich.app/docs/install/unraid">View Instructions</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card color="secondary" class="h-full">
|
||||
<CardHeader>
|
||||
<CardTitle>TrueNAS SCALE</CardTitle>
|
||||
<CardDescription
|
||||
>Run Immich on <Link href="https://www.truenas.com/truenas-scale/">TrueNAS SCALE</Link></CardDescription
|
||||
>
|
||||
</CardHeader>
|
||||
<CardBody class="flex items-center justify-center align-middle">
|
||||
<img src={truenasIcon} class="w-24" alt="TrueNAS SCALE logo" />
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button fullWidth href="https://immich.app/docs/install/truenas">View Instructions</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</section>
|
||||
<Text size="giant" class="mb-4 max-w-xl">{pageMetadata.description}</Text>
|
||||
</Container>
|
||||
</PageContent>
|
||||
|
||||
<FeatureHighlight>
|
||||
{#snippet label()}
|
||||
<Heading size="large" tag="h3" class="mb-2">Download for Mobile</Heading>
|
||||
<Text size="large">Use Immich to backup your photos and videos from your Android and iOS devices.</Text>
|
||||
|
||||
<div class="my-8 h-full lg:my-4">
|
||||
<div class="flex flex-wrap gap-4 sm:justify-start">
|
||||
<Button href={Constants.Get.FDroid} color="primary" trailingIcon={mdiOpenInNew}>FUTO F-Droid</Button>
|
||||
<Button href={Constants.Get.GithubRelease} color="primary" trailingIcon={mdiOpenInNew}>Download APK</Button>
|
||||
</div>
|
||||
<div class="my-8 flex h-full gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-col items-start gap-4">
|
||||
<a href={Constants.Get.Android}>
|
||||
<img src={playStoreBadge} alt="Playstore Badge" class="w-48" />
|
||||
</a>
|
||||
<a href={Constants.Get.iOS}>
|
||||
<img src={appStoreBadge} alt="AppStore Badge" class="w-48" />
|
||||
</a>
|
||||
</div>
|
||||
<img src={themeManager.value === 'dark' ? qrCodeDark : qrCodeLight} alt="QRCode" class="h-36 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet media()}
|
||||
<img src={featureMobile} alt="Mobile app" class="object-scale-down" />
|
||||
{/snippet}
|
||||
</FeatureHighlight>
|
||||
|
||||
<FeatureHighlight reverse>
|
||||
{#snippet label()}
|
||||
<Heading size="large" tag="h3" class="mb-2">Install with Docker</Heading>
|
||||
<Text size="large">Run Immich on your own server using Docker Compose.</Text>
|
||||
|
||||
<div class="my-8 flex h-full justify-around gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<Button href="https://immich.app/docs/install/docker-compose" trailingIcon={mdiOpenInNew}>View docs</Button>
|
||||
<Button color="secondary" href="/docker-compose-builder">Build a compose file</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet media()}
|
||||
<Icon icon={siDocker} class="h-full w-32 max-w-48 text-[#2560ff] md:w-48" />
|
||||
{/snippet}
|
||||
</FeatureHighlight>
|
||||
|
||||
<FeatureHighlight>
|
||||
{#snippet label()}
|
||||
<Heading size="large" tag="h3" class="mb-2">Install with Kubernetes</Heading>
|
||||
<Text size="large">Run Immich on your Kubernetes cluster using the official helm chart.</Text>
|
||||
|
||||
<div class="my-8 flex h-full justify-around gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<Button href="https://immich.app/docs/install/kubernetes" trailingIcon={mdiOpenInNew}>View docs</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet media()}
|
||||
<img src={kubernetesIcon} class="w-32 md:w-48" alt="Kubernetes logo" />
|
||||
{/snippet}
|
||||
</FeatureHighlight>
|
||||
|
||||
<FeatureHighlight reverse>
|
||||
{#snippet label()}
|
||||
<Heading size="large" tag="h3" class="mb-2">Install with 3rd Party</Heading>
|
||||
<Text size="large">Run Immich on your NAS using one of our community guides.</Text>
|
||||
|
||||
<div class="my-8 flex h-full justify-around gap-4 sm:justify-start lg:my-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button href="https://docs.immich.app/install/portainer" trailingIcon={mdiOpenInNew}>Portainer Guide</Button>
|
||||
<Button href="https://docs.immich.app/install/unraid" trailingIcon={mdiOpenInNew}>unRaid Guide</Button>
|
||||
<Button href="https://docs.immich.app/install/truenas" trailingIcon={mdiOpenInNew}>TrueNAS SCALE Guide</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
{#snippet media()}
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<img src={portainerIcon} class="w-28 md:w-42" alt="Portainer logo" />
|
||||
<img src={unraidIcon} class="w-32 md:w-48" alt="UnRaid logo" />
|
||||
<img src={truenasIcon} class="w-32 md:w-48" alt="TrueNAS SCALE logo" />
|
||||
</div>
|
||||
{/snippet}
|
||||
</FeatureHighlight>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Reference in New Issue
Block a user