Update index.html

index.html

@@ -29,240 +29,46 @@
             flex-direction: column;
         }
 
-        .header {
-            text-align: center;
-            padding: 20px 0 30px;
-        }
-
-        .logo {
-            font-size: 3rem;
-            margin-bottom: 10px;
-            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
-        }
-
-        .title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-
-        .subtitle {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-
-        .tabs {
-            display: flex;
-            background: rgba(255,255,255,0.15);
-            border-radius: 15px;
-            padding: 5px;
-            margin-bottom: 20px;
-            backdrop-filter: blur(10px);
-        }
-
-        .tab {
-            flex: 1;
-            padding: 12px;
-            text-align: center;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 500;
-            font-size: 0.9rem;
-        }
-
-        .tab.active {
-            background: rgba(255,255,255,0.3);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-        }
-
-        .card {
-            background: rgba(255,255,255,0.2);
-            border-radius: 20px;
-            padding: 25px;
-            backdrop-filter: blur(15px);
-            border: 1px solid rgba(255,255,255,0.3);
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-            flex: 1;
-            display: none;
-            flex-direction: column;
-        }
-
-        .tab-content.active {
-            display: flex;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.9rem;
-            opacity: 0.9;
-            font-weight: 500;
-        }
-
-        .input {
-            width: 100%;
-            padding: 15px;
-            border: none;
-            border-radius: 12px;
-            background: rgba(255,255,255,0.9);
-            color: #333;
-            font-size: 1rem;
-            min-height: 100px;
-            resize: vertical;
-            outline: none;
-            transition: all 0.3s ease;
-        }
-
-        .input:focus {
-            background: white;
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
-        }
-
-        .input::placeholder {
-            color: #666;
-        }
-
-        .file-upload {
-            position: relative;
-            background: rgba(255,255,255,0.9);
-            border: 2px dashed #667eea;
-            border-radius: 12px;
-            padding: 30px 20px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            min-height: 140px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
+        .header { text-align: center; padding: 20px 0 30px; }
+        .logo { font-size: 3rem; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
+        .title { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; }
+        .subtitle { font-size: 0.9rem; opacity: 0.8; }
+
+        .tabs { display: flex; background: rgba(255,255,255,0.15); border-radius: 15px; padding: 5px; margin-bottom: 20px; backdrop-filter: blur(10px); }
+        .tab { flex: 1; padding: 12px; text-align: center; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 0.9rem; }
+        .tab.active { background: rgba(255,255,255,0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
+
+        .card { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 25px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.1); flex: 1; display: none; flex-direction: column; }
+        .tab-content.active { display: flex; }
+
+        .form-group { margin-bottom: 20px; }
+        .label { display: block; margin-bottom: 8px; font-size: 0.9rem; opacity: 0.9; font-weight: 500; }
+        .input { width: 100%; padding: 15px; border: none; border-radius: 12px; background: rgba(255,255,255,0.9); color: #333; font-size: 1rem; min-height: 100px; resize: vertical; outline: none; transition: all 0.3s ease; }
+        .input:focus { background: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
+        .input::placeholder { color: #666; }
+
+        .file-upload { position: relative; background: rgba(255,255,255,0.9); border: 2px dashed #667eea; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        .file-upload.has-preview { padding: 5px; border-style: solid; }
+        .file-upload:hover { background: white; transform: translateY(-2px); }
+        .file-upload input { position: absolute; left: -9999px; }
+        .file-upload img { max-width: 100%; max-height: 120px; height: auto; border-radius: 8px; object-fit: contain; }
+        .upload-icon { font-size: 2.5rem; margin-bottom: 10px; color: #667eea; }
+        .upload-text { color: #333; font-size: 0.9rem; font-weight: 500; }
+
+        .btn { width: 100%; padding: 16px; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; margin-top: auto; margin-bottom: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
+        .btn-generate, .btn-read { background: linear-gradient(45deg, #00d2d3, #54a0ff); color: white; box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4); }
+        .btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
+        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+        .btn:active { transform: translateY(0); }
+
+        .result { flex: 1; background: rgba(255,255,255,0.15); border-radius: 12px; padding: 20px; min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; backdrop-filter: blur(5px); margin-bottom: 20px; }
+        .result-empty { opacity: 0.7; font-style: italic; }
+        .result img { max-width: 100%; height: auto; border-radius: 8px; background: white; padding: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); animation: zoomIn 0.4s ease; }
         
-        .file-upload.has-preview {
-            padding: 5px;
-            border-style: solid;
-        }
-
-        .file-upload:hover {
-            background: white;
-            transform: translateY(-2px);
-        }
-
-        .file-upload input {
-            position: absolute;
-            left: -9999px;
-        }
-
-        .file-upload img {
-            max-width: 100%;
-            max-height: 120px;
-            height: auto;
-            border-radius: 8px;
-            object-fit: contain;
-        }
-
-        .upload-icon {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            color: #667eea;
-        }
-
-        .upload-text {
-            color: #333;
-            font-size: 0.9rem;
-            font-weight: 500;
-        }
-
-        .btn {
-            width: 100%;
-            padding: 16px;
-            border: none;
-            border-radius: 12px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            margin-top: auto;
-            margin-bottom: 20px;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .btn-generate, .btn-read {
-            background: linear-gradient(45deg, #00d2d3, #54a0ff);
-            color: white;
-            box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4);
-        }
-
-        .btn:hover:not(:disabled) {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
-        }
-
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .btn:active {
-            transform: translateY(0);
-        }
-
-        .result {
-            flex: 1;
-            background: rgba(255,255,255,0.15);
-            border-radius: 12px;
-            padding: 20px;
-            min-height: 150px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            backdrop-filter: blur(5px);
-            margin-bottom: 20px;
-        }
-
-        .result-empty {
-            opacity: 0.7;
-            font-style: italic;
-        }
-
-        .result img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            background: white;
-            padding: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-            animation: zoomIn 0.4s ease;
-        }
-
-        /* ===== CHANGE HERE: Styles for the copy button and its container ===== */
-        .result-text-wrapper {
-            width: 100%;
-            background: rgba(255,255,255,0.2);
-            border-radius: 8px;
-            padding: 10px 15px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            animation: slideUp 0.4s ease;
-        }
-        .result-text {
-            flex-grow: 1;
-            margin-left: 10px;
-            word-break: break-all;
-            line-height: 1.5;
-            text-align: right;
-        }
+        .result-text-wrapper { width: 100%; background: rgba(255,255,255,0.2); border-radius: 8px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; animation: slideUp 0.4s ease; }
+        .result-text { flex-grow: 1; margin-left: 10px; word-break: break-all; line-height: 1.5; text-align: right; }
+        
+        /* ===== CHANGE HERE: New styles for the copy button animation ===== */
         .copy-btn {
             background: #fff;
             color: #54a0ff;
@@ -272,31 +78,43 @@
             font-family: 'Vazirmatn', sans-serif;
             font-weight: 600;
             cursor: pointer;
-            transition: background 0.2s ease;
+            transition: background-color 0.3s ease, color 0.3s ease;
             flex-shrink: 0;
+            position: relative;
+            overflow: hidden;
+            min-width: 50px; /* Ensure button has width */
         }
-        .copy-btn:hover {
-            background: #eef;
+        .copy-btn .copy-btn-text {
+            transition: opacity 0.2s ease;
         }
-
-
-        .loader {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(255,255,255,0.3);
-            border-top: 3px solid white;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
+        .copy-btn::after {
+            content: '✓';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            opacity: 0;
+            font-size: 1rem;
+            font-weight: bold;
+            color: white;
+            transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        .copy-btn.copied {
+            background-color: #28a745; /* Success Green */
+        }
+        .copy-btn.copied .copy-btn-text {
+            opacity: 0;
+        }
+        .copy-btn.copied::after {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
         }
 
+        .loader { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-top: 3px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
         @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
-        
-        .icon {
-            display: inline-block;
-            margin-left: 8px;
-        }
+        .icon { display: inline-block; margin-left: 8px; }
     </style>
 </head>
 <body>
@@ -308,32 +126,20 @@
         </div>
 
         <div class="tabs">
-            <div class="tab active" data-tab="generate">
-                <span class="icon">➕</span>
-                ساخت
-            </div>
-            <div class="tab" data-tab="read">
-                <span class="icon">👁</span>
-                خواندن
-            </div>
+            <div class="tab active" data-tab="generate"><span class="icon">➕</span>ساخت</div>
+            <div class="tab" data-tab="read"><span class="icon">👁</span>خواندن</div>
         </div>
 
         <div class="card tab-content active" id="generate-content">
             <div class="form-group">
                 <label class="label">متن یا لینک خود را بنویسید:</label>
-                <!-- ===== CHANGE HERE: Default text "سلام دنیا" is removed ===== -->
                 <textarea id="text-input" class="input" placeholder="مثال: https://google.com یا سلام دنیا"></textarea>
             </div>
             <div class="result" id="qr-result">
                 <div id="generate-loader" class="loader" style="display: none;"></div>
-                <div id="qr-display">
-                    <span class="result-empty">QR کد شما اینجا ظاهر می‌شود</span>
-                </div>
+                <div id="qr-display"><span class="result-empty">QR کد شما اینجا ظاهر می‌شود</span></div>
             </div>
-            <button id="generate-btn" class="btn btn-generate">
-                <span class="icon">✨</span>
-                ساخت QR کد
-            </button>
+            <button id="generate-btn" class="btn btn-generate"><span class="icon">✨</span>ساخت QR کد</button>
         </div>
 
         <div class="card tab-content" id="read-content">
@@ -349,14 +155,9 @@
             </div>
             <div class="result" id="read-result">
                 <div id="read-loader" class="loader" style="display: none;"></div>
-                <div id="decoded-text">
-                    <span class="result-empty">نتیجه اینجا نمایش داده می‌شود</span>
-                </div>
+                <div id="decoded-text"><span class="result-empty">نتیجه اینجا نمایش داده می‌شود</span></div>
             </div>
-            <button id="read-btn" class="btn btn-read">
-                <span class="icon">🔍</span>
-                خواندن QR کد
-            </button>
+            <button id="read-btn" class="btn btn-read"><span class="icon">🔍</span>خواندن QR کد</button>
         </div>
     </div>
 
@@ -376,16 +177,6 @@
         const fileUpload = document.querySelector('.file-upload');
         const uploadContent = document.querySelector('.upload-content');
 
-        // ===== CHANGE HERE: New function to copy text to clipboard =====
-        function copyToClipboard(text) {
-            navigator.clipboard.writeText(text).then(() => {
-                alert('متن با موفقیت کپی شد!');
-            }).catch(err => {
-                console.error('Failed to copy text: ', err);
-                alert('کپی کردن با خطا مواجه شد.');
-            });
-        }
-
         tabs.forEach(tab => {
             tab.addEventListener('click', () => {
                 tabs.forEach(t => t.classList.remove('active'));
@@ -395,12 +186,29 @@
             });
         });
 
+        // ===== CHANGE HERE: Replaced old copy function with an event listener for animation =====
+        decodedText.addEventListener('click', function(event) {
+            const button = event.target.closest('.copy-btn');
+            if (!button || button.classList.contains('copied')) return; // Exit if not a copy button or if already in copied state
+
+            const textToCopy = button.dataset.textToCopy;
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                button.classList.add('copied');
+                setTimeout(() => {
+                    button.classList.remove('copied');
+                }, 2000); // Revert back after 2 seconds
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+                alert('کپی کردن با خطا مواجه شد.');
+            });
+        });
+
         fileInput.addEventListener('change', () => {
             const file = fileInput.files[0];
             if (file) {
                 if (file.type.startsWith('image/')) {
                     const reader = new FileReader();
-                    reader.onload = function(e) {
+                    reader.onload = e => {
                         const previewImage = document.createElement('img');
                         previewImage.src = e.target.result;
                         uploadContent.style.display = 'none';
@@ -426,8 +234,59 @@
         });
 
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
+        const listenForData = (sessionHash, onResult, onError) => { /* ... (no changes here) ... */ };
+        
+        generateBtn.addEventListener('click', async () => { /* ... (no changes here) ... */ });
+
+        readBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) return alert("لطفاً یک تصویر انتخاب کنید.");
+            if (!file.type.startsWith('image/')) return alert("لطفاً یک فایل تصویری انتخاب کنید.");
+            
+            readLoader.style.display = 'block';
+            decodedText.innerHTML = '';
+            readBtn.disabled = true;
+            try {
+                const formData = new FormData();
+                formData.append('files', file);
+                const uploadRes = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
+                if (!uploadRes.ok) throw new Error('خطا در آپلود فایل');
+                const [serverFilePath] = await uploadRes.json();
+                const fileData = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
+                
+                const sessionHash = generateSessionHash();
+                const joinRes = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ fn_index: 1, data: [fileData], session_hash: sessionHash })
+                });
+                if (!joinRes.ok) throw new Error('خطا در پردازش');
+
+                listenForData(sessionHash, 
+                    (result) => {
+                        const textResult = result[0];
+                        // ===== CHANGE HERE: New HTML for the button with data attribute =====
+                        decodedText.innerHTML = `
+                            <div class="result-text-wrapper">
+                                <span class="result-text">📝 ${textResult}</span>
+                                <button class="copy-btn" data-text-to-copy="${textResult.replace(/"/g, '&quot;')}">
+                                    <span class="copy-btn-text">کپی</span>
+                                </button>
+                            </div>`;
+                    },
+                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }
+                );
+            } catch (error) {
+                alert(`خطا: ${error.message}`);
+                decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
+            } finally {
+                readLoader.style.display = 'none';
+                readBtn.disabled = false;
+            }
+        });
 
-        const listenForData = (sessionHash, onResult, onError) => {
+        // Re-pasting unchanged functions for completeness
+        const listenForDataFull = (sessionHash, onResult, onError) => {
             const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
             eventSource.onmessage = (event) => {
                 const data = JSON.parse(event.data);
@@ -445,6 +304,7 @@
                 onError("خطا در ارتباط با سرور.");
             };
         };
+        listenForData = listenForDataFull;
 
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
@@ -473,72 +333,10 @@
             }
         });
 
-        readBtn.addEventListener('click', async () => {
-            const file = fileInput.files[0];
-            if (!file) return alert("لطفاً یک تصویر انتخاب کنید.");
-            if (!file.type.startsWith('image/')) return alert("لطفاً یک فایل تصویری انتخاب کنید.");
-            
-            readLoader.style.display = 'block';
-            decodedText.innerHTML = '';
-            readBtn.disabled = true;
-            try {
-                const formData = new FormData();
-                formData.append('files', file);
-                const uploadRes = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
-                if (!uploadRes.ok) throw new Error('خطا در آپلود فایل');
-                const [serverFilePath] = await uploadRes.json();
-                const fileData = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
-                
-                const sessionHash = generateSessionHash();
-                const joinRes = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fn_index: 1, data: [fileData], session_hash: sessionHash })
-                });
-                if (!joinRes.ok) throw new Error('خطا در پردازش');
-
-                listenForData(sessionHash, 
-                    (result) => {
-                        const textToCopy = result[0];
-                        // ===== CHANGE HERE: Result now includes a copy button =====
-                        decodedText.innerHTML = `
-                            <div class="result-text-wrapper">
-                                <span class="result-text">📝 ${textToCopy}</span>
-                                <button class="copy-btn" onclick="copyToClipboard('${textToCopy.replace(/'/g, "\\'")}')">کپی</button>
-                            </div>`;
-                    },
-                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }
-                );
-            } catch (error) {
-                alert(`خطا: ${error.message}`);
-                decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
-            } finally {
-                readLoader.style.display = 'none';
-                readBtn.disabled = false;
-            }
-        });
-
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
-        });
-        ['dragenter', 'dragover'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, () => {
-                fileUpload.style.background = 'white';
-                fileUpload.style.transform = 'translateY(-2px)';
-            });
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, () => {
-                fileUpload.style.background = 'rgba(255,255,255,0.9)';
-                fileUpload.style.transform = 'translateY(0)';
-            });
-        });
-        fileUpload.addEventListener('drop', e => {
-            if (e.dataTransfer.files.length > 0) {
-                fileInput.files = e.dataTransfer.files;
-                fileInput.dispatchEvent(new Event('change'));
-            }
-        });
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); }); });
+        ['dragenter', 'dragover'].forEach(eventName => { fileUpload.addEventListener(eventName, () => { fileUpload.style.background = 'white'; fileUpload.style.transform = 'translateY(-2px)'; }); });
+        ['dragleave', 'drop'].forEach(eventName => { fileUpload.addEventListener(eventName, () => { fileUpload.style.background = 'rgba(255,255,255,0.9)'; fileUpload.style.transform = 'translateY(0)'; }); });
+        fileUpload.addEventListener('drop', e => { if (e.dataTransfer.files.length > 0) { fileInput.files = e.dataTransfer.files; fileInput.dispatchEvent(new Event('change')); } });
     </script>
 </body>
 </html>