💻 محرر الأكواد المتقدم

محرر أكواد احترافي مع معاينة مباشرة لـ HTML, CSS, JavaScript

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    max-width: 800px;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

h1 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.card {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.card h2 {
    color: #667eea;
    margin-bottom: 15px;
}

.card ul {
    list-style: none;
    padding-right: 20px;
}

.card li {
    padding: 8px 0;
    color: #555;
}

.card li::before {
    content: "✓ ";
    color: #667eea;
    font-weight: bold;
}

button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
}

المعاينة المباشرة

Console

تم الحفظ!

`; previewDoc.open(); previewDoc.write(code); previewDoc.close(); } function addConsoleLog(type, message) { const consoleDiv = document.getElementById('console'); const logDiv = document.createElement('div'); logDiv.className = `console-log console-${type}`; const timestamp = new Date().toLocaleTimeString(); logDiv.textContent = `[${timestamp}] ${message}`; consoleDiv.appendChild(logDiv); consoleDiv.scrollTop = consoleDiv.scrollHeight; } function clearConsole() { document.getElementById('console').innerHTML = ''; } function clearAll() { if (confirm('هل أنت متأكد من مسح جميع الأكواد؟')) { document.getElementById('htmlCode').value = ''; document.getElementById('cssCode').value = ''; document.getElementById('jsCode').value = ''; runCode(); showNotification('تم مسح جميع الأكواد'); } } function downloadCode() { const html = document.getElementById('htmlCode').value; const css = document.getElementById('cssCode').value; const js = document.getElementById('jsCode').value; const fullCode = ` My Project ${html} `; const blob = new Blob([fullCode], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'project.html'; a.click(); URL.revokeObjectURL(url); showNotification('تم تحميل المشروع بنجاح!'); } function toggleFullscreen() { const container = document.querySelector('.editor-container'); if (!document.fullscreenElement) { container.requestFullscreen(); } else { document.exitFullscreen(); } } function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function showNotification(message, type = 'success') { const notification = document.getElementById('notification'); const notificationText = document.getElementById('notificationText'); notification.className = `notification notification-${type}`; notificationText.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); }