صمّم صفحتك على ذوقك

ثلاث طرق للتصميم — بدون أي كود

1. استوديو التصميم /design — اسحب ورتّب أماكن العناصر، أخفِ ما تريد، واختر تأثيرات جاهزة (توهّج، ظل، حركة، نمط أزرار، أحجام) بمعاينة حيّة فورية. النظام يولّد التنسيق بنفسه ويضمن اتساقه.
2. المساعد عبدالله — قل له ما تريد بلغتك: «اجعل أزراري زجاجية والروابط فوق» وهو ينفّذ عبر نفس المحرّك الآمن — لا يستطيع كسر تصميمك.
3. لوحة التحكم ← الثيم — الألوان، الخلفية/التدرّج، الخط، ونصف القطر (اللوحات الجاهزة).

كل ما يلي في هذه الصفحة (الأكواد والمعرّفات) اختياري للمحترفين الذين يريدون تحكماً أدق عبر CSS يدوي.

القاعدة الذهبية: كل شيء محصور داخل صفحتك

النظام يضيف تلقائياً نطاقاً (.uny-profile) أمام كل مُحدِّد تكتبه. هذا يعني:

• تنسيقك يطال صفحتك فقط — لا الموقع ولا لوحة التحكم ولا صفحات المستخدمين الآخرين.
• لا تحتاج لكتابة .uny-profile بنفسك — اكتب المُحدِّد العادي فقط والنظام يحصره.
• للخلفية واللون المميّز العام، استخدم خيارات الثيم الجاهزة (الألوان/التدرّج) — أوضح وأسهل من CSS.

متعرّفات العناصر (data-uny)

كل عنصر مهم في صفحتك له «اسم ثابت» تستهدفه بـ [data-uny="..."]. هذه الأسماء لا تتغيّر مع تحديثات المنصة، فتصميمك يبقى ثابتاً:

يمكنك أيضاً استهداف العناصر العامة مباشرةً مثل a (الروابط) وimg وh1 — كلها محصورة داخل صفحتك تلقائياً.

وضع المعرّفات: شاهدها على صفحتك مباشرة

لا تحتاج لحفظ الجدول. أضف ?ids=1 إلى رابط صفحتك، وستظهر شارة فوق كل عنصر تحمل اسمه ومعرّفه — اضغط الشارة لنسخ المعرّف ثم الصقه في «CSS مخصّص» أو أعطه لعبدالله:

https://unylinks.com/username?ids=1

وتجد الوضع نفسه بزر جاهز في: لوحة التحكم ← الثيم ← بطاقة «CSS مخصّص» («شاهد المعرّفات على صفحتك مباشرة»)، وفي محرّر التخطيط (زر «المعرّفات»). كما تجد قائمة معرّفات قابلة للنسخ بجانب خانة الـCSS في لوحة التحكم.

التخطيط الحر: غيّر أماكن كل شيء (CSS Grid)

تقدر ترتّب الصفحة كما يحلو لك وتنقل مكان كل عنصر. الصفحة مبنية على حاويتَي «شبكة» (grid) تتحكّم بترتيب عناصرهما عبر grid-template-areas:

• [data-uny="layout"] — الحاوية الكبرى. مناطقها: banner (الغلاف) · identity (كتلة الهوية) · content (الروابط والأقسام).
• [data-uny="identity"] — كتلة الهوية. مناطقها: avatar · name · username · niche · bio · stats · follow.

الروابط في الأعلى، ثم الهوية، والغلاف بالأسفل

[data-uny="layout"] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "identity"
    "banner";
}

داخل الهوية: الاسم فوق الصورة، ثم النبذة

[data-uny="identity"] {
  grid-template-areas:
    "name"
    "avatar"
    "username"
    "niche"
    "bio"
    "stats"
    "follow";
}

قاعدة مهمة: اذكر دائماً كل المناطق في القالب (٣ للهيكل و٧ للهوية) — المنطقة غير المذكورة لا تختفي بل تتكدّس فوق غيرها. لإخفاء عنصر استخدم [data-uny="niche"]{display:none}. النظام يضبط الهوامش والعرض والتوسيط تلقائياً في وضع التخطيط. ولتخطيط بعمودين ضع عمودين في grid-template-columns. وإن لم تعرف كيف، استخدم محرّر التخطيط أو اطلب من عبدالله.

أمثلة جاهزة — انسخها وعدّلها

صورة رمزية دائرية مع توهّج ناعم

[data-uny="avatar"] {
  border-radius: 9999px;
  box-shadow: 0 0 0 3px #fff, 0 10px 30px rgba(0,0,0,.45);
}

أزرار روابط بحواف دائرية وحركة عند المرور

[data-uny="link"] {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
[data-uny="link"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}

اسم أكبر بخط مميّز

[data-uny="name"] {
  font-size: 34px;
  letter-spacing: -.5px;
}

تأثير حركي (نبض خفيف لشارة التوثيق)

@keyframes uny-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
[data-uny="verification-badge"] {
  animation: uny-pulse 2s ease-in-out infinite;
}

المسموح والممنوع

الوضع الآمن (لو اختفى شيء)

إذا أخفى تصميمك عنصراً أو ظهرت مشكلة، أضف ?safe=1 إلى رابط صفحتك لمعاينتها بدون الـCSS المخصّص:

https://unylinks.com/username?safe=1

هذا الوضع لك أنت فقط للمعاينة. ولإرجاع التصميم الافتراضي نهائياً: لوحة التحكم ← الثيم ← إعادة تعيين.

دع عبدالله يصمّم لك

إن لم تكن تعرف CSS، فلا مشكلة. افتح المساعد عبدالله من لوحة التحكم واطلب ما تريد بلغتك:

• «اجعل أزراري بحواف دائرية وظل ناعم».
• «كبّر اسمي وخلّ خلفية الصفحة متدرّجة غامقة».
• «صمّم لي صفحة أنيقة بالأبيض والأسود».

سيكتب عبدالله الـCSS المناسب ويطبّقه على صفحتك مباشرةً — وأنت تحفظ أو تعدّل كما يحلو لك.

الأسئلة الشائعة