مختبرات الرامي

[ramiht8-prog]

‏🧪 بوابة المختبرات التعليمية – ثانوية قريش
‏
‏🎯 الهدف
‏
‏منصة داخلية لدعم المعلمين والمحضّرين في تنفيذ وتوثيق التجارب العملية وربطها بخطط الفصل، مع إمكانية التصدير والتحليل وتوفير البديل.
‏
‏🧭 الأقسام الرئيسية
‏
‏1. 📚 خطط التجارب الفصلية
‏
‏خطة فيزياء 2 (الصف الثاني الثانوي)
‏خطة فيزياء 3 (الصف الثالث الثانوي)
‏خطة الكيمياء 1 (الصف الأول الثانوي)
‏خطة الكيمياء 2 (الصف الثاني الثانوي)
‏خطة الكيمياء 3 (الصف الثالث الثانوي)
‏الأحياء
‏علم الأرض
‏
‏2. 📝 نماذج تنفيذ التجارب
‏
‏نموذج قابل للتكرار لكل معلم يحتوي على:
‏
‏شعار المدرسة
‏تاريخ اليوم تلقائيًا
‏اسم المعلم (اختياري)
‏الشعبة
‏الفصل الدراسي
‏أسبوع التنفيذ أو الوقت المستغرق
‏اختيار التجربة من قائمة
‏طريقة التنفيذ
‏مكان التنفيذ
‏أسباب عدم التنفيذ
‏توقيع المعلم أو اسمه (اختياري)
‏رفع مرفقات (صور أو مستندات)
‏تقييم ذاتي من المعلم (اختيارات وصفية)
‏تعليقات إضافية
‏تحديد المواد المستهلكة
‏من أضاف المواد (المحضّر أو المعلم)
‏الكمية المستخدمة
‏نوع الوحدة (مل، جرام، قطعة...)
‏إمكانية تصدير البيانات
‏عبارة ختامية: "تمت مراجعة النموذج من قبل محضّر المختبر"
‏
‏3. 📦 نموذج حصر المواد والأدوات
‏
‏يرتبط تلقائيًا بنماذج تنفيذ التجارب ويشمل:
‏
‏اسم المحضر
‏المواد المستهلكة
‏الأدوات غير المتوفرة
‏إمكانية التصدير إلى Excel
‏
‏4. 👨‍🔬 أعمال المحضرين
‏
‏مكتبة خاصة بالمحضّر تحتوي على:
‏
‏تقارير أسبوعية
‏نماذج تجهيز المواد
‏سجل الأدوات
‏ملاحظات فنية
‏إمكانية تصدير البيانات
‏
‏5. 📊 لوحة متابعة التجارب
‏
‏جدول تفاعلي يعرض:
‏
‏عدد التجارب المنفذة لكل معلم
‏نسبة التنفيذ لكل مادة
‏التجارب غير المنفذة وأسبابها
‏إمكانية التصفية حسب الأسبوع أو المادة أو المعلم
‏
‏6. الافتراضية لتعويض التجارب العملية (بروابط مباشرة)
‏
‏تم تجميع هذه المحاكيات بناءً على التوصيات الواردة في خطط الفيزياء، الكيمياء، والأحياء، وهي توفر بدائل تفاعلية عالية الجودة للتجارب التي تتطلب مواد حرجة أو أجهزة غير متوفرة.
‏
‏أولاً: محاكيات الكيمياء (Chemistry Simulations)
‏
‏اسم التجربة المنهجية / المفهوم
‏المحاكي المقترح
‏رابط المحاكي المباشر (PhET)
‏ملاحظات الاستخدام
‏
‏ثانياً: محاكيات الفيزياء (Physics Simulations)
‏
‏اسم التجربة المنهجية / المفهوم
‏المحاكي المقترح
‏رابط المحاكي المباشر (PhET)
‏ملاحظات الاستخدام
‏
‏ثالثاً: محاكيات الأحياء (Biology Simulations)
‏
‏اسم التجربة المنهجية / المفهوم
‏المحاكي المقترح
‏رابط المحاكي المباشر
‏ملاحظات الاستخدام
‏
‏🔐 صلاحيات الوصول
‏
‏المعلمون: تعبئة النماذج فقط
‏المحضرون: إدارة النماذج والبيانات
‏الإدارة المدرسية: عرض وتحليل البيانات
‏
‏🔗 روابط سريعة
‏
‏نموذج تنفيذ تجربة
‏نموذج حصر المواد
‏خطة الفصلية فيزياء 2
‏خطة الفصلية فيزياء 3
‏خطة الفصلية كيمياء 1
‏خطة الفصلية كيمياء 2
‏خطة الفصلية كيمياء 3
‏مكتبة المحضرين
‏لوحة المتابعة
‏
‏📌 ملاحظات
‏
‏جميع النماذج مرتبطة بمنصة Microsoft Forms وExcel Online
‏يتم التحديث التلقائي للبيانات عبر Power Automate
‏يمكن تخصيص الصفحة حسب احتياجات المدرسة أو مكتب التعليم
‏
‏إعداد
‏
‏رامي محمد العتيبي – محضّر مختبرات ثانوية قريش
‏

