| | <!DOCTYPE html> |
| | <html lang="fa" dir="rtl"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| | <title>AI Subtitle Monster</title> |
| | <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;500;700;900&display=swap" rel="stylesheet"> |
| | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| | <style> |
| | :root { |
| | --bg-dark: #0f172a; |
| | --bg-card: #1e293b; |
| | --primary: #8b5cf6; |
| | --primary-glow: rgba(139, 92, 246, 0.5); |
| | --accent: #f43f5e; |
| | --text-main: #f8fafc; |
| | --text-muted: #94a3b8; |
| | --border: #334155; |
| | --success: #10b981; |
| | } |
| | |
| | * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; } |
| | |
| | body { |
| | font-family: 'Vazirmatn', sans-serif; |
| | background-color: var(--bg-dark); |
| | color: var(--text-main); |
| | margin: 0; |
| | padding: 0; |
| | overflow-x: hidden; |
| | min-height: 100vh; |
| | display: flex; |
| | flex-direction: column; |
| | } |
| | |
| | |
| | .bg-mesh { |
| | position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; |
| | background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%); |
| | overflow: hidden; |
| | } |
| | .blob { |
| | position: absolute; |
| | filter: blur(80px); |
| | opacity: 0.4; |
| | animation: float 10s infinite ease-in-out; |
| | } |
| | .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--primary); } |
| | .blob-2 { bottom: -10%; right: -10%; width: 40vw; height: 40vw; background: var(--accent); animation-delay: -5s; } |
| | @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 50px); } } |
| | |
| | .app-header { |
| | padding: 15px 20px; |
| | background: rgba(30, 41, 59, 0.8); |
| | backdrop-filter: blur(10px); |
| | border-bottom: 1px solid var(--border); |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | z-index: 100; |
| | position: sticky; |
| | top: 0; |
| | } |
| | .brand { font-weight: 900; font-size: 1.4rem; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; } |
| | |
| | .app-body { |
| | flex: 1; |
| | display: flex; |
| | flex-direction: column; |
| | padding: 20px; |
| | max-width: 800px; |
| | margin: 0 auto; |
| | width: 100%; |
| | } |
| | |
| | |
| | .view { display: none; animation: fadeIn 0.4s ease; } |
| | .view.active { display: block; } |
| | @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } |
| | |
| | .card { |
| | background: var(--bg-card); |
| | border: 1px solid var(--border); |
| | border-radius: 20px; |
| | padding: 25px; |
| | margin-bottom: 20px; |
| | box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3); |
| | } |
| | |
| | .btn { |
| | width: 100%; |
| | padding: 16px; |
| | border-radius: 14px; |
| | border: none; |
| | font-weight: 800; |
| | font-size: 1.1rem; |
| | cursor: pointer; |
| | transition: 0.2s; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | gap: 10px; |
| | color: white; |
| | } |
| | .btn-primary { |
| | background: linear-gradient(135deg, var(--primary), #4338ca); |
| | box-shadow: 0 0 20px var(--primary-glow); |
| | } |
| | .btn-primary:active { transform: scale(0.98); } |
| | |
| | |
| | .upload-zone { |
| | border: 2px dashed var(--border); |
| | border-radius: 20px; |
| | height: 300px; |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: center; |
| | align-items: center; |
| | cursor: pointer; |
| | transition: 0.3s; |
| | background: rgba(255,255,255,0.02); |
| | } |
| | .upload-zone:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); } |
| | .upload-icon { font-size: 4rem; margin-bottom: 20px; color: var(--text-muted); } |
| | |
| | |
| | .segment-container { |
| | max-height: 400px; |
| | overflow-y: auto; |
| | padding-right: 5px; |
| | margin-bottom: 25px; |
| | border: 1px solid var(--border); |
| | border-radius: 12px; |
| | padding: 10px; |
| | background: rgba(0,0,0,0.2); |
| | } |
| | |
| | .segment-row { |
| | background: rgba(255,255,255,0.03); |
| | border-radius: 12px; |
| | padding: 10px; |
| | margin-bottom: 10px; |
| | border-right: 3px solid transparent; |
| | } |
| | .segment-row:focus-within { border-right-color: var(--accent); background: rgba(255,255,255,0.06); } |
| | |
| | .seg-time { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; font-family: monospace; } |
| | |
| | .seg-input { |
| | width: 100%; |
| | background: rgba(0, 0, 0, 0.3); |
| | border: 1px solid var(--border); |
| | border-radius: 8px; |
| | color: #fff; |
| | font-size: 1.1rem; |
| | font-family: inherit; |
| | resize: vertical; |
| | padding: 10px; |
| | min-height: 60px; |
| | line-height: 1.5; |
| | } |
| | .seg-input:focus { border-color: var(--primary); background: rgba(0, 0, 0, 0.5); } |
| | |
| | .control-group { margin-bottom: 18px; } |
| | .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; } |
| | |
| | input[type="range"] { width: 100%; height: 6px; background: var(--border); border-radius: 5px; appearance: none; } |
| | input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; cursor: pointer; } |
| | input[type="color"] { width: 100%; height: 40px; border: none; border-radius: 8px; cursor: pointer; background: transparent; } |
| | |
| | .style-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; } |
| | .chip { |
| | padding: 8px 16px; background: var(--border); border-radius: 20px; |
| | font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: 0.2s; |
| | } |
| | .chip.active { background: rgba(99, 102, 241, 0.2); color: var(--primary); border: 1px solid var(--primary); } |
| | |
| | .preview-box { |
| | position: relative; width: 100%; aspect-ratio: 16/9; |
| | background: #000; border-radius: 12px; margin-bottom: 20px; |
| | display: flex; align-items: center; justify-content: center; overflow: hidden; |
| | background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop'); |
| | background-size: cover; |
| | } |
| | .preview-text { |
| | position: absolute; text-align: center; pointer-events: none; |
| | transition: 0.1s; line-height: 1.4; max-width: 80%; |
| | } |
| | |
| | #inlineResult { |
| | margin-top: 30px; |
| | border-top: 2px dashed var(--border); |
| | padding-top: 20px; |
| | text-align: center; |
| | display: none; |
| | animation: slideDown 0.5s ease; |
| | } |
| | @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } |
| | |
| | .result-video { width: 100%; border-radius: 12px; margin-top: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } |
| | .dl-btn { |
| | display: inline-block; margin-top: 15px; padding: 15px 30px; |
| | background: var(--success); color: white; text-decoration: none; |
| | border-radius: 12px; font-weight: bold; font-size: 1.1rem; |
| | box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3); |
| | } |
| | |
| | |
| | .loader-screen { |
| | position: fixed; top:0; left:0; width:100%; height:100%; |
| | background: rgba(15, 23, 42, 0.95); z-index: 1000; |
| | display: none; flex-direction: column; justify-content: center; align-items: center; |
| | } |
| | .loader-screen.flex { display: flex; } |
| | .spinner { width: 50px; height: 50px; border: 5px solid var(--border); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } |
| | @keyframes spin { 100% { transform: rotate(360deg); } } |
| | |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | <div class="bg-mesh"><div class="blob blob-1"></div><div class="blob blob-2"></div></div> |
| |
|
| | <div id="loader" class="loader-screen"> |
| | <div class="spinner"></div> |
| | <h3 id="loaderMsg">در حال پردازش...</h3> |
| | </div> |
| |
|
| | <header class="app-header"> |
| | <div class="brand"><i class="fa-solid fa-wand-magic-sparkles"></i> زیرنویس (آلفا)</div> |
| | </header> |
| |
|
| | <div class="app-body"> |
| | |
| | |
| | <div id="view-upload" class="view active"> |
| | <div style="max-width: 600px; margin: 40px auto;"> |
| | <div class="card"> |
| | <h2 style="text-align: center; color: var(--text-main);">آپلود ویدیو</h2> |
| | <div class="upload-zone" onclick="document.getElementById('fileIn').click()"> |
| | <i class="fa-solid fa-cloud-arrow-up upload-icon"></i> |
| | <h3>انتخاب فایل</h3> |
| | <input type="file" id="fileIn" hidden accept="video/*" onchange="handleUpload()"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="view-editor" class="view"> |
| | |
| | <div class="card"> |
| | |
| | |
| | <h2 style="color: var(--primary); margin-top:0;">🎨 تنظیمات ظاهری</h2> |
| | |
| | <div class="preview-box"> |
| | <div id="livePreview" class="preview-text">پیشنمایش متن</div> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>فونت</span></div> |
| | <div class="style-chips"> |
| | <div class="chip active" onclick="setFont('lalezar', this)">لاله زار (فا)</div> |
| | <div class="chip" onclick="setFont('vazir', this)">وزیر (فا)</div> |
| | <div class="chip" onclick="setFont('roboto', this)">Roboto (Eng)</div> |
| | <div class="chip" onclick="setFont('bangers', this)">Bangers (Eng)</div> |
| | </div> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>رنگ متن</span></div> |
| | <input type="color" id="colorMain" value="#FFFFFF" oninput="updatePreview()"> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>رنگ کادر</span></div> |
| | <input type="color" id="colorOutline" value="#000000" oninput="updatePreview()"> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>نوع کادر</span></div> |
| | <div class="style-chips"> |
| | <div class="chip active" onclick="setStyle('solid', this)">پُر رنگ</div> |
| | <div class="chip" onclick="setStyle('transparent', this)">شیشهای</div> |
| | <div class="chip" onclick="setStyle('outline', this)">حاشیه</div> |
| | </div> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>سایز متن</span> <span id="lblSize">100</span></div> |
| | <input type="range" id="rngSize" min="30" max="400" value="100" oninput="updatePreview()"> |
| | </div> |
| |
|
| | <div class="control-group"> |
| | <div class="control-label"><span>موقعیت عمودی</span></div> |
| | <input type="range" id="rngPos" min="10" max="600" value="150" oninput="updatePreview()"> |
| | </div> |
| |
|
| | <hr style="border-color: var(--border); margin: 30px 0;"> |
| | |
| | |
| | <h2 style="color: var(--text-main);">📝 ویرایش متنها</h2> |
| | <div id="segmentsList" class="segment-container"></div> |
| |
|
| | |
| | <button class="btn btn-primary" onclick="startRender()"> |
| | <i class="fa-solid fa-bolt"></i> ساخت ویدیو نهایی |
| | </button> |
| |
|
| | |
| | <div id="inlineResult"> |
| | <h3 style="color: var(--success); margin:0;">✅ ویدیو آماده شد!</h3> |
| | <video id="finalPlayer" controls class="result-video"></video> |
| | <a id="dlBtn" href="#" download class="dl-btn">دانلود ویدیو</a> |
| | </div> |
| |
|
| | </div> |
| |
|
| | </div> |
| |
|
| | </div> |
| |
|
| | <script> |
| | let appState = { |
| | fileId: null, |
| | segments: [], |
| | style: { |
| | backType: 'solid', |
| | font: 'lalezar' |
| | } |
| | }; |
| | |
| | |
| | const STORAGE_KEYS = ['colorMain', 'colorOutline', 'rngSize', 'rngPos']; |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | STORAGE_KEYS.forEach(key => { |
| | const val = localStorage.getItem(key); |
| | if(val) { |
| | document.getElementById(key).value = val; |
| | if(key === 'rngSize') document.getElementById('lblSize').innerText = val; |
| | } |
| | }); |
| | }); |
| | |
| | |
| | STORAGE_KEYS.forEach(key => { |
| | document.getElementById(key).addEventListener('input', (e) => { |
| | localStorage.setItem(key, e.target.value); |
| | }); |
| | }); |
| | |
| | |
| | async function handleUpload() { |
| | const file = document.getElementById('fileIn').files[0]; |
| | if(!file) return; |
| | |
| | showLoader("در حال استخراج متن..."); |
| | |
| | const formData = new FormData(); |
| | formData.append("file", file); |
| | |
| | try { |
| | const res = await fetch("/api/analyze", { method: "POST", body: formData }); |
| | const data = await res.json(); |
| | |
| | if(data.error) throw new Error(data.error); |
| | |
| | appState.fileId = data.file_id; |
| | appState.segments = data.segments; |
| | |
| | renderSegments(); |
| | |
| | document.getElementById('view-upload').classList.remove('active'); |
| | document.getElementById('view-editor').classList.add('active'); |
| | updatePreview(); |
| | |
| | window.scrollTo(0, 0); |
| | |
| | } catch(e) { |
| | alert("Error: " + e.message); |
| | } finally { |
| | hideLoader(); |
| | } |
| | } |
| | |
| | |
| | function renderSegments() { |
| | const container = document.getElementById('segmentsList'); |
| | container.innerHTML = ""; |
| | |
| | appState.segments.forEach((seg, idx) => { |
| | const div = document.createElement('div'); |
| | div.className = 'segment-row'; |
| | div.innerHTML = ` |
| | <div class="seg-time">${formatTime(seg.start)} -> ${formatTime(seg.end)}</div> |
| | <textarea class="seg-input" rows="1" oninput="updateSegment(${idx}, this)">${seg.text}</textarea> |
| | `; |
| | container.appendChild(div); |
| | }); |
| | } |
| | |
| | function updateSegment(idx, el) { |
| | appState.segments[idx].text = el.value; |
| | document.getElementById('livePreview').innerText = el.value; |
| | el.style.height = 'auto'; |
| | el.style.height = (el.scrollHeight) + 'px'; |
| | } |
| | |
| | function formatTime(s) { |
| | const m = Math.floor(s / 60); |
| | const sec = Math.floor(s % 60); |
| | return `${m}:${sec.toString().padStart(2, '0')}`; |
| | } |
| | |
| | |
| | function setStyle(type, el) { |
| | appState.style.backType = type; |
| | el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active')); |
| | el.classList.add('active'); |
| | updatePreview(); |
| | } |
| | |
| | function setFont(font, el) { |
| | appState.style.font = font; |
| | el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active')); |
| | el.classList.add('active'); |
| | updatePreview(); |
| | } |
| | |
| | function updatePreview() { |
| | const txt = document.getElementById('livePreview'); |
| | const size = document.getElementById('rngSize').value; |
| | const pos = document.getElementById('rngPos').value; |
| | const color = document.getElementById('colorMain').value; |
| | const outline = document.getElementById('colorOutline').value; |
| | |
| | let font = 'Vazirmatn'; |
| | if(appState.style.font === 'lalezar') font = 'Lalezar'; |
| | if(appState.style.font === 'roboto') font = 'Arial'; |
| | if(appState.style.font === 'bangers') font = 'Impact'; |
| | |
| | document.getElementById('lblSize').innerText = size; |
| | |
| | txt.style.fontFamily = font; |
| | txt.style.fontSize = (size / 5) + 'px'; |
| | txt.style.color = color; |
| | txt.style.bottom = (pos / 6) + 'px'; |
| | |
| | if(appState.style.backType === 'solid') { |
| | txt.style.backgroundColor = outline; |
| | txt.style.textShadow = 'none'; |
| | txt.style.padding = '2px 8px'; |
| | txt.style.borderRadius = '4px'; |
| | txt.style.webkitTextStroke = '0px'; |
| | } else if (appState.style.backType === 'transparent') { |
| | txt.style.backgroundColor = 'rgba(0,0,0,0.6)'; |
| | txt.style.textShadow = 'none'; |
| | txt.style.padding = '2px 8px'; |
| | txt.style.borderRadius = '4px'; |
| | txt.style.webkitTextStroke = '0px'; |
| | } else { |
| | txt.style.backgroundColor = 'transparent'; |
| | txt.style.webkitTextStroke = `1px ${outline}`; |
| | txt.style.textShadow = `0 0 2px ${outline}`; |
| | txt.style.padding = '0'; |
| | } |
| | } |
| | |
| | |
| | async function startRender() { |
| | document.getElementById('inlineResult').style.display = 'none'; |
| | showLoader("در حال ساخت ویدیو..."); |
| | |
| | const payload = { |
| | file_id: appState.fileId, |
| | segments: appState.segments, |
| | style: { |
| | font: appState.style.font, |
| | fontSize: parseInt(document.getElementById('rngSize').value), |
| | primaryColor: document.getElementById('colorMain').value, |
| | outlineColor: document.getElementById('colorOutline').value, |
| | backType: appState.style.backType, |
| | outlineWidth: 2.0, |
| | marginV: parseInt(document.getElementById('rngPos').value), |
| | alignment: 2 |
| | } |
| | }; |
| | |
| | try { |
| | const res = await fetch("/api/render", { |
| | method: "POST", |
| | headers: { "Content-Type": "application/json" }, |
| | body: JSON.stringify(payload) |
| | }); |
| | const data = await res.json(); |
| | |
| | if(data.error) throw new Error(data.error); |
| | |
| | const resultBox = document.getElementById('inlineResult'); |
| | resultBox.style.display = 'block'; |
| | |
| | document.getElementById('finalPlayer').src = data.url + "?t=" + Date.now(); |
| | document.getElementById('dlBtn').href = data.url; |
| | |
| | resultBox.scrollIntoView({behavior: 'smooth'}); |
| | |
| | } catch(e) { |
| | alert("Render Error: " + e.message); |
| | } finally { |
| | hideLoader(); |
| | } |
| | } |
| | |
| | function showLoader(msg) { |
| | document.getElementById('loaderMsg').innerText = msg; |
| | document.getElementById('loader').classList.add('flex'); |
| | } |
| | function hideLoader() { |
| | document.getElementById('loader').classList.remove('flex'); |
| | } |
| | |
| | </script> |
| | </body> |
| | </html> |
