`; } async function runCode(){ const lang = langSel.value; const code = editor.value || ''; if(lang==='html'){ setPane('iframe'); modeHint.textContent = 'HTML — iframe sandbox'; const url = URL.createObjectURL(new Blob([code], {type:'text/html'})); runPane.src = url; setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='css'){ setPane('iframe'); modeHint.textContent = 'CSS — ملف HTML تجريبي'; const html = buildHTMLfromCSS(code); const url = URL.createObjectURL(new Blob([html], {type:'text/html'})); runPane.src = url; setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='js'){ setPane('iframe'); modeHint.textContent = 'JavaScript — ملف HTML تجريبي'; const html = buildHTMLfromJS(code); const url = URL.createObjectURL(new Blob([html], {type:'text/html'})); runPane.src = url; setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='json'){ setPane('text'); modeHint.textContent = 'JSON — فحص/تهيئة'; try{ const parsed = JSON.parse(code); outputBox.textContent = JSON.stringify(parsed, null, 2); }catch(e){ outputBox.textContent = '❌ JSON غير صالح:\n' + e.toString(); } } else if(lang==='py'){ setPane('text'); modeHint.textContent = 'Python — Pyodide'; outputBox.textContent = '⏳ تحميل بيئة بايثون…'; try{ const pyodide = await loadPyodideOnce(); outputBox.textContent = ''; // التقاط stdout/stderr let out=''; const origStdout = pyodide._module.print; const origStderr = pyodide._module.printErr; pyodide._module.print = (s)=>{ out += s + "\n"; }; pyodide._module.printErr = (s)=>{ out += s + "\n"; }; try{ await pyodide.runPythonAsync(code); }catch(e){ out += '\n❌ خطأ: ' + e.toString(); } outputBox.textContent = out || '✔️ تم التنفيذ بدون مخرجات'; pyodide._module.print = origStdout; pyodide._module.printErr = origStderr; envBadge.textContent = 'Pyodide جاهز'; }catch(e){ outputBox.textContent = 'تعذر تحميل Pyodide: ' + e.toString(); envBadge.textContent = 'تعذر تحميل البيئة'; } } } // ====== Pyodide (تحميل عند الطلب) ====== let _pyodidePromise = null; async function loadPyodideOnce(){ if(_pyodidePromise) return _pyodidePromise; envBadge.textContent = 'يتم تحميل Pyodide…'; const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js'; document.head.appendChild(script); _pyodidePromise = new Promise((resolve, reject)=>{ script.onload = async ()=>{ try{ const py = await loadPyodide({indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.24.1/full/'}); resolve(py); } catch(e){ reject(e); } }; script.onerror = ()=> reject(new Error('فشل تحميل سكربت pyodide.js')); }); return _pyodidePromise; } // ====== واجهة المستخدم ====== function onLangChange(){ const lang = langSel.value; ensureFilenameExt(); // توجيه المحرر: لغات الترميز يسار إلى يمين غالبًا editor.style.direction = (lang==='html' || lang==='css' || lang==='js' || lang==='json' || lang==='py') ? 'ltr' : 'rtl'; // تلميح الوضع const hints = { html:'HTML — iframe sandbox', css:'CSS — iframe demo', js:'JavaScript — iframe demo', json:'JSON — validate/pretty', py:'Python — Pyodide' }; modeHint.textContent = hints[lang] || ''; // عين قوالب سريعة عند التبديل إذا كان المحرر فارغ if(!editor.value.trim()) applySnippet('blank'); } function applySnippet(kind){ const lang = langSel.value; let snip = ''; if(lang==='html'){ snip = kind==='demo' ? `\n\n\n\n\n\n\n\n\n

مرحبًا ✨

\n

هذا مثال HTML داخل المعاينة.

