Den Entwurf und das Logo-Original einsortieren
Drei Dateien lagen unversioniert im Wurzelverzeichnis herum. Alle drei gehoeren ins Repo, nur nicht dorthin: logo.png -> docs/brand/logo.png ChatGPT Image 23. Juni 2025 ... -> docs/brand/studie-kopf-2025-06.png design_handoff_redesign/ -> docs/redesign/ logo.png ist NICHT irgendein Logo, sondern das Original, von dem docs/brand/README.md die ganze Zeit spricht: "ein einziges Original, 2048x2048 mit Transparenz". Nachgerechnet statt geraten -- auf den Inhalt beschnitten ergibt es 1986x1963, exakt die Masse von lockup.png. Es lag also die Quelle der Marke unversioniert daneben. Dabei aufgefallen und in der README vermerkt, nicht repariert: build.py liest das Original ueber einen festen Pfad ausserhalb des Repos (QUELLE = A:/Users/DAR/logo.png). Jetzt sind das zwei Kopien, die auseinanderlaufen koennen. Umstellen kann nur, wer weiss, welche der beiden gepflegt wird. Das zweite Bild ist eine frueherere Kopf-Studie und nicht die Vorlage der heutigen Marke -- andere Zeichnung, flacher, ohne Fell und Schulter. Sie wird nirgends benutzt und liegt als Herkunft. Vom Entwurfs-Paket ist der assets/-Ordner entfallen: er enthielt Kopien von mark.png und lockup.png, die zwei Verzeichnisse weiter im Original liegen. Die .dc.html-Referenzen zeigen jetzt auf ../brand/ und stellen das Logo weiter dar, statt mit kaputten Bildern zurueckzubleiben. Der Kopf der README sagt ausserdem, dass der Entwurf umgesetzt ist und wo bewusst abgewichen wurde -- sonst liest sich das Dokument in einem Jahr wie eine offene Aufgabe. Dazu eine Zeile, die seit dem Redesign nicht mehr stimmte: build.py bezeichnet (10, 10, 10) als "--bg der Marke". Das ist seit gestern #131316. Wirkt erst, wenn jemand build.py laufen laesst -- die erzeugten Icons in frontend/public/ tragen bis dahin den alten Grund. Neu bauen konnte ich sie hier nicht, es gibt weder Python noch Pillow auf dieser Maschine. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<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=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{color-scheme:dark}
|
||||
body{background:#131316;color:#ececee;font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
a:hover{color:#ffb340}
|
||||
button{font-family:inherit;cursor:pointer}
|
||||
::selection{background:rgba(255,154,31,.35);color:#131316}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;position:relative">
|
||||
<div style="position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 78% -10%,rgba(240,120,0,.12),transparent 60%)"></div>
|
||||
<header style="position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.85rem 2.5rem;background:rgba(19,19,22,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#ececee">
|
||||
<img src="../brand/mark.png" alt="" style="width:34px;height:34px;object-fit:contain">
|
||||
D4RKBOT<span style="color:#ff9a1f">_</span></a>
|
||||
<nav style="display:flex;gap:1.8rem;flex:1;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase">
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Funktionen</a>
|
||||
<a href="#" style="color:#ffb340;border-bottom:2px solid #ff9a1f;padding-bottom:.2rem">Befehle</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Community</a>
|
||||
</nav>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;color:#66666e">DE / EN</span>
|
||||
<a href="#" style="font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.55rem 1.3rem;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-weight:500">Anmelden</a>
|
||||
</header>
|
||||
<main style="flex:1;position:relative">
|
||||
<section style="max-width:1160px;margin:0 auto;padding:4.5rem 2.5rem 2.5rem;animation:riseIn .45s ease both">
|
||||
<div style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#ffb340;border:1px solid rgba(255,154,31,.4);padding:.35rem .8rem;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)">Referenz</div>
|
||||
<h1 style="font-size:3.6rem;font-weight:700;line-height:1.02;text-transform:uppercase;margin:1.1rem 0 .8rem">Be<span style="background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent">fehle</span></h1>
|
||||
<p style="font-size:1.05rem;color:#9a9aa3;max-width:560px;line-height:1.65">Alle Slash-Befehle im Überblick. Vieles läuft zusätzlich über Knöpfe direkt in den Nachrichten.</p>
|
||||
</section>
|
||||
<section style="max-width:1160px;margin:0 auto;padding:1rem 2.5rem 5rem">
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="3">
|
||||
<div style="margin-bottom:2.6rem">
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem">
|
||||
<span style="width:22px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.6rem">{{ g.label }}
|
||||
<sc-if value="{{ g.locked }}" hint-placeholder-val="{{ false }}"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#ffb340" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></sc-if>
|
||||
</h2>
|
||||
<span style="flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent)"></span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.55rem">
|
||||
<sc-for list="{{ g.cmds }}" as="c" hint-placeholder-count="6">
|
||||
<div style="display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap;background:#1b1b20;border:1px solid rgba(255,255,255,.08);padding:.75rem 1.1rem;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)" style-hover="border-color:rgba(255,154,31,.5);background:#1f1f25">
|
||||
<code style="font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:#ffb340;white-space:nowrap;flex:none;min-width:16rem">{{ c.name }}</code>
|
||||
<span style="color:#9a9aa3;font-size:.92rem;flex:1;min-width:15rem">{{ c.desc }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<p style="font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:#66666e">Moderations- und Einrichtungs-Befehle sind Mitgliedern mit den passenden Discord-Rechten vorbehalten.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer style="border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 2.5rem;display:flex;align-items:center;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3">
|
||||
<span style="display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#ececee;font-family:'Chakra Petch',sans-serif"><img src="../brand/mark.png" alt="" style="width:20px;height:20px;object-fit:contain">D4RKBOT<span style="color:#ff9a1f">_</span></span>
|
||||
<a href="#" style-hover="color:#ffb340">Quellcode</a><a href="#" style-hover="color:#ffb340">Status</a>
|
||||
<span style="margin-left:auto;display:flex;gap:1.2rem"><a href="#" style-hover="color:#ffb340">Impressum</a><a href="#" style-hover="color:#ffb340">Datenschutz</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const c = (name, desc) => ({ name, desc });
|
||||
return {
|
||||
groups: [
|
||||
{ label: 'Für alle', locked: false, cmds: [
|
||||
c('/rank', 'Zeigt deinen Rang, deine XP und den Fortschritt zum nächsten Level.'),
|
||||
c('/wunsch idee:…', 'Reicht einen Feature-Wunsch ein — landet im Voting-Kanal und auf der Roadmap.'),
|
||||
c('/bug titel:… beschreibung:…', 'Meldet einen Fehler als Issue im Repository. Wird er geschlossen, bekommst du eine Nachricht.'),
|
||||
c('/geburtstag setzen tag:… monat:…', 'Trägt deinen Geburtstag ein. Der Bot gratuliert morgens und vergibt eine Rolle für den Tag.'),
|
||||
c('/geburtstag entfernen', 'Trägt ihn wieder aus.'),
|
||||
c('/remind dauer:… text:…', 'Erinnert dich per Direktnachricht — etwa „2h" oder „30m".'),
|
||||
c('/tag name:…', 'Ruft einen gespeicherten Textbaustein ab, mit Vorschlägen beim Tippen.'),
|
||||
c('/ping', 'Lebenszeichen des Bots.'),
|
||||
c('/umfrage frage:… a:… b:…', 'Startet eine Abstimmung mit bis zu vier Antworten — Discord zählt selbst aus.'),
|
||||
c('/radio', 'Holt den Bot in deinen Sprachkanal und öffnet die Sender-Auswahl.'),
|
||||
]},
|
||||
{ label: 'Moderation', locked: true, cmds: [
|
||||
c('/warn user:… grund:…', 'Verwarnt jemanden, schickt eine Nachricht und schreibt es ins Protokoll.'),
|
||||
c('/warns user:…', 'Zeigt die Verwarnungs-Historie.'),
|
||||
c('/timeout user:… dauer:…', 'Setzt eine Auszeit.'),
|
||||
c('/purge anzahl:…', 'Löscht mehrere Nachrichten auf einmal.'),
|
||||
]},
|
||||
{ label: 'Einrichtung', locked: true, cmds: [
|
||||
c('/raid status | an | aus', 'Zeigt die Raid-Sperre an, setzt sie von Hand oder hebt sie sofort auf.'),
|
||||
c('/giveaway preis:… dauer:… gewinner:…', 'Startet eine Verlosung mit Teilnahme-Knopf und automatischer Ziehung.'),
|
||||
c('/ticket-setup', 'Postet den Knopf, über den Support-Tickets als private Threads entstehen.'),
|
||||
c('/playtester-setup', 'Postet den Bewerbungs-Knopf für das Playtester-Programm.'),
|
||||
c('/devlog-backfill', 'Holt ältere Devlog-Nachrichten nachträglich ins Archiv.'),
|
||||
c('/galerie-backfill', 'Dasselbe für den Screenshot-Kanal.'),
|
||||
]},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<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=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{color-scheme:dark}
|
||||
body{background:#131316;color:#ececee;font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
a:hover{color:#ffb340}
|
||||
button{font-family:inherit;cursor:pointer}
|
||||
::selection{background:rgba(255,154,31,.35);color:#131316}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;position:relative">
|
||||
<div style="position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 78% -10%,rgba(240,120,0,.12),transparent 60%)"></div>
|
||||
<header style="position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.85rem 2.5rem;background:rgba(19,19,22,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#ececee">
|
||||
<img src="../brand/mark.png" alt="" style="width:34px;height:34px;object-fit:contain">
|
||||
D4RKBOT<span style="color:#ff9a1f">_</span></a>
|
||||
<nav style="display:flex;gap:1.8rem;flex:1;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase">
|
||||
<a href="#" style="color:#ffb340;border-bottom:2px solid #ff9a1f;padding-bottom:.2rem">Funktionen</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Befehle</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Community</a>
|
||||
</nav>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;color:#66666e">DE / EN</span>
|
||||
<a href="#" style="font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.55rem 1.3rem;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-weight:500">Anmelden</a>
|
||||
</header>
|
||||
<main style="flex:1;position:relative">
|
||||
<section style="max-width:1160px;margin:0 auto;padding:4.5rem 2.5rem 2.5rem;animation:riseIn .45s ease both">
|
||||
<div style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#ffb340;border:1px solid rgba(255,154,31,.4);padding:.35rem .8rem;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)">Alles drin, nichts hinter einer Paywall</div>
|
||||
<h1 style="font-size:3.6rem;font-weight:700;line-height:1.02;text-transform:uppercase;margin:1.1rem 0 .8rem">Funk<span style="background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent">tionen</span></h1>
|
||||
<p style="font-size:1.05rem;color:#9a9aa3;max-width:560px;line-height:1.65">47 Funktionen — jede einzeln ein- und ausschaltbar, jede im Browser einstellbar.</p>
|
||||
</section>
|
||||
<section style="max-width:1160px;margin:0 auto;padding:1rem 2.5rem 5rem">
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="6">
|
||||
<div style="margin-bottom:2.8rem">
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem">
|
||||
<span style="width:22px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em">{{ g.label }}</h2>
|
||||
<span style="flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent)"></span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:#66666e">{{ g.count }}</span>
|
||||
</div>
|
||||
<div style="display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)">
|
||||
<sc-for list="{{ g.items }}" as="f" hint-placeholder-count="6">
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.08);padding:1.2rem 1.3rem;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);display:flex;flex-direction:column;gap:.4rem" style-hover="border-color:rgba(255,154,31,.5);background:#1f1f25;transform:translateY(-3px)">
|
||||
<div style="display:flex;align-items:center;gap:.65rem">
|
||||
<span style="display:inline-grid;place-items:center;width:32px;height:32px;background:rgba(255,154,31,.1);border:1px solid rgba(255,154,31,.3);color:#ffb340;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" dangerouslySetInnerHTML="{{ f.svg }}"></svg></span>
|
||||
<span style="font-weight:600;font-size:.98rem">{{ f.name }}</span>
|
||||
</div>
|
||||
<p style="color:#9a9aa3;font-size:.85rem;line-height:1.55;margin:0">{{ f.desc }}</p>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="border-top:1px solid rgba(255,255,255,.08);padding-top:1.8rem">
|
||||
<p style="color:#9a9aa3;font-size:.95rem;line-height:1.65;max-width:640px;margin:0 0 1.4rem">Gebaut, weil drei Bots mit je eigenem Abo für eine Community weder übersichtlich noch günstig sind. Der Quelltext liegt offen, der Betrieb kostet einen Container.</p>
|
||||
<div style="display:flex;gap:1rem;flex-wrap:wrap">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.8rem 1.6rem;font-weight:500;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 30px rgba(240,120,0,.3)">Befehle ansehen →</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c9c9cf;border:1px solid rgba(255,255,255,.18);padding:.8rem 1.6rem;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)" style-hover="background:rgba(255,255,255,.06);color:#ffb340">Zur Übersicht</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer style="border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 2.5rem;display:flex;align-items:center;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3">
|
||||
<span style="display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#ececee;font-family:'Chakra Petch',sans-serif"><img src="../brand/mark.png" alt="" style="width:20px;height:20px;object-fit:contain">D4RKBOT<span style="color:#ff9a1f">_</span></span>
|
||||
<a href="#" style-hover="color:#ffb340">Quellcode</a><a href="#" style-hover="color:#ffb340">Status</a>
|
||||
<span style="margin-left:auto;display:flex;gap:1.2rem"><a href="#" style-hover="color:#ffb340">Impressum</a><a href="#" style-hover="color:#ffb340">Datenschutz</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const P = {
|
||||
file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
|
||||
terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
|
||||
rocket: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
|
||||
activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
|
||||
message: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
|
||||
play: '<polygon points="6 3 20 12 6 21 6 3"/>',
|
||||
trend: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
||||
star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
|
||||
star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
|
||||
image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
|
||||
thumbs: '<path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>',
|
||||
sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>',
|
||||
gift: '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>',
|
||||
cake: '<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v3"/><path d="M12 8v3"/><path d="M17 8v3"/>',
|
||||
calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
|
||||
game: '<line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/>',
|
||||
key: '<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>',
|
||||
shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
|
||||
lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
||||
bot: '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>',
|
||||
archive: '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
|
||||
mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
|
||||
ticket: '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>',
|
||||
wand: '<path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/>',
|
||||
usercog: '<circle cx="18" cy="15" r="3"/><circle cx="9" cy="7" r="4"/><path d="M10 15H6a4 4 0 0 0-4 4v2"/><path d="m21.7 16.4-.9-.3"/><path d="m15.2 13.9-.9-.3"/><path d="m16.6 18.7.3-.9"/><path d="m19.1 12.2.3-.9"/><path d="m19.6 18.7-.4-1"/><path d="m16.8 12.3-.4-1"/><path d="m14.3 16.6 1-.4"/><path d="m20.7 13.8 1-.4"/>',
|
||||
refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
|
||||
warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
||||
server: '<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/>',
|
||||
monitor: '<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>',
|
||||
mic: '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/>',
|
||||
zap: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
|
||||
clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
|
||||
send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
|
||||
tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>',
|
||||
db: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/>',
|
||||
pkg: '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
|
||||
link: '<path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/>',
|
||||
palette: '<circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>',
|
||||
};
|
||||
const m = (icon, name, desc) => ({ svg: { __html: P[icon] }, name, desc });
|
||||
const g = (label, items) => ({ label, count: items.length + ' MODULE', items });
|
||||
return {
|
||||
groups: [
|
||||
g('Inhalte & Feeds', [
|
||||
m('file', 'Devlogs', 'Entwicklungs-Berichte als gebrandetes Embed posten und durchsuchbar archivieren.'),
|
||||
m('terminal', 'Commit-Feed', 'Pushes aus Gitea landen als Embed im Kanal. Archiviert wird immer.'),
|
||||
m('rocket', 'Release-Ankündigungen', 'Neue Releases werden angekündigt und landen im Changelog.'),
|
||||
m('activity', 'Wochen-Rückblick', 'Sonntags um 20 Uhr eine Zusammenfassung der Woche.'),
|
||||
m('message', 'Devlog-Threads', 'Unter jedem Devlog entsteht ein Diskussions-Thread.'),
|
||||
m('play', 'Twitch & YouTube', 'Meldet Livestreams und neue Videos.'),
|
||||
]),
|
||||
g('Community', [
|
||||
m('trend', 'Level-System', 'XP fürs Mitreden, Rollen-Belohnungen und öffentliche Bestenliste.'),
|
||||
m('star', 'Starboard', 'Nachrichten mit genug Sternen landen in einem Best-of-Kanal.'),
|
||||
m('image', 'Screenshot-Galerie', 'Bilder aus einem Kanal erscheinen in der öffentlichen Galerie.'),
|
||||
m('thumbs', 'Feature-Wünsche', 'Wünsche einreichen und abstimmen — im Discord und auf der Roadmap.'),
|
||||
m('thumbs', 'Umfragen', 'Schnelle Abstimmungen als native Discord-Umfrage — /umfrage.'),
|
||||
m('sparkles', 'Radio', 'Webradio im Sprachkanal — /radio öffnet die Sender-Auswahl.'),
|
||||
m('gift', 'Verlosungen', 'Teilnahme per Knopf, automatische Ziehung, Neuauslosung möglich.'),
|
||||
m('cake', 'Geburtstage', 'Gratulation am großen Tag, optional mit Tages-Rolle.'),
|
||||
m('calendar', 'Event-Ankündigungen', 'Neue Discord-Events werden angekündigt und erscheinen auf der Events-Seite.'),
|
||||
m('game', 'Playtester-Programm', 'Bewerbungs-Knopf, Rolle und Teilnehmerliste.'),
|
||||
m('key', 'Alpha-Keys', 'Schlüssel-Pool mit Verteilung per Direktnachricht.'),
|
||||
m('shield', 'Rollen-Menüs', 'Selbstbedienungs-Rollen per Knopf — im Discord und im Profil.'),
|
||||
m('file', 'Bewerbungen', 'Formulare als Eingabefenster, Prüfung mit Annehmen/Ablehnen.'),
|
||||
m('link', 'Verknüpfte Rollen', 'Rollen an geprüften Werten — Level, Playtester, Mitgliedschaft.'),
|
||||
]),
|
||||
g('Moderation & Support', [
|
||||
m('shield', 'Moderation', 'Verwarnen, Auszeiten, Aufräumen — mit Verlauf und Protokoll.'),
|
||||
m('bot', 'AutoMod-Protokoll', 'Treffer von Discords Filter landen im Protokoll, Regeln sind schaltbar.'),
|
||||
m('lock', 'Raid-Schutz', 'Erkennt Beitritts-Wellen und macht den Server vorübergehend dicht.'),
|
||||
m('archive', 'Protokoll', 'Gelöschte und bearbeitete Nachrichten, Beitritte, Namens- und Rollenwechsel.'),
|
||||
m('mail', 'Modmail', 'Direktnachrichten an den Bot landen als Thread beim Team.'),
|
||||
m('ticket', 'Tickets', 'Private Threads per Knopf, beim Schließen ein Gesprächsprotokoll.'),
|
||||
m('wand', 'Willkommens-Karten', 'Begrüßung neuer Mitglieder mit gerendertem Bild.'),
|
||||
m('usercog', 'Auto-Rolle', 'Neue Mitglieder bekommen automatisch eine Startrolle.'),
|
||||
m('refresh', 'Rollen merken', 'Wer zurückkommt, bekommt seine Rollen wieder.'),
|
||||
m('warning', 'Fehlermeldungen', 'Meldungen werden zu Issues im Repository, mit Rückmeldung.'),
|
||||
]),
|
||||
g('Gaming', [
|
||||
m('server', 'Game-Server-Monitor', 'Live-Status der Game-Server mit Verlauf und Ausfall-Alarm.'),
|
||||
m('sparkles', 'LS — Höfe & Preise', 'Besitzkarte, Preiskurven übers Jahr und je Hof ein Embed mit Land und Fuhrpark.'),
|
||||
]),
|
||||
g('Server & Technik', [
|
||||
m('monitor', 'Erreichbarkeits-Wächter', 'Prüft hinterlegte Adressen und meldet Ausfälle per Direktnachricht.'),
|
||||
m('mic', 'Temporäre Sprachkanäle', 'Beitritt zum Hub erzeugt einen eigenen Kanal mit Bedienfeld.'),
|
||||
m('zap', 'Auto-Antworten', 'Der Bot antwortet auf hinterlegte Schlüsselwörter.'),
|
||||
m('clock', 'Erinnerungen', 'Mitglieder lassen sich per Direktnachricht erinnern.'),
|
||||
m('send', 'Geplante Beiträge', 'Nachrichten zu festen Zeiten, einmalig oder wiederkehrend.'),
|
||||
m('tag', 'Textbausteine', 'Gespeicherte Texte per Befehl abrufen.'),
|
||||
m('db', 'Datenbank-Sicherung', 'Nächtliche Sicherung mit Aufbewahrung über 14 Tage.'),
|
||||
m('pkg', 'Repository-Sicherung', 'Alle Gitea-Repositories als Bundle sichern.'),
|
||||
m('lock', 'Login nur für Mitglieder', 'Nur wer auf dem Discord-Server ist, kann sich im Web anmelden.'),
|
||||
]),
|
||||
g('Drumherum', [
|
||||
m('palette', 'Webinterface im eigenen Look', 'Alles im Browser einstellbar — keine Konfigurationsdatei, kein Neustart.'),
|
||||
m('message', 'Texte selbst schreiben', 'Alles, was der Bot schreibt, lässt sich im Panel ändern — mit Platzhaltern.'),
|
||||
m('key', 'API & Single Sign-On', 'Eigene Skripte posten über die API v1 mit Bearer-Schlüsseln.'),
|
||||
m('file', 'Eigene Seiten', 'Regeln, Über uns, FAQ — in Markdown, mit einem Klick veröffentlicht.'),
|
||||
m('usercog', 'Rechte fürs Team', 'Gezielter Zugriff auf einzelne Bereiche, alles im Protokoll.'),
|
||||
m('server', 'Läuft überall', 'Node und SQLite in einem Container, ein Volume für die Daten.'),
|
||||
]),
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<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=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{color-scheme:dark}
|
||||
body{background:#131316;color:#ececee;font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
a:hover{color:#ffb340}
|
||||
button{font-family:inherit;cursor:pointer}
|
||||
::selection{background:rgba(255,154,31,.35);color:#131316}
|
||||
@keyframes pulseGlow{0%,100%{opacity:.5}50%{opacity:1}}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;position:relative">
|
||||
<div style="position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 78% -10%,rgba(240,120,0,.14),transparent 60%),radial-gradient(700px 420px at 5% 110%,rgba(255,179,64,.06),transparent 60%)"></div>
|
||||
<header style="position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.85rem 2.5rem;background:rgba(19,19,22,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#ececee">
|
||||
<img src="../brand/mark.png" alt="" style="width:34px;height:34px;object-fit:contain">
|
||||
D4RKBOT<span style="color:#ff9a1f">_</span></a>
|
||||
<nav style="display:flex;gap:1.8rem;flex:1;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase">
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Funktionen</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Befehle</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Community</a>
|
||||
</nav>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;color:#66666e">DE / EN</span>
|
||||
<a href="#" style="font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.55rem 1.3rem;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-weight:500">Anmelden</a>
|
||||
</header>
|
||||
<main style="flex:1;position:relative">
|
||||
<section style="max-width:1160px;margin:0 auto;padding:5rem 2.5rem 4rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center">
|
||||
<div style="animation:riseIn .5s ease both">
|
||||
<div style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#ffb340;border:1px solid rgba(255,154,31,.4);padding:.35rem .8rem;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)"><span style="width:6px;height:6px;background:#ffb340;border-radius:50%;animation:pulseGlow 2s infinite"></span>Selbst gebaut · keine Paywall</div>
|
||||
<h1 style="font-size:4.1rem;font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:1.2rem 0 1rem;text-transform:uppercase">Ein Discord-Bot,<br><span style="color:transparent;-webkit-text-stroke:1.5px #9a9aa3">der alles</span> <span style="background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(240,120,0,.35))">macht</span></h1>
|
||||
<p style="font-size:1.05rem;color:#9a9aa3;max-width:520px;line-height:1.65">Devlogs, Level, Moderation, Server-Monitoring, Verlosungen, Tickets — was sonst drei Bots mit Abo-Modell erledigen, läuft hier in einem, mit eigenem Webinterface.</p>
|
||||
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.8rem 1.6rem;font-weight:500;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 30px rgba(240,120,0,.3)">Alle Funktionen →</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c9c9cf;border:1px solid rgba(255,255,255,.18);padding:.8rem 1.6rem;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)" style-hover="background:rgba(255,255,255,.06);color:#ffb340">/befehle</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:relative;animation:riseIn .5s ease .1s both">
|
||||
<div style="position:absolute;inset:-1.2rem;border:1px solid rgba(255,255,255,.09);clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px)"></div>
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.1);padding:1.4rem;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)">
|
||||
<div style="display:flex;justify-content:center;padding:.4rem 0 1.1rem;border-bottom:1px solid rgba(255,255,255,.07)">
|
||||
<img src="../brand/lockup.png" alt="D4RKST3R" style="width:200px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))">
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:.7rem;padding:1rem 0 .9rem">
|
||||
<span style="width:8px;height:8px;border-radius:50%;background:#3ba55d;box-shadow:0 0 10px rgba(59,165,93,.7)"></span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;color:#9a9aa3">ONLINE · 38 MS · UPTIME 99,2 %</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:.7rem">
|
||||
<sc-for list="{{ heroStats }}" as="st" hint-placeholder-count="4">
|
||||
<div style="background:rgba(255,154,31,.06);border:1px solid rgba(255,154,31,.22);padding:.8rem .9rem;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)">
|
||||
<div style="font-size:1.7rem;font-weight:700;background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1">{{ st.n }}</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3;margin-top:.25rem">{{ st.label }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section style="max-width:1160px;margin:0 auto;padding:1rem 2.5rem 5rem">
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem">
|
||||
<span style="width:22px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em">Was er kann</h2>
|
||||
<span style="flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent)"></span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.12em;color:#66666e">40 MODULE · EINZELN SCHALTBAR</span>
|
||||
</div>
|
||||
<div style="display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)">
|
||||
<sc-for list="{{ tiles }}" as="tl" hint-placeholder-count="9">
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.08);padding:1.3rem 1.4rem;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);display:flex;flex-direction:column;gap:.45rem" style-hover="border-color:rgba(255,154,31,.5);background:#1f1f25;transform:translateY(-3px)">
|
||||
<div style="display:flex;align-items:center;gap:.7rem">
|
||||
<span style="display:inline-grid;place-items:center;width:36px;height:36px;background:rgba(255,154,31,.1);border:1px solid rgba(255,154,31,.3);color:#ffb340;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" dangerouslySetInnerHTML="{{ tl.svg }}"></svg></span>
|
||||
<span style="font-weight:600;font-size:1.02rem">{{ tl.title }}</span>
|
||||
</div>
|
||||
<p style="color:#9a9aa3;font-size:.88rem;line-height:1.55;margin:0">{{ tl.desc }}</p>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem">
|
||||
<div style="background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.14);padding:1.5rem 1.6rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)">
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#c9c9cf">Für Entwickler</span>
|
||||
<h3 style="font-size:1.2rem;font-weight:700;margin:.4rem 0 .4rem">API & Single Sign-On</h3>
|
||||
<p style="color:#9a9aa3;font-size:.88rem;line-height:1.55;margin:0">Eigene Skripte posten über die API v1 mit Bearer-Schlüsseln und Bereichs-Rechten. Andere Dienste nutzen den Discord-Login des Bots mit.</p>
|
||||
</div>
|
||||
<div style="background:linear-gradient(135deg,rgba(240,120,0,.16),rgba(240,120,0,.04));border:1px solid rgba(255,154,31,.35);padding:1.5rem 1.6rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)">
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#ffb340">Hosting</span>
|
||||
<h3 style="font-size:1.2rem;font-weight:700;margin:.4rem 0 .4rem">Läuft überall</h3>
|
||||
<p style="color:#9a9aa3;font-size:.88rem;line-height:1.55;margin:0">Node und SQLite in einem Container, ein Volume für die Daten. Nächtliche Sicherungen inklusive — von der Datenbank und allen Repositories.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top:2.5rem;font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:#66666e">Der Bot läuft für die D4RKST3R-Community — <a href="#" style="color:#9a9aa3;text-decoration:underline" style-hover="color:#ffb340">zum Community-Hub</a>.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer style="border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 2.5rem;display:flex;align-items:center;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3">
|
||||
<span style="display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#ececee;font-family:'Chakra Petch',sans-serif"><img src="../brand/mark.png" alt="" style="width:20px;height:20px;object-fit:contain">D4RKBOT<span style="color:#ff9a1f">_</span></span>
|
||||
<a href="#" style-hover="color:#ffb340">Quellcode</a><a href="#" style-hover="color:#ffb340">Status</a>
|
||||
<span style="margin-left:auto;display:flex;gap:1.2rem"><a href="#" style-hover="color:#ffb340">Impressum</a><a href="#" style-hover="color:#ffb340">Datenschutz</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const P = {
|
||||
file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
|
||||
server: '<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/>',
|
||||
trend: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
||||
shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
|
||||
ticket: '<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>',
|
||||
gift: '<rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>',
|
||||
cake: '<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v3"/><path d="M12 8v3"/><path d="M17 8v3"/>',
|
||||
wand: '<path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/>',
|
||||
roles: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
||||
};
|
||||
const m = (icon, title, desc) => ({ svg: { __html: P[icon] }, title, desc });
|
||||
return {
|
||||
heroStats: [
|
||||
{ n: '40', label: 'Funktionen' },
|
||||
{ n: '18', label: 'Slash-Befehle' },
|
||||
{ n: '300+', label: 'Spiele im Monitor' },
|
||||
{ n: '0 €', label: 'Kosten' },
|
||||
],
|
||||
tiles: [
|
||||
m('file', 'Devlogs & Feeds', 'Entwicklungs-Berichte als gebrandetes Embed, durchsuchbar archiviert. Commits und Releases aus Gitea genauso.'),
|
||||
m('server', 'Server-Monitor', 'Über 300 Spiele per gamedig, dazu FiveM. Live-Embed pro Server, Alarm bei Ausfall.'),
|
||||
m('trend', 'Level & Aktivität', 'XP fürs Mitreden mit Rollen-Belohnungen und öffentlicher Bestenliste.'),
|
||||
m('roles', 'Rollen-Menüs', 'Selbstbedienung per Knopfdruck — im Discord und im Browser.'),
|
||||
m('ticket', 'Support & Kontakt', 'Tickets als private Threads mit Gesprächsprotokoll, dazu Modmail.'),
|
||||
m('shield', 'Moderation', 'Verwarnungen mit Verlauf, Auszeiten, Aufräumen — alles im Mod-Log.'),
|
||||
m('gift', 'Verlosungen', 'Teilnahme per Knopf, automatische Ziehung, Neuauslosung möglich.'),
|
||||
m('cake', 'Geburtstage', 'Der Bot gratuliert morgens und vergibt eine Rolle für den Tag.'),
|
||||
m('wand', 'Willkommens-Karten', 'Neue Mitglieder bekommen ein gerendertes Bild mit Avatar und Nummer.'),
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<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=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{color-scheme:dark}
|
||||
body{background:#131316;color:#ececee;font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
a:hover{color:#ffb340}
|
||||
button{font-family:inherit;cursor:pointer}
|
||||
::selection{background:rgba(255,154,31,.35);color:#131316}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;position:relative">
|
||||
<div style="position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 78% -10%,rgba(240,120,0,.1),transparent 60%)"></div>
|
||||
<header style="position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.85rem 2.5rem;background:rgba(19,19,22,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#ececee">
|
||||
<img src="../brand/mark.png" alt="" style="width:34px;height:34px;object-fit:contain">
|
||||
D4RKBOT<span style="color:#ff9a1f">_</span></a>
|
||||
<nav style="display:flex;gap:1.8rem;flex:1;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase">
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Funktionen</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Befehle</a>
|
||||
<a href="#" style="color:#ffb340;border-bottom:2px solid #ff9a1f;padding-bottom:.2rem">Dashboard</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Community</a>
|
||||
</nav>
|
||||
<button style="display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.3rem .8rem .3rem .35rem;background:rgba(255,255,255,.04)">
|
||||
<span style="width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,154,31,.4);background:#1f1f25;display:inline-grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:#9a9aa3">D</span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:#9a9aa3">d4rkst3r</span>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#66666e" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
|
||||
</button>
|
||||
</header>
|
||||
<main style="flex:1;position:relative">
|
||||
<section style="max-width:1360px;margin:0 auto;padding:2.5rem 2.5rem 1.5rem;animation:riseIn .4s ease both">
|
||||
<div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
|
||||
<h1 style="font-size:2.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em">Dash<span style="background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent">board</span></h1>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;color:#66666e;text-transform:uppercase">Alles an einem Ort — Änderungen greifen sofort</span>
|
||||
<span style="margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .7rem;border:1px solid rgba(59,165,93,.45);color:#3ba55d;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)"><span style="width:6px;height:6px;border-radius:50%;background:currentColor"></span>Bot online · 38 ms</span>
|
||||
</div>
|
||||
</section>
|
||||
<section style="max-width:1360px;margin:0 auto;padding:.5rem 2.5rem 4.5rem;display:flex;gap:1.8rem;align-items:flex-start">
|
||||
<nav style="display:flex;flex-direction:column;gap:.2rem;position:sticky;top:5rem;width:13rem;flex-shrink:0">
|
||||
<div style="display:flex;align-items:center;gap:.5rem;background:#1b1b20;border:1px solid rgba(255,255,255,.1);padding:.5rem .7rem;margin-bottom:.6rem;color:#66666e;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em">Suchen …</span>
|
||||
</div>
|
||||
<sc-for list="{{ navGroups }}" as="grp" hint-placeholder-count="7">
|
||||
<div style="display:flex;flex-direction:column;gap:.15rem;margin-bottom:.65rem">
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:#66666e;padding:.25rem .8rem">{{ grp.label }}</span>
|
||||
<sc-for list="{{ grp.items }}" as="it" hint-placeholder-count="3">
|
||||
<button style="{{ it.style }}" style-hover="color:#ececee;background:rgba(255,255,255,.04)">{{ it.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
</nav>
|
||||
<div style="flex:1;min-width:0;animation:riseIn .4s ease .06s both">
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.09);padding:1.5rem 1.7rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);margin-bottom:1.2rem">
|
||||
<div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem">
|
||||
<img src="../brand/mark.png" alt="" style="width:46px;height:46px;object-fit:contain">
|
||||
<div style="display:flex;flex-direction:column;gap:.3rem">
|
||||
<span style="font-weight:700;font-size:1.05rem;display:flex;align-items:baseline;gap:.5rem">D4RKBOT<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:#66666e">d4rkbot#4471</span></span>
|
||||
<span style="display:inline-flex;align-items:center;gap:.4rem;width:fit-content;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;padding:.14rem .5rem;border:1px solid rgba(59,165,93,.45);color:#3ba55d"><span style="width:5px;height:5px;border-radius:50%;background:currentColor"></span>online</span>
|
||||
</div>
|
||||
<span style="margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;color:#66666e">SEIT 6 T 14 STD · 1 SERVER</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:1px;align-items:stretch;height:32px;overflow:hidden">
|
||||
<sc-for list="{{ ticks }}" as="tk" hint-placeholder-count="60">
|
||||
<span style="flex:1 0 3px;min-width:3px;background:{{ tk }}"></span>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.08em;color:#66666e;margin:.5rem 0 1.4rem">
|
||||
<span>VOR 7 TAGEN</span><span><span style="color:#3ba55d">99,2 % ERREICHBAR</span> · JETZT</span>
|
||||
</div>
|
||||
<div style="display:grid;gap:.8rem;grid-template-columns:repeat(4,1fr)">
|
||||
<sc-for list="{{ kpis }}" as="k" hint-placeholder-count="4">
|
||||
<div style="background:#131316;border:1px solid rgba(255,255,255,.08);padding:1rem 1.1rem;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)">
|
||||
<div style="font-size:1.6rem;font-weight:700;line-height:1.1">{{ k.v }}<span style="font-size:.85rem;color:#66666e;font-weight:400">{{ k.of }}</span></div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3;margin-top:.2rem">{{ k.label }}</div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:.6rem;margin-top:.4rem;min-height:1em;color:{{ k.noteColor }}">{{ k.note }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1.2fr .8fr;gap:1.2rem">
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.09);padding:1.4rem 1.6rem;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)">
|
||||
<div style="display:flex;align-items:center;gap:.8rem;margin-bottom:1rem">
|
||||
<span style="width:18px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em">Aktivität</h2>
|
||||
<span style="margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:#66666e">4.812 NACHRICHTEN / 30 TAGE</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:flex-end;gap:3px;height:88px">
|
||||
<sc-for list="{{ bars }}" as="b" hint-placeholder-count="30">
|
||||
<span style="{{ b }}"></span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#1b1b20;border:1px solid rgba(255,255,255,.09);padding:1.4rem 1.6rem;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)">
|
||||
<div style="display:flex;align-items:center;gap:.8rem;margin-bottom:1rem">
|
||||
<span style="width:18px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em">Module</h2>
|
||||
<span style="margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:#66666e">33/41 AN</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:.7rem">
|
||||
<sc-for list="{{ modGroups }}" as="mg" hint-placeholder-count="5">
|
||||
<div style="display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:#9a9aa3">
|
||||
<span style="flex:0 0 9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ mg.name }}</span>
|
||||
<span style="flex:1;height:5px;background:rgba(255,255,255,.08);overflow:hidden"><i style="{{ mg.barStyle }}"></i></span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:#66666e;flex:0 0 2.6rem;text-align:right">{{ mg.count }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer style="border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 2.5rem;display:flex;align-items:center;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3">
|
||||
<span style="display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#ececee;font-family:'Chakra Petch',sans-serif"><img src="../brand/mark.png" alt="" style="width:20px;height:20px;object-fit:contain">D4RKBOT<span style="color:#ff9a1f">_</span></span>
|
||||
<a href="#" style-hover="color:#ffb340">Quellcode</a><a href="#" style-hover="color:#ffb340">Status</a>
|
||||
<span style="margin-left:auto;display:flex;gap:1.2rem"><a href="#" style-hover="color:#ffb340">Impressum</a><a href="#" style-hover="color:#ffb340">Datenschutz</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const base = 'display:flex;align-items:center;gap:.6rem;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;border-left:2px solid transparent;padding:.5rem .8rem;text-align:left;width:100%;';
|
||||
const item = (label, active) => ({ label, style: base + (active
|
||||
? 'color:#ffb340;background:rgba(255,154,31,.08);border-left:2px solid #ff9a1f;'
|
||||
: 'color:#9a9aa3;') });
|
||||
const navGroups = [
|
||||
{ label: 'Meine Funktionen', items: [item('Devlogs'), item('Willkommens-Karten'), item('Tickets'), item('Starboard'), item('Galerie')] },
|
||||
{ label: 'Überblick', items: [item('Status', true), item('Module'), item('Texte'), item('Werte')] },
|
||||
{ label: 'Auftritt', items: [item('Brand'), item('Seiten')] },
|
||||
{ label: 'Inhalte', items: [item('Feeds'), item('Composer')] },
|
||||
{ label: 'Community', items: [item('Community'), item('Rollen'), item('Support'), item('Playtester'), item('Bewerbungen')] },
|
||||
{ label: 'Gaming', items: [item('Game-Server'), item('LS — Höfe & Preise')] },
|
||||
{ label: 'Technik', items: [item('System')] },
|
||||
{ label: 'Zugang', items: [item('API'), item('Team')] },
|
||||
];
|
||||
const ticks = [];
|
||||
for (let i = 0; i < 168; i++) {
|
||||
let c = '#3ba55d';
|
||||
if (i >= 61 && i <= 63) c = '#f23f43';
|
||||
else if (i === 60 || i === 64) c = '#ff9a1f';
|
||||
else if (i < 6) c = 'rgba(255,255,255,.08)';
|
||||
ticks.push(c);
|
||||
}
|
||||
const bars = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const h = Math.max(6, Math.round(50 + 45 * Math.sin(i * 1.7) * Math.cos(i * 0.9) + (i % 7 === 5 ? 30 : 0)));
|
||||
bars.push('flex:1;min-width:2px;background:linear-gradient(180deg,#ffb340,rgba(240,120,0,.2));height:' + Math.min(100, h) + '%');
|
||||
}
|
||||
const grp = (name, pct, count, warn) => ({
|
||||
name, count,
|
||||
barStyle: 'display:block;height:100%;width:' + pct + '%;background:' + (warn ? '#f23f43' : 'linear-gradient(90deg,#ffb340,#f07800)'),
|
||||
});
|
||||
return {
|
||||
navGroups, ticks, bars,
|
||||
kpis: [
|
||||
{ v: '33', of: '/41', label: 'Module an', note: '2 unvollständig', noteColor: '#ff9a1f' },
|
||||
{ v: '214', of: '', label: 'Member', note: '+6 in 7 Tagen', noteColor: '#3ba55d' },
|
||||
{ v: '87', of: '', label: 'Devlogs', note: 'vor 2 Tagen', noteColor: '#66666e' },
|
||||
{ v: '18,4', of: ' MB', label: 'Datenbank', note: 'Backup heute', noteColor: '#3ba55d' },
|
||||
],
|
||||
modGroups: [
|
||||
grp('Inhalte & Feeds', 100, '6/6'),
|
||||
grp('Community', 79, '11/14'),
|
||||
grp('Moderation & Support', 90, '9/10'),
|
||||
grp('Gaming', 50, '1/2'),
|
||||
grp('Server & Technik', 67, '6/9'),
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<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=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
html{color-scheme:dark}
|
||||
body{background:#131316;color:#ececee;font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden;min-height:100vh}
|
||||
a{color:inherit;text-decoration:none}
|
||||
a:hover{color:#ffb340}
|
||||
button{font-family:inherit;cursor:pointer}
|
||||
::selection{background:rgba(255,154,31,.35);color:#131316}
|
||||
@keyframes pulseGlow{0%,100%{opacity:.5}50%{opacity:1}}
|
||||
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;position:relative">
|
||||
<div style="position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 520px at 50% -12%,rgba(240,120,0,.16),transparent 60%)"></div>
|
||||
<header style="position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:2rem;padding:.85rem 2.5rem;background:rgba(19,19,22,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#ececee">
|
||||
<img src="../brand/mark.png" alt="" style="width:34px;height:34px;object-fit:contain">
|
||||
D4RKST<span style="color:#ff9a1f">3R</span></a>
|
||||
<nav style="display:flex;gap:1.8rem;flex:1;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase">
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Devlog</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Roadmap</a>
|
||||
<a href="#" style="color:#9a9aa3" style-hover="color:#ffb340">Server</a>
|
||||
<button style="display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3" style-hover="color:#ffb340">Community
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></button>
|
||||
</nav>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;color:#66666e">DE / EN</span>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.55rem 1.3rem;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);font-weight:500">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20.32 4.37a19.8 19.8 0 0 0-4.93-1.51 13.78 13.78 0 0 0-.64 1.28 18.27 18.27 0 0 0-5.5 0 12.64 12.64 0 0 0-.64-1.28c-1.71.29-3.37.8-4.93 1.51A20.26 20.26 0 0 0 .1 18.06a19.9 19.9 0 0 0 6.07 3.03c.49-.66.93-1.37 1.3-2.1a12.9 12.9 0 0 1-2.05-.98c.17-.12.34-.25.5-.38a14.2 14.2 0 0 0 12.16 0c.16.13.33.26.5.38-.65.39-1.34.71-2.05.98.37.73.81 1.44 1.3 2.1a19.84 19.84 0 0 0 6.07-3.03 20.2 20.2 0 0 0-3.58-13.69ZM8.02 15.33c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.95-2.42 2.16-2.42 1.21 0 2.18 1.09 2.16 2.42 0 1.34-.95 2.42-2.16 2.42Zm7.96 0c-1.18 0-2.15-1.08-2.15-2.42 0-1.33.95-2.42 2.15-2.42 1.22 0 2.18 1.09 2.16 2.42 0 1.34-.94 2.42-2.16 2.42Z"></path></svg>
|
||||
Login</a>
|
||||
</header>
|
||||
<main style="flex:1;position:relative">
|
||||
<section style="max-width:1160px;margin:0 auto;padding:4.5rem 2.5rem 3.5rem;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center">
|
||||
<div style="animation:riseIn .5s ease both">
|
||||
<div style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#ffb340;border:1px solid rgba(255,154,31,.4);padding:.35rem .8rem;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)"><span style="width:6px;height:6px;background:#ffb340;border-radius:50%;animation:pulseGlow 2s infinite"></span>Community-Hub</div>
|
||||
<h1 style="font-size:4rem;font-weight:700;line-height:1.02;text-transform:uppercase;margin:1.2rem 0 1rem">Willkommen bei<br><span style="background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(240,120,0,.35))">D4RKST3R</span></h1>
|
||||
<p style="font-size:1.05rem;color:#9a9aa3;max-width:520px;line-height:1.65">Devlogs, Roadmap, Server-Status und alles aus der Community — an einem Ort, direkt aus dem Discord.</p>
|
||||
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem">
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#131316;background:linear-gradient(135deg,#ffb340,#f07800);padding:.8rem 1.6rem;font-weight:500;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 30px rgba(240,120,0,.3)">Zum Discord →</a>
|
||||
<a href="#" style="display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c9c9cf;border:1px solid rgba(255,255,255,.18);padding:.8rem 1.6rem;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)" style-hover="background:rgba(255,255,255,.06);color:#ffb340">Devlogs lesen</a>
|
||||
</div>
|
||||
<div style="display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.4rem">
|
||||
<div><div style="font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1">214</div><div style="font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3;margin-top:.25rem">Member im Discord</div></div>
|
||||
<div><div style="font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1">3<span style="font-size:1.1rem;color:#66666e;-webkit-text-fill-color:#66666e"> / 4</span></div><div style="font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3;margin-top:.25rem">Server online</div></div>
|
||||
<div><div style="font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,#ffb340,#f07800);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1">7</div><div style="font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3;margin-top:.25rem">Spieler gerade drauf</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="animation:riseIn .5s ease .1s both">
|
||||
<img src="../brand/lockup.png" alt="D4RKST3R" style="width:300px;height:auto;object-fit:contain;filter:drop-shadow(0 16px 44px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(240,120,0,.15))">
|
||||
</div>
|
||||
</section>
|
||||
<section style="max-width:1160px;margin:0 auto;padding:.5rem 2.5rem 5rem">
|
||||
<div style="display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)">
|
||||
<sc-for list="{{ tiles }}" as="tl" hint-placeholder-count="6">
|
||||
<a href="#" style="background:#1b1b20;border:1px solid rgba(255,255,255,.08);padding:1.3rem 1.4rem;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);display:flex;flex-direction:column;gap:.45rem" style-hover="border-color:rgba(255,154,31,.5);background:#1f1f25;transform:translateY(-3px)">
|
||||
<div style="display:flex;align-items:center;gap:.7rem">
|
||||
<span style="display:inline-grid;place-items:center;width:36px;height:36px;background:rgba(255,154,31,.1);border:1px solid rgba(255,154,31,.3);color:#ffb340;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" dangerouslySetInnerHTML="{{ tl.svg }}"></svg></span>
|
||||
<span style="font-weight:600;font-size:1.05rem;color:#ececee">{{ tl.title }}</span>
|
||||
</div>
|
||||
<p style="color:#9a9aa3;font-size:.88rem;line-height:1.55;margin:0">{{ tl.desc }}</p>
|
||||
</a>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="margin-top:3rem">
|
||||
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem">
|
||||
<span style="width:22px;height:3px;background:linear-gradient(90deg,#ffb340,#f07800)"></span>
|
||||
<h2 style="font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em">Neuestes Devlog</h2>
|
||||
<span style="flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.15),transparent)"></span>
|
||||
<span style="font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:#66666e">VOR 2 TAGEN</span>
|
||||
</div>
|
||||
<a href="#" style="display:block;background:#1b1b20;border:1px solid rgba(255,255,255,.08);padding:1.4rem 1.6rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)" style-hover="border-color:rgba(255,154,31,.5);background:#1f1f25">
|
||||
<div style="color:#c9c9cf;font-size:.95rem;line-height:1.65">
|
||||
<p style="margin:0 0 .6rem">Diese Woche stand ganz im Zeichen des Traktors: Das neue Getriebemodell schaltet jetzt hörbar, und die Anhänger-Physik kippt nicht mehr bei jeder Bodenwelle. Nebenbei ist der Ladebildschirm um zwei Sekunden schneller geworden.</p>
|
||||
<p style="margin:0">Außerdem gibt es erste Screenshots der überarbeiteten Hofkarte — mehr dazu im vollständigen Devlog.</p>
|
||||
</div>
|
||||
<span style="display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#ffb340">Weiterlesen →</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer style="border-top:1px solid rgba(255,255,255,.08);padding:1.4rem 2.5rem;display:flex;align-items:center;gap:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#9a9aa3">
|
||||
<span style="display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#ececee;font-family:'Chakra Petch',sans-serif"><img src="../brand/mark.png" alt="" style="width:20px;height:20px;object-fit:contain">D4RKST<span style="color:#ff9a1f">3R</span></span>
|
||||
<a href="#" style-hover="color:#ffb340">Quellcode</a><a href="#" style-hover="color:#ffb340">Status</a>
|
||||
<span style="margin-left:auto;display:flex;gap:1.2rem"><a href="#" style-hover="color:#ffb340">Impressum</a><a href="#" style-hover="color:#ffb340">Datenschutz</a></span>
|
||||
</footer>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const P = {
|
||||
file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
|
||||
pin: '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
|
||||
server: '<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/>',
|
||||
image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
|
||||
trend: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
||||
calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
|
||||
};
|
||||
const m = (icon, title, desc) => ({ svg: { __html: P[icon] }, title, desc });
|
||||
return {
|
||||
tiles: [
|
||||
m('file', 'Devlog', 'Entwicklungs-Updates, frisch aus dem Editor'),
|
||||
m('pin', 'Roadmap', 'Meilensteine + Community-Wünsche zum Abstimmen'),
|
||||
m('server', 'Server', 'Live-Status aller Game-Server mit Verlauf'),
|
||||
m('image', 'Galerie', 'Screenshots aus der Community'),
|
||||
m('trend', 'Level', 'XP-Bestenliste — wer redet am meisten mit?'),
|
||||
m('calendar', 'Events', 'Playtests, Streams und was sonst ansteht'),
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
# Handoff: D4RKBOT Webseiten-Redesign („Graphit + Orange")
|
||||
|
||||
> **Stand: umgesetzt** (18.08.2026, Commit „Webseiten-Redesign: Graphit +
|
||||
> Orange, abgeschrägte Ecken"). Dieses Dokument bleibt als Beleg liegen —
|
||||
> es beschreibt den Soll-Zustand, nicht mehr eine offene Aufgabe.
|
||||
>
|
||||
> Drei Stellen weichen bewusst ab, die Gründe stehen in der Commit-Nachricht:
|
||||
> die Statuszeile im Hero zeigt nur „ONLINE" (Antwortzeit und Erreichbarkeit
|
||||
> des Bots gibt es öffentlich nicht), der Hauptknopf hat keine Aura
|
||||
> (`clip-path` schneidet den eigenen Schatten weg — auch in den Referenzen
|
||||
> unten), und die Config-Bereiche bleiben scharfkantig statt abgeschrägt
|
||||
> (dort klappen Auswahllisten aus dem Panel heraus).
|
||||
|
||||
## Überblick
|
||||
Redesign der beiden Seiten des d4rkbot-Webinterfaces (Bot-Produktseite `bot.d4rkst3r.de` und Community-Hub `hub.d4rkst3r.de`) plus Dashboard. Neuer Look: Graphit-Grau mit dem Orange-Verlauf aus dem D4RKST3R-Logo, Esports-Charakter über abgeschrägte Ecken (clip-path), Chakra Petch als Display-Schrift, IBM Plex Mono für Labels.
|
||||
|
||||
## Zu den Design-Dateien
|
||||
Die `.dc.html`-Dateien in diesem Ordner sind **Design-Referenzen in HTML** — Prototypen, die Aussehen und Verhalten zeigen, kein Produktionscode. Aufgabe ist, diese Designs **im bestehenden Frontend nachzubauen** (React 19 + Vite, ein zentrales `frontend/src/style.css` mit semantischen Klassen — kein Tailwind nötig). Die bestehende Klassenstruktur (`.nav`, `.page-header`, `.card`, `.home-tiles`, `.settings-layout` …) kann größtenteils bleiben; im Wesentlichen wird `style.css` neu geschrieben und an wenigen Stellen JSX angepasst.
|
||||
|
||||
## Fidelity
|
||||
**High-fidelity.** Farben, Typografie, Abstände und Zustände sind final und sollen pixelgenau übernommen werden.
|
||||
|
||||
## Design-Tokens (neue `:root`-Werte für style.css)
|
||||
```css
|
||||
:root {
|
||||
--bg: #131316; /* Seiten-Hintergrund (statt #0a0a0a) */
|
||||
--bg2: #1b1b20; /* Karten/Panels (statt #111) */
|
||||
--bg3: #1f1f25; /* Hover-Fläche / erhöht */
|
||||
--text: #ececee; /* Haupttext (statt #e8e0d0 — kein Warmton mehr) */
|
||||
--text2: #c9c9cf; /* Sekundärtext */
|
||||
--muted: #9a9aa3; /* gedämpft */
|
||||
--muted2: #66666e; /* stark gedämpft */
|
||||
--border: rgba(255,255,255,.08);
|
||||
--accent: #ff9a1f; /* Orange, Einzelakzent */
|
||||
--accent-hi: #ffb340; /* helles Orange (Verlauf oben) */
|
||||
--accent-lo: #f07800; /* dunkles Orange (Verlauf unten) */
|
||||
--grad: linear-gradient(135deg, #ffb340, #f07800); /* Marken-Verlauf, wie Logo-Wortmarke */
|
||||
--success: #3ba55d;
|
||||
--danger: #f23f43;
|
||||
--display: 'Chakra Petch', sans-serif; /* 400/500/600/700 */
|
||||
--body: 'Chakra Petch', sans-serif; /* Body 400, 16px, line-height 1.55 */
|
||||
--mono: 'IBM Plex Mono', monospace; /* 400/500 */
|
||||
}
|
||||
```
|
||||
Google Fonts: `Chakra+Petch:wght@400;500;600;700` und `IBM+Plex+Mono:wght@400;500`.
|
||||
Die alten Fonts (Bebas Neue, Barlow Condensed, Share Tech Mono) entfallen; ebenso Noise-/Scanline-Overlays (`body::before/::after`) und die Partikel-Komponente.
|
||||
|
||||
### Wiederkehrende Muster
|
||||
- **Abgeschrägte Ecken** statt border-radius (Kern des neuen Looks):
|
||||
`clip-path: polygon(Npx 0, 100% 0, 100% calc(100% - Npx), calc(100% - Npx) 100%, 0 100%, 0 Npx)`
|
||||
N = 6–8px (Badges/Buttons klein), 10px (Buttons/Zeilen), 12–14px (Karten), 16–18px (große Panels).
|
||||
- **Primär-Button**: `background: var(--grad); color: #131316; font: 500 .78rem var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:.8rem 1.6rem; clip-path 10px; box-shadow:0 0 30px rgba(240,120,0,.3)`.
|
||||
- **Ghost-Button**: transparent, `border:1px solid rgba(255,255,255,.18)`, Text `--text2`, Hover: `background:rgba(255,255,255,.06); color:#ffb340`.
|
||||
- **Badge/Tag** (ersetzt `.page-tag`): Mono .68rem, uppercase, `color:#ffb340`, `border:1px solid rgba(255,154,31,.4)`, clip-path 6px, optional pulsierender Punkt (`@keyframes pulseGlow`, 2s).
|
||||
- **Gradient-Text** für betonte Wörter in Headlines: `background:var(--grad); -webkit-background-clip:text; color:transparent`, dazu `filter:drop-shadow(0 0 22px rgba(240,120,0,.35))`.
|
||||
- **Section-Header**: 22×3px Verlaufs-Strich + Titel (Chakra Petch 700, uppercase) + auslaufende 1px-Linie + rechts Mono-Meta in `--muted2`.
|
||||
- **Icon-Kachel**: 32–36px, `background:rgba(255,154,31,.1); border:1px solid rgba(255,154,31,.3); color:#ffb340`, clip-path 6–7px; Icons weiterhin Lucide (18px, stroke 1.75) — `icons.jsx` bleibt unverändert.
|
||||
- **Hintergrund-Glow** statt Grid/BG-Text: `radial-gradient(900px 500px at 78% -10%, rgba(240,120,0,.14), transparent 60%)` als fixed Layer.
|
||||
|
||||
## Screens
|
||||
Referenzdateien (Reihenfolge = Priorität):
|
||||
|
||||
### 1. Bot-Landing — `D4RKBOT-Landing-neu.dc.html` (ersetzt `pages/BotLanding.jsx`)
|
||||
- **Hero**: 2-Spalten-Grid (1.15fr / .85fr), max-width 1160px, padding 5rem 2.5rem.
|
||||
Links: Badge „Selbst gebaut · keine Paywall" → H1 4.1rem, 700, uppercase, 3 Zeilen-Stile: normal / Outline (`-webkit-text-stroke:1.5px #9a9aa3`, Füllung transparent) / Gradient-Text → Subtitle (1.05rem, `--muted`, max 520px) → CTA-Reihe (Primär „Alle Funktionen →", Ghost „/befehle").
|
||||
Rechts: „Bot-Karte": äußerer versetzter Rahmen (inset -1.2rem, border `--border`, clip-path 24px), innen Panel `--bg2` clip-path 18px mit: Logo-Lockup (200px, zentriert, drop-shadow), Statuszeile (grüner Punkt + „ONLINE · 38 MS · UPTIME 99,2 %" — live aus `/api`), 2×2 Stat-Kacheln (Zahl 1.7rem Gradient-Text; Labels Mono .6rem uppercase): Funktionen / Slash-Befehle / Spiele im Monitor / 0 € — Werte wie bisher aus `/api/features` etc.
|
||||
- **„Was er kann"**: Section-Header + rechts „40 MODULE · EINZELN SCHALTBAR"; 3-spaltiges Grid, 9 Kacheln (`.home-tile`-Ersatz): Icon-Kachel + Titel (600, 1.02rem) in einer Zeile, Beschreibung .88rem `--muted`. Hover: Border `rgba(255,154,31,.5)`, bg `--bg3`, translateY(-3px).
|
||||
- **Zwei Feature-Panels** (Für Entwickler / Hosting): 2 Spalten; links neutraler Glas-Verlauf `linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015))`, rechts Orange-Verlauf `linear-gradient(135deg,rgba(240,120,0,.16),rgba(240,120,0,.04))` + Border `rgba(255,154,31,.35)`.
|
||||
- **Hub-Hinweis**: Mono .74rem `--muted2` mit unterstrichenem Link.
|
||||
|
||||
### 2. Funktionen — `D4RKBOT-Funktionen-neu.dc.html` (ersetzt `pages/BotFeatures.jsx`)
|
||||
Kompakter Seitenkopf (Badge, H1 3.6rem mit Gradient-Silbe, Subtitle) statt großem `page-header`. Je Modul-Gruppe (aus `/api/features`) ein Section-Header mit Modul-Zähler rechts, 3-spaltiges Kachel-Grid (Icon via `module-icons.jsx`). Abschluss: Outro-Absatz + CTA-Reihe.
|
||||
|
||||
### 3. Befehle — `D4RKBOT-Befehle-neu.dc.html` (ersetzt `pages/BotCommands.jsx`)
|
||||
Gleicher Seitenkopf. Je Gruppe Section-Header (Schloss-Icon in Orange bei eingeschränkten Gruppen), Befehle als Zeilen (clip-path 10px): `code` in Mono .82rem `#ffb340`, min-width 16rem; Beschreibung `--muted`.
|
||||
|
||||
### 4. Hub-Start — `Hub-Start-neu.dc.html` (ersetzt `pages/Home.jsx`)
|
||||
Hero 2-spaltig: links Badge „Community-Hub", H1 „Willkommen bei D4RKST3R" (Name als Gradient-Text), CTAs (Zum Discord → primär, Devlogs lesen ghost), darunter Stat-Reihe (Member / Server online / Spieler — Zahlen 1.9rem Gradient-Text) aus `/api/serverstats` + `/api/servers`. Rechts: Logo-Lockup 300px mit drop-shadow + Orange-Glow.
|
||||
Darunter: 6 Bereichs-Kacheln (Devlog, Roadmap, Server, Galerie, Level, Events — gleiche Kachel wie Landing) und „Neuestes Devlog"-Panel (Teaser + „Weiterlesen →" in Orange-Mono).
|
||||
Hub-Logo in der Nav: Mark + „D4RKST3R" (Suffix „3R" in `--accent`).
|
||||
|
||||
### 5. Dashboard — `Dashboard-neu.dc.html` (Status-Tab von `pages/Settings.jsx`)
|
||||
Kompakter Kopf: H1 „Dashboard" + Meta + rechts Status-Pill (grün, „Bot online · 38 ms").
|
||||
Layout wie bisher `settings-layout`: Sidebar 13rem (Suche, Gruppen-Labels Mono .56rem, Items Mono .7rem; aktiv: Orange + `border-left:2px solid var(--accent)` + bg `rgba(255,154,31,.08)`).
|
||||
Inhalt: Bot-Panel (Mark 46px, Name+Tag, Online-Pill, rechts Laufzeit) → Erreichbarkeits-Balken (168 Striche, 32px hoch: grün `--success`, Ausfall `--danger`, teilweise `--accent`, leer `rgba(255,255,255,.08)`) → 4 KPI-Karten (Wert 1.6rem 700, Label Mono, Nebenzeile farbcodiert).
|
||||
Darunter 2 Spalten (1.2fr/.8fr): Aktivitäts-Balkenchart (Balken `linear-gradient(180deg,#ffb340,rgba(240,120,0,.2))`) und „Module nach Bereich" (Fortschrittsbalken im Marken-Verlauf).
|
||||
Alle übrigen Settings-Tabs übernehmen nur die Token (Panels `--bg2`, Inputs auf `#131316`, Fokus-Border `--accent`, Toggles: an = `--grad`).
|
||||
|
||||
## Interaktionen & Verhalten
|
||||
- Nav bleibt sticky mit `backdrop-filter: blur(12px)`; Zustand „scrolled" kann entfallen (Leiste ist immer kompakt, padding .85rem 2.5rem).
|
||||
- Aktiver Nav-Link: `color:#ffb340; border-bottom:2px solid var(--accent)` (ersetzt den animierten Gradient-Unterstrich).
|
||||
- Karten-Hover überall: Border → `rgba(255,154,31,.5)`, bg → `--bg3`, `transform: translateY(-3px)`, transition ~.2s.
|
||||
- Einblendung `riseIn` (.4–.5s, translateY 12px) bleibt wie bisher; `prefers-reduced-motion` respektieren (Regel aus alter style.css übernehmen).
|
||||
- Alle Datenquellen/Routen unverändert (`/api/features`, `/api/serverstats`, `/api/me` …). i18n-Keys unverändert.
|
||||
|
||||
## Assets
|
||||
- Wolf-Mark (Nav 34px, Footer 20px, Dashboard 46px) und Logo mit Wortmarke
|
||||
(Landing-Hero 200px, Hub-Hero 300px) liegen als `frontend/public/brand/`
|
||||
im Auslieferungsstand — verkleinert auf die Größen, in denen sie wirklich
|
||||
dargestellt werden. Originale: [`../brand/`](../brand/).
|
||||
- Icons: Lucide (bereits als Dependency vorhanden).
|
||||
|
||||
## Dateien in diesem Paket
|
||||
- `D4RKBOT-Landing-neu.dc.html`, `D4RKBOT-Funktionen-neu.dc.html`, `D4RKBOT-Befehle-neu.dc.html`, `Hub-Start-neu.dc.html`, `Dashboard-neu.dc.html` — Design-Referenzen (im Browser zu öffnen; alle Maße/Farben stehen inline im style-Attribut)
|
||||
|
||||
Der mitgelieferte `assets/`-Ordner ist beim Einsortieren entfallen — er
|
||||
enthielt Kopien von `docs/brand/mark.png` und `docs/brand/lockup.png`. Die
|
||||
`.dc.html`-Dateien zeigen jetzt auf `../brand/` und stellen das Logo im
|
||||
Browser weiterhin dar.
|
||||
|
||||
## Empfohlene Umsetzungs-Reihenfolge
|
||||
1. Tokens + Fonts in `frontend/src/style.css` tauschen, Noise/Scanlines/Partikel entfernen
|
||||
2. Nav + Footer (BotApp.jsx / App.jsx: Logo-`<img>` ergänzen)
|
||||
3. BotLanding.jsx (neues Hero-Layout mit Bot-Karte)
|
||||
4. BotFeatures / BotCommands / Home (Seitenkopf-Komponente statt `page-header`)
|
||||
5. Settings (Status-Tab, dann nur Token-Durchstich für die restlichen Tabs)
|
||||
Reference in New Issue
Block a user