الهوية البصرية

أين يوجد اسم المنتج وشعاره وأيقوناته وألوانه وخطوطه في كل تطبيق من تطبيقات Learnio، وما الذي تغيّره لتجعله علامتك التجارية الخاصة.

لحزمة الحزمة الكاملة

أين توجد الهوية البصرية

تُضبط الهوية البصرية في الملفات، لا في لوحة الإدارة. يحتفظ موقع الطلاب ولوحة الإدارة كلٌّ منهما بنسخته الخاصة، لذا غيّر كل تطبيق تنشره.

العنصر	موقع الطلاب (`frontend/`)	لوحة الإدارة (`admin-dashboard/`)
الاسم والوصف والروابط	`src/config/site.ts` و`src/config/brand.config.ts`	`src/config/brand.config.ts`
ملفات الشعار	`public/assets/brand/`	`public/assets/brand/` و`public/assets/images/`
أيقونة المتصفح (Favicon) وأيقونات التطبيق	`src/app/` و`public/icons/`	`src/app/`، الذي يشير إليه الـ manifest في `brand.config.ts`
الألوان	`src/styles/theme-variables.css` و`src/styles/dashboard-theme.css`	`src/styles/theme-variables.css`
الخطوط	`src/app/layout.tsx` و`src/styles/base.css`	`src/app/layout.tsx` و`src/styles/base.css`
النصوص التي تذكر اسم المنتج	`messages/<namespace>/<locale>.json`	`src/config/brand.config.ts`

يُظهر yarn dev التغيير فورًا. أما بناء الإنتاج فيُضمِّن الهوية البصرية أثناء البناء، لذا شغّل yarn build مرة أخرى، أو docker compose up --build للحزمة الكاملة.

الاسم في موقع الطلاب

المسارات داخل frontend/.

الإعداد	أين يظهر
`SITE.name` في `src/config/site.ts`	تبويب المتصفح (`Page \| Name`)، ومعاينات المشاركة، واسم التطبيق المثبّت، والبيانات المنظَّمة التي تقرؤها محركات البحث.
`SITE.description` و`SITE.keywords`	الوصف التعريفي (meta description)، ومعاينات المشاركة، ووصف التطبيق المثبّت.
`SITE.twitterHandle`	الوسمان `twitter:site` و`twitter:creator` في بطاقة المشاركة لكل صفحة. اكتب المعرّف من دون `@`؛ والقيمة الفارغة تحذف الوسمين.
`SITE.social`	التذييل وقائمة الجوال. اكتب أسماء المستخدمين (handles)، لا الروابط. الاسم الفارغ يزيل ذلك الرابط.
`BRAND_CONFIG` في `src/config/brand.config.ts`	لوحة الطالب: `shortName` بجوار الشعار في الشريط الجانبي، و`name` و`version` و`company` في تذييلها. لكل منها قيمة `en` وقيمة `ar`.

يأتي العنوان العام للموقع من NEXT_PUBLIC_SITE_URL، لا من هذه الملفات.

إعدادات موقع الطلاب ولوحة الإدارة

يظهر الاسم أيضًا في النصوص: سطر حقوق النشر في التذييل، والاسم الذي تقرؤه التقنيات المساعدة للشعار (brand.logoLabel في messages/layouts)، والصفحة الرئيسية وصفحة «من نحن»، وصفحات تسجيل الدخول، والصفحات القانونية. ابحث عن كل موضع له في اللغتين:

الطرفيةفي frontend

grep -rn "Learnio" messages
grep -rn "ليرنيو" messages

هناك نص واحد مكتوب في الشيفرة: الوسم LearnioLMS في src/components/ui/ShareModal.tsx.
تحتوي الشروط وسياسة الخصوصية في messages/legal على بيانات اتصال نموذجية (legal@learnio.com وprivacy@learnio.com وعنوان في دبي). استبدلها ببياناتك قبل الإطلاق.

الاسم في لوحة الإدارة

كل شيء موجود في BRAND_CONFIG، في admin-dashboard/src/config/brand.config.ts. لحقول النص قيمة en وقيمة ar.