\n زر تنبيه\n\n` : '\n\n\n \n \n \n \n\n\n \n\n'; } else if(lang==='css'){ snip = kind==='demo' ? `body{background:#0b0f14;color:#e7eef7;font-family:system-ui}\n.card{padding:12px;border:1px solid #334155;border-radius:12px}` : `/* اكتب CSS هنا */`; } else if(lang==='js'){ snip = kind==='demo' ? `console.log('Hello from JS');\ndocument.getElementById('app')?.insertAdjacentHTML('beforeend','

تم حقن نص بواسطة JS

');` : `/* اكتب JavaScript هنا */`; } else if(lang==='json'){ snip = kind==='demo' ? `{"name":"مثال","version":"1.0.0","items":[1,2,3]}` : `{"key":"value"}`; } else if(lang==='py'){ snip = kind==='demo' ? `import sys\nprint('Hello from Python ' + sys.version)\nfor i in range(3):\n print('سطر', i)` : `# اكتب كود بايثون هنا\nprint('Hello')`; } editor.value = snip; updateStats(); autosave(); } // أحداث editor.addEventListener('input', ()=>{ updateStats(); autosave(); }); fileInput.addEventListener('change', (e)=>{ const f = e.target.files?.[0]; openFile(f); fileInput.value=''; }); runBtn.addEventListener('click', runCode); clearBtn.addEventListener('click', ()=>{ editor.value=''; updateStats(); autosave(); }); saveBtn.addEventListener('click', downloadFile); newBtn.addEventListener('click', ()=>{ editor.value=''; applySnippet('blank'); updateStats(); autosave(); }); // تبويبات القوالب السريعة document.getElementById('starterTab').addEventListener('click', (e)=>{ const btn = e.target.closest('.tab'); if(!btn) return; [...e.currentTarget.children].forEach(b=>b.classList.remove('active')); btn.classList.add('active'); applySnippet(btn.dataset.snippet); }); langSel.addEventListener('change', ()=>{ onLangChange(); autosave(); }); filename.addEventListener('input', autosave); // سحب وإفلات window.addEventListener('dragover', e=>{ e.preventDefault(); }); window.addEventListener('drop', e=>{ e.preventDefault(); const f = e.dataTransfer.files?.[0]; openFile(f); }); // اختصارات لوحة المفاتيح window.addEventListener('keydown', (e)=>{ if(e.ctrlKey && (e.key==='s' || e.key==='S')){ e.preventDefault(); downloadFile(); } if(e.ctrlKey && (e.key==='o' || e.key==='O')){ e.preventDefault(); fileInput.click(); } if(e.ctrlKey && (e.key==='n' || e.key==='N')){ e.preventDefault(); newBtn.click(); } if(e.ctrlKey && e.key==='Enter'){ e.preventDefault(); runBtn.click(); } }); // أدوات الإخراج document.getElementById('copyOutput').addEventListener('click', ()=>{ const txt = outputBox.classList.contains('hidden') ? '' : outputBox.textContent; if(!txt){ return; } const ta = document.createElement('textarea'); ta.value = txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); }); document.getElementById('openNewTab').addEventListener('click', ()=>{ const lang = langSel.value; const code = editor.value || ''; if(lang==='html'){ const url = URL.createObjectURL(new Blob([code], {type:'text/html'})); window.open(url, '_blank'); setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='css'){ const url = URL.createObjectURL(new Blob([buildHTMLfromCSS(code)], {type:'text/html'})); window.open(url, '_blank'); setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='js'){ const url = URL.createObjectURL(new Blob([buildHTMLfromJS(code)], {type:'text/html'})); window.open(url, '_blank'); setTimeout(()=> URL.revokeObjectURL(url), 2000); } else if(lang==='json'){ const txt = (()=>{ try{ return JSON.stringify(JSON.parse(code), null, 2); }catch(e){ return '❌ JSON غير صالح\n'+e.toString(); } })(); const url = URL.createObjectURL(new Blob([`

${txt.replace(/`], {type:'text/html'})); window.open(url, '_blank'); setTimeout(()=> URL.revokeObjectURL(url), 2000);
      } else if(lang==='py'){
        alert('لفتح بايثون في تبويب مستقل، انسخ الكود يدويًا حاليًا. (يمكن لاحقًا إنشاء صفحة خاصة لبايثون)');
      }
    });

    // تهيئة
    function boot(){ onLangChange(); restore(); updateStats(); ensureFilenameExt(); editor.spellcheck=false; editor.wrap='off'; editor.placeholder = 'اكتب الكود هنا…'; }
    document.addEventListener('DOMContentLoaded', boot);

    // ملاحظات أمان: تشغيل JavaScript يتم داخل iframe مع sandbox=allow-scripts لمنع الوصول إلى الصفحة الأصلية.