add examples

index.html

@@ -420,6 +420,10 @@ sequenceDiagram
           </div>
           <label for="tokenInput" class="visually-hidden">Text to encrypt</label>
           <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt" autocomplete="off"></textarea>
+          <div style="display: flex; gap: calc(var(--spacing-unit) * 1); margin-bottom: calc(var(--spacing-unit) * 2); flex-wrap: wrap;">
+            <button id="btnWatermarked" class="btn" style="min-width: auto; padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); font-size: 1rem;">✅ Watermarked</button>
+            <button id="btnNotWatermarked" class="btn" style="min-width: auto; padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); font-size: 1rem;">❌ Not watermarked</button>
+          </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
             <span id="encryptSpin" class="loader" hidden aria-label="Encrypting"></span>

wasm-demo.js

@@ -175,6 +175,17 @@ $('btnLoadSaved').onclick = async () => {
   }
 };
 
+// Add example text buttons
+$('btnWatermarked').onclick = () => {
+    $('tokenInput').value = 'watermarking is useful for a variety of reasons like authentication, privacy';
+    $('tokenInput').dispatchEvent(new Event('input'));
+};
+
+$('btnNotWatermarked').onclick = () => {
+    $('tokenInput').value = 'watermarking serves multiple purposes, including verifying authenticity and enhancing data confidentiality';
+    $('tokenInput').dispatchEvent(new Event('input'));
+};
+
 // Add token counter functionality
 $('tokenInput').addEventListener('input', () => {
     const text = $('tokenInput').value.trim();