شجرة عائلة ديناميكية

مواصفات تصميم شجرة العائلة

نظرة عامة

نحتاج تصميم شجرة عائلة ، يُستخدم داخل تطبيق موبايل. التصميم يجب أن يكون **ملفات SVG متجهية** (ليس PNG) حتى يظهر بجودة عالية في أي حجم.

**ملاحظة مهمة:** الشجرة في التطبيق ديناميكية — الأسماء والفروع تُضاف تلقائياً بالكود. المطلوب منك فقط تصميم الهيكل الأساسي بدون أي أسماء.

مفهوم الشجرة — كيف تمثل العائلة

```

الجذور (دوائر ذهبية على الجذع)= سلسلة الأجداد (جد الجد ← أب الجد ← الجد)

الجذع (من الأسفل إلى الأعلى)= يربط سلسلة الأجداد ببعضها

الفروع (تتفرع من أعلى الجذع)= كل ابن وعائلته (فرع = عائلة ابن)

الأوراق (في نهايات الفروع)= أبناء الأبناء (آخر جيل مسجّل)

```

**الجذور = سلسلة الأجداد على الجذع:**

```

← أوراق (الجيل الحالي)

╱╲

╱╲← فروع (الآباء)

┃

(?) الجد← دائرة ذهبية ٣

┃

(?) أب الجد← دائرة ذهبية ٢

┃

(?) جد الجد← دائرة ذهبية ١ (أقدم جد)

┃

← عشب

```

**مثال عملي:**

- جد الجد (علي) ← الدائرة الذهبية السفلى على الجذع

- أب الجد (إبراهيم) ← الدائرة الذهبية الوسطى

- الجد (عبدالرحمن) ← الدائرة الذهبية العليا (عند بداية التفرع)

- أبناء الجد: محمد ← فرع يمين، عبدالله ← فرع يسار

- أبناء محمد (أحمد، خالد) ← أوراق ذهبية على فرع محمد

- أبناء عبدالله (سعد، فهد) ← أوراق ذهبية على فرع عبدالله

## المطلوب: 3 ملفات SVG

### ١. ملف الشجرة الرئيسية (`tree-trunk.svg`)

**الوصف:**

شجرة عائلة فنية (مثل الصورة المرفقة بالضبط او تكون قريبة من الفكرة)، تتكون من:

- **دائرة ذهبية كبيرة مزخرفة** عند قاعدة الجذع (مكان اسم جد العائلة — الجذر)

- **جذع سميك** يخرج من الدائرة الذهبية للأعلى (بني غامق مع تفاصيل لحاء الخشب)

- **٤ إلى ٦ فروع رئيسية** تتفرع من الجذع وتنتشر للأعلى (تمثل أبناء المؤسس)

- **فروع فرعية أصغر** تتفرع من الفروع الرئيسية (الكود سيضيف المزيد تلقائياً)

- **أوراق خضراء** زخرفية تملأ الفراغات بين الفروع (ورق زينة فقط، ليست أماكن للأسماء)

- **عشب أخضر** في أسفل الجذع

- **خلفية كريمية** مع نقش إسلامي هندسي خفيف (مثل الصورة المرفقة)

- **إطار زخرفي إسلامي** ذهبي حول الشجرة (مثل الصورة المرفقة)

- **بسملة** في الأعلى بخط ديواني/ثلث

- **آيتان قرآنيتان** في إطارين بيضاويين ذهبيين (يمين ويسار) — اختياري

- مكان فارغ لعنوان "شجرة عائلة [اسم العائلة]"

**المواصفات الفنية:**

- الأبعاد: `1000 × 1400` بكسل تقريباً

- يجب أن تكون الفروع الرئيسية واضحة ومرتبة على مستويات أفقية:

- الجيل الأول (أبناء الجذر): عند ارتفاع ≈ 1000px من الأسفل

- الجيل الثاني: عند ارتفاع ≈ 750px

- الجيل الثالث: عند ارتفاع ≈ 500px

- الجيل الرابع: عند ارتفاع ≈ 300px

- **اترك فراغات كافية** بين الفروع لأن الكود سيضيف فروع فرعية صغيرة وأوراق بالأسماء

- الفروع تنتهي بأطراف رفيعة (ليست مقطوعة)