الحقل	أين يظهر
`name`	عناوين الصفحات (`Page \| Name`)، واسم الموقع في معاينة المشاركة، وتذييل لوحة الإدارة.
`shortName`	بجوار الشعار أعلى الشريط الجانبي، بأحرف كبيرة، وبجوار الشعار على بطاقة تسجيل الدخول. اجعله قصيرًا: الاسم الطويل يُقطع بعلامة حذف.
`company`	تذييل لوحة الإدارة، وسطر حقوق النشر أسفل صفحات تسجيل الدخول، الذي تبنيه `getCopyrightText` من السنة ومن هذا الاسم.
`version`	تذييل لوحة الإدارة.
`logo.icon`	الشعار أعلى الشريط الجانبي وعلى بطاقة تسجيل الدخول.
`meta`	العنوان والوصف والكلمات المفتاحية والمؤلف الافتراضية، وصور المشاركة.
`domain.url`	الأساس للروابط المطلقة في البيانات الوصفية. يأتي بالقيمة `https://yourdomain.com`: اضبطه على عنوان لوحة الإدارة نفسها.
`logo.alt`	الاسم الذي تقرؤه التقنيات المساعدة للشعار في صفحات تسجيل الدخول.
`theme`, `manifest`	ألوان المتصفح والتطبيق المثبّت وأيقونات التطبيق المثبّت، أدناه.
`links`, `contact`	البيانات المنظَّمة في رأس الصفحة فقط. لا يقرؤها أي عنصر مرئي.

كل موضع يذكر اسم المنتج يقرأ BRAND_CONFIG، لذا فإن تغيير الاسم هناك يغيّر الشريط الجانبي، وبطاقة تسجيل الدخول، والتذييلين، وعناوين الصفحات معًا. ولا تحتوي ملفات الرسائل في لوحة الإدارة على اسم المنتج: جملة سطر حقوق النشر ترجمة (layouts.footer.copyright) يُملأ فيها الاسم من الإعدادات.

ملفات الشعار

أبسط تغيير هو استبدال كل ملف بملفك الخاص في المسار نفسه وبالاسم نفسه. استخدم صورة PNG بخلفية شفافة.

التطبيق	الملف	الحجم	أين يظهر
موقع الطلاب	`public/assets/brand/learnio-wordmark.png`	986 × 293	شريط التنقل، وقائمة الجوال، والتذييل، وصفحات تسجيل الدخول، في السمتين.
موقع الطلاب	`public/assets/brand/learnio-mark.png`	512 × 474	الشريط الجانبي في لوحة الطالب.
لوحة الإدارة	`public/assets/brand/learnio-mark.png`	512 × 474	الشريط الجانبي وبطاقة تسجيل الدخول، عبر `logo.icon`. وهي أيضًا صورة المشاركة الافتراضية، أدناه.
لوحة الإدارة	`public/assets/images/logo-for-lightmode.png` و`logo-for-darkmode.png`	986 × 293	الشريط العلوي في صفحات تسجيل الدخول، ملف لكل سمة.

يرسم موقع الطلاب شعارًا نصيًا واحدًا على الصفحات الفاتحة والداكنة، فاختر تصميمًا يُقرأ بوضوح على كليهما.
في لوحة الإدارة، يختار --logo-bg-image في src/styles/theme-variables.css ملفَّي السمتين. ويأتيان بالصورة نفسها.
النسخة الخاصة بلوحة الإدارة من learnio-wordmark.png لا تستخدمها أي صفحة.

لاستخدام ملف باسم آخر في لوحة الإدارة، وجّه logo.icon في BRAND_CONFIG إليه. وإذا كان لعملك الفني شكل مختلف، فحدّث المقاس المعلن كي لا يتمدد: قيمتا width وheight في ASSETS في الملف src/components/ui/BrandLogo.tsx في موقع الطلاب، وwidth={512} وheight={474} في src/layouts/dashboard/sidebar/components/SidebarBrand.tsx (في التطبيقين) وفي src/layouts/auth/components/FormPanel.tsx في لوحة الإدارة.

أيقونة المتصفح وأيقونات التطبيق وصور المشاركة

يعثر Next.js على الملفات في src/app/ بأسمائها ويكتب وسوم الصفحة الخاصة بها، لذا استبدل الملفات وأبقِ أسماءها.

