115 lines
2.5 KiB
Svelte
115 lines
2.5 KiB
Svelte
<script>
|
|
import Icon from "$lib/icon.svelte";
|
|
import Link from "$lib/link.svelte";
|
|
|
|
import { color, time_from_ts } from "$lib/util.js";
|
|
import { locale, _ } from "svelte-i18n";
|
|
|
|
export let service = {};
|
|
</script>
|
|
|
|
<main>
|
|
<div class="info">
|
|
<div class="title">
|
|
<h1>{service.name}</h1>
|
|
<p>{service.desc[$locale]}</p>
|
|
</div>
|
|
<div class="links">
|
|
<Link highlight={false} link={service.clear}><Icon icon="nf-oct-link" /></Link>
|
|
{#if service.onion != ""}
|
|
<Link highlight={false} link={service.onion}><Icon icon="nf-linux-tor" /></Link>
|
|
{/if}
|
|
{#if service.i2p != ""}
|
|
<Link highlight={false} link={service.i2p}
|
|
><span style="color: var(--{color()})">I2P</span></Link
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="check">
|
|
<h1>
|
|
{$_("services.last", {
|
|
values: { time: time_from_ts(service.check_time) },
|
|
})}
|
|
</h1>
|
|
{#if service.check_res == 0}
|
|
<span style="background: var(--white-2)">
|
|
{$_("services.status.down")}
|
|
</span>
|
|
{:else if service.check_res == 1}
|
|
<span style="background: var(--{color()})">
|
|
{$_("services.status.up")}
|
|
</span>
|
|
{:else if service.check_res == 2}
|
|
<span style="background: var(--{color()}); filter: brightness(50%);">
|
|
{$_("services.status.slow")}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--black-3);
|
|
border: solid 1px var(--black-4);
|
|
text-align: left;
|
|
|
|
flex: 1;
|
|
flex-basis: 40%;
|
|
}
|
|
|
|
main .info {
|
|
padding: 25px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--white-1);
|
|
flex: 1;
|
|
}
|
|
|
|
main .info .title h1 {
|
|
font-size: var(--size-5);
|
|
margin-bottom: 8px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
main .info .title p {
|
|
font-size: var(--size-4);
|
|
color: var(--white-2);
|
|
font-weight: 100;
|
|
}
|
|
|
|
main .info .links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
font-size: var(--size-6);
|
|
}
|
|
|
|
main .check {
|
|
border-top: solid 1px var(--black-4);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--white-1);
|
|
}
|
|
|
|
main .check h1 {
|
|
padding: 15px 25px 15px 25px;
|
|
font-size: var(--size-4);
|
|
font-weight: 100;
|
|
}
|
|
|
|
main .check span {
|
|
padding: 15px 25px 15px 25px;
|
|
font-size: var(--size-5);
|
|
text-transform: uppercase;
|
|
color: var(--black-1);
|
|
font-weight: 1000;
|
|
}
|
|
</style>
|