Spaces:

dodey917
/

nomarddesk-digital-engine

Running

Build a premium, futuristic, fully animated business website named “Nomarddesk” with a straight-line layout design (clean vertical sections stacked from top to bottom).

3fa7e5a verified 11 months ago

Raw History Blame Contribute Delete

7.37 kB

// Service text rotation
const services = [
    "Telegram Promotion",
    "Telegram Ads", 
    "Telegram Bot Development",
    "App Development",
    "Music Marketing",
    "Crypto Marketing"
];

let currentServiceIndex = 0;
const serviceTextElement = document.getElementById('serviceText');

function rotateServices() {
    currentServiceIndex = (currentServiceIndex + 1) % services.length;
    serviceTextElement.style.opacity = '0';
    
    setTimeout(() => {
        serviceTextElement.textContent = services[currentServiceIndex];
        serviceTextElement.style.opacity = '1';
    }, 500);
}

setInterval(rotateServices, 3000);

// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
if (mobileMenuBtn) {
    mobileMenuBtn.addEventListener('click', function() {
        // Toggle mobile menu (implementation depends on design)
        console.log('Mobile menu toggled');
    });
}

// Star rating system
document.querySelectorAll('.rating-stars').forEach(ratingGroup => {
    const stars = ratingGroup.querySelectorAll('i');
    let rating = 0;

    stars.forEach((star, index) => {
        star.addEventListener('click', () => {
            rating = index + 1;
            updateStars();
        });

        star.addEventListener('mouseenter', () => {
            stars.forEach((s, i) => {
                if (i <= index) {
                    s.classList.add('text-yellow-400');
                    s.classList.remove('text-gray-600');
                } else {
                    s.classList.remove('text-yellow-400');
                    s.classList.add('text-gray-600');
                }
            });
        });
    });

    ratingGroup.addEventListener('mouseleave', updateStars);

    function updateStars() {
        stars.forEach((s, i) => {
            if (i < rating) {
                s.classList.add('text-yellow-400', 'star-glow');
                s.classList.remove('text-gray-600');
            } else {
                s.classList.remove('text-yellow-400', 'star-glow');
                s.classList.add('text-gray-600');
            }
        });
    }
});

// Review form submission
document.getElementById('reviewForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Show success message
    const successMessage = document.getElementById('successMessage');
    successMessage.classList.remove('hidden');
    successMessage.classList.add('success-checkmark');
    
    // Reset form
    this.reset();
    
    // Reset all stars
    document.querySelectorAll('.rating-stars i').forEach(star => {
        star.classList.remove('text-yellow-400', 'star-glow');
        star.classList.add('text-gray-600');
    });
    
    // Hide success message after 5 seconds
    setTimeout(() => {
        successMessage.classList.add('hidden');
    }, 5000);
});

// Contact form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Show loading state
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<div class="loading-spinner mx-auto"></div>';
    submitBtn.disabled = true;
    
    // Simulate form submission
    setTimeout(() => {
        // Show success message
        const successMessage = document.getElementById('contactSuccess');
        successMessage.classList.remove('hidden');
        successMessage.classList.add('success-checkmark');
        
        // Reset form and button
        this.reset();
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
        
        // Hide success message after 5 seconds
        setTimeout(() => {
            successMessage.classList.add('hidden');
        }, 5000);
    }, 1500);
});

// Intersection Observer for fade-in animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-slide-up');
            entry.target.style.opacity = '1';
        }
    });
}, observerOptions);

// Observe all service cards and sections
document.querySelectorAll('.glass-morphism').forEach(el => {
    el.style.opacity = '0';
    observer.observe(el);
});

// Add parallax effect to floating shapes
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const shapes = document.querySelectorAll('.floating-shape');
    
    shapes.forEach((shape, index) => {
        const speed = 1 + (index * 0.5);
        shape.style.transform = `translateY(${scrolled * speed * 0.1}px)`;
    });
});

