Frank Schwenk
77af21f149
Static nginx site with grouped links, search filter, and 0012.de-inspired styling. Co-authored-by: Cursor <cursoragent@cursor.com>
551 lines
20 KiB
HTML
551 lines
20 KiB
HTML
<!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>
|