Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quran Audio Player</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap'); | |
| .arabic-font { | |
| font-family: 'Amiri', serif; | |
| } | |
| .audio-progress { | |
| -webkit-appearance: none; | |
| height: 6px; | |
| background: #e5e7eb; | |
| border-radius: 5px; | |
| outline: none; | |
| } | |
| .audio-progress::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .volume-slider { | |
| -webkit-appearance: none; | |
| height: 4px; | |
| background: #e5e7eb; | |
| border-radius: 5px; | |
| outline: none; | |
| } | |
| .volume-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .surah-card { | |
| transition: all 0.3s ease; | |
| } | |
| .surah-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .reciter-card { | |
| transition: all 0.3s ease; | |
| } | |
| .reciter-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-quran text-3xl text-emerald-600 mr-3"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">Quran Audio Player</h1> | |
| </div> | |
| <div class="relative w-full md:w-64"> | |
| <input type="text" placeholder="Search reciters or surahs..." | |
| class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Player Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="w-24 h-24 bg-emerald-100 rounded-lg flex items-center justify-center mb-4 md:mb-0 md:mr-6"> | |
| <i class="fas fa-music text-3xl text-emerald-600"></i> | |
| </div> | |
| <div class="flex-1 w-full"> | |
| <h2 class="text-xl font-semibold text-gray-800">No Audio Selected</h2> | |
| <p class="text-gray-500 mb-4">Select a reciter and surah to begin</p> | |
| <div class="w-full mb-4"> | |
| <input type="range" min="0" max="100" value="0" class="audio-progress w-full"> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>0:00</span> | |
| <span>0:00</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 mr-2"> | |
| <i class="fas fa-step-backward text-gray-600"></i> | |
| </button> | |
| <button class="p-3 bg-emerald-500 text-white rounded-full hover:bg-emerald-600 mr-2"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-step-forward text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-volume-up text-gray-500 mr-2"></i> | |
| <input type="range" min="0" max="100" value="80" class="volume-slider w-20"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-gray-200 mb-6"> | |
| <button id="reciters-tab" class="px-4 py-2 font-medium text-emerald-600 border-b-2 border-emerald-500">Reciters</button> | |
| <button id="surahs-tab" class="px-4 py-2 font-medium text-gray-500 hover:text-gray-700">Surahs</button> | |
| <button id="sections-tab" class="px-4 py-2 font-medium text-gray-500 hover:text-gray-700">Sections</button> | |
| </div> | |
| <!-- Reciters Content --> | |
| <div id="reciters-content" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Reciter cards will be loaded here --> | |
| <div class="reciter-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Al-Hussayni Al-'Azazy</h3> | |
| <p class="text-sm text-gray-500 arabic-font">الحسيني العزازي مع اطفال</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="reciter-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Mostafa Ismaeel</h3> | |
| <p class="text-sm text-gray-500 arabic-font">مصطفى إسماعيل</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="reciter-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Madinah Taraweeh 1435</h3> | |
| <p class="text-sm text-gray-500">Live from Masjid al-Nabawi</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="reciter-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-emerald-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Mahmoud Khaleel Al-Husary</h3> | |
| <p class="text-sm text-gray-500 arabic-font">محمود خليل الحصري</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Surahs Content (Hidden by default) --> | |
| <div id="surahs-content" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Surah cards will be loaded here --> | |
| <div class="surah-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-emerald-600 font-medium">1</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800">Al-Fatihah</h3> | |
| <p class="text-sm text-gray-500 arabic-font">الفاتحة</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">7 verses</span> | |
| </div> | |
| </div> | |
| <div class="surah-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-emerald-600 font-medium">2</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800">Al-Baqarah</h3> | |
| <p class="text-sm text-gray-500 arabic-font">البقرة</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">286 verses</span> | |
| </div> | |
| </div> | |
| <div class="surah-card bg-white rounded-lg shadow p-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-emerald-600 font-medium">3</span> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800">Ali 'Imran</h3> | |
| <p class="text-sm text-gray-500 arabic-font">آل عمران</p> | |
| </div> | |
| <span class="text-gray-400 text-sm">200 verses</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sections Content (Hidden by default) --> | |
| <div id="sections-content" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Section cards will be loaded here --> | |
| <div class="bg-white rounded-lg shadow p-6 cursor-pointer hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-mosque text-emerald-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Recitations</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 cursor-pointer hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-kaaba text-emerald-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Recitations from Haramain Taraweeh</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 cursor-pointer hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-book-quran text-emerald-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Non-Hafs Recitations</h3> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 cursor-pointer hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-language text-emerald-600"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-800">Recitations with Translations</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 pt-6 border-t border-gray-200 text-center text-gray-500 text-sm"> | |
| <p>Quran Audio Player - Listen to the Holy Quran</p> | |
| <p class="mt-2">Data provided by quranicaudio.com API</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.getElementById('reciters-tab').addEventListener('click', function() { | |
| document.getElementById('reciters-content').classList.remove('hidden'); | |
| document.getElementById('surahs-content').classList.add('hidden'); | |
| document.getElementById('sections-content').classList.add('hidden'); | |
| document.getElementById('reciters-tab').classList.add('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('reciters-tab').classList.remove('text-gray-500'); | |
| document.getElementById('surahs-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('surahs-tab').classList.add('text-gray-500'); | |
| document.getElementById('sections-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('sections-tab').classList.add('text-gray-500'); | |
| }); | |
| document.getElementById('surahs-tab').addEventListener('click', function() { | |
| document.getElementById('reciters-content').classList.add('hidden'); | |
| document.getElementById('surahs-content').classList.remove('hidden'); | |
| document.getElementById('sections-content').classList.add('hidden'); | |
| document.getElementById('reciters-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('reciters-tab').classList.add('text-gray-500'); | |
| document.getElementById('surahs-tab').classList.add('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('surahs-tab').classList.remove('text-gray-500'); | |
| document.getElementById('sections-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('sections-tab').classList.add('text-gray-500'); | |
| }); | |
| document.getElementById('sections-tab').addEventListener('click', function() { | |
| document.getElementById('reciters-content').classList.add('hidden'); | |
| document.getElementById('surahs-content').classList.add('hidden'); | |
| document.getElementById('sections-content').classList.remove('hidden'); | |
| document.getElementById('reciters-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('reciters-tab').classList.add('text-gray-500'); | |
| document.getElementById('surahs-tab').classList.remove('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('surahs-tab').classList.add('text-gray-500'); | |
| document.getElementById('sections-tab').classList.add('text-emerald-600', 'border-emerald-500'); | |
| document.getElementById('sections-tab').classList.remove('text-gray-500'); | |
| }); | |
| // Audio player functionality | |
| const playButton = document.querySelector('.fa-play').parentElement; | |
| const progressBar = document.querySelector('.audio-progress'); | |
| const currentTimeDisplay = document.querySelectorAll('.flex.justify-between.text-sm.text-gray-500.mt-1 span')[0]; | |
| const durationDisplay = document.querySelectorAll('.flex.justify-between.text-sm.text-gray-500.mt-1 span')[1]; | |
| let isPlaying = false; | |
| let audio = new Audio(); | |
| // Mock audio for demonstration | |
| audio.src = 'https://download.quranicaudio.com/quran/mostafa_ismaeel/001.mp3'; | |
| audio.duration = 180; // Mock duration in seconds | |
| // Format time from seconds to MM:SS | |
| function formatTime(seconds) { | |
| const minutes = Math.floor(seconds / 60); | |
| const remainingSeconds = Math.floor(seconds % 60); | |
| return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; | |
| } | |
| // Update duration display | |
| durationDisplay.textContent = formatTime(audio.duration); | |
| // Play/pause functionality | |
| playButton.addEventListener('click', function() { | |
| if (isPlaying) { | |
| audio.pause(); | |
| playButton.innerHTML = '<i class="fas fa-play"></i>'; | |
| playButton.classList.remove('bg-emerald-600'); | |
| playButton.classList.add('bg-emerald-500'); | |
| } else { | |
| audio.play(); | |
| playButton.innerHTML = '<i class="fas fa-pause"></i>'; | |
| playButton.classList.remove('bg-emerald-500'); | |
| playButton.classList.add('bg-emerald-600'); | |
| } | |
| isPlaying = !isPlaying; | |
| }); | |
| // Update progress bar as audio plays | |
| audio.addEventListener('timeupdate', function() { | |
| const currentTime = audio.currentTime; | |
| const duration = audio.duration; | |
| const progressPercent = (currentTime / duration) * 100; | |
| progressBar.value = progressPercent; | |
| currentTimeDisplay.textContent = formatTime(currentTime); | |
| }); | |
| // Allow seeking by clicking on progress bar | |
| progressBar.addEventListener('input', function() { | |
| const seekTime = (progressBar.value / 100) * audio.duration; | |
| audio.currentTime = seekTime; | |
| }); | |
| // When audio ends, reset player | |
| audio.addEventListener('ended', function() { | |
| playButton.innerHTML = '<i class="fas fa-play"></i>'; | |
| playButton.classList.remove('bg-emerald-600'); | |
| playButton.classList.add('bg-emerald-500'); | |
| isPlaying = false; | |
| progressBar.value = 0; | |
| currentTimeDisplay.textContent = '0:00'; | |
| }); | |
| // Volume control | |
| const volumeSlider = document.querySelector('.volume-slider'); | |
| volumeSlider.addEventListener('input', function() { | |
| audio.volume = volumeSlider.value / 100; | |
| }); | |
| // Click handlers for reciter and surah cards | |
| const reciterCards = document.querySelectorAll('.reciter-card'); | |
| reciterCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would fetch surahs for the selected reciter | |
| document.getElementById('surahs-tab').click(); | |
| // Update player info | |
| const playerTitle = document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8 h2'); | |
| const playerSubtitle = document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8 p'); | |
| const reciterName = this.querySelector('h3').textContent; | |
| playerTitle.textContent = `Listening to ${reciterName}`; | |
| playerSubtitle.textContent = 'Select a surah to play'; | |
| }); | |
| }); | |
| const surahCards = document.querySelectorAll('.surah-card'); | |
| surahCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| // In a real app, this would construct the audio URL and play it | |
| const surahName = this.querySelector('h3').textContent; | |
| const surahNumber = this.querySelector('.w-10.h-10 span').textContent; | |
| const playerTitle = document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8 h2'); | |
| const playerSubtitle = document.querySelector('.bg-white.rounded-xl.shadow-md.p-6.mb-8 p'); | |
| playerTitle.textContent = surahName; | |
| playerSubtitle.textContent = `Surah ${surahNumber}`; | |
| // For demo purposes, we'll just show the play button | |
| playButton.innerHTML = '<i class="fas fa-play"></i>'; | |
| playButton.classList.remove('bg-emerald-600'); | |
| playButton.classList.add('bg-emerald-500'); | |
| isPlaying = false; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rabah2025/quranaudioplayer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |