Fix Iftar Time Countdown Page and Enhance CSS

[Riaz9543]

Several improvements are needed for the Iftar Time countdown page to enhance its functionality and visual appearance:

Countdown Timer Fixes

1. Timer Logic Fix

• Current implementation shows inconsistent time display
• Add proper countdown calculation logic in countdown.js
• Ensure countdown updates every second
• Add proper handling for when countdown reaches zero

2. Time Display Format

• Standardize time format across all displays (countdown, current time, iftar time)
• Ensure consistent use of 12-hour format with AM/PM
• Add leading zeros for single-digit numbers

CSS Enhancements

1. Countdown Display

.countdown-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.time-block {
    background: linear-gradient(135deg, #2a5298, #1e3c72);
    color: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    min-width: 100px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.time-number {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
}

.time-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.time-separator {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2a5298;
}

2. Progress Bar Enhancement

.progress-container {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
}

.progress-bar {
    background: #e9ecef;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #2a5298, #4CAF50);
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

3. Info Card Styling

.info-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin: 1.5rem 0;
}

.time-highlight {
    color: #2a5298;
    font-weight: bold;
    font-size: 1.1rem;
}

.location-text {
    color: #4CAF50;
}

.date-text {
    color: #666;
}

4. Responsive Design

@media (max-width: 768px) {
    .countdown-display {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .time-block {
        min-width: 80px;
        padding: 1rem;
    }
    
    .time-number {
        font-size: 2rem;
    }
    
    .time-separator {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .time-block {
        min-width: 60px;
        padding: 0.8rem;
    }
    
    .time-number {
        font-size: 1.5rem;
    }
    
    .time-separator {
        font-size: 1.5rem;
    }
}

JavaScript Improvements

1. Add proper countdown timer logic in countdown.js:

function updateCountdown(iftarTime) {
    const now = new Date();
    const timeDiff = iftarTime - now;
    
    if (timeDiff <= 0) {
        showIftarModal();
        return;
    }
    
    const hours = Math.floor(timeDiff / (1000 * 60 * 60));
    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
    
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    
    // Update progress bar
    const dayProgress = ((24 * 60 * 60 - timeDiff / 1000) / (24 * 60 * 60)) * 100;
    document.getElementById('progressFill').style.width = `${dayProgress}%`;
    document.getElementById('progressText').textContent = `${Math.round(dayProgress)}% of the day completed`;
}

2. Add error handling and loading states:

function initializeCountdown() {
    try {
        const iftarTimeElement = document.getElementById('iftarTime');
        if (!iftarTimeElement.textContent || iftarTimeElement.textContent === 'Loading...') {
            setTimeout(initializeCountdown, 1000);
            return;
        }
        
        const iftarTime = new Date(iftarTimeElement.textContent);
        updateCountdown(iftarTime);
        setInterval(() => updateCountdown(iftarTime), 1000);
        
    } catch (error) {
        console.error('Error initializing countdown:', error);
        document.getElementById('countdownMessage').textContent = 'Error loading countdown. Please refresh the page.';
    }
}

Tasks

• Implement the CSS improvements
• Add the updated JavaScript countdown logic
• Test responsive design across different devices
• Add error handling and loading states
• Verify time format consistency
• Test countdown completion and modal display

Please make sure to test all changes thoroughly across different browsers and devices before merging.

[Riaz9543]

Add css