Spaces:

Sidd0507g
/

super-power-explorer

Running

i want a website in which people can measure there car details like how distance they can cover in how much liters of pertrol or desial or electric also the car model is also depends for that

d1d5100 verified 12 months ago

Raw History Blame Contribute Delete

1.53 kB

// Theme toggle functionality
document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    
    if (themeToggleBtn) {
        themeToggleBtn.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        });
    }

    // Check for saved theme preference
    if (localStorage.getItem('darkMode') === 'true') {
        document.documentElement.classList.add('dark');
    } else if (localStorage.getItem('darkMode') === 'false') {
        document.documentElement.classList.remove('dark');
    }
});
// Simple animation for power cards
document.querySelectorAll('.hover\\:scale-105').forEach(card => {
    card.addEventListener('mouseenter', () => {
        card.style.transition = 'transform 0.3s ease';
    });
});

// Car model presets
const carPresets = {
    'toyota-camry': { efficiency: 14.5, fuelType: 'petrol' },
    'honda-civic': { efficiency: 16.2, fuelType: 'petrol' },
    'tesla-model3': { efficiency: 6.5, fuelType: 'electric' },
    'bmw-320i': { efficiency: 12.8, fuelType: 'petrol' }
};

document.getElementById('car-model').addEventListener('change', function() {
    const selectedCar = this.value;
    if (selectedCar && selectedCar !== 'custom' && carPresets[selectedCar]) {
        const preset = carPresets[selectedCar];
        document.getElementById('fuel-type').value = preset.fuelType;
    }
});

	// Theme toggle functionality
	document.addEventListener('DOMContentLoaded', () => {
	const themeToggleBtn = document.getElementById('theme-toggle');

	if (themeToggleBtn) {
	themeToggleBtn.addEventListener('click', () => {
	document.documentElement.classList.toggle('dark');
	localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
	});
	}

	// Check for saved theme preference
	if (localStorage.getItem('darkMode') === 'true') {
	document.documentElement.classList.add('dark');
	} else if (localStorage.getItem('darkMode') === 'false') {
	document.documentElement.classList.remove('dark');
	}
	});
	// Simple animation for power cards
	document.querySelectorAll('.hover\\:scale-105').forEach(card => {
	card.addEventListener('mouseenter', () => {
	card.style.transition = 'transform 0.3s ease';
	});
	});

	// Car model presets
	const carPresets = {
	'toyota-camry': { efficiency: 14.5, fuelType: 'petrol' },
	'honda-civic': { efficiency: 16.2, fuelType: 'petrol' },
	'tesla-model3': { efficiency: 6.5, fuelType: 'electric' },
	'bmw-320i': { efficiency: 12.8, fuelType: 'petrol' }
	};

	document.getElementById('car-model').addEventListener('change', function() {
	const selectedCar = this.value;
	if (selectedCar && selectedCar !== 'custom' && carPresets[selectedCar]) {
	const preset = carPresets[selectedCar];
	document.getElementById('fuel-type').value = preset.fuelType;
	}
	});