لینک کوتاه : https://magicfile.ir/?p=4753
💌 دانلود اسکریپت مدیریت مخاطبین ایمیل با 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را در هر مرورگر مدرن باز کنید.
بدون نیاز به نصب یا راه‌اندازی سرور – همه‌چیز در سمت کاربر اجرا می‌شود.
۲. افزودن مخاطب
-
روی دکمه "+ افزودن مخاطب" کلیک کنید.
-
نام و ایمیل را وارد کنید (فیلدهای الزامی).
-
سایر جزئیات مانند تلفن، شرکت یا یادداشت‌ها را اضافه کنید.
-
برچسب‌ها را انتخاب یا تایپ کنید.
-
روی "ذخیره مخاطب" کلیک کنید.
۳. مشاهده و ویرایش مخاطبین
-
روی هر کارت مخاطب کلیک کنید تا جزئیات آن نمایش داده شود.
-
برای ویرایش، روی آیکون ✏️ مداد کلیک کنید.
-
برای علامت‌گذاری به‌عنوان مورد علاقه، روی آیکون ⭐ ستاره کلیک کنید.
-
برای حذف، روی آیکون 🗑️ سطل زباله کلیک کنید (به‌همراه تأیید حذف).
۴. استفاده از برچسب‌ها
-
در نوار کناری، روی دکمه "+" ایجاد برچسب جدید کلیک کنید.
-
هنگام افزودن یا ویرایش مخاطب، برچسب را انتخاب نمایید.
-
با کلیک بر هر برچسب، مخاطبین همان گروه نمایش داده می‌شوند.
۵. جستجو و مرتب‌سازی
-
در نوار جستجو، نام یا ایمیل مورد نظر را تایپ کنید.
-
از منوی کشویی مرتب‌سازی، روش دلخواه را انتخاب کنید (مثل A–Z یا جدیدترین).
۶. انجام عملیات گروهی
-
چند مخاطب را با تیک انتخاب کنید.
-
گزینه "عملیات گروهی" را انتخاب کنید.
-
یکی از عملیات‌ها را اعمال کنید:
-
افزودن/حذف برچسب
-
علامت‌گذاری به‌عنوان مورد علاقه یا لغو آن
-
حذف هم‌زمان چند مخاطب
-
۷. تغییر حالت نمایش (Theme)
-
با کلیک روی آیکون 🌞/🌙 در بالای صفحه، بین حالت روشن و تاریک جابه‌جا شوید.
🖼️ نمونه بخش‌های برنامه
-
صفحه اصلی (Landing Page)
-
پنجره افزودن مخاطب (Add Contact Modal)
-
پنجره جزئیات مخاطب (Contact Modal)
-
بخش عملیات گروهی (Bulk Action Modal)
💡 نتیجه‌گیری
پروژه Email Contacts Manager ترکیبی از طراحی مدرن، کارایی بالا و سادگی در استفاده است.
با قابلیت‌هایی مانند برچسب‌گذاری، جستجوی هوشمند، عملیات گروهی، و ذخیره‌سازی آفلاین، می‌توانید دفترچه تماس دیجیتالی خود را به‌صورت کاملاً شخصی و سریع مدیریت کنید.
همه این‌ها تنها با استفاده از HTML، CSS و JavaScript خالص ساخته شده‌اند — بدون نیاز به هیچ فریم‌ورک یا بک‌اند خاصی.
اگر به‌دنبال نمونه‌ای آموزشی یا ابزاری برای یادگیری طراحی رابط‌های کاربری و کار با localStorage هستید، این پروژه انتخابی فوق‌العاده است.
