<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yasin Suresi</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.card-arabic {
background-color: #f9f9f9;
}
.card-text-arabic {
font-size: 1.2em;
direction: rtl;
}
.card-text-translation {
font-size: 1em;
color: green;
}
.card-text-transliteration {
font-size: 1em;
font-style: italic;
}
.highlight {
background-color: #d4edda !important;
padding-top: 15px;
padding-bottom: 15px;
}
.ayah-card:not(.highlight) .card-text-translation {
color: black; /* Normal renk */
}
.ayah-card:not(.highlight) .card-text-transliteration {
font-style: normal; /* Normal stil */
}
.ayah-card:not(.highlight) {
opacity: 0.5;
}
.audio-player-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
#audioPlayer {
display: none;
}
.audio-controls {
display: flex;
justify-content: center;
align-items: center;
}
.audio-controls button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 1.2em;
border-radius: 5px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.audio-controls button:hover {
background-color: #0056b3;
}
.audio-controls button svg {
width: 24px;
height: 24px;
}
.now-playing {
text-align: center;
margin-bottom: 10px;
font-weight: bold;
color: green;
font-size: 1.1em;
}
</style>
</head>
<body>
<div class="container mt-5" id="surah-content">
<h1 class="text-center mb-4">Yasin Suresi</h1>
<div class="row" id="surah-container">
<?php
// AlQuran API'den Yasin Suresi'ni (Süre 36) almak için URL belirleyin
$urlArabic = "http://api.alquran.cloud/v1/surah/36"; // Arabic text
$urlTranslation = "http://api.alquran.cloud/v1/surah/36/tr.golpinarli"; // Diyanet translation
$urlTransliteration = "http://api.alquran.cloud/v1/surah/36/tr.transliteration"; // Transliteration
$urlAudio = "http://api.alquran.cloud/v1/surah/36/ar.alafasy"; // Audio recitation by Alafasy
// cURL başlat
$chArabic = curl_init();
$chTranslation = curl_init();
$chTransliteration = curl_init();
$chAudio = curl_init();
// cURL seçeneklerini ayarla
curl_setopt($chArabic, CURLOPT_URL, $urlArabic);
curl_setopt($chArabic, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($chTranslation, CURLOPT_URL, $urlTranslation);
curl_setopt($chTranslation, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($chTransliteration, CURLOPT_URL, $urlTransliteration);
curl_setopt($chTransliteration, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($chAudio, CURLOPT_URL, $urlAudio);
curl_setopt($chAudio, CURLOPT_RETURNTRANSFER, 1);
// cURL isteğini gerçekleştir ve yanıtı al
$responseArabic = curl_exec($chArabic);
$responseTranslation = curl_exec($chTranslation);
$responseTransliteration = curl_exec($chTransliteration);
$responseAudio = curl_exec($chAudio);
// cURL oturumunu kapat
curl_close($chArabic);
curl_close($chTranslation);
curl_close($chTransliteration);
curl_close($chAudio);
// JSON yanıtını çöz
$dataArabic = json_decode($responseArabic, true);
$dataTranslation = json_decode($responseTranslation, true);
$dataTransliteration = json_decode($responseTransliteration, true);
$dataAudio = json_decode($responseAudio, true);
// İsteğin başarılı olup olmadığını kontrol et
if ($dataArabic && $dataArabic['status'] === "OK" && $dataTranslation && $dataTranslation['status'] === "OK" && $dataTransliteration && $dataTransliteration['status'] === "OK" && $dataAudio && $dataAudio['status'] === "OK") {
// Sure verilerini al
$surahArabic = $dataArabic['data'];
$surahTranslation = $dataTranslation['data'];
$surahTransliteration = $dataTransliteration['data'];
$surahAudio = $dataAudio['data']['ayahs'];
// Yasin Suresi'ni kartlarla göster
foreach ($surahArabic['ayahs'] as $index => $ayah) {
$arabicText = $ayah['text'];
$translation = $surahTranslation['ayahs'][$index]['text'];
$transliteration = $surahTransliteration['ayahs'][$index]['text'];
// "ü" harfini "u" ile değiştir
$transliteration = str_replace('ü', 'u', $transliteration);
$transliteration = str_replace('g', 'ğ', $transliteration);
$cardClass = ($index === 0) ? 'ayah-card highlight' : 'ayah-card';
echo '<div class="col-md-12 mb-4 ' . $cardClass . '" id="ayah-' . $ayah['numberInSurah'] . '">';
echo '<div class="card card-arabic">';
echo '<div class="card-body">';
echo '<h5 class="card-title text-center" >Yasin Suresi ' . $ayah['numberInSurah'] . '. Ayet</h5>';
echo '</div>';
echo '</div>';
echo '<div class="card mt-2">';
echo '<div class="card-body">';
echo '<p class="card-text card-text-arabic text-center">' . $arabicText . '</p>';
echo '</div>';
echo '</div>';
echo '<div class="card mt-2">';
echo '<div class="card-body">';
echo '<p class="card-text card-text-transliteration"><strong>Latince Okunuşu :</strong> ' . $transliteration . '</p>';
echo '</div>';
echo '</div>';
echo '<div class="card mt-2">';
echo '<div class="card-body">';
echo '<p class="card-text card-text-translation"><strong>Meali :</strong> <span class="ayah-translation">' . $translation . '</span></p>';
echo '</div>';
echo '</div>';
echo '</div>';
}
} else {
echo '<div class="alert alert-danger">Sure alınamadı.</div>';
}
?>
</div>
</div>
<div class="audio-player-container">
<div id="nowPlaying" class="now-playing"></div>
<div class="audio-controls">
<button id="prevAyah">
<svg viewBox="0 0 24 24">
<path d="M5 12l14-9v18z"></path>
</svg>
</button>
<button id="playPause">
<svg id="pauseIcon" viewBox="0 0 24 24" style="display: none;">
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
</svg>
<svg id="playIcon" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"></path>
</svg>
</button>
<button id="nextAyah">
<svg viewBox="0 0 24 24">
<path d="M19 12l-14 9V3z"></path>
</svg>
</button>
<button id="muteToggle">
<svg id="unmutedIcon" viewBox="0 0 24 24">
<path d="M12 3v18l-5-5H3V9h4l5-6zm8.5 8.5L18 13V7l-1.5 1.5L13 7v10l3.5-3.5L18 17v-6l1.5 1.5V12h1v-1.5z"></path>
</svg>
<svg id="mutedIcon" viewBox="0 0 24 24" style="display: none;">
<path d="M12 3v18l-5-5H3V9h4l5-6zm8.5 8.5L18 13V7l-1.5 1.5L13 7v10l3.5-3.5L18 17v-6l1.5 1.5V12h1v-1.5z"></path>
</svg>
</button>
</div>
<audio id="audioPlayer" controls>
<source id="audioSource" src="" type="audio/mp3">
Tarayıcınız ses etiketini desteklemiyor.
</audio>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const totalAyahs = <?php echo count($surahArabic['ayahs']); ?>;
let currentAyah = 1;
const audioPlayer = document.getElementById('audioPlayer');
const audioSource = document.getElementById('audioSource');
const ayahCards = document.querySelectorAll('.ayah-card');
const audioUrls = <?php echo json_encode(array_map(function ($ayah) {
return $ayah['audio'];
}, $surahAudio)); ?>;
const surahContent = document.getElementById('surah-content');
const loadingScreen = document.getElementById('preloader');
const progress = document.getElementById('progress');
const loadingText = document.getElementById('loadingText');
const nowPlaying = document.getElementById('nowPlaying');
const playPauseButton = document.getElementById('playPause');
const prevAyahButton = document.getElementById('prevAyah');
const nextAyahButton = document.getElementById('nextAyah');
const muteToggleButton = document.getElementById('muteToggle');
let audioPreloaded = [];
let isPlaying = false;
let isPaused = false;
function highlightAyah(ayahNumber) {
ayahCards.forEach(card => {
if (card.id === `ayah-${ayahNumber}`) {
card.classList.add('highlight');
} else {
card.classList.remove('highlight');
}
});
const currentCard = document.getElementById(`ayah-${ayahNumber}`);
currentCard.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
function playAyah(ayahNumber) {
const audioUrl = audioPreloaded[ayahNumber - 1].src;
audioSource.src = audioUrl;
audioPlayer.load();
audioPlayer.play();
highlightAyah(ayahNumber);
// Now Playing gösterimi
nowPlaying.innerHTML = `Şu an ${ayahNumber}. Ayettesin`;
document.getElementById('playIcon').style.display = 'none';
document.getElementById('pauseIcon').style.display = 'block';
isPlaying = true;
isPaused = false;
}
function pauseAyah() {
audioPlayer.pause();
document.getElementById('playIcon').style.display = 'block';
document.getElementById('pauseIcon').style.display = 'none';
isPlaying = false;
isPaused = true;
}
playPauseButton.addEventListener('click', function () {
if (isPlaying) {
pauseAyah();
} else {
if (isPaused) {
audioPlayer.play();
document.getElementById('playIcon').style.display = 'none';
document.getElementById('pauseIcon').style.display = 'block';
isPlaying = true;
} else {
playAyah(currentAyah);
}
}
});
audioPlayer.addEventListener('ended', function () {
if (currentAyah < totalAyahs) {
currentAyah++;
playAyah(currentAyah);
}
});
prevAyahButton.addEventListener('click', function () {
if (currentAyah > 1) {
currentAyah--;
playAyah(currentAyah);
}
});
nextAyahButton.addEventListener('click', function () {
if (currentAyah < totalAyahs) {
currentAyah++;
playAyah(currentAyah);
}
});
muteToggleButton.addEventListener('click', function () {
audioPlayer.muted = !audioPlayer.muted;
document.getElementById('unmutedIcon').style.display = audioPlayer.muted ? 'none' : 'block';
document.getElementById('mutedIcon').style.display = audioPlayer.muted ? 'block' : 'none';
});
function preloadAudio() {
let loadedCount = 0;
audioUrls.forEach((url, index) => {
const audio = new Audio();
audio.src = url;
audio.addEventListener('canplaythrough', () => {
loadedCount++;
const progressPercent = Math.round((loadedCount / audioUrls.length) * 100);
progress.style.width = progressPercent + '%';
// Preloader durumuna göre metin güncellemeleri
if (progressPercent === 50) {
loadingText.textContent = "Biraz daha sabır et, az kaldı :)";
} else if (progressPercent === 80) {
loadingText.textContent = "Çok az kaldı :)";
} else if (progressPercent === 100) {
loadingText.textContent = "Sabrın için teşekkür ederim. Bak Bitti Mübarek :)";
setTimeout(() => {
loadingText.textContent = ""; // Metni temizle
setTimeout(() => {
loadingScreen.style.opacity = '0';
setTimeout(() => {
loadingScreen.style.display = 'none';
surahContent.style.display = 'block';
playAyah(currentAyah);
}, 300);
}, 1000); // Metnin ekranda kalma süresi
}, 2000); // Metnin ekranda kalma süresi
}
});
audioPreloaded.push(audio);
});
}
preloadAudio();
// Kullanıcının tarayıcıyı kapatıp açması durumunda kaldığı ayeti hatırlama
window.addEventListener('beforeunload', function () {
localStorage.setItem('lastPlayedAyah', currentAyah);
});
window.addEventListener('load', function () {
const lastPlayedAyah = localStorage.getItem('lastPlayedAyah');
if (lastPlayedAyah) {
currentAyah = parseInt(lastPlayedAyah);
playAyah(currentAyah);
}
});
// Ayet kartlarına tıklama event'i
ayahCards.forEach(card => {
card.addEventListener('click', function () {
const ayahNumber = parseInt(this.id.split('-')[1]);
currentAyah = ayahNumber;
playAyah(currentAyah);
});
});
// Baştan Başla butonu event'i
const restartButton = document.getElementById('restartButton');
restartButton.addEventListener('click', function () {
currentAyah = 1;
playAyah(currentAyah);
});
});
</script>
</body>
</html> 
