79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
import { features } from './data.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
const featuresGrid = document.getElementById('features-grid');
|
|
|
|
if (featuresGrid) {
|
|
features.forEach((feature, index) => {
|
|
const card = document.createElement('div');
|
|
card.className = 'feature-card-bg rounded-2xl p-6 flex flex-col items-center text-center scroll-target';
|
|
card.style.transitionDelay = `${index * 100}ms`;
|
|
|
|
card.innerHTML = `
|
|
<div class="w-full aspect-square rounded-xl overflow-hidden mb-6 feature-card-image-container flex items-center justify-center">
|
|
<img src="${feature.image}" alt="${feature.alt}" class="w-4/5 h-4/5 object-contain drop-shadow-lg">
|
|
</div>
|
|
<div class="flex items-center space-x-2 mb-3">
|
|
<i data-lucide="${feature.icon}" class="w-5 h-5 text-tech-blue"></i>
|
|
<h3 class="text-xl font-bold text-text-dark">${feature.title}</h3>
|
|
</div>
|
|
<p class="text-text-medium text-sm flex-grow">${feature.description}</p>
|
|
`;
|
|
featuresGrid.appendChild(card);
|
|
});
|
|
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
const scrollObserver = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.scroll-target').forEach(target => {
|
|
scrollObserver.observe(target);
|
|
});
|
|
|
|
|
|
const loginButton = document.getElementById('login-button');
|
|
const loginModal = document.getElementById('login-modal');
|
|
const closeModalButton = document.getElementById('close-modal-button');
|
|
|
|
if (loginButton && loginModal && closeModalButton) {
|
|
const openModal = () => {
|
|
loginModal.classList.remove('hidden');
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
};
|
|
|
|
const closeModal = () => {
|
|
loginModal.classList.add('hidden');
|
|
};
|
|
|
|
loginButton.addEventListener('click', openModal);
|
|
closeModalButton.addEventListener('click', closeModal);
|
|
loginModal.addEventListener('click', (event) => {
|
|
if (event.target === loginModal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape' && !loginModal.classList.contains('hidden')) {
|
|
closeModal();
|
|
}
|
|
});
|
|
}
|
|
});
|