| <!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 کد | ساخت و خواندن</title> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css"> |
| <style> |
| |
| :root { |
| --app-font: 'Vazirmatn', sans-serif; |
| --app-bg: #F8F9FC; |
| --panel-bg: #FFFFFF; |
| --panel-border: #EAEFF7; |
| --input-bg: #F6F8FB; |
| --input-border: #E1E7EF; |
| --text-primary: #1A202C; |
| --text-secondary: #626F86; |
| --text-tertiary: #8A94A6; |
| --accent-primary: #4A6CFA; |
| --accent-primary-hover: #3553D6; |
| --accent-primary-glow: rgba(74, 108, 250, 0.25); |
| --accent-secondary: #0FD4A8; |
| --accent-secondary-hover: #0DA986; |
| --accent-secondary-glow: rgba(15, 212, 168, 0.2); |
| --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); |
| --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04); |
| --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05); |
| --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05); |
| --radius-card: 24px; |
| --radius-btn: 14px; |
| --radius-input: 12px; |
| --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: var(--app-font); |
| background-color: var(--app-bg); |
| color: var(--text-primary); |
| min-height: 100vh; |
| overflow-x: hidden; |
| display: flex; |
| justify-content: center; |
| align-items: flex-start; |
| padding: 2.5rem 1rem; |
| background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px); |
| background-size: 20px 20px; |
| background-position: -10px -10px; |
| } |
| |
| .container { |
| max-width: 480px; |
| width: 100%; |
| margin: 0 auto; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| .header { |
| text-align: center; |
| padding: 1rem 0 2rem; |
| } |
| |
| .logo { |
| font-size: 3rem; |
| margin-bottom: 10px; |
| filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); |
| } |
| |
| .title { |
| font-size: 2.2rem; |
| font-weight: 900; |
| margin-bottom: 0.8rem; |
| background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| letter-spacing: -1px; |
| } |
| |
| .subtitle { |
| font-size: 1rem; |
| color: var(--text-secondary); |
| opacity: 0.9; |
| } |
| |
| |
| .tabs { |
| display: flex; |
| background: var(--input-bg); |
| border-radius: var(--radius-btn); |
| padding: 6px; |
| margin-bottom: 20px; |
| border: 1px solid var(--panel-border); |
| } |
| |
| .tab { |
| flex: 1; |
| padding: 12px; |
| text-align: center; |
| border-radius: 10px; |
| cursor: pointer; |
| transition: var(--transition-smooth); |
| font-weight: 600; |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
| |
| .tab.active { |
| background: var(--panel-bg); |
| color: var(--text-primary); |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-lg); |
| } |
| |
| |
| .card { |
| background: var(--panel-bg); |
| border-radius: var(--radius-card); |
| padding: 30px; |
| border: 1px solid var(--panel-border); |
| box-shadow: var(--shadow-xl); |
| flex: 1; |
| display: none; |
| flex-direction: column; |
| } |
| |
| .tab-content.active { |
| display: flex; |
| } |
| |
| .form-group { |
| margin-bottom: 25px; |
| } |
| |
| .label { |
| display: block; |
| margin-bottom: 12px; |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
| |
| |
| .input { |
| width: 100%; |
| padding: 15px; |
| border: 1px solid var(--input-border); |
| border-radius: var(--radius-input); |
| background: var(--input-bg); |
| color: var(--text-primary); |
| font-size: 1rem; |
| font-family: var(--app-font); |
| min-height: 120px; |
| resize: vertical; |
| outline: none; |
| transition: var(--transition-smooth); |
| box-shadow: var(--shadow-sm) inset; |
| } |
| |
| .input:focus { |
| background: var(--panel-bg); |
| border-color: var(--accent-primary); |
| box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; |
| } |
| |
| .file-upload { |
| position: relative; |
| background: var(--input-bg); |
| border: 2px dashed var(--input-border); |
| border-radius: var(--radius-input); |
| padding: 30px 20px; |
| text-align: center; |
| cursor: pointer; |
| transition: var(--transition-smooth); |
| min-height: 140px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .file-upload.has-preview { |
| padding: 10px; |
| border-style: solid; |
| border-color: var(--accent-primary); |
| } |
| |
| .file-upload:hover, .file-upload.drag-over { |
| background: white; |
| border-color: var(--accent-primary); |
| box-shadow: 0 0 15px var(--accent-primary-glow); |
| transform: translateY(-2px); |
| } |
| |
| .file-upload input { |
| position: absolute; |
| left: -9999px; |
| } |
| |
| .file-upload img { |
| max-width: 100%; |
| max-height: 120px; |
| height: auto; |
| border-radius: 8px; |
| object-fit: contain; |
| } |
| |
| .upload-icon { |
| font-size: 2.5rem; |
| margin-bottom: 10px; |
| color: var(--accent-primary); |
| } |
| |
| .upload-text { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| font-weight: 500; |
| } |
| |
| |
| .btn { |
| width: 100%; |
| padding: 16px; |
| border: none; |
| border-radius: var(--radius-btn); |
| font-size: 1.1rem; |
| font-weight: 700; |
| cursor: pointer; |
| margin-top: auto; |
| transition: var(--transition-smooth); |
| background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); |
| color: white; |
| box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); |
| } |
| |
| .btn:hover:not(:disabled) { |
| transform: translateY(-5px) scale(1.02); |
| box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); |
| } |
| |
| .btn:disabled { |
| background: var(--text-tertiary); |
| color: var(--text-secondary); |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
| |
| .btn:active:not(:disabled) { |
| transform: translateY(0); |
| } |
| |
| |
| .result { |
| flex: 1; |
| background: var(--input-bg); |
| border: 2px dashed var(--input-border); |
| border-radius: var(--radius-card); |
| padding: 20px; |
| min-height: 150px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| margin-bottom: 25px; |
| box-shadow: var(--shadow-sm) inset; |
| } |
| |
| .result-empty { |
| color: var(--text-secondary); |
| font-style: italic; |
| } |
| |
| .result img { |
| max-width: 100%; |
| height: auto; |
| border-radius: var(--radius-input); |
| background: white; |
| padding: 10px; |
| box-shadow: var(--shadow-lg); |
| animation: zoomIn 0.4s ease; |
| border: 1px solid var(--panel-border); |
| } |
| |
| .result-text-wrapper { |
| width: 100%; |
| background: var(--panel-bg); |
| border: 1px solid var(--panel-border); |
| border-radius: var(--radius-input); |
| padding: 12px 18px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| animation: slideUp 0.4s ease; |
| box-shadow: var(--shadow-md); |
| } |
| .result-text { |
| flex-grow: 1; |
| margin-left: 10px; |
| word-break: break-all; |
| line-height: 1.6; |
| text-align: right; |
| color: var(--text-primary); |
| font-weight: 500; |
| } |
| |
| .copy-btn { |
| background: var(--accent-primary); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| padding: 8px 14px; |
| font-family: var(--app-font); |
| font-weight: 600; |
| cursor: pointer; |
| transition: var(--transition-smooth); |
| flex-shrink: 0; |
| font-size: 0.9rem; |
| box-shadow: var(--shadow-sm); |
| } |
| .copy-btn:hover { |
| background: var(--accent-primary-hover); |
| transform: scale(1.05); |
| } |
| .copy-btn.copied { |
| background-color: var(--accent-secondary); |
| transform: scale(1.05); |
| } |
| |
| |
| .loader { |
| width: 40px; |
| height: 40px; |
| border: 4px solid var(--input-border); |
| border-top: 4px solid var(--accent-primary); |
| 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.8); } to { opacity: 1; transform: scale(1); } } |
| @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } |
| |
| .icon { |
| display: inline-block; |
| margin-left: 8px; |
| vertical-align: middle; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <div class="logo">📱</div> |
| <h1 class="title">ساخت Qr Code آلفا</h1> |
| <p class="subtitle">ساخت و خواندن آسان کیوآر کد</p> |
| </div> |
|
|
| <div class="tabs"> |
| <div class="tab active" data-tab="generate"><span class="icon">➕</span>ساخت</div> |
| <div class="tab" data-tab="read"><span class="icon">👁️</span>خواندن</div> |
| </div> |
|
|
| <div class="card tab-content active" id="generate-content"> |
| <div class="form-group"> |
| <label class="label">متن یا لینک خود را بنویسید:</label> |
| <textarea id="text-input" class="input" placeholder="مثال: https://google.com یا سلام دنیا"></textarea> |
| </div> |
| <div class="result" id="qr-result"> |
| <div id="generate-loader" class="loader" style="display: none;"></div> |
| <div id="qr-display"><span class="result-empty">QR کد شما اینجا ظاهر میشود</span></div> |
| </div> |
| <button id="generate-btn" class="btn"><span class="icon">✨</span>ساخت QR کد</button> |
| </div> |
|
|
| <div class="card tab-content" id="read-content"> |
| <div class="form-group"> |
| <label class="label">تصویر QR کد را انتخاب کنید:</label> |
| <div class="file-upload" onclick="document.getElementById('file-input').click()"> |
| <input type="file" id="file-input" accept="image/*"> |
| <div class="upload-content"> |
| <div class="upload-icon">📷</div> |
| <div class="upload-text">انتخاب تصویر</div> |
| </div> |
| </div> |
| </div> |
| <div class="result" id="read-result"> |
| <div id="read-loader" class="loader" style="display: none;"></div> |
| <div id="decoded-text"><span class="result-empty">نتیجه اینجا نمایش داده میشود</span></div> |
| </div> |
| <button id="read-btn" class="btn"><span class="icon">🔍</span>خواندن QR کد</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space"; |
| |
| const tabs = document.querySelectorAll('.tab'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| 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 qrDisplay = document.getElementById('qr-display'); |
| const decodedText = document.getElementById('decoded-text'); |
| const generateLoader = document.getElementById('generate-loader'); |
| const readLoader = document.getElementById('read-loader'); |
| const fileUpload = document.querySelector('.file-upload'); |
| const uploadContent = document.querySelector('.upload-content'); |
| |
| function copyToClipboard(button, text) { |
| if (button.classList.contains('copied')) return; |
| |
| navigator.clipboard.writeText(text).then(() => { |
| const originalText = button.innerHTML; |
| button.innerHTML = '✓ کپی شد'; |
| button.classList.add('copied'); |
| button.disabled = true; |
| |
| setTimeout(() => { |
| button.innerHTML = originalText; |
| button.classList.remove('copied'); |
| button.disabled = false; |
| }, 2000); |
| }).catch(err => { |
| console.error('Failed to copy text: ', err); |
| alert('کپی کردن با خطا مواجه شد.'); |
| }); |
| } |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| tabs.forEach(t => t.classList.remove('active')); |
| tabContents.forEach(tc => tc.classList.remove('active')); |
| tab.classList.add('active'); |
| document.getElementById(tab.getAttribute('data-tab') + '-content').classList.add('active'); |
| }); |
| }); |
| |
| fileInput.addEventListener('change', () => { |
| const file = fileInput.files[0]; |
| if (file) { |
| if (file.type.startsWith('image/')) { |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| const previewImage = document.createElement('img'); |
| previewImage.src = e.target.result; |
| uploadContent.style.display = 'none'; |
| if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove(); |
| fileUpload.appendChild(previewImage); |
| fileUpload.classList.add('has-preview'); |
| } |
| reader.readAsDataURL(file); |
| } else { |
| alert('لطفا یک فایل تصویری انتخاب کنید.'); |
| fileInput.value = ''; |
| } |
| } else { |
| if(fileUpload.querySelector('img')) fileUpload.querySelector('img').remove(); |
| uploadContent.style.display = 'block'; |
| uploadContent.querySelector('.upload-icon').textContent = '📷'; |
| uploadContent.querySelector('.upload-text').textContent = 'انتخاب تصویر'; |
| fileUpload.classList.remove('has-preview'); |
| } |
| }); |
| |
| const generateSessionHash = () => Math.random().toString(36).substring(2, 15); |
| |
| const listenForData = (sessionHash, onResult, onError, onFinally) => { |
| 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); |
| onFinally(); |
| } else if (data.msg === "process_failed") { |
| eventSource.close(); |
| onError("پردازش با خطا مواجه شد."); |
| onFinally(); |
| } |
| }; |
| eventSource.onerror = (err) => { |
| eventSource.close(); |
| onError("خطا در ارتباط با سرور."); |
| onFinally(); |
| }; |
| }; |
| |
| generateBtn.addEventListener('click', async () => { |
| const text = textInput.value.trim(); |
| if (!text) return alert("لطفاً متنی را وارد کنید."); |
| generateLoader.style.display = 'block'; |
| qrDisplay.innerHTML = ''; |
| generateBtn.disabled = true; |
| try { |
| const sessionHash = generateSessionHash(); |
| const res = 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 (!res.ok) throw new Error('خطا در ارسال درخواست'); |
| listenForData(sessionHash, |
| (result) => qrDisplay.innerHTML = (result && result[0]) ? result[0] : '<span class="result-empty">خطا در ساخت</span>', |
| (error) => { alert(`خطا: ${error}`); qrDisplay.innerHTML = '<span class="result-empty">خطا</span>'; }, |
| () => { generateLoader.style.display = 'none'; generateBtn.disabled = false; } |
| ); |
| } catch (error) { |
| alert(`خطا: ${error.message}`); |
| qrDisplay.innerHTML = '<span class="result-empty">خطا در ساخت</span>'; |
| generateLoader.style.display = 'none'; |
| generateBtn.disabled = false; |
| } |
| }); |
| |
| readBtn.addEventListener('click', async () => { |
| const file = fileInput.files[0]; |
| if (!file) return alert("لطفاً یک تصویر انتخاب کنید."); |
| if (!file.type.startsWith('image/')) return alert("لطفاً یک فایل تصویری انتخاب کنید."); |
| |
| readLoader.style.display = 'block'; |
| decodedText.innerHTML = ''; |
| readBtn.disabled = true; |
| try { |
| const formData = new FormData(); |
| formData.append('files', file); |
| const uploadRes = await fetch(`${SPACE_URL}/gradio_api/upload`, { method: 'POST', body: formData }); |
| if (!uploadRes.ok) throw new Error('خطا در آپلود فایل'); |
| const [serverFilePath] = await uploadRes.json(); |
| const fileData = { path: serverFilePath, url: `${SPACE_URL}/gradio_api/file=${serverFilePath}`, orig_name: file.name }; |
| |
| const sessionHash = generateSessionHash(); |
| const joinRes = await fetch(`${SPACE_URL}/gradio_api/queue/join`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ fn_index: 1, data: [fileData], session_hash: sessionHash }) |
| }); |
| if (!joinRes.ok) throw new Error('خطا در پردازش'); |
| |
| listenForData(sessionHash, |
| (result) => { |
| const textToCopy = result[0]; |
| const escapedText = textToCopy.replace(/'/g, "\\'").replace(/"/g, '"'); |
| decodedText.innerHTML = ` |
| <div class="result-text-wrapper"> |
| <span class="result-text">📝 ${textToCopy}</span> |
| <button class="copy-btn" onclick="copyToClipboard(this, '${escapedText}')">کپی</button> |
| </div>`; |
| }, |
| (error) => { alert(`خطا: ${error}`); decodedText.innerHTML = '<span class="result-empty">خطا در خواندن</span>'; }, |
| () => { readLoader.style.display = 'none'; readBtn.disabled = false; } |
| ); |
| } catch (error) { |
| alert(`خطا: ${error.message}`); |
| decodedText.innerHTML = '<span class="result-empty">خطا در پردازش</span>'; |
| readLoader.style.display = 'none'; |
| readBtn.disabled = false; |
| } |
| }); |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| fileUpload.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); }); |
| }); |
| ['dragenter', 'dragover'].forEach(eventName => { |
| fileUpload.addEventListener(eventName, () => fileUpload.classList.add('drag-over')); |
| }); |
| ['dragleave', 'drop'].forEach(eventName => { |
| fileUpload.addEventListener(eventName, () => fileUpload.classList.remove('drag-over')); |
| }); |
| fileUpload.addEventListener('drop', e => { |
| if (e.dataTransfer.files.length > 0) { |
| fileInput.files = e.dataTransfer.files; |
| fileInput.dispatchEvent(new Event('change')); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
