D4rkst3r/d4rkbot
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Startseite, Server-Seite v2 mit Logos, Lightbox-Fix, Navbar-Ausrichtung

Browse Source 
- Startseite (/): Hero mit CTAs (Discord-Invite + Devlogs), Live-Zahlen
  (Member, Server online, Spieler), Bereichs-Kacheln, neuestes Devlog
  als Teaser — kein Redirect mehr auf /devlogs
- Server-Seite v2: Übersichtsleiste (X/Y online, Spieler gesamt),
  2-Spalten-Grid, Server-Logo (neues Feld image_url, https-only, auch
  als Embed-Thumbnail im Discord-Status), große Spielerzahl, Uptime %
  + Peak aus den 24h-Samples, Adresse als Copy-Button
- Lightbox: rendert jetzt per Portal in <body> (Header/Scanlines
  schienen durchs Overlay), Pfeile stehen neben dem Bild statt drauf,
  Info-Zeile unterm Bild
- Navbar: Community-Dropdown-Button auf Link-Höhe ausgerichtet
  (line-height + align-items)
- Setup Server-Tab: Logo-URL-Feld

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-07-30 22:25:30 +02:00
co-authored by Claude Fable 5
parent be11398f7c
commit ef0fb066f7
10 changed files with 316 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/style.css
+87 -24
View File
@@ -118,7 +118,7 @@ body::after {
.nav-logo:hover { text-shadow: 0 0 18px rgba(245, 197, 24, .55); }
.nav-logo span { color: var(--neon2); }
.nav-links { display: flex; gap: 1.6rem; flex: 1; }
.nav-links { display: flex; gap: 1.6rem; flex: 1; align-items: center; }
.nav-links a {
position: relative;
font-family: var(--mono);
@@ -1257,13 +1257,14 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
}
/* ── NAV-DROPDOWNS + BURGER ────────────────────────── */
.nav-drop { position: relative; }
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn {
display: inline-flex; align-items: center; gap: .35rem;
background: none; border: 0; cursor: pointer;
font-family: var(--mono); font-size: .7rem;
letter-spacing: .25em; text-transform: uppercase;
color: var(--muted); padding: .3rem 0;
line-height: 1.6; /* wie die Nav-Links, sonst hängt der Button tiefer */
transition: color .2s, text-shadow .2s;
}
.nav-drop-btn:hover { color: var(--text); }
@@ -1320,15 +1321,21 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
}
/* ── LIGHTBOX ──────────────────────────────────────── */
/* z-index über Noise/Scanlines (900); rendert per Portal direkt in <body> */
.lightbox {
position: fixed; inset: 0; z-index: 1000;
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .92);
background: rgba(0, 0, 0, .95);
animation: lbIn .18s ease both;
}
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-row {
display: flex; align-items: center; gap: 1.2rem;
max-width: 96vw;
}
.lb-figure { display: flex; flex-direction: column; align-items: center; margin: 0; min-width: 0; }
.lb-img {
max-width: min(92vw, 1400px); max-height: 84vh;
max-width: 100%; max-height: 78vh; object-fit: contain;
border: 1px solid var(--border); border-radius: 8px;
box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
}
@@ -1340,24 +1347,23 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
}
.lb-close:hover { color: var(--neon2); border-color: var(--neon2); }
.lb-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0, 0, 0, .5); border: 1px solid var(--border); border-radius: 999px;
flex: none;
background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 999px;
color: var(--text); font-size: 1.8rem; line-height: 1;
width: 3rem; height: 3rem; cursor: pointer;
transition: color .15s, border-color .15s;
transition: color .15s, border-color .15s, background .15s;
}
.lb-nav:hover { color: var(--neon); border-color: var(--neon); }
.lb-prev { left: 1.2rem; }
.lb-next { right: 1.2rem; }
.lb-nav:hover { color: var(--neon); border-color: var(--neon); background: rgba(245, 197, 24, .08); }
.lb-meta {
position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
display: flex; gap: 1.2rem; align-items: baseline;
font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
color: var(--muted); background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px;
padding: .4rem 1rem; white-space: nowrap;
color: var(--muted); margin-top: .8rem; white-space: nowrap;
}
.lb-count { color: var(--neon); }
@media (max-width: 640px) {
.lb-row { gap: .5rem; }
.lb-nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }
}
/* ── SKELETON-LOADER ───────────────────────────────── */
.skel {
@@ -1378,24 +1384,53 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.skel-row { height: 2.6rem; border-radius: 10px; margin-bottom: .5rem; animation: riseIn .3s ease both; }
/* ── SERVER-STATUS-SEITE ───────────────────────────── */
.srv-card { margin-bottom: 1.3rem; }
.srv-summary {
display: flex; gap: 2.5rem; flex-wrap: wrap;
background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
padding: 1.1rem 1.6rem; margin-bottom: 1.5rem;
}
.srv-sum-item { display: flex; flex-direction: column; }
.srv-sum-n {
font-family: var(--display); font-size: 2.2rem; line-height: 1;
color: var(--neon); text-shadow: 0 0 16px rgba(245, 197, 24, .3);
}
.srv-sum-of { font-size: 1.2rem; color: var(--muted2); text-shadow: none; }
.srv-sum-label {
font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.srv-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 980px) { .srv-grid { grid-template-columns: 1fr 1fr; } }
.srv-card { margin-bottom: 0; }
.srv-card.srv-down { border-left: 3px solid rgba(242, 63, 67, .6); }
.srv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.srv-name { font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; }
.srv-status { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
.srv-head { display: flex; align-items: center; gap: 1rem; }
.srv-logo {
width: 52px; height: 52px; flex: none;
border-radius: 12px; object-fit: cover;
border: 1px solid var(--border); background: var(--bg3);
}
.srv-logo-emoji { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.srv-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.srv-name { font-family: var(--display); font-size: 1.5rem; letter-spacing: .04em; line-height: 1.1; }
.srv-status { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.srv-status.on { color: var(--success); }
.srv-status.off { color: #f23f43; }
.srv-ping { color: var(--muted2); }
.srv-ping, .srv-map { color: var(--muted2); }
.srv-count { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--neon); white-space: nowrap; }
.srv-count-max { font-size: 1.1rem; color: var(--muted2); }
.srv-bar { margin-top: .9rem; }
.srv-players { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin-top: .4rem; }
.srv-map { color: var(--muted2); }
.srv-chart { width: 100%; height: 90px; margin-top: 1rem; display: block; }
.srv-chart-label {
.srv-stats {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-family: var(--mono); font-size: .62rem; letter-spacing: .15em;
text-transform: uppercase; color: var(--muted2); margin-top: .25rem;
}
.srv-stats b { color: var(--text); font-weight: 400; }
.srv-stats .up-good { color: var(--success); }
.srv-stats .up-bad { color: #f23f43; }
.srv-connect { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.srv-addr { font-size: .8rem; }
.srv-addr { font-size: .8rem; cursor: pointer; transition: border-color .15s, color .15s; }
.srv-addr:hover { border-color: var(--neon); color: var(--neon); }
.srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
/* ── AUDIT-LOG ─────────────────────────────────────── */
@@ -1403,3 +1438,31 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.audit-ts { font-family: var(--mono); font-size: .65rem; color: var(--muted2); white-space: nowrap; }
.audit-action { font-family: var(--mono); font-size: .7rem; color: var(--neon); white-space: nowrap; }
.audit-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
/* ── STARTSEITE ────────────────────────────────────── */
.home-hero { min-height: 420px; }
.home-accent { color: var(--neon2); }
.home-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.home-cta-alt { border: 1px solid var(--border); }
.home-stats { margin-bottom: 1.5rem; }
.home-tiles {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.home-tile {
display: flex; flex-direction: column; gap: .3rem;
padding: 1.3rem 1.4rem;
}
.home-tile-icon { font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
.home-tile-title {
font-family: var(--display); font-size: 1.4rem; letter-spacing: .05em;
color: var(--text); transition: color .2s;
}
.home-tile:hover .home-tile-title { color: var(--neon); }
.home-tile-desc { font-weight: 300; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.home-devlog { display: block; }
.home-devlog-more {
display: inline-block; margin-top: .8rem;
font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--neon);
}