--- ## 🎯 ملف src/main.jsx import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( , ) --- ## 🎨 ملف src/index.css css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f8fafc; color: #1e293b; } /* RTL Support */ [dir="rtl"] { direction: rtl; text-align: right; } [dir="rtl"] input, [dir="rtl"] textarea { text-align: right; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animations */ @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-slide-in { animation: slideInUp 0.4s ease-out; } .animate-fade-in { animation: fadeIn 0.3s ease-out; } --- ## 🔧 ملف src/hooks/useLocalStorage.js function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.error('Error reading from localStorage:', error); return initialValue; } }); const setValue = (value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error('Error writing to localStorage:', error); } }; return [storedValue, setValue]; } --- ## 📊 ملف src/utils/schoolProData.js const defaultSchoolProData = { schoolName: "School Pro", schoolDescription: "منصة تعليمية حديثة", theme: { primaryColor: "#3B82F6", secondaryColor: "#10B981", accentColor: "#F59E0B", }, modules: { dashboard: true, courses: true, students: true, teachers: true, grades: true, attendance: true, assignments: true, announcements: true, }, students: [ { id: 1, name: "أحمد محمد", email: "ahmed@school.com", class: "الصف الأول الثانوي" }, { id: 2, name: "فاطمة علي", email: "fatima@school.com", class: "الصف الأول الثانوي" }, { id: 3, name: "محمود خالد", email: "mahmoud@school.com", class: "الصف الثاني الثانوي" }, ], teachers: [ { id: 1, name: "د. محمد السيد", subject: "الرياضيات", email: "dr.mohamed@school.com" }, { id: 2, name: "أ. سارة أحمد", subject: "اللغة العربية", email: "sarah@school.com" }, { id: 3, name: "أ. علي حسن", subject: "العلوم", email: "ali@school.com" }, ], courses: [ { id: 1, name: "الرياضيات المتقدمة", teacher: "د. محمد السيد", students: 25 }, { id: 2, name: "النحو والصرف", teacher: "أ. سارة أحمد", students: 30 }, { id: 3, name: "الفيزياء التطبيقية", teacher: "أ. علي حسن", students: 20 }, ], announcements: [ { id: 1, title: "بدء العام الدراسي الجديد", content: "نبدأ عامنا الدراسي الجديد بهمة وعزيمة", date: "2024-01-15" }, { id: 2, title: "امتحانات الفصل الأول", content: "ستبدأ الامتحانات في الأسبوع القادم", date: "2024-01-16" }, ], }; const generateSchoolProApp = (description) => { const data = JSON.parse(JSON.stringify(defaultSchoolProData)); // تحليل الوصف وتعديل البيانات if (description.includes('رياضيات')) { data.courses[0].students = 35; } if (description.includes('لغة عربية')) { data.courses[1].students = 40; } return data; }; --- ## 💾 ملف src/utils/projectGenerator.js const generateProjectCode = (projectName, schoolData) => { const timestamp = new Date().toISOString(); return { projectName, timestamp, schoolData, files: { 'App.jsx': generateAppComponent(schoolData), 'Dashboard.jsx': generateDashboardComponent(schoolData), 'Students.jsx': generateStudentsComponent(schoolData), 'Teachers.jsx': generateTeachersComponent(schoolData), 'Courses.jsx': generateCoursesComponent(schoolData), 'config.json': JSON.stringify(schoolData, null, 2), } }; }; const generateAppComponent = (data) => ` function App() { const [currentPage, setCurrentPage] = useState('dashboard'); const schoolData = ${JSON.stringify(data, null, 2)}; const renderPage = () => { switch(currentPage) { case 'dashboard': return ; case 'students': return ; case 'teachers': return ; case 'courses': return ; default: return ; } }; return (

${data.schoolName}

{renderPage()}

); } `; const generateDashboardComponent = (data) => ` function Dashboard({ data }) { return (

مرحبا بك في ${data.schoolName}

عدد الطلاب

${data.students.length}

عدد المعلمين

${data.teachers.length}

عدد المقررات

${data.courses.length}

الإعلانات

${data.announcements.length}

آخر الإعلانات

\${data.announcements.map(ann => (

\${ann.title}

\${ann.content}

\${ann.date}

))}

); } `; const generateStudentsComponent = (data) => ` function Students({ data }) { return (

إدارة الطلاب

\${data.students.map(student => ( ))}

الاسم	البريد الإلكتروني	الفصل
\${student.name}	\${student.email}	\${student.class}

); } `; const generateTeachersComponent = (data) => ` function Teachers({ data }) { return (

إدارة المعلمين

\${data.teachers.map(teacher => (

\${teacher.name}

المادة: \${teacher.subject}

البريد: \${teacher.email}

))}

); } `; const generateCoursesComponent = (data) => ` function Courses({ data }) { return (

المقررات الدراسية

\${data.courses.map(course => (

\${course.name}

المعلم: \${course.teacher}

عدد الطلاب: \${course.students}

))}

); } `; --- ## 📤 ملف src/utils/fileExporter.js const exportProjectAsJSON = (projectData) => { const dataStr = JSON.stringify(projectData, null, 2); const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr); const exportFileDefaultName = `${projectData.projectName}-${new Date().getTime()}.json`; const linkElement = document.createElement('a'); linkElement.setAttribute('href', dataUri); linkElement.setAttribute('download', exportFileDefaultName); linkElement.click(); }; const exportAsZip = async (projectData) => { // This is a simplified version. In production, use a library like jszip const content = JSON.stringify(projectData, null, 2); console.log('Export as ZIP:', content); }; const copyToClipboard = (text) => { navigator.clipboard.writeText(text).then(() => { console.log('Copied to clipboard'); }).catch(err => { console.error('Failed to copy:', err); }); }; --- ## 🎨 ملف src/components/PromptInput.jsx function PromptInput({ onGenerate, isLoading }) { const [prompt, setPrompt] = useState(''); const handleSubmit = (e) => { e.preventDefault(); if (prompt.trim()) { onGenerate(prompt); setPrompt(''); } }; const suggestions = [ 'منصة تعليمية لمدرسة ابتدائية مع إدارة طلاب ومعلمين', 'نظام تعليمي جامعي متقدم مع تقييمات وواجبات', 'منصة تدريب عملية مع شهادات وتقارير', ]; return (

صِف منصتك التعليمية

أخبرنا عن المنصة التعليمية التي تريدها، وسنقوم بتوليد تطبيق كامل تلقائيًا

setPrompt(e.target.value)}
            placeholder="مثال: أريد منصة تعليمية لمدرسة ابتدائية تحتوي على إدارة الطلاب والمعلمين والمقررات الدراسية مع نظام للدرجات والحضور..."
            className="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-right"
            disabled={isLoading}
          />

<button
            type="submit"
            disabled={isLoading || !prompt.trim()}
            className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Send size={20} />
            {isLoading ? 'جاري التوليد...' : 'توليد المنصة'}
          </button>
        </form>

{/* Suggestions */}
        <div className="mt-8">
          <p className="text-sm text-gray-600 mb-3">أو اختر من الأمثلة:</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {suggestions.map((suggestion, index) => (
              <button
                key={index}
                onClick={() => {
                  setPrompt(suggestion);
                }}
                className="text-right p-3 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition text-sm text-gray-700"
              >
                {suggestion}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
---

## 📋 ملف src/components/GeneratedPreview.jsx

function GeneratedPreview({ projectData, onViewApp }) {
  const [activeTab, setActiveTab] = useState('overview');

if (!projectData) {
    return null;
  }

const { schoolData, projectName, timestamp, files } = projectData;

return (
    <div className="w-full max-w-6xl mx-auto mt-12 animate-slide-in">
      <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200">
        {/* Header */}
        <div className="bg-gradient-to-r from-green-600 to-emerald-600 p-8 text-white">
          <h2 className="text-3xl font-bold mb-2">✨ تم إنشاء منصتك بنجاح!</h2>
          <p className="text-green-100">تم توليد تطبيق School Pro كاملاً وجاهز للاستخدام</p>
        </div>

{/* Tabs */}
        <div className="flex border-b border-gray-200">
          <button
            onClick={() => setActiveTab('overview')}
            className={`px-6 py-4 font-semibold transition ${
              activeTab === 'overview'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            نظرة عامة
          </button>
          <button
            onClick={() => setActiveTab('data')}
            className={`px-6 py-4 font-semibold transition ${
              activeTab === 'data'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            البيانات
          </button>
          <button
            onClick={() => setActiveTab('files')}
            className={`px-6 py-4 font-semibold transition ${
              activeTab === 'files'
                ? 'text-blue-600 border-b-2 border-blue-600'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            الملفات
          </button>
        </div>

{/* Content */}
        <div className="p-8">
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <p className="text-gray-600 text-sm">اسم المنصة</p>
                  <p className="text-xl font-bold text-gray-900">{schoolData.schoolName}</p>
                </div>
                <div className="bg-green-50 p-4 rounded-lg">
                  <p className="text-gray-600 text-sm">عدد الطلاب</p>
                  <p className="text-xl font-bold text-green-600">{schoolData.students.length}</p>
                </div>
                <div className="bg-amber-50 p-4 rounded-lg">
                  <p className="text-gray-600 text-sm">عدد المعلمين</p>
                  <p className="text-xl font-bold text-amber-600">{schoolData.teachers.length}</p>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <p className="text-gray-600 text-sm">عدد المقررات</p>
                  <p className="text-xl font-bold text-purple-600">{schoolData.courses.length}</p>
                </div>
              </div>

<div className="bg-gray-50 p-6 rounded-lg">
                <h3 className="font-bold text-gray-900 mb-4">الميزات المفعّلة:</h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  {Object.entries(schoolData.modules).map(([key, enabled]) => (
                    <div key={key} className={`p-3 rounded-lg text-sm font-semibold ${
                      enabled ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-600'
                    }`}>
                      {enabled ? '✓' : '✗'} {key}
                    </div>
                  ))}
                </div>
              </div>

<div className="flex gap-3 flex-wrap">
                <button
                  onClick={onViewApp}
                  className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition"
                >
                  <Eye size={20} />
                  عرض التطبيق
                </button>
                <button
                  onClick={() => exportProjectAsJSON(projectData)}
                  className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition"
                >
                  <Download size={20} />
                  تحميل المشروع
                </button>
                <button
                  onClick={() => copyToClipboard(JSON.stringify(projectData, null, 2))}
                  className="flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold transition"
                >
                  <Copy

const Component = useLocalStorage;
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Component />);
  </script>
</body>
</html>