ngn/website
1
0
Fork 0
Code Issues 1 Pull Requests 6 Actions Packages Activity

frontend redesign

Browse Source
This commit is contained in:
ngn
2025-01-07 00:13:11 +03:00
parent 337e56de78
commit fc11748e57
37 changed files with 1545 additions and 900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
app/src/routes/services/+page.svelte
View File

@ -1,100 +1,74 @@
<script>
import Header from "../../lib/header.svelte";
import Service from "../../lib/service.svelte";
import Card from "../../lib/card.svelte";
import Service from "$lib/service.svelte";
import Header from "$lib/header.svelte";
import Link from "$lib/link.svelte";
import Head from "$lib/head.svelte";
import { api_url } from "$lib/util.js";
import { locale } from "svelte-i18n";
export let data;
let list = data.list,
services = list;
let value = "";
function change(input) {
value = input.target.value.toLowerCase();
services = [];
if (value === "") {
services = list;
return;
}
list.forEach((s) => {
if (s.name.toLowerCase().includes(value)) services.push(s);
});
}
</script>
<svelte:head>
<title>[ngn.tf] | services</title>
<meta content="[ngn] | services" property="og:title" />
<meta content="Stuff that I host" property="og:description" />
<meta content="https://ngn.tf" property="og:url" />
<meta content="#000000" data-react-helmet="true" name="theme-color" />
</svelte:head>
<Header><c>ls</c> services</Header>
<main>
<Card title="cat services/*/info.txt">
<div class="flexcol">
{#each data.services as services_list}
<div class="flexrow">
{#each services_list as service}
<Service url={service.url} desc={service.desc}>{service.name}</Service>
{/each}
</div>
{/each}
</div>
</Card>
<Head title="services" desc="my self-hosted services and projects" />
<Header title="service status" picture="cool" />
<Card title="cat services/details.txt">
Here some details for all the services I offer:
<ul>
<li>
<c><i class="nf nf-cod-account"></i> Registration:</c> All the services are offered for free,
and all of them are accessiable to public. And registrations are open for the all services that
support account registrations.
</li>
<li>
<c><i class="nf nf-fa-eye_slash"></i> Privacy:</c> To protect user privacy, all the web proxy
logs are cleared regularly. I also do not use any kind of CDN, and provide SSL encrypted connection
for all the services. You can also connect all the services over TOR, as I do not block any traffic
from TOR.
</li>
<li>
<c><i class="nf nf-oct-graph"></i> Uptime:</c> Some services get restarted regularly, also sometimes
I have issues with the hosting, so I cannot provide or guarantee %100 uptime for any of the services.
I also cannot guarantee the that there won't be any data loss. I do take any regular backups,
but your data may be lost in case of something like a SSD failure.
</li>
<li>
<c><i class="nf nf-md-speedometer"></i> Speed:</c> All the services are located in Turkey, and
avaliable over an 400 Mbit/s interface. If you are close to Turkey you should have a fairly good
experience. If you are not, then you should probably use another provider for the service.
</li>
</ul>
</Card>
<main>
<div class="title">
<input on:input={change} type="text" placeholder="Search for a service" />
<div>
<Link icon="nf-fa-feed" link={api_url("/news/" + $locale.slice(0, 2))}>News and updates</Link>
</div>
</div>
<div class="services">
{#each services as service}
<Service {service} />
{/each}
</div>
</main>
<style>
main {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
padding: 50px;
text-align: right;
}
main .title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
main .services {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin-top: 20px;
gap: 28px;
}
.flexcol {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
gap: 13px;
}
.flexrow {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
width: 100%;
gap: 13px;
}
ul {
list-style: inside;
margin-bottom: 20px;
}
li {
padding-top: 30px;
line-height: 35px;
}
@media only screen and (max-width: 1316px) {
.flexrow {
@media only screen and (max-width: 1200px) {
main .services {
flex-direction: column;
}
}