هذا كود HTML كامل وجاهز للنشر على منصة بلوغر (Blogger). لقد قمت بتصميمه ليكون **عصرياً جداً (Modern)**، **متجاوباً مع جميع الشاشات (Responsive)**، ويحتوي على **خريطة تفاعلية** حقيقية باستخدام مكتبة Leaflet.js (وهي مكتبة مجانية ومفتوحة المصدر لا تتطلب مفاتيح API معقدة). ### تعليمات الاستخدام: 1. اذهب إلى لوحة تحكم بلوغر. 2. أنشئ "مشاركة جديدة" (New Post). 3. قم بتغيير وضع المحرر من "عرض الإنشاء" (Compose view) إلى **"عرض HTML" (HTML view)** (تجد الزر عادة على شكل قلم في الزاوية). 4. امسح أي كود موجود والصق الكود التالي بالكامل. 5. انشر الموضوع. ```html ``` ### مميزات هذا التصميم: 1. **تصميم داكن (Dark Mode):** يتناسب تماماً مع موضوع "الطاقة النووية" والتكنولوجيا، ويعطي انطباعاً بالاحترافية. 2. **خريطة تفاعلية:** * تستخدم خرائط داكنة أنيقة. * دوائر مشعة تعبر عن حجم الإنتاج (الدائرة الأكبر = إنتاج أكثر). * عند النقر على الدولة، تظهر نافذة منبثقة بالتفاصيل. 3. **بطاقات معلومات ذكية:** * أسفل الخريطة، توجد بطاقات لكل دولة تعرض العلم، العدد، والقدرة. * **ميزة تفاعلية رائعة:** عند تمرير الماوس (Hover) فوق "بطاقة الدولة" في الأسفل، تتحرك الخريطة تلقائياً (FlyTo Animation) لتركز على تلك الدولة وتفتح نافذة المعلومات الخاصة بها. 4. **اللغة:** محتوى باللغة الإنجليزية كما طلبت. 5. **خفيف وسريع:** لا يعتمد على صور ثقيلة، كل شيء مرسوم بالكود (CSS/JS).