// Add hover effect to service cards
document.querySelectorAll('.glass-morphism').forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.classList.add('hover-lift');
    });
    
    card.addEventListener('mouseleave', function() {
        this.classList.remove('hover-lift');
    });
});

// Dynamic year in footer
const yearElement = document.querySelector('footer p');
if (yearElement && yearElement.textContent.includes('2024')) {
    yearElement.innerHTML = yearElement.innerHTML.replace('2024', new Date().getFullYear());
}

// Newsletter subscription
document.querySelector('footer button')?.addEventListener('click', function(e) {
    e.preventDefault();
    const emailInput = this.previousElementSibling;
    if (emailInput && emailInput.value) {
        // Simulate subscription
        emailInput.value = '';
        emailInput.placeholder = 'Subscribed! ✓';
        setTimeout(() => {
            emailInput.placeholder = 'Your email';
        }, 3000);
    }
});

// Add keyboard navigation
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        // Close any open modals or menus
        document.querySelectorAll('.mobile-menu.active').forEach(menu => {
            menu.classList.remove('active');
        });
    }
});

// Performance optimization - Debounce scroll events
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Debounced parallax effect
window.addEventListener('scroll', debounce(() => {
    const scrolled = window.pageYOffset;
    const shapes = document.querySelectorAll('.floating-shape');
    
    shapes.forEach((shape, index) => {
        const speed = 1 + (index * 0.5);
        shape.style.transform = `translateY(${scrolled * speed * 0.1}px)`;
    });
}, 10));

// Initialize Feather Icons after dynamic content
function initFeatherIcons() {
    feather.replace();
}

// Re-initialize icons when needed
document.addEventListener('DOMContentLoaded', initFeatherIcons);

	// Service text rotation
	const services = [
	"Telegram Promotion",
	"Telegram Ads",
	"Telegram Bot Development",
	"App Development",
	"Music Marketing",
	"Crypto Marketing"
	];

	let currentServiceIndex = 0;
	const serviceTextElement = document.getElementById('serviceText');

	function rotateServices() {
	currentServiceIndex = (currentServiceIndex + 1) % services.length;
	serviceTextElement.style.opacity = '0';

	setTimeout(() => {
	serviceTextElement.textContent = services[currentServiceIndex];
	serviceTextElement.style.opacity = '1';
	}, 500);
	}

	setInterval(rotateServices, 3000);

	// Smooth scroll for navigation links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	const target = document.querySelector(this.getAttribute('href'));
	if (target) {
	target.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	}
	});
	});

	// Mobile menu toggle
	const mobileMenuBtn = document.getElementById('mobileMenuBtn');
	if (mobileMenuBtn) {
	mobileMenuBtn.addEventListener('click', function() {
	// Toggle mobile menu (implementation depends on design)
	console.log('Mobile menu toggled');
	});
	}

	// Star rating system
	document.querySelectorAll('.rating-stars').forEach(ratingGroup => {
	const stars = ratingGroup.querySelectorAll('i');
	let rating = 0;

	stars.forEach((star, index) => {
	star.addEventListener('click', () => {
	rating = index + 1;
	updateStars();
	});

	star.addEventListener('mouseenter', () => {
	stars.forEach((s, i) => {
	if (i <= index) {
	s.classList.add('text-yellow-400');
	s.classList.remove('text-gray-600');
	} else {
	s.classList.remove('text-yellow-400');
	s.classList.add('text-gray-600');
	}
	});
	});
	});

	ratingGroup.addEventListener('mouseleave', updateStars);

	function updateStars() {
	stars.forEach((s, i) => {
	if (i < rating) {
	s.classList.add('text-yellow-400', 'star-glow');
	s.classList.remove('text-gray-600');
	} else {
	s.classList.remove('text-yellow-400', 'star-glow');
	s.classList.add('text-gray-600');
	}
	});
	}
	});

	// Review form submission
	document.getElementById('reviewForm').addEventListener('submit', function(e) {
	e.preventDefault();

	// Show success message
	const successMessage = document.getElementById('successMessage');
	successMessage.classList.remove('hidden');
	successMessage.classList.add('success-checkmark');

	// Reset form
	this.reset();

	// Reset all stars
	document.querySelectorAll('.rating-stars i').forEach(star => {
	star.classList.remove('text-yellow-400', 'star-glow');
	star.classList.add('text-gray-600');
	});

	// Hide success message after 5 seconds
	setTimeout(() => {
	successMessage.classList.add('hidden');
	}, 5000);
	});

	// Contact form submission
	document.getElementById('contactForm').addEventListener('submit', function(e) {
	e.preventDefault();

	// Show loading state
	const submitBtn = this.querySelector('button[type="submit"]');
	const originalText = submitBtn.innerHTML;
	submitBtn.innerHTML = '<div class="loading-spinner mx-auto"></div>';
	submitBtn.disabled = true;

	// Simulate form submission
	setTimeout(() => {
	// Show success message
	const successMessage = document.getElementById('contactSuccess');
	successMessage.classList.remove('hidden');
	successMessage.classList.add('success-checkmark');

	// Reset form and button
	this.reset();
	submitBtn.innerHTML = originalText;
	submitBtn.disabled = false;

	// Hide success message after 5 seconds
	setTimeout(() => {
	successMessage.classList.add('hidden');
	}, 5000);
	}, 1500);
	});

	// Intersection Observer for fade-in animations
	const observerOptions = {
	threshold: 0.1,
	rootMargin: '0px 0px -50px 0px'
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate-slide-up');
	entry.target.style.opacity = '1';
	}
	});
	}, observerOptions);

	// Observe all service cards and sections
	document.querySelectorAll('.glass-morphism').forEach(el => {
	el.style.opacity = '0';
	observer.observe(el);
	});

	// Add parallax effect to floating shapes
	window.addEventListener('scroll', () => {
	const scrolled = window.pageYOffset;
	const shapes = document.querySelectorAll('.floating-shape');

	shapes.forEach((shape, index) => {
	const speed = 1 + (index * 0.5);
	shape.style.transform = `translateY(${scrolled * speed * 0.1}px)`;
	});
	});

	// Add hover effect to service cards
	document.querySelectorAll('.glass-morphism').forEach(card => {
	card.addEventListener('mouseenter', function() {
	this.classList.add('hover-lift');
	});

	card.addEventListener('mouseleave', function() {
	this.classList.remove('hover-lift');
	});
	});

	// Dynamic year in footer
	const yearElement = document.querySelector('footer p');
	if (yearElement && yearElement.textContent.includes('2024')) {
	yearElement.innerHTML = yearElement.innerHTML.replace('2024', new Date().getFullYear());
	}

	// Newsletter subscription
	document.querySelector('footer button')?.addEventListener('click', function(e) {
	e.preventDefault();
	const emailInput = this.previousElementSibling;
	if (emailInput && emailInput.value) {
	// Simulate subscription
	emailInput.value = '';
	emailInput.placeholder = 'Subscribed! ✓';
	setTimeout(() => {
	emailInput.placeholder = 'Your email';
	}, 3000);
	}
	});

	// Add keyboard navigation
	document.addEventListener('keydown', (e) => {
	if (e.key === 'Escape') {
	// Close any open modals or menus
	document.querySelectorAll('.mobile-menu.active').forEach(menu => {
	menu.classList.remove('active');
	});
	}
	});

	// Performance optimization - Debounce scroll events
	function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	}

	// Debounced parallax effect
	window.addEventListener('scroll', debounce(() => {
	const scrolled = window.pageYOffset;
	const shapes = document.querySelectorAll('.floating-shape');

	shapes.forEach((shape, index) => {
	const speed = 1 + (index * 0.5);
	shape.style.transform = `translateY(${scrolled * speed * 0.1}px)`;
	});
	}, 10));

	// Initialize Feather Icons after dynamic content
	function initFeatherIcons() {
	feather.replace();
	}

	// Re-initialize icons when needed
	document.addEventListener('DOMContentLoaded', initFeatherIcons);