📋 Task Manager Pro – مدیریت تسک‌های حرفه‌ای

یک برنامه وب تمام‌ویژگی برای مدیریت، ویرایش و خروجی‌گیری از تسک‌ها با قابلیت آپلود فایل JSON، ذخیره‌سازی خودکار، تم روشن/تاریک و رابط کاربری واکنش‌گرا.

---

✨ ویژگی‌های برجسته

• 📂 آپلود فایل JSON – بارگذاری لیست تسک‌ها با کشیدن و رها کردن یا انتخاب فایل
• ✏️ ویرایش لحظه‌ای – تغییر عنوان، توضیحات، لینک، زمان و وضعیت انجام تسک‌ها
• 💾 ذخیره‌سازی خودکار – همه تغییرات در localStorage مرورگر ذخیره می‌شوند
• 🌓 تم روشن/تاریک – تغییر پوسته با یک کلیک، وضعیت تم در مرورگر ذخیره می‌شود
• ✅ چک‌باکس انجام – علامت‌گذاری تسک‌های انجام‌شده با افکت بصری
• ➕ افزودن تسک جدید – با کلیک دکمه یا کلید میانبر Ctrl+Shift+N
• 🗑️ حذف تسک – هر تسک دکمه حذف مخصوص به خود را دارد
• 📤 خروجی JSON – دریافت فایل خروجی از همه تسک‌ها یا فقط انجام‌شده‌ها با تاریخ در نام فایل
• 📱 واکنش‌گرا – طراحی کاملاً سازگار با موبایل، تبلت و دسکتاپ
• ⌨️ میانبرهای صفحه‌کلید – افزایش سرعت کار با برنامه

---

🖼️ پیش‌نمایش

تم روشن	تم تاریک

---

🚀 نحوه استفاده

۱. اجرای برنامه

فایل index.html را در مرورگر خود باز کنید. نیازی به نصب یا سرور نیست – همه چیز در یک فایل مستقل قرار دارد.

۲. بارگذاری تسک‌ها

• روش اول: روی ناحیه مشخصشده کلیک کنید و یک فایل JSON انتخاب کنید.
• روش دوم: فایل JSON را با ماوس روی ناحیه آپلود بکشید و رها کنید.

۳. مدیریت تسک‌ها

• ویرایش: روی هر فیلد (عنوان، توضیحات، لینک، زمان) کلیک کنید و متن را تغییر دهید – تغییرات بلافاصله ذخیره می‌شوند.
• وضعیت انجام: چک‌باکس هر تسک را علامت بزنید تا به‌عنوان انجام‌شده ثبت شود.
• افزودن تسک جدید: دکمه «افزودن تسک جدید» را بزنید یا کلیدهای Ctrl+Shift+N را فشار دهید.
• حذف تسک: روی آیکون سطل زباله 🗑️ در هر تسک کلیک کنید و حذف را تأیید کنید.

۴. خروجی گرفتن

• خروجی همه تسک‌ها: دکمه «خروجی (همه)» یک فایل JSON با تمام تسک‌ها ایجاد می‌کند.
• خروجی انجام‌شده‌ها: دکمه «خروجی انجام‌شده‌ها» فقط تسک‌های با چک‌باکس فعال را خروجی می‌دهد.

۵. پاک کردن همه

با دکمه «پاک کردن همه» و تأیید، تمام تسک‌ها حذف می‌شوند.

---

📄 ساختار فایل JSON ورودی/خروجی

برنامه فایل‌هایی با ساختار زیر را می‌پذیرد و تولید می‌کند:

[
  {
    "title": "عنوان تسک",
    "description": "توضیحات کامل",
    "link": "https://example.com",
    "time": "2026-08-05T18:00",
    "done": false
  },
  {
    "title": "تسک انجام‌شده",
    "description": "این تسک قبلاً کامل شده",
    "link": "",
    "time": "2026-08-02T11:30",
    "done": true
  }
]

نکته: فیلدهای title، description، link، time و done قابل‌شناسایی هستند. در صورت وجود فیلدهای دیگر، برنامه آن‌ها را نادیده می‌گیرد.

---

🛠️ تکنولوژی‌های استفاده‌شده

• HTML5 – ساختار معنایی و دسترس‌پذیر
• CSS3 – انیمیشن‌ها، متغیرهای CSS برای تم‌ها، طراحی مدرن با Flexbox
• JavaScript (ES6+) – مدیریت وضعیت، ذخیره‌سازی محلی، پردازش فایل، رویدادهای تعاملی
• Font Awesome – آیکون‌های زیبا و حرفه‌ای
• LocalStorage API – ذخیره‌سازی داده‌ها در مرورگر کاربر

---

📦 نصب و اجرا

# ۱. مخزن را کلون کنید
git clone https://github.com/yourusername/task-manager-pro.git

# ۲. وارد پوشه پروژه شوید
cd task-manager-pro

# ۳. فایل index.html را در مرورگر باز کنید
# (مثلاً با دابل‌کلیک یا استفاده از Live Server در VS Code)

نیازی به npm، باندلر یا سرور ندارید! فقط یک مرورگر مدرن کافی است.

---

🎨 سفارشی‌سازی

تغییر تم‌ها

متغیرهای CSS در بخش :root و body.dark قرار دارند. می‌توانید رنگ‌ها، فونت‌ها و فاصله‌ها را به‌دلخواه تغییر دهید:

:root {
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --text: #333;
  --btn-primary: #3498db;
  /* ... */
}

افزودن فیلدهای جدید به تسک

برای اضافه کردن فیلد جدید (مثلاً priority) باید: ۱. در ساختار tasks در JavaScript آن را تعریف کنید. ۲. در تابع render یک ورودی جدید به کارت اضافه کنید. ۳. رویداد input یا change مربوطه را برای ذخیره‌سازی متصل کنید.

---

🤝 مشارکت در توسعه

اگر ایده‌ای برای بهبود دارید یا باگ‌هایی پیدا کرده‌اید، خوشحال می‌شویم:

1. مخزن را فورک کنید.
2. یک برنچ جدید برای ویژگی یا رفع باگ ایجاد کنید (git checkout -b feature/amazing-feature).
3. تغییرات خود را کامیت کنید (git commit -m 'Add some amazing feature').
4. برنچ خود را پوش کنید (git push origin feature/amazing-feature).
5. یک درخواست کشیدن (Pull Request) باز کنید. .

---

با Task Manager Pro، کارهای خود را سازماندهی کنید و بهره‌وری را افزایش دهید! 🚀