Update app.py

app.py

@@ -386,6 +386,7 @@ HTML_TEMPLATE = """
 
         .variant-item.error {
             opacity: 0.6;
+            cursor: default;
         }
 
         .variant-item.error .variant-text {
@@ -448,6 +449,10 @@ HTML_TEMPLATE = """
             opacity: 1;
         }
 
+        .toast.error {
+            background: #ef4444;
+        }
+
         .loading {
             display: inline-block;
             width: 18px;
@@ -549,7 +554,7 @@ HTML_TEMPLATE = """
                 </div>
                 <ul class="translation-list">
                 {% for trans in marian %}
-                    <li class="translation-item" onclick="selectTranslation(this, {{ trans | tojson }})" ondblclick="copyText({{ trans | tojson }})">
+                    <li class="translation-item" onclick="selectTranslation(this, {{ trans | tojson }})">
                         <span class="translation-text">{{ trans }}</span>
                         <svg class="check-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                             <polyline points="20 6 9 17 4 12"></polyline>
@@ -579,7 +584,7 @@ HTML_TEMPLATE = """
                 <div class="variant-grid">
                 {% for variant_name, variant_data in libre.items() %}
                     {% if variant_data.success %}
-                    <div class="variant-item" onclick="selectVariant(this, {{ variant_data.text | tojson }})" ondblclick="copyText({{ variant_data.text | tojson }})">
+                    <div class="variant-item" onclick="selectVariant(this, {{ variant_data.text | tojson }})">
                         <div class="variant-header">
                             <span class="variant-name">{{ variant_name }}</span>
                             <span class="variant-code">{{ variant_data.code }}</span>
@@ -627,7 +632,7 @@ HTML_TEMPLATE = """
             });
             element.classList.add('selected');
             selectedText = text;
-            copyText(text, false);
+            copyText(text, true);
         }
 
         function selectVariant(element, text) {
@@ -636,31 +641,49 @@ HTML_TEMPLATE = """
             });
             element.classList.add('selected');
             selectedText = text;
-            copyText(text, false);
+            copyText(text, true);
         }
 
         async function copyText(text, showToast = true) {
-            try {
-                await navigator.clipboard.writeText(text);
-                if (showToast) {
-                    showToastMessage('Copied to clipboard!');
+            let copied = false;
+
+            if (navigator.clipboard && window.isSecureContext) {
+                try {
+                    await navigator.clipboard.writeText(text);
+                    copied = true;
+                } catch (err) {
+                    copied = false;
                 }
-            } catch (err) {
-                const textArea = document.createElement('textarea');
-                textArea.value = text;
-                document.body.appendChild(textArea);
-                textArea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textArea);
-                if (showToast) {
-                    showToastMessage('Copied to clipboard!');
+            }
+
+            if (!copied) {
+                try {
+                    const textArea = document.createElement('textarea');
+                    textArea.value = text;
+                    textArea.style.position = 'fixed';
+                    textArea.style.left = '-9999px';
+                    document.body.appendChild(textArea);
+                    textArea.focus();
+                    textArea.select();
+                    copied = document.execCommand('copy');
+                    document.body.removeChild(textArea);
+                } catch (err) {
+                    copied = false;
                 }
             }
+
+            if (showToast) {
+                showToastMessage(
+                    copied ? 'Copied to clipboard!' : 'Copy failed — please copy manually',
+                    !copied
+                );
+            }
         }
 
-        function showToastMessage(message) {
+        function showToastMessage(message, isError = false) {
             const toast = document.getElementById('toast');
             toast.textContent = message;
+            toast.classList.toggle('error', isError);
             toast.classList.add('show');
             setTimeout(() => toast.classList.remove('show'), 2000);
         }