Connecting
2 files changed · +92 −0
| @@ −1,0 +1,23 @@ | |||
| 1 | +<!DOCTYPE html> | ||
| 2 | +<html lang="en"> | ||
| 3 | +<head> | ||
| 4 | +<meta charset="utf-8"> | ||
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 6 | +<title>Counter Demo — Posterity Co-build Run #2</title> | ||
| 7 | +<link rel="stylesheet" href="styles.css"> | ||
| 8 | +</head> | ||
| 9 | +<body> | ||
| 10 | +<header class="hero"> | ||
| 11 | + <p class="kicker">Posterity · Phase 10.2 · Run #2</p> | ||
| 12 | + <h1>Two agents built this page.</h1> | ||
| 13 | + <p class="sub">@muse wrote this shell and the styles. @muse-ref wrote the widget below — each on their own branch, cross-reviewed, then merged.</p> | ||
| 14 | +</header> | ||
| 15 | +<main> | ||
| 16 | + <section class="widget-card"> | ||
| 17 | + <h2>Interactive counter</h2> | ||
| 18 | + <div id="widget"><p class="loading">Loading widget…</p></div> | ||
| 19 | + </section> | ||
| 20 | +</main> | ||
| 21 | +<script src="widget.js"></script> | ||
| 22 | +</body> | ||
| 23 | +</html> | ||
| @@ −1,0 +1,69 @@ | |||
| 1 | +:root { | ||
| 2 | + --bg: #0b0e14; | ||
| 3 | + --panel: #151a26; | ||
| 4 | + --ink: #e8ecf4; | ||
| 5 | + --muted: #9aa3b5; | ||
| 6 | |||
| + --accent: #6ee7ff; |
| 7 | + --accent-2: #a78bfa; |
| 8 | +} |
| 9 | +* { box-sizing: border-box; margin: 0; padding: 0; } |
| 10 | +body { |
| 11 | + font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; |
| 12 | + background: radial-gradient(1200px 600px at 50% -10%, #1b2340 0%, var(--bg) 60%); |
| 13 | + color: var(--ink); |
| 14 | + min-height: 100vh; |
| 15 | + display: flex; |
| 16 | + flex-direction: column; |
| 17 | + align-items: center; |
| 18 | + padding: 4rem 1.5rem; |
| 19 | +} |
| 20 | +.hero { text-align: center; max-width: 640px; margin-bottom: 3rem; } |
| 21 | +.kicker { |
| 22 | + text-transform: uppercase; |
| 23 | + letter-spacing: 0.2em; |
| 24 | + font-size: 0.75rem; |
| 25 | + color: var(--accent); |
| 26 | + margin-bottom: 1rem; |
| 27 | +} |
| 28 | +.hero h1 { font-size: 2.75rem; line-height: 1.1; margin-bottom: 1rem; } |
| 29 | +.hero .sub { color: var(--muted); font-size: 1.05rem; line-height: 1.6; } |
| 30 | +.widget-card { |
| 31 | + background: var(--panel); |
| 32 | + border: 1px solid #2a3350; |
| 33 | + border-radius: 16px; |
| 34 | + padding: 2rem; |
| 35 | + width: min(480px, 100%); |
| 36 | + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); |
| 37 | +} |
| 38 | +.widget-card h2 { font-size: 1.25rem; margin-bottom: 1.25rem; } |
| 39 | +.loading { color: var(--muted); } |
| 40 | +.counter { display: flex; align-items: center; justify-content: center; gap: 1rem; } |
| 41 | +.counter output { |
| 42 | + font-size: 3rem; |
| 43 | + font-variant-numeric: tabular-nums; |
| 44 | + min-width: 4.5rem; |
| 45 | + text-align: center; |
| 46 | + background: linear-gradient(135deg, var(--accent), var(--accent-2)); |
| 47 | + -webkit-background-clip: text; |
| 48 | + background-clip: text; |
| 49 | + color: transparent; |
| 50 | +} |
| 51 | +.counter button { |
| 52 | + font-size: 1.5rem; |
| 53 | + width: 3rem; |
| 54 | + height: 3rem; |
| 55 | + border-radius: 12px; |
| 56 | + border: 1px solid #2a3350; |
| 57 | + background: #1d2438; |
| 58 | + color: var(--ink); |
| 59 | + cursor: pointer; |
| 60 | + transition: transform 0.08s ease, background 0.15s ease; |
| 61 | +} |
| 62 | +.counter button:hover { background: #263052; } |
| 63 | +.counter button:active { transform: scale(0.93); } |
| 64 | +.counter .reset { |
| 65 | + width: auto; |
| 66 | + padding: 0 1rem; |
| 67 | + font-size: 0.9rem; |
| 68 | + height: 3rem; |
| 69 | +} |