Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

8b15e94

verified ·

1 Parent(s): afc5c29

Update index.html

Browse files

Files changed (1) hide show

index.html +83 -102

index.html CHANGED Viewed

@@ -29,7 +29,6 @@
             flex-direction: column;
         }
-        /* هدر */
         .header {
             text-align: center;
             padding: 20px 0 30px;
@@ -52,7 +51,6 @@
             opacity: 0.8;
         }
-        /* تب‌ها */
         .tabs {
             display: flex;
             background: rgba(255,255,255,0.15);
@@ -79,7 +77,6 @@
             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
         }
-        /* کارت اصلی */
         .card {
             background: rgba(255,255,255,0.2);
             border-radius: 20px;
@@ -96,7 +93,6 @@
             display: flex;
         }
-        /* فرم */
         .form-group {
             margin-bottom: 20px;
         }
@@ -133,7 +129,6 @@
             color: #666;
         }
-        /* فایل آپلود */
         .file-upload {
             position: relative;
             background: rgba(255,255,255,0.9);
@@ -185,7 +180,6 @@
             font-weight: 500;
         }
-        /* دکمه */
         .btn {
             width: 100%;
             padding: 16px;
@@ -222,7 +216,6 @@
             transform: translateY(0);
         }
-        /* نتایج */
         .result {
             flex: 1;
             background: rgba(255,255,255,0.15);
@@ -252,16 +245,41 @@
             animation: zoomIn 0.4s ease;
         }
-        .result-text {
             background: rgba(255,255,255,0.2);
             border-radius: 8px;
-            padding: 15px;
             word-break: break-all;
             line-height: 1.5;
-            animation: slideUp 0.4s ease;
         }
-        /* لودر */
         .loader {
             width: 40px;
             height: 40px;
@@ -271,20 +289,10 @@
             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;
@@ -293,14 +301,12 @@
 </head>
 <body>
     <div class="container">
-        <!-- هدر -->
         <div class="header">
             <div class="logo">📱</div>
             <h1 class="title">QR کد ساز</h1>
             <p class="subtitle">ساخت و خواندن آسان کیوآر کد</p>
         </div>
-        <!-- تب‌ها -->
         <div class="tabs">
             <div class="tab active" data-tab="generate">
                 <span class="icon">➕</span>
@@ -312,11 +318,11 @@
             </div>
         </div>
-        <!-- کارت ساخت QR کد -->
         <div class="card tab-content active" id="generate-content">
             <div class="form-group">
                 <label class="label">متن یا لینک خود را بنویسید:</label>
-                <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>
@@ -330,12 +336,10 @@
             </button>
         </div>
-        <!-- کارت خواندن QR کد -->
         <div class="card tab-content" id="read-content">
             <div class="form-group">
                 <label class="label">تصویر QR کد را انتخاب کنید:</label>
                 <div class="file-upload" onclick="document.getElementById('file-input').click()">
-                    <!-- ===== CHANGE HERE: The `accept` attribute is removed ===== -->
                     <input type="file" id="file-input">
                     <div class="upload-content">
                         <div class="upload-icon">📷</div>
@@ -359,7 +363,6 @@
     <script>
         const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
-        // عناصر DOM
         const tabs = document.querySelectorAll('.tab');
         const tabContents = document.querySelectorAll('.tab-content');
         const generateBtn = document.getElementById('generate-btn');
@@ -370,56 +373,51 @@
         const decodedText = document.getElementById('decoded-text');
         const generateLoader = document.getElementById('generate-loader');
         const readLoader = document.getElementById('read-loader');
         const fileUpload = document.querySelector('.file-upload');
         const uploadContent = document.querySelector('.upload-content');
-        // تعویض تب‌ها
         tabs.forEach(tab => {
             tab.addEventListener('click', () => {
                 tabs.forEach(t => t.classList.remove('active'));
                 tabContents.forEach(tc => tc.classList.remove('active'));
                 tab.classList.add('active');
-                const targetTab = tab.getAttribute('data-tab');
-                document.getElementById(targetTab + '-content').classList.add('active');
             });
         });
         fileInput.addEventListener('change', () => {
             const file = fileInput.files[0];
             if (file) {
-                // Check if the file is an image before creating a preview
                 if (file.type.startsWith('image/')) {
                     const reader = new FileReader();
                     reader.onload = function(e) {
                         const previewImage = document.createElement('img');
                         previewImage.src = e.target.result;
                         uploadContent.style.display = 'none';
-                        if(fileUpload.querySelector('img')) {
-                           fileUpload.querySelector('img').remove();
-                        }
                         fileUpload.appendChild(previewImage);
                         fileUpload.classList.add('has-preview');
                     }
                     reader.readAsDataURL(file);
                 } else {
-                    // If not an image, just show the file name
                     uploadContent.style.display = 'block';
-                     if(fileUpload.querySelector('img')) {
-                        fileUpload.querySelector('img').remove();
-                    }
                     fileUpload.classList.remove('has-preview');
-                    // Display file name instead of icon
                     uploadContent.querySelector('.upload-icon').textContent = '📄';
                     uploadContent.querySelector('.upload-text').textContent = file.name;
                 }
             } else {
-                // Reset if no file is selected
-                if(fileUpload.querySelector('img')) {
-                    fileUpload.querySelector('img').remove();
-                }
                 uploadContent.style.display = 'block';
                 uploadContent.querySelector('.upload-icon').textContent = '📷';
                 uploadContent.querySelector('.upload-text').textContent = 'انتخاب تصویر';
@@ -427,7 +425,6 @@
             }
         });
-        // توابع کمکی
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
         const listenForData = (sessionHash, onResult, onError) => {
@@ -449,33 +446,23 @@
             };
         };
