cursor
864c51e281
Issue #1 — plain HTML one-pager under public/smoke-test/. Co-authored-by: Cursor <cursoragent@cursor.com>
241 lines
6.7 KiB
HTML
241 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>playground — Warum die Idee rockt</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f1117;
|
|
--surface: #1a1d27;
|
|
--border: #2a2f3d;
|
|
--text: #e8eaed;
|
|
--muted: #9aa0ad;
|
|
--accent: #6ee7b7;
|
|
--accent-dim: #34d399;
|
|
--highlight: #818cf8;
|
|
--max: 42rem;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.65;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.hero {
|
|
padding: 4rem 1.5rem 3rem;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(110, 231, 183, 0.12), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(129, 140, 248, 0.08), transparent),
|
|
var(--bg);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(1.8rem, 5vw, 2.6rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.hero h1 span { color: var(--accent); }
|
|
|
|
.hero .tagline {
|
|
color: var(--muted);
|
|
font-size: 1.15rem;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
main {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem 4rem;
|
|
}
|
|
|
|
section { margin-bottom: 2.5rem; }
|
|
|
|
h2 {
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--accent-dim);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
p { margin-bottom: 1rem; }
|
|
|
|
.flow {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.step {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.6rem;
|
|
padding: 1rem 1.15rem;
|
|
}
|
|
|
|
.step-num {
|
|
flex-shrink: 0;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.step strong { display: block; margin-bottom: 0.15rem; }
|
|
|
|
.step span { color: var(--muted); font-size: 0.95rem; }
|
|
|
|
ul {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
ul li::before {
|
|
content: "→ ";
|
|
color: var(--highlight);
|
|
}
|
|
|
|
.callout {
|
|
background: var(--surface);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: 0 0.5rem 0.5rem 0;
|
|
padding: 1.15rem 1.25rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.callout p:last-child { margin-bottom: 0; }
|
|
|
|
footer {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer a { color: var(--accent-dim); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="hero">
|
|
<h1>playground <span>— die Idee</span></h1>
|
|
<p class="tagline">Gitea-Issue rein, HTML raus, live auf der Welt. Kein Build, kein Drama.</p>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<section>
|
|
<h2>Was ist das?</h2>
|
|
<p>
|
|
<strong>playground</strong> ist eine statische Experimentier-Site auf
|
|
<a href="https://playground.schwenk.online" style="color: var(--accent-dim);">playground.schwenk.online</a>.
|
|
Du schreibst ein Gitea-Issue, erwähnst <code>@cursor</code>, und ein Agent erzeugt
|
|
plain HTML unter <code>public/<slug>/</code>. Push auf <code>main</code> → Webhook → nginx liefert.
|
|
Fertig.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Warum das geil ist</h2>
|
|
<ul>
|
|
<li><strong>Issue als Steuerung</strong> — Aufgaben, Kontext und Historie leben dort, wo du eh arbeitest.</li>
|
|
<li><strong>Kein Build-Step</strong> — kein npm, kein Bundler, kein CI-Warten. HTML/CSS, Punkt.</li>
|
|
<li><strong>Sofort live</strong> — Commit auf main, Webhook zieht, Seite ist da. Sekunden, nicht Stunden.</li>
|
|
<li><strong>Verzeichnis = Thema</strong> — <code>/smoke-test/</code>, <code>/thema-xy/</code> — jeder Onepager sein eigener Ort.</li>
|
|
<li><strong>Cursor als Autor</strong> — Recherche, Text, Layout: der Agent macht die Fleißarbeit, du gibst die Richtung.</li>
|
|
<li><strong>Bewusst minimal</strong> — keine Landing-Page-Pflege, kein Tracking-Zwang, kein Framework-Overhead.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>So läuft's</h2>
|
|
<div class="flow">
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div>
|
|
<strong>Issue öffnen</strong>
|
|
<span>„Onepager: Thema XY" — oder wie hier: Smoke Test.</span>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div>
|
|
<strong>@cursor anpingen</strong>
|
|
<span>Gitea Action startet den Agent mit Repo-Kontext und Issue-Text.</span>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div>
|
|
<strong>HTML landet in public/</strong>
|
|
<span>Bot committet direkt auf main — kein PR-Review-Flow.</span>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">4</div>
|
|
<div>
|
|
<strong>Deploy per Webhook</strong>
|
|
<span>Container auf boka macht <code>git pull</code>, nginx serviert.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Die Vision</h2>
|
|
<div class="callout">
|
|
<p>
|
|
Spielwiese für „recherchiere X, schreib einen Onepager" und ähnliche Prompts.
|
|
Gitea als Steuerung, Cursor als Autor, nginx als Auslieferung —
|
|
drei Bausteine, die du schon hast, ohne neue Infrastruktur erfinden zu müssen.
|
|
</p>
|
|
<p>
|
|
Kein Produkt. Kein Startup-Pitch. Einfach ein Ort, an dem Ideen schnell sichtbar werden —
|
|
für dich, und für jeden mit dem Link.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Stack auf einen Blick</h2>
|
|
<ul>
|
|
<li><strong>Gitea</strong> — Issues, Actions, Git, Webhooks</li>
|
|
<li><strong>Cursor Agent</strong> — schreibt HTML, committet, kommentiert</li>
|
|
<li><strong>nginx + Docker</strong> — statische Auslieferung auf boka</li>
|
|
<li><strong>Traefik</strong> — TLS und Routing für die Domain</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
Erstellt von @cursor · Issue #1 Smoke Test ·
|
|
<a href="https://gitea.schwenk.online/froxxxy/playground">froxxxy/playground</a>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|