script.js

document.addEventListener('DOMContentLoaded', function() {
    const findQiblaBtn = document.getElementById('find-qibla');
    const openMapBtn = document.getElementById('open-map');
    const useCameraBtn = document.getElementById('use-camera');
    const resultDiv = document.getElementById('result');
    let map;

    // Initialize Google Maps
    function initMap() {
        map = new google.maps.Map(document.getElementById('map-container'), {
            center: {lat: 0, lng: 0},
            zoom: 8
        });
    }
    findQiblaBtn.addEventListener('click', function() {
        simulateQiblaFinding();
    });

    openMapBtn.addEventListener('click', function() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    
                    // Center map on user's location
                    map.setCenter(pos);
                    new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: "Your Location"
                    });
                    
                    resultDiv.classList.remove('hidden');
                },
                () => {
                    alert('Error: The Geolocation service failed or your browser doesn\'t support geolocation.');
                }
            );
        } else {
            alert("Error: Your browser doesn't support geolocation.");
        }
    });

    useCameraBtn.addEventListener('click', function() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(stream) {
                    const video = document.createElement('video');
                    video.srcObject = stream;
                    video.play();
                    
                    const cameraContainer = document.createElement('div');
                    cameraContainer.className = 'mt-6 rounded-lg overflow-hidden h-64 w-full bg-black flex items-center justify-center';
                    cameraContainer.innerHTML = '<div class="absolute w-full h-full flex items-center justify-center"><div class="qibla-arrow"></div></div>';
                    cameraContainer.appendChild(video);
                    
                    resultDiv.innerHTML = '';
                    resultDiv.appendChild(cameraContainer);
                    resultDiv.classList.remove('hidden');
                })
                .catch(function(error) {
                    alert("Error accessing camera: " + error.message);
                });
        } else {
            alert("Error: Camera access not supported in your browser.");
        }
    });
function simulateQiblaFinding() {
        findQiblaBtn.disabled = true;
        findQiblaBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Locating...';
        feather.replace();
        
        setTimeout(() => {
            // Simulate API call delay
            const randomDirection = Math.floor(Math.random() * 360);
            document.getElementById('qibla-direction').textContent = randomDirection + '°';
            
            findQiblaBtn.innerHTML = '<i data-feather="compass" class="mr-2"></i> Find Qibla Direction';
            findQiblaBtn.disabled = false;
            resultDiv.classList.remove('hidden');
            feather.replace();
            
            // In a real implementation, load Google Maps here
            // with the calculated Qibla direction
        }, 2000);
    }
});