Update static/js/editor.js

static/js/editor.js

@@ -1,45 +1,25 @@
-// منطق اصلی ادیتور (نمایش ویدیو، سینک متن، ابزارها)
-
-// --- تابع آپدیت گرافیکی نوار اسلایدر ---
+// --- تابع آپدیت گرافیکی نوار اسلایدر ظاهر ---
 function updateRange(input, labelId) {
     const label = document.getElementById(labelId);
-    if (label) {
-        label.innerText = input.value + '%';
-    }
-    const min = parseFloat(input.min);
-    const max = parseFloat(input.max);
-    const val = parseFloat(input.value);
+    if (label) label.innerText = input.value + '%';
+    const min = parseFloat(input.min), max = parseFloat(input.max), val = parseFloat(input.value);
     const percentage = ((val - min) / (max - min)) * 100;
     input.style.backgroundSize = percentage + '% 100%';
 }
 
-// --- هماهنگ‌سازی اسلایدرها با وضعیت (برای تاچ) ---
 function syncUIWithState() {
-    // 1. سایز: تبدیل پیکسل به درصد (با فرض ماکسیمم 150 پیکسل)
-    // فرمول معکوس: Percent = ((Pixel - 10) / 140) * 100
     let fzPercent = ((state.st.fz - 10) / 140) * 100;
     const fzInput = document.getElementById('fz');
-    if(fzInput) {
-        fzInput.value = Math.round(Math.max(0, Math.min(100, fzPercent)));
-        updateRange(fzInput, 'lbl-size');
-    }
+    if(fzInput) { fzInput.value = Math.round(Math.max(0, Math.min(100, fzPercent))); updateRange(fzInput, 'lbl-size'); }
 
-    // 2. موقعیت Y
     let yPercent = (state.st.y / 1200) * 100;
     const posInput = document.getElementById('pos');
-    if(posInput) {
-        posInput.value = Math.round(Math.max(0, Math.min(100, yPercent)));
-        updateRange(posInput, 'lbl-y');
-    }
+    if(posInput) { posInput.value = Math.round(Math.max(0, Math.min(100, yPercent))); updateRange(posInput, 'lbl-y'); }
 
-    // 3. موقعیت X
     let currentX = state.st.x || 0;
     let xPercent = (currentX / 500) * 100;
     const posXInput = document.getElementById('posX');
-    if(posXInput) {
-        posXInput.value = Math.round(Math.max(-100, Math.min(100, xPercent)));
-        updateRange(posXInput, 'lbl-x');
-    }
+    if(posXInput) { posXInput.value = Math.round(Math.max(-100, Math.min(100, xPercent))); updateRange(posXInput, 'lbl-x'); }
 }
 
 function openProject(projectId) {
@@ -51,60 +31,45 @@ function openProject(projectId) {
     req.onsuccess = (e) => {
         const p = e.target.result;
         if (!p) { alert('پروژه یافت نشد'); loadHome(); return; }
-        
         state = p.state;
         document.getElementById('currentProjectTitle').innerText = p.name;
         const videoURL = URL.createObjectURL(p.videoBlob);
         v.src = videoURL;
         
-        document.getElementById('col').value = state.st.col;
-        document.getElementById('bgCol').value = state.st.bg;
-
-        // تنظیم اولیه اسلایدرها
-        syncUIWithState();
+        syncUIWithState(); // اسلایدرها
         
         document.querySelectorAll('.font-btn').forEach(btn => btn.classList.remove('ticked'));
         if(state.st.f === 'vazir') document.querySelectorAll('.font-btn')[1].classList.add('ticked');
         else if(state.st.f === 'lalezar') document.querySelectorAll('.font-btn')[0].classList.add('ticked');
         
+        // استایل کارت
         document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected'));
         if(state.st.name === 'karaoke_static') {
-            const staticCard = Array.from(document.querySelectorAll('.style-card')).find(c => c.textContent.includes("هوشمند (ثابت)"));
+            const staticCard = Array.from(document.querySelectorAll('.style-card')).find(c => c.innerHTML.includes("ثابت"));
             if(staticCard) staticCard.classList.add('selected');
-            document.getElementById('staticColorPicker').value = state.st.col;
+        } else if (state.st.name === 'classic' || state.st.name === 'progressive_write') {
+             // پیدا کردن کارت مناسب در پنل کاستوم (اینجا پیش‌فرض را کلاسیک در نظر می‌گیریم اگر تطبیقی نبود)
+             const cards = document.querySelectorAll('.custom-style-container .style-card');
+             if(state.st.name === 'classic' && cards[0]) cards[0].classList.add('selected');
+             if(state.st.name === 'progressive_write' && cards[1]) cards[1].classList.add('selected');
         }
 
         document.getElementById('homeScreen').style.display = 'none';
         document.getElementById('editorScreen').style.display = 'flex';
-        
         renderSegList();
         fit();
         upd();
-        
-        v.onloadeddata = () => {
-            fit();
-            if(!p.thumbnail && v.duration > 1) {
-                 v.currentTime = 1.0; 
-                 let captured = false;
-                 v.addEventListener('seeked', function cap() {
-                     if(captured) return; captured = true; saveProjectToDB(); v.currentTime = 0;
-                 }, {once:true});
-            } else if (!p.thumbnail) { saveProjectToDB(); }
-        };
+        v.onloadeddata = () => { fit(); if(!p.thumbnail) saveProjectToDB(); };
     };
 }
 
 function goHome() { v.pause(); saveProjectToDB(); loadHome(); }
-
 function fit() { 
     if(!state.w) return; 
     const ws = document.getElementById('workspace'); 
-    const availableHeight = window.innerHeight * 0.6; 
-    const scale = Math.min((ws.clientWidth - 40) / state.w, availableHeight / state.h); 
-    const c = document.getElementById('videoContainer'); 
-    c.style.width = state.w + 'px'; c.style.height = state.h + 'px'; 
-    document.getElementById('scaler').style.transform = `scale(${scale})`; 
-    ws.style.height = (state.h * scale + 40) + 'px';
+    const scale = Math.min((ws.clientWidth - 40) / state.w, (window.innerHeight * 0.6) / state.h); 
+    const c = document.getElementById('videoContainer'); c.style.width = state.w + 'px'; c.style.height = state.h + 'px'; 
+    document.getElementById('scaler').style.transform = `scale(${scale})`; ws.style.height = (state.h * scale + 40) + 'px';
 }
 
 function activateCustomStyle() {
@@ -116,264 +81,207 @@ function activateCustomStyle() {
     }
 }
 
-function renderSegList() {
-    saveProjectToDB();
-    const timeline = document.getElementById('timelineScroll');
-    const spacers = timeline.querySelectorAll('.spacer');
-    timeline.innerHTML = '';
-    timeline.appendChild(spacers[0]); 
-
-    state.segs.forEach((seg, sIdx) => {
-        if (!seg.words || seg.words.length === 0) {
-            const wordsArr = seg.text.trim().split(/\s+/).filter(w => w.length > 0);
-            const duration = seg.end - seg.start;
-            const timePerWord = duration / Math.max(1, wordsArr.length);
-            let wStart = seg.start;
-            seg.words = wordsArr.map((wStr, i) => {
-                let wEnd = wStart + timePerWord;
-                if (i === wordsArr.length - 1) wEnd = seg.end;
-                let obj = { word: wStr, start: parseFloat(wStart.toFixed(2)), end: parseFloat(wEnd.toFixed(2)) };
-                wStart = wEnd;
-                return obj;
-            });
-        }
-
-        seg.words.forEach((w, wIdx) => {
-            const el = document.createElement('div');
-            el.className = 'word-chip';
-            el.innerText = w.word;
-            const uid = `${sIdx}-${wIdx}`;
-            el.id = `w-${uid}`;
-            
-            if (activeWordId === uid) el.classList.add('active');
-
-            el.onclick = (e) => {
-                e.stopPropagation();
-                highlightWord(sIdx, wIdx, true);
-            };
-            timeline.appendChild(el);
-        });
+/* =========================================
+   COLOR PICKER LOGIC (IMPORTED & ADAPTED)
+   ========================================= */
+let pickerState = { h: 0, s: 0, v: 100, a: 100 };
+let currentTarget = null;
+let savedColors = [];
+let isDragging = false;
+const spectrumArea = document.getElementById('spectrumArea');
+const spectrumHandle = document.getElementById('spectrumHandle');
+
+// تبدیل‌ها
+function rgbToHex(r,g,b) {
+    return "#" + ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1).toUpperCase();
+}
+function hexToRgb(hex) {
+    hex = (hex||'').replace('#','').trim();
+    if(hex.length === 3) hex = hex.split('').map(ch=>ch+ch).join('');
+    if(hex.length!==6) return {r:255,g:255,b:255};
+    return { r: parseInt(hex.substring(0,2),16), g: parseInt(hex.substring(2,4),16), b: parseInt(hex.substring(4,6),16) };
+}
+function hsvToRgb(h, s, v) {
+    s/=100; v/=100; let c=v*s, x=c*(1-Math.abs(((h/60)%2)-1)), m=v-c, r=0,g=0,b=0;
+    if(0<=h&&h<60){r=c;g=x;b=0}else if(60<=h&&h<120){r=x;g=c;b=0}else if(120<=h&&h<180){r=0;g=c;b=x}
+    else if(180<=h&&h<240){r=0;g=x;b=c}else if(240<=h&&h<300){r=x;g=0;b=c}else if(300<=h&&h<360){r=c;g=0;b=x}
+    return { r:Math.round((r+m)*255), g:Math.round((g+m)*255), b:Math.round((b+m)*255) };
+}
+function rgbToHsv(r, g, b) {
+    r/=255; g/=255; b/=255; let max=Math.max(r,g,b), min=Math.min(r,g,b), d=max-min, h=0, s=(max===0?0:d/max), v=max;
+    if(d!==0){ switch(max){ case r:h=(g-b)/d+(g<b?6:0);break; case g:h=(b-r)/d+2;break; case b:h=(r-g)/d+4;break; } h*=60; }
+    return {h, s:s*100, v:v*100};
+}
 
-        if (sIdx < state.segs.length - 1) {
-            const nl = document.createElement('div');
-            nl.className = 'newline-indicator';
-            nl.innerHTML = '<i class="fa-solid fa-arrow-turn-down" style="transform: rotate(90deg) scaleX(-1);"></i>';
-            timeline.appendChild(nl);
-        }
-    });
+// Picker Actions
+function openColorPicker(target, ev) {
+    if(ev) ev.stopPropagation();
+    currentTarget = target;
+    document.getElementById('pickerBackdrop').classList.add('active');
+    document.getElementById('colorPickerModal').classList.add('active');
+
+    // Read initial color from state
+    let hex = '#FFFFFF';
+    if(target === 'main') hex = state.st.col || '#FFFFFF';
+    if(target === 'bg') hex = state.st.bg || '#000000';
+    if(target === 'static') hex = state.st.col || '#A020F0';
+
+    const rgb = hexToRgb(hex);
+    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    pickerState = { h: hsv.h, s: hsv.s, v: hsv.v, a: 100 }; // فعلاً آلفا روی ۱۰۰ (یا اگه بخواید از استیت بخونید)
+
+    initSavedColors();
+    generateGrid();
+    switchTab('spectrum');
+}
 
-    timeline.appendChild(spacers[1]); 
-    updateSplitButton();
+function closePicker() {
+    document.getElementById('colorPickerModal').classList.remove('active');
+    document.getElementById('pickerBackdrop').classList.remove('active');
 }
 
-function highlightWord(sIdx, wIdx, showToolbar) {
-    activeWordId = `${sIdx}-${wIdx}`;
-    v.pause();
-    togglePlayIcon(false);
-    const seg = state.segs[sIdx];
-    const word = seg.words[wIdx];
-    
-    v.currentTime = word.start;
-    manualOverride = true; 
-    
-    updateOverlayContent(v.currentTime);
+function saveAndClosePicker() {
+    const rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    // برای سادگی فعلاً آلفا را در کد hex اعمال نمی‌کنیم اما اگه بخواید RGBA باشه باید لاجیک `upd` عوض شه
+    // سیستم شما بر اساس hex رنگ کار می‌کند:
     
-    document.querySelectorAll('.word-chip').forEach(c => c.classList.remove('active'));
-    const el = document.getElementById(`w-${activeWordId}`);
-    if(el) {
-        el.classList.add('active');
-        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    if (currentTarget === 'main') state.st.col = hex;
+    else if (currentTarget === 'bg') state.st.bg = hex;
+    else if (currentTarget === 'static') { 
+        state.st.col = hex; 
+        document.documentElement.style.setProperty('--static-color', hex); 
     }
     
-    if(showToolbar) document.getElementById('toolbar').classList.add('show');
-    updateSplitButton();
+    upd(); // Apply to preview
+    closePicker();
 }
 
-function playPreviewWord() {
-    if (!activeWordId) return;
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
-    const word = state.segs[sIdx].words[wIdx];
-
-    if(previewInterval) clearInterval(previewInterval);
-    v.pause();
-    v.currentTime = word.start;
-    
-    const icon = document.getElementById('btnPreviewPlay').querySelector('i');
-    icon.className = "fa-solid fa-pause";
-    v.play();
-    
-    previewInterval = setInterval(() => {
-        if(v.currentTime >= word.end) {
-            v.pause();
-            clearInterval(previewInterval);
-            icon.className = "fa-solid fa-play";
-            if (v.currentTime >= word.end) v.currentTime = word.end - 0.01;
-        }
-    }, 20);
+function switchTab(name) {
+    document.querySelectorAll('.picker-tab').forEach(t=>t.classList.remove('active'));
+    document.getElementById('tab-'+name).classList.add('active');
+    document.querySelectorAll('.view-section').forEach(v=>v.classList.remove('active-view'));
+    document.getElementById('view-'+name).classList.add('active-view');
+    syncAllUI();
 }
 
-function saveText() {
-    if (!activeWordId) return;
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
-    const val = document.getElementById('textInput').value.trim();
-    if (val) {
-        state.segs[sIdx].words[wIdx].word = val;
-        state.segs[sIdx].text = state.segs[sIdx].words.map(w => w.word).join(' ');
-        renderSegList();
-        highlightWord(sIdx, wIdx, true);
-    }
-    closeAllSheets();
+function handleSpectrum(e) {
+    const rect = spectrumArea.getBoundingClientRect();
+    let x = Math.max(0, Math.min((e.clientX||e.touches[0].clientX) - rect.left, rect.width));
+    let y = Math.max(0, Math.min((e.clientY||e.touches[0].clientY) - rect.top, rect.height));
+    spectrumHandle.style.left = x+'px'; spectrumHandle.style.top = y+'px';
+    pickerState.h = (x/rect.width)*360; pickerState.s = 100 - ((y/rect.height)*100);
+    syncAllUI();
 }
-
-function adjustTime(type, am) {
-    if(type === 'start') {
-        let v = parseFloat((tempStartTime + am).toFixed(2));
-        if(v < 0) v = 0;
-        if(v >= tempEndTime) v = parseFloat((tempEndTime - 0.1).toFixed(2));
-        tempStartTime = v;
-        document.getElementById('valStart').innerText = fmt(tempStartTime);
-    } else {
-        let v = parseFloat((tempEndTime + am).toFixed(2));
-        if(v <= tempStartTime) v = parseFloat((tempStartTime + 0.1).toFixed(2));
-        tempEndTime = v;
-        document.getElementById('valEnd').innerText = fmt(tempEndTime);
+spectrumArea.addEventListener('mousedown', e => { isDragging=true; handleSpectrum(e); });
+window.addEventListener('mousemove', e => { if(isDragging) handleSpectrum(e); });
+window.addEventListener('mouseup', () => isDragging=false);
+spectrumArea.addEventListener('touchstart', e => { isDragging=true; handleSpectrum(e.touches[0]); },{passive:false});
+window.addEventListener('touchmove', e => { if(isDragging){e.preventDefault(); handleSpectrum(e.touches[0]);} },{passive:false});
+window.addEventListener('touchend', () => isDragging=false);
+
+function updateBrightness() { pickerState.v = parseInt(document.getElementById('brightness-slider').value); syncAllUI(); }
+function updateAlpha() { pickerState.a = parseInt(document.getElementById('alpha-slider').value); syncAllUI(); }
+function updateFromHexInput() {
+    let val = document.getElementById('input-hex').value.replace('#','');
+    if(/^[0-9A-Fa-f]{6}$/.test(val)) {
+        let rgb = hexToRgb(val); let hsv = rgbToHsv(rgb.r,rgb.g,rgb.b);
+        pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v;
+        syncAllUI();
     }
 }
-
-function confirmTimeChanges() {
-    if (!activeWordId) return;
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
-    const seg = state.segs[sIdx];
-    seg.words[wIdx].start = tempStartTime;
-    seg.words[wIdx].end = tempEndTime;
-    if (wIdx === 0 && tempStartTime < seg.start) seg.start = tempStartTime;
-    if (wIdx === seg.words.length - 1 && tempEndTime > seg.end) seg.end = tempEndTime;
-    closeAllSheets();
-    renderSegList();
-    highlightWord(sIdx, wIdx, true);
+function updateRGBFromInputs() {
+    let r=parseInt(document.getElementById('input-r').value)||0, g=parseInt(document.getElementById('input-g').value)||0, b=parseInt(document.getElementById('input-b').value)||0;
+    let hsv=rgbToHsv(r,g,b); pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
 }
-function cancelTimeChanges() { closeAllSheets(); }
-
-function confirmDelete() {
-    if (!activeWordId) return;
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
-    const seg = state.segs[sIdx];
-    
-    seg.words.splice(wIdx, 1);
-    if (seg.words.length === 0) {
-        state.segs.splice(sIdx, 1);
-        activeWordId = null;
-        document.getElementById('toolbar').classList.remove('show');
-    } else {
-        seg.text = seg.words.map(w => w.word).join(' ');
-        activeWordId = null;
-        document.getElementById('toolbar').classList.remove('show');
-    }
-    
-    closeAllSheets();
-    renderSegList();
+function updateRGBFromSliders() {
+    let r=parseInt(document.getElementById('slider-r').value), g=parseInt(document.getElementById('slider-g').value), b=parseInt(document.getElementById('slider-b').value);
+    let hsv=rgbToHsv(r,g,b); pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
 }
 
-function toggleSplit() {
-    if (!activeWordId) return;
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
+function syncAllUI() {
+    let rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    let hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    let bg = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
     
-    if (wIdx === 0) {
-        if (sIdx > 0) {
-            const prevSeg = state.segs[sIdx - 1];
-            const currSeg = state.segs[sIdx];
-            prevSeg.words = prevSeg.words.concat(currSeg.words);
-            prevSeg.end = currSeg.end; 
-            prevSeg.text = prevSeg.words.map(w => w.word).join(' ');
-            state.segs.splice(sIdx, 1); 
-            const newWIdx = prevSeg.words.length - currSeg.words.length;
-            renderSegList();
-            highlightWord(sIdx - 1, newWIdx, true);
-        }
-    } else {
-        const seg = state.segs[sIdx];
-        const wordsFirstHalf = seg.words.slice(0, wIdx);
-        const wordsSecondHalf = seg.words.slice(wIdx);
-        seg.words = wordsFirstHalf;
-        seg.text = seg.words.map(w => w.word).join(' ');
-        seg.end = wordsFirstHalf[wordsFirstHalf.length-1].end;
-        const newSeg = {
-            text: wordsSecondHalf.map(w => w.word).join(' '),
-            start: wordsSecondHalf[0].start,
-            end: wordsSecondHalf[wordsSecondHalf.length-1].end,
-            words: wordsSecondHalf,
-            isHidden: false
-        };
-        state.segs.splice(sIdx + 1, 0, newSeg);
-        renderSegList();
-        highlightWord(sIdx + 1, 0, true);
+    // Sliders
+    document.getElementById('slider-r').value = document.getElementById('input-r').value = rgb.r;
+    document.getElementById('slider-g').value = document.getElementById('input-g').value = rgb.g;
+    document.getElementById('slider-b').value = document.getElementById('input-b').value = rgb.b;
+    document.getElementById('input-hex').value = hex.replace('#','');
+    document.getElementById('largeColorPreview').style.backgroundColor = bg;
+    document.getElementById('brightness-slider').value = Math.round(pickerState.v);
+    document.getElementById('alpha-slider').value = Math.round(pickerState.a);
+    document.getElementById('disp-brightness').innerText = Math.round(pickerState.v);
+    document.getElementById('disp-alpha').innerText = Math.round(pickerState.a);
+
+    // Spectrum Handle
+    if(!isDragging) {
+        spectrumHandle.style.left = (pickerState.h/360*100)+'%';
+        spectrumHandle.style.top = (100-pickerState.s)+'%';
     }
 }
 
-function updateSplitButton() {
-    const btn = document.getElementById('btnSplit');
-    if(!activeWordId) { btn.classList.remove('active-state'); return; }
-    const [sIdx, wIdx] = activeWordId.split('-').map(Number);
-    if (wIdx === 0 && sIdx > 0) {
-        btn.classList.add('active-state');
-        btn.style.transform = "rotate(180deg)";
-    } else {
-        btn.classList.remove('active-state');
-        btn.style.transform = ""; 
-    }
+// Saved Colors & Grid
+function initSavedColors() {
+    try { savedColors = JSON.parse(localStorage.getItem('mySavedColors')) || []; } catch{ savedColors=[]; }
+    renderSavedColors();
 }
-
-function togglePlay() { if(v.paused) { v.play(); togglePlayIcon(true); } else { v.pause(); togglePlayIcon(false); } }
-function togglePlayIcon(isPlaying) { const overlay = document.getElementById('playOverlay'); overlay.className = isPlaying ? 'playing' : ''; }
-
-function updateOverlayContent(currentTime) {
-    const idx = state.segs.findIndex(s => currentTime >= s.start && currentTime <= s.end); 
-    if(idx !== -1) { 
-        const seg = state.segs[idx]; 
-        if(seg.isHidden) { tEl.style.opacity = 0; } 
-        else { 
-            tEl.style.opacity = 1; 
-            if(state.st.name === 'auto_director' && seg.words) {
-                let html = ""; seg.words.forEach((w, i) => {
-                    let isActive = (currentTime >= w.start && currentTime <= w.end);
-                    let boxColor = (i % 2 === 0) ? '#00D7FF' : '#FF0080'; 
-                    if(isActive) html += `<span style="background-color: ${boxColor}; color: #ffffff !important; box-shadow: 0 0 15px ${boxColor}; transform: scale(1.1); display:inline-block; border-radius: 6px; padding: 0 6px; text-shadow:none; font-family: inherit;">${w.word}</span> `;
-                    else html += `<span style="color: #ffffff !important; text-shadow:none; font-family: inherit;">${w.word}</span> `;
-                }); tEl.innerHTML = html;
-            } 
-            else if(state.st.name === 'karaoke_static' && seg.words) { 
-                let html = ""; seg.words.forEach(w => { 
-                    let isActive = (currentTime >= w.start && currentTime <= w.end); let cls = isActive ? "word-active" : ""; 
-                    let styleAttr = ""; if(isActive) { let boxColor = state.st.col; styleAttr = `style="background-color: ${boxColor} !important; color: #fff !important; box-shadow: 0 2px 8px ${boxColor};"`; } 
-                    html += `<span class="${cls}" ${styleAttr}>${w.word}</span> `; 
-                }); tEl.innerHTML = html; 
-            } 
-            else if (state.st.name === 'progressive_write' && seg.words) { 
-                let html = ""; seg.words.forEach(w => { if(currentTime >= w.start) html += `<span style="opacity:1">${w.word}</span> `; else html += `<span style="opacity:0">${w.word}</span> `; }); tEl.innerHTML = html.trim(); 
-            } 
-            else { tEl.innerText = seg.text; } 
-        } 
-    } else { tEl.style.opacity = 0; } 
+function saveCurrentColor() {
+    let rgb = hsvToRgb(pickerState.h, pickerState.s, pickerState.v);
+    savedColors.push(rgbToHex(rgb.r, rgb.g, rgb.b));
+    localStorage.setItem('mySavedColors', JSON.stringify(savedColors));
+    renderSavedColors();
+    document.getElementById('toastNotification').classList.add('show');
+    setTimeout(()=>document.getElementById('toastNotification').classList.remove('show'), 2000);
+}
+function renderSavedColors() {
+    const c = document.getElementById('savedColorsContainer');
+    // keep only save button
+    while(c.children.length > 1) c.removeChild(c.lastChild);
+    savedColors.forEach((hex, i) => {
+        let d = document.createElement('div'); d.className='saved-color-wrapper';
+        d.innerHTML = `<div class="saved-circle" style="background:${hex}" onclick="loadColor('${hex}')"></div><div class="mini-delete-btn" onclick="deleteColor(${i})"><i class="fa-solid fa-xmark"></i></div>`;
+        c.appendChild(d);
+    });
+}
+function deleteColor(i) {
+    savedColors.splice(i, 1); localStorage.setItem('mySavedColors', JSON.stringify(savedColors)); renderSavedColors();
+}
+function loadColor(hex) {
+    let rgb = hexToRgb(hex); let hsv = rgbToHsv(rgb.r,rgb.g,rgb.b);
+    pickerState.h=hsv.h; pickerState.s=hsv.s; pickerState.v=hsv.v; syncAllUI();
+}
+function generateGrid() {
+    const cont = document.getElementById('gridContainer'); cont.innerHTML='';
+    const colors = ['#FFFFFF','#000000','#FF3B30','#FF9500','#FFCC00','#34C759','#00C7BE','#32ADE6','#007AFF','#5856D6','#AF52DE','#FF2D55'];
+    // Generate palette
+    for(let h=0; h<360; h+=15) {
+        let rgb = hsvToRgb(h, 80, 90);
+        colors.push(rgbToHex(rgb.r, rgb.g, rgb.b));
+    }
+    colors.forEach(hex => {
+        let d = document.createElement('div'); d.className='grid-item'; d.style.background=hex;
+        d.onclick=()=>{loadColor(hex)}; cont.appendChild(d);
+    });
 }
 
+// ------------------------------------
+// Original UPD Logic (Synced)
+// ------------------------------------
 function upd() {
     saveProjectToDB();
-    
-    // خواندن مقادیر از اسلایدرهای درصدی
-    const uiFz = parseFloat(document.getElementById('fz').value); // 0 to 100
-    const uiY = parseFloat(document.getElementById('pos').value); // 0 to 100
-    const uiX = parseFloat(document.getElementById('posX').value); // -100 to 100
-    
-    // تبدیل ریاضی به پیکسل
-    // فرمول جدید: ماکسیمم 150 پیکسل (نصف 300) برای جلوگیری از بزرگ شدن بیش از حد
+    const uiFz = parseFloat(document.getElementById('fz').value);
+    const uiY = parseFloat(document.getElementById('pos').value);
+    const uiX = parseFloat(document.getElementById('posX').value);
     state.st.fz = Math.round(10 + (uiFz / 100) * 140); 
-    
     state.st.y = Math.round((uiY / 100) * 1200);       
-    state.st.x = Math.round((uiX / 100) * 500);        
+    state.st.x = Math.round((uiX / 100) * 500);
+
+    // Apply color button previews
+    document.getElementById('preview-main-btn').style.backgroundColor = state.st.col || '#fff';
+    document.getElementById('preview-bg-btn').style.backgroundColor = state.st.bg || '#000';
 
-    if (state.st.name !== 'karaoke_static') state.st.col = document.getElementById('col').value;
-    state.st.bg = document.getElementById('bgCol').value;
-    
     let font = 'Vazirmatn';
     if(state.st.f === 'lalezar') font = 'Lalezar'; if(state.st.f === 'bangers') font = 'Impact'; if(state.st.f === 'roboto') font = 'Arial';
     
@@ -382,66 +290,47 @@ function upd() {
     tEl.style.bottom = state.st.y + 'px'; 
     tEl.style.textAlign = 'center'; 
     tEl.style.left = '50%'; 
-    
-    // اعمال جابجایی افقی (X)
     tEl.style.transform = `translateX(calc(-50% + ${state.st.x}px))`; 
-    
-    tEl.style.paintOrder = 'normal'; tEl.style.webkitPaintOrder = 'normal'; tEl.style.borderRadius = '0px';
+    tEl.style.borderRadius = '0px';
 
     if(state.st.name === 'karaoke_static' || state.st.name === 'auto_director') {
         tEl.style.backgroundColor = 'transparent'; tEl.style.color = '#FFFFFF'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
     } else if (state.st.name === 'plain_white') {
         tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none';
     } else if (state.st.name === 'white_outline') {
-        tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
+        tEl.style.color = '#FFFFFF'; tEl.style.backgroundColor = 'transparent'; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitTextStroke = `${s}px #000000`; tEl.style.textShadow = 'none';
     } else {
         tEl.style.color = state.st.col;
         if(state.st.type === 'solid') { tEl.style.backgroundColor = state.st.bg; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.borderRadius = '12px'; } 
         else if (state.st.type === 'transparent') {
-            let c = state.st.bg.replace('#', ''); let r = parseInt(c.substring(0, 2), 16); let g = parseInt(c.substring(2, 4), 16); let b = parseInt(c.substring(4, 6), 16);
-            tEl.style.backgroundColor = `rgba(${r},${g},${b},0.6)`; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.borderRadius = '12px';
+            let c = state.st.bg.replace('#', ''); 
+            if(c.length===6) {
+                let r = parseInt(c.substring(0, 2), 16); let g = parseInt(c.substring(2, 4), 16); let b = parseInt(c.substring(4, 6), 16);
+                tEl.style.backgroundColor = `rgba(${r},${g},${b},0.6)`; 
+            } else { tEl.style.backgroundColor = state.st.bg; } // fallback
+            tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; tEl.style.borderRadius = '12px';
         } else if (state.st.type === 'outline') {
-            tEl.style.backgroundColor = 'transparent'; tEl.style.color = state.st.col; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`; tEl.style.paintOrder = 'stroke fill'; tEl.style.webkitPaintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
+            tEl.style.backgroundColor = 'transparent'; tEl.style.color = state.st.col; const s = Math.max(3, state.st.fz / 4.5); tEl.style.webkitTextStroke = `${s}px ${state.st.bg}`; tEl.style.paintOrder = 'stroke fill'; tEl.style.textShadow = 'none';
         } else { tEl.style.backgroundColor = 'transparent'; tEl.style.webkitTextStroke = '0px'; tEl.style.textShadow = 'none'; }
     }
 }
 
-function openStaticColorPicker(event) { event.stopPropagation(); document.getElementById('staticColorPicker').click(); }
-function updateStaticColor(val) { document.documentElement.style.setProperty('--static-color', val); state.st.col = val; document.getElementById('col').value = val; upd(); }
-
 function setStylePreset(name, el, skipModeSet = false) { 
     state.st.name = name; 
     document.querySelectorAll('.style-card').forEach(c => c.classList.remove('selected')); 
     if(el) el.classList.add('selected'); 
-    
     if(name === 'karaoke_static' && !skipModeSet) { 
-        const defaultPurple = '#A020F0'; 
-        state.st.col = defaultPurple; 
-        document.documentElement.style.setProperty('--static-color', defaultPurple); 
-        document.getElementById('staticColorPicker').value = defaultPurple; 
-        document.getElementById('col').value = defaultPurple; 
+        state.st.col = '#A020F0'; 
+        document.documentElement.style.setProperty('--static-color', '#A020F0'); 
     }
-    
-    if(name === 'classic' && !skipModeSet) { 
-        setMode('solid'); 
-    } else if (name === 'progressive_write') {
-        setMode('none'); 
-    } else if (name === 'plain_white' || name === 'white_outline') { 
-        state.st.col = '#FFFFFF'; 
-        state.st.bg = '#000000'; 
-        document.getElementById('col').value = '#FFFFFF'; 
-        document.getElementById('bgCol').value = '#000000'; 
-        setMode('outline'); 
+    if(name === 'classic' && !skipModeSet) setMode('solid'); 
+    else if (name === 'progressive_write') setMode('none'); 
+    else if (name === 'plain_white' || name === 'white_outline') { 
+        state.st.col = '#FFFFFF'; state.st.bg = '#000000'; setMode('outline'); 
     }
     upd(); 
 }
 
-function handleClassicDoubleClick(element) {
-    event.stopPropagation();
-    activateCustomStyle();
-    setStylePreset('classic', element, true);
-    setMode('none');
-}
-
+function handleClassicDoubleClick(element) { event.stopPropagation(); activateCustomStyle(); setStylePreset('classic', element, true); setMode('none'); }
 function setFont(f, el) { document.querySelectorAll('.font-btn').forEach(btn => btn.classList.remove('ticked')); el.classList.add('ticked'); state.st.f = f; upd(); }
 function setMode(m) { state.st.type = m; syncModeButtons(); upd(); }