Add Tessa holiday page

simonvreeman · simonvreeman · commit f5d2154b4860 · 2026-01-28T23:21:23.000+01:00
diff --git a/tessa.html b/tessa.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="nl">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="noindex, nofollow" />
+  <title>Tessa</title>
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #fff;
+      color: #000;
+      font-family: Arial, Helvetica, sans-serif;
+      text-align: center;
+      font-size: 5em;
+      font-weight: bolder;
+    }
+    .thinking {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      vertical-align: bottom;
+      animation: dots 1.2s steps(4, end) infinite;
+    }
+    @keyframes dots {
+      to { width: 1.2em; }
+    }
+    #answer {
+      display: none;
+    }
+    .tada {
+      animation: tada 700ms ease-in-out both;
+    }
+    @keyframes tada {
+      0% { transform: scale(1); }
+      10%, 20% { transform: scale(0.9) rotate(-3deg); }
+      30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
+      40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
+      100% { transform: scale(1) rotate(0); }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <div>Is Tessa op vakantie?</div>
+    <div><span id="thinking" class="thinking">...</span></div>
+    <div id="answer">Jup.</div>
+  </div>
+  <script>
+    setTimeout(() => {
+      const thinking = document.getElementById("thinking");
+      const answer = document.getElementById("answer");
+      if (thinking) thinking.style.display = "none";
+      if (answer) {
+        answer.style.display = "block";
+        answer.classList.add("tada");
+      }
+    }, 5000);
+  </script>
+</body>
+</html>
