یک لندینگ پیج مدرن که شامل اسلایدر تصاویر، تبمنو تعاملی، فرم ثبتنام با اعتبارسنجی و رِنجاسلایدر سفارشی است. رابط کاربری بهصورت کامل راستبهچپ (RTL) و مناسب زبان فارسی طراحی شده است.
- طراحی مدرن و واکنشگرا: استفاده از گرید، فلکس و واحدهای واکنشگرا برای نمایش مناسب در دسکتاپ و موبایل.
- اسلایدر تصاویر: پیادهسازی با کتابخانه
Swiperهمراه با دکمههای ناوبری و داتهای صفحهبندی. - تبمنو (Tab Menu): چهار تب، با تغییر محتوای بخش ویدیو و متن بهصورت پویا با جاوااسکریپت.
- پاپآپ ویدیو: نمایش لایهی ویدیویی با امکان بستن از طریق دکمه، کلیک روی بکدراپ و کلید Escape.
- فرم ثبتنام با اعتبارسنجی زنده:
- اعتبارسنجی نام (فقط حروف فارسی و فاصله)
- اعتبارسنجی شماره تماس (۱۱ رقم و شروع با ۰)
- اعتبارسنجی رمز عبور (حداقل ۸ کاراکتر، شامل عدد و کاراکتر خاص)
- نمایش Tooltip خطا کنار فیلدهای نامعتبر
- نمایش صفحهی نتیجه (موفق/ناموفق) بعد از ارسال فرم
- نمایش/مخفیسازی رمز عبور: با آیکون چشم و انیمیشن تغییر آیکون.
- رنجاسلایدر سفارشی:
- اسلایدر افقی در دسکتاپ و عمودی در موبایل/تبلت
- نمایش اعداد بهصورت فارسی
- تولید خودکار تیکمارکها (Tick Marks) بر اساس جهت اسلایدر
- Tooltip راهنما با امکان باز/بسته شدن
- دکمه بازگشت به بالا: ظاهر شدن خودکار بعد از اسکرول و اسکرول نرم به ابتدای صفحه.
- HTML5 (ساختار صفحه و سکشنها)
- CSS3 (استایلینگ مدرن، متغیرهای CSS، انیمیشنها، ریسپانسیو)
- Vanilla JavaScript (بدون فریمورک، برای منطق تعاملی)
- Swiper.js برای اسلایدر تصاویر
index.html: فایل اصلی صفحه و مارکآپ تمام سکشنها.styles.css: تمام استایلها، شامل:- استایل هدر و منوی ناوبری
- اسلایدر تصاویر و تبمنو
- فرم ثبتنام و نتیجهی ثبتنام
- رنجاسلایدر و دکمهی بازگشت به بالا
script.js: منطق تعاملی:- باز و بستهکردن منو
- اسکرول نرم به سکشنها و هایلایت آیتم فعال منو
- راهاندازی Swiper
- مدیریت تبها
- پاپآپ ویدیو
- اعتبارسنجی فرم و نمایش نتیجه
- منطق رنجاسلایدر (Drag/Drop، محاسبه مقدار، تولید تیکها)
assets/: تصاویر، فونت و سایر منابع (مسیرها در HTML/CSS تنظیم شدهاند).
- ۱. کلون/دانلود پروژه
git clone https://github.com/<your-username>/nik-SMS.git
cd nik-SMS- ۲. اجرا در مرورگر
- روش ساده: روی
index.htmlدوبار کلیک کنید تا در مرورگر باز شود. - روش توصیهشده برای توسعه: با افزونههایی مثل Live Server (در VS Code / Cursor) روت پروژه را اجرا کنید تا رفرش خودکار داشته باشید.
- روش ساده: روی
- تغییر رنگها و استایل کلی:
- متغیرهای اصلی در ابتدای
styles.css(در Selector ریشه:root) تعریف شدهاند:--light-green،--dark-green،--light-grayو ...
- متغیرهای اصلی در ابتدای
- تغییر تصاویر اسلایدر و ویدیو:
- در
index.htmlمسیرهای داخل تگهایimgرا در سکشن اسلایدر و پاپآپ ویدیو ویرایش کنید.
- در
- تغییر متنها:
- تمام متنها (سربرگها، پاراگرافها، پیامهای فرم و نتیجهی ثبتنام) در
index.htmlو بخشی از پیامها درscript.jsقابل ویرایش هستند.
- تمام متنها (سربرگها، پاراگرافها، پیامهای فرم و نتیجهی ثبتنام) در
- بدون وابستگی بکاند: فرم ثبتنام فقط در کنسول مرورگر لاگ میکند و درخواست شبکه ارسال نمیشود؛ برای اتصال به API باید در
script.js(بخش ارسال فرم) منطق خودتان را اضافه کنید. - RTL: جهت صفحه روی
rtlو زبان رویfaتنظیم شده؛ اگر میخواهید پروژه را انگلیسی کنید، باید متنها، فونت و جهت را تغییر دهید.