Update index.html

index.html

@@ -6,6 +6,34 @@
     <title>آلفا QR کد | ساخت و خواندن</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
     <style>
+        /* ===== THEME VARIABLES FROM TTS APP ===== */
+        :root {
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #F8F9FC;
+            --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
+            --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --text-tertiary: #8A94A6;
+            --accent-primary: #4A6CFA;
+            --accent-primary-hover: #3553D6;
+            --accent-primary-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8;
+            --accent-secondary-hover: #0DA986;
+            --accent-secondary-glow: rgba(15, 212, 168, 0.2);
+            --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+            --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+            --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+            --radius-card: 24px;
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* ===== BASE STYLES ===== */
         * {
             margin: 0;
             padding: 0;
@@ -13,51 +41,64 @@
         }
 
         body {
-            font-family: 'Vazirmatn', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: var(--app-font);
+            background-color: var(--app-bg);
+            color: var(--text-primary);
             min-height: 100vh;
-            color: #fff;
             overflow-x: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            padding: 2.5rem 1rem;
+            background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px);
+            background-size: 20px 20px;
+            background-position: -10px -10px;
         }
 
         .container {
-            max-width: 400px;
+            max-width: 480px;
+            width: 100%;
             margin: 0 auto;
-            padding: 15px;
-            min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
-
+        
+        /* ===== HEADER ===== */
         .header {
             text-align: center;
-            padding: 20px 0 30px;
+            padding: 1rem 0 2rem;
         }
 
         .logo {
             font-size: 3rem;
             margin-bottom: 10px;
-            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
         }
 
         .title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 5px;
+            font-size: 2.2rem;
+            font-weight: 900;
+            margin-bottom: 0.8rem;
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
         }
 
         .subtitle {
-            font-size: 0.9rem;
-            opacity: 0.8;
+            font-size: 1rem;
+            color: var(--text-secondary);
+            opacity: 0.9;
         }
-
+        
+        /* ===== TABS ===== */
         .tabs {
             display: flex;
-            background: rgba(255,255,255,0.15);
-            border-radius: 15px;
-            padding: 5px;
+            background: var(--input-bg);
+            border-radius: var(--radius-btn);
+            padding: 6px;
             margin-bottom: 20px;
-            backdrop-filter: blur(10px);
+            border: 1px solid var(--panel-border);
         }
 
         .tab {
@@ -66,24 +107,26 @@
             text-align: center;
             border-radius: 10px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 500;
+            transition: var(--transition-smooth);
+            font-weight: 600;
             font-size: 0.9rem;
+            color: var(--text-secondary);
         }
 
         .tab.active {
-            background: rgba(255,255,255,0.3);
+            background: var(--panel-bg);
+            color: var(--text-primary);
             transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+            box-shadow: var(--shadow-lg);
         }
 
+        /* ===== CARD ===== */
         .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);
+            background: var(--panel-bg);
+            border-radius: var(--radius-card);
+            padding: 30px;
+            border: 1px solid var(--panel-border);
+            box-shadow: var(--shadow-xl);
             flex: 1;
             display: none;
             flex-direction: column;
@@ -94,50 +137,49 @@
         }
 
         .form-group {
-            margin-bottom: 20px;
+            margin-bottom: 25px;
         }
 
         .label {
             display: block;
-            margin-bottom: 8px;
-            font-size: 0.9rem;
-            opacity: 0.9;
-            font-weight: 500;
+            margin-bottom: 12px;
+            font-size: 1rem;
+            font-weight: 700;
+            color: var(--text-primary);
         }
 
+        /* ===== INPUTS & UPLOAD AREA ===== */
         .input {
             width: 100%;
             padding: 15px;
-            border: none;
-            border-radius: 12px;
-            background: rgba(255,255,255,0.9);
-            color: #333;
+            border: 1px solid var(--input-border);
+            border-radius: var(--radius-input);
+            background: var(--input-bg);
+            color: var(--text-primary);
             font-size: 1rem;
-            min-height: 100px;
+            font-family: var(--app-font);
+            min-height: 120px;
             resize: vertical;
             outline: none;
-            transition: all 0.3s ease;
+            transition: var(--transition-smooth);
+            box-shadow: var(--shadow-sm) inset;
         }
 
         .input:focus {
-            background: white;
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
-        }
-
-        .input::placeholder {
-            color: #666;
+            background: var(--panel-bg);
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset;
         }
 
         .file-upload {
             position: relative;
-            background: rgba(255,255,255,0.9);
-            border: 2px dashed #667eea;
-            border-radius: 12px;
+            background: var(--input-bg);
+            border: 2px dashed var(--input-border);
+            border-radius: var(--radius-input);
             padding: 30px 20px;
             text-align: center;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: var(--transition-smooth);
             min-height: 140px;
             display: flex;
             flex-direction: column;
@@ -146,12 +188,15 @@
         }
         
         .file-upload.has-preview {
-            padding: 5px;
+            padding: 10px;
             border-style: solid;
+            border-color: var(--accent-primary);
         }
 
