معرفی قالب لوسیدا

قالب HTML فروشگاهی لوسیدا (Lucida)، یک محصول تخصصی و حرفه‌ای برای راه‌اندازی فروشگاه اینترنتی طلا، جواهرات لوکس، الماس و ساعت‌های سوئیسی است. این قالب با طراحی سلطنتی و الهام گرفته از درخشش الماس، تجربه‌ای لوکس و بی‌نظیر برای مشتریان شما خلق می‌کند.

لوسیدا شامل صفحات اصلی، فروشگاه، جزئیات محصول، سبد خرید، تسویه حساب، داشبورد کاربری کامل، وبلاگ تخصصی، صفحات ورود و ثبت‌نام پیشرفته و صفحات تراکنش است. تمامی صفحات کاملاً واکنش‌گرا بوده و با هر دستگاهی از موبایل تا نمایشگرهای بزرگ، نمایشی بی‌نقص و لوکس دارند.

قالب لوسیدا با استفاده از HTML5، CSS3 و جاوااسکریپت خالص توسعه یافته و هیچ وابستگی به فریم‌ورک‌های سنگین ندارد. ساختار کدنویسی کاملاً ماژولار است به طوری که فایل‌های CSS و JS بر اساس عملکرد هر صفحه به صورت جداگانه سازماندهی شده‌اند.

این قالب دارای دو تم رنگی کامل است: تم تاریک با افکت‌های شیشه‌ای و تم روشن با طراحی کرم و طلایی. برای هر کدام از صفحات، فایل‌های CSS و HTML مجزا وجود دارد و قابلیت تغییر تم از طریق دکمه در هدر پیاده‌سازی شده است.

سیستم سبد خرید با استفاده از localStorage مدیریت می‌شود و امکاناتی مانند افزودن/حذف محصول، تغییر تعداد، محاسبه خودکار جمع کل، اعمال کد تخفیف، محاسبه مالیات و هزینه ارسال را دارد.

صفحه تسویه حساب یک فرآیند چند مرحله‌ای کامل دارد که شامل اطلاعات شخصی، آدرس ارسال، روش پرداخت و نهایی کردن سفارش می‌شود. تمام فرم‌ها دارای اعتبارسنجی front-end هستند.

بخش احراز هویت با سه روش ورود طراحی شده است: ورود با نام کاربری و رمز عبور، ورود با شماره موبایل و کد تایید، و ورود با حساب‌های گوگل و گیت‌هاب (شبیه‌سازی شده).

صفحه داشبورد کاربری یک پنل کامل شامل پیشخوان، سفارشات، علاقه‌مندی‌ها، مدیریت آدرس‌ها، کیف پول، دعوت دوستان، ویرایش اطلاعات شخصی و تغییر رمز عبور با کپچای ریاضی است. امکان آپلود و حذف عکس پروفایل نیز در این صفحه وجود دارد.

صفحات وبلاگ شامل صفحه اصلی وبلاگ با جستجو و فیلتر دسته‌بندی و صفحه مشاهده مقاله با فهرست مطالب، جعبه‌های اطلاعاتی، جدول رنگ و شفافیت الماس، سیستم نظردهی و مقالات مرتبط است.

صفحات تراکنش شامل دو صفحه جداگانه برای نمایش نتیجه پرداخت موفق و ناموفق با نمایش جزئیات کامل سفارش و کد خطا می‌باشد.

صفحه خطا با طراحی خاص شامل ذرات طلایی متحرک، حلقه‌های مداری، الماس‌های شناور و جعبه جستجو ساخته شده است.

ماشین حساب هوشمند قیمت طلا در صفحه اصلی قرار دارد و قیمت نهایی طلا را بر اساس وزن، عیار، اجرت ساخت و مالیات محاسبه می‌کند. همچنین قیمت‌های لحظه‌ای طلا، سکه و ارزهای جهانی و نمودار تغییرات قیمت طلا نیز در این بخش نمایش داده می‌شود.

مودال‌های حرفه‌ای شامل مودال جستجو، مودال ورود/ثبت‌نام، مودال سبد خرید، مودال پیش‌نمایش محصول، مودال مزایده و مودال تماس می‌باشند.

نوتیفیکیشن قالب به صورت تاست (Toast) با قابلیت auto-close و نوار پیشرفت متحرک پیاده‌سازی شده است.

