400 lines
13 KiB
HTML
400 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comunio AI Assistant — Anleitung</title>
|
|
<meta name="description" content="Schritt-für-Schritt-Anleitung: KI-Assistent für Comunio Fantasy Bundesliga mit Claude Code + Playwright">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0a0b0d;
|
|
--surface: #12141a;
|
|
--surface-2: #1a1c24;
|
|
--border: #1e2028;
|
|
--text: #e8e8ec;
|
|
--muted: #8888a0;
|
|
--accent: #22c55e;
|
|
--accent-dim: rgba(34, 197, 94, 0.12);
|
|
--orange: #f97316;
|
|
--orange-dim: rgba(249, 115, 22, 0.12);
|
|
--blue: #3b82f6;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.grain {
|
|
position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
/* Header */
|
|
header {
|
|
padding: 60px 0 40px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
header .badge {
|
|
display: inline-block;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(1.8rem, 5vw, 2.8rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
header p {
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Content */
|
|
.content { padding: 48px 0 80px; }
|
|
|
|
h2 {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
margin-top: 48px;
|
|
margin-bottom: 16px;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin-top: 32px;
|
|
margin-bottom: 12px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
p { margin-bottom: 16px; color: var(--text); }
|
|
|
|
ul, ol {
|
|
margin-bottom: 16px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
color: var(--text);
|
|
}
|
|
|
|
strong { color: var(--text); font-weight: 600; }
|
|
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
/* Code */
|
|
code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: var(--surface);
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
color: var(--orange);
|
|
}
|
|
|
|
pre {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.cmd { color: var(--text); }
|
|
.comment { color: #555; }
|
|
.highlight { color: var(--accent); }
|
|
|
|
/* Architecture diagram */
|
|
.arch {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 28px;
|
|
margin: 24px 0;
|
|
text-align: center;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 2;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.arch .you { color: var(--accent); font-weight: 600; }
|
|
.arch .claude { color: var(--orange); font-weight: 600; }
|
|
.arch .pw { color: var(--blue); font-weight: 600; }
|
|
.arch .arrow { color: #444; }
|
|
|
|
/* Table */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
padding: 12px 16px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
td {
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--border);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card h4 {
|
|
font-size: 1rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
|
|
|
|
/* Warning/Info boxes */
|
|
.info {
|
|
background: var(--accent-dim);
|
|
border-left: 3px solid var(--accent);
|
|
padding: 16px 20px;
|
|
border-radius: 0 12px 12px 0;
|
|
margin: 20px 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.warning {
|
|
background: var(--orange-dim);
|
|
border-left: 3px solid var(--orange);
|
|
padding: 16px 20px;
|
|
border-radius: 0 12px 12px 0;
|
|
margin: 20px 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
header { padding: 40px 0 30px; }
|
|
.content { padding: 32px 0 60px; }
|
|
pre { padding: 14px; }
|
|
table { font-size: 0.8rem; }
|
|
th, td { padding: 8px 10px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grain"></div>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<div class="badge">Anfänger-Guide</div>
|
|
<h1>Comunio AI Assistant</h1>
|
|
<p>Dein KI-Manager für die Fantasy Bundesliga. Claude Code + Playwright steuern dein Team im Browser.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<div class="container">
|
|
|
|
<h2>Was ist das?</h2>
|
|
<p><a href="https://comunio.de">Comunio</a> ist Deutschlands ältester Fantasy-Fußball-Manager (seit 2000, 600.000+ Nutzer). Du managst ein virtuelles Bundesliga-Team — kaufst und verkaufst Spieler auf dem Transfermarkt, stellst dein Team für jeden Spieltag auf und sammelst Punkte.</p>
|
|
<p>Diese Anleitung zeigt dir, wie du einen <strong>KI-Assistenten</strong> einrichtest, der dein Comunio-Team über den Browser steuert — automatisch, per Sprachbefehl.</p>
|
|
|
|
<h2>Was kann der Assistent?</h2>
|
|
<ul>
|
|
<li><strong>Aufstellung setzen</strong> vor jedem Spieltag</li>
|
|
<li><strong>Gebote abgeben</strong> auf dem Transfermarkt (Deadline: täglich 3:00 Uhr)</li>
|
|
<li><strong>Spielerwerte beobachten</strong> und Markttrends erkennen</li>
|
|
<li><strong>Ergebnisse checken</strong> nach dem Spieltag</li>
|
|
<li><strong>Kader analysieren</strong> und Schwachstellen finden</li>
|
|
<li><strong>Tauschangebote</strong> annehmen oder ablehnen</li>
|
|
</ul>
|
|
|
|
<h2>So funktioniert's</h2>
|
|
<div class="arch">
|
|
<span class="you">Du:</span> "Stell mein Team für den nächsten Spieltag auf"<br>
|
|
<span class="arrow">↓</span><br>
|
|
<span class="claude">Claude Code</span> (versteht was du willst, plant die Aktionen)<br>
|
|
<span class="arrow">↓</span><br>
|
|
<span class="pw">Playwright</span> (steuert den Browser — klickt, tippt, liest)<br>
|
|
<span class="arrow">↓</span><br>
|
|
comunio.de
|
|
</div>
|
|
|
|
<h2>Einrichtung (10 Minuten)</h2>
|
|
|
|
<h3>1. Claude Code installieren</h3>
|
|
<pre><code><span class="comment"># Im Terminal eingeben:</span>
|
|
<span class="cmd">npm install -g @anthropic-ai/claude-code</span></code></pre>
|
|
<p>Du brauchst einen <a href="https://claude.ai">Anthropic-Account</a>. Beim ersten Start wirst du zum Login aufgefordert.</p>
|
|
|
|
<h3>2. Projektordner erstellen</h3>
|
|
<pre><code><span class="cmd">mkdir ~/comunio-assistant</span>
|
|
<span class="cmd">cd ~/comunio-assistant</span></code></pre>
|
|
|
|
<h3>3. Playwright aktivieren</h3>
|
|
<pre><code><span class="comment"># Claude Code starten:</span>
|
|
<span class="cmd">claude</span>
|
|
|
|
<span class="comment"># Dann in Claude tippen:</span>
|
|
<span class="cmd">/mcp</span>
|
|
<span class="comment"># → "playwright" auswählen → Enable</span></code></pre>
|
|
<p>Damit kann Claude einen Browser öffnen und Webseiten bedienen — genau wie du es manuell tun würdest.</p>
|
|
|
|
<h3>4. CLAUDE.md erstellen</h3>
|
|
<p>Erstelle eine Datei namens <code>CLAUDE.md</code> in deinem Projektordner. Das ist die "Jobbeschreibung" für deinen Assistenten:</p>
|
|
|
|
<pre><code><span class="highlight"># Comunio Assistant</span>
|
|
|
|
Du managst mein Comunio Fantasy-Fußball-Team via Browser (Playwright).
|
|
|
|
<span class="highlight">## Zugang</span>
|
|
- URL: https://classic.comunio.de (einfacher zu automatisieren)
|
|
- Login: Frag mich nach den Zugangsdaten wenn nötig
|
|
|
|
<span class="highlight">## Punktesystem</span>
|
|
- Note 1.0 = 12 Pkt, 1.5 = 10, 2.0 = 8, 2.5 = 6, 3.0 = 4
|
|
- Tor-Bonus: TW +6, ABW +5, MF +4, ST +3
|
|
- Gelb-Rot: -3, Rot: -6, Leerer Platz: -4 pro Spieltag
|
|
|
|
<span class="highlight">## Transfers</span>
|
|
- Verdeckte Gebote — höchstes Gebot gewinnt
|
|
- Berechnung täglich um 3:00 Uhr
|
|
- IMMER fragen bevor du bietest!
|
|
|
|
<span class="highlight">## Regeln</span>
|
|
- Vor jeder Aktion die Budget kosten zeigen
|
|
- Screenshots machen bei wichtigen Aktionen
|
|
- Nie ohne meine Bestätigung bieten oder tauschen</code></pre>
|
|
|
|
<h2>Benutzung</h2>
|
|
<p>Starte Claude Code in deinem Projektordner:</p>
|
|
<pre><code><span class="cmd">cd ~/comunio-assistant</span>
|
|
<span class="cmd">claude</span></code></pre>
|
|
<p>Dann sprich einfach mit Claude:</p>
|
|
|
|
<table>
|
|
<tr><th>Du sagst</th><th>Claude macht</th></tr>
|
|
<tr><td>"Log mich ein"</td><td>Öffnet Browser, navigiert zum Login, fragt nach Zugangsdaten</td></tr>
|
|
<tr><td>"Zeig mir mein Team"</td><td>Geht zur Kaderseite, listet Spieler mit Werten</td></tr>
|
|
<tr><td>"Stell das beste Team auf"</td><td>Prüft Verletzungen/Sperren, stellt optimale Formation auf</td></tr>
|
|
<tr><td>"Was gibt's auf dem Transfermarkt?"</td><td>Listet verfügbare Spieler, zeigt gute Deals</td></tr>
|
|
<tr><td>"Biete 3M auf Wirtz"</td><td>Gibt Gebot ab (nach deiner Bestätigung)</td></tr>
|
|
<tr><td>"Wie lief der Spieltag?"</td><td>Zeigt deine Punkte, Einzelbewertungen, Ranking</td></tr>
|
|
</table>
|
|
|
|
<h2>Tipps</h2>
|
|
|
|
<div class="card">
|
|
<h4>Nutze classic.comunio.de</h4>
|
|
<p>Die Classic-Version ist einfacheres HTML (PHP-gerendert). Viel leichter für den Assistenten zu lesen als die moderne React-App.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Transfer-Deadline beachten</h4>
|
|
<p>Täglich um 3:00 Uhr werden Gebote ausgewertet. Frag abends: "Zeig mir Spieler unter 2M die gut bewertet wurden" — dann bieten.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Spieltag-Routine</h4>
|
|
<p>Vor dem Spieltag: "Ist jemand verletzt oder gesperrt?" → "Stell mein Team auf". Nach dem Spieltag: "Wie lief's?"</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Screenshots</h4>
|
|
<p>Lass Claude regelmäßig Screenshots machen. So siehst du immer, was gerade passiert — und hast einen Nachweis deiner Aktionen.</p>
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<strong>Warum kein API?</strong> Comunio hat keine offizielle API. Alte Python-Wrapper sind längst kaputt. Browser-Automatisierung via Playwright ist der einzige zuverlässige Weg — und funktioniert mit jeder Comunio-Version.
|
|
</div>
|
|
|
|
<h2>Häufige Fragen</h2>
|
|
|
|
<div class="card">
|
|
<h4>Brauche ich Programmierkenntnisse?</h4>
|
|
<p>Nein. Du musst nur ein Terminal öffnen und drei Befehle eintippen können. Den Rest macht Claude.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Kostet das was?</h4>
|
|
<p>Claude Code braucht einen Anthropic-Account (API-Kosten je nach Nutzung, ca. ein paar Euro/Monat bei normalem Gebrauch). Comunio selbst hat eine kostenlose Basic-Version.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Ist das erlaubt?</h4>
|
|
<p>Comunio hat keine öffentliche Policy gegen Browser-Automatisierung. Sei trotzdem fair: nicht im Sekundentakt Anfragen schicken, und spiel sportlich.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h4>Was wenn was schiefgeht?</h4>
|
|
<p>Claude fragt vor jeder wichtigen Aktion (Gebote, Tausch, Aufstellung speichern). Du kannst jederzeit "Stop" sagen.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p><a href="https://traihard.de">traihard.de</a> — powered by Claude Code</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|