90 lines
1.9 KiB
Svelte
90 lines
1.9 KiB
Svelte
<script>
|
|
import { urljoin, color, date_from_ts } from "$lib/util.js";
|
|
import { api_get_metrics } from "$lib/api.js";
|
|
import Link from "$lib/link.svelte";
|
|
|
|
import { onMount } from "svelte";
|
|
import { _ } from "svelte-i18n";
|
|
|
|
let data = {};
|
|
|
|
onMount(async () => {
|
|
data = await api_get_metrics(fetch);
|
|
});
|
|
</script>
|
|
|
|
<footer style="border-top: solid 2px var(--{color()});">
|
|
<div class="info">
|
|
<div class="links">
|
|
<span>
|
|
<Link link={import.meta.env.WEBSITE_SOURCE_URL} bold={true}>{$_("footer.source")}</Link>
|
|
</span>
|
|
<span>/</span>
|
|
<span>
|
|
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/license")} bold={true}
|
|
>{$_("footer.license")}</Link
|
|
>
|
|
</span>
|
|
<span>/</span>
|
|
<span>
|
|
<Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/privacy")} bold={true}
|
|
>{$_("footer.privacy")}</Link
|
|
>
|
|
</span>
|
|
</div>
|
|
<span>
|
|
{$_("footer.powered")}
|
|
</span>
|
|
</div>
|
|
<div class="useless">
|
|
<span>
|
|
{$_("footer.number", {
|
|
values: {
|
|
total: data.total,
|
|
since: date_from_ts(data.since),
|
|
},
|
|
})}
|
|
{#if data.number % 1000 == 0}
|
|
<span style="color: var(--{color()})">({$_("footer.wow")})</span>
|
|
{/if}
|
|
</span>
|
|
<span>
|
|
{$_("footer.version", { values: { api_version: "v1", frontend_version: pkg.version } })}
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: var(--black-1);
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
color: var(--white-2);
|
|
font-size: var(--size-2);
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.useless {
|
|
margin: 25px 50px 25px 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.info {
|
|
margin: 25px 0 25px 50px;
|
|
text-align: left;
|
|
}
|
|
|
|
.info .links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
}
|
|
</style>
|