برومبت تحويل الصور إلى Base64 جاهز

أنت مطوّر واجهات أمامية أول، ولديك خبرة قوية في ترميز الصور بصيغة Base64، وعرض HTML، وتصميم واجهات وتجربة المستخدم UI/UX. أنشئ تطبيق ويب من صفحة واحدة يعمل بالكامل من جهة العميل، باستخدام HTML وCSS وJavaScript الصافية فقط، ويفضّل أن يكون كاملًا داخل ملف HTML واحد، بدون Backend وبدون مكتبات خارجية.

صمّم التطبيق بثيم عصري أسود داكن، ومتجاوب بالكامل مع مختلف أحجام الشاشات. يجب أن يحوّل الموقع الصور بصيغ JPG/PNG/WEBP إلى Base64 بشكل صحيح، وأن يضمن عمل الناتج داخل أي معاينة في محرر HTML. لذلك يجب أن يوفّر التطبيق ناتجين أساسيين:

1. رابط Data URL بصيغة Base64 الخام.
2. وسم HTML جاهز للاستخدام للصورة، مثل: `<img src="data:image/jpeg;base64,..." />`، بحيث عند نسخه ولصقه في محرر HTML تظهر الصورة بصريًا بدل أن يظهر النص فقط.

ضمّن داخل التطبيق مسارين رئيسيين:

1. Image to Base64
- رفع صورة أو سحبها وإفلاتها داخل التطبيق.
- عرض معاينة فورية للصورة داخل الصفحة.
- اكتشاف نوع MIME بشكل صحيح.
- أزرار نسخ واضحة لكل ناتج.
- خيار اختياري لتحميل الناتج كملف .txt.

2. Base64 to Image Preview
- يستطيع المستخدم لصق Data URL كامل أو Base64 خام.
- عند الضغط على زر Preview تظهر الصورة بشكل مرئي.
- تصحيح MIME تلقائيًا قدر الإمكان.
- عرض رسائل تحقق واضحة ومفهومة عند وجود خطأ.

متطلبات الواجهة:
- يجب أن يعرض الهيدر العنوان: “Convert images ↔ Base64 with HTML-ready output”.
- مباشرة أسفل العنوان، اعرض “prompts.chat” بخط عريض ولون أخضر فوسفوري، واجعله رابطًا إلى: https://promts.chat.
- يجب أن يستبدل الفوتر أي نص افتراضي بعبارة “2026” بخط عريض ولون أخضر فوسفوري، وأن تكون رابطًا إلى: https://promts.chat.
- اجعل التصميم العام باللون الأسود الداكن.
- اجعل جميع الأزرار الأساسية باللون البرتقالي الداكن مع توهج خفيف وتأثير Hover ناعم.
- استخدم انتقالات سلسة، وبطاقات بزوايا دائرية، وفصلًا واضحًا بين الأقسام سواء عبر Tabs أو Cards.
- حافظ على تباين ألوان مناسب وسهل القراءة.
- أضف تنبيه نجاح واضح عند النسخ.
- تعامل مع سلاسل Base64 الطويلة جدًا بدون تجميد الواجهة.
- تأكد أن تجربة الاستخدام ممتازة على سطح المكتب والتابلت والجوال.