[ramiht8-prog]

<title>حفظ البيانات في Firestore</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f7f9fb; color: #1f2937; direction: rtl; /* لضمان الاتجاه من اليمين لليسار */ } /* إخفاء عناصر واجهة التطبيق عند الطباعة، وترك البيانات فقط */ @media print { #app > div > * { display: none !important; } #print-content { display: block !important; } } </style>

<div id="app" class="min-h-screen p-4 sm:p-8 flex items-center justify-center">
    <div class="w-full max-w-xl bg-white rounded-xl shadow-2xl p-6 sm:p-10 border border-gray-100">
        <h1 class="text-3xl font-extrabold text-indigo-600 mb-2">حفظ بياناتك</h1>
        <p class="text-gray-500 mb-6 text-sm">التطبيق يستخدم قاعدة بيانات سحابية (Firestore) لحفظ بياناتك بشكل آمن وخاص بك.</p>

        <div id="loading-container" class="text-center p-8 hidden">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mx-auto mb-3"></div>
            <p class="text-indigo-600 font-medium">جارٍ التحميل والتوثيق...</p>
        </div>

        <div id="main-content" class="hidden">
            <div class="mb-6 bg-indigo-50 p-3 rounded-lg text-sm text-indigo-800">
                <p class="font-bold mb-1">معلومات الحساب:</p>
                <p>معرّف المستخدم (userId): <span id="user-id" class="font-mono text-xs break-all text-indigo-700"></span></p>
            </div>
            
            <!-- إدخال البيانات -->
            <div class="mb-8">
                <label for="user-data-input" class="block text-sm font-medium text-gray-700 mb-2">البيانات التي تريد حفظها:</label>
                <textarea id="user-data-input" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 transition duration-150" placeholder="اكتب هنا الملاحظات أو البيانات التي تريد حفظها..."></textarea>
                <button id="save-button" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-xl transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 flex items-center justify-center disabled:bg-indigo-400">
                    <span id="save-button-text">حفظ البيانات</span>
                    <svg id="save-spinner" class="animate-spin h-5 w-5 mr-3 text-white hidden" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </button>
                <p id="message" class="mt-3 text-sm text-center font-medium"></p>
            </div>

            <!-- البيانات المحفوظة -->
            <div class="mt-10 pt-6 border-t border-gray-200">
                <h2 class="text-xl font-bold text-gray-800 mb-4">بياناتك المحفوظة مؤخراً:</h2>
                <div id="saved-data-container" class="bg-gray-50 p-4 rounded-lg border border-gray-200 min-h-20">
                    <p id="saved-data-display" class="whitespace-pre-wrap text-sm text-gray-700"></p>
                    <p id="empty-state" class="text-gray-400 italic text-center text-sm hidden">لم يتم حفظ أي بيانات بعد.</p>
                </div>
                
                <!-- الأزرار الجديدة للإخراج -->
                <div class="mt-4 flex gap-4">
                    <button id="copy-button" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-xl transition duration-300 text-sm focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 shadow-md">
                        نسخ البيانات
                    </button>
                    <button id="print-button" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-xl transition duration-300 text-sm focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 shadow-md">
                        طباعة كتقرير
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- محتوى مخفي للطباعة فقط -->
<div id="print-content" class="hidden"></div>


