Add watermark icon to interactive editor (#279)

* Add watermark icon to interactive editor

* Move to top and add pulse animation

Author: georgestagg

ggsql-wasm/demo/src/quarto/main.ts

@@ -213,6 +213,13 @@ async function applyEditors(
 
     const editorContainer = document.createElement("div");
     editorContainer.className = "ggsql-editor-container";
+    const watermark = document.createElement("img");
+    watermark.className = "ggsql-editor-watermark";
+    watermark.src = SITE_ROOT + "assets/icon.svg";
+    watermark.alt = "";
+    watermark.setAttribute("aria-hidden", "true");
+    editorContainer.appendChild(watermark);
+
     wrapper.appendChild(editorContainer);
 
     const errorDisplay = document.createElement("div");

ggsql-wasm/demo/src/quarto/styles.css

@@ -14,9 +14,28 @@
 }
 
 .ggsql-editor-container {
+  position: relative;
   width: 100%;
 }
 
+.ggsql-editor-watermark {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 32px;
+  height: 32px;
+  opacity: 0.5;
+  filter: grayscale(1);
+  pointer-events: none;
+  z-index: 10;
+  animation: ggsql-pulse 5s linear infinite;
+}
+
+@keyframes ggsql-pulse {
+  0%, 100% { transform: scale(0.95); }
+  50% { transform: scale(1.1); }
+}
+
 .ggsql-error-display {
   padding: 6px 10px;
   font-size: 12px;