Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

d5cd931

verified ·

1 Parent(s): fabd896

Update index.html

Browse files

Files changed (1) hide show

index.html +540 -706

index.html CHANGED Viewed

@@ -1,727 +1,561 @@
 <!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 Code Studio | استودیو کیوآر کد</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-            --dark-bg: #0f0f23;
-            --card-bg: rgba(255, 255, 255, 0.05);
-            --glass-bg: rgba(255, 255, 255, 0.1);
-            --text-primary: #ffffff;
-            --text-secondary: #b8c5d6;
-            --accent-color: #64ffda;
-            --border-color: rgba(255, 255, 255, 0.15);
-            --shadow-light: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            --shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.5);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Vazirmatn', sans-serif;
-            background: var(--dark-bg);
-            background-image:
-                radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
-        /* خطوط پس‌زمینه برای جلوه QR */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
-                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
-            background-size: 50px 50px;
-            pointer-events: none;
-            z-index: -1;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        /* هدر */
-        .header {
-            text-align: center;
-            margin-bottom: 3rem;
-            position: relative;
-        }
-        .main-title {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: 700;
-            background: var(--primary-gradient);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 0.5rem;
-            position: relative;
-        }
-        .subtitle {
-            font-size: 1.1rem;
-            color: var(--text-secondary);
-            font-weight: 300;
-        }
-        /* منطقه اصلی */
-        .main-content {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 2rem;
-            flex: 1;
-        }
-        @media (min-width: 768px) {
-            .main-content {
-                grid-template-columns: 1fr 1fr;
-                gap: 3rem;
-            }
-        }
-        /* کارت‌ها */
-        .card {
-            background: var(--card-bg);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border-color);
-            border-radius: 24px;
-            padding: 2rem;
-            position: relative;
-            overflow: hidden;
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            box-shadow: var(--shadow-light);
-        }
-        .card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: var(--primary-gradient);
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-        .card:hover {
-            transform: translateY(-8px);
-            box-shadow: var(--shadow-hover);
-        }
-        .card:hover::before {
-            transform: scaleX(1);
-        }
-        .card-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-        .card-icon {
-            width: 50px;
-            height: 50px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            color: white;
-            position: relative;
-            overflow: hidden;
-        }
-        .generate-card .card-icon {
-            background: var(--primary-gradient);
-        }
-        .read-card .card-icon {
-            background: var(--secondary-gradient);
-        }
-        .card-title {
-            font-size: 1.4rem;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-        /* فرم عناصر */
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        .form-label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            font-weight: 500;
-        }
-        .form-input {
-            width: 100%;
-            padding: 1rem;
-            border: 2px solid var(--border-color);
-            border-radius: 12px;
-            background: var(--glass-bg);
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-            resize: vertical;
-            min-height: 120px;
-        }
-        .form-input::placeholder {
-            color: var(--text-secondary);
-        }
-        .form-input:focus {
-            outline: none;
-            border-color: var(--accent-color);
-            box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
-            transform: translateY(-2px);
-        }
-        /* فایل آپلود */
-        .file-upload {
-            position: relative;
-            overflow: hidden;
-            border: 2px dashed var(--border-color);
-            border-radius: 12px;
-            padding: 2rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background: var(--glass-bg);
-        }
-        .file-upload:hover {
-            border-color: var(--accent-color);
-            background: rgba(100, 255, 218, 0.05);
-        }
-        .file-upload input {
-            position: absolute;
-            left: -9999px;
-        }
-        .file-upload-icon {
-            font-size: 2rem;
-            color: var(--accent-color);
-            margin-bottom: 1rem;
-        }
-        .file-upload-text {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        .file-name {
-            margin-top: 1rem;
-            padding: 0.5rem 1rem;
-            background: rgba(100, 255, 218, 0.1);
-            border-radius: 8px;
-            color: var(--accent-color);
-            font-size: 0.85rem;
-            display: none;
-        }
-        /* دکمه‌ها */
-        .btn {
-            width: 100%;
-            padding: 1rem 2rem;
-            border: none;
-            border-radius: 12px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            color: white;
-            text-transform: none;
-        }
-        .btn-primary {
-            background: var(--primary-gradient);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-        }
-        .btn-secondary {
-            background: var(--secondary-gradient);
-            box-shadow: 0 4px 15px rgba(245, 87, 108, 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::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-            transition: left 0.5s;
-        }
-        .btn:hover::before {
-            left: 100%;
-        }
-        /* نتایج */
-        .result-box {
-            margin-top: 1.5rem;
-            padding: 2rem;
-            background: var(--glass-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            min-height: 200px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            backdrop-filter: blur(10px);
-            position: relative;
-            overflow: hidden;
-        }
-        .result-empty {
-            color: var(--text-secondary);
-            font-style: italic;
-        }
-        #qr-code-display img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 12px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-            animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        .decoded-result {
-            background: rgba(100, 255, 218, 0.1);
-            border: 1px solid var(--accent-color);
-            border-radius: 12px;
-            padding: 1.5rem;
-            color: var(--text-primary);
-            word-break: break-all;
-            line-height: 1.6;
-        }
-        /* لودر */
-        .loader {
-            width: 50px;
-            height: 50px;
-            border: 3px solid var(--border-color);
-            border-top: 3px solid var(--accent-color);
-            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.5);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
-        }
-        @keyframes slideInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .card {
-            animation: slideInUp 0.6s ease-out forwards;
-        }
-        .generate-card {
-            animation-delay: 0.1s;
-        }
-        .read-card {
-            animation-delay: 0.2s;
-        }
-        /* ریسپانسیو */
-        @media (max-width: 767px) {
-            .container {
-                padding: 1rem;
-            }
-            .card {
-                padding: 1.5rem;
-            }
-            .main-content {
-                gap: 1.5rem;
-            }
-        }
-        /* اسکرول بار سفارشی */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--accent-color);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(100, 255, 218, 0.8);
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- هدر -->
-        <header class="header">
-            <h1 class="main-title">
-                <i class="fas fa-qrcode"></i>
-                QR Code Studio
-            </h1>
-            <p class="subtitle">ابزار کامل ساخت و خواندن کد QR</p>
-        </header>
-        <!-- محتوای اصلی -->
-        <div class="main-content">
-            <!-- بخش ساخت QR -->
-            <div class="card generate-card">
-                <div class="card-header">
-                    <div class="card-icon">
-                        <i class="fas fa-plus-circle"></i>
-                    </div>
-                    <h2 class="card-title">ساخت QR Code</h2>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="text-input">
-                        <i class="fas fa-edit"></i>
-                        متن یا لینک خود را وارد کنید
-                    </label>
-                    <textarea
-                        id="text-input"
-                        class="form-input"
-                        placeholder="مثال: https://google.com یا هر متن دلخواه">سلام دنیا</textarea>
-                </div>
-                <button id="generate-btn" class="btn btn-primary">
-                    <i class="fas fa-magic"></i>
-                    <span>ساخت QR Code</span>
-                </button>
-                <div class="result-box">
-                    <div id="generate-loader" class="loader" style="display: none;"></div>
-                    <div id="qr-code-display">
-                        <span class="result-empty">QR Code شما اینجا نمایش داده می‌شود</span>
-                    </div>
-                </div>
-            </div>
-            <!-- بخش خواندن QR -->
-            <div class="card read-card">
-                <div class="card-header">
-                    <div class="card-icon">
-                        <i class="fas fa-search"></i>
-                    </div>
-                    <h2 class="card-title">خواندن QR Code</h2>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">
-                        <i class="fas fa-image"></i>
-                        تصویر QR Code را انتخاب کنید
-                    </label>
-                    <div class="file-upload" onclick="document.getElementById('file-input').click()">
-                        <input type="file" id="file-input" accept="image/*">
-                        <div class="file-upload-icon">
-                            <i class="fas fa-cloud-upload-alt"></i>
-                        </div>
-                        <div class="file-upload-text">
-                            کلیک کنید یا فایل را اینجا بکشید
-                        </div>
-                        <div id="file-name" class="file-name"></div>
-                    </div>
-                </div>
-                <button id="read-btn" class="btn btn-secondary">
-                    <i class="fas fa-eye"></i>
-                    <span>خواندن QR Code</span>
-                </button>
-                <div class="result-box">
-                    <div id="read-loader" class="loader" style="display: none;"></div>
-                    <div id="decoded-text" class="result-empty">نتیجه خواندن اینجا نمایش داده می‌شود</div>
-                </div>
-            </div>
         </div>
