রমজানের সময়সূচী /* Base Styles */ body { margin: 0; padding: 0; background: #0d0d0d; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #f5f5f5; line-height: 1.6; } a { color: inherit; text-decoration: none; } /* Ramadan Widget Container */ .ramadanWidget { max-width: 420px; margin: 30px auto; padding: 30px; background: linear-gradient(135deg, #2a2a72, #009ffd); border-radius: 25px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; transition: transform 0.3s ease; } .ramadanWidget:hover { transform: scale(1.02); } /* Header Section */ .ramadanWidget-header { text-align: center; margin-bottom: 15px; position: relative; } .ramadanWidget-moon { width: 70px; height: 70px; background: #f5f5f5; border-radius: 50%; margin: 0 auto 15px auto; box-shadow: 0 0 40px rgba(255, 255, 255, 0.3); } .ramadanWidget-header h2 { margin: 0; font-size: 2em; color: #fff; } .ramadanWidget-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .ramadanWidget-star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle 1.8s infinite; } @keyframes twinkle { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } /* Top Info Section: Location, BD Time & Hijri Date */ .ramadanWidget-topInfo { text-align: center; margin-bottom: 25px; font-size: 16px; line-height: 1.4; } .ramadanWidget-topInfo > div { margin: 5px 0; } .ramadanWidget-topInfo .locationIcon { margin-right: 6px; } /* Times Section */ .ramadanWidget-times { display: grid; gap: 20px; margin: 25px 0; } .ramadanWidget-timeCard { background: rgba(255, 255, 255, 0.15); padding: 20px; border-radius: 20px; display: flex; align-items: center; transition: transform 0.3s ease, background 0.3s ease; } .ramadanWidget-timeCard:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.25); } .ramadanWidget-icon { width: 45px; height: 45px; margin-right: 20px; fill: #ffd700; flex-shrink: 0; } .ramadanWidget-icon svg { width: 100%; height: 100%; } .ramadanWidget-info h3 { margin: 0 0 5px 0; color: #e0e0e0; font-weight: 600; font-size: 1.2em; } .ramadanWidget-time { font-size: 28px; font-weight: bold; color: #ffd700; margin: 0; } /* Footer Section */ .ramadanWidget-footer { text-align: center; font-size: 13px; opacity: 0.8; margin-top: 20px; } /* Responsive Design */ @media (max-width: 480px) { .ramadanWidget { margin: 15px; padding: 20px; } .ramadanWidget-time { font-size: 24px; } .ramadanWidget-header h2 { font-size: 1.7em; } .ramadanWidget-topInfo { font-size: 14px; } } /* Random star positions for decoration */ .ramadanWidget-star:nth-child(1) { top: 15%; left: 25%; width: 3px; height: 3px; animation-delay: 0s; } .ramadanWidget-star:nth-child(2) { top: 40%; left: 75%; width: 4px; height: 4px; animation-delay: 0.6s; } .ramadanWidget-star:nth-child(3) { top: 75%; left: 50%; width: 3px; height: 3px; animation-delay: 1.2s; } রমজানের সময়সূচী 📍 অবস্থান লোড হচ্ছে... বাংলাদেশ সময়: --:-- -- হিজরি তারিখ: -- সেহরি শেষ --:-- ইফতার শুরু --:-- বর্তমান অবস্থানের উপর ভিত্তি করে সময়সূচী // ডিফল্ট শহর: ঢাকা, বাংলাদেশ const DEFAULT_CITY = { name: "ঢাকা, বাংলাদেশ", lat: 23.8103, lng: 90.4125 }; // Mapping for Hijri month names from English to Bangla const hijriMonthMap = { "Muharram": "মুহররম", "Safar": "সর", "Rabi' al-awwal": "রবিউল আউয়াল", "Rabi' al-thani": "রবিউল থানি", "Jumada al-awwal": "জুমাদিলাওয়াল", "Jumada al-thani": "জুমাদিলসানি", "Rajab": "রাজব", "Sha'ban": "শাবান", "Ramadan": "রমজান", "Shawwal": "শাওয়াল", "Dhu al-Qidah": "ধু আল-কীদাহ", "Dhu al-Hijjah": "ধু আল-হিজ্জাহ" }; // Convert Western digits in a string to Bangla digits function convertToBanglaDigits(input) { const banglaDigits = ['০','১','২','৩','৪','৫','৬','৭','৮','৯']; return input.toString().split('').map(c => { if(c >= '0' && c { try { const lat = position.coords.latitude; const lng = position.coords.longitude; const locationName = await getLocationName(lat, lng); locationElement.textContent = locationName; fetchTimes(lat, lng); } catch (error) { handleError("অবস্থান নাম লোডে ব্যর্থ"); } }, (error) => { locationElement.textContent = DEFAULT_CITY.name; fetchTimes(DEFAULT_CITY.lat, DEFAULT_CITY.lng); } ); } else { locationElement.textContent = DEFAULT_CITY.name; fetchTimes(DEFAULT_CITY.lat, DEFAULT_CITY.lng); } // Update বাংলাদেশ সময় every second updateBdTime(); setInterval(updateBdTime, 1000); } // Get human-readable location using reverse geocoding (in Bangla) async function getLocationName(lat, lng) { try { // Add accept-language=bn to get results in Bangla const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&accept-language=bn`); const data = await response.json(); return data.address.city || data.address.county || DEFAULT_CITY.name; } catch (error) { return DEFAULT_CITY.name; } } // Fetch prayer times and Hijri date information async function fetchTimes(lat, lng) { const today = new Date().toISOString().split('T')[0]; try { const response = await fetch(`https://api.aladhan.com/v1/timings/${today}?latitude=${lat}&longitude=${lng}&method=1`); const data = await response.json(); const timings = data.data.timings; updateTimes(timings.Fajr, timings.Maghrib); // Update Hijri date (day, month & year) const hijriData = data.data.date.hijri; const hijriDay = hijriData.day; const hijriMonthEn = hijriData.month.en; const hijriYear = hijriData.year; const hijriMonthBn = hijriMonthMap[hijriMonthEn] || hijriMonthEn; const hijriFullDate = convertToBanglaDigits(hijriDay) + " " + hijriMonthBn + " " + convertToBanglaDigits(hijriYear); document.getElementById('hijriMonth').textContent = hijriFullDate; } catch (error) { handleError("নামাজের সময় লোডে ব্যর্থ"); } } // Update Sehri and Iftar times (সেহরি is 15 minutes before Fajr) function updateTimes(fajr, maghrib) { const sehriTime = adjustTime(fajr, -15); const ifterTime = maghrib; document.getElementById('sehriTime').textContent = formatTime(sehriTime); document.getElementById('ifterTime').textContent = formatTime(ifterTime); } // Adjust time (format "HH:mm") by given minutes function adjustTime(time, minutes) { const [hours, mins] = time.split(':').map(Number); const date = new Date(); date.setHours(hours); date.setMinutes(mins + minutes); return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`; } // Format time from 24-hour "HH:mm" to 12-hour format with AM/PM function formatTime(time24) { const [hours, minutes] = time24.split(':'); const period = hours >= 12 ? 'PM' : 'AM'; const hours12 = hours % 12 || 12; return `${hours12}:${minutes} ${period}`; } // Update Bangladesh time using Asia/Dhaka timezone function updateBdTime() { const options = { timeZone: "Asia/Dhaka", hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }; const bdTime = new Date().toLocaleTimeString("en-US", options); document.getElementById('bdTime').textContent = bdTime; } // Handle errors by displaying a message and placeholder times function handleError(message) { document.getElementById('locationName').textContent = message; document.querySelectorAll('.ramadanWidget-time').forEach(el => el.textContent = '--:--'); } // Initialize widget after a short delay setTimeout(initializeWidget, 500);