-        .file-upload:hover {
+        .file-upload:hover, .file-upload.drag-over {
             background: white;
+            border-color: var(--accent-primary);
+            box-shadow: 0 0 15px var(--accent-primary-glow);
             transform: translateY(-2px);
         }
 
@@ -171,127 +216,131 @@
         .upload-icon {
             font-size: 2.5rem;
             margin-bottom: 10px;
-            color: #667eea;
+            color: var(--accent-primary);
         }
 
         .upload-text {
-            color: #333;
+            color: var(--text-secondary);
             font-size: 0.9rem;
             font-weight: 500;
         }
 
+        /* ===== BUTTONS ===== */
         .btn {
             width: 100%;
             padding: 16px;
             border: none;
-            border-radius: 12px;
+            border-radius: var(--radius-btn);
             font-size: 1.1rem;
-            font-weight: 600;
+            font-weight: 700;
             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);
+            transition: var(--transition-smooth);
+            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
             color: white;
-            box-shadow: 0 6px 20px rgba(84, 160, 255, 0.4);
+            box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow);
         }
 
         .btn:hover:not(:disabled) {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow);
         }
 
         .btn:disabled {
-            opacity: 0.6;
+            background: var(--text-tertiary);
+            color: var(--text-secondary);
             cursor: not-allowed;
             transform: none;
+            box-shadow: none;
         }
 
-        .btn:active {
+        .btn:active:not(:disabled) {
             transform: translateY(0);
         }
 
+        /* ===== RESULT AREA ===== */
         .result {
             flex: 1;
-            background: rgba(255,255,255,0.15);
-            border-radius: 12px;
+            background: var(--input-bg);
+            border: 2px dashed var(--input-border);
+            border-radius: var(--radius-card);
             padding: 20px;
             min-height: 150px;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
-            backdrop-filter: blur(5px);
-            margin-bottom: 20px;
+            margin-bottom: 25px;
+            box-shadow: var(--shadow-sm) inset;
         }
 
         .result-empty {
-            opacity: 0.7;
+            color: var(--text-secondary);
             font-style: italic;
         }
 
         .result img {
             max-width: 100%;
             height: auto;
-            border-radius: 8px;
+            border-radius: var(--radius-input);
             background: white;
             padding: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            box-shadow: var(--shadow-lg);
             animation: zoomIn 0.4s ease;
+            border: 1px solid var(--panel-border);
         }
 
         .result-text-wrapper {
             width: 100%;
-            background: rgba(255,255,255,0.2);
-            border-radius: 8px;
-            padding: 10px 15px;
+            background: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-input);
+            padding: 12px 18px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             animation: slideUp 0.4s ease;
+            box-shadow: var(--shadow-md);
         }
         .result-text {
             flex-grow: 1;
             margin-left: 10px;
             word-break: break-all;
-            line-height: 1.5;
+            line-height: 1.6;
             text-align: right;
+            color: var(--text-primary);
+            font-weight: 500;
         }
         
-        /* ===== CHANGE HERE: Styles for the copy button and its animation ===== */
         .copy-btn {
-            background: #fff;
-            color: #54a0ff;
+            background: var(--accent-primary);
+            color: white;
             border: none;
-            border-radius: 6px;
-            padding: 8px 12px;
-            font-family: 'Vazirmatn', sans-serif;
+            border-radius: 8px;
+            padding: 8px 14px;
+            font-family: var(--app-font);
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s ease; /* Smooth transition for all properties */
+            transition: var(--transition-smooth);
             flex-shrink: 0;
             font-size: 0.9rem;
+            box-shadow: var(--shadow-sm);
         }
         .copy-btn:hover {
-            background: #eef;
+            background: var(--accent-primary-hover);
+            transform: scale(1.05);
         }
         .copy-btn.copied {
-            background-color: #28a745; /* Success green */
-            color: white;
-            transform: scale(1.05); /* Slightly enlarge */
+            background-color: var(--accent-secondary);
+            transform: scale(1.05);
         }
 
