Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

942c2eb

verified ·

1 Parent(s): 7ad82f5

Update index.html

Browse files

Files changed (1) hide show

index.html +544 -680

index.html CHANGED Viewed

@@ -1,705 +1,569 @@
 <!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 {
-            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            --background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
-            --card-bg: rgba(255, 255, 255, 0.1);
-            --text-primary: #ffffff;
-            --text-secondary: #e8eaed;
-            --border-color: rgba(255, 255, 255, 0.15);
-            --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-            --glow: 0 0 30px rgba(102, 126, 234, 0.5);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Vazirmatn', sans-serif;
-            background: var(--background);
-            color: var(--text-primary);
-            min-height: 100vh;
-            padding: 20px;
-            overflow-x: hidden;
-        }
-        /* Background Animations */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="qr" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="12" y="0" width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="0" y="12" width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="12" y="12" width="8" height="8" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23qr)"/></svg>');
-            z-index: -1;
-            animation: backgroundMove 20s ease-in-out infinite;
-        }
-        @keyframes backgroundMove {
-            0%, 100% { transform: translate(0, 0) rotate(0deg); }
-            25% { transform: translate(-10px, -10px) rotate(1deg); }
-            50% { transform: translate(10px, -5px) rotate(-1deg); }
-            75% { transform: translate(-5px, 10px) rotate(0.5deg); }
-        }
-        .main-header {
-            text-align: center;
-            margin-bottom: 40px;
-            animation: slideDown 1s ease-out;
-        }
-        .main-title {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: 300;
-            margin-bottom: 10px;
-            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
-            position: relative;
-        }
-        .main-title::after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 80px;
-            height: 4px;
-            background: var(--primary-gradient);
-            border-radius: 2px;
-            box-shadow: var(--glow);
-        }
-        .main-title .highlight {
-            background: var(--primary-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        .subtitle {
-            font-size: 1.1rem;
-            color: var(--text-secondary);
-            opacity: 0.8;
-        }
-        .app-container {
-            display: flex;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-        .card {
-            flex: 1;
-            min-width: 320px;
-            max-width: 500px;
-            background: var(--card-bg);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: var(--shadow);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            position: relative;
-            overflow: hidden;
-            animation: slideUp 1s ease-out;
-        }
-        .card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: var(--primary-gradient);
-            transform: scaleX(0);
-            transition: transform 0.4s ease;
-        }
-        .card:hover {
-            transform: translateY(-10px) scale(1.02);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
-        }
-        .card:hover::before {
-            transform: scaleX(1);
-        }
-        .card-header {
-            text-align: center;
-            margin-bottom: 25px;
-            position: relative;
-        }
-        .card-icon {
-            width: 60px;
-            height: 60px;
-            margin: 0 auto 15px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            color: white;
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-            animation: pulse 2s infinite;
-        }
-        .generate-card .card-icon {
-            background: var(--primary-gradient);
-        }
-        .read-card .card-icon {
-            background: var(--secondary-gradient);
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-        }
-        .card-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-        .card-subtitle {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-        .form-group {
-            margin-bottom: 20px;
-        }
-        .form-label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-        .form-input {
-            width: 100%;
-            padding: 15px;
-            border: 2px solid transparent;
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.08);
-            color: var(--text-primary);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-        }
-        .form-input:focus {
-            outline: none;
-            border-color: #667eea;
-            background: rgba(255, 255, 255, 0.12);
-            box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
-        }
-        .form-input::placeholder {
-            color: rgba(255, 255, 255, 0.5);
-        }
-        .file-input-wrapper {
-            position: relative;
-            cursor: pointer;
-        }
-        .file-input {
-            display: none;
-        }
-        .file-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            padding: 15px;
-            border: 2px dashed rgba(255, 255, 255, 0.3);
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.05);
-            transition: all 0.3s ease;
-            cursor: pointer;
-        }
-        .file-label:hover {
-            border-color: #f5576c;
-            background: rgba(245, 87, 108, 0.1);
-            transform: scale(1.02);
-        }
-        .file-name {
-            margin-top: 10px;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            text-align: center;
-            min-height: 20px;
-        }
-        .btn {
-            width: 100%;
-            padding: 15px;
-            border: none;
-            border-radius: 12px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            color: white;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-        }
-        .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%;
-        }
-        .btn-generate {
-            background: var(--primary-gradient);
-            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
-        }
-        .btn-read {
-            background: var(--secondary-gradient);
-            box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
-        }
-        .btn:hover:not(:disabled) {
-            transform: translateY(-3px);
-            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
-        }
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-        .result-container {
-            margin-top: 20px;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            min-height: 120px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-        .loader {
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(255, 255, 255, 0.1);
-            border-top: 4px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            display: none;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .qr-result img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-            animation: zoomIn 0.5s ease-out;
-        }
-        @keyframes zoomIn {
-            from {
-                opacity: 0;
-                transform: scale(0.8);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1);
-            }
-        }
-        .text-result {
-            word-wrap: break-word;
-            line-height: 1.6;
-            font-size: 1rem;
-        }
-        /* انیمیشن‌های ورود */
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-50px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        @keyframes slideUp {
-            from {
-                opacity: 0;
-                transform: translateY(50px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .app-container {
-                flex-direction: column;
-                gap: 20px;
-            }
-            .card {
-                min-width: 100%;
-                padding: 25px;
-            }
-            body {
-                padding: 15px;
-            }
-        }
-        @media (max-width: 480px) {
-            .main-title {
-                font-size: 2rem;
-            }
-            .card {
-                padding: 20px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <header class="main-header">
-        <h1 class="main-title">ابزار مدرن <span class="highlight">QR Code</span></h1>
-        <p class="subtitle">ساخت و خواندن کدهای QR به سادگی</p>
     </header>
-    <div class="app-container">
-        <!-- کارت ساخت QR Code -->
-        <div class="card generate-card">
-            <div class="card-header">
-                <div class="card-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="3" width="7" height="7"/>
-                        <rect x="14" y="3" width="7" height="7"/>
-                        <rect x="14" y="14" width="7" height="7"/>
-                        <rect x="3" y="14" width="7" height="7"/>
-                    </svg>
-                </div>
-                <h2 class="card-title">ساخت QR Code</h2>
-                <p class="card-subtitle">متن خود را به کد QR تبدیل کنید</p>
-            </div>
-            <div class="form-group">
-                <label class="form-label" for="text-input">متن یا لینک خود را وارد کنید:</label>
-                <textarea id="text-input" class="form-input" rows="4" placeholder="مثال: https://google.com یا سلام دنیا">سلام دنیا</textarea>
-            </div>
-            <button id="generate-btn" class="btn btn-generate">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <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 class="result-container">
-                <div id="generate-loader" class="loader"></div>
-                <div id="qr-code-display" class="qr-result"></div>
-            </div>
-        </div>
-        <!-- کارت خواندن QR Code -->
-        <div class="card read-card">
-            <div class="card-header">
-                <div class="card-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <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>
-                <h2 class="card-title">خواندن QR Code</h2>
-                <p class="card-subtitle">تصویر QR Code را آپلود کرده و متن آن را بخوانید</p>
-            </div>
-            <div class="form-group">
-                <label class="form-label" for="file-input">تصویر QR Code را انتخاب کنید:</label>
-                <div class="file-input-wrapper">
-                    <input type="file" id="file-input" class="file-input" accept="image/*">
-                    <label for="file-input" class="file-label">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <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>
-                    </label>
-                </div>
-                <p id="file-name" class="file-name"></p>
-            </div>
-            <button id="read-btn" class="btn btn-read">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="11" cy="11" r="8"/>
-                    <path d="m21 21-4.35-4.35"/>
-                </svg>
-                <span>خواندن QR Code</span>
-            </button>
-            <div class="result-container">
-                <div id="read-loader" class="loader"></div>
-                <p id="decoded-text" class="text-result">نتیجه در اینجا نمایش داده می‌شود</p>
-            </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.color = '#4ade80';
-            } else {
-                fileNameDisplay.textContent = '';
-            }
-        });
-        // --- توابع کمکی ---
-        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) {
-                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 = '<p style="color: #ef4444;">خطا: خروجی معتبر دریافت نشد</p>';
-                        }
-                    },
-                    (error) => {
-                        qrCodeDisplay.innerHTML = `<p style="color: #ef4444;">خطا در ساخت: ${error}</p>`;
-                    }
-                );
-            } catch (error) {
-                qrCodeDisplay.innerHTML = `<p style="color: #ef4444;">خطا: ${error.message}</p>`;
-            } finally {
-                generateLoader.style.display = 'none';
-                generateBtn.disabled = false;
-            }
         });
