ui/ux update

index.html

@@ -270,21 +270,37 @@
     /* Result styling */
     #decResult {
       font-family: 'Telegraf', sans-serif;
-      padding: calc(var(--spacing-unit) * 2);
+      padding: calc(var(--spacing-unit) * 3);
       background: var(--grey-050);
       border: 2px solid var(--black);
       border-radius: 8px;
-      min-height: 48px;
+      min-height: 80px;
       display: flex;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
+      gap: calc(var(--spacing-unit) * 1);
       font-weight: 600;
-      font-size: 1.3rem;
+      font-size: 1.4rem;
+      text-align: center;
     }
 
     #decResult:not(:empty) {
       color: var(--black);
     }
 
+    .watermark-flag {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: calc(var(--spacing-unit) * 1);
+    }
+
+    .watermark-score {
+      font-size: 1.2rem;
+      font-weight: 500;
+      opacity: 0.8;
+    }
+
     /* Responsive adjustments */
     @media (max-width: 968px) {
       .hero {
@@ -418,10 +434,10 @@ sequenceDiagram
             <span id="tokenizerSpin" class="loader" hidden aria-label="Loading tokenizer"></span>
           </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>
+          <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt or use the example below" autocomplete="off"></textarea>
+          <div style="display: flex; gap: calc(var(--spacing-unit) * 1); margin-bottom: calc(var(--spacing-unit) * 2); flex-wrap: wrap; align-items: center;">
+            <button id="btnWatermarked" class="btn" style="min-width: auto; padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); font-size: 1rem;">✨ Use watermarked example</button>
+            <span style="font-size: 1rem; color: var(--black); opacity: 0.7;">← Try this to see watermark detection in action</span>
           </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>

wasm-demo.js

@@ -181,11 +181,6 @@ $('btnWatermarked').onclick = () => {
     $('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();
@@ -402,7 +397,16 @@ $('btnDecrypt').onclick = () => {
         const score = (Number(score_scaled) / 1e6).toFixed(6);
         console.log('[Main] Decryption successful');
         console.log(`[Main] Result - flag: ${flag}, score: ${score}, total_g: ${total_g}`);
-        $('decResult').textContent = `Flag: ${flag}, Score: ${score}, Total G: ${total_g}`;
+        
+        // Create elegant result display
+        const isWatermarked = flag === 1;
+        const flagText = isWatermarked ? '✅ Watermarked' : '❌ Not Watermarked';
+        const scoreText = `Confidence Score: ${score}`;
+        
+        $('decResult').innerHTML = `
+            <div class="watermark-flag">${flagText}</div>
+            <div class="watermark-score">${scoreText}</div>
+        `;
     } catch (e) {
         console.error('[Main] Decryption error:', e);
         $('decResult').textContent = `Decryption failed: ${e.message}`;