منوی موبایل به صورت سایدبار از راست صفحه باز می‌شود و شامل لوگو، لینک‌های اصلی، دکمه‌های کاربردی، اطلاعات تماس و شبکه‌های اجتماعی است.

تمام فرم‌های قالب دارای اعتبارسنجی front-end کامل هستند.

ویژگی‌های محصول

✅ طراحی و ظاهر:

• طراحی لوکس و سلطنتی با پالت رنگی طلایی

• دو تم کامل (تاریک و روشن) با فایل‌های جداگانه

• افکت شیشه‌ای (Glassmorphism) با backdrop-filter

• انیمیشن‌های نرم (اسکرول ریویل، هوور، شناور)

• ذرات طلایی متحرک در بخش هیرو و صفحه خطا

• آیکون‌های Font Awesome 6

• فونت اختصاصی پـیـدا (Peyda)

• افکت‌های گوشه و حباب‌های شناور طلایی

✅ صفحات کامل:

• صفحه اصلی (دو نسخه تاریک و روشن)

• صفحه وبلاگ اصلی

• صفحه مشاهده مقاله (دو نسخه تاریک و روشن)

• صفحه محصولات

• صفحه جزئیات محصول

• صفحه سبد خرید (دو نسخه تاریک و روشن)

• صفحه تسویه حساب (دو نسخه تاریک و روشن)

• صفحه ورود و ثبت‌نام پیشرفته

• داشبورد کاربری کامل

• صفحه پرداخت موفق (دو نسخه تاریک و روشن)

• صفحه پرداخت ناموفق (دو نسخه تاریک و روشن)

• صفحه خطا

✅ امکانات فروشگاهی:

• سیستم سبد خرید با ذخیره‌سازی در localStorage

• ماشین حساب لحظه‌ای قیمت طلا

• نمایش قیمت‌های لحظه‌ای طلا، سکه و ارزها

• نمودار تغییرات قیمت طلا با Canvas

• سیستم کد تخفیف

• محاسبه خودکار مالیات و هزینه ارسال

• سه روش ارسال (پست پیشتاز، اکسپرس، تحویل حضوری)

• پرداخت شبیه‌سازی‌شده

• نمایش فاکتور خرید

• گالری تصاویر محصول با قابلیت زوم

✅ امکانات کاربری و احراز هویت:

• سه روش ورود (یوزر/پسورد، شماره موبایل با OTP، گوگل/گیت‌هاب)

• آپلود و حذف عکس پروفایل

• مدیریت آدرس‌ها (افزودن، حذف)

• کیف پول کاربری (شارژ، برداشت، تراکنش‌ها)

• سیستم دعوت دوستان با کد اختصاصی

• تغییر رمز با کپچای ریاضی پویا

• نمایش سفارشات با جزئیات و وضعیت

✅ امکانات وبلاگ:

• جستجوی پیشرفته

• فیلتر دسته‌بندی مقالات

• دکمه لود بیشتر

• فهرست مطالب با اسکرول روان

• جعبه‌های اطلاعاتی

• جدول رنگ الماس و جدول شفافیت الماس

• نمودار 4C الماس

• سیستم نظردهی

• اشتراک‌گذاری در شبکه‌های اجتماعی

• ویجت‌های سایدبار (جستجو، نویسنده، مقالات مرتبط، دسته‌بندی‌ها، خبرنامه)

• آکاردئون پرسش و پاسخ

✅ تکنیکال و کدنویسی:

• HTML5، CSS3 و JavaScript خالص (بدون jQuery)

• کاملاً واکنش‌گرا با چندین breakpoint

• راست‌چین کامل و بهینه برای فارسی

• فایل‌های CSS و JS جداگانه برای هر صفحه

• کدنویسی تمیز با کامنت‌های کامل

• پشتیبانی از تم تاریک و روشن با متغیرهای CSS

• نوتیفیکیشن پیشرفته با progress bar

• مودال‌های حرفه‌ای

• نوار پیشرفت اسکرول

• دکمه اسکرول به بالا با افکت نرم

• منوی موبایل سایدباری

✅ مرورگرهای پشتیبانی‌شده:

• گوگل کروم، فایرفاکس، سافاری، اج، اپرا

• مرورگرهای موبایل (iOS و Android)