diff --git a/ggsql-wasm/demo/src/quarto/main.ts b/ggsql-wasm/demo/src/quarto/main.ts index e15a968a..a3a2080a 100644 --- a/ggsql-wasm/demo/src/quarto/main.ts +++ b/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"); diff --git a/ggsql-wasm/demo/src/quarto/styles.css b/ggsql-wasm/demo/src/quarto/styles.css index c1e85e4a..3d8abe52 100644 --- a/ggsql-wasm/demo/src/quarto/styles.css +++ b/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;