-        // --- منطق خواندن QR Code ---
-        readBtn.addEventListener('click', async () => {
-            const file = fileInput.files[0];
-            if (!file) {
-                fileInput.click();
-                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 = `<strong style="color: #4ade80;">متن خوانده شده:</strong><br><br>${result[0]}`;
-                    },
-                    (error) => {
-                        decodedText.innerHTML = `<p style="color: #ef4444;">خطا در خواندن: ${error}</p>`;
-                    }
-                );
-            } catch (error) {
-                decodedText.innerHTML = `<p style="color: #ef4444;">خطا: ${error.message}</p>`;
-            } finally {
-                readLoader.style.display = 'none';
-                readBtn.disabled = false;
             }
         });
-        // اضافه کردن قابلیت drag and drop برای فایل
-        const fileLabel = document.querySelector('.file-label');
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            fileLabel.addEventListener(eventName, preventDefaults, false);
-        });
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        ['dragenter', 'dragover'].forEach(eventName => {
-            fileLabel.addEventListener(eventName, highlight, false);
         });
-        ['dragleave', 'drop'].forEach(eventName => {
-            fileLabel.addEventListener(eventName, unhighlight, false);
         });
-        function highlight(e) {
-            fileLabel.style.borderColor = '#f5576c';
-            fileLabel.style.backgroundColor = 'rgba(245, 87, 108, 0.2)';
-        }
-        function unhighlight(e) {
-            fileLabel.style.borderColor = 'rgba(255, 255, 255, 0.3)';
-            fileLabel.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
-        }
-        fileLabel.addEventListener('drop', handleDrop, false);
-        function handleDrop(e) {
-            const dt = e.dataTransfer;
-            const files = dt.files;
-            if (files.length > 0) {
-                fileInput.files = files;
-                fileNameDisplay.textContent = `فایل انتخاب شده: ${files[0].name}`;
-                fileNameDisplay.style.color = '#4ade80';
-            }
-        }
-    </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" />
+  <title>استودیوی QR | ساخت و خواندن QR Code</title>
+  <!-- فونت فارسی -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" />
+  <style>
+    :root{
+      --bg-1:#0b0f17;
+      --bg-2:#0a0d14;
+      --grid:#ffffff12;
+      --text:#eaf2ff;
+      --muted:#9aa7b7;
+      --accent:#06b6d4;     /* فیروزه‌ای */
+      --accent-2:#7c3aed;   /* بنفش */
+      --card-bg:rgba(255,255,255,0.06);
+      --card-stroke:rgba(255,255,255,0.12);
+      --input-bg:rgba(255,255,255,0.08);
+      --shadow:0 20px 70px rgba(0,0,0,.45);
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(1000px 600px at 90% -10%, #3b82f633 0%, transparent 50%),
+        radial-gradient(900px 500px at -10% 110%, #a855f733 0%, transparent 55%),
+        linear-gradient(180deg, var(--bg-1), var(--bg-2));
+      position:relative;
+      -webkit-font-smoothing:antialiased;
+      -moz-osx-font-smoothing:grayscale;
+    }
+    /* الگوی ظریف شبکه‌ای شبیه ماتریس QR */
+    body::before{
+      content:"";
+      position:fixed;
+      inset:0;
+      pointer-events:none;
+      background:
+        repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 22px),
+        repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 22px);
+      mask-image: radial-gradient(80% 80% at 50% 50%, black 55%, transparent 100%);
+      opacity:.5;
+    }
+    .shell{
+      max-width:1200px;
+      margin-inline:auto;
+      padding:28px 18px 40px;
+    }
+    .hero{
+      text-align:center;
+      margin-bottom:16px;
+    }
+    .title{
+      margin:0 0 8px 0;
+      font-weight:800;
+      font-size:clamp(22px, 5vw, 34px);
+      letter-spacing:-.3px;
+      background:linear-gradient(90deg, var(--accent), var(--accent-2));
+      -webkit-background-clip:text;
+      background-clip:text;
+      color:transparent;
+      filter:drop-shadow(0 6px 24px rgba(124,58,237,.25));
+    }
+    .subtitle{
+      margin:0 auto;
+      max-width:680px;
+      color:var(--muted);
+      font-weight:400;
+      line-height:1.8;
+    }
+    /* ناوبری بین دو پنل (مخصوص موبایل) */
+    .nav-pills{
+      display:flex;
+      justify-content:center;
+      gap:10px;
+      margin:18px auto 10px;
+      padding:6px;
+      width:fit-content;
+      background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
+      border:1px solid var(--card-stroke);
+      border-radius:999px;
+      backdrop-filter:blur(10px) saturate(140%);
+      -webkit-backdrop-filter:blur(10px) saturate(140%);
+      box-shadow:0 10px 30px rgba(0,0,0,.25);
+    }
+    .pill{
+      border:0;
+      color:var(--text);
+      background:transparent;
+      padding:10px 16px;
+      border-radius:999px;
+      font-weight:700;
+      cursor:pointer;
+      transition:all .25s ease;
+      font-size:.98rem;
+    }
+    .pill:hover{color:#fff; transform:translateY(-1px)}
+    .pill.active{
+      background:linear-gradient(90deg, var(--accent), var(--accent-2));
+      box-shadow:0 6px 18px rgba(6,182,212,.35);
+    }
+    /* محفظه‌ی اسکرول افقی (موبایل) */
+    .carousel{
+      display:flex;
+      overflow-x:auto;
+      gap:16px;
+      scroll-snap-type:x mandatory;
+      scroll-behavior:smooth;
+      padding:8px 10px;
+      -webkit-overflow-scrolling:touch;
+      border-radius:16px;
+    }
+    /* جهت اسکرول LTR تا رفتار اسکرول اینترویویو دقیق باشه */
+    .carousel[dir="ltr"]{direction:ltr}
+    /* کارت/پنل‌ها */
+    .panel{
+      position:relative;
+      scroll-snap-align:start;
+      min-width:calc(100vw - 40px);   /* هر بار یک پنل کامل در موبایل */
+      background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
+      border:1px solid var(--card-stroke);
+      border-radius:18px;
+      padding:22px 18px;
+      box-shadow:var(--shadow);
+      backdrop-filter:blur(12px) saturate(150%);
+      -webkit-backdrop-filter:blur(12px) saturate(150%);
+    }
+    /* تزئین گوشه‌ها شبیه فایندر QR */
+    .panel .qr-corner{
+      position:absolute;
+      width:34px; height:34px; border-radius:8px;
+      border:3px solid var(--accent);
+      opacity:.7; pointer-events:none;
+      box-shadow:0 0 0 3px rgba(6,182,212,.12) inset, 0 0 24px rgba(6,182,212,.15);
+    }
+    .panel .qr-corner::after{
+      content:""; position:absolute; inset:6px;
+      border-radius:4px; border:3px solid var(--accent-2); opacity:.9;
+    }
+    .panel .qr-corner.tl{top:12px; right:12px}
+    .panel .qr-corner.tr{top:12px; left:12px}
+    .panel .qr-corner.bl{bottom:12px; right:12px}
+    .panel .qr-corner.br{bottom:12px; left:12px}
+    .panel h2{
+      margin:4px 0 14px 0;
+      font-weight:800;
+      font-size:1.25rem;
+      display:flex; align-items:center; gap:10px;
+      color:#fff;
+    }
+    .hint{
+      color:var(--muted);
+      font-size:.88rem;
+      margin:-4px 0 16px 0;
+    }
+    .group{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
+    label{color:var(--muted); font-size:.92rem}
+    textarea{
+      width:100%;
+      min-height:110px;
+      resize:vertical;
+      padding:12px 14px;
+      color:var(--text);
+      background:var(--input-bg);
+      border:1px solid var(--card-stroke);
+      border-radius:12px;
+      outline:none;
+      transition:border-color .25s, box-shadow .25s;
+    }
+    textarea::placeholder{color:#98a3b3}
+    textarea:focus{
+      border-color: color-mix(in oklab, var(--accent) 65%, #fff 15%);
+      box-shadow:0 0 0 6px rgba(6,182,212,.15);
+    }
+    /* ورودی فایل شیک */
+    .file-wrap{position:relative}
+    input[type="file"]{display:none}
+    .file-label{
+      display:flex; align-items:center; justify-content:center; gap:10px;
+      width:100%;
+      padding:14px 16px;
+      background:var(--input-bg);
+      border:1px dashed color-mix(in oklab, var(--accent) 60%, #000 15%);
+      color:var(--text);
+      border-radius:12px;
+      cursor:pointer;
+      transition:all .25s ease;
+    }
+    .file-label:hover{
+      border-color:var(--accent);
+      box-shadow:0 0 0 6px rgba(124,58,237,.14);
+      transform:translateY(-1px);
+    }
+    #file-name{
+      min-height:1.2em; margin:8px 6px 0 0; font-size:.86rem; color:var(--muted);
+    }
+    .actions{
+      display:flex; gap:10px; flex-wrap:wrap;
+    }
+    button{
+      padding:12px 16px;
+      border-radius:12px;
+      border:0; cursor:pointer;
+      color:#fff; font-weight:800; font-size:1rem;
+      background:linear-gradient(90deg, var(--accent), var(--accent-2));
+      box-shadow:0 10px 26px rgba(6,182,212,.25);
+      transition:transform .2s ease, box-shadow .25s ease, opacity .25s ease;
+      display:flex; align-items:center; gap:10px;
+    }
+    button:hover:not(:disabled){
+      transform:translateY(-2px);
+      box-shadow:0 14px 34px rgba(124,58,237,.28);
+    }
+    button:disabled{opacity:.6; cursor:not-allowed}
+    .result{
+      margin-top:12px;
+      padding:18px;
+      background:linear-gradient(180deg, rgba(20,20,28,.35), rgba(20,20,28,.15));
+      border:1px solid var(--card-stroke);
+      border-radius:14px;
+      min-height:120px;
+      display:grid;
+      place-items:center;
+      text-align:center;
+      color:#eaf2ff;
+    }
+    #qr-code-display img{
+      max-width:100%; height:auto; border-radius:10px;
+      border:2px solid #fff; box-shadow:0 8px 30px rgba(0,0,0,.4);
+      animation:fade .5s ease;
+    }
+    @keyframes fade{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
+    .loader{
+      width:32px; height:32px; border-radius:50%;
+      border:3px solid rgba(255,255,255,.15);
+      border-top-color: color-mix(in oklab, var(--accent) 70%, #fff 10%);
+      animation:spin 1s linear infinite; display:none;
+    }
+    @keyframes spin{to{transform:rotate(360deg)}}
+    .muted{color:var(--muted)}
+    .divider{
+      height:1px; background:var(--card-stroke);
+      margin:4px 0 12px 0; opacity:.7;
+    }
+    /* دسکتاپ: نمایش دو ستونه و بدون اسکرول افقی */
+    @media (min-width: 980px){
+      .carousel{
+        overflow:visible;
+        display:grid;
+        grid-template-columns:1fr 1fr;
+        gap:22px;
+        padding-inline:0;
+      }
+      .panel{min-width:auto}
+      .nav-pills{display:none}
+      .hero{margin-bottom:18px}
+    }
+  </style>
 </head>
 <body>
+  <div class="shell">
+    <header class="hero">
+      <h1 class="title">استودیوی QR</h1>
+      <p class="subtitle">ساخت سریع QR Code از متن یا لینک، و خواندن متن از تصویر QR — طراحی مدرن، سبک و مینیمال با تمرکز روی تجربه موبایل</p>
     </header>
+    <!-- ناوبری سریع بین پنل‌ها (روی موبایل) -->
+    <div class="nav-pills" role="tablist" aria-label="جابه‌جایی بین پنل‌ها">
+      <button class="pill active" data-target="panel-generate">ساخت</button>
+      <button class="pill" data-target="panel-read">خواندن</button>
+    </div>
+    <!-- پنل‌ها: اسکرول افقی روی موبایل، دو ستونه روی دسکتاپ -->
+    <div class="carousel" id="carousel" dir="ltr">
+      <!-- پنل ساخت -->
+      <section class="panel" id="panel-generate" dir="rtl">
+        <span class="qr-corner tl"></span>
+        <span class="qr-corner tr"></span>
+        <span class="qr-corner bl"></span>
+        <span class="qr-corner br"></span>
+        <h2>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect>
+            <rect x="14" y="14" width="7" height="7"></rect><path d="M3 14h7v7H3z"></path>
+          </svg>
+          ساخت QR Code
+        </h2>
+        <p class="hint">متن یا لینک خود را وارد کنید. برای مثال: https://example.com</p>
+        <div class="group">
+          <label for="text-input">متن یا لینک</label>
+          <textarea id="text-input" rows="4" placeholder="مثلاً: https://google.com">سلام دنیا</textarea>
         </div>
+        <div class="actions">
+          <button id="generate-btn" type="button" title="ساخت QR Code">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <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>
+            ساخت QR
+          </button>
+        </div>
+        <div class="result">
+          <div id="generate-loader" class="loader"></div>
+          <div id="qr-code-display"></div>
+        </div>
+      </section>
+      <!-- پنل خواندن -->
+      <section class="panel" id="panel-read" dir="rtl">
+        <span class="qr-corner tl"></span>
+        <span class="qr-corner tr"></span>
+        <span class="qr-corner bl"></span>
+        <span class="qr-corner br"></span>
+        <h2>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <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>
+          خواندن QR Code
+        </h2>
+        <p class="hint">تصویر QR Code را انتخاب کنید تا متن داخل آن خوانده شود.</p>
+        <div class="group">
+          <label for="file-input">انتخاب تصویر QR</label>
+          <div class="file-wrap">
+            <input type="file" id="file-input" accept="image/*" />
+            <label class="file-label" for="file-input">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                   stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <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>
+              لمس برای انتخاب فایل تصویر
+            </label>
+          </div>
+          <p id="file-name"></p>
+        </div>
+        <div class="actions">
+          <button id="read-btn" type="button" title="خواندن QR Code">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <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>
+            خواندن
+          </button>
+        </div>
+        <div class="result">
+          <div id="read-loader" class="loader"></div>
+          <p id="decoded-text" class="muted">نتیجه در اینجا نمایش داده می‌شود.</p>
+        </div>
+      </section>
+    </div>
+  </div>
+  <script>
+    // Endpoint سرویس
+    const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
+    // المان‌ها
+    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}`;
+      } else {
+        fileNameDisplay.textContent = '';
+      }
+    });
+    // توابع کمکی Gradio Queue
+    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
+    generateBtn.addEventListener('click', async () => {
+      const text = textInput.value.trim();
+      if (!text) return alert("لطفاً متنی را وارد کنید.");
+      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.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 = '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;
+      }
+    });
+    // ناوبری بین پنل‌ها (موبایل): کلیک روی قرص‌ها => اسکرول به پنل هدف
+    const carousel = document.getElementById('carousel');
+    const pills = document.querySelectorAll('.pill');
+    const panels = Array.from(carousel.querySelectorAll('.panel'));
+    pills.forEach(btn=>{
+      btn.addEventListener('click', ()=>{
+        const el = document.getElementById(btn.dataset.target);
+        if (el) el.scrollIntoView({behavior:'smooth', inline:'start', block:'nearest'});
+      });
+    });
+    // به‌روزرسانی حالت Active بر اساس اسکرول
+    const setActiveByScroll = ()=>{
+      const bounds = panels.map(el => Math.abs(el.getBoundingClientRect().left - carousel.getBoundingClientRect().left));
+      const nearestIndex = bounds.indexOf(Math.min(...bounds));
+      pills.forEach((p,i)=>p.classList.toggle('active', i===nearestIndex));
+    };
+    let ticking = false;
+    carousel.addEventListener('scroll', ()=>{
+      if(!ticking){
+        window.requestAnimationFrame(()=>{
+          setActiveByScroll();
+          ticking = false;
         });
+        ticking = true;
+      }
+    });
+  </script>
 </body>
 </html>