التطبيق	الملف	الحجم	الاستخدام
كلاهما	`src/app/favicon.ico`	عدة أحجام في ملف واحد	تبويب المتصفح
كلاهما	`src/app/icon.png`	512 × 512	أيقونة المتصفح
كلاهما	`src/app/apple-icon.png`	180 × 180	الشاشة الرئيسية في iOS
موقع الطلاب	`public/icons/icon-192.png`, `public/icons/icon-512.png`	مربع بحجم 192 و512	التطبيق المثبّت. والأيقونة بحجم 512 هي أيضًا الشعار في البيانات المنظَّمة.
موقع الطلاب	`public/icons/icon-maskable-512.png`	512 × 512	Android، الذي قد يقصّها على شكل دائرة. أبقِ الشعار بعيدًا عن الحواف بمسافة كافية.
موقع الطلاب	`src/app/opengraph-image.png`, `src/app/twitter-image.png`	1200 × 630	معاينات الروابط

للوحة الإدارة ملف manifest واحد لتطبيق الويب، يُقدَّم على /manifest.webmanifest من src/app/manifest.ts، ويقرأ manifest في BRAND_CONFIG:

يسرد manifest.icons أيقونات التطبيق المثبّت: /icon.png (512 × 512) و/apple-icon.png (180 × 180)، وهما الملفان الموجودان في src/app/. استبدال هذين الملفين يغيّر أيقونة المتصفح وأيقونة التطبيق المثبّت معًا. وإذا وجّهت أحد المدخلات إلى ملف آخر، فاكتب مقاسه الحقيقي.
meta.ogImage وmeta.twitterImage هما معاينتا الروابط، و/assets/brand/learnio-mark.png افتراضيًا. تعلن البيانات الوصفية أن الصورة 512 × 474 وتستخدم البطاقة الصغيرة summary، لذا فإن استبدالها بصورة بمقاس آخر يتطلب تغيير width وheight في src/app/layout.tsx معها.
تطلب لوحة الإدارة من محركات البحث عدم فهرستها، في البيانات الوصفية للصفحات وفي public/robots.txt: فهي أداة للطاقم، لا صفحة عامة.

الألوان في موقع الطلاب

تقرأ الصفحات العامة ألوانها من متغيرات CSS في src/styles/theme-variables.css: القيم الفاتحة تحت :root، والداكنة تحت .dark. البرتقالي الخاص بالعلامة هو #FF6A3D.

المتغير	ما يلوّنه
`--primaryColor`, `--primaryColorHover`, `--primaryColorLight`	الأزرار والروابط والحالات النشطة، والدرجة الباهتة خلفها.
`--brand-start`, `--brand-end`	لونا العلامة الأساسيان: البرتقالي للإجراءات، والأصفر للتقدّم والأسعار. يُضبطان مرة أخرى تحت `.dark`.
`--brand-start-ink`, `--brand-end-ink`, `--brand-figure-ink`	درجات أغمق من الألوان نفسها للنصوص، حتى تبقى مقروءة على الصفحة الفاتحة.
`--brand-action-hover`, `--brand-dark-pink`	حالة التمرير فوق الزر المعبّأ، واسم قديم لتعبئة اللون الأساسي.
`--background`, `--surface`, `--text`, `--border`	الصفحة والبطاقات والنصوص والخطوط الفاصلة.

تستخدم لوحة الطالب بعد تسجيل الدخول ألوان لوحة الإدارة، المنسوخة إلى src/styles/dashboard-theme.css والمقصورة على لوحة الطالب. لونها البرتقالي هو #FF8A00. تُحدَّث النسخة يدويًا: عندما يتغير لون في theme-variables.css الخاص بلوحة الإدارة، غيّره في هذا الملف أيضًا.
بعض الرسوم التوضيحية تكتب البرتقالي مباشرة بدلًا من استخدام متغير: ملف المدرّس الشخصي، وخطوات "How it works" في الصفحة الرئيسية. ابحث في src/features عن FF6A3D.
اللون الذي يرسمه المتصفح حول الصفحة (شريط العنوان على الهاتف) هو SITE.browserChrome في src/config/site.ts، بقيمة لكل سمة تطابق خلفية الصفحة في تلك السمة. أما ألوان التطبيق المثبّت فهي SITE.themeColor وSITE.backgroundColor في الملف نفسه.

