الهوية البصرية
أين توجد أسماء المنتج وشعاره وأيقوناته وألوانه وخطوطه، وما الذي يجب تغييره لتصبح علامتك التجارية الخاصة.
لحزمة الحزمة الكاملة
أين توجد الهوية البصرية
تُضبط الهوية في الملفات، لا في شاشة إعدادات. المسارات داخل dashboard/.
| العنصر | المكان |
|---|---|
| الاسم والوصف والروابط وبيانات التواصل | src/config/brand.config.ts |
| الشعار بجوار الاسم | src/components/icons/KinoraMark.tsx، مرسوم بالشيفرة بدلًا من ملف صورة |
| أيقونة المتصفح (Favicon) وأيقونات التطبيق | src/app/ (favicon.ico وicon0.svg وicon1.png وapple-icon.png) وpublic/web-app-manifest-192x192.png و-512x512.png |
| إشارة المصدر في التذييل | src/config/author.config.ts |
| الألوان | src/styles/theme-variables.css |
| الخطوط | src/app/layout.tsx |
| النصوص | messages/<namespace>/<locale>.json، وتسميات الشريط الجانبي في src/layouts/dashboard/sidebar/config/navigationData.ts |
يُظهر yarn dev التغيير فورًا. أما بناء الإنتاج فيُضمِّن الهوية البصرية أثناء البناء، لذا شغّل yarn build مرة أخرى، أو docker compose up --build للحزمة الكاملة.
الاسم
يأتي المنتج باسم Kinora (كينورا بالعربية). كل شيء موجود في BRAND_CONFIG، في src/config/brand.config.ts؛ ولحقول النص قيمة en وقيمة ar.
| الحقل | أين يظهر |
|---|---|
name | الشريط الجانبي بجوار الشعار، والشريط العلوي لصفحات تسجيل الدخول وإنشاء الحساب وكلمة المرور، وتذييل لوحة التحكم، وعنوان بطاقة البدء، وشريط رؤى النشاط، ومُنشئ مسار GPX المُصدَّر. |
version | تذييل لوحة التحكم، بعد الاسم. |
company | اسم المؤسسة الذي تقرؤه محركات البحث. |
meta.title, meta.description, meta.keywords, meta.author | عنوان علامة تبويب المتصفح، ووصف كل صفحة وكلماتها المفتاحية. |
meta.ogImage, meta.twitterImage | الصورة المعروضة عند مشاركة صفحة، وهي مسار داخل public/. يأتي الاثنان بأيقونة التطبيق بحجم 512 px. |
domain.url | العنوان الأساسي لبيانات المشاركة الوصفية. يأتي بالقيمة https://yourdomain.com: اضبط عنوانك. |
theme.light, theme.dark | لون شريط أدوات المتصفح على الهواتف. |
manifest | اسم التطبيق المثبّت وألوانه وأيقوناته. |
links, contact | بيانات المؤسسة التي تقرؤها محركات البحث. تأتي مشيرة إلى صانع القالب: استبدلها. |
الاسم مكتوب أيضًا في بعض الرسائل: بطاقة الترحيب في messages/dashboard/en.json ("Welcome to Kinora") وتحيات المساعد في messages/ai-assistant/en.json ("Ask Kinora about…")، مع نظيراتها في ar.json. ابحث في المجلدين عن Kinora وكينورا.
الشعار والأيقونات
- الشعار، وهو سهمان صاعدان، هو ملف SVG في
src/components/icons/KinoraMark.tsx. يأخذ لونه من المظهر، فيبقى صحيحًا في الوضعين الفاتح والداكن. استبدل مساراته بشعارك، أو اعرض شعارك مكانه فيsrc/layouts/dashboard/sidebar/components/SidebarBrand.tsxوفي صفحة تسجيل الدخول (src/layouts/auth/login/components/AuthTopBar.tsxوAuthPanel.tsx). - أيقونة علامة تبويب المتصفح هي
src/app/favicon.icoمعicon0.svgوicon1.png؛ وapple-icon.pngهي أيقونة الشاشة الرئيسية في iPhone. - يستخدم التطبيق المثبّت
public/web-app-manifest-192x192.pngوpublic/web-app-manifest-512x512.png، ويستخدمهماbrand.config.tsأيضًا كصورة مشاركة. أبقِ أسماء الملفات، أو غيّر المسارات فيbrand.config.ts.
يأتي أيضًا public/assets/images/logo-for-lightmode.png وlogo-for-darkmode.png، لكن لا تعرضهما أي شاشة: لا يقرؤهما إلا شريط التنقل في src/layouts/app/NavBar، ولا تعرض أي صفحة ذلك الشريط. استبدالهما لا يغيّر شيئًا على الشاشة.
إشارة المصدر في التذييل
يعرض تذييل لوحة التحكم السنة وname وversion في جانب، و"by Aniq UI" في الجانب الآخر، وهو رابط إلى صانع القالب. ويحمل تذييل مربع البحث الإشارة نفسها. كلاهما يقرؤها من src/config/author.config.ts (name وurl وbyLabel) ويرسمها في src/layouts/dashboard/dashboardFooter.tsx وsrc/components/SearchModal/components/SearchFooter.tsx.
الألوان
كل لون هو رمز تصميم في src/styles/theme-variables.css، مع كتلة للمظهر الفاتح وأخرى للداكن. لون التمييز أخضر ليموني: --primaryColor هو #9ae600 في الاثنين، ومعه --primaryColorHover ورموز --accent-* للنص والتوهج والتدرجات. غيّرها وسيتبعها كل زر وحلقة ومخطط يستخدم لون التمييز.
- يستطيع كل حساب أيضًا اختيار لون التمييز والمظهر الخاصين به في الإعدادات، ضمن المظهر. يُحفظ هذا الاختيار مع الحساب ويعيد بناء رموز التمييز حوله.
manifest.themeColor(#9AE600) وthemeفيbrand.config.tsهما ألوان المتصفح نفسه، خارج الصفحة: اضبطهما بما يتناسب.
الخطوط
يُحمَّل خطّان من Google في src/app/layout.tsx عبر next/font: Inter للنص اللاتيني و IBM Plex Sans Arabic للعربية. استبدل أيًا من الاستيرادين هناك بخط آخر من next/font/google، مع الإبقاء على اسم variable الخاص به.
النصوص
كل كلمة ظاهرة موجودة في messages/، بمجلد لكل مساحة أسماء يحتوي على en.json وar.json. غيّر القيمة، وأبقِ المفتاح، وغيّرها في الملفين.
في واجهة API
لا تحتوي واجهة API على شعار أو لون. يكتب الزرع Kinora في مكانين قد ترغب في تغييرهما: إعداد التطبيق site_name (مخزّن، لكن لا شيء يقرؤه)، والجهاز "Kinora Band Pro" في back-end/src/database/seeders/fitness-devices-data.ts.