حرفه ایی تر و جذاب ترش کن و زبان و کشور کاربر رو برساس user agent تشخیص بده طراحی اون با کتابخونه های حرفه ایی مدرن جذاب و سبک باشه خیلی حرفه اییش کن
887b497 verified | // Modern ES6+ JavaScript with User Detection | |
| import { detect } from 'detect-browser'; | |
| import anime from 'animejs/lib/anime.es.js'; | |
| import AOS from 'aos'; | |
| import 'aos/dist/aos.css'; | |
| // Initialize AOS (Animate On Scroll) | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out-quart', | |
| once: true | |
| }); | |
| // Detect user's browser, OS and device | |
| const browser = detect(); | |
| const userLanguage = navigator.language || navigator.userLanguage; | |
| // Set RTL/LTR based on language | |
| if (['fa', 'ar', 'he'].includes(userLanguage.substring(0,2))) { | |
| document.documentElement.setAttribute('dir', 'rtl'); | |
| document.documentElement.lang = 'fa'; | |
| } else { | |
| document.documentElement.setAttribute('dir', 'ltr'); | |
| document.documentElement.lang = 'en'; | |
| } | |
| // Modern Animations with Anime.js | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Hero section animation | |
| anime.timeline({ | |
| easing: 'easeOutExpo' | |
| }) | |
| .add({ | |
| targets: '.hero-title', | |
| opacity: [0, 1], | |
| translateY: [50, 0], | |
| duration: 800 | |
| }) | |
| .add({ | |
| targets: '.hero-subtitle', | |
| opacity: [0, 1], | |
| translateY: [30, 0], | |
| duration: 600 | |
| }, '-=400') | |
| .add({ | |
| targets: '.feature-card', | |
| opacity: [0, 1], | |
| translateY: [40, 0], | |
| duration: 800, | |
| delay: anime.stagger(150) | |
| }, '-=400'); | |
| // Floating animation for cards | |
| anime({ | |
| targets: '.feature-card', | |
| translateY: ['-10px', '10px'], | |
| easing: 'easeInOutSine', | |
| duration: 3000, | |
| direction: 'alternate', | |
| loop: true, | |
| delay: anime.stagger(200) | |
| }); | |
| // Gradient border animation | |
| const gradientBorder = document.querySelectorAll('.gradient-border'); | |
| gradientBorder.forEach(el => { | |
| anime({ | |
| targets: el, | |
| backgroundPosition: ['0% 50%', '100% 50%'], | |
| easing: 'linear', | |
| duration: 8000, | |
| loop: true | |
| }); | |
| }); | |
| }); | |
| // Service Worker for PWA | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js').then(registration => { | |
| console.log('SW registered: ', registration); | |
| }).catch(registrationError => { | |
| console.log('SW registration failed: ', registrationError); | |
| }); | |
| }); | |
| } | |
| // Modern console log | |
| console.log(` | |
| %c Persian Optimizer %c v2.0 %c | |
| ██████╗ ███████╗██████╗ █████╗ ██╗███╗ ██╗ | |
| ██╔══██╗██╔════╝██╔══██╗██╔══██╗██║████╗ ██║ | |
| ██████╔╝█████╗ ██████╔╝███████║██║██╔██╗ ██║ | |
| ██╔═══╝ ██╔══╝ ██╔══██╗██╔══██║██║██║╚██╗██║ | |
| ██║ ███████╗██║ ██║██║ ██║██║██║ ╚████║ | |
| ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝ | |
| `, | |
| 'background: linear-gradient(45deg, #6366f1, #8b5cf6); color: white; padding: 5px 0; border-radius: 3px 0 0 3px;', | |
| 'background: #0f172a; color: white; padding: 5px 0; border-radius: 0 3px 3px 0;', | |
| ''); | |