مستندات

پروفایل

شروع سریع

ساختار پوشه‌ها و راه‌اندازی

این قالب کاملاً استاتیک است؛ فقط فایل‌ها را روی هر هاست یا سرور محلی قرار دهید.

tourvisto-admin/
├── index.html          داشبورد اصلی
├── typography.html     تایپوگرافی
├── colors.html         رنگ‌ها
├── buttons.html        دکمه‌ها
├── components.html     المان‌ها
├── cards.html          کارت‌ها
├── forms.html          فرم‌ها
├── tables.html         جدول‌ها
├── charts.html         نمودارها
├── icons.html          آیکون‌ها
├── profile.html        پروفایل
├── settings.html       تنظیمات
├── login.html · register.html · 404.html · docs.html
├── css/style.css       استایل و متغیرهای قالب
└── js/main.js · js/charts.js

تغییر رنگ برند

همه رنگ‌ها با متغیر CSS کنترل می‌شوند

:root {
  --purple-600: #6c4ef2;   /* رنگ برند */
  --purple-900: #4c31c4;   /* تیره */
  --radius-lg: 22px;       /* گردی گوشه‌ها */
}

کافی است مقدار --purple-600 را عوض کنید تا کل قالب تغییر کند.

لایه‌بندی صفحه

ساختار سه‌لایه برای طراح

  1. لایه ۱ — سایدبار: .app-sidebar در سمت راست، شامل لوگو، منو و کارت تبلیغ.
  2. لایه ۲ — محتوا: .app-main شامل هدر (.main-header) و بخش‌های .content-card.
  3. لایه ۳ — فوتر: .app-footer در پایین محتوا.

در داشبورد اصلی یک ستون سوم (.app-aside) برای پروفایل و ابزارک‌ها وجود دارد.

حالت تاریک و راست‌چینی

کلیدهای آماده قالب

با دکمه ماه در هدر، کلاس theme-dark به <html> اضافه می‌شود و در حافظه مرورگر ذخیره می‌ماند.

قالب با dir="rtl" و نسخه راست‌چین بوت‌استرپ ۵ ساخته شده و همه فاصله‌ها منطقی (logical) هستند.

اعتبار منابع

کتابخانه‌های استفاده‌شده

  • Bootstrap 5.3 RTL — کتابخانه رابط کاربری
  • Bootstrap Icons 1.11 — آیکون‌ها
  • Chart.js 4.4 — نمودارها
  • Vazirmatn — فونت فارسی
  • Unsplash — تصاویر نمونه