Vibe 2

lecture_02 · معايير جمال التصميم | Vibe Coding

lecture_01.html

●lecture_02.html✕

vibe-coding · main

bash — motrjim-academy — 80×24

student@motrjim:~/vibe-coding $

✓ المتطلب السابق: المحاضرة ٠١ — مفاهيم الويب

✓ ١٠ معايير جمال · ١٣ برومبت جاهز · ٧ غلطات حقيقية

--criteria 10 --prompts 13 --mistakes 7 --lang ar

/**

الجمال مش موهبة — الجمال checklist

الـ AI بيطلع تصميم «شغّال»، مش بالضرورة «جميل». الفرق بين موقع طالب وموقع محترف مش في الكود — في القرارات: مين الأكبر؟ إيه اللي يبان؟ إيه المسافة الصح؟ ودي قرارات إنت اللي بتاخدها.

الخبر الحلو: التصميم الجميل مش إلهام — هو مجموعة قواعد محددة، المصممين المحترفين بيطبقوها من غير ما يفكروا. المحاضرة دي بتديك القواعد دي كأوامر جاهزة تقولها للـ AI حرفياً.

دورك في الـ vibe coding هو الـ Art Director: الـ AI بينفذ ذوقك — مش بيخترعه بدالك. كل معيار تحت ليه برومبت جاهز تنسخه.

// ── أ · الأساسات — اللي بيفرق بين «طالب» و«محترف»

‹/›01_hierarchy.mdالأساسات01

// Visual Hierarchy

الهرمية البصرية — حاجة واحدة تسود

أهم معيار على الإطلاق. في كل شاشة، لازم يكون واضح في أول ثانية: إيه أهم حاجة؟ عنوان واحد كبير، زرار واحد بارز، والباقي كله «خدم» ليهم. لما كل حاجة تصرّخ، محدش بيتسمع.

rule 📏

لكل شاشة بطل واحد: أكبر عنصر = أهم عنصر. تاني أهم حاجة أصغر بوضوح. الباقي هادي وخافت.

test 🔬

اختبار التغميض (Squint Test): غمّض عينيك نص تغميضة قدام الصفحة — لو لسه شايف مين البطل، الهرمية سليمة. لو كله بقع متساوية، فيه مشكلة.

زرار CTA واحد بس باللون الذهبي في الشاشة — لو عندك زرارين مهمين، خلّي التاني outline من غير تعبئة.
لو عايز تبرز حاجة، متكبّرهاش بس — خفّت اللي حواليها. الأهمية نسبية.
وزن العنوان 800، والنص العادي 400 — القفزة الواضحة أحسن من التدرج الخجول (600/500).

prompt_01.txt

في كل شاشة، حدد عنصر واحد رئيسي يكون الأبرز بوضوح: العنوان الرئيسي أكبر عنصر نصي، وزرار CTA واحد فقط باللون الذهبي #C9A961. باقي الأزرار تكون outline بدون تعبئة. النصوص الثانوية بلون خافت muted. متخليش عنصرين ينافسوا على الانتباه.

أكاديمية مترجم!!

أفضل كورسات الترجمة والذكاء الاصطناعي!!

اشترككلمنا

اتعلم الترجمة في عصر الذكاء الاصطناعي

انضم لأكتر من ١٢٠٠ متدرب في ٢٩ دفعة

اشترك في متُرجِم باور

squint_test.sh — جرّب بنفسك

اتعلم الترجمة القانونية

دبلومة معتمدة · ١٦ محاضرة

سجل الآن

اتعلم الترجمة القانونية!!

دبلومة معتمدة · ١٦ محاضرة!!

سجلاعرف

وإنت داسس: التصميم الشمال لسه واضح فيه البطل (العنوان والزرار الذهبي) — واليمين بقى بقع دهبي متساوية ملهاش معنى.

‹/›02_contrast.mdالأساسات02

// Contrast

التباين — مقروء الأول، جميل بعدين

التباين هو فرق الوضوح بين النص وخلفيته. النص الرمادي الفاتح «الأنيق» اللي منتشر ده أكبر فخ في التصميم: شكله راقي على شاشتك، وغير مقروء على موبايل طالبك في الشمس.

rule 📏

النص الأساسي: تباين 4.5:1 على الأقل مع الخلفية (معيار WCAG). العناوين الكبيرة ممكن 3:1. أقل من كده = ناس مش هتقرا.

test 🔬

نزّل سطوع شاشتك 30% وبص للصفحة — اللي اختفى، تباينه ضعيف. أو افتحها في الشارع من الموبايل.

التباين مش بس للنصوص — الزرار المهم لازم يبقى أعلى تباين حاجة في الشاشة (عشان كده الذهبي على الكحلي شغّال).
النص فوق الصور مقامرة: ضيف طبقة تعتيم (overlay) ورا النص، أو متحطش نص على صورة أصلاً.
hack سريع: لو النص الخافت بتاعك أفتح من #767676 على خلفية بيضا — غمّقه.

prompt_02.txt

اجعل تباين الألوان عالياً: النص الأساسي بتباين 4.5:1 على الأقل مع الخلفية حسب معيار WCAG AA. النص الثانوي ممكن يكون أخف لكن يظل مقروءاً على شاشة موبايل في الإضاءة القوية. أي نص فوق صورة ضيف تحته dark overlay.

▶ demo · contrast_check● live

اشترك في الدبلومة✓ 12.6:1

اشترك في الدبلومة✗ 1.5:1

‹/›03_alignment.mdالأساسات03

// Alignment

المحاذاة — كل عنصر على خط

العين بتلقط «الشبه متساوي» فوراً وبتترجمه لـ«مش متقن». كل عنصر في الصفحة لازم يبدأ أو ينتهي على خط وهمي مشترك مع عناصر تانية — دي اللي بتدي إحساس النظام حتى لو المشاهد مش واعي ليها.

rule 📏

اختار محاذاة واحدة والتزم بيها: في العربي، محاذاة يمين هي الافتراضية. التوسيط للعناوين الكبيرة بس، مش للفقرات.

أكتر غلطة AI شائعة: توسيط كل حاجة. الفقرات المتوسّطة صعبة القراءة — أول كل سطر بيبدأ من مكان مختلف.
«شبه متحاذي» أسوأ من «مش متحاذي» — فرق الـ 3 بكسل بيبان إهمال. اطلب grid صريح.

prompt_03.txt

حاذِ كل النصوص يميناً (الصفحة عربي RTL)، والتوسيط للعناوين الرئيسية الكبيرة فقط. رصّ كل العناصر على grid واضح بحيث تبدأ الحواف من نفس الخط، بدون أي عناصر خارجة عن المحاذاة.

// ── ب · النظام — القواعد الرقمية اللي بتصنع الاتساق

‹/›04_color_rule.mdالنظام04

// 60-30-10 Color Rule

قاعدة الألوان 60-30-10

أشهر قاعدة في تاريخ التصميم: 60% من الشاشة لون محايد (الخلفية)، 30% لون أساسي (الهوية)، 10% بس للون المميز (الأزرار والتنبيهات). الـ 10% دي هي سر إن الزرار الذهبي «ينط» — لو الذهبي في كل حتة، مبقاش مميز.

rule 📏

في متُرجِم: كريمي #F7F3EC هو الـ60، كحلي #1A2B4C هو الـ30، ذهبي #C9A961 هو الـ10 — الذهبي للأكشن بس.

لو حاسس التصميم «مليان» — غالباً لون الـ 10% اتمدد. شيله من كل حتة ماعدا الـ CTA.
محتاج لون رابع للنجاح/الخطأ؟ أخضر وأحمر مكتومين (مش فاقعين) وبكميات أقل من الـ 10% كمان.
hack: قبل ما تضيف لون جديد، جرّب درجة أفتح/أغمق من ألوانك الحالية — غالباً هتكفي.

prompt_04.txt

طبّق قاعدة 60-30-10: الخلفية كريمي #F7F3EC حوالي 60% من الشاشة، الكحلي #1A2B4C للهيدر والعناوين والأقسام الداكنة 30%، والذهبي #C9A961 للأزرار والروابط المهمة فقط بنسبة لا تتعدى 10%. ممنوع استخدام الذهبي في الخلفيات أو النصوص الطويلة.

▶ demo · 60_30_10● live

60% نيوترال30% أساسي10%

#F7F3EC#1A2B4C#C9A961

‹/›05_type_scale.mdالنظام05

// Typography Scale

سلّم الخطوط — خط واحد وأحجام محسوبة

الصفحة المحترفة فيها خط واحد و4-5 أحجام بس، بينهم فرق واضح: مثلاً 40 / 28 / 20 / 16 / 13. الأحجام العشوائية (17 هنا و18 هناك و19 هناك) هي اللي بتدي إحساس «الهواة» من غير ما حد يعرف يحدد ليه.

rule 📏

خط واحد (Cairo للعربي) + سلّم أحجام ثابت + ارتفاع سطر 1.7–1.9 للنص العربي (العربي محتاج تنفس أكتر من الإنجليزي).

سطر النص المثالي 50–75 حرف — النص العريض بعرض الشاشة كلها متعب. اطلب max-width للفقرات.
البولد للتمييز مش للتزيين: لو 30% من النص bold، مفيش حاجة bold فعلياً.
hack عربي: بعض الخطوط الأجنبية «بتكسر» التشكيل والحروف المتصلة — التزم بخطوط مصممة للعربي: Cairo، Tajawal، IBM Plex Arabic.

prompt_05.txt

استخدم خط Cairo فقط بسلّم أحجام ثابت: 40px للعنوان الرئيسي، 28px لعناوين الأقسام، 17px للنص، 13px للتفاصيل. ارتفاع السطر line-height: 1.8 للنص العربي، وعرض الفقرة الأقصى 65ch. البولد 800 للعناوين فقط.

‹/›06_spacing_scale.mdالنظام06

// 8pt Spacing Scale

سلّم المسافات — مضاعفات الـ 8

كل المسافات في الصفحة (padding, margin, gap) من سلّم واحد: 8 / 16 / 24 / 32 / 48 / 64. مش لأن الـ8 رقم سحري — لكن لأن السلّم الثابت بيخلي كل حاجة «تحس» إنها من نفس العيلة. والقاعدة الذهبية: المسافة بين الأقسام أكبر من المسافة جوه القسم — كده العين بتفهم التجميع لوحدها.

rule 📏

جوه الكارت: 16–24. بين الكروت: 24. بين الأقسام: 64+. لو عنصرين مرتبطين، قرّبهم — القرب = علاقة.

أول حاجة تعملها لما تصميم يبان «رخيص»: ضاعف المسافات بين الأقسام — 80% من الوقت دي المشكلة كلها.
الـ AI بيبخل في الـ padding افتراضياً — اطلب «سخي في المسافات» صراحةً.

prompt_06.txt

استخدم سلّم مسافات ثابت بمضاعفات 8px: المسافات الداخلية للكروت 24px، بين الكروت 24px، وبين الأقسام 80px على الأقل. كن سخياً في المساحات البيضاء — التصميم لازم «يتنفس»، والعناصر المرتبطة ببعض قرّبها.

دبلومة الترجمة القانونية

١٦ محاضرة · شهادة معتمدة

سجل الآن

دبلومة الترجمة القانونية

١٦ محاضرة · شهادة معتمدة

سجل الآن

‹/›07_consistency.mdالنظام07

// Consistency

الاتساق — نفس القرار في كل مكان

العنصر الواحد بياخد قرار واحد مرة واحدة: نصف قطر زوايا واحد لكل الكروت، ظل واحد، ستايل زرار واحد. لما كل كارت ليه استدارة مختلفة، المشاهد بيحس «حاجة غلط» من غير ما يعرف يحددها — وده أخطر أنواع الانطباعات.

rule 📏

حدد مرة واحدة: radius: 12px لكل الكروت، radius: 8px لكل الأزرار، ظل واحد، وستايلين للأزرار بس (أساسي + ثانوي).

الـ AI في المحادثات الطويلة بينسى قراراته — كل ما تطلب صفحة جديدة، ذكّره بالنظام في أول البرومبت.
hack قوي: خلّي أول برومبت في المشروع يعرّف CSS variables للألوان والمسافات — وقوله يستخدمها دايماً. كده الاتساق بيبقى مفروض تقنياً مش بالنية.

prompt_07.txt

عرّف CSS variables في أول الملف للألوان والمسافات ونصف القطر، واستخدمها في كل العناصر بدون استثناء: --radius-card: 14px; --radius-btn: 9px; وظل واحد فقط لكل الكروت. ستايلان للأزرار فقط: أساسي ذهبي ممتلئ وثانوي outline.

// ── ج · اللمسات — الفرق بين الكويس والفاخر

‹/›08_shadows_depth.mdاللمسات08

// Shadows & Depth

الظلال والعمق — ناعم وواطي

الظل وظيفته يقول «العنصر ده عايم فوق الصفحة» — مش يلفت النظر لنفسه. الظل المحترف: كبير، شفاف جداً، ومزاح لتحت — زي ظل حقيقي من إضاءة فوقية. الظل الأسود الحاد حوالين الكارت هو توقيع تصميم 2010.

rule 📏

الوصفة: 0 12px 30px -12px rgba(0,0,0,.25) — انتشار واسع، شفافية عالية، إزاحة لتحت بس. ومستويين عمق كفاية: كارت عادي + كارت مرفوع.

الظل بيقوى عند التفاعل: hover يرفع الكارت ويكبّر ظله — دي إشارة «اضغطني» الأنيقة.
على الخلفيات الداكنة الظلال بتختفي — استخدم حدود فاتحة خفيفة (border: 1px بلون أفتح شوية) بدل الظل.

prompt_08.txt

استخدم ظلالاً ناعمة خفيفة فقط: box-shadow: 0 12px 30px -12px rgba(0,0,0,.25) لكل الكروت، وعند الـhover يرتفع الكارت 4px ويقوى الظل قليلاً. ممنوع الظلال السوداء الحادة أو الظلال الملونة.

▶ demo · shadow_depth● live

من غير ظل

مسطّح

ظل ناعم

✓ ده الصح

ظل حاد

✗ 2010

‹/›09_motion.mdاللمسات09

// Micro-interactions · Motion

الحركة الصح — عند التفاعل بس

الحركة الأنيقة اسمها micro-interaction: رد فعل صغير وسريع على فعل المستخدم — الزرار يرتفع مع الـ hover، ينضغط مع الكليك، رسالة تأكيد تطلع بنعومة. الحركة اللي بتحصل «لوحدها» من غير سبب هي اللي بتحوّل الموقع لسيرك.

rule 📏

المدة 150–250ms — أسرع من كده منظور، أبطأ بيعطّل. والحركة دايماً رد فعل على المستخدم، مش عرض مستمر.

3 حركات كافية لموقع كامل: hover الأزرار والكروت، ظهور ناعم للأقسام مع السكرول (مرة واحدة)، وtoast التأكيد.
hack: اطلب transition مش animation — الـ transition بطبيعته مربوط بتفاعل، فبيحميك من الحركة العشوائية.
احترم دايماً prefers-reduced-motion — في ناس الحركة بتدوّخهم فعلاً.

prompt_09.txt

أضف micro-interactions فقط: عند الـhover يرتفع الزرار قليلاً بمدة 200ms، وعند الضغط ينضغط. لا تضف أي حركة مستمرة أو تلقائية بدون تفاعل المستخدم، واحترم إعداد prefers-reduced-motion.

▶ demo · micro_interaction● live

اشترك الآن idle — مستنيhover — ارتفاع + ظل (200ms)click — انضغاط + تأكيد

▶ demo · chaos_vs_calm● live

✗ كل حاجة بتتحرك = صفر تركيز

🎉 عروض مذهلة!

خصومات لا تفوّت!!

✓ حركة واحدة هادفة عند التفاعل

دبلومة الترجمة

١٦ محاضرة معتمدة

‹/›10_simplicity.mdاللمسات10

// Simplicity — Less is More

البساطة — امسح لحد ما يبوظ

آخر معيار وأصعبهم نفسياً: التصميم بيكتمل مش لما مفيش حاجة تتضاف — لما مفيش حاجة تتشال. كل عنصر زيادة بيسرق انتباه من الـ CTA بتاعك. والـ AI طبيعته يضيف: أيقونات، شارات، تدرجات — دورك إنت المقص.

rule 📏

لعبة المسح: شيل عنصر من الصفحة. اتحسنت أو مفرقتش؟ سيبه مشال وكمّل. بوّظت؟ رجّعه. كرر لحد ما كل عنصر باقي يكون بيدافع عن وجوده.

الديمو المبهر ≠ التصميم الجيد: التصميم الجيد بيختفي وبيسيب المحتوى هو البطل.
لو محتار بين نسختين، اختار الأبسط — بعد أسبوع هتشكر نفسك.

prompt_10.txt

راجع الصفحة واحذف أي عنصر زخرفي لا يخدم هدفاً واضحاً: أيقونات زائدة، شارات، تدرجات، وأي نص ممكن يتقصّر. الهدف تصميم نظيف كل عنصر فيه له وظيفة — less is more.

// اتعلم من غلطتي — الجمال الخادع

اتعلم من غلطتي 🩹

٧ غلطات وقعت فيها بنفسي: تصميمات شكلها «جميل» في لحظة البناء — وخادع. كل غلطة: الفخ اللي خدعني، والعطل الحقيقي، والفيكس. دوس على أي واحدة.

error_log.txt — 7 entries

ERR_01حطيت تدرجات لونية (gradients) على كل عنصر›

😍 الفخ

في السكرينشوت الأولى شكلها «مبهرة وعصرية» — والـ AI بيحبها جداً لأنها بتملى الفراغ بسرعة.

💥 العطل

بعد ٥ دقايق استخدام بتتعب العين، بتاكل من وضوح النصوص، وبقت التوقيع الرسمي لتصميم «معمول بـ AI في دقيقتين» — انطباع رخيص.

✅ الفيكس

ألوان مسطحة (flat) في كل حتة. لو مصمم على تدرج، واحد بس في خلفية الـ hero وبدرجتين قريبين من نفس اللون. برومبت: «ألوان flat بدون أي gradients إلا خلفية الـ hero».

ERR_02خليت كل حاجة تتحرك — «عشان الموقع يبقى حيوي»›

😍 الفخ

كل عنصر بيدخل بأنيميشن، أيقونات بتلف، أرقام بتعد — أول ٱنطباع: «واو في شغل هنا!»

💥 العطل

لما كل حاجة بتتحرك، مفيش حاجة مهمة. الزائر مش عارف يركز فين، والموقع بقى تقيل على الموبايل، والناس اللي الحركة بتدوّخهم قفلوا.

✅ الفيكس

حركة عند التفاعل بس (hover/click) بمدة 150–250ms، وظهور ناعم واحد مع السكرول أول مرة. برومبت: «transitions عند التفاعل فقط، بدون حركة تلقائية مستمرة».

ERR_03اخترت نص رمادي فاتح «أنيق» على خلفية بيضا›

😍 الفخ

الرمادي الفاتح شكله «راقي وناعم» على شاشة اللابتوب الساطعة في الأوضة المضلمة — كل مواقع البورتفوليو الأجنبية الشيك بتعمله.

💥 العطل

طالب فتح الصفحة من موبايل في الشارع وبعتلي: «الصفحة فيها كلام أصلاً؟». التباين 2:1 يعني عملياً نص غير موجود لنص جمهورك.

✅ الفيكس

تباين 4.5:1 حد أدنى مقدس. اختبار سريع: نزّل سطوع شاشتك 30% — اللي اختفى غمّقه. برومبت: «تباين WCAG AA على الأقل لكل النصوص».

ERR_04استخدمت ٤ خطوط «كل واحد أحلى من التاني»›

😍 الفخ

خط للعناوين وخط للنص وخط «مميز» للاقتباسات وخط للأزرار — كل واحد لوحده تحفة فعلاً.

💥 العطل

مع بعض طلعوا سوق. كل خط بشخصية مختلفة = صفحة بتتكلم بأربع أصوات، والعين بتتعب من إعادة الضبط مع كل عنصر.

✅ الفيكس

خط واحد بأوزانه (Cairo: من 300 لـ 900 — ده 7 شخصيات جاهزة). لو مصمم على تاني، واحد للعناوين وواحد للنص وخلاص. برومبت: «خط Cairo فقط بكل الأوزان».

ERR_05صممت على محتوى وهمي قصير — وانبهرت بنفسي›

😍 الفخ

«عنوان تجريبي» و«نص هنا» — كل الكروت متساوية ومظبوطة والصفحة لوحة فنية.

💥 العطل

أول كورس حقيقي اسمه «دبلومة الترجمة القانونية المعتمدة للمحترفين — المستوى الثاني» كسر الكارت، ركب على الزرار، وخرّب الصف كله. التصميم اللي بينجح بس مع المحتوى المثالي تصميم فاشل.

✅ الفيكس

جرّب دايماً بأطول محتوى حقيقي عندك ومن أول لحظة، وبالعربي مش بالإنجليزي. برومبت: «استخدم عناوين عربية طويلة واقعية في المعاينة وتأكد إن التصميم يستحملها».

ERR_06فحصت التصميم على اللابتوب بس — وكان تحفة›

😍 الفخ

على شاشة 15 بوصة كل حاجة في مكانها، الأعمدة التلاتة جنب بعض، والـ hero ملء الشاشة ساحر.

💥 العطل

فوق 80% من جمهورنا بيفتح من الموبايل. الأعمدة اتكدست، الزراير بقت صغيرة متتداسش، والنص طلع برا الشاشة. أول يوم إطلاق كان يوم اعتذارات.

✅ الفيكس

افحص على عرض 390px الأول مش الآخر — mobile-first مش mobile-later. برومبت: «صمم mobile-first والأزرار بارتفاع 48px على الأقل للمس».

ERR_07حشيت أيقونة وemoji جنب كل سطر «عشان الحيوية»›

😍 الفخ

✨🚀💡 جنب كل ميزة — الصفحة باينة «ودودة ومليانة طاقة» والـ AI بيعمل كده تلقائياً أصلاً.

💥 العطل

الزخرفة الكتير ضوضاء بصرية: بتلهي عن المحتوى، وبتدي انطباع «قالب جاهز» — وبقت من علامات التصميم المستعجل المعمول بالـ AI.

✅ الفيكس

أيقونة لما يكون ليها وظيفة (توضيح فئة، تمييز حالة) — مش زينة سطور. برومبت: «بدون emoji في الواجهة، وأيقونات SVG بسيطة أحادية اللون عند الحاجة فقط».

export const masterPrompt = 'الوصفة الكاملة'

الوصفة الكاملة — برومبت النظام الجاهز

ده البرومبت اللي بتحطه في أول كل مشروع جديد — بيجمع الـ ١٠ معايير في أمر واحد. انسخه وعدّل الألوان على هويتك.

design_system_prompt.txt — master

اتبع نظام التصميم ده في كل الشغل الجاي بدون استثناء:
• الصفحة عربي RTL بالكامل، خط Cairo فقط، والنص محاذي يمين.
• الألوان بقاعدة 60-30-10: خلفية كريمي #F7F3EC، أساسي كحلي #1A2B4C، والذهبي #C9A961 للأزرار والأكشن فقط. ألوان flat بدون تدرجات.
• عرّف CSS variables للألوان والمسافات ونصف القطر واستخدمها دايماً: --radius-card:14px; --radius-btn:9px;
• سلّم خطوط ثابت: 40/28/17/13px، ارتفاع سطر 1.8، عرض فقرة أقصى 65ch.
• مسافات بمضاعفات 8px، سخية: 24px داخل الكروت و80px بين الأقسام.
• في كل شاشة بطل واحد: عنوان أكبر بوضوح وزرار CTA ذهبي واحد، والباقي outline.
• تباين WCAG AA (4.5:1) لكل النصوص.
• ظل ناعم واحد: 0 12px 30px -12px rgba(0,0,0,.25).
• حركة عند التفاعل فقط 150-250ms مع احترام prefers-reduced-motion.
• mobile-first: افحص على 390px أولاً، أزرار بارتفاع 48px للمس.
• بدون emoji في الواجهة وبدون عناصر زخرفية ملهاش وظيفة.
• جرّب بمحتوى عربي حقيقي طويل وتأكد إن التصميم يستحمله.

pre_launch_checklist.md — قبل ما تقول «خلصت»

[✓]غمّضت عيني — وعرفت مين البطل في كل شاشة

[✓]نزّلت سطوع الشاشة — وكل النصوص لسه مقروءة

[✓]الذهبي في الأكشن بس — مش مفروش في كل حتة

[✓]خط واحد وسلّم أحجام ثابت — مفيش حجم عشوائي

[✓]المسافات من سلّم الـ 8 — والأقسام بتتنفس

[✓]نفس الـ radius ونفس الظل في كل الكروت

[✓]الحركة عند التفاعل بس — مفيش سيرك

[✓]جربته على 390px بمحتوى عربي طويل حقيقي

[✓]لعبت لعبة المسح — وكل عنصر باقي بيدافع عن وجوده

[✓]مفيش تدرجات ولا emoji ولا زخرفة بدون وظيفة