m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comunio AI assistant guide at traihard.de/comunio

Browse Source
This commit is contained in:
m
2026-04-08 13:11:03 +02:00
parent 208004f450
commit d022ef209e
1 changed files with 399 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
sites/traihard.de/comunio/index.html Normal file
View File

@@ -0,0 +1,399 @@
<!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>