دانلود اسکریپت مدیریت مخاطبین ایمیل با HTML، CSS و JavaScript (به همراه سورس‌کد کامل)

💌 دانلود اسکریپت مدیریت مخاطبین ایمیل با HTML، CSS و JavaScript (به همراه سورس‌کد کامل)

🌟 معرفی پروژه

به دنیای Email Contacts Manager خوش آمدید — یک ابزار مدرن و کاربردی برای مدیریت و سامان‌دهی مخاطبین ایمیل به ساده‌ترین شکل ممکن!
این اپلیکیشن تحت وب با استفاده از HTML، CSS و JavaScript ساخته شده و رابط کاربری زیبا، سریع و کاملاً واکنش‌گرا دارد.

چه برای استفاده شخصی و چه برای مدیریت ارتباطات حرفه‌ای، این ابزار به شما کمک می‌کند تا مخاطبین مهم خود را همیشه در دسترس داشته باشید.
با قابلیت‌هایی مانند برچسب‌گذاری (Tags)، نشان‌گذاری موارد مورد علاقه (Favorites) و جستجوی هوشمند، دیگر نیازی به فایل‌های اکسل یا لیست‌های پراکنده نخواهید داشت.

🧩 امکانات و ویژگی‌ها

🔹 عملکرد کامل CRUD

• افزودن، مشاهده، ویرایش و حذف مخاطبین

🔹 سازمان‌دهی پیشرفته مخاطبین

• پشتیبانی از سیستم برچسب‌گذاری (Tags) با دسته‌بندی‌های دلخواه

• امکان علامت‌گذاری مخاطبین محبوب

• گزینه‌های مرتب‌سازی متنوع (بر اساس نام، تاریخ و...)

🔹 جستجو و فیلتر هوشمند

• جستجوی سریع بر اساس نام، ایمیل یا ویژگی‌های دیگر

• فیلتر خودکار نتایج هم‌زمان با تایپ

🔹 عملیات گروهی (Bulk Actions)

• انتخاب چند مخاطب به‌صورت هم‌زمان

• افزودن یا حذف برچسب برای چندین مخاطب

• حذف یا علامت‌گذاری گروهی به‌عنوان مورد علاقه

🔹 طراحی مدرن و زیبا (UI/UX)

• حالت تاریک و روشن (Dark/Light Mode)

• طراحی کاملاً واکنش‌گرا (Responsive) برای موبایل و دسکتاپ

• انیمیشن‌های نرم و دل‌نشین در جابجایی‌ها

• نمای کارت‌محور (Card Layout) برای نمایش مخاطبین

🔹 ذخیره‌سازی امن و آفلاین

• داده‌ها به‌صورت کامل در localStorage مرورگر ذخیره می‌شوند

• بدون نیاز به اتصال سرور یا دیتابیس خارجی

• حفظ اطلاعات حتی پس از بستن مرورگر

🛠️ فناوری‌های مورد استفاده

• HTML5 برای ساختار صفحه

• CSS3 (Flexbox و Grid) برای طراحی چیدمان

• Vanilla JavaScript برای منطق و عملکرد

• Font Awesome برای آیکون‌ها

• Google Fonts (Poppins) برای تایپوگرافی مدرن

• localStorage API برای نگهداری اطلاعات

📱 اصول طراحی

• طراحی موبایل‌محور (Mobile-First)

• رعایت اصول دسترسی‌پذیری (Accessibility)

• استفاده از CSS Variables برای تم‌ها

• ساختار کد تمیز و قابل توسعه

🚀 راهنمای استفاده از پروژه

۱. شروع به کار

• فایل زیپ سورس‌کد را دانلود کنید.

• آن را از حالت فشرده خارج نمایید.

• فایل index.html را در هر مرورگر مدرن باز کنید.

بدون نیاز به نصب یا راه‌اندازی سرور – همه‌چیز در سمت کاربر اجرا می‌شود.

۲. افزودن مخاطب

1. روی دکمه "+ افزودن مخاطب" کلیک کنید.

2. نام و ایمیل را وارد کنید (فیلدهای الزامی).

3. سایر جزئیات مانند تلفن، شرکت یا یادداشت‌ها را اضافه کنید.

4. برچسب‌ها را انتخاب یا تایپ کنید.

5. روی "ذخیره مخاطب" کلیک کنید.

۳. مشاهده و ویرایش مخاطبین

• روی هر کارت مخاطب کلیک کنید تا جزئیات آن نمایش داده شود.

• برای ویرایش، روی آیکون ✏️ مداد کلیک کنید.

• برای علامت‌گذاری به‌عنوان مورد علاقه، روی آیکون ⭐ ستاره کلیک کنید.

• برای حذف، روی آیکون 🗑️ سطل زباله کلیک کنید (به‌همراه تأیید حذف).

۴. استفاده از برچسب‌ها

• در نوار کناری، روی دکمه "+" ایجاد برچسب جدید کلیک کنید.

• هنگام افزودن یا ویرایش مخاطب، برچسب را انتخاب نمایید.

• با کلیک بر هر برچسب، مخاطبین همان گروه نمایش داده می‌شوند.

۵. جستجو و مرتب‌سازی

• در نوار جستجو، نام یا ایمیل مورد نظر را تایپ کنید.

• از منوی کشویی مرتب‌سازی، روش دلخواه را انتخاب کنید (مثل A–Z یا جدیدترین).

۶. انجام عملیات گروهی

• چند مخاطب را با تیک انتخاب کنید.

• گزینه "عملیات گروهی" را انتخاب کنید.

• یکی از عملیات‌ها را اعمال کنید:

  • افزودن/حذف برچسب

  • علامت‌گذاری به‌عنوان مورد علاقه یا لغو آن

  • حذف هم‌زمان چند مخاطب

۷. تغییر حالت نمایش (Theme)

• با کلیک روی آیکون 🌞/🌙 در بالای صفحه، بین حالت روشن و تاریک جابه‌جا شوید.

🖼️ نمونه بخش‌های برنامه

• صفحه اصلی (Landing Page)

• پنجره افزودن مخاطب (Add Contact Modal)

• پنجره جزئیات مخاطب (Contact Modal)

• بخش عملیات گروهی (Bulk Action Modal)

💡 نتیجه‌گیری

پروژه Email Contacts Manager ترکیبی از طراحی مدرن، کارایی بالا و سادگی در استفاده است.
با قابلیت‌هایی مانند برچسب‌گذاری، جستجوی هوشمند، عملیات گروهی، و ذخیره‌سازی آفلاین، می‌توانید دفترچه تماس دیجیتالی خود را به‌صورت کاملاً شخصی و سریع مدیریت کنید.
همه این‌ها تنها با استفاده از HTML، CSS و JavaScript خالص ساخته شده‌اند — بدون نیاز به هیچ فریم‌ورک یا بک‌اند خاصی.

اگر به‌دنبال نمونه‌ای آموزشی یا ابزاری برای یادگیری طراحی رابط‌های کاربری و کار با localStorage هستید، این پروژه انتخابی فوق‌العاده است.