-        // ساخت QR کد
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
-            if (!text) {
-                alert("لطفاً متنی را وارد کنید.");
-                return;
-            }
             generateLoader.style.display = 'block';
             qrDisplay.innerHTML = '';
             generateBtn.disabled = true;
-            const sessionHash = generateSessionHash();
             try {
-                const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ fn_index: 0, data: [text], session_hash: sessionHash })
                 });
-                if (!joinResponse.ok) throw new Error('خطا در ارسال درخواست');
-                listenForData(
-                    sessionHash,
-                    (result) => {
-                        qrDisplay.innerHTML = (result && result[0]) ? result[0] : '<span class="result-empty">خطا در ساخت QR کد</span>';
-                    },
-                    (error) => {
-                        alert(`خطا: ${error}`);
-                        qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت</span>';
-                    }
                 );
             } catch (error) {
                 alert(`خطا: ${error.message}`);
@@ -486,42 +473,41 @@
             }
         });
-        // خواندن QR کد
         readBtn.addEventListener('click', async () => {
             const file = fileInput.files[0];
-            if (!file) {
-                alert("لطفاً یک تصویر انتخاب کنید.");
-                return;
-            }
-            if (!file.type.startsWith('image/')) {
-                 alert("لطفاً یک فایل تصویری انتخاب کنید.");
-                 return;
-            }
             readLoader.style.display = 'block';
             decodedText.innerHTML = '';
             readBtn.disabled = true;
             try {
                 const formData = new FormData();
                 formData.append('files', file);
-                const uploadResponse = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData });
-                if (!uploadResponse.ok) throw new Error('خطا در آپلود فایل');
-                const uploadResult = await uploadResponse.json();
-                const serverFilePath = uploadResult[0];
-                const fileDataObject = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name };
                 const sessionHash = generateSessionHash();
-                const joinResponse = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ fn_index: 1, data: [fileDataObject], session_hash: sessionHash })
                 });
-                if (!joinResponse.ok) throw new Error('خطا در پردازش');
-                listenForData(
-                    sessionHash,
-                    (result) => { decodedText.innerHTML = `<div class="result-text">📝 ${result[0]}</div>`; },
-                    (error) => {
-                        alert(`خطا: ${error}`);
-                        decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>';
-                    }
                 );
             } catch (error) {
                 alert(`خطا: ${error.message}`);
@@ -532,12 +518,8 @@
             }
         });
-        // Drag & Drop
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-            });
         });
         ['dragenter', 'dragover'].forEach(eventName => {
             fileUpload.addEventListener(eventName, () => {
@@ -551,10 +533,9 @@
                 fileUpload.style.transform = 'translateY(0)';
             });
         });
