Update index.html

index.html

@@ -1,172 +1,594 @@
-    body {
-        font-family: 'Vazirmatn', sans-serif;
-        background: linear-gradient(135deg, var(--background-end), var(--background-start));
-        color: var(--text-color);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        padding: 20px;
-        gap: 40px;
-        flex-wrap: wrap;
-    }
-
-    .main-title {
-        width: 100%;
-        text-align: center;
-        font-size: 2.5rem;
-        font-weight: 300;
-        margin-bottom: 20px;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-    }
-    .main-title span {
-        font-weight: 700;
-        color: #fff;
-    }
-
-    .container {
-        background: var(--container-bg);
-        padding: 30px;
-        border-radius: 15px;
-        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-        border: 1px solid var(--border-color);
-        width: 100%;
-        max-width: 450px;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-    }
-    .container:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
-    }
-
-    h2 {
-        text-align: center;
-        color: #fff;
-        margin-top: 0;
-        font-weight: 500;
-        border-bottom: 1px solid var(--secondary-color);
-        padding-bottom: 15px;
-    }
-
-    label {
-        font-size: 0.9rem;
-        margin-bottom: -10px;
-        color: #bdc3c7;
-    }
-
-    textarea, .file-label {
-        width: 100%;
-        padding: 12px;
-        border-radius: 8px;
-        border: 1px solid var(--border-color);
-        box-sizing: border-box;
-        font-size: 1rem;
-        background: var(--input-bg);
-        color: var(--text-color);
-        transition: border-color 0.3s, box-shadow 0.3s;
-    }
-    textarea::placeholder {
-        color: #95a5a6;
-    }
-    textarea:focus, .file-label:hover {
-        outline: none;
-        border-color: var(--secondary-color);
-        box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
-    }
-
-    /* Custom file input */
-    .file-wrapper {
-        position: relative;
-        cursor: pointer;
-    }
-    input[type="file"] {
-        display: none;
-    }
-    .file-label {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-    }
-    #file-name {
-        margin-top: 10px;
-        font-size: 0.85rem;
-        color: #bdc3c7;
-        text-align: center;
-        height: 1.2em;
-    }
-    
-    button {
-        padding: 14px 20px;
-        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-        color: white;
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 1.1rem;
-        font-weight: 600;
-        transition: all 0.3s ease;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-    }
-    button:hover:not(:disabled) {
-        transform: translateY(-3px);
-        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
-    }
-    button:disabled {
-        background: #555;
-        cursor: not-allowed;
-        opacity: 0.7;
-    }
-
-    .result-box {
-        margin-top: 15px;
-        padding: 20px;
-        background: var(--input-bg);
-        border: 1px solid var(--border-color);
-        border-radius: 8px;
-        min-height: 100px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        word-wrap: break-word;
-        color: #ecf0f1;
-        font-size: 1rem;
-    }
-    
-    #qr-code-display img {
-        max-width: 100%;
-        height: auto;
-        border-radius: 8px;
-        border: 2px solid white;
-        animation: fadeIn 0.5s ease-in-out;
-    }
-
-    .loader {
-        border: 4px solid #555;
-        border-top: 4px solid var(--secondary-color);
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        animation: spin 1s linear infinite;
-        display: none;
-    }
-
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-    @keyframes fadeIn {
-        from { opacity: 0; transform: scale(0.9); }
-        to { opacity: 1; transform: scale(1); }
-    }
-</style>
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QR کد | ساخت و خواندن</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #fff;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 400px;
+            margin: 0 auto;
+            padding: 15px;
+            min-height: 100vh;
+            display: flex;
+            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: flex;
+            flex-direction: column;
+        }
+
+        /* محتوای تب‌ها */
+        .tab-content {
+            display: none;
+            flex: 1;
+            display: flex;
+            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;
+        }
+
+        .file-upload:hover {
+            background: white;
+            transform: translateY(-2px);
+        }
+
+        .file-upload input {
+            position: absolute;
+            left: -9999px;
+        }
+
+        .upload-icon {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            color: #667eea;
+        }
+
+        .upload-text {
+            color: #333;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .file-info {
+            margin-top: 10px;
+            padding: 8px 12px;
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 8px;
+            font-size: 0.8rem;
+            color: #333;
+            display: none;
+        }
+
+        /* دکمه */
+        .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 {
+            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+            color: white;
+            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+        }
+
+        .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;
+        }
+
+        .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;
+            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;
+        }
+
+        /* ریسپانسیو برای موبایل‌های کوچک */
+        @media (max-width: 360px) {
+            .container {
+                padding: 10px;
+            }
+            
+            .card {
+                padding: 20px;
+            }
+            
+            .title {
+                font-size: 1.3rem;
+            }
+        }
+    </style>
+</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 class="tab" data-tab="read">
+                <span class="icon">👁</span>
+                خواندن
+            </div>
+        </div>
+
+        <!-- کارت اصلی -->
+        <div class="card">
+            <!-- تب ساخت -->
+            <div class="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>
+                    <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>
+            </div>
+
+            <!-- تب خواندن -->
+            <div class="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" accept="image/*">
+                        <div class="upload-icon">📷</div>
+                        <div class="upload-text">انتخاب تصویر</div>
+                        <div id="file-info" class="file-info"></div>
+                    </div>
+                </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>
+
+                <button id="read-btn" class="btn btn-read">
+                    <span class="icon">🔍</span>
+                    خواندن QR کد
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <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');
+        const readBtn = document.getElementById('read-btn');
+        const textInput = document.getElementById('text-input');
+        const fileInput = document.getElementById('file-input');
+        const qrDisplay = document.getElementById('qr-display');
+        const decodedText = document.getElementById('decoded-text');
+        const generateLoader = document.getElementById('generate-loader');
+        const readLoader = document.getElementById('read-loader');
+        const fileInfo = document.getElementById('file-info');
+
+        // تعویض تب‌ها
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                // حذف کلاس active از همه
+                tabs.forEach(t => t.classList.remove('active'));
+                tabContents.forEach(tc => tc.classList.remove('active'));
+                
+                // اضافه کردن کلاس active
+                tab.classList.add('active');
+                const targetTab = tab.getAttribute('data-tab');
+                document.getElementById(targetTab + '-content').classList.add('active');
+            });
+        });
+
+        // نمایش اطلاعات فایل
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length > 0) {
+                fileInfo.textContent = `📎 ${fileInput.files[0].name}`;
+                fileInfo.style.display = 'block';
+            } else {
+                fileInfo.style.display = 'none';
+            }
+        });
+
+        // توابع کمکی
+        const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
+
+        const listenForData = (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);
+                if (data.msg === "process_completed") {
+                    eventSource.close();
+                    if (data.output.error) {
+                        onError(data.output.error);
+                    } else {
+                        onResult(data.output.data);
+                    }
+                } else if (data.msg === "process_failed") {
+                    eventSource.close();
+                    onError("پردازش با خطا مواجه شد.");
+                }
+            };
+
+            eventSource.onerror = (err) => {
+                eventSource.close();
+                onError("خطا در ارتباط با سرور.");
+            };
+        };
+
+        // ساخت 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) => {
+                        if (result && result[0]) {
+                            qrDisplay.innerHTML = result[0];
+                        } else {
+                            qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت QR کد</span>';
+                        }
+                    },
+                    (error) => {
+                        alert(`خطا: ${error}`);
+                        qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت</span>';
+                    }
+                );
+            } catch (error) {
+                alert(`خطا: ${error.message}`);
+                qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت</span>';
+            } finally {
+                generateLoader.style.display = 'none';
+                generateBtn.disabled = false;
+            }
+        });
+
+        // خواندن QR کد
+        readBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) {
+                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}`);
+                decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>';
+            } finally {
+                readLoader.style.display = 'none';
+                readBtn.disabled = false;
+            }
+        });
+
+        // Drag & Drop برای فایل
+        const fileUpload = document.querySelector('.file-upload');
+        
+        ['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) => {
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                fileInput.files = files;
+                fileInput.dispatchEvent(new Event('change'));
+            }
+        });
+    </script>
+</body>
+</html>