ngn
f053b93c24
All checks were successful
Build the docker image for the frontend application / build (push) Successful in 29s
Signed-off-by: ngn <ngn@ngn.tf>
142 lines
2.6 KiB
Svelte
142 lines
2.6 KiB
Svelte
<script>
|
|
import { time_from_ts } from "$lib/util.js";
|
|
import { _, locale } from "$lib/locale.js";
|
|
|
|
let { service } = $props();
|
|
</script>
|
|
|
|
<main>
|
|
<div class="info">
|
|
<div>
|
|
<h1>{service.name}</h1>
|
|
<p>{service.desc[$locale.code]}</p>
|
|
</div>
|
|
<ul>
|
|
<li><a href={service.clear}> Clear</a></li>
|
|
<span>|</span>
|
|
<li><a href={service.onion}>TOR</a></li>
|
|
<span>|</span>
|
|
<li><a href={service.i2p}> I2P</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="check">
|
|
<p>
|
|
{$_("services.last", {
|
|
time: time_from_ts(service.check_time),
|
|
})}
|
|
</p>
|
|
{#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-2);
|
|
border: solid 1px var(--black-3);
|
|
text-align: left;
|
|
|
|
flex: 1;
|
|
}
|
|
|
|
main .info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
|
|
color: var(--white-1);
|
|
padding: 15px 18px;
|
|
}
|
|
|
|
main .info div h1 {
|
|
font-size: var(--size-4);
|
|
font-weight: 900;
|
|
}
|
|
|
|
main .info div p {
|
|
font-size: var(--size-2);
|
|
color: var(--white-2);
|
|
font-weight: 100;
|
|
}
|
|
|
|
main .info ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
|
|
text-align: right;
|
|
list-style: none;
|
|
}
|
|
|
|
main .info li a {
|
|
color: var(--color);
|
|
text-decoration: none;
|
|
|
|
font-size: var(--size-2);
|
|
font-weight: 100;
|
|
}
|
|
|
|
main .info li a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
main .info li a[href=""] {
|
|
color: var(--white-3);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
main .info li a[href=""]:hover {
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
main .info ul span {
|
|
color: var(--white-3);
|
|
}
|
|
|
|
main .check {
|
|
border-top: solid 1px var(--black-3);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--white-1);
|
|
}
|
|
|
|
main .check p {
|
|
font-size: var(--size-2);
|
|
font-weight: 100;
|
|
|
|
color: var(--white-2);
|
|
padding: 5px 18px;
|
|
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
main .check span {
|
|
font-size: var(--size-4);
|
|
font-weight: 1000;
|
|
|
|
color: var(--black-1);
|
|
padding: 5px 18px;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|