Connecting
| 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> |