Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

d1ee207

verified ·

1 Parent(s): bf863df

Update index.html

Browse files

Files changed (1) hide show

index.html +436 -623

index.html CHANGED Viewed

@@ -1,641 +1,454 @@
 <!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%);
-            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            --bg-pattern: linear-gradient(45deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
-            --text-primary: #ffffff;
-            --text-secondary: #e2e8f0;
-            --card-bg: rgba(255, 255, 255, 0.1);
-            --card-border: rgba(255, 255, 255, 0.2);
-            --input-bg: rgba(255, 255, 255, 0.15);
-            --shadow-light: 0 8px 32px rgba(31, 38, 135, 0.37);
-            --shadow-heavy: 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(--bg-pattern);
-            background-attachment: fixed;
-            min-height: 100vh;
-            color: var(--text-primary);
-            overflow-x: hidden;
-        }
-        /* QR Pattern Background */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 2px, transparent 2px),
-                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 2px, transparent 2px);
-            background-size: 50px 50px;
-            z-index: -1;
-            animation: float 20s ease-in-out infinite;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(1deg); }
-        }
-        .header {
-            text-align: center;
-            padding: 40px 20px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(20px);
-            margin-bottom: 40px;
-        }
-        .main-title {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: 300;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #ffffff, #a8edea);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
-        }
-        .main-title span {
-            font-weight: 700;
-            background: var(--secondary-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .subtitle {
-            font-size: 1.1rem;
-            color: var(--text-secondary);
-            opacity: 0.9;
-        }
-        .main-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-        @media (max-width: 768px) {
-            .main-container {
-                grid-template-columns: 1fr;
-                gap: 25px;
-            }
-        }
-        .card {
-            background: var(--card-bg);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--card-border);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: var(--shadow-light);
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            position: relative;
-            overflow: hidden;
-        }
-        .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(-10px);
-            box-shadow: var(--shadow-heavy);
-        }
-        .card:hover::before {
-            transform: scaleX(1);
-        }
-        .card-header {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 25px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .card-icon {
-            width: 50px;
-            height: 50px;
-            background: var(--primary-gradient);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }
-        .card-title {
-            font-size: 1.4rem;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-        .form-group {
-            margin-bottom: 20px;
-        }
-        .form-label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 0.95rem;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-        .form-input {
-            width: 100%;
-            padding: 15px;
-            background: var(--input-bg);
-            border: 2px solid transparent;
-            border-radius: 12px;
-            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.2);
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-        }
-        .form-input::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-        }
-        .file-input-wrapper {
-            position: relative;
-            cursor: pointer;
-        }
-        .file-input {
-            display: none;
-        }
-        .file-input-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 12px;
-            padding: 15px;
-            background: var(--input-bg);
-            border: 2px dashed rgba(255, 255, 255, 0.3);
-            border-radius: 12px;
-            transition: all 0.3s ease;
-            min-height: 60px;
-        }
-        .file-input-label:hover {
-            border-color: #667eea;
-            background: rgba(255, 255, 255, 0.2);
-        }
-        .file-name {
-            margin-top: 10px;
-            padding: 8px 12px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            text-align: center;
-            min-height: 1.5em;
-        }
-        .btn {
-            width: 100%;
-            padding: 16px;
-            background: var(--primary-gradient);
-            border: none;
-            border-radius: 12px;
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-            position: relative;
-            overflow: hidden;
-        }
-        .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:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
-        }
-        .btn:hover:not(:disabled)::before {
-            left: 100%;
-        }
-        .btn:disabled {
-            background: rgba(255, 255, 255, 0.1);
-            cursor: not-allowed;
-            transform: none;
-        }
-        .btn-secondary {
-            background: var(--success-gradient);
-        }
-        .result-container {
-            margin-top: 20px;
-            padding: 20px;
-            background: var(--input-bg);
-            border-radius: 12px;
-            min-height: 120px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            position: relative;
-            backdrop-filter: blur(10px);
-        }
-        .result-container 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;
-        }
-        .result-text {
-            word-wrap: break-word;
-            line-height: 1.6;
-            color: var(--text-primary);
-        }
-        .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;
-        }
-        @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);
-            }
-        }
-        .floating-elements {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: -1;
-        }
-        .floating-qr {
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.05);
-            animation: float-qr 15s infinite linear;
-        }
-        .floating-qr:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
-        .floating-qr:nth-child(2) { top: 80%; left: 90%; animation-delay: 5s; }
-        .floating-qr:nth-child(3) { top: 40%; left: 80%; animation-delay: 10s; }
-        @keyframes float-qr {
-            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
-            50% { opacity: 1; }
-            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
-        }
-        /* Mobile optimizations */
-        @media (max-width: 480px) {
-            .header {
-                padding: 30px 15px;
-            }
-            .card {
-                padding: 20px;
-                border-radius: 15px;
-            }
-            .main-container {
-                padding: 0 15px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="floating-elements">
-        <div class="floating-qr"></div>
-        <div class="floating-qr"></div>
-        <div class="floating-qr"></div>
-    </div>
-    <header class="header">
-        <h1 class="main-title">ابزار مدرن <span>QR Code</span></h1>
-        <p class="subtitle">ساخت و خواندن کیوآر کد به سادگی</p>
-    </header>
-    <div class="main-container">
-        <!-- کارت ساخت QR Code -->
-        <div class="card">
-            <div class="card-header">
-                <div class="card-icon">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <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"/>
-                        <rect x="5" y="5" width="3" height="3"/>
-                        <rect x="16" y="5" width="3" height="3"/>
-                        <rect x="16" y="16" width="3" height="3"/>
-                        <rect x="5" y="16" width="3" height="3"/>
-                    </svg>
-                </div>
-                <h2 class="card-title">ساخت QR Code</h2>
-            </div>
-            <div class="form-group">
-                <label for="text-input" class="form-label">متن یا لینک خود را وارد کنید:</label>
-                <textarea id="text-input" class="form-input" rows="4" placeholder="مثال: https://google.com یا متن دلخواه">سلام دنیا</textarea>
-            </div>
-            <button id="generate-btn" class="btn">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
-                </svg>
-                <span>ساخت QR Code</span>
-            </button>
-            <div class="result-container">
-                <div id="generate-loader" class="loader" style="display: none;"></div>
-                <div id="qr-code-display"></div>
-            </div>
-        </div>
-        <!-- کارت خواندن QR Code -->
-        <div class="card">
-            <div class="card-header">
-                <div class="card-icon">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <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>
-            </div>
-            <div class="form-group">
-                <label for="file-input" class="form-label">تصویر 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-input-label">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <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>
-                <div id="file-name" class="file-name"></div>
-            </div>
-            <button id="read-btn" class="btn btn-secondary">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                    <polyline points="14,2 14,8 20,8"/>
-                    <line x1="16" y1="13" x2="8" y2="13"/>
-                    <line x1="16" y1="17" x2="8" y2="17"/>
-                    <polyline points="10,9 9,9 8,9"/>
-                </svg>
-                <span>خواندن QR Code</span>
-            </button>
-            <div class="result-container">
-                <div id="read-loader" class="loader" style="display: none;"></div>
-                <div id="decoded-text" class="result-text">نتیجه در اینجا نمایش داده می‌شود</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.color = '#4facfe';
-            } 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();
-                textInput.style.borderColor = '#f5576c';
-                setTimeout(() => textInput.style.borderColor = 'transparent', 2000);
-                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 class="result-text">خطا: خروجی معتبر دریافت نشد.</p>';
-                        }
-                    },
-                    (error) => {
-                        qrCodeDisplay.innerHTML = `<p class="result-text">خطا در ساخت: ${error}</p>`;
-                    }
-                );
-            } catch (error) {
-                qrCodeDisplay.innerHTML = `<p class="result-text">خطا: ${error.message}</p>`;
-            } finally {
-                generateLoader.style.display = 'none';
-                generateBtn.disabled = false;
             }
         });
