| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Photoshop Pro</title> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| <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; |
| --danger-color: #e53e3e; |
| --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-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); |
| } |
| |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } |
| @keyframes scaleUp { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } } |
| @keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } |
| @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 2.5rem 1rem; } |
| .container { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; } |
| |
| |
| header { position: relative; text-align: center; margin-bottom: 1rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; } |
| #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; } |
| h1, .subtitle, #subscription-status-badge { position: relative; z-index: 2; } |
| h1 { font-size: 2.8rem; font-weight: 800; margin: 0 0 0.8rem 0; 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: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; } |
| |
| |
| #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 700; margin-top: 1rem; display: inline-block; animation: badge-fade-in 0.6s 0.5s ease-out backwards; position: relative; z-index: 2;} |
| #subscription-status-badge.free-badge { background: #64748b; color: white; box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3); } |
| #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); } |
| |
| |
| main { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.3s ease-out backwards; } |
| .form-group { margin-bottom: 2.5rem; } |
| .form-group:last-child { margin-bottom: 0; } |
| .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem; } |
| .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); } |
| |
| |
| #upload-area { position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2.5rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } |
| #upload-area.drag-over, #upload-area:hover:not(.has-file) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); } |
| #upload-area.has-file { border-style: solid; border-color: var(--panel-border); padding: 0; cursor: default; } |
| #upload-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; } |
| #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; } |
| #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; } |
| #preview-image-main { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; } |
| #remove-file-btn-main { display: none; position: absolute; top: 12px; right: 12px; background-color: rgba(26, 32, 44, 0.6); color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; z-index: 10; transition: var(--transition-smooth); padding: 0; } |
| #remove-file-btn-main:hover { background-color: var(--danger-color); transform: scale(1.1); } |
| #upload-area.has-file #upload-content { display: none; } |
| #upload-area.has-file #preview-image-main, #upload-area.has-file #remove-file-btn-main { display: block; } |
| |
| |
| textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 2px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1.05rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; } |
| textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); background-color: #fff; } |
| |
| |
| .limit-warning-card { |
| display: none; |
| background: linear-gradient(135deg, #FFF5F7 0%, #FFE5EC 100%); |
| border: 2px solid #FFCCD5; |
| border-radius: 20px; |
| padding: 1.75rem; |
| margin: 1.5rem 0; |
| text-align: center; |
| box-shadow: 0 10px 25px rgba(255, 77, 109, 0.1); |
| animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
| } |
| .limit-warning-card h4 { |
| color: #FF4D6D; |
| font-size: 1.25rem; |
| font-weight: 800; |
| margin-bottom: 10px; |
| } |
| .limit-warning-card p { |
| color: #4A5568; |
| font-size: 0.95rem; |
| line-height: 1.8; |
| font-weight: 600; |
| margin-bottom: 15px; |
| } |
| .countdown-timer-box { |
| font-weight: 800; |
| color: #FF4D6D; |
| background: #FFFFFF; |
| border: 2px dashed #FFAEC0; |
| padding: 10px 16px; |
| border-radius: 12px; |
| display: inline-block; |
| font-size: 0.95rem; |
| box-shadow: var(--shadow-sm); |
| } |
| |
| .credit-info { font-size: 0.95rem; color: var(--text-tertiary); text-align: center; margin-top: 1rem; font-weight: 600; background: var(--input-bg); padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--input-border); display: none; } |
| |
| #submit-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.3rem; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 15px -3px var(--accent-primary-glow); margin-top: 1rem; } |
| #submit-btn svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); } |
| #submit-btn:hover:not(:disabled) { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 20px -4px var(--accent-primary-glow); } |
| #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; } |
| #submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; } |
| |
| |
| #image-result-container { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; } |
| |
| .empty-placeholder { width: 400px; max-width: 100%; height: 300px; border: 2px dashed var(--input-border); border-radius: 20px; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } |
| .empty-placeholder svg { color: var(--text-tertiary); margin-bottom: 15px; opacity: 0.5; width: 48px; height: 48px; } |
| .empty-placeholder p { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 600; margin: 0; } |
| |
| .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; margin: 0 auto; } |
| .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
| .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; } |
| @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } } |
| .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; } |
| @keyframes reveal-sketch { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } } |
| .building-layer { filter: blur(15px); opacity: 0; animation: denoise-color 7s infinite ease-in-out; } |
| @keyframes denoise-color { 0% { opacity: 0; } 40% { opacity: 0.6; filter: blur(5px); } 100% { opacity: 1; filter: blur(0px); } } |
| .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; } |
| @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } } |
| .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); } |
| @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -15px) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } |
| .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); z-index: 2; text-align: center; width: 90%; } |
| .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.3s linear; z-index: 2; } |
| |
| @media (max-width: 650px) { |
| main { padding: 1.5rem; } h1 { font-size: 2.2rem; } |
| .generator-container { height: 250px; } |
| .text-overlay { font-size: 16px; } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <input type="hidden" id="file_id" value="{FILE_ID}"> |
| <input type="hidden" id="bot_b64" value="{BOT_B64}"> |
| <input type="hidden" id="t" value="{TIMESTAMP}"> |
|
|
| <div class="container"> |
| <header> |
| <canvas id="neural-network-canvas"></canvas> |
| <div style="position: relative; z-index: 2;"> |
| <h1>فتوشاپ هوش مصنوعی ✨</h1> |
| <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p> |
| <div id="subscription-status-badge">درحال بررسی...</div> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg> |
| ۱. تصویر خود را انتخاب کنید |
| </div> |
| <label id="upload-area" for="file-input"> |
| <div id="upload-content"> |
| <div id="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div> |
| <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p> |
| </div> |
| <img id="preview-image-main" src="" alt="Preview"> |
| <button type="button" id="remove-file-btn-main" title="حذف تصویر">×</button> |
| </label> |
| <input type="file" id="file-input" accept="image/png, image/jpeg, image/webp" hidden> |
| </div> |
| |
| <div class="form-group"> |
| <label class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg> |
| ۲. دستور ویرایش را بنویسید |
| </label> |
| <textarea id="prompt-input" placeholder="مثال: پسزمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea> |
|
|
| |
| <div id="limit-warning-card" class="limit-warning-card"> |
| <h4>⚠️ سهمیه هفتگی شما تمام شد!</h4> |
| <p>اعتبار این هفته شما برای ویرایش عکس به پایان رسید. هفته آینده مجدداً شارژ خواهد شد.<br>همچنین برای استفاده کاملاً نامحدود و دسترسی بدون مرز به تمامی ابزارها، میتوانید همین حالا از داخل ربات لایسنس ویژه تهیه فرمایید. 🌟💎</p> |
| <div id="countdown-timer-box" class="countdown-timer-box">در حال محاسبه زمان شارژ مجدد...</div> |
| </div> |
|
|
| <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div> |
|
|
| <button id="submit-btn" disabled> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/></svg> |
| <span id="btn-text">ایجاد کن</span> |
| <div class="spinner"></div> |
| </button> |
| </div> |
|
|
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg> |
| ۳. وضعیت درخواست |
| </div> |
| <div id="image-result-container"> |
| <div class="empty-placeholder"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> |
| <p>تصویر و دستور خود را وارد کنید.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| const uploadArea = document.getElementById('upload-area'); |
| const fileInput = document.getElementById('file-input'); |
| const previewImage = document.getElementById('preview-image-main'); |
| const removeFileBtn = document.getElementById('remove-file-btn-main'); |
| const promptInput = document.getElementById('prompt-input'); |
| const submitBtn = document.getElementById('submit-btn'); |
| const imageResultContainer = document.getElementById('image-result-container'); |
| |
| let uploadedFile = null; |
| let fakeProgressInterval = null; |
| let isSubmitting = false; |
| |
| |
| let userSubscriptionStatus = "{PREMIUM_STATUS}"; |
| let userFingerprint = null; |
| let freeCreditRemaining = 5; |
| |
| async function getBrowserFingerprint() { |
| const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"]; |
| const fingerprintString = components.join('---'); |
| let hash = 0; |
| for (let i = 0; i < fingerprintString.length; i++) { hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i); hash |= 0; } |
| return 'fp_edit_' + Math.abs(hash).toString(16); |
| } |
| |
| function updateUIForSubscriptionStatus(status) { |
| userSubscriptionStatus = status; |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const warningCard = document.getElementById('limit-warning-card'); |
| const badge = document.getElementById('subscription-status-badge'); |
| |
| badge.style.display = 'inline-block'; |
| |
| if (status === 'paid') { |
| badge.textContent = 'کاربر ویژه (نامحدود)'; |
| badge.className = 'paid-badge'; |
| creditInfoDiv.style.display = 'none'; |
| warningCard.style.display = 'none'; |
| checkFormState(); |
| } else { |
| badge.textContent = 'کاربر رایگان'; |
| badge.className = 'free-badge'; |
| checkFreeUserCredit(); |
| } |
| } |
| |
| async function checkFreeUserCredit() { |
| if (!userFingerprint || userSubscriptionStatus === 'paid') return; |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const warningCard = document.getElementById('limit-warning-card'); |
| const submitBtn = document.getElementById('submit-btn'); |
| try { |
| const response = await fetch('/api/check-edit-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) |
| }); |
| const result = await response.json(); |
| |
| if (result.limit_reached) { |
| freeCreditRemaining = 0; |
| submitBtn.style.display = 'none'; |
| warningCard.style.display = 'block'; |
| creditInfoDiv.style.display = 'none'; |
| startWeeklyCountdown(); |
| } else { |
| freeCreditRemaining = result.credits_remaining; |
| checkFormState(); |
| warningCard.style.display = 'none'; |
| creditInfoDiv.style.display = 'block'; |
| creditInfoDiv.innerHTML = `شما <b>${result.credits_remaining}</b> اعتبار ویرایش تصویر برای این هفته دارید.`; |
| } |
| } catch (error) { |
| creditInfoDiv.textContent = "خطا در ارتباط با سیستم اعتبار."; |
| submitBtn.disabled = true; |
| } |
| } |
| |
| function startWeeklyCountdown() { |
| const timerBox = document.getElementById('countdown-timer-box'); |
| if (!timerBox) return; |
| |
| function tick() { |
| const now = new Date(); |
| const daysUntilMonday = (8 - now.getDay()) % 7 || 7; |
| const nextMonday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + daysUntilMonday); |
| nextMonday.setHours(0, 0, 0, 0); |
| const diff = nextMonday - now; |
| |
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)); |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
| |
| timerBox.textContent = `⏳ ${days} روز و ${hours} ساعت و ${minutes} دقیقه و ${seconds} ثانیه تا شارژ مجدد`; |
| } |
| tick(); |
| setInterval(tick, 1000); |
| } |
| |
| async function handleFile(file) { |
| if (!file || !file.type.startsWith('image/')) return alert('لطفاً یک تصویر انتخاب کنید.'); |
| uploadedFile = file; |
| const reader = new FileReader(); |
| reader.onload = (e) => { previewImage.src = e.target.result; }; |
| reader.readAsDataURL(file); |
| uploadArea.classList.add('has-file'); |
| checkFormState(); |
| } |
| |
| removeFileBtn.onclick = async (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| uploadedFile = null; fileInput.value = ''; previewImage.src = ''; |
| uploadArea.classList.remove('has-file'); |
| checkFormState(); |
| }; |
| |
| fileInput.onchange = (e) => handleFile(e.target.files[0]); |
| uploadArea.ondragover = (e) => { e.preventDefault(); uploadArea.classList.add('drag-over'); }; |
| uploadArea.ondragleave = () => uploadArea.classList.remove('drag-over'); |
| uploadArea.ondrop = (e) => { e.preventDefault(); uploadArea.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0]); }; |
| |
| function checkFormState() { |
| let limitReached = (userSubscriptionStatus === 'free' && freeCreditRemaining === 0); |
| submitBtn.disabled = limitReached || !(uploadedFile && promptInput.value.trim() !== ''); |
| } |
| promptInput.oninput = checkFormState; |
| |
| |
| function startFakeProgress(targetSeconds) { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if (!pb) return; |
| let currentProg = 0; |
| const intervalMs = 100; |
| const increment = 100 / (targetSeconds * 1000 / intervalMs); |
| |
| pb.style.width = '0%'; |
| fakeProgressInterval = setInterval(() => { |
| currentProg += increment; |
| if(currentProg > 98) { |
| clearInterval(fakeProgressInterval); |
| currentProg = 98; |
| } |
| pb.style.width = `${currentProg}%`; |
| }, intervalMs); |
| } |
| |
| function finishFakeProgress() { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if(pb) pb.style.width = '100%'; |
| } |
| |
| |
| submitBtn.onclick = async () => { |
| if (isSubmitting) return; |
| if (!uploadedFile) return alert('لطفاً ابتدا تصویر خود را انتخاب کنید.'); |
| if (promptInput.value.trim() === '') return alert('لطفاً دستور ویرایش را وارد کنید.'); |
| |
| isSubmitting = true; |
| submitBtn.disabled = true; |
| promptInput.disabled = true; |
| document.getElementById('btn-text').style.display = 'none'; |
| document.querySelector('.spinner').style.display = 'inline-block'; |
| |
| const originalPrompt = promptInput.value.trim(); |
| |
| |
| imageResultContainer.innerHTML = ` |
| <div class="generator-container" style="display:flex;"> |
| <div class="noise-layer"></div><div class="sketch-layer"></div><div class="building-layer"></div><div class="pixel-grid"></div><div class="particles"></div> |
| <div class="text-overlay" id="loading-text">در حال ارسال درخواست...</div> |
| <div class="progress-bar" id="tv-progress-bar"></div> |
| </div> |
| `; |
| |
| |
| startFakeProgress(1.5); |
| |
| const formData = new FormData(); |
| formData.append('file', uploadedFile); |
| formData.append('file_id', document.getElementById('file_id').value); |
| formData.append('bot_b64', document.getElementById('bot_b64').value); |
| formData.append('t', document.getElementById('t').value); |
| formData.append('prompt', originalPrompt); |
| |
| try { |
| const res = await fetch('/api/bridge/upload', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const data = await res.json(); |
| |
| if (data.status === 'success') { |
| |
| if (userSubscriptionStatus === 'free') { |
| try { |
| await fetch('/api/use-edit-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint }) |
| }); |
| checkFreeUserCredit(); |
| } catch (e) { console.error("Error using credit", e); } |
| } |
| |
| |
| finishFakeProgress(); |
| |
| |
| setTimeout(() => { |
| |
| document.querySelectorAll('main > .form-group:not(:last-child), #submit-btn, .credit-info').forEach(el => { |
| el.style.display = 'none'; |
| }); |
| |
| imageResultContainer.innerHTML = ` |
| <div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-card); animation: scaleUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); max-width: 450px; margin: 1.5rem auto; box-shadow: var(--shadow-lg);"> |
| <div style="width: 70px; height: 70px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 4px 10px rgba(74, 222, 128, 0.2); animation: scaleUp 0.5s ease-out;"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| <polyline points="20 6 9 17 4 12"></polyline> |
| </svg> |
| </div> |
| <h3 style="color: #15803d; font-size: 1.45rem; font-weight: 800; margin-bottom: 0.8rem; font-family: var(--app-font);">درخواست شما ثبت شد! 🎉</h3> |
| <p style="color: #166534; font-size: 1.05rem; line-height: 1.7; font-weight: 500; margin: 0; font-family: var(--app-font);"> |
| تصویر با موفقیت دریافت و جهت پردازش به روبات ارسال گردید.<br> |
| <span style="display: block; margin-top: 0.8rem; font-size: 0.95rem; color: #15803d; opacity: 0.85; font-weight: bold;"> |
| 👈 اکنون میتوانید به روبیکا بازگردید. ربات به محض آماده شدن فایل، نتیجه نهایی را مستقیماً برایتان ارسال خواهد کرد. |
| </span> |
| </p> |
| </div> |
| `; |
| |
| resetBtn(); |
| }, 800); |
| } else { |
| displayError('خطا در تحویل فایل به سرور ربات: ' + data.message); |
| } |
| } catch (e) { |
| displayError('خطای ارتباط با سرور رانفلر!'); |
| } |
| }; |
| |
| function displayError(msg) { |
| clearInterval(fakeProgressInterval); |
| imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center; padding: 2rem;">خطا: ${msg}</div>`; |
| resetBtn(); |
| } |
| |
| function resetBtn() { |
| isSubmitting = false; |
| submitBtn.disabled = false; |
| promptInput.disabled = false; |
| document.getElementById('btn-text').style.display = 'inline-block'; |
| document.getElementById('btn-text').textContent = 'ایجاد کن'; |
| document.querySelector('.spinner').style.display = 'none'; |
| checkFormState(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', async () => { |
| userFingerprint = await getBrowserFingerprint(); |
| updateUIForSubscriptionStatus(userSubscriptionStatus); |
| |
| const canvas = document.getElementById('neural-network-canvas'); if (!canvas) return; const header = canvas.parentElement; const ctx = canvas.getContext('2d'); let particles = []; const particleCount = 20; const maxDistance = 100; const computedStyles = getComputedStyle(document.documentElement); const particleColor = computedStyles.getPropertyValue('--accent-primary').trim(); const lineColor = computedStyles.getPropertyValue('--text-tertiary').trim(); function resizeCanvas() { canvas.width = header.clientWidth; canvas.height = header.clientHeight; init(); } class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.3; this.vy = (Math.random() - 0.5) * 0.3; this.radius = 1.2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = particleColor; ctx.fill(); } } function init() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function connectParticles() { for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = lineColor; ctx.lineWidth = 0.2; ctx.globalAlpha = 1 - distance / maxDistance; ctx.stroke(); } } } ctx.globalAlpha = 1; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); connectParticles(); requestAnimationFrame(animate); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate(); |
| }); |
| </script> |
| </body> |
| </html> |
