تحرير كود html ,css و Javascript l مباشرة

<!-- رسالة ترحيب --> <div class="content"> <h2>مرحباً بك في محررنا المباشر</h2> <p>هذه <strong>أداة مجانية على الإنترنت</strong> من مركز الأدوات المجانية.</p> <p>جرب تعديل أي من لوحات الأكواد لترى النتائج الفورية!</p> <!-- عنصر تفاعلي كمثال --> <div class="feature-list"> <h3>ميزاتنا:</h3> <ul> <li>معاينة في الوقت الفعلي</li> <li>لا حاجة للتثبيت</li> <li>مجاني بالكامل</li> <li>مثالي للتعلم والاختبار</li> </ul> </div> </div>

/* إعادة الضبط الأساسية */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(to left, #f5f7fa, #c3cfe2); padding: 20px; } .content { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } h2 { color: #1a2a6c; margin-bottom: 20px; text-align: center; font-size: 2.2rem; } p { margin-bottom: 15px; font-size: 1.1rem; } .feature-list { margin-top: 25px; background: #f8f9fa; padding: 20px; border-radius: 8px; border-right: 4px solid #1a2a6c; } .feature-list h3 { color: #1a2a6c; margin-bottom: 15px; } .feature-list ul { list-style-type: none; } .feature-list li { padding: 8px 0; padding-right: 30px; position: relative; } .feature-list li:before { content: "✓"; color: #1a2a6c; font-weight: bold; position: absolute; right: 10px; }

// ميزات تفاعلية بسيطة للتوضيح document.addEventListener('DOMContentLoaded', function() { // إنشاء رسالة ترحيب const welcomeMessage = document.createElement('div'); welcomeMessage.innerHTML = '<p style="text-align: center; margin-top: 20px; padding: 10px; background: #e3f2fd; border-radius: 5px;"><strong>نصيحة:</strong> جرب تغيير أي كود لترى النتائج المباشرة!</p>'; document.querySelector('.content').appendChild(welcomeMessage); // إضافة تفاعل لعناصر القائمة const listItems = document.querySelectorAll('.feature-list li'); listItems.forEach(item => { item.addEventListener('click', function() { this.style.backgroundColor = '#e3f2fd'; this.style.transition = 'background-color 0.3s'; setTimeout(() => { this.style.backgroundColor = ''; }, 500); }); }); // إضافة زر بسيط const button = document.createElement('button'); button.textContent = 'انقر هنا!'; button.style.display = 'block'; button.style.margin = '20px auto'; button.style.padding = '10px 20px'; button.style.background = '#1a2a6c'; button.style.color = 'white'; button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.addEventListener('click', function() { alert('شكراً لاستخدامك أداتنا المجانية على الإنترنت!'); }); document.querySelector('.content').appendChild(button); });