Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

fabd896

verified ·

1 Parent(s): 942c2eb

Update index.html

Browse files

Files changed (1) hide show

index.html +705 -547

index.html CHANGED Viewed

@@ -1,569 +1,727 @@
 <!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>

 <!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>