**الألوان المطلوبة:**

- الجذع: بني غامق `#3E2723` إلى `#5D4037`

- الفروع: بني متوسط `#795548` يفتح كلما بعد عن الجذع

- الأوراق الزخرفية: أخضر `#2E7D20` و `#4A9E30` و `#6DBB45` (تنوع)

- العشب: أخضر غامق `#1B4D12`

**مثال مرجعي:** شجرة عائلة عربية تقليدية مثل المعلقة في الصورة المرفقة

---

٢. ملف الورقة/الثمرة (`leaf.svg`)

**الوصف:**

شكل الثمرة/الورقة الذي سيحتوي على اسم كل فرد في العائلة.

- شكل **دمعة/قطرة ذهبية** (teardrop) أو دائرة مزخرفة

- **ساق صغير** في الأعلى يربطها بالفرع

- **ورقة خضراء صغيرة** عند الساق

- **مساحة فارغة في المنتصف** لكتابة الاسم (الكود سيضيف النص)

- لمعة/بريق خفيف لإعطاء عمق

- **خلفية شفافة**

**المواصفات:**

- الأبعاد: `100 × 120` بكسل تقريباً

- اللون الأساسي: ذهبي `#C8A84E` مع تدرج إلى `#E8D48B`

- الحد: ذهبي غامق `#8B6914`

- يجب أن يكون التصميم واضح وقابل للقراءة حتى في حجم صغير (٥٠ بكسل)

---

٣. ملف الورقة للمتوفين (`leaf-deceased.svg`)

**الوصف:**

نفس تصميم الورقة العادية لكن بألوان باهتة تدل على أن الشخص متوفى.

- نفس الشكل بالضبط (دمعة/قطرة)

- ألوان باهتة/رمادية بدلاً من الذهبي

- شفافية أعلى قليلاً (يبدو خافت)

**الألوان:**

- اللون الأساسي: رمادي مائل للبيج `#B0A898`

- الحد: بني فاتح `#8B7D6B`

---

ملاحظات مهمة للمصمم

1. **لا تضع أي أسماء أو نصوص** على الشجرة — الكود يضيفها تلقائياً

2. **لا تضع أرقام أو علامات** على أماكن الأوراق — الكود يحسب المواقع تلقائياً

3. الملفات يجب أن تكون **SVG نظيف** (vector) وليس SVG يحتوي صور نقطية بداخله

4. **الخلفية شفافة** في جميع الملفات

5. التصميم يُعرض على **شاشات الموبايل** — يجب أن يكون واضح ومقروء

6. الشجرة ستُعرض مع إمكانية **التكبير والتصغير** — لذلك يجب أن تبقى حادة في أي حجم

7. سيتم **تصدير الشجرة كصورة عالية الدقة** للمشاركة عبر واتساب وغيره

---

كيف سيعمل التصميم في التطبيق

```

الطبقة ١: tree-trunk.svg (تصميمك — الجذع والفروع الرئيسية والأوراق الزخرفية)

↓

الطبقة ٢: فروع فرعية (يرسمها الكود تلقائياً — خطوط منحنية بنية)

↓

الطبقة ٣: leaf.svg × عدد الأعضاء (يضعها الكود على الفروع مع كتابة الأسماء)

```

**دورك فقط التصميم الجمالي:**

---

## الملفات المطلوبة (الملخص)

| # | الملف | الوصف | الأبعاد | الصيغة |

|---|||||

| ١ | `tree-trunk.svg` | الشجرة الرئيسية (إطار + جذع + فروع + أوراق زخرفية + دائرة الجذر) | 1000×1400 | SVG |

| ٢ | `leaf.svg` | ورقة/ثمرة ذهبية (حاوية اسم العضو) — فارغة بدون نص | 100×120 | SVG |

| ٣ | `leaf-deceased.svg` | نفس الورقة لكن باهتة/رمادية (للمتوفين رحمهم الله) | 100×120 | SVG |

| ٤ | `root-circle.svg` | الدائرة الذهبية المزخرفة (حاوية اسم الجد) — فارغة بدون نص. تُستخدم عدة مرات على الجذع لسلسلة الأجداد (جد ← أب الجد ← جد الجد) | 150×150 | SVG |