261 lines · 9.4 KB
// Self-contained HTML for the public counter page, served by src/worker.ts.
// No external assets: inline CSS/JS, matches the Worker's own
// bundle-everything constraint.
export function renderCounterPage(version: string): string {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cindermail</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 20%, #2a1508 0%, #120a06 55%, #0a0605 100%);
    color: #ffe8d6;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: center;
  }
  main { padding: 2rem; position: relative; }
  .embers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
  .ember {
    position: absolute;
    bottom: -1rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff9d52;
    box-shadow: 0 0 6px 1px rgba(255,140,50,0.8);
    animation: rise linear infinite;
    opacity: 0;
  }
  @keyframes rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }