Hero Section
....
أجمع بين خبرة إكلينيكية عميقة 🔬 ورؤية تقنية مبتكرة ⚕️ لصناعة حلول فعّالة 🤝 | خبرة +10 سنوات في التغذية العلاجية 🍽️ | ابتكار منتجات رقمية تدعم القرار الصحي 💡 | تصميم محتوى توعوي احترافي 📝 | حلول متقدمة للمختصين والعيادات الخاصة 🏥 | تطوير مواقع ومنصات تفاعلية 💻 | استشارات لتحسين الأداء والتميز المهني 🎯 | تدريب فردي لتنمية المهارات 📘
بروميت توليد الاكواد للقوالب
أنت مبرمج خبير واختصاصي في تطوير واجهات المستخدم الـ UI/UX النظيفة والذكية. لدي ملف نصي يحتوي على قوالب ومشاريع برمجية متعددة ومدمجة (تضم عناصر فرعية وتصميمات بديلة كثيرة).
أريد منك إنشاء صفحة معرض ذكية وموحدة (Single-Page Interactive Dashboard) تقوم بعزل وعرض كافة العناصر الموجودة بالملف بلا استثناء، مع تطبيق الشروط والمعايير البرمجية الصارمة التالية:
1. عزل وفصل كلي (Total Isolation):
قم بتفكيك وعزل كل عنصر، وكل بطاقة، وكل تصميم بديل (مثل التصميم أ، التصميم ب)، وكل قسم فرعي داخل المشاريع ليعرض بشكل مستقل تماماً. استخدم نظام أسطر وستايل معزول (Scoped CSS) يمنع تداخل تنسيقات العناصر مع بعضها البعض أو مع لوحة التحكم.
2. مستعرض الأكواد التفاعلي الذكي (Dynamic Code Viewer):
أضف بجانب كل عنصر فرعي/تصميم معروض زرًا أو أيقونة تفاعلية أنيقة باسم « 👁️ عرض الكود البرمجي وعزله ». عند الضغط عليه، تنبثق نافذة مشروطة (Modal Windows) سريعة وخفيفة.
3. نافذة الكود المظلمة (VS Code Aura):
النافذة المنبثقة لكل عنصر يجب أن تحتوى على صندوق عرض أكواد بخلفية مظلمة (Dark Theme كأكواد VS Code) يعرض بدقة الكود التفصيلي الصافي (HTML, CSS, JS) التابع لهذا العنصر المعزول تحديداً، سطرًا بسطر دون أي نقصان أو حذف للأيقونات والروابط والخطوط المرتبطة به.
4. ميزة النسخ الشامل والديناميكي (Ultimate One-Click Copy):
داخل نافذة كل عنصر، برمج زرًا تفاعليًا باسم « 📋 نسخ الكود بالكامل ».
* تنبيه برمجى هام جداً: لا تقم بربط دالة النسخ بحلقات تكرارية ثابتة (مثل forEach المحدودة لعدد معين)، بل استخدم دالة مراقبة الأحداث الديناميكية (Event Delegation) المستمعة للمستند بأكمله (document.body.addEventListener) لضمان تفعيل ميزة النسخ الفوري لكافة العناصر بلا استثناء (سواء كانت 12 أو 100 عنصر فرعي وبديل)، مع إظهار إشعار تأكيدي أخضر سريع "✓ تم النسخ بنجاح".
5. المحافظة الشاملة وسهولة التحميل:
حافظ على كل حرف، سطر، أيقونة، نص، ومعادلة داخل القوالب الأصلية. ونظراً لضخامة الكود الإجمالي الناتج، قم بإنشاء وحقن الأكواد داخل ملف واحد متكامل بصيغة HTML مجهز ليعمل بكفاءة مطلقة واستجابة كاملة على الهواتف والأجهزة المكتبية، وقدمه لي كملف جاهز للتحميل فوراً.
اعزل المكونات الداخلية (مثل بطاقات المشاريع، الهيدر، الأزرار، والتقييمات) لتحقيق العزل الكلي والمطلق لكل عنصر على حدة، وبناء لوحة التحكم بالكامل وتفكيك كل قالب إلى عناصر منفصلة تماماً. كل عنصر الآن (مثل: الهيدر الترحيبي، بطاقة تقييم المنتج، الأزرار التفاعلية، بطاقات الأرقام القياسية، وقسم التقييمات) يعيش داخل صندوق معاينة مستقل ومستعرض كود خاص به وحده.
إنشاء الإصدار الاحترافي الكامل (Component Isolation Engine) الذي:
يفكك كل Section.
يفكك كل Card داخل Section.
يفكك الأزرار والتقييمات والمودالات.
ينشئ بطاقة مستقلة لكل عنصر.
يولد HTML/CSS/JS معزول لكل عنصر.
ينشئ Modal مستقل لكل عنصر.
يحافظ على جميع الأكواد الأصلية دون حذف.
بدلاً من أن يرى المستخدم الكود أولًا، يكون التسلسل:
الوضع الافتراضي
✅ عرض العنصر الحقيقي كما سيظهر للمستخدم النهائي
✅ بالحجم الكامل (Full Preview)
✅ جميع التفاعلات تعمل داخل المعاينة
✅ Scroll مستقل إذا كان العنصر كبيرًا
┌───────────────────────────────┐
│ Hero Section │
├───────────────────────────────┤
│ │
│ معاينة حقيقية │
│ للتصميم │
│ │
├───────────────────────────────┤
│ 👁️ عرض الكود البرمجي │
└───────────────────────────────┘
يرى المستخدم الكود أولًا، يكون التسلسل:
الوضع الافتراضي
✅ عرض العنصر الحقيقي كما سيظهر للمستخدم النهائي
✅ بالحجم الكامل (Full Preview)
✅ جميع التفاعلات تعمل داخل المعاينة
✅ Scroll مستقل إذا كان العنصر كبيرًا
داخل كل عنصر
┌───────────────────────────────┐
│ Hero Section │
├───────────────────────────────┤
│ │
│ معاينة حقيقية │
│ للتصميم │
│ │
├───────────────────────────────┤
│ 👁️ عرض الكود البرمجي │
└───────────────────────────────┘
عند الضغط على
👁️ عرض الكود البرمجي
يفتح Modal يحتوي على:
┌───────────────────────────────┐
│ Hero Section │
├───────────────────────────────┤
│ 📋 نسخ الكود بالكامل │
├───────────────────────────────┤
│ │
│ HTML │
│ CSS │
│ JS │
│ │
└───────────────────────────────┘
المعاينة تكون عبر iframe معزول
وليس مجرد Text Preview
مثال:
مميزات iframe:
عزل CSS بنسبة 100%
عزل JS بنسبة 100%
عدم تضارب العناصر
عرض التصميم الحقيقي
دعم أي مكتبات داخلية
هيكل العنصر النهائي
داخل الـ Modal
النسخ الديناميكي
document.body.addEventListener("click", async (e)=>{
const btn = e.target.closest("[data-copy]");
if(!btn) return;
const code =
document.getElementById(
btn.dataset.copy
).innerText;
await navigator.clipboard.writeText(code);
showToast("✓ تم النسخ بنجاح");
});
النسخة الاحترافية التي أقترح تنفيذها
عند فتح الملف:
Sidebar للمكونات
Search Components
Full Live Preview لكل عنصر بشكل مستقل
Component Isolation
VS Code Modal
Copy HTML
Copy CSS
Copy JS
Copy Full Component
Dark/Light Mode
Export Component
Export All Components
فتصبح أقرب إلى:
Storybook
Component Explorer
Design System Viewer
UI Component Library
بدلاً من مجرد معرض أكواد عادي. وهذا مناسب جداً لملفك الضخم الذي يحتوي على عشرات المكونات والتصاميم البديلة.
=======
# AI Component Isolation Engine – Enterprise Edition
## Role
Act as a Senior Full-Stack Software Architect, UI/UX Engineer, Frontend Performance Specialist, and Design System Expert.
You will receive a large source file containing multiple projects, templates, layouts, sections, components, nested cards, alternative designs, widgets, modals, ratings, buttons, and reusable UI elements.
Your mission is to automatically transform the entire file into a professional **Interactive Component Explorer & Isolation Dashboard**, similar to Storybook, Component Libraries, and Design System Viewers.
---
# Primary Objective
Build a single self-contained HTML application that:
* Extracts every component without exception.
* Isolates every UI element independently.
* Preserves all original code.
* Creates live previews.
* Generates dedicated source-code viewers.
* Supports export and copy operations.
* Remains fully responsive and production-ready.
---
# Mandatory Architecture
## 1. Complete Component Isolation Engine
The system must automatically decompose:
* Every Section
* Every Card
* Every Widget
* Every Button
* Every Modal
* Every Form Element
* Every Rating Component
* Every Hero Section
* Every Navigation Block
* Every Footer
* Every Alternative Design Variant
* Every Nested Child Component
Each extracted element becomes an independent component card.
Example:
Project
├─ Hero Section
├─ CTA Button
├─ Feature Card
├─ Rating Widget
├─ Testimonial Card
├─ Modal
└─ Footer
All become standalone isolated components.
---
## 2. Absolute Isolation Requirements
Each component must be rendered inside a fully isolated environment.
Use:
* Scoped CSS
* Namespaced Classes
* Shadow DOM when applicable
* Sandboxed iframe rendering
Priority:
iframe sandbox="allow-scripts allow-same-origin"
Every component must operate independently with:
* Zero CSS leakage
* Zero JS conflicts
* Zero style inheritance
* Zero DOM collisions
---
## 3. Default User Experience
The dashboard must NOT display source code first.
Instead:
### Default State
Display a full live preview exactly as an end-user would see it.
Requirements:
* Full-size rendering
* Real interactions enabled
* Independent scrolling
* Responsive behavior preserved
* Original animations preserved
* Original fonts preserved
* Original icons preserved
Structure:
Component Card
├─ Header
├─ Full Live Preview
└─ View Source Button
---
## 4. Live Preview Rendering
Use iframe-based rendering.
Example:
```html
```
Benefits:
* 100% CSS Isolation
* 100% JS Isolation
* True Visual Rendering
* Library Compatibility
* Safe Execution
---
## 5. Professional Code Viewer
Each component must include:
👁️ View Component Source
Clicking opens a lightweight modal window.
Modal Requirements:
* Dark Theme
* VS Code Style Appearance
* Syntax Highlighting
* Scrollable Content
* Responsive Layout
* Fast Rendering
Display:
* HTML
* CSS
* JavaScript
Exactly as extracted.
Do not remove:
* Fonts
* Icons
* SVGs
* Links
* Imports
* Assets
* Metadata
---
## 6. Dynamic Copy System
Inside every modal provide:
📋 Copy Full Component
Requirements:
* One-click copy
* Dynamic event delegation
* Unlimited scalability
* Works for 10, 100, or 1000 components
Mandatory implementation:
```javascript
document.body.addEventListener("click", async (e) => {
const btn = e.target.closest("[data-copy]");
if (!btn) return;
const code =
document.getElementById(
btn.dataset.copy
).innerText;
await navigator.clipboard.writeText(code);
showToast("✓ Copied Successfully");
});
```
Do NOT use:
* forEach binding
* static listeners
* hardcoded handlers
The copy system must work automatically for every future component.
---
## 7. Component Metadata Panel
For every component display:
* Component Name
* Component Type
* Parent Project
* Variant Name
* Dependencies
* Lines of Code
* HTML Count
* CSS Count
* JS Count
---
## 8. Advanced Sidebar Navigation
Generate an intelligent sidebar containing:
* Component Tree
* Project Structure
* Search Bar
* Category Filters
* Component Counter
* Quick Navigation
Example:
Components
├─ Hero
├─ Buttons
├─ Cards
├─ Modals
├─ Forms
├─ Ratings
└─ Footer
---
## 9. Search Engine
Implement instant search across:
* Component Names
* IDs
* Classes
* Titles
* Categories
Results update in real time.
---
## 10. Export System
Per Component:
* Export HTML
* Export CSS
* Export JS
* Export Full Component
Global:
* Export All Components
* Export Design System
* Export ZIP Package
---
## 11. UI Modes
Provide:
* Dark Mode
* Light Mode
* Auto Theme
Persist preference using localStorage.
---
## 12. Performance Optimization
The application must:
* Support hundreds of components.
* Use lazy rendering.
* Use virtualized scrolling where needed.
* Minimize memory usage.
* Prevent duplicate DOM generation.
---
## 13. Preservation Policy
Critical Rule:
Preserve absolutely everything from the original file.
Do NOT delete:
* HTML
* CSS
* JavaScript
* SVG
* Icons
* Fonts
* Images
* Links
* Metadata
* Animations
* Responsive Rules
No simplification.
No optimization that alters behavior.
No content removal.
---
## 14. Final Deliverable
Generate one complete production-ready HTML file.
Requirements:
* Self-contained
* Responsive
* Download-ready
* Enterprise-grade
* Fully functional offline
* Component Explorer quality
Target Experience:
The final result should feel like a hybrid of:
* Storybook
* Design System Viewer
* Component Explorer
* UI Library Manager
* Frontend Playground
rather than a simple code gallery.
Output only the final complete implementation.
Do not provide explanations, summaries, placeholders, pseudocode, or partial solutions.
======
معاينة مباشرة للقالب داخل iframe
زر 👁️ عرض الكود البرمجي
نافذة Modal بنمط VS Code
زر 📋 نسخ الكود لكل عنصر
Event Delegation للنسخ الديناميكي
واجهة Component Explorer
دعم Dark / Light Mode
====================
"أعمل على مشروع ضخم يحتوي على قاعدة كود برمجية كبيرة (100 ألف سطر). هدفي هو تحويل هذا القالب من 'صفحة واحدة متصلة' إلى 'مكتبة مكونات معزولة' (Modular Component Library).
أريد منك القيام بعملية التفكيك وفق المعايير التالية:
أولاً: هيكلية المخرجات لكل عنصر:
يجب أن يتم عرض كل مكون بشكل مستقل تماماً، على أن يتكون الرد لكل مكون من جزأين رئيسيين:
الوضع الافتراضي (Preview Mode): عرض المعاينة الحقيقية (Rendered UI) للعنصر، مع التأكد من عمل كافة التفاعلات (Interactions) وCSS والوظائف البرمجية (JS/TypeScript) وكأنه تطبيق حي.
عرض الكود (Code View): زر أو رابط لفتح الكود البرمجي النظيف والجاهز للنسخ (Cleaned Source Code)، بحيث يكون العنصر معزولاً عن أي تبعيات خارجية (Dependencies) غير ضرورية.
ثانياً: متطلبات التنفيذ:
العزل (Isolation): تأكد من أن كل مكون (مثلاً: Hero Section, Navbar, Card, Footer) يمتلك ملفاته الخاصة (CSS/JS) ولا يعتمد على كلاسات خارجية موجودة في القالب الأصلي.
تغليف المكونات: استخدم نهج المكونات المعزولة (مثل React Components أو Web Components) لتسهيل نقل العنصر لمشاريع أخرى.
التوثيق: أضف تعليقات واضحة داخل الكود تشرح كيفية تخصيص المكون (Props/Variables).
ثالثاً: آلية العمل:
ابدأ بتحليل الكود المرفق بالكامل، ثم قم بتعريفي بقائمة المكونات التي استخرجتها (Component Tree).
لا تقم باختصار الكود أو الطلب مني إكمال الأجزاء الناقصة؛ أريد مخرجات كاملة واحترافية لكل مكون.
ابدأ بتطبيق هذا النظام على [أدخل اسم العنصر، مثلاً: الـ Hero Section]، وقم بتنفيذه بالكامل كما هو موضح في المعايير أعلاه.
الآن، أنا بانتظار استلام قائمة المكونات المكتشفة لنبدأ التنفيذ."
=====================
أنت مهندس Front-End متخصص في Reverse Engineering و Component Isolation.
المهمة:
قم بتحليل الملف المرفق بالكامل (HTML أو TXT أو صفحة ويب مدمجة)، ثم نفّذ عملية تفكيك احترافية للمكونات.
قواعد العمل الإلزامية:
1- اكتشف جميع المكونات البصرية والتفاعلية الموجودة داخل الصفحة.
2- اعتبر كل عنصر مستقل Component إذا كان:
* Card
* Hero Section
* Header
* Footer
* Navigation
* Button Group
* Form
* Stats Block
* Review Block
* Feature Block
* Product Card
* Timeline
* FAQ
* أي عنصر له تصميم أو وظيفة مستقلة.
3- لكل Component أنشئ نسخة مستقلة بالكامل Self-Contained تحتوي على:
HTML
CSS
JavaScript
داخل ملف واحد فقط.
4- يمنع مشاركة أي CSS أو JS بين المكونات.
5- استخرج فقط الأكواد المستخدمة فعلياً داخل المكون.
6- عالج جميع Dependencies بحيث يعمل المكون منفرداً دون الحاجة لبقية الصفحة.
7- إذا كان هناك CSS عام:
قم باستخراج الجزء المستخدم فقط داخل المكون.
8- إذا كان JavaScript مشترك:
استخرج فقط الدوال المستخدمة لهذا المكون.
9- حافظ على التطابق البصري بنسبة 100%.
10- حافظ على التطابق السلوكي والتفاعلي بنسبة 100%.
11- لا تقم بإعادة تصميم أي عنصر.
12- لا تقم بتحسين أو تنظيف التصميم.
13- لا تغير:
* الألوان
* الأحجام
* الهوامش
* الخطوط
* الحركات
* التأثيرات
إلا إذا كان ذلك ضرورياً للحفاظ على التطابق.
14- أنشئ لوحة Dashboard احترافية تحتوي على:
* بطاقة لكل Component
* معاينة Live Preview
* iframe معزول لكل عنصر
* زر "فحص الكود"
* نافذة Modal لعرض الكود
* زر نسخ الكود
* Toast Notification بعد النسخ
15- أنشئ قاعدة بيانات بالشكل التالي:
const isolatedComponentsDB = {
"component-1": `FULL CODE`,
"component-2": `FULL CODE`,
...
}
16- كل عنصر يجب أن يكون جاهزاً للعمل مباشرة عند نسخه إلى ملف HTML منفصل.
17- في المخرجات النهائية أعرض:
أولاً:
قائمة بالمكونات المكتشفة.
ثانياً:
عدد المكونات.
ثالثاً:
Dashboard كاملة لعزل المكونات.
رابعاً:
الكود الكامل لكل مكون داخل isolatedComponentsDB.
خامساً:
تقرير يوضح:
* HTML المستخرج
* CSS المستخرج
* JS المستخرج
* أي تبعيات تم تضمينها
الهدف النهائي:
تحويل أي صفحة أو قالب أو ملف TXT إلى مكتبة Components مستقلة ومعزولة بالكامل، مع الحفاظ على التطابق البصري والسلوكي 100% مع التصميم الأصلي.