-    </div>
-    <script>
-        const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
-        // دریافت عناصر DOM
-        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 qrCodeDisplay = document.getElementById('qr-code-display');
-        const decodedText = document.getElementById('decoded-text');
-        const generateLoader = document.getElementById('generate-loader');
-        const readLoader = document.getElementById('read-loader');
-        const fileNameDisplay = document.getElementById('file-name');
-        // نمایش نام فایل انتخاب شده
-        fileInput.addEventListener('change', () => {
-            if (fileInput.files.length > 0) {
-                fileNameDisplay.textContent = `فایل انتخاب شده: ${fileInput.files[0].name}`;
-                fileNameDisplay.style.display = 'block';
             } else {
-                fileNameDisplay.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_starts") {
-                    console.log("پردازش شروع شد...");
-                } else if (data.msg === "process_failed") {
-                    eventSource.close();
-                    onError("پردازش با خطا مواجه شد.");
-                }
-            };
-            eventSource.onerror = (err) => {
-                console.error("EventSource failed:", err);
-                eventSource.close();
-                onError("خطا در ارتباط با سرور.");
-            };
-        };
-        // منطق ساخت QR Code
-        generateBtn.addEventListener('click', async () => {
-            const text = textInput.value.trim();
-            if (!text) {
-                alert("لطفاً متنی را وارد کنید.");
-                textInput.focus();
-                return;
-            }
-            generateLoader.style.display = 'block';
-            qrCodeDisplay.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(`خطا در ارسال درخواست: ${joinResponse.statusText}`);
-                listenForData(
-                    sessionHash,
-                    (result) => {
-                        if (result && result[0]) {
-                            qrCodeDisplay.innerHTML = result[0];
-                        } else {
-                            qrCodeDisplay.innerHTML = '<span class="result-empty">خطا: خروجی معتبر دریافت نشد.</span>';
-                        }
-                    },
-                    (error) => {
-                        alert(`خطا در پردازش: ${error}`);
-                        qrCodeDisplay.innerHTML = '<span class="result-empty">خطا در ساخت تصویر.</span>';
-                    }
-                );
-            } catch (error) {
-                alert(`یک خطا رخ داد: ${error.message}`);
-                qrCodeDisplay.innerHTML = '<span class="result-empty">خطا در ساخت QR Code</span>';
-            } finally {
-                generateLoader.style.display = 'none';
-                generateBtn.disabled = false;
             }
         });
