Update app/frontend/script.js

app/frontend/script.js

@@ -29,12 +29,12 @@ function hideLoading(button, originalText) {
 
 function getScoreLevel(score) {
     if (score < 0.4) {
-        return { className: 'good', icon: '👌', title: 'Low risk' };
+        return { className: 'good', icon: '<i class="bx bx-check-circle"></i>', title: 'Low risk' };
     }
     if (score < 0.7) {
-        return { className: 'warn', icon: '⚠️', title: 'Needs review' };
+        return { className: 'warn', icon: '<i class="bx bx-error"></i>', title: 'Needs review' };
     }
-    return { className: 'bad', icon: '🚨', title: 'High risk' };
+    return { className: 'bad', icon: '<i class="bx bx-error-circle"></i>', title: 'High risk' };
 }
 
 function formatScore(score) {
@@ -197,9 +197,9 @@ async function analyzeText() {
         const verdictClass = data.binary_verdict;
         const verdictText = verdictClass.charAt(0).toUpperCase() + verdictClass.slice(1);
         const verdictIcons = {
-            'pass': '✅',
-            'warn': '⚠️',
-            'fail': '🚨'
+            'pass': '<i class="bx bx-check-shield"></i>',
+            'warn': '<i class="bx bx-shield-minus"></i>',
+            'fail': '<i class="bx bx-shield-x"></i>'
         };
         
         binaryResult.innerHTML = `
@@ -403,7 +403,9 @@ function initThemeToggle() {
     const updateIcon = (isDark) => {
         themeToggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');
         if (themeIcon) {
-            themeIcon.textContent = isDark ? '🌙' : '🌞';
+            // Toggle class for boxicons
+            themeIcon.className = isDark ? 'bx bx-moon theme-icon' : 'bx bx-sun theme-icon';
+            themeIcon.textContent = ''; // clear text content
         }
     };
 
@@ -422,6 +424,68 @@ function initThemeToggle() {
     });
 }
 
+// Code snippet tabs for Get Started
+function initCodeTabs() {
+    const tabs = document.querySelectorAll('.code-tab');
+    const blocks = document.querySelectorAll('.code-block');
+
+    if (!tabs.length) return;
+
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            // Remove active class from all tabs
+            tabs.forEach(t => t.classList.remove('active'));
+            // Add active class to clicked tab
+            tab.classList.add('active');
+
+            // Hide all blocks
+            blocks.forEach(b => b.classList.remove('active'));
+
+            // Show target block
+            const targetId = `code-${tab.dataset.code}`;
+            const targetBlock = document.getElementById(targetId);
+            if (targetBlock) {
+                targetBlock.classList.add('active');
+            }
+        });
+    });
+}
+
+// Copy Code Functionality
+function initCopyButton() {
+    const copyBtn = document.getElementById('copy-code-btn');
+    if (!copyBtn) return;
+
+    copyBtn.addEventListener('click', async () => {
+        // Find active code block
+        const activeBlock = document.querySelector('.code-block.active code');
+        if (!activeBlock) return;
+
+        const textToCopy = activeBlock.textContent;
+
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            
+            // Provide feedback
+            const originalHtml = copyBtn.innerHTML;
+            copyBtn.innerHTML = `<i class='bx bx-check'></i> Copied!`;
+            copyBtn.classList.add('success');
+            
+            setTimeout(() => {
+                copyBtn.innerHTML = originalHtml;
+                copyBtn.classList.remove('success');
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+            copyBtn.innerHTML = `<i class='bx bx-x'></i> Failed`;
+            
+            setTimeout(() => {
+                copyBtn.innerHTML = `<i class='bx bx-copy'></i> Copy`;
+            }, 2000);
+        }
+    });
+}
+
 // Initialize app
 document.addEventListener('DOMContentLoaded', () => {
     initTabs();
@@ -430,6 +494,8 @@ document.addEventListener('DOMContentLoaded', () => {
     initModelSelectorGC();
     initEventListeners();
     initThemeToggle();
+    initCodeTabs();
+    initCopyButton();
 
     console.log('LionGuard 2 app initialized');
 });