// soz.php


<!-- Header Menu -->
<div class="header">
    <div class="left-buttons">
        <div class="menu-icon" onclick="toggleMenu()">☰</div>
        <a href="/m" class="home-button">🏠</a>
    </div>
    <div class="header-buttons">
        <button onclick="changeFontSize('increase')">A+</button>
        <button onclick="changeFontSize('decrease')">A-</button>
        <button onclick="toggleDarkMode()">🌙</button>
    </div>
</div>

<!-- Side Menu -->
<div id="side-menu" class="side-menu">
    <a href="javascript:void(0)" class="close-btn" onclick="toggleMenu()">×</a>
    <div class="menu-links">
        <a href="sozler.php">Sözlər</a>
        <a href="movzular.php">Mövzular</a>
        <a href="quran-lugeti.php">Quran Lüğəti</a>
        <a href="sesli-quran.php">Səsli Quran</a>
        <a href="save.php" id="saved-verses-link">Yadda Saxlanılan Ayələr</a>
		<a href="javascript:void(0);" id="go-to-pinned-verse-link">Sabitlənmiş Ayə</a>
		<a href="javascript:void(0);" id="addToHomeScreenBtn" style="display: none;">Proqramlara Əlavə Et</a>

		<a href="https://www.bilinmeyenheqiqetler.com/">Bilinməyən Həqiqətlər</a>
				
    </div>
    <div class="search-container">
        <form class="search-form" accept-charset="utf-8" action="arama.php" method="get" onsubmit="return search(event)">
            <input class="inputbox" type="text" id="aranankelime" name="aranankelime" maxlength="255">
            <input type="submit" value="Axtar" name="submit">
        </form>
    </div>
</div>

<div id="alert" class="custom-alert"></div>

<style>
/* Header Stilleri */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f1f1f1;
}

.left-buttons {
    display: flex;
    align-items: center;
}

.menu-icon {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.home-button {
    font-size: 24px;
    text-decoration: none;
    color: #333;
    margin-left: 10px;
}

.header-buttons button {
    font-size: 16px;
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
}

/* Side Menu Stilleri */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    padding: 20px;
    overflow-y: auto;
	display: none;
}

.side-menu.active {
    transform: translateX(0);
	display: block;  /* Active olduğunda menü göstərilir */
}

.close-btn {
    font-size: 30px;
    color: red;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    text-decoration: none;
}

.menu-links {
    margin-top: 50px;
}

.menu-links a {
    display: block;
    padding: 15px;
    color: white;
    font-size: 18px;
    text-decoration: none;
    border-bottom: 1px solid #444;
    transition: background-color 0.3s ease;
}

.menu-links a:hover {
    background-color: #993333;
}

.menu-links a:last-child {
    border-bottom: none;
}

.pinned {
    background-color: #ffeb3b; /* Sarı fon */
    border: 2px solid #fbc02d; /* Sarı çərçivə */
    padding: 5px;
    border-radius: 5px;
}


