Spaces:

Elias207
/

QRcode

Running

App Files Files Community

Elias207 commited on Aug 17, 2025

Commit

7a42222

verified ·

1 Parent(s): d5cd931

Update index.html

Browse files

Files changed (1) hide show

index.html +172 -561

index.html CHANGED Viewed

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

+    body {
+        font-family: 'Vazirmatn', sans-serif;
+        background: linear-gradient(135deg, var(--background-end), var(--background-start));
+        color: var(--text-color);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        padding: 20px;
+        gap: 40px;
+        flex-wrap: wrap;
+    }
+    .main-title {
+        width: 100%;
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: 300;
+        margin-bottom: 20px;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+    .main-title span {
+        font-weight: 700;
+        color: #fff;
+    }
+    .container {
+        background: var(--container-bg);
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        border: 1px solid var(--border-color);
+        width: 100%;
+        max-width: 450px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .container:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
+    }
+    h2 {
+        text-align: center;
+        color: #fff;
+        margin-top: 0;
+        font-weight: 500;
+        border-bottom: 1px solid var(--secondary-color);
+        padding-bottom: 15px;
+    }
+    label {
+        font-size: 0.9rem;
+        margin-bottom: -10px;
+        color: #bdc3c7;
+    }
+    textarea, .file-label {
+        width: 100%;
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid var(--border-color);
+        box-sizing: border-box;
+        font-size: 1rem;
+        background: var(--input-bg);
+        color: var(--text-color);
+        transition: border-color 0.3s, box-shadow 0.3s;
+    }
+    textarea::placeholder {
+        color: #95a5a6;
+    }
+    textarea:focus, .file-label:hover {
+        outline: none;
+        border-color: var(--secondary-color);
+        box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
+    }
+    /* Custom file input */
+    .file-wrapper {
+        position: relative;
+        cursor: pointer;
+    }
+    input[type="file"] {
+        display: none;
+    }
+    .file-label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
+    #file-name {
+        margin-top: 10px;
+        font-size: 0.85rem;
+        color: #bdc3c7;
+        text-align: center;
+        height: 1.2em;
+    }
+    button {
+        padding: 14px 20px;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        font-size: 1.1rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    }
+    button:hover:not(:disabled) {
+        transform: translateY(-3px);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+    }
+    button:disabled {
+        background: #555;
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+    .result-box {
+        margin-top: 15px;
+        padding: 20px;
+        background: var(--input-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        min-height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        word-wrap: break-word;
+        color: #ecf0f1;
+        font-size: 1rem;
+    }
+    #qr-code-display img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+        border: 2px solid white;
+        animation: fadeIn 0.5s ease-in-out;
+    }
+    .loader {
+        border: 4px solid #555;
+        border-top: 4px solid var(--secondary-color);
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+        display: none;
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: scale(0.9); }
+        to { opacity: 1; transform: scale(1); }
+    }
+</style>