-        // منطق خواندن QR Code
-        readBtn.addEventListener('click', async () => {
-            const file = fileInput.files[0];
-            if (!file) {
-                fileNameDisplay.textContent = '⚠️ لطفاً یک فایل انتخاب کنید';
-                fileNameDisplay.style.color = '#f5576c';
-                return;
-            }
-            readLoader.style.display = 'block';
-            decodedText.textContent = '';
-            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.textContent = `📄 متن خوانده شده:\n\n${result[0]}`;
-                    },
-                    (error) => {
-                        decodedText.textContent = `❌ خطا در خواندن: ${error}`;
-                    }
-                );
-            } catch (error) {
-                decodedText.textContent = `❌ خطا: ${error.message}`;
-            } finally {
-                readLoader.style.display = 'none';
-                readBtn.disabled = false;
-            }
         });
-    </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{
+      --accent-1:#7f5af0;
+      --accent-2:#2cb6f7;
+      --bg-1:#0b1220;
+      --bg-2:#0e1729;
+      --text:#e9eef6;
+      --muted:#9aa5b1;
+      --glass:rgba(255,255,255,.06);
+      --border:rgba(255,255,255,.14);
+      --input:rgba(255,255,255,.08);
+      --shadow:0 10px 40px rgba(0,0,0,.35);
+    }
+    *{box-sizing:border-box}
+    html,body{margin:0;padding:0}
+    body{
+      font-family:'Vazirmatn',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(900px 900px at 8% 12%, #1a2d4a 0%, transparent 50%),
+        radial-gradient(700px 700px at 90% 85%, #2a1550 0%, transparent 50%),
+        linear-gradient(135deg,var(--bg-1),var(--bg-2));
+      min-height:100dvh;
+      display:flex;
+      flex-direction:column;
+      overflow:hidden;
+    }
+    /* الگوی گرید الهام‌گرفته از QR */
+    body::after{
+      content:"";
+      position:fixed; inset:0;
+      background-image:
+        linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
+      background-size:24px 24px;
+      mix-blend-mode:overlay;
+      pointer-events:none;
+      opacity:.18;
+    }
+    header{
+      width:100%;
+      padding:18px 16px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+    }
+    .brand{
+      display:flex; align-items:center; gap:12px;
+      padding:10px 14px;
+      border-radius:14px;
+      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)) padding-box,
+                 linear-gradient(135deg, rgba(127,90,240,.7), rgba(44,182,247,.7)) border-box;
+      border:1px solid transparent;
+      box-shadow:var(--shadow);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .logo{
+      width:28px;height:28px; position:relative;
+      background:conic-gradient(from 0deg, var(--accent-1), var(--accent-2));
+      border-radius:6px;
+    }
+    .logo::before,.logo::after{
+      content:""; position:absolute; background:#0b1220; border-radius:2px;
+    }
+    .logo::before{ inset:5px 5px 13px 5px; }
+    .logo::after{ width:8px; height:8px; right:6px; bottom:6px; }
+    .title{ font-weight:800; letter-spacing:.2px; }
+    .subtitle{ font-weight:400; color:var(--muted); font-size:.9rem }
+    main{
+      flex:1;
+      display:grid;
+      grid-template-columns: 1fr 16px 1fr; /* همواره دو ستون؛ حتی در موبایل */
+      align-items:stretch;
+      gap:0;
+      width:min(1200px, 100%);
+      margin:0 auto;
+      padding:12px;
+      height:calc(100dvh - 86px);
+    }
+    .divider{
+      position:relative;
+      border-radius:12px;
+      background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
+      box-shadow: 0 0 30px rgba(127,90,240,.35), 0 0 40px rgba(44,182,247,.25) inset;
+      opacity:.9;
+    }
+    .divider::after{
+      content:"";
+      position:absolute; inset:3px;
+      border-radius:10px;
+      background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
+    }
+    .divider .handle{
+      position:absolute; top:50%; left:50%;
+      transform:translate(-50%,-50%);
+      width:6px; height:40px; border-radius:999px;
+      background:rgba(0,0,0,.25);
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
+    }
+    .container{
+      height:100%;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) padding-box,
+        linear-gradient(135deg, rgba(127,90,240,.6), rgba(44,182,247,.6)) border-box;
+      border:1px solid transparent;
+      border-radius:18px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      box-shadow: var(--shadow);
+      padding:22px;
+      display:flex; flex-direction:column; gap:18px;
+      overflow:auto;
+      position:relative;
+    }
+    .container:hover{
+      box-shadow: 0 14px 50px rgba(0,0,0,.45);
+    }
+    .section-head{
+      display:flex; align-items:center; justify-content:space-between; gap:12px;
+      margin-bottom:6px;
+      padding-bottom:12px;
+      border-bottom:1px dashed rgba(255,255,255,.15);
+    }
+    h2{
+      margin:0; font-weight:800; letter-spacing:.2px; color:#fff;
+      display:flex; align-items:center; gap:10px;
+    }
+    .hint{
+      color:var(--muted); font-size:.9rem;
+    }
+    label{ font-size:.92rem; color:#cbd5e1; }
+    textarea, .file-label{
+      width:100%;
+      padding:12px 14px;
+      border-radius:12px;
+      border:1px solid rgba(255,255,255,.16);
+      background: var(--input);
+      color:var(--text);
+      font-size:1rem;
+      transition: border-color .25s ease, box-shadow .25s ease, transform .05s ease;
+    }
+    textarea{ resize:vertical; min-height:112px; }
+    textarea::placeholder{ color:#94a3b8; }
+    textarea:focus{ outline:none; border-color: var(--accent-2); box-shadow: 0 0 0 6px rgba(44,182,247,.12); }
+    .file-wrapper{ position:relative; cursor:pointer; }
+    input[type="file"]{ display:none; }
+    .file-label{
+      display:flex; align-items:center; justify-content:center; gap:10px;
+      cursor:pointer;
+    }
+    .file-label:hover{ border-color:var(--accent-2); box-shadow: 0 0 0 6px rgba(44,182,247,.10); }
+    #file-name{ margin:2px 2px 6px; font-size:.85rem; color:#cbd5e1; min-height:1.2em; text-align:center }
+    button{
+      padding:14px 18px;
+      border:0; border-radius:12px; cursor:pointer;
+      color:white; font-weight:800; letter-spacing:.3px; font-size:1rem;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
+      box-shadow: 0 8px 26px rgba(127,90,240,.35), 0 10px 30px rgba(44,182,247,.25);
+      display:flex; align-items:center; justify-content:center; gap:10px;
+      transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
+    }
+    button:hover:not(:disabled){ transform: translateY(-2px); filter:brightness(1.05) }
+    button:active:not(:disabled){ transform: translateY(0) scale(.99) }
+    button:disabled{ opacity:.65; cursor:not-allowed; filter:grayscale(.3) }
+    .result-box{
+      margin-top:2px;
+      padding:16px;
+      border-radius:14px;
+      border:1px dashed rgba(255,255,255,.18);
+      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
+      min-height:120px;
+      display:flex; align-items:center; justify-content:center;
+      text-align:center; color:#e6edf5;
+      position:relative; overflow:hidden;
+    }
+    .result-box::before{
+      content:"";
+      position:absolute; inset:-1px;
+      border-radius:14px;
+      background: radial-gradient(600px 600px at 100% 0%, rgba(127,90,240,.08), transparent 60%),
+                  radial-gradient(600px 600px at 0% 100%, rgba(44,182,247,.08), transparent 60%);
+      pointer-events:none;
+    }
+    #qr-code-display img{
+      max-width:100%; height:auto;
+      border-radius:12px;
+      border:2px solid rgba(255,255,255,.9);
+      box-shadow: 0 14px 40px rgba(0,0,0,.45);
+      animation: fadeIn .45s ease-in-out;
+    }
+    .loader{
+      width:36px; height:36px;
+      border:3px solid rgba(255,255,255,.22);
+      border-top-color: var(--accent-2);
+      border-right-color: var(--accent-1);
+      border-radius:50%;
+      animation: spin .8s linear infinite;
+      display:none;
+    }
+    @keyframes spin{ to{ transform:rotate(360deg) } }
+    @keyframes fadeIn{ from{ opacity:0; transform:scale(.95) } to{ opacity:1; transform:scale(1) } }
+    /* بهینه‌سازی برای ارتفاع‌های خیلی کم */
+    @media (max-height:650px){
+      main{ height:auto; }
+      .container{ padding:18px }
+      textarea{ min-height:96px }
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <div class="brand">
+      <div class="logo"></div>
+      <div>
+        <div class="title">ابزار مدرن QR Code</div>
+        <div class="subtitle">ساخت و خواندن فوری با چیدمان دو ستونه</div>
+      </div>
+    </div>
+  </header>
+  <main>
+    <!-- پنل ساخت -->
+    <section class="container" aria-label="ساخت QR">
+      <div class="section-head">
+        <h2>
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM17 17h4"/></svg>
+          ساخت QR Code
+        </h2>
+        <span class="hint">متن یا لینک را وارد کنید</span>
+      </div>
+      <label for="text-input">متن یا لینک:</label>
+      <textarea id="text-input" rows="4" placeholder="مثلا: https://yourdomain.com/landing">سلام دنیا</textarea>
+      <button id="generate-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
+        ساخت QR Code
+      </button>
+      <div class="result-box">
+        <div id="generate-loader" class="loader"></div>
+        <div id="qr-code-display"></div>
+      </div>
+    </section>
+    <!-- جداکننده -->
+    <div class="divider" aria-hidden="true">
+      <div class="handle"></div>
     </div>
+    <!-- پنل خواندن -->
+    <section class="container" aria-label="خواندن QR">
+      <div class="section-head">
+        <h2>
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
+          خواندن QR Code
+        </h2>
+        <span class="hint">تصویر QR خود را آپلود کنید</span>
+      </div>
+      <label for="file-input">انتخاب فایل تصویر:</label>
+      <div class="file-wrapper">
+        <input type="file" id="file-input" accept="image/*">
+        <label for="file-input" class="file-label">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
+          انتخاب تصویر QR
+        </label>
+      </div>
+      <p id="file-name"></p>
+      <button id="read-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
+        خواندن QR Code
+      </button>
+      <div class="result-box">
+        <div id="read-loader" class="loader"></div>
+        <p id="decoded-text">نتیجه در اینجا نمایش داده می‌شود.</p>
+      </div>
+    </section>
+  </main>
+  <script>
+    // همان منطق قبلی – فقط استایل و چیدمان تغییر کرده است
+    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 = '';
+      }
+    });
+    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("خطا در ارتباط با سرور.");
+      };
+    };
+    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;
+      }
+    });
+    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;
+      }
+    });
+  </script>
 </body>
 </html>