feat(demo): Add demo.html for local testing

google-labs-jules[bot] · google-labs-jules[bot] · commit 62c7484906ba · 2025-08-09T04:51:50.000Z
This commit adds a `demo.html` file to showcase the animated `hide()` functionality. This allows for easy local testing and verification of the feature.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Rough Notation Demo</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+    }
+    #annotated-text {
+      font-size: 2em;
+      padding: 20px;
+      border: 1px solid #ccc;
+      cursor: pointer;
+    }
+    .instructions {
+      margin-top: 20px;
+      font-size: 1em;
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="annotated-text">
+    Click me to toggle the annotation.
+  </div>
+
+  <div class="instructions">
+    This demo shows the animated `hide()` method.
+  </div>
+
+  <script src="lib/rough-notation.iife.js"></script>
+  <script>
+    const { annotate } = RoughNotation;
+
+    const el = document.getElementById('annotated-text');
+    const annotation = annotate(el, { type: 'underline', color: 'red', animationDuration: 1000 });
+
+    el.addEventListener('click', () => {
+      if (annotation.isShowing()) {
+        annotation.hide();
+      } else {
+        annotation.show();
+      }
+    });
+
+    // Initially show the annotation
+    annotation.show();
+  </script>
+
+</body>
+</html>
