নাতে রাসূল : জীবন যেদিন বিশ্ব থেকে নিঃস্ব - মাওলানা মুহাম্মদ সেলিম রিয়াদ হক্কানী

Lyric & Tune: Mawlana Mohammad Salim Riyad Haqqany

:root { —theme-color: #0F9D58; —card-bg: #ffffff; —text-primary: #2d3436; —text-secondary: #636e72; —shadow-color: rgba(0, 0, 0, 0.08); } .nasheed-card-wrapper { display: flex; justify-content: center; margin: 20px 0; padding: 0 10px; } .nasheed-card { background: var(—card-bg); width: 100%; max-width: 360px; border-radius: 16px; padding: 15px; box-shadow: 0 10px 25px var(—shadow-color); position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); font-family: ‘Segoe UI’, sans-serif; transition: transform 0.3s ease; } .nasheed-card:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); } .card-header { text-align: center; margin-bottom: 10px; } .music-icon-box { width: 40px; height: 40px; background: rgba(15, 157, 88, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px auto; color: var(—theme-color); } .music-icon-box svg { width: 20px; height: 20px; fill: currentColor; } .track-name { font-size: 15px; font-weight: 700; color: var(—text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artist-name { font-size: 11px; color: var(—text-secondary); font-weight: 500; } .wave-container { display: flex; justify-content: center; align-items: flex-end; height: 18px; gap: 3px; margin-bottom: 12px; opacity: 0.3; transition: opacity 0.3s; } .nasheed-card.playing .wave-container { opacity: 1; } .wave-bar { width: 3px; background: var(—theme-color); border-radius: 3px; height: 3px; } .nasheed-card.playing .wave-bar { animation: sound-wave 1s infinite ease-in-out; } .wave-bar:nth-child(1) { animation-duration: 0.8s; } .wave-bar:nth-child(2) { animation-duration: 1.1s; } .wave-bar:nth-child(3) { animation-duration: 1.3s; } .wave-bar:nth-child(4) { animation-duration: 0.9s; } .wave-bar:nth-child(5) { animation-duration: 1.2s; } @keyframes sound-wave { 0%, 100% { height: 3px; } 50% { height: 18px; } } .progress-section { margin-bottom: 12px; } .seek-slider { -webkit-appearance: none; width: 100%; height: 4px; background: #dfe6e9; border-radius: 4px; cursor: pointer; outline: none; } .seek-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: var(—theme-color); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px rgba(15, 157, 88, 0.1); } .time-row { display: flex; justify-content: space-between; font-size: 10px; color: var(—text-secondary); margin-top: 5px; font-weight: 600; } .controls-row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .volume-box { display: flex; align-items: center; justify-content: flex-end; gap: 5px; width: 25%; } .vol-slider { -webkit-appearance: none; width: 100%; height: 3px; background: #dfe6e9; border-radius: 3px; cursor: pointer; } .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; background: var(—text-secondary); border-radius: 50%; } .main-play-btn { width: 45px; height: 45px; background: var(—theme-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 15px rgba(15, 157, 88, 0.25); transition: transform 0.2s; } .main-play-btn:active { transform: scale(0.92); } .main-play-btn svg { fill: white; width: 20px; height: 20px; margin-left: 2px; } .download-btn { width: 25%; display: flex; align-items: center; justify-content: flex-start; color: var(—text-secondary); cursor: pointer; text-decoration: none; transition: color 0.2s; } .download-btn:hover { color: var(—theme-color); } .download-btn svg { width: 20px; height: 20px; fill: currentColor; } ; const card = block.querySelector(‘.nasheed-card’); const audio = card.querySelector(‘audio’); const playBtn = card.querySelector(‘.main-play-btn’); const playIcon = card.querySelector(‘.play-svg’); const pauseIcon = card.querySelector(‘.pause-svg’); const seekSlider = card.querySelector(‘.seek-slider’); const volSlider = card.querySelector(‘.vol-slider’); const currTime = card.querySelector(‘.curr-time’); const totalTime = card.querySelector(‘.total-time’); const formatTime = (s) => { if(isNaN(s)) return “0:00”; const m = Math.floor(s / 60); const sec = Math.floor(s % 60); return ${m}:${sec < 10 ? '0'+sec : sec}; } audio.addEventListener(‘loadedmetadata’, () => { totalTime.textContent = formatTime(audio.duration); seekSlider.max = Math.floor(audio.duration); }); playBtn.addEventListener(‘click’, () => { if(audio.paused) { document.querySelectorAll(‘audio’).forEach(a => { if(a !== audio) { a.pause(); const otherCard = a.closest(‘.nasheed-card’); otherCard.classList.remove(‘playing’); otherCard.querySelector(‘.play-svg’).style.display = ‘block’; otherCard.querySelector(‘.pause-svg’).style.display = ‘none’; } }); audio.play(); card.classList.add(‘playing’); playIcon.style.display = ‘none’; pauseIcon.style.display = ‘block’; } else { audio.pause(); card.classList.remove(‘playing’); playIcon.style.display = ‘block’; pauseIcon.style.display = ‘none’; } }); audio.addEventListener(‘timeupdate’, () => { seekSlider.value = audio.currentTime; currTime.textContent = formatTime(audio.currentTime); const percent = (audio.currentTime / audio.duration) * 100; seekSlider.style.background = linear-gradient(to right, #0F9D58 ${percent}%, #dfe6e9 ${percent}%); }); seekSlider.addEventListener(‘input’, () => { audio.currentTime = seekSlider.value; }); volSlider.addEventListener(‘input’, (e) => { audio.volume = e.target.value; }); audio.addEventListener(‘ended’, () => { card.classList.remove(‘playing’); playIcon.style.display = ‘block’; pauseIcon.style.display = ‘none’; seekSlider.value = 0; seekSlider.style.background = “#dfe6e9”; }); }); });