| |
| <style> |
| #tts-app-container { |
| --color-primary: #4CAF50; |
| --color-danger: #f44336; |
| --color-white: #ffffff; |
| --color-gray: #f0f0f0; |
| } |
| |
| #tts-app-container { |
| position: relative; margin: 0; padding: 0; font-family: Arial, sans-serif; |
| text-align: center; direction: rtl; |
| background-color: var(--color-white); overflow: hidden; |
| height: 100vh; |
| height: 100dvh; |
| } |
| |
| body.tts-loading-active { overflow: hidden; } |
| |
| #tts-app-container .iframe-container { |
| position: fixed; top: 0; left: 0; width: 100%; |
| height: 100%; height: calc(var(--vh, 1vh) * 100); height: 100dvh; |
| overflow: hidden; z-index: 9998; |
| background-color: var(--color-gray); |
| padding-bottom: env(safe-area-inset-bottom); |
| box-sizing: border-box; |
| } |
| |
| #tts-app-container .iframe-container iframe { |
| position: absolute; top: 0; left: 0; width: 100%; height: 100%; |
| border: none; display: block; opacity: 0; |
| transition: opacity 1.2s ease-in; |
| overflow-y: scroll; -webkit-overflow-scrolling: touch; |
| background-color: var(--color-white); |
| } |
| #tts-app-container .iframe-container iframe.visible { opacity: 1; } |
| |
| #tts-app-container .loading { |
| position: absolute; top: 0; left: 0; width: 100%; height: 100%; |
| display: flex; flex-direction: column; align-items: center; justify-content: center; |
| background: var(--color-white); z-index: 10002; |
| opacity: 1; transition: opacity 1s ease-out; |
| } |
| #tts-app-container .loading.hidden { opacity: 0; pointer-events: none; } |
| |
| #loading-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } |
| |
| #tts-app-container .loading-content { |
| z-index: 2; display: flex; flex-direction: column; align-items: center; |
| gap: 20px; width: 80%; max-width: 400px; |
| } |
| |
| #tts-app-container .loading-text { font-size: 18px; font-weight: 500; color: #37474F; letter-spacing: 0.5px; min-height: 22px; } |
| #tts-app-container .loading-text::after { content: '_'; display: inline-block; margin-right: 5px; font-weight: 300; animation: tts-blink-cursor 0.9s infinite; color: #90A4AE; } |
| #tts-app-container .loading-text.finished::after { display: none; } |
| @keyframes tts-blink-cursor { 50% { opacity: 0; } } |
| |
| #tts-app-container .progress-bar-container { width: 100%; height: 4px; background-color: rgba(176, 190, 197, 0.2); border-radius: 4px; overflow: hidden; position: relative; } |
| #tts-app-container .progress-bar-fill { width: 0%; height: 100%; border-radius: 4px; transition: width 0.1s linear; background: linear-gradient(90deg, #B0BEC5, #78909C); } |
| |
| #tts-app-container .error-message { display: none; color: var(--color-danger); margin-top: 20px; font-size: 16px; text-align: center; } |
| #tts-app-container #retryButton { display: none; margin-top: 20px; padding: 10px 25px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #78909C, #546E7A); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: all 0.2s ease; } |
| </style> |
| <div id="tts-app-container"> |
| <div class="iframe-container"> |
| <div class="loading" id="loadingContainer"><canvas id="loading-canvas"></canvas> |
| <div class="loading-content"> |
| <div class="loading-text" id="typingText"></div> |
| <div class="progress-bar-container"> |
| <div class="progress-bar-fill" id="progressBar"></div> |
| </div> |
| <div class="error-message" id="errorMessage"></div> |
| <button id="retryButton">بارگذاری مجدد</button></div> |
| </div> |
| <iframe id="myIframe" sandbox="allow-scripts allow-same-origin allow-forms allow-modals" allow="clipboard-read; clipboard-write; microphone"></iframe></div> |
| </div> |
| <p> |
| <script> |
| (function() { |
| |
| const siteURL = 'https://sada745-rvc-pro.hf.space'; |
| const loadingMessage = "در حال بارگذاری استودیوی تغییر صدای آلفا"; |
| |
| const iframe = document.getElementById('myIframe'); |
| const progressBar = document.getElementById('progressBar'); |
| const retryButton = document.getElementById('retryButton'); |
| const errorMessage = document.getElementById('errorMessage'); |
| const loadingContainer = document.getElementById('loadingContainer'); |
| const typingTextElement = document.getElementById('typingText'); |
| const canvas = document.getElementById('loading-canvas'); |
| const ctx = canvas ? canvas.getContext('2d') : null; |
| |
| let animationFrameId, isIframeLoaded = false, isTypingComplete = false, isTransitionStarted = false, charIndex = 0, typingTimeout, loadingTimeout; |
| let particlesArray = []; |
| |
| function setVhVariable() { |
| let vh = window.innerHeight * 0.01; |
| document.documentElement.style.setProperty('--vh', `${vh}px`); |
| } |
| |
| |
| function resizeCanvas() { |
| if (canvas && canvas.parentElement) { |
| canvas.width = canvas.parentElement.clientWidth; |
| canvas.height = canvas.parentElement.clientHeight; |
| } |
| } |
| |
| class Particle { |
| constructor(x, y, s, c, sx, sy) { this.x = x; this.y = y; this.size = s; this.color = c; this.speedX = sx; this.speedY = sy; } |
| update() { |
| if (this.x > canvas.width || this.x < 0) this.speedX = -this.speedX; |
| if (this.y > canvas.height || this.y < 0) this.speedY = -this.speedY; |
| this.x += this.speedX; this.y += this.speedY; |
| } |
| draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } |
| } |
| |
| function initParticles() { |
| if (!canvas) return; |
| particlesArray = []; |
| const n = (canvas.width * canvas.height) / 9000; |
| for (let i = 0; i < n; i++) { |
| const s = Math.random() * 1.8 + 0.8; |
| const x = Math.random() * canvas.width; |
| const y = Math.random() * canvas.height; |
| const sx = (Math.random() * 0.3) - 0.15; |
| const sy = (Math.random() * 0.3) - 0.15; |
| particlesArray.push(new Particle(x, y, s, 'rgba(144, 164, 174, 0.6)', sx, sy)); |
| } |
| } |
| |
| function handleConnections() { |
| for (let a = 0; a < particlesArray.length; a++) { |
| for (let b = a; b < particlesArray.length; b++) { |
| const dx = particlesArray[a].x - particlesArray[b].x; |
| const dy = particlesArray[a].y - particlesArray[b].y; |
| const distance = Math.sqrt(dx * dx + dy * dy); |
| if (distance < 120) { |
| ctx.strokeStyle = `rgba(176, 190, 197, ${1 - (distance / 120)})`; |
| ctx.lineWidth = 0.8; |
| ctx.beginPath(); |
| ctx.moveTo(particlesArray[a].x, particlesArray[a].y); |
| ctx.lineTo(particlesArray[b].x, particlesArray[b].y); |
| ctx.stroke(); |
| } |
| } |
| } |
| } |
| |
| function animate() { |
| if (!ctx || !canvas) return; |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| for (const p of particlesArray) { p.update(); p.draw(); } |
| handleConnections(); |
| animationFrameId = requestAnimationFrame(animate); |
| } |
| |
| function typewriterEffect() { |
| if (charIndex < loadingMessage.length) { |
| typingTextElement.textContent += loadingMessage.charAt(charIndex); |
| charIndex++; |
| progressBar.style.width = `${(charIndex / loadingMessage.length) * 100}%`; |
| typingTimeout = setTimeout(typewriterEffect, 80); |
| } else { |
| typingTextElement.classList.add('finished'); |
| isTypingComplete = true; |
| triggerTransition(); |
| } |
| } |
| |
| function startLoadingAnimation() { |
| document.body.classList.add('tts-loading-active'); |
| if (animationFrameId) cancelAnimationFrame(animationFrameId); |
| if (typingTimeout) clearTimeout(typingTimeout); |
| loadingContainer.style.display = 'flex'; |
| loadingContainer.classList.remove('hidden'); |
| charIndex = 0; isIframeLoaded = false; isTypingComplete = false; isTransitionStarted = false; |
| typingTextElement.textContent = ''; |
| typingTextElement.classList.remove('finished'); |
| typingTextElement.style.display = 'block'; |
| progressBar.style.width = '0%'; |
| retryButton.style.display = 'none'; |
| errorMessage.style.display = 'none'; |
| iframe.classList.remove('visible'); |
| resizeCanvas(); initParticles(); animate(); typewriterEffect(); |
| } |
| |
| function stopLoadingAnimation() { |
| if (animationFrameId) cancelAnimationFrame(animationFrameId); |
| if (typingTimeout) clearTimeout(typingTimeout); |
| } |
| |
| function triggerTransition() { |
| if (isIframeLoaded && isTypingComplete && !isTransitionStarted) { |
| isTransitionStarted = true; |
| progressBar.style.width = '100%'; |
| setTimeout(() => { |
| document.body.classList.remove('tts-loading-active'); |
| loadingContainer.classList.add('hidden'); |
| setTimeout(() => { stopLoadingAnimation(); loadingContainer.style.display = 'none'; }, 1000); |
| iframe.classList.add('visible'); |
| }, 400); |
| } |
| } |
| |
| function iframeLoaded() { |
| if (loadingTimeout) clearTimeout(loadingTimeout); |
| isIframeLoaded = true; |
| triggerTransition(); |
| } |
| |
| function iframeError() { |
| if (loadingTimeout) clearTimeout(loadingTimeout); |
| stopLoadingAnimation(); |
| iframe.onload = null; |
| iframe.src = 'about:blank'; |
| iframe.classList.remove('visible'); |
| typingTextElement.style.display = 'none'; |
| errorMessage.style.display = 'block'; |
| errorMessage.innerHTML = 'بارگیری با مشکل مواجه شد.<br />اتصال اینترنت خود را بررسی و دوباره تلاش کنید.'; |
| retryButton.style.display = 'block'; |
| progressBar.style.width = '0%'; |
| } |
| |
| async function loadIframe() { |
| startLoadingAnimation(); |
| if (loadingTimeout) clearTimeout(loadingTimeout); |
| loadingTimeout = setTimeout(iframeError, 45000); |
| try { |
| await fetch(siteURL, { mode: 'no-cors', cache: 'no-store' }); |
| iframe.onload = iframeLoaded; |
| iframe.onerror = iframeError; |
| iframe.src = siteURL; |
| } catch (error) { |
| iframeError(); |
| } |
| } |
| |
| retryButton.addEventListener('click', () => { loadIframe(); }); |
| |
| |
| |
| window.addEventListener('message', function(event) { |
| if (!iframe || !iframe.contentWindow || event.source !== iframe.contentWindow) return; |
| const data = event.data || {}; |
| |
| if (data.type === 'REQUEST_USER_STATUS') { |
| try { |
| iframe.contentWindow.postMessage({ type: 'USER_STATUS_RESPONSE', payload: localStorage.getItem('user') }, '*'); |
| } catch (e) { |
| iframe.contentWindow.postMessage({ type: 'USER_STATUS_RESPONSE', payload: null, error: e.message }, '*'); |
| } |
| } |
| |
| if (data.type === 'NAVIGATE_TO_PREMIUM') { |
| const urlToNavigate = data.payload && data.payload.url; |
| if (urlToNavigate) window.top.location.href = urlToNavigate; |
| } |
| |
| if (data.type === 'OPEN_DOWNLOAD_LINK') { |
| const link = data.payload && data.payload.url; |
| if (link && /^https:\/\//i.test(link)) window.open(link, '_blank'); |
| } |
| }); |
| |
| setVhVariable(); |
| window.addEventListener('resize', () => { |
| setVhVariable(); |
| if (!loadingContainer.classList.contains('hidden')) { resizeCanvas(); initParticles(); } |
| }); |
| |
| loadIframe(); |
| })(); |
| </script> |
| </p> |
| |
|
|