-        // منطق خواندن QR Code
-        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(`خطا در آپلود فایل: ${uploadResponse.statusText}`);
-                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(`خطا در ارسال به صف: ${joinResponse.statusText}`);
-                listenForData(
-                    sessionHash,
-                    (result) => {
-                        decodedText.innerHTML = `<div class="decoded-result"><strong>متن خوانده شده:</strong><br>${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, preventDefaults, false);
-        });
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        ['dragenter', 'dragover'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, highlight, false);
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            fileUpload.addEventListener(eventName, unhighlight, false);
         });
-        function highlight(e) {
-            fileUpload.style.borderColor = 'var(--accent-color)';
-            fileUpload.style.background = 'rgba(100, 255, 218, 0.1)';
-        }
-        function unhighlight(e) {
-            fileUpload.style.borderColor = 'var(--border-color)';
-            fileUpload.style.background = 'var(--glass-bg)';
-        }
-        fileUpload.addEventListener('drop', handleDrop, false);
-        function handleDrop(e) {
-            const dt = e.dataTransfer;
-            const files = dt.files;
-            if (files.length > 0) {
-                fileInput.files = files;
-                fileInput.dispatchEvent(new Event('change'));
-            }
-        }
-    </script>
 </body>
 </html>

 <!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 Code — طراحی جدید</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
+  <style>
+    :root{
+      --bg-1:#0f1226;
+      --bg-2:#1a1f3f;
+      --bg-3:#0b0f23;
+      --text:#eaf1ff;
+      --muted:#b2bdd6;
+      --accent-1:#8e44ad;
+      --accent-2:#3498db;
+      --accent-3:#00e676;
+      --card-bg:rgba(255,255,255,.06);
+      --card-bg-strong:rgba(255,255,255,.08);
+      --border:rgba(255,255,255,.14);
+      --divider:rgba(255,255,255,.08);
+      --shadow:0 18px 45px rgba(0,0,0,.35);
+      --radius:16px;
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      font-family:'Vazirmatn',system-ui,Segoe UI,Roboto,Arial,sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(1000px 600px at -10% 10%, rgba(124,77,255,.18), transparent 50%),
+        radial-gradient(800px 500px at 110% 110%, rgba(0,230,118,.12), transparent 50%),
+        linear-gradient(135deg, var(--bg-2), var(--bg-1) 40%, var(--bg-3));
+      overflow:hidden; /* اسکرول داخل هر پنل انجام می‌شود */
+    }
+    /* هدر مینیمال */
+    .topbar{
+      height:64px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      gap:12px;
+      padding:0 16px;
+      position:relative;
+      z-index:2;
+    }
+    .topbar .logo{
+      inline-size:28px;
+      block-size:28px;
+      display:inline-flex;
+      align-items:center;
+      justify-content:center;
+      color:#fff;
+      background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
+      border-radius:8px;
+      box-shadow:0 6px 18px rgba(52,152,219,.35), 0 4px 14px rgba(142,68,173,.25);
+    }
+    .topbar h1{
+      margin:0;
+      font-size:1.25rem;
+      font-weight:700;
+      letter-spacing:.2px;
+      color:#fff;
+    }
+    .topbar span{
+      font-weight:300;
+      color:var(--muted);
+      margin-inline-start:8px;
+      font-size:.95rem;
+    }
+    /* صفحه دو ستونه همیشه (حتی موبایل) */
+    .split{
+      display:grid;
+      grid-template-columns: 1fr 1fr; /* همیشه کنار هم */
+      height:calc(100dvh - 64px);
+      width:100%;
+      position:relative;
+      z-index:1;
+    }
+    .split::after{ /* خط جداکننده وسط */
+      content:"";
+      position:absolute;
+      inset-block:0;
+      inset-inline-start:50%;
+      width:1px;
+      background:linear-gradient(to bottom, transparent, var(--divider), transparent);
+      z-index:0;
+    }
+    /* پنل‌ها */
+    .panel{
+      position:relative;
+      padding:20px 16px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      overflow:auto;
+      isolation:isolate;
+    }
+    .panel::before{ /* الگوی نقطه‌ای QR */
+      content:"";
+      position:absolute; inset:0;
+      background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px);
+      background-size:20px 20px;
+      opacity:.45;
+      mask-image:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.9) 35%, rgba(0,0,0,.5));
+      pointer-events:none;
+      z-index:-1;
+    }
+    .panel.generate{
+      background:linear-gradient(180deg, transparent, rgba(142,68,173,.12));
+    }
+    .panel.read{
+      background:linear-gradient(180deg, transparent, rgba(52,152,219,.12));
+    }
+    /* کارت ابزار داخل هر پنل */
+    .tool-card{
+      width:min(540px, 92%);
+      background:var(--card-bg);
+      border:1px solid var(--border);
+      border-radius:var(--radius);
+      padding:18px;
+      box-shadow:var(--shadow);
+      backdrop-filter:blur(10px);
+      -webkit-backdrop-filter:blur(10px);
+      display:flex; flex-direction:column; gap:14px;
+      position:relative;
+    }
+    .tool-card .title{
+      display:flex; align-items:center; gap:10px;
+      border-bottom:1px solid var(--divider);
+      padding-bottom:10px; margin-bottom:6px;
+    }
+    .title .badge{
+      display:inline-flex; align-items:center; justify-content:center;
+      width:32px; height:32px; border-radius:10px; color:#fff;
+      box-shadow:0 8px 24px rgba(0,0,0,.25);
+    }
+    .generate .title .badge{ background:linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
+    .read .title .badge{ background:linear-gradient(135deg, var(--accent-2), var(--accent-3)); }
+    .title h2{
+      margin:0; font-size:1.05rem; font-weight:700; color:#fff;
+    }
+    .subtitle{
+      font-size:.9rem; color:var(--muted); margin-top:-4px;
+    }
+    label{
+      font-size:.88rem; color:#cdd6f7; opacity:.9;
+    }
+    textarea, .input-like{
+      width:100%;
+      padding:12px 12px;
+      border-radius:12px;
+      border:1px solid var(--border);
+      background:var(--card-bg-strong);
+      color:var(--text);
+      font-size:1rem;
+      outline:none;
+      transition:.25s ease;
+    }
+    textarea::placeholder{ color:#93a0bf; }
+    textarea:focus, .input-like:focus-within{
+      border-color:color-mix(in oklab, var(--accent-2) 55%, white);
+      box-shadow:0 0 0 6px rgba(52,152,219,.08), 0 6px 24px rgba(52,152,219,.18);
+    }
+    .actions{
+      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
+    }
+    button{
+      padding:12px 16px;
+      background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
+      color:#fff;
+      border:none; border-radius:12px;
+      font-weight:700; cursor:pointer;
+      display:inline-flex; align-items:center; gap:10px;
+      transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
+      box-shadow:0 8px 22px rgba(142,68,173,.25), 0 8px 22px rgba(52,152,219,.22);
+    }
+    .read button{ background:linear-gradient(135deg, var(--accent-2), var(--accent-3)); }
+    button:hover:not(:disabled){ transform:translateY(-2px); filter:saturate(1.1); }
+    button:disabled{ opacity:.6; cursor:not-allowed; filter:saturate(.8); }
+    /* نتیجه‌ها */
+    .result-box{
+      margin-top:6px;
+      padding:16px;
+      background:rgba(255,255,255,.05);
+      border:1px solid var(--border);
+      border-radius:14px;
+      min-height:120px;
+      display:flex; align-items:center; justify-content:center;
+      text-align:center; word-wrap:break-word;
+      position:relative; overflow:hidden;
+    }
+    /* نمایش QR */
+    #qr-code-display img{
+      max-width:100%;
+      height:auto;
+      border-radius:10px;
+      border:2px solid rgba(255,255,255,.9);
+      box-shadow:0 14px 32px rgba(0,0,0,.35);
+      animation:fadeIn .45s ease-in-out both;
+    }
+    @keyframes fadeIn{
+      from{opacity:0; transform:scale(.96)}
+      to{opacity:1; transform:scale(1)}
+    }
+    /* اسپینر */
+    .loader{
+      border:3px solid rgba(255,255,255,.26);
+      border-top:3px solid var(--accent-2);
+      border-right:3px solid var(--accent-1);
+      border-radius:50%;
+      width:28px; height:28px;
+      animation:spin 1s linear infinite;
+      display:none;
+    }
+    @keyframes spin{ to{ transform:rotate(360deg) } }
+    /* Drop Zone برای خواندن QR */
+    .drop-zone{
+      width:100%;
+      background:var(--card-bg-strong);
+      border:1.5px dashed color-mix(in oklab, var(--accent-2) 65%, #fff 10%);
+      border-radius:12px;
+      padding:14px;
+      display:flex; align-items:center; justify-content:center; gap:10px;
+      color:#d7e0ff;
+      cursor:pointer;
+      transition: border-color .2s ease, box-shadow .25s ease, background .25s ease;
+    }
+    .drop-zone:hover{
+      border-color:color-mix(in oklab, var(--accent-3) 65%, white 10%);
+      box-shadow:0 0 0 6px rgba(0,230,118,.08), inset 0 0 30px rgba(0,230,118,.06);
+      background:rgba(0,0,0,.18);
+    }
+    .drop-zone.dragging{
+      border-color:var(--accent-3);
+      box-shadow:0 0 0 6px rgba(0,230,118,.1), inset 0 0 45px rgba(0,230,118,.08);
+      background:rgba(0,0,0,.22);
+    }
+    .file-name{
+      margin:0; font-size:.86rem; color:#bdc8ea; opacity:.9;
+    }
+    input[type="file"]{ display:none; }
+    /* متن خروجی */
+    #decoded-text{
+      margin:0; white-space:pre-wrap; line-height:1.6;
+    }
+    /* گوشه‌های اسکنر تزئینی */
+    .corners{
+      pointer-events:none;
+      position:absolute; inset:8px;
+      display:grid; grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+    }
+    .corner{
+      width:26px; height:26px; border:2px solid rgba(255,255,255,.85);
+      border-radius:6px;
+    }
+    .corner.tl{ justify-self:start; align-self:start; border-right:none; border-bottom:none; }
+    .corner.tr{ justify-self:end; align-self:start; border-left:none; border-bottom:none; }
+    .corner.bl{ justify-self:start; align-self:end; border-right:none; border-top:none; }
+    .corner.br{ justify-self:end; align-self:end; border-left:none; border-top:none; }
+    /* اسکرول‌بار لطیف داخل پنل‌ها */
+    .panel::-webkit-scrollbar{ width:10px; height:10px; }
+    .panel::-webkit-scrollbar-thumb{
+      background:linear-gradient(180deg, rgba(142,68,173,.45), rgba(52,152,219,.45));
+      border-radius:10px;
+    }
+    .panel::-webkit-scrollbar-track{ background:transparent; }
+    /* ریزبهینه‌سازی اندازه فونت در خیلی عرض کم */
+    @media (max-width: 380px){
+      .title h2{ font-size:1rem }
+      textarea{ font-size:.95rem }
+      button{ font-size:.95rem }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <div class="logo" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3h8v8H3zM5 5v4h4V5H5zM13 3h8v8h-8zM15 5v4h4V5h-4zM3 13h8v8H3zM5 15v4h4v-4H5zM13 13h3v3h-3zM17 13h4v4h-4zM13 17h3v4h-3zM17 21v-3h4v3z"/></svg>
+    </div>
+    <h1>ابزار مدرن QR Code <span>— ساخت و خواندن کنار هم</span></h1>
+  </header>
+  <main class="split">
+    <!-- پنل ساخت QR -->
+    <section class="panel generate">
+      <div class="tool-card">
+        <div class="title">
+          <div class="badge" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M3 3h8v8H3zM5 5v4h4V5H5zM13 3h8v8h-8zM15 5v4h4V5h-4zM3 13h8v8H3zM5 15v4h4v-4H5z"/></svg>
+          </div>
+          <div>
+            <h2>ساخت QR Code از متن</h2>
+            <div class="subtitle">متن یا لینک خود را بنویسید و یک QR براق تحویل بگیرید ✨</div>
+          </div>
+        </div>
+        <label for="text-input">متن خود را وارد کنید:</label>
+        <textarea id="text-input" rows="4" placeholder="مثلا: https://example.com">سلام دنیا</textarea>
+        <div class="actions">
+          <button id="generate-btn" title="ساخت QR Code">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2v0z"/><path d="M12 8l4 4-4 4"/><path d="M8 12h7"/></svg>
+            <span>ساخت QR Code</span>
+          </button>
+        </div>
+        <div class="result-box">
+          <div id="generate-loader" class="loader"></div>
+          <div id="qr-code-display"></div>
+          <div class="corners" aria-hidden="true">
+            <div class="corner tl"></div>
+            <div class="corner tr"></div>
+            <div class="corner bl"></div>
+            <div class="corner br"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- پنل خواندن QR -->
+    <section class="panel read">
+      <div class="tool-card">
+        <div class="title">
+          <div class="badge" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+          </div>
+          <div>
+            <h2>خواندن متن از QR Code</h2>
+            <div class="subtitle">تصویر QR را بکشید و رها کنید یا فایل را انتخاب کنید</div>
+          </div>
+        </div>
+        <label for="file-input">فایل تصویر QR Code را انتخاب کنید:</label>
+        <div id="drop-zone" class="drop-zone">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          <span>کلیک کنید یا فایل را اینجا رها کنید</span>
+          <input type="file" id="file-input" accept="image/*" />
+        </div>
+        <p id="file-name" class="file-name"></p>
+        <div class="actions">
+          <button id="read-btn" title="خواندن QR Code">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            <span>خواندن QR Code</span>
+          </button>
         </div>
+        <div class="result-box">
+          <div id="read-loader" class="loader"></div>
+          <p id="decoded-text">نتیجه در اینجا نمایش داده می‌شود.</p>
+          <div class="corners" aria-hidden="true">
+            <div class="corner tl"></div>
+            <div class="corner tr"></div>
+            <div class="corner bl"></div>
+            <div class="corner br"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
+    // عناصر DOM
+    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 qrCodeDisplay = document.getElementById('qr-code-display');
+    const decodedText = document.getElementById('decoded-text');
+    const generateLoader = document.getElementById('generate-loader');
+    const readLoader = document.getElementById('read-loader');
+    const fileNameDisplay = document.getElementById('file-name');
+    const dropZone = document.getElementById('drop-zone');
+    // نمایش نام فایل هنگام انتخاب
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files.length > 0) {
+        fileNameDisplay.textContent = `فایل انتخاب شده: ${fileInput.files[0].name}`;
+      } else {
+        fileNameDisplay.textContent = '';
+      }
+    });
+    // Drop Zone رفتار
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropZone.classList.add('dragging');
+    });
+    dropZone.addEventListener('dragleave', () => {
+      dropZone.classList.remove('dragging');
+    });
+    dropZone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropZone.classList.remove('dragging');
+      const file = e.dataTransfer.files?.[0];
+      if (file) {
+        const dt = new DataTransfer();
+        dt.items.add(file);
+        fileInput.files = dt.files;
+        fileNameDisplay.textContent = `فایل انتخاب شده: ${file.name}`;
+      }
+    });
+    // توابع کمکی
+    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) => {
+        try {
+          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("پردازش با خطا مواجه شد.");
+          }
+        } catch (e) {
+          // در برخی پیام‌های keep-alive داده خالی است
+        }
+      };
+      eventSource.onerror = (err) => {
+        console.error("EventSource failed:", err);
+        eventSource.close();
+        onError("خطا در ارتباط با سرور.");
+      };
+    };
+    // ساخت QR
+    generateBtn.addEventListener('click', async () => {
+      const text = textInput.value.trim();
+      if (!text) return alert("لطفاً متنی را وارد کنید.");
+      generateLoader.style.display = 'inline-block';
+      qrCodeDisplay.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(`خطا در ارسال درخواست: ${joinResponse.statusText}`);
+        listenForData(
+          sessionHash,
+          (result) => {
+            if (result && result[0]) {
+              qrCodeDisplay.innerHTML = result[0];
+            } else {
+              qrCodeDisplay.innerText = "خطا: خروجی معتبر دریافت نشد.";
             }
+          },
+          (error) => {
+            alert(`خطا در پردازش: ${error}`);
+            qrCodeDisplay.innerText = "خطا در ساخت تصویر.";
+          }
+        );
+      } catch (error) {
+        alert(`یک خطا رخ داد: ${error.message}`);
+      } finally {
+        generateLoader.style.display = 'none';
+        generateBtn.disabled = false;
+      }
+    });
+    // خواندن QR
+    readBtn.addEventListener('click', async () => {
+      const file = fileInput.files[0];
+      if (!file) return alert("لطفاً یک فایل تصویر انتخاب کنید.");
+      readLoader.style.display = 'inline-block';
+      decodedText.innerText = '';
+      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(`خطا در آپلود فایل: ${uploadResponse.statusText}`);
+        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(`خطا در ارسال به صف: ${joinResponse.statusText}`);
+        listenForData(
+          sessionHash,
+          (result) => {
+            decodedText.innerText = `متن خوانده شده:\n${result?.[0] ?? ''}`;
+          },
+          (error) => {
+            alert(`خطا در پردازش: ${error}`);
+            decodedText.innerText = "خطا در خواندن کد.";
+          }
+        );
+      } catch (error) {
+        alert(`یک خطا رخ داد: ${error.message}`);
+        decodedText.innerText = "نتیجه در اینجا نمایش داده می‌شود.";
+      } finally {
+        readLoader.style.display = 'none';
+        readBtn.disabled = false;
+      }
+    });
+  </script>
 </body>
 </html>