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,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>
|
||||
Reference in New Issue
Block a user