یک ساختار منظم و استاندارد برای ساخت پنل ادمین با HTML, CSS, JavaScript و لایبرریهای کمکی — مناسب برای آموزش و توسعه عملی.
این پروژه بهصورتی طراحی شده که روی GitHub Pages بدون تغییر مسیرها اجرا شود.
free-moder-admin-panel/
│
├── docs/ # مستندات یا فایلهای آموزشی
├── node_modules/ # پکیجهای نصبشده NPM
│
├── pages/ # صفحات HTML
│ │
│ ├── components/ # اجزای HTML UI قابلاستفاده مجدد
│ ├── forms/ # فرمها
│ ├── media/ # تصاویر و ویدیو
│ ├── navigation/ # منو، هدر، فوتر
│ ├── other/ # اجزای متفرقه
│ └── tables/ # جدولها
│
├── src/
│ ├── assets/ # منابع استاتیک
│ │ │
│ │ └── img/ # تصاویر
│ │ └── ... # غیره
│ │
│ ├── css/ # فونت ها
│ │ │
│ │ └── tailwind-output.css # خروجی tailwind
│ │
│ ├── fonts/ # فونت ها
│ │
│ ├── input_styles/ #tailwind استایل های از قبل تعیین شده برای
│ │
│ │
│ ├── js/ # کدهای JavaScript
│ │ │
│ │ ├── components/ # اسکریپتهای اجزای UI
│ │ ├── helpers/ # توابع کمکی
│ │ ├── pages/ # اسکریپت اختصاصی هر صفحه
│ │ └── main.js # اسکریپت اصلی پروژه
│
├── libs/ # لایبرریهای محلی
│
│
│── temp/ # فایلهای موقت
│
├── package.json # اطلاعات و پکیج پروژه
├── package-lock.json # نسخه دقیق پکیجها
├── README.md # مستندات
└── tailwind.config.js # تنظیمات TailwindCSS
📦 پوشه
پوشه src/js/helpers/ برای توابع کمکی و ابزارهایی است که در چند بخش پروژه استفاده میشوند.
src/js/helpers/
├── helper.js # توابع کمکی مثل دارک مود و ...
🌐 نکات مسیرگذاری برای
# نصب پکیجها
npm install
# اجرای سرور محلی (مثلا با live-server)
#و بعد کامپایل کردن استایل ها
npm run tailwind