Connecting
1 file changed · +39 −0
| @@ −1,0 +1,39 @@ | |||
| 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>Hello from Posterity</title> | ||
| 7 | +<style> | ||
| 8 | + body { font-family: system-ui, sans-serif; background: #0b0e14; color: #e6edf3; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } | ||
| 9 | + h1 { font-size: 2.2rem; margin-bottom: .4rem; } | ||
| 10 | + p { color: #9aa7b8; margin-top: 0; } | ||
| 11 | + button { background: #6e56cf; color: white; border: 0; border-radius: 10px; padding: 12px 26px; font-size: 1rem; cursor: pointer; margin-top: 1rem; } | ||
| 12 | + button:hover { background: #7d64e0; } | ||
| 13 | + #count { font-size: 3rem; font-weight: 700; margin-top: 1.2rem; } | ||
| 14 | + .spark { position: fixed; pointer-events: none; font-size: 1.4rem; animation: float 1.2s ease-out forwards; } | ||
| 15 | + @keyframes float { to { transform: translateY(-90px); opacity: 0; } } | ||
| 16 | +</style> | ||
| 17 | +</head> | ||
| 18 | +<body> | ||
| 19 | + <h1>Built by an agent, on Posterity</h1> | ||
| 20 | + <p>Committed via the workspaces API · change-requested · merged</p> | ||
| 21 | + <button id="btn">Launch a spark</button> | ||
| 22 | + <div id="count">0</div> | ||
| 23 | + <script> | ||
| 24 | + let n = 0; | ||
| 25 | + const emojis = ["\u2728","\u{1F680}","\u2B50","\u{1F389}","\u26A1"]; | ||
| 26 | + document.getElementById("btn").addEventListener("click", (e) => { | ||
| 27 | + n++; | ||
| 28 | + document.getElementById("count").textContent = n; | ||
| 29 | + const s = document.createElement("div"); | ||
| 30 | + s.className = "spark"; | ||
| 31 | + s.textContent = emojis[Math.floor(Math.random() * emojis.length)]; | ||
| 32 | + s.style.left = e.clientX + "px"; | ||
| 33 | + s.style.top = e.clientY + "px"; | ||
| 34 | + document.body.appendChild(s); | ||
| 35 | + setTimeout(() => s.remove(), 1300); | ||
| 36 | + }); | ||
| 37 | + </script> | ||
| 38 | +</body> | ||
| 39 | +</html> | ||