دمو ویژگی‌های جدید سمور

تمام ویژگی‌های مدرن شده پروژه را در این صفحه مشاهده کنید

✨ دارک مد🎨 Bootstrap Icons📝 فرم پیشرفته⚡ کد تمیز

دارک مد هوشمند

حالت تاریک با تشخیص خودکار تنظیمات سیستم کاربر. دکمه تغییر تم در پایین سمت چپ صفحه را امتحان کنید!

پالت رنگ‌های لایت

Primary
#6366f1

Secondary
#f59e0b

Text Dark
#1f2937

BG Light
#f9fafb

// استفاده از ThemeManager

const themeManager = new ThemeManager();
themeManager.toggleTheme();

Bootstrap Icons

دسترسی به بیش از 1800 آیکون زیبا و حرفه‌ای. نمونه‌های محبوب:

📦

قلب

bi-heart-fill

📦

ستاره

bi-star-fill

📦

سبد خرید

bi-cart-fill

📦

اعلان

bi-bell-fill

📦

چت

bi-chat-dots-fill

📦

امنیت

bi-shield-fill-check

📦

رشد

bi-graph-up-arrow

📦

هدیه

bi-gift-fill

مشاهده تمام آیکون‌ها

فرم تماس پیشرفته

اعتبارسنجی Realtime، شمارنده کاراکتر، و پیام‌های زیبا

ویژگی‌های فرم:

اعتبارسنجی Realtime
شمارنده کاراکتر (حداکثر 500)
اعتبارسنجی شماره موبایل ایرانی
پیام‌های خطا با انیمیشن
حالت Loading

انیمیشن‌های تعاملی

انیمیشن‌های نرم و بهینه شده برای تجربه کاربری بهتر

🖱️

Ripple Effect

دکمه‌ها دارای افکت Ripple هستند - روی دکمه‌ها کلیک کنید!

⬇️

Scroll Animations

عناصر هنگام اسکرول به آرامی ظاهر می‌شوند

🔢

Counter Animation

انیمیشن شمارنده برای آمارها

+1000

کاربر فعال

📦

Parallax Effect

افکت پارالکس برای دایره‌های تزئینی

نمونه کدها

استفاده از ThemeManager

// دسترسی به ThemeManager از طریق متغیر global

const theme = themeManager.getPreferredTheme();
console.log(theme); // 'light' یا 'dark'

// تغییر دستی تم
themeManager.toggleTheme();

استفاده از ContactFormHandler

// ایجاد نمونه جدید با ID فرم
const form = new ContactFormHandler('contactForm');

// فرم به صورت خودکار initialize می‌شود

استفاده از Bootstrap Icons