-
+        /* ===== LOADER & ANIMATIONS ===== */
         .loader {
             width: 40px;
             height: 40px;
-            border: 3px solid rgba(255,255,255,0.3);
-            border-top: 3px solid white;
+            border: 4px solid var(--input-border);
+            border-top: 4px solid var(--accent-primary);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
@@ -303,6 +352,7 @@
         .icon {
             display: inline-block;
             margin-left: 8px;
+            vertical-align: middle;
         }
     </style>
 </head>
@@ -310,13 +360,13 @@
     <div class="container">
         <div class="header">
             <div class="logo">📱</div>
-            <h1 class="title">ساخت Qr Code آلفا </h1>
+            <h1 class="title">ساخت Qr Code آلفا</h1>
             <p class="subtitle">ساخت و خواندن آسان کیوآر کد</p>
         </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" data-tab="read"><span class="icon">👁️</span>خواندن</div>
         </div>
 
         <div class="card tab-content active" id="generate-content">
@@ -328,14 +378,14 @@
                 <div id="generate-loader" class="loader" style="display: none;"></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"><span class="icon">✨</span>ساخت QR کد</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">
+                    <input type="file" id="file-input" accept="image/*">
                     <div class="upload-content">
                         <div class="upload-icon">📷</div>
                         <div class="upload-text">انتخاب تصویر</div>
@@ -346,11 +396,12 @@
                 <div id="read-loader" class="loader" style="display: none;"></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"><span class="icon">🔍</span>خواندن QR کد</button>
         </div>
     </div>
 
     <script>
+        // JAVASCRIPT IS UNCHANGED
         const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
 
         const tabs = document.querySelectorAll('.tab');
@@ -366,13 +417,12 @@
         const fileUpload = document.querySelector('.file-upload');
         const uploadContent = document.querySelector('.upload-content');
 
-        // ===== CHANGE HERE: New copy function with animation =====
         function copyToClipboard(button, text) {
-            if (button.classList.contains('copied')) return; // Prevent re-triggering animation
+            if (button.classList.contains('copied')) return;
 
             navigator.clipboard.writeText(text).then(() => {
                 const originalText = button.innerHTML;
-                button.innerHTML = '✓';
+                button.innerHTML = '✓ کپی شد';
                 button.classList.add('copied');
                 button.disabled = true;
 
@@ -380,7 +430,7 @@
                     button.innerHTML = originalText;
                     button.classList.remove('copied');
                     button.disabled = false;
-                }, 2000); // 2 seconds
+                }, 2000);
             }).catch(err => {
                 console.error('Failed to copy text: ', err);
                 alert('کپی کردن با خطا مواجه شد.');
@@ -411,11 +461,8 @@
                     }
                     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;
+                    alert('لطفا یک فایل تصویری انتخاب کنید.');
+                    fileInput.value = ''; // Reset input
                 }
             } else {
                 if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove();
@@ -428,7 +475,7 @@
 
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
 
-        const listenForData = (sessionHash, onResult, onError) => {
+        const listenForData = (sessionHash, onResult, onError, onFinally) => {
             const eventSource = new EventSource(`${SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
             eventSource.onmessage = (event) => {
                 const data = JSON.parse(event.data);
@@ -436,14 +483,17 @@
                     eventSource.close();
                     if (data.output.error) onError(data.output.error);
                     else onResult(data.output.data);
+                    onFinally();
                 } else if (data.msg === "process_failed") {
                     eventSource.close();
                     onError("پردازش با خطا مواجه شد.");
+                    onFinally();
                 }
             };
             eventSource.onerror = (err) => {
                 eventSource.close();
                 onError("خطا در ارتباط با سرور.");
+                onFinally();
             };
         };
 
@@ -463,12 +513,12 @@
                 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>'; }
+                    (error) => { alert(`خطا: ${error}`); qrDisplay.innerHTML = '<span class="result-empty">خطا</span>'; },
+                    () => { generateLoader.style.display = 'none'; generateBtn.disabled = false; }
                 );
             } catch (error) {
                 alert(`خطا: ${error.message}`);
                 qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت</span>';
-            } finally {
                 generateLoader.style.display = 'none';
                 generateBtn.disabled = false;
             }
@@ -501,7 +551,6 @@
                 listenForData(sessionHash, 
                     (result) => {
                         const textToCopy = result[0];
-                        // ===== CHANGE HERE: onclick now passes `this` to the function =====
                         const escapedText = textToCopy.replace(/'/g, "\\'").replace(/"/g, '&quot;');
                         decodedText.innerHTML = `
                             <div class="result-text-wrapper">
@@ -509,12 +558,12 @@
                                 <button class="copy-btn" onclick="copyToClipboard(this, '${escapedText}')">کپی</button>
                             </div>`;
                     },
-                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }
+                    (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; },
+                    () => { readLoader.style.display = 'none'; readBtn.disabled = false; }
                 );
             } catch (error) {
                 alert(`خطا: ${error.message}`);
                 decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
-            } finally {
                 readLoader.style.display = 'none';
                 readBtn.disabled = false;
             }
@@ -524,16 +573,10 @@
             fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
         });
         ['dragenter', 'dragover'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, () => {
-                fileUpload.style.background = 'white';
-                fileUpload.style.transform = 'translateY(-2px)';
-            });
+            fileUpload.addEventListener(eventName, () => fileUpload.classList.add('drag-over'));
         });
         ['dragleave', 'drop'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, () => {
-                fileUpload.style.background = 'rgba(255,255,255,0.9)';
-                fileUpload.style.transform = 'translateY(0)';
-            });
+            fileUpload.addEventListener(eventName, () => fileUpload.classList.remove('drag-over'));
         });
         fileUpload.addEventListener('drop', e => {
             if (e.dataTransfer.files.length > 0) {