الألوان في لوحة الإدارة

كل الألوان متغيرات CSS في src/styles/theme-variables.css، الفاتحة تحت :root والداكنة تحت .dark. البرتقالي الخاص بالعلامة هو --primaryColor، بالقيمة #ff8a00 في السمتين، مع --primaryColorHover لحالة التمرير.

درجات البرتقالي مكتوبة كقيم مستقلة: عائلة --accent-*، وعائلة --chip-*، و--btn-primary-fill الذي قيمته #ff6a3d في السمة الفاتحة. لتغيير لون العلامة، ابحث في الملف عن ff8a00 و255, 138, 0 وff6a3d وأعد ضبط الدرجات المجاورة لها.
باستثناء ألوان المتصفح أدناه، هذا الملف هو الموضع الوحيد الذي تكتب فيه لوحة الإدارة اللون البرتقالي. لا يوجد مكوّن يكتبه مباشرة في الشيفرة.
ألوان إطار المتصفح هي theme.light وtheme.dark في BRAND_CONFIG. ويستخدم التطبيق المثبّت manifest.themeColor وmanifest.backgroundColor.

الخطوط

يحمّل التطبيقان خط Inter للإنجليزية وخط IBM Plex Sans Arabic للعربية عبر next/font/google في src/app/layout.tsx، الذي يقدّمهما من نطاقك الخاص. ويبدّل src/styles/base.css إلى الخط العربي عندما تكون لغة الصفحة ar.

التطبيق	متغير الخط اللاتيني	متغير الخط العربي
موقع الطلاب	`--font-inter`	`--font-ibm-plex-arabic`
لوحة الإدارة	`--font-sans-latin`	`--font-sans-arabic`

لتغيير خط، استورد خطًا آخر من next/font/google وأبقِ اسم variable الخاص به، فتلتقطه ملفات الأنماط دون أي تغيير. في موقع الطلاب:

frontend/src/app/layout.tsx

import { IBM_Plex_Sans_Arabic, Manrope } from "next/font/google";

const inter = Manrope({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

الخط غير المتغيّر يحتاج إلى قائمة weight، كما في الخط العربي. ويذكر src/styles/base.css في موقع الطلاب أيضًا 'Inter' كخط احتياطي؛ حدّثه إذا غيّرت اسم المتغير.

رسائل البريد الإلكتروني وواجهة API

المُرسِل: MAIL_FROM في back-end/.env هو الاسم والعنوان اللذان تأتي منهما كل رسالة بريد إلكتروني، مثل Learnio <noreply@example.com>.
الاسم: تذكر الرسائل اسم المنتج عبر العنصر النائب {site} في src/i18n/translations/<locale>/mail.json، الذي يُملأ من الإعداد site_name. غيّره من تبويب App Settings ضمن Settings في لوحة الإدارة؛ ويُطبَّق على الرسالة التالية المرسلة.
الردود: الإعداد support_email هو عنوان الرد لكل رسالة، فيصل الرد إلى شخص حقيقي لا إلى المرسل الذي لا يستقبل الردود.
الصياغة: العناوين ونصوص الرسائل موجودة في src/i18n/translations/en/mail.json وsrc/i18n/translations/ar/mail.json.
المظهر: لا تحمل رسائل البريد الإلكتروني أي شعار. ألوانها مكتوبة في src/modules/mail/templates/layout.ts (INK وMUTED وPAGE وCARD)، لأن برامج البريد تتجاهل ملفات الأنماط.
الروابط في رسائل البريد الإلكتروني تفتح موقع الطلاب على FRONTEND_URL.

إعدادات البريد الإلكتروني

تبويب App Settings لا يغيّر هوية التطبيقات

لا يغيّر site_name وsupport_email سوى الرسائل. يأخذ موقع الطلاب ولوحة الإدارة اسمهما وشعارهما وألوانهما من الملفات أعلاه، فغيّرها أيضًا.