-        fileUpload.addEventListener('drop', (e) => {
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                fileInput.files = files;
                 fileInput.dispatchEvent(new Event('change'));
             }
         });

             flex-direction: column;
         }
         .header {
             text-align: center;
             padding: 20px 0 30px;
             opacity: 0.8;
         }
         .tabs {
             display: flex;
             background: rgba(255,255,255,0.15);
             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
         }
         .card {
             background: rgba(255,255,255,0.2);
             border-radius: 20px;
             display: flex;
         }
         .form-group {
             margin-bottom: 20px;
         }
             color: #666;
         }
         .file-upload {
             position: relative;
             background: rgba(255,255,255,0.9);
             font-weight: 500;
         }
         .btn {
             width: 100%;
             padding: 16px;
             transform: translateY(0);
         }
         .result {
             flex: 1;
             background: rgba(255,255,255,0.15);
             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;
+        }
+        .copy-btn {
+            background: #fff;
+            color: #54a0ff;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 12px;
+            font-family: 'Vazirmatn', sans-serif;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s ease;
+            flex-shrink: 0;
+        }
+        .copy-btn:hover {
+            background: #eef;
         }
         .loader {
             width: 40px;
             height: 40px;
             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;
 </head>
 <body>
     <div class="container">
         <div class="header">
             <div class="logo">📱</div>
             <h1 class="title">QR کد ساز</h1>
             <p class="subtitle">ساخت و خواندن آسان کیوآر کد</p>
         </div>
         <div class="tabs">
             <div class="tab active" data-tab="generate">
                 <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>
             </button>
         </div>
         <div class="card tab-content" id="read-content">
             <div class="form-group">
                 <label class="label">تصویر QR کد را انتخاب کنید:</label>
                 <div class="file-upload" onclick="document.getElementById('file-input').click()">
                     <input type="file" id="file-input">
                     <div class="upload-content">
                         <div class="upload-icon">📷</div>
     <script>
         const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
         const tabs = document.querySelectorAll('.tab');
         const tabContents = document.querySelectorAll('.tab-content');
         const generateBtn = document.getElementById('generate-btn');
         const decodedText = document.getElementById('decoded-text');
         const generateLoader = document.getElementById('generate-loader');
         const readLoader = document.getElementById('read-loader');
         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'));
                 tabContents.forEach(tc => tc.classList.remove('active'));
                 tab.classList.add('active');
+                document.getElementById(tab.getAttribute('data-tab') + '-content').classList.add('active');
             });
         });
         fileInput.addEventListener('change', () => {
             const file = fileInput.files[0];
             if (file) {
                 if (file.type.startsWith('image/')) {
                     const reader = new FileReader();
                     reader.onload = function(e) {
                         const previewImage = document.createElement('img');
                         previewImage.src = e.target.result;
                         uploadContent.style.display = 'none';
+                        if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove();
                         fileUpload.appendChild(previewImage);
                         fileUpload.classList.add('has-preview');
                     }
                     reader.readAsDataURL(file);
                 } else {
+                    if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove();
                     uploadContent.style.display = 'block';
                     fileUpload.classList.remove('has-preview');
                     uploadContent.querySelector('.upload-icon').textContent = '📄';
                     uploadContent.querySelector('.upload-text').textContent = file.name;
                 }
             } else {
+                if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove();
                 uploadContent.style.display = 'block';
                 uploadContent.querySelector('.upload-icon').textContent = '📷';
                 uploadContent.querySelector('.upload-text').textContent = 'انتخاب تصویر';
             }
         });
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
         const listenForData = (sessionHash, onResult, onError) => {
             };
         };
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
+            if (!text) return alert("لطفاً متنی را وارد کنید.");
             generateLoader.style.display = 'block';
             qrDisplay.innerHTML = '';
             generateBtn.disabled = true;
             try {
+                const sessionHash = generateSessionHash();
+                const res = await fetch(`${SPACE_URL}/gradio_api/queue/join`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ fn_index: 0, data: [text], session_hash: sessionHash })
                 });
+                if (!res.ok) throw new Error('خطا در ارسال درخواست');
+                listenForData(sessionHash,
+                    (result) => qrDisplay.innerHTML = (result && result[0]) ? result[0] : '<span class="result-empty">خطا در ساخت</span>',
+                    (error) => { alert(`خطا: ${error}`); qrDisplay.innerHTML = '<span class="result-empty">خطا</span>'; }
                 );
             } catch (error) {
                 alert(`خطا: ${error.message}`);
             }
         });
         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}`);
             }
         });
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
         });
         ['dragenter', 'dragover'].forEach(eventName => {
             fileUpload.addEventListener(eventName, () => {
                 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'));
             }
         });