<!-- Firebase SDKs -->
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
    import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
    import { getFirestore, doc, setDoc, onSnapshot, setLogLevel } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

    // إعداد المتغيرات العالمية من البيئة
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');
    const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

    let app;
    let db;
    let auth;
    let userId = null;
    let isAuthReady = false;

    const DATA_COLLECTION = 'user_data'; 
    const DOCUMENT_ID = 'current_data'; 

    // عناصر واجهة المستخدم
    const loadingContainer = document.getElementById('loading-container');
    const mainContent = document.getElementById('main-content');
    const userIdDisplay = document.getElementById('user-id');
    const dataInput = document.getElementById('user-data-input');
    const saveButton = document.getElementById('save-button');
    const saveButtonText = document.getElementById('save-button-text');
    const saveSpinner = document.getElementById('save-spinner');
    const messageDisplay = document.getElementById('message');
    const savedDataDisplay = document.getElementById('saved-data-display');
    const emptyState = document.getElementById('empty-state');
    // العناصر الجديدة
    const copyButton = document.getElementById('copy-button');
    const printButton = document.getElementById('print-button');
    const printContentDiv = document.getElementById('print-content');

    // عرض رسالة مؤقتة
    function displayMessage(text, isError = false) {
        messageDisplay.textContent = text;
        messageDisplay.className = `mt-3 text-sm text-center font-medium ${isError ? 'text-red-600' : 'text-green-600'}`;
        setTimeout(() => {
            messageDisplay.textContent = '';
            messageDisplay.className = 'mt-3 text-sm text-center font-medium';
        }, 3000);
    }

    // عرض حالة التحميل على الزر
    function toggleSaveLoading(isLoading) {
        saveButton.disabled = isLoading;
        if (isLoading) {
            saveButtonText.textContent = 'جارٍ الحفظ...';
            saveSpinner.classList.remove('hidden');
        } else {
            saveButtonText.textContent = 'حفظ البيانات';
            saveSpinner.classList.add('hidden');
        }
    }

    // 1. التهيئة والتوثيق
    async function initializeFirebase() {
        loadingContainer.classList.remove('hidden');
        try {
            setLogLevel('Debug');
            
            app = initializeApp(firebaseConfig);
            db = getFirestore(app);
            auth = getAuth(app);

            onAuthStateChanged(auth, async (user) => {
                if (user) {
                    userId = user.uid;
                    userIdDisplay.textContent = userId;
                    isAuthReady = true;
                    loadingContainer.classList.add('hidden');
                    mainContent.classList.remove('hidden');
                    
                    setupDataListener();
                } else {
                    try {
                        if (initialAuthToken) {
                            await signInWithCustomToken(auth, initialAuthToken);
                        } else {
                            await signInAnonymously(auth);
                        }
                    } catch (error) {
                        console.error("Authentication failed:", error);
                        displayMessage('فشل التوثيق. الرجاء المحاولة مرة أخرى.', true);
                        loadingContainer.classList.add('hidden');
                    }
                }
            });

        } catch (error) {
            console.error("Firebase initialization failed:", error);
            displayMessage(`فشل تهيئة Firebase: ${error.message}`, true);
        }
    }

    // 2. تحديد مسار الوثيقة الخاصة بالمستخدم
    function getUserDataDocRef() {
        if (!db || !userId) return null;
        // المسار الخاص: /artifacts/{appId}/users/{userId}/{collectionName}/{documentId}
        const path = `artifacts/${appId}/users/${userId}/${DATA_COLLECTION}/${DOCUMENT_ID}`;
        return doc(db, path);
    }

    // 3. حفظ البيانات (استخدام setDoc لكتابة/تحديث نفس الوثيقة)
    async function saveData() {
        if (!isAuthReady || !userId) {
            displayMessage('الرجاء الانتظار حتى اكتمال التوثيق.', true);
            return;
        }

        const dataToSave = dataInput.value.trim();
        if (!dataToSave) {
            displayMessage('الرجاء كتابة بعض البيانات لحفظها.', true);
            return;
        }

        toggleSaveLoading(true);
        const docRef = getUserDataDocRef();
        if (!docRef) {
            displayMessage('خطأ في إعداد مرجع قاعدة البيانات.', true);
            toggleSaveLoading(false);
            return;
        }

        try {
            await setDoc(docRef, { 
                content: dataToSave,
                timestamp: new Date()
            }, { merge: true });

            displayMessage('تم حفظ البيانات بنجاح!');
        } catch (error) {
            console.error("Error saving data:", error);
            displayMessage(`فشل الحفظ: ${error.message}`, true);
        } finally {
            toggleSaveLoading(false);
        }
    }

    // 4. مراقبة البيانات المحفوظة وعرضها (onSnapshot)
    function setupDataListener() {
        if (!db || !userId) return;

        const docRef = getUserDataDocRef();
        if (!docRef) return;

        onSnapshot(docRef, (docSnapshot) => {
            if (docSnapshot.exists()) {
                const data = docSnapshot.data();
                const content = data.content || '';
                
                savedDataDisplay.textContent = content;
                dataInput.value = content;
                emptyState.classList.add('hidden');
            } else {
                savedDataDisplay.textContent = '';
                dataInput.value = '';
                emptyState.classList.remove('hidden');
            }
        }, (error) => {
            console.error("Error listening to data:", error);
            savedDataDisplay.textContent = `خطأ في تحميل البيانات: ${error.message}`;
            emptyState.classList.add('hidden');
            dataInput.value = 'تعذر تحميل البيانات المحفوظة.';
        });
    }
    
    // 5. وظيفة النسخ إلى الحافظة (Copy to Clipboard)
    function copyData() {
        const dataToCopy = savedDataDisplay.textContent;
        if (!dataToCopy.trim()) {
            displayMessage('لا توجد بيانات لنسخها.', true);
            return;
        }
        
        // استخدام طريقة execCommand للنسخ في بيئة iframe
        const tempTextarea = document.createElement('textarea');
        tempTextarea.value = dataToCopy;
        tempTextarea.style.position = 'fixed'; 
        tempTextarea.style.opacity = '0'; // إخفاء العنصر
        document.body.appendChild(tempTextarea);
        tempTextarea.select();
        
        try {
            document.execCommand('copy');
            displayMessage('تم نسخ البيانات إلى الحافظة بنجاح!');
        } catch (err) {
            console.error('Failed to copy text: ', err);
            displayMessage('فشل في النسخ. يرجى النسخ يدوياً.', true);
        }
        document.body.removeChild(tempTextarea);
    }

    // 6. وظيفة الطباعة (Print)
    function printData() {
        const dataToPrint = savedDataDisplay.textContent;

        if (!dataToPrint.trim()) {
            displayMessage('لا توجد بيانات لطباعتها.', true);
            return;
        }
        
        // إنشاء محتوى الطباعة في div مخفي
        printContentDiv.innerHTML = `
            <div style="padding: 30px; direction: rtl; font-family: 'Inter', sans-serif;">
                <h1 style="font-size: 28px; font-weight: bold; margin-bottom: 20px; color: #1f2937;">تقرير البيانات المحفوظة (${new Date().toLocaleDateString('ar-SA')})</h1>
                <pre style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.6;">${dataToPrint}</pre>
                <p style="margin-top: 40px; font-size: 12px; color: #6b7280; border-top: 1px solid #ccc; padding-top: 10px;">معرّف المستخدم: ${userId}</p>
            </div>
        `;
        
        // تفعيل الطباعة
        window.print();
    }


    // ربط الأحداث
    saveButton.addEventListener('click', saveData);
    copyButton.addEventListener('click', copyData);
    printButton.addEventListener('click', printData);

    // بدء التهيئة
    initializeFirebase();