/* Arama Kutusu */
.search-container {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.inputbox {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.search-form input[type="submit"] {
    width: 80%;
    padding: 10px;
    background-color: #993333;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.search-form input[type="submit"]:hover {
    background-color: #660000;
}

/* Custom Alert */
.custom-alert {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.custom-alert.show {
    display: block;
    opacity: 1;
}


.verse {
    position: relative; /* Genel kapsayıcı için */
}

.verse-header {
    display: flex;
    justify-content: space-between; /* Numara sola, menü sağa */
    align-items: center;
    margin-bottom: 0px;
    width: 100%; /* Satırın tam genişliğini kapla */
}

.verse-menu-container {
    position: relative; /* Menü bu kapsayıcıya göre konumlanacak */
}

.verse-number {
    font-weight: bold;
}

.verse-text {
    margin-top: 0px;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	color: #000;
}

body.dark-mode .menu-btn {
    color: #fff;
}

.verse-menu {
    position: absolute;
    top: 100%; /* Butonun hemen altı */
    right: 0; /* Sağ kenara sabitle */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    width: auto; /* Genişlik içeriğe göre otomatik */
    white-space: nowrap; /* Metin tek satırda kalsın, kırılmasın */
    padding: 5px 5px; /* İç boşluklar */
	
}

.copy-icon, .pin-icon .save-icon .delete-icon .share-icon{
    display: block;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid #ddd; /* Xətt əlavə edilir */
}

.copy-icon:not(:last-child), 
.pin-icon:not(:last-child), 
.save-icon:not(:last-child), 
.share-icon:not(:last-child), 
.delete-icon:not(:last-child) {
    border-bottom: 1px solid #ddd; /* Her öğeye çizgi eklenir, son öğeye eklenmez */
}


.copy-icon:hover .pin-icon:hover, .save-icon:hover .delete-icon:hover .share-icon:hover{
    background-color: #f0f0f0;
}

body.dark-mode .copy-icon:hover, 
body.dark-mode .pin-icon:hover, 
body.dark-mode .share-icon:hover, 
body.dark-mode .save-icon:hover {
    background-color: #555;
}

body.dark-mode .verse-menu {
    background-color: #444;
    border-color: #666;
    color: #f1f1f1;
}

.verse-menu span {
    display: block;
    padding: 5px;
    cursor: pointer;
}

.verse-menu span:hover {
    background: #eee;
}

.verse.pinned {
    font-weight: bold;
    color: red;
}

.surah.pinned {
    background-color: #4CAF50;
    color: white !important;
}

body.dark-mode .verse.pinned {
    color: #ff6347;
}

.saved-verse {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Menü öğelerindeki boşlukları temizle ve düzgün hizalama sağla */
.menu-item {
    white-space: nowrap; /* Satır sonu veya boşluklar içerik bozulmasın diye engellenir */
    padding: 5px 10px;   /* Menü öğeleri arasındaki boşluğu ayarla */
    color: #ffffff;      /* Metin rengi, örneğin beyaz */
    text-align: left;     /* Metni sola hizala */
}

/* Menü öğesinde tıklanabilir öğe için renk değişimi */
.menu-item:hover {
    background-color: #333; /* Hover efekti: arka plan rengini değiştir */
}

/* Seçilen menü öğesi için stil */
.menu-item.selected {
    background-color: #666; /* Seçilen öğe arka plan rengini değiştir */
    color: #fff; /* Seçilen öğe için metin rengi beyaz */
}


/* Harfler için stil */
.letter-style {
    font-size: 33px; /* Harf boyutunu büyüttüm, ama çok büyük yapmadım */
    color: darkgreen; /* Koyu yeşil renk */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Gölgelendirme ekledim */
}

/* Kelimeler için sağa kaydırma */
.word {
    margin-left: 15px; /* Kelimeleri biraz sağa kaydırdım */
}

.letter {
    color: #4C8A2C; /* Koyu yeşil harfler */
    font-size: 34px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
}

.letter:hover {
    color: #6DBF3F; /* Hoverda daha açık yeşil */
}

.movzu-style {
    font-size: 16px; /* Harf boyutunu büyüttüm, ama çok büyük yapmadım */
    color: darkgreen; /* Koyu yeşil renk */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Gölgelendirme ekledim */
}

.movzu {
    color: #4C8A2C; /* Koyu yeşil harfler */
    font-size: 22px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
}

.movzu:hover {
    color: #6DBF3F; /* Hoverda daha açık yeşil */
}


.word a {
    color: #000; /* Siyah yazı */
    text-decoration: none; /* Alt çizgi yok */
    font-size: 18px;
}

.word a:hover {
    color: #6DBF3F; /* Hoverda yeşil renk */
}

body.dark-mode .letter {
    color: white !important; 
    font-size: 28px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .movzu {
    color: white !important; 
    font-size: 22px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .letter-style {
    color: white !important; 
    font-size: 28px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .movzu-style {
    color: white !important; 
    font-size: 16px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .letter:hover {
    color: white; 
}

body.dark-mode .movzu:hover {
    color: white; 
}



body.dark-mode .word a {
    color: #f0f0f0; /* Açık yazı rengi */
    text-decoration: none; /* Alt çizgi yok */
    font-size: 18px;
}

body.dark-mode .word a:hover {
    color: #6DBF3F; /* Hoverda yeşil renk */
}

body.dark-mode .verse {
    color: #f0f0f0; /* Açık yazı rengi */
}

body.dark-mode .icon-doc {
    width: 16px;
    margin-right: 10px;
}
</style>
<script>
        // Header ile ilgili temel fonksiyonlar
        function toggleMenu() {
            const sideMenu = document.getElementById('side-menu');
            sideMenu.classList.toggle('active');
        }

        let fontSize = 16;
        let darkMode = localStorage.getItem('darkMode') === 'true';

        if (darkMode) {
            document.body.classList.add('dark-mode');
        }

        function changeFontSize(action) {
            if (action === 'increase') {
                fontSize += 2;
            } else if (action === 'decrease') {
                fontSize = Math.max(12, fontSize - 2);
            }
            document.body.style.fontSize = fontSize + 'px';
        }

        function toggleDarkMode() {
            darkMode = !darkMode;
            document.body.classList.toggle('dark-mode', darkMode);
            localStorage.setItem('darkMode', darkMode);
            if (typeof applyPinnedVerse === 'function') applyPinnedVerse();
        }
    </script>
<script>


document.addEventListener("DOMContentLoaded", function() {
    let pinnedVerse = JSON.parse(localStorage.getItem('pinnedVerse')) || null;

    // Pinli ayetleri uygula
    function applyPinnedVerse() {
        if (pinnedVerse) {
            const verseElement = document.querySelector(`#verse-${pinnedVerse.surahIndex + 1}-${pinnedVerse.verseIndex}`);
            const surahElement = document.querySelector(`#surah-${pinnedVerse.surahIndex}`);
            if (verseElement) {
                verseElement.classList.add('pinned');
            }
            if (surahElement) {
                surahElement.classList.add('pinned');
            }
        }
    }
    applyPinnedVerse();

    // Menü açma/kapama
    document.querySelectorAll('.menu-btn').forEach(button => {
        button.addEventListener('click', function(event) {
            const menu = button.nextElementSibling; // Menü, butonun hemen sonraki kardeşi
            if (!menu) return;

            // Diğer açık menüleri kapat
            document.querySelectorAll('.verse-menu').forEach(dropdown => {
                if (dropdown !== menu) {
                    dropdown.style.display = 'none';
                }
            });

            // Tıklanan menüyü aç/kapat
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            event.stopPropagation();
        });
    });

    // Menü dışı tıklama ile kapatma
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.verse-menu') && !event.target.classList.contains('menu-btn')) {
            document.querySelectorAll('.verse-menu').forEach(menu => {
                menu.style.display = 'none';
            });
        }
    });

    // Menü öğesi seçildiğinde menü otomatik kapanacak
    document.querySelectorAll('.copy-icon, .pin-icon, .save-icon').forEach(item => {
        item.addEventListener('click', function() {
            const menu = this.closest('.verse-menu');
            if (menu) {
                menu.style.display = 'none'; // Menüyü kapat
            }
        });
    });

    // Kopyalama işlevi
    document.querySelectorAll('.copy-icon').forEach(icon => {
        icon.addEventListener('click', function() {
            const ayet = icon.getAttribute('data-ayet');
            const sureadi = icon.getAttribute('data-sureadi');
            const satir = icon.getAttribute('data-satir');
            const formattedText = ayet.trim() + " (" + sureadi + ", " + satir + ")";
            navigator.clipboard.writeText(formattedText).then(() => {
                const alertBox = document.getElementById("alert");
                alertBox.textContent = formattedText;
                alertBox.classList.add("show");
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            });
        });
    });

    // Pinleme işlevi
    document.querySelectorAll('.pin-icon').forEach(icon => {
        icon.addEventListener('click', function() {
            const verseIndex = icon.getAttribute('data-satir');
            const surahIndex = icon.getAttribute('data-sureindex');

            if (pinnedVerse) {
                const prevVerse = document.querySelector(`#verse-${pinnedVerse.surahIndex + 1}-${pinnedVerse.verseIndex}`);
                const prevSurah = document.querySelector(`#surah-${pinnedVerse.surahIndex}`);
                if (prevVerse) prevVerse.classList.remove('pinned');
                if (prevSurah) prevSurah.classList.remove('pinned');
            }

            pinnedVerse = { surahIndex: parseInt(surahIndex) - 1, verseIndex: parseInt(verseIndex) };
            localStorage.setItem('pinnedVerse', JSON.stringify(pinnedVerse));
            applyPinnedVerse();

            const alertBox = document.getElementById("alert");
            alertBox.textContent = "Ayə yadda saxlanıldı!";
            alertBox.classList.add("show");
            setTimeout(() => alertBox.classList.remove("show"), 2000);
        });
    });

    // Kaydetme işlevi
    document.querySelectorAll('.save-icon').forEach(icon => {
        icon.addEventListener('click', () => {
            const ayet = icon.getAttribute('data-ayet');
            const sureAdi = icon.getAttribute('data-sureadi');
            const satir = icon.getAttribute('data-satir');
            const sureIndex = icon.getAttribute('data-sureindex');

            const savedVerse = { sureAdi, satir, ayet, sureIndex };
            let savedVerses = JSON.parse(localStorage.getItem('savedVerses')) || [];
            if (!savedVerses.some(v => v.sureAdi === sureAdi && v.satir === satir)) {
                savedVerses.push(savedVerse);
                localStorage.setItem('savedVerses', JSON.stringify(savedVerses));
                const alertBox = document.getElementById('alert');
                alertBox.textContent = `(${sureAdi}, ${satir}) ayəsi yadda saxlandı!`;
                alertBox.classList.add('show');
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            } else {
                const alertBox = document.getElementById('alert');
                alertBox.textContent = 'Bu ayə daha əvvəl yadda saxlanılıb!';
                alertBox.classList.add('show');
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            }
        });
    });

});

</script>

<script>


document.addEventListener("DOMContentLoaded", function() {
    const goToPinnedVerseLink = document.querySelector("#go-to-pinned-verse-link");
    const pinnedVerse = JSON.parse(localStorage.getItem('pinnedVerse'));

    goToPinnedVerseLink.addEventListener('click', function() {
        if (!pinnedVerse) {
            alert("Sabitlənmiş Ayə Yoxdur!");
            return;
        }

        const surahIndex = pinnedVerse.surahIndex + 1; // Surə indeksini düzəldirik
        let verseIndex = pinnedVerse.verseIndex; // Ayə indeksini düzəldirik

        let url;
        if (verseIndex === 1) {
            url = `https://www.ayeaxtar.com/m/?sure=${surahIndex}#container`;
        } else {
            url = `https://www.ayeaxtar.com/m/?sure=${surahIndex}#verse-${surahIndex}-${verseIndex - 1}`;
        }

        window.location.href = url;
    });
});


</script>

<script>

// Paylaş düyməsi (Azerice UTF-8 desteği)
function shareContent(sureNo, ayetNo) {
    var sureElement = document.querySelector(`[data-sureindex="${sureNo}"]`);
    var ayetElement = document.querySelector(`[data-satir="${ayetNo}"]`);

    if (!sureElement || !ayetElement) {
        alert("Məlumat tapılmadı.");
        return;
    }

    var sureAdi = sureElement.getAttribute('data-sureadi');
    var ayetMetni = ayetElement.getAttribute('data-ayet');

    // Şu anki URL'yi UTF-8 olarak temizle
    var rawURL = window.location.href;
    var fixedURL = decodeURIComponent(rawURL); // URL içindeki UTF-8 karakterleri düzeltir

    var shareText = `${ayetMetni} (${sureAdi} surəsi, ${ayetNo})\n\n${fixedURL}`;

    if (navigator.share) {
        navigator.share({
            title: 'Paylaş',
            text: shareText
        }).then(() => {
            console.log('Paylaşıldı!');
        }).catch((error) => {
            console.log('Paylaşma xətası: ', error);
        });
    } else {
        alert("Paylaşma API dəstəklənmir.");
    }
}



</script>

<!-- Manifest'i səhifənin sonuna əlavə et -->
<script>
    window.addEventListener('load', () => {
        let link = document.createElement('link');
        link.rel = 'manifest';
        link.href = '/m/site.webmanifest';
        document.head.appendChild(link);
    });
	
	</script>
	
	
	<script>

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    // Gecikdirilmiş "install" əmri
    e.preventDefault();
    deferredPrompt = e;
    document.getElementById('addToHomeScreenBtn').style.display = 'block';  // Düyməni göstər
});

document.getElementById('addToHomeScreenBtn').addEventListener('click', (e) => {
    // Tətbiqin artıq ana ekrana əlavə edilib-edilmədiyini yoxlayın
    if (window.matchMedia('(display-mode: standalone)').matches) {
        alert('Daha əvvəl əlavə edilib!');
    } else {
        // Əgər tətbiq ana ekrana əlavə edilməyibsə, prompt göstər
        deferredPrompt.prompt();
        deferredPrompt.userChoice
            .then((choiceResult) => {
                if (choiceResult.outcome === 'accepted') {
                    console.log('İstifadəçi tətbiqi ana ekrana əlavə etdi.');
                } else {
                    console.log('İstifadəçi tətbiqi əlavə etmədi.');
                }
                deferredPrompt = null; // Göstərilən promptdan sonra sıfırlanır
            });
    }

    // Menuyu bağla
    toggleMenu();  // Menunu bağlamaq üçün toggleMenu funksiyasını çağırırıq
});

	


</script>

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>QURU BİTKİ - Ayə Axtar</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        function copyText(element) {
            var ayet = element.getAttribute('data-ayet');
            var sureadi = element.getAttribute('data-sureadi');
            var satir = element.getAttribute('data-satir');
            var text = ayet + " (" + sureadi + ", " + satir + ")";
            navigator.clipboard.writeText(text).then(() => {
                alert("Kopyalandı: " + text);
            });
        }
    </script>
</head>
<body>

<div class="top-bar">QURU BİTKİ</div>
<div class="container">
            <div class="container verses">
                                            
                <div class="verse" id="verse-7-58">
                    <div class="verse-header">
                        <span class="verse-number">1.</span>
                        <div class="verse-menu-container">
                            <button class="menu-btn" data-verse-id="verse-7-58">⋮</button>
                            <div class="verse-menu" style="display: none;">
                                <span class="copy-icon" data-ayet="Rəbbinin izni ilə gözəl məmləkətin (torpağın) bitkiləri də (gözəl) çıxar. Pis olan (bir torpağın bitkiləri) isə, ancaq və ancaq çətinliklə çıxar. Şükür edən bir qövm üçün ayələri belə bəyan edirik." data-sureadi="Əraf surəsi" data-satir="58">Köçürt</span>
                                <span class="pin-icon" data-sureadi="Əraf surəsi" data-satir="58" data-sureindex="7">Sabitlə</span>
                                <span class="save-icon" data-ayet="Rəbbinin izni ilə gözəl məmləkətin (torpağın) bitkiləri də (gözəl) çıxar. Pis olan (bir torpağın bitkiləri) isə, ancaq və ancaq çətinliklə çıxar. Şükür edən bir qövm üçün ayələri belə bəyan edirik." data-sureadi="Əraf surəsi" data-satir="58" data-sureindex="7">Yadda saxla</span>
								<span class="share-icon" onclick="shareContent(7, 58)">Paylaş</span>
							</div>
                        </div>
                    </div>
                    <div class="verse-text">
                        Rəbbinin izni ilə gözəl məmləkətin (torpağın) bitkiləri də (gözəl) çıxar. Pis olan (bir torpağın bitkiləri) isə, ancaq və ancaq çətinliklə çıxar. Şükür edən bir qövm üçün ayələri belə bəyan edirik.                        <span class="reference">(Əraf surəsi, 58)</span>
                    </div>
                </div>
                                    </div>
    </div>


</body>
</html>