Add browser start page for all hosted projects.
Static nginx site with grouped links, search filter, and 0012.de-inspired styling. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Frank Schwenk
+20
@@ -0,0 +1,20 @@
|
|||||||
|
services:
|
||||||
|
|
||||||
|
startschwenkonline:
|
||||||
|
image: nginx
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
- .:/usr/share/nginx/html:ro
|
||||||
|
- ./nginx.conf:/etc/nginx/nginx.conf:ro
|
||||||
|
container_name: startschwenkonline
|
||||||
|
labels:
|
||||||
|
- "traefik.enable=true"
|
||||||
|
- "traefik.http.routers.startschwenkonline.rule=Host(`start.schwenk.online`)"
|
||||||
|
- "traefik.http.routers.startschwenkonline.entrypoints=websecure"
|
||||||
|
- "traefik.http.routers.startschwenkonline.tls.certresolver=myresolver"
|
||||||
|
networks:
|
||||||
|
- traefik
|
||||||
|
|
||||||
|
networks:
|
||||||
|
traefik:
|
||||||
|
external: true
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" fill="#0a0a0a"/>
|
||||||
|
<rect x="4" y="4" width="3" height="24" fill="#c8ff00"/>
|
||||||
|
<text x="10" y="22" font-family="monospace" font-size="14" font-weight="700" fill="#e8e8e8">S</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 290 B |
+550
@@ -0,0 +1,550 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>start</title>
|
||||||
|
<meta name="description" content="Startseite — Links zu allen Projekten">
|
||||||
|
<meta name="robots" content="noindex, nofollow">
|
||||||
|
<meta name="theme-color" content="#0a0a0a">
|
||||||
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--fg: #e8e8e8;
|
||||||
|
--dim: #666;
|
||||||
|
--line: #333;
|
||||||
|
--acid: #c8ff00;
|
||||||
|
--blood: #ff2a2a;
|
||||||
|
--hover: #1a1a1a;
|
||||||
|
--tap: 2.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { font-size: 16px; scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: "IBM Plex Mono", "Courier New", monospace;
|
||||||
|
line-height: 1.45;
|
||||||
|
padding: 0 clamp(0.75rem, 3vw, 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 72rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
border-left: 4px solid var(--acid);
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: clamp(2.5rem, 10vw, 5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.06em;
|
||||||
|
line-height: 0.9;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo span { color: var(--acid); }
|
||||||
|
|
||||||
|
.claim {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrap {
|
||||||
|
flex: 1 1 14rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrap::before {
|
||||||
|
content: ">";
|
||||||
|
position: absolute;
|
||||||
|
left: 0.85rem;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--acid);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
width: 100%;
|
||||||
|
min-height: var(--tap);
|
||||||
|
padding: 0.5rem 0.75rem 0.5rem 2rem;
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search:focus { border-color: var(--acid); }
|
||||||
|
#search::placeholder { color: var(--dim); }
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--dim);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status em {
|
||||||
|
color: var(--acid);
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-jump {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-jump a {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 2rem;
|
||||||
|
padding: 0.25rem 0.65rem;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--dim);
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
transition: color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-jump a:hover,
|
||||||
|
.nav-jump a:focus-visible {
|
||||||
|
color: var(--acid);
|
||||||
|
border-color: var(--acid);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.group {
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
padding: clamp(1rem, 2vw, 1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
section.group[hidden] { display: none; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.25em;
|
||||||
|
color: var(--dim);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 .count {
|
||||||
|
color: var(--line);
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
|
||||||
|
gap: 0;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
display: block;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-right: 1px solid var(--line);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
min-height: var(--tap);
|
||||||
|
transition: background 0.12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell:hover,
|
||||||
|
.cell:focus-visible {
|
||||||
|
background: var(--hover);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell:active { background: #222; }
|
||||||
|
|
||||||
|
.cell[hidden] { display: none; }
|
||||||
|
|
||||||
|
.cell strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--fg);
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell:hover strong,
|
||||||
|
.cell:focus-visible strong { color: var(--acid); }
|
||||||
|
|
||||||
|
.cell .host {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--dim);
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell .desc {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--dim);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell .tag {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--blood);
|
||||||
|
border: 1px solid var(--blood);
|
||||||
|
padding: 0.15rem 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--dim);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty[hidden] { display: none; }
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--dim);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.55em;
|
||||||
|
height: 1em;
|
||||||
|
background: var(--fg);
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
margin-left: 2px;
|
||||||
|
animation: blink 0.9s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink { 50% { opacity: 0; } }
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.nav-jump { gap: 0.5rem; }
|
||||||
|
.nav-jump a {
|
||||||
|
min-height: var(--tap);
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
.cursor { animation: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<header>
|
||||||
|
<div class="logo">start<span>.schwenk</span></div>
|
||||||
|
<p class="claim">Browser-Startseite · alle Projekte · ein Klick</p>
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="search-wrap">
|
||||||
|
<input type="search" id="search" placeholder="filter …" autocomplete="off" spellcheck="false" aria-label="Projekte filtern">
|
||||||
|
</div>
|
||||||
|
<p class="status" aria-live="polite"><em>■</em> <span id="visible-count">—</span> erreichbar</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="nav-jump" aria-label="Gruppen">
|
||||||
|
<a href="#persoenlich">Persönlich</a>
|
||||||
|
<a href="#infrastruktur">Infrastruktur</a>
|
||||||
|
<a href="#schwenk-apps">schwenk.online</a>
|
||||||
|
<a href="#bsc-gp">BSC Göppingen</a>
|
||||||
|
<a href="#weitere">Weitere</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="group" id="persoenlich" data-group="persoenlich">
|
||||||
|
<h2>Persönlich <span class="count" data-count></span></h2>
|
||||||
|
<div class="grid">
|
||||||
|
<a class="cell" href="https://schwenk.online" data-keywords="schwenk online portfolio">
|
||||||
|
<strong>schwenk.online</strong>
|
||||||
|
<span class="host">schwenk.online</span>
|
||||||
|
<span class="desc">Persönliche Website</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://frank-schwenk.de" data-keywords="frank schwenk persönlich">
|
||||||
|
<strong>frank-schwenk.de</strong>
|
||||||
|
<span class="host">frank-schwenk.de</span>
|
||||||
|
<span class="desc">Persönliche Domain</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="group" id="infrastruktur" data-group="infrastruktur">
|
||||||
|
<h2>Infrastruktur & Tools <span class="count" data-count></span></h2>
|
||||||
|
<div class="grid">
|
||||||
|
<a class="cell" href="https://gitea.schwenk.online" data-keywords="gitea git repository">
|
||||||
|
<strong>Gitea</strong>
|
||||||
|
<span class="host">gitea.schwenk.online</span>
|
||||||
|
<span class="desc">Git-Server & Repositories</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://portainer.schwenk.online" data-keywords="portainer docker container">
|
||||||
|
<strong>Portainer</strong>
|
||||||
|
<span class="host">portainer.schwenk.online</span>
|
||||||
|
<span class="desc">Docker-Verwaltung</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://traefik.schwenk.online" data-keywords="traefik reverse proxy dashboard">
|
||||||
|
<strong>Traefik</strong>
|
||||||
|
<span class="host">traefik.schwenk.online</span>
|
||||||
|
<span class="desc">Reverse-Proxy Dashboard</span>
|
||||||
|
<span class="tag">auth</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://psitransfer.schwenk.online" data-keywords="psitransfer datei upload transfer">
|
||||||
|
<strong>PsiTransfer</strong>
|
||||||
|
<span class="host">psitransfer.schwenk.online</span>
|
||||||
|
<span class="desc">Datei-Transfer</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://link.schwenk.online" data-keywords="link kurz url guggschdu">
|
||||||
|
<strong>link.schwenk.online</strong>
|
||||||
|
<span class="host">link.schwenk.online</span>
|
||||||
|
<span class="desc">Link-Shortener</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="group" id="schwenk-apps" data-group="schwenk-apps">
|
||||||
|
<h2>schwenk.online Apps <span class="count" data-count></span></h2>
|
||||||
|
<div class="grid">
|
||||||
|
<a class="cell" href="https://medis.schwenk.online" data-keywords="medis medikamente take your meds">
|
||||||
|
<strong>TakeYourMeds</strong>
|
||||||
|
<span class="host">medis.schwenk.online</span>
|
||||||
|
<span class="desc">Medikamenten-Erinnerung</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://bringtake.schwenk.online" data-keywords="bringtake einkauf liste">
|
||||||
|
<strong>BringTake</strong>
|
||||||
|
<span class="host">bringtake.schwenk.online</span>
|
||||||
|
<span class="desc">Einkaufslisten-App</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://affen.schwenk.online" data-keywords="affen">
|
||||||
|
<strong>affen.schwenk.online</strong>
|
||||||
|
<span class="host">affen.schwenk.online</span>
|
||||||
|
<span class="desc">Affen-Projekt</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://sboa.schwenk.online" data-keywords="sboa">
|
||||||
|
<strong>sboa.schwenk.online</strong>
|
||||||
|
<span class="host">sboa.schwenk.online</span>
|
||||||
|
<span class="desc">SBOA-Projekt</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://taxi.schwenk.online" data-keywords="taxi">
|
||||||
|
<strong>taxi.schwenk.online</strong>
|
||||||
|
<span class="host">taxi.schwenk.online</span>
|
||||||
|
<span class="desc">Taxi-Projekt</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://fussballdeical.schwenk.online" data-keywords="fussball ical kalender">
|
||||||
|
<strong>Fußball iCal</strong>
|
||||||
|
<span class="host">fussballdeical.schwenk.online</span>
|
||||||
|
<span class="desc">Fußball-Kalender-Feed</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://pics.schwenk.online" data-keywords="pics fotos immich photos">
|
||||||
|
<strong>pics.schwenk.online</strong>
|
||||||
|
<span class="host">pics.schwenk.online</span>
|
||||||
|
<span class="desc">Foto-Galerie</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://beer.schwenk.online" data-keywords="beer getränke">
|
||||||
|
<strong>Getränke Beer</strong>
|
||||||
|
<span class="host">beer.schwenk.online</span>
|
||||||
|
<span class="desc">Getränkemarkt-Website</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://kkwebskeleton.schwenk.online" data-keywords="kkwebskeleton skeleton template dev">
|
||||||
|
<strong>kkwebskeleton</strong>
|
||||||
|
<span class="host">kkwebskeleton.schwenk.online</span>
|
||||||
|
<span class="desc">Web-Skeleton / Vorlage</span>
|
||||||
|
<span class="tag">auth</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="group" id="bsc-gp" data-group="bsc-gp">
|
||||||
|
<h2>BSC Göppingen <span class="count" data-count></span></h2>
|
||||||
|
<div class="grid">
|
||||||
|
<a class="cell" href="https://bsc-gp.de" data-keywords="bsc göppingen verein">
|
||||||
|
<strong>bsc-gp.de</strong>
|
||||||
|
<span class="host">bsc-gp.de</span>
|
||||||
|
<span class="desc">Basketballverein — Hauptseite</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://score.bsc-gp.de" data-keywords="score spielstand live">
|
||||||
|
<strong>Live Score</strong>
|
||||||
|
<span class="host">score.bsc-gp.de</span>
|
||||||
|
<span class="desc">Live-Spielstand</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://beta.score.bsc-gp.de" data-keywords="beta score test">
|
||||||
|
<strong>Live Score (Beta)</strong>
|
||||||
|
<span class="host">beta.score.bsc-gp.de</span>
|
||||||
|
<span class="desc">Spielstand — Testversion</span>
|
||||||
|
<span class="tag">beta</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://practice.bsc-gp.de" data-keywords="practice training">
|
||||||
|
<strong>practice.bsc-gp.de</strong>
|
||||||
|
<span class="host">practice.bsc-gp.de</span>
|
||||||
|
<span class="desc">Training / Practice</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://rotation.bsc-gp.de" data-keywords="rotation spieler">
|
||||||
|
<strong>rotation.bsc-gp.de</strong>
|
||||||
|
<span class="host">rotation.bsc-gp.de</span>
|
||||||
|
<span class="desc">Spieler-Rotation</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://shotclock.bsc-gp.de" data-keywords="shotclock uhr">
|
||||||
|
<strong>Shot Clock</strong>
|
||||||
|
<span class="host">shotclock.bsc-gp.de</span>
|
||||||
|
<span class="desc">Shot-Clock-Anzeige</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="group" id="weitere" data-group="weitere">
|
||||||
|
<h2>Weitere Projekte <span class="count" data-count></span></h2>
|
||||||
|
<div class="grid">
|
||||||
|
<a class="cell" href="https://mobea.de" data-keywords="mobea">
|
||||||
|
<strong>mobea.de</strong>
|
||||||
|
<span class="host">mobea.de</span>
|
||||||
|
<span class="desc">Mobea-Website</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://vfb.red" data-keywords="vfb red fußball">
|
||||||
|
<strong>vfb.red</strong>
|
||||||
|
<span class="host">vfb.red</span>
|
||||||
|
<span class="desc">VfB-Projekt</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://f12.rocks" data-keywords="f12 rocks">
|
||||||
|
<strong>f12.rocks</strong>
|
||||||
|
<span class="host">f12.rocks</span>
|
||||||
|
<span class="desc">f12.rocks</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://everlasting-flame.de" data-keywords="everlasting flame">
|
||||||
|
<strong>everlasting-flame.de</strong>
|
||||||
|
<span class="host">everlasting-flame.de</span>
|
||||||
|
<span class="desc">Everlasting Flame</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://sostehtsgeschrieben.de" data-keywords="so steht geschrieben">
|
||||||
|
<strong>sostehtsgeschrieben.de</strong>
|
||||||
|
<span class="host">sostehtsgeschrieben.de</span>
|
||||||
|
<span class="desc">So steht's geschrieben</span>
|
||||||
|
</a>
|
||||||
|
<a class="cell" href="https://eselhoefe.de" data-keywords="eselhöfe esel">
|
||||||
|
<strong>eselhoefe.de</strong>
|
||||||
|
<span class="host">eselhoefe.de</span>
|
||||||
|
<span class="desc">Eselhöfe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<p class="empty" id="no-results" hidden>Kein Treffer. Filter leeren und nochmal.<span class="cursor"></span></p>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<span id="clock">—</span>
|
||||||
|
<span>lokal · keine Tracker · kein Drama</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
const search = document.getElementById('search');
|
||||||
|
const cells = [...document.querySelectorAll('.cell')];
|
||||||
|
const groups = [...document.querySelectorAll('.group')];
|
||||||
|
const noResults = document.getElementById('no-results');
|
||||||
|
const visibleCount = document.getElementById('visible-count');
|
||||||
|
const clock = document.getElementById('clock');
|
||||||
|
|
||||||
|
function updateCounts() {
|
||||||
|
let total = 0;
|
||||||
|
groups.forEach(group => {
|
||||||
|
const visible = [...group.querySelectorAll('.cell:not([hidden])')];
|
||||||
|
const counter = group.querySelector('[data-count]');
|
||||||
|
if (counter) counter.textContent = `(${visible.length})`;
|
||||||
|
group.hidden = visible.length === 0;
|
||||||
|
total += visible.length;
|
||||||
|
});
|
||||||
|
visibleCount.textContent = total;
|
||||||
|
noResults.hidden = total > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function filter() {
|
||||||
|
const q = search.value.trim().toLowerCase();
|
||||||
|
cells.forEach(cell => {
|
||||||
|
const text = (cell.textContent + ' ' + (cell.dataset.keywords || '')).toLowerCase();
|
||||||
|
cell.hidden = q !== '' && !text.includes(q);
|
||||||
|
});
|
||||||
|
updateCounts();
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
const now = new Date();
|
||||||
|
clock.textContent = now.toLocaleString('de-DE', {
|
||||||
|
weekday: 'short',
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
search.addEventListener('input', filter);
|
||||||
|
document.addEventListener('keydown', e => {
|
||||||
|
if (e.key === '/' && document.activeElement !== search) {
|
||||||
|
e.preventDefault();
|
||||||
|
search.focus();
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape' && document.activeElement === search) {
|
||||||
|
search.value = '';
|
||||||
|
filter();
|
||||||
|
search.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tick();
|
||||||
|
setInterval(tick, 60_000);
|
||||||
|
updateCounts();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+43
@@ -0,0 +1,43 @@
|
|||||||
|
user nginx;
|
||||||
|
worker_processes auto;
|
||||||
|
|
||||||
|
error_log /var/log/nginx/error.log notice;
|
||||||
|
pid /var/run/nginx.pid;
|
||||||
|
|
||||||
|
events {
|
||||||
|
worker_connections 1024;
|
||||||
|
}
|
||||||
|
|
||||||
|
http {
|
||||||
|
include /etc/nginx/mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
|
||||||
|
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||||
|
'$status $body_bytes_sent "$http_referer" '
|
||||||
|
'"$http_user_agent" "$http_x_forwarded_for"';
|
||||||
|
|
||||||
|
access_log /var/log/nginx/access.log main;
|
||||||
|
|
||||||
|
sendfile on;
|
||||||
|
keepalive_timeout 65;
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/css text/javascript application/javascript application/json image/svg+xml;
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
server_name start.schwenk.online;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
location = /favicon.svg { try_files $uri =404; }
|
||||||
|
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN";
|
||||||
|
add_header X-Content-Type-Options "nosniff";
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user