</script>

[ramiht8-prog]

import React, { useState } from 'react';
import {
FlaskConical,
ClipboardList,
ShieldAlert,
Stethoscope,
Flame,
Droplets,
CheckCircle,
AlertTriangle,
Menu,
X,
Thermometer,
Wind,
DoorOpen,
Eye,
Activity,
Box,
Ban
} from 'lucide-react';

const SchoolLabGuide = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);

const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

const scrollToSection = (id) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
setIsMenuOpen(false);
}
};

const navItems = [
{ id: 'duties', label: 'مهام المحضر', icon: },
{ id: 'safety', label: 'السلامة والمختبر', icon: },
{ id: 'firstaid', label: 'الإسعافات الأولية', icon: },
{ id: 'chemicals', label: 'المواد الكيميائية', icon: },
{ id: 'solutions', label: 'تحضير المحاليل', icon: },
{ id: 'fire', label: 'مكافحة الحريق', icon: },
];

return (

{/* Navigation */}

دليل المختبرات

        {/* Desktop Menu */}
        <div className="hidden md:flex items-center space-x-reverse space-x-4">
          {navItems.map((item) => (
            <button
              key={item.id}
              onClick={() => scrollToSection(item.id)}
              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-cyan-600 hover:bg-cyan-50 transition-colors"
            >
              {item.icon}
              {item.label}
            </button>
          ))}
        </div>

        {/* Mobile Menu Button */}
        <div className="md:hidden flex items-center">
          <button
            onClick={toggleMenu}
            className="p-2 rounded-md text-slate-600 hover:text-cyan-600 focus:outline-none"
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>
    </div>

    {/* Mobile Menu Dropdown */}
    {isMenuOpen && (
      <div className="md:hidden bg-white border-t">
        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          {navItems.map((item) => (
            <button
              key={item.id}
              onClick={() => scrollToSection(item.id)}
              className="flex items-center gap-3 w-full text-right px-3 py-2 rounded-md text-base font-medium text-slate-600 hover:text-cyan-600 hover:bg-cyan-50"
            >
              {item.icon}
              {item.label}
            </button>
          ))}
        </div>
      </div>
    )}
  </nav>

  {/* Hero Section */}
  <div className="bg-gradient-to-br from-cyan-600 to-blue-800 text-white py-20 px-4 text-center relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-full opacity-10">
      <FlaskConical size={400} className="absolute -left-20 -bottom-20 transform rotate-12" />
    </div>
    <div className="max-w-4xl mx-auto relative z-10">
      <h1 className="text-4xl md:text-6xl font-bold mb-6">دليل المختبرات المدرسية الشامل</h1>
      <p className="text-xl md:text-2xl text-cyan-100 mb-8 font-light">خلاصة شاملة للسلامة والكفاءة المهنية</p>
      <div className="inline-block bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full border border-white/20">
        <p>مرجع أساسي لمعلمي الكيمياء ومحضري المختبرات</p>
      </div>
    </div>
  </div>

  {/* Intro Section */}
  <div className="max-w-4xl mx-auto px-4 py-12 text-center">
    <p className="text-lg text-slate-600 leading-relaxed">
      تم إعداد هذا الدليل ليكون مرجعاً أساسياً في مدارس المملكة. يهدف إلى تعزيز بيئة عمل آمنة وفعالة، ويقدم خلاصة مركزة لأهم الإجراءات والمعايير المعتمدة لضمان سلامة الطلاب وتميز الأداء المخبري.
    </p>
  </div>

  {/* Duties Section */}
  <section id="duties" className="py-16 bg-white">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex items-center gap-3 mb-10 border-r-4 border-cyan-500 pr-4">
        <ClipboardList className="text-cyan-600" size={32} />
        <h2 className="text-3xl font-bold text-slate-800">أولاً: المحضر وواجباته</h2>
      </div>

      <div className="grid md:grid-cols-2 gap-8">
        {/* Admin Duties */}
        <div className="bg-slate-50 p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
          <h3 className="text-xl font-bold text-blue-800 mb-4 flex items-center gap-2">
            <span className="bg-blue-100 p-2 rounded-lg"><ClipboardList size={20} /></span>
            المهام الإدارية
          </h3>
          <ul className="space-y-3">
            {[
              'استلام عهدة المختبر وتسجيلها وفق الإجراءات الرسمية.',
              'التنسيق مع الإدارة لتوفير المواد والأجهزة الناقصة.',
              'تنظيم السجلات لتوثيق التجارب واستهلاك المواد.',
              'إعداد الملفات (النواقص، الاستهلاك، التعاميم).',
              'المشاركة في جرد العهدة بنهاية العام.'
            ].map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-slate-700">
                <CheckCircle className="text-green-500 mt-1 flex-shrink-0" size={16} />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Technical Duties */}
        <div className="bg-slate-50 p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
          <h3 className="text-xl font-bold text-cyan-800 mb-4 flex items-center gap-2">
            <span className="bg-cyan-100 p-2 rounded-lg"><FlaskConical size={20} /></span>
            المهام الفنية
          </h3>
          <ul className="space-y-3">
            {[
              'تهيئة وتجهيز المختبر للتجارب العملية.',
              'حفظ الأدوات والمواد وتصنيفها بدقة في الخزانات.',
              'تنظيف آثار التجارب وإعادة ترتيب الأدوات.',
              'التأكد من سلامة الأدوات والأجهزة عند الاستلام.'
            ].map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-slate-700">
                <CheckCircle className="text-green-500 mt-1 flex-shrink-0" size={16} />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>

  {/* Safety Section */}
  <section id="safety" className="py-16 bg-slate-100">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex items-center gap-3 mb-10 border-r-4 border-cyan-500 pr-4">
        <ShieldAlert className="text-cyan-600" size={32} />
        <h2 className="text-3xl font-bold text-slate-800">ثانياً: السلامة في المختبر</h2>
      </div>

      <div className="grid md:grid-cols-2 gap-8">
        <div className="bg-white p-6 rounded-xl shadow-sm">
          <h3 className="text-lg font-bold text-slate-800 mb-4 border-b pb-2">المواصفات الأساسية للمختبر الآمن</h3>
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="bg-orange-100 p-2 rounded text-orange-600"><DoorOpen /></div>
              <div>
                <p className="font-semibold">الموقع والمخارج</p>
                <p className="text-sm text-slate-600">الدور الأرضي، مخرجان للطوارئ يفتحان للخارج.</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="bg-blue-100 p-2 rounded text-blue-600"><Wind /></div>
              <div>
                <p className="font-semibold">التهوية</p>
                <p className="text-sm text-slate-600">نظام تهوية جيد وخزانة سحب غازات (Fume Hood).</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="bg-red-100 p-2 rounded text-red-600"><AlertTriangle /></div>
              <div>
                <p className="font-semibold">تجهيزات السلامة</p>
                <p className="text-sm text-slate-600">نافورة غسيل عيون، دش، طفايات وبطانيات حريق.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border-l-4 border-red-400">
          <h3 className="text-lg font-bold text-slate-800 mb-4 border-b pb-2">قواعد سلوك صارمة</h3>
          <ul className="space-y-2">
            <li className="flex items-center gap-2 text-red-700 font-medium">
              <Ban size={18} /> يمنع الأكل والشرب والمزاح والجري.
            </li>
            <li className="flex items-center gap-2 text-red-700 font-medium">
              <Ban size={18} /> يمنع سحب المواد الكيميائية بالفم.
            </li>
            <li className="flex items-center gap-2 text-red-700 font-medium">
              <Ban size={18} /> يمنع العمل منفرداً دون إشراف.
            </li>
            <li className="flex items-center gap-2 text-green-700 font-medium mt-4">
              <CheckCircle size={18} /> الالتزام بأدوات الحماية (نظارة، قفاز، معطف).
            </li>
            <li className="flex items-center gap-2 text-green-700 font-medium">
              <CheckCircle size={18} /> الإبلاغ الفوري عن أي حادث.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  {/* First Aid Section */}
  <section id="firstaid" className="py-16 bg-white">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex items-center gap-3 mb-10 border-r-4 border-red-500 pr-4">
        <Stethoscope className="text-red-600" size={32} />
        <h2 className="text-3xl font-bold text-slate-800">ثالثاً: الإسعافات الأولية</h2>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Cut/Bleeding */}
        <div className="bg-red-50 p-4 rounded-lg border border-red-100">
          <Activity className="text-red-500 mb-2" size={32} />
          <h4 className="font-bold text-lg mb-2">الجروح والنزيف</h4>
          <p className="text-sm text-slate-700">اضغط بقطعة قماش نظيفة، ارفع العضو المصاب. لا تنزع القماش إذا تشبع بالدم بل أضف فوقه. انقل للمستشفى.</p>
        </div>
        {/* Acid Burns */}
        <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
          <AlertTriangle className="text-yellow-600 mb-2" size={32} />
          <h4 className="font-bold text-lg mb-2">حروق الأحماض</h4>
          <p className="text-sm text-slate-700">اغسل فوراً بالماء البارد، ثم بمحلول <strong>بيكربونات الصوديوم 8%</strong>.</p>
        </div>
        {/* Alkali Burns */}
        <div className="bg-orange-50 p-4 rounded-lg border border-orange-100">
          <FlaskConical className="text-orange-500 mb-2" size={32} />
          <h4 className="font-bold text-lg mb-2">حروق القلويات</h4>
          <p className="text-sm text-slate-700">اغسل فوراً بالماء البارد، ثم بمحلول <strong>حمض الأسيتيك 1%</strong>.</p>
        </div>
        {/* Eyes */}
        <div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
          <Eye className="text-blue-500 mb-2" size={32} />
          <h4 className="font-bold text-lg mb-2">إصابات العين</h4>
          <p className="text-sm text-slate-700">
            حمض: اغسل بالماء ثم بيكربونات صوديوم 1%.<br/>
            قلوي: اغسل بالماء ثم حمض البوريك 1%.
          </p>
        </div>
      </div>
    </div>
  </section>

  {/* Chemicals Section */}
  <section id="chemicals" className="py-16 bg-gradient-to-b from-slate-100 to-white">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex items-center gap-3 mb-10 border-r-4 border-cyan-500 pr-4">
        <FlaskConical className="text-cyan-600" size={32} />
        <h2 className="text-3xl font-bold text-slate-800">رابعاً: إدارة المواد الكيميائية</h2>
      </div>

      <div className="grid lg:grid-cols-2 gap-8">
        <div>
          <h3 className="text-xl font-bold mb-4 flex items-center gap-2">
            <Box className="text-cyan-600" /> شروط التخزين الآمن
          </h3>
          <ul className="space-y-3 bg-white p-6 rounded-xl shadow-sm">
            <li className="flex gap-2"><CheckCircle className="text-cyan-500 w-5" /> الأرفف في مستوى النظر كحد أقصى.</li>
            <li className="flex gap-2"><CheckCircle className="text-cyan-500 w-5" /> العبوات الكبيرة والثقيلة في الأسفل.</li>
            <li className="flex gap-2"><CheckCircle className="text-cyan-500 w-5" /> الأحماض المركزة في صناديق خشبية بها رمل.</li>
            <li className="flex gap-2"><CheckCircle className="text-cyan-500 w-5" /> المواد السامة والمتفجرة في خزانات معزولة ومؤمنة.</li>
          </ul>
        </div>

        <div>
          <h3 className="text-xl font-bold mb-4 flex items-center gap-2 text-red-600">
            <Ban className="text-red-600" /> مواد لا تخلط (متنافرة)
          </h3>
          <div className="overflow-hidden rounded-xl border border-slate-200 shadow-sm">
            <table className="w-full text-sm text-right bg-white">
              <thead className="bg-slate-100 text-slate-700">
                <tr>
                  <th className="p-3">المادة</th>
                  <th className="p-3">يجب فصله عن</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                <tr>
                  <td className="p-3 font-semibold text-slate-700">حمض الخل</td>
                  <td className="p-3 text-slate-600">حمض النيتريك، البيرمنجنات</td>
                </tr>
                <tr>
                  <td className="p-3 font-semibold text-slate-700">الأسيتيلين</td>
                  <td className="p-3 text-slate-600">النحاس، الفضة، الزئبق، الكلور</td>
                </tr>
                <tr>
                  <td className="p-3 font-semibold text-slate-700">الأمونيا اللامائي</td>
                  <td className="p-3 text-slate-600">الزئبق، الكلور، البروم، اليود</td>
                </tr>
                <tr>
                  <td className="p-3 font-semibold text-slate-700">الصوديوم</td>
                  <td className="p-3 text-slate-600">الماء، رابع كلوريد الكربون</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>

  {/* Solutions Section */}
  <section id="solutions" className="py-16 bg-cyan-900 text-white">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex flex-col md:flex-row items-center justify-between gap-8">
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-6">
            <Droplets className="text-cyan-300" size={32} />
            <h2 className="text-3xl font-bold">خامساً: تحضير المحاليل</h2>
          </div>
          <div className="bg-white/10 p-6 rounded-xl backdrop-blur-sm border border-white/20 mb-6">
            <h3 className="text-2xl font-bold text-yellow-400 mb-2">القاعدة الذهبية</h3>
            <p className="text-lg">أضف <span className="font-bold underline">الحمض إلى الماء</span> دائماً، وليس العكس، لتجنب تناثر الحمض بسبب الحرارة الناتجة.</p>
          </div>
          <ul className="space-y-3 text-cyan-50">
            <li className="flex gap-2"><CheckCircle size={20} /> استخدم أواني زجاجية سميكة أو حوض فخاري عند تحضير المحاليل الطاردة للحرارة.</li>
            <li className="flex gap-2"><CheckCircle size={20} /> استخدم سدادات مطاطية للمحاليل القلوية (لتجنب التصاق الزجاج).</li>
            <li className="flex gap-2"><CheckCircle size={20} /> احفظ المحاليل الحساسة للضوء (نترات الفضة) في زجاجات بنية.</li>
          </ul>
        </div>
        <div className="w-full md:w-1/3 flex justify-center">
            <FlaskConical size={200} className="text-cyan-500 opacity-50" />
        </div>
      </div>
    </div>
  </section>

  {/* Fire Section */}
  <section id="fire" className="py-16 bg-white">
    <div className="max-w-6xl mx-auto px-4">
      <div className="flex items-center gap-3 mb-10 border-r-4 border-red-500 pr-4">
        <Flame className="text-red-600" size={32} />
        <h2 className="text-3xl font-bold text-slate-800">سابعاً: مكافحة الحرائق (P.A.S.S)</h2>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
        <div className="p-4 bg-slate-50 rounded-lg">
          <div className="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-xl">1</div>
          <h4 className="font-bold mb-2">اسحب</h4>
          <p className="text-sm text-slate-600">اسحب صمام الأمان بقوة.</p>
        </div>
        <div className="p-4 bg-slate-50 rounded-lg">
          <div className="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-xl">2</div>
          <h4 className="font-bold mb-2">وجه</h4>
          <p className="text-sm text-slate-600">وجه الخرطوم إلى قاعدة اللهب.</p>
        </div>
        <div className="p-4 bg-slate-50 rounded-lg">
          <div className="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-xl">3</div>
          <h4 className="font-bold mb-2">اضغط</h4>
          <p className="text-sm text-slate-600">اضغط على ذراع التشغيل.</p>
        </div>
        <div className="p-4 bg-slate-50 rounded-lg">
          <div className="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-xl">4</div>
          <h4 className="font-bold mb-2">حرك</h4>
          <p className="text-sm text-slate-600">حرك الخرطوم يميناً ويساراً.</p>
        </div>
      </div>

      <div className="mt-8 bg-yellow-50 border-r-4 border-yellow-400 p-4 rounded text-slate-700">
        <strong className="block mb-1 text-yellow-800">احتياطات هامة:</strong>
        <ul className="list-disc list-inside text-sm">
          <li>حافظ على مسافة آمنة (3 إلى 6 أمتار).</li>
          <li>اجعل مخرج الطوارئ خلفك دائماً.</li>
          <li>إذا فقدت السيطرة، غادر فوراً وأغلق الباب خلفك.</li>
        </ul>
      </div>
    </div>
  </section>

  {/* Footer */}
  <footer className="bg-slate-800 text-slate-300 py-8 text-center">
    <div className="max-w-6xl mx-auto px-4">
      <p className="mb-2">السلامة أولاً: مسؤوليتنا المشتركة والتزامنا الدائم</p>
      <p className="text-sm text-slate-500">تم تحويل هذا