أدوات مطورين مجانية

<button onclick="openTool('python-runner')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🐍</span> <span class="tag text-xs">تشغيل</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">تشغيل بايثون</h3> <p class="text-gray-400 text-xs leading-relaxed">نفذ أكواد بايثون مباشرة في المتصفح مع Pyodide.</p> </button> <button onclick="openTool('js-playground')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">⚡</span> <span class="tag text-xs">تشغيل</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">JavaScript Playground</h3> <p class="text-gray-400 text-xs leading-relaxed">نفذ أكواد جافاسكربت فوراً في المتصفح.</p> </button> <button onclick="openTool('html-preview')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🌐</span> <span class="tag text-xs">معاينة</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">معاينة HTML/CSS/JS</h3> <p class="text-gray-400 text-xs leading-relaxed">اكتب HTML/CSS/JS وشاهد المعاينة المباشرة.</p> </button> <button onclick="openTool('json-formatter')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">📋</span> <span class="tag text-xs">تنسيق</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">منسق JSON</h3> <p class="text-gray-400 text-xs leading-relaxed">تنسيق وتحقق من صحة بيانات JSON مع تلوين.</p> </button> <button onclick="openTool('regex-tester')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🔍</span> <span class="tag text-xs">نصوص</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">اختبار Regex</h3> <p class="text-gray-400 text-xs leading-relaxed">اختبر التعبيرات النمطية مع تمييز التطابقات.</p> </button> <button onclick="openTool('color-picker')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🎨</span> <span class="tag text-xs">تصميم</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">منتقي الألوان</h3> <p class="text-gray-400 text-xs leading-relaxed">اختر الألوان وحوّل بين HEX, RGB, HSL.</p> </button> <button onclick="openTool('base64')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🔐</span> <span class="tag text-xs">تحويل</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">محول Base64</h3> <p class="text-gray-400 text-xs leading-relaxed">تشفير وفك تشفير النصوص من وإلى Base64.</p> </button> <button onclick="openTool('markdown-editor')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">📝</span> <span class="tag text-xs">تنسيق</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">محرر Markdown</h3> <p class="text-gray-400 text-xs leading-relaxed">اكتب Markdown وشاهد المعاينة مع دعم العربية.</p> </button> <button onclick="openTool('css-gradient')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🌈</span> <span class="tag text-xs">تصميم</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">مولد CSS Gradient</h3> <p class="text-gray-400 text-xs leading-relaxed">أنشئ تدرجات لونية جميلة وانسخ CSS.</p> </button> <button onclick="openTool('grid-builder')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">📐</span> <span class="tag text-xs">تصميم</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">Grid/Flexbox Builder</h3> <p class="text-gray-400 text-xs leading-relaxed">بناء تخطيطات Grid و Flexbox بصرياً.</p> </button> <button onclick="openTool('code-diff')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">📊</span> <span class="tag text-xs">نصوص</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">مقارنة الأكواد</h3> <p class="text-gray-400 text-xs leading-relaxed">قارن بين نسختين من الكود واكتشف الفروقات.</p> </button> <button onclick="openTool('ai-explainer')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🤖</span> <span class="tag text-xs">AI</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">شارح الأكواد بالعربي</h3> <p class="text-gray-400 text-xs leading-relaxed">الصق أي كود والذكاء الاصطناعي يشرحه بالعربي.</p> </button> <button onclick="openTool('jwt-decoder')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🔑</span> <span class="tag text-xs">تحويل</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">JWT Decoder</h3> <p class="text-gray-400 text-xs leading-relaxed">فك تشفير وتحليل رموز JWT.</p> </button> <button onclick="openTool('url-encoder')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🔗</span> <span class="tag text-xs">تحويل</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">محول URL</h3> <p class="text-gray-400 text-xs leading-relaxed">ترميز وفك ترميز عناوين URL.</p> </button> <button onclick="openTool('hash-generator')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">🛡️</span> <span class="tag text-xs">أمان</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">مولد Hash</h3> <p class="text-gray-400 text-xs leading-relaxed">توليد MD5, SHA-256 وأنواع أخرى.</p> </button> <button onclick="openTool('lorem-arabic')" class="glass-card p-5 text-right group cursor-pointer w-full"> <div class="flex items-center gap-3 mb-2"> <span class="text-2xl">📄</span> <span class="tag text-xs">نصوص</span> </div> <h3 class="font-bold text-white group-hover:text-purple-400 transition mb-1">نص عربي عشوائي</h3> <p class="text-gray-400 text-xs leading-relaxed">توليد نصوص عربية عشوائية للتصميم.</p> </button>