<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جزء عم</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Amiri&family=Scheherazade+New&display=swap');
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #184e68 0%, #57ca85 100%); color: #fff; min-height: 100vh; line-height: 1.4; transition: background 0.3s ease; padding: 10px; }
        .container { max-width: 1200px; margin: 20px auto; padding: 10px; }
        .header { text-align: center; padding: 1.5rem 0; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 20px; margin-bottom: 1rem; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); border: 1px solid rgba(255, 255, 255, 0.18); }
        .header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); font-family: 'Scheherazade New', serif; }
        .header p { font-size: 1rem; color: rgba(255, 255, 255, 0.9); }
        .controls { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(5px); }
        select, input { padding: 0.5rem 1rem; border: none; border-radius: 25px; background: rgba(255, 255, 255, 0.95); font-size: 0.9rem; outline: none; transition: all 0.3s ease; min-width: 180px; color: #184e68; }
        select:hover, input:hover { background: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); transform: translateY(-2px); }
        .verses-container { background: rgba(255, 255, 255, 0.98); border-radius: 20px; padding: 1.5rem; color: #333; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); }
        .verse { margin-bottom: 1rem; padding: 0.5rem; border-radius: 15px; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
        .verse:hover { transform: translateY(-5px); }
        .arabic-text { font-family: 'Scheherazade New', serif; font-size: 1.5rem; text-align: right; line-height: 2; margin-bottom: 1rem; color: #184e68; padding: 0.5rem; background: rgba(87, 202, 133, 0.1); border-radius: 10px; }
        .translation { font-size: 1rem; line-height: 1.5; margin-bottom: 0.8rem; padding: 0.5rem 1rem; border-left: 4px solid #57ca85; }
        .verse-number { display: inline-block; width: 30px; height: 30px; background: linear-gradient(135deg, #184e68 0%, #57ca85 100%); color: #fff; text-align: center; line-height: 30px; border-radius: 50%; margin-right: 0.8rem; font-family: 'Amiri', serif; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
        .translator-info { text-align: center; margin-top: 1rem; font-size: 1rem; color: rgba(255, 255, 255, 0.8); }
        .comment-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: #fff; padding: 20px; border-radius: 10px; max-width: 300px; text-align: center; z-index: 10; }
        .close-popup { color: #fff; font-size: 1.5rem; cursor: pointer; position: absolute; top: 5px; right: 5px; }
        
        /* Style pour les mots cliquables */
        .clickable-word {
            background-color: #f7e03c;
            color: #184e68;
            font-weight: bold;
            padding: 0.2rem 0.5rem;
            border-radius: 8px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .clickable-word:hover {
            background-color: #f1c40f;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transform: scale(1.1);
        }

        .clickable-word:active {
            transform: scale(1);
        }

        @media (max-width: 768px) { .controls { flex-direction: column; } select, input { width: 100%; } .arabic-text { font-size: 1.3rem; } .header h1 { font-size: 1rem; } }
        
       /* popup2 */
.popup {
    display: none; /* Cacher le pop-up par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s; /* Animation d'apparition */
}

.popup-content {
    background-color: #333; /* Fond sombre */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre */
    text-align: center;
    position: relative;
    max-width: 500px;
    margin: 20px;
    animation: slideIn 0.5s; /* Animation de glissement */
    font-size: 1.2em; /* Taille de texte plus grande */
    color: white; /* Couleur du texte */
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.close:hover {
    color: #fff;
}

.highlight {
    color: #ffc107; /* Jaune attractif */
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); }
    to { transform: translateY(0); }
}     
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 id="title">جزء عم</h1>
            <p id="sub-title">La dernière partie du Saint Coran</p>
        </div>

        <div class="controls">
            <select id="surah-select">
                <!-- Les options seront ajoutées dynamiquement ici -->
            </select>

            <select id="translation-select">
                <option value="fr">Français</option>
                <option value="en">English</option>
                <option value="mg" selected>Malagasy</option>
            </select>

            <input type="text" id="search" placeholder="🔍">
        </div>

        <div class="verses-container" id="verses">
            <!-- Les versets seront chargés ici dynamiquement -->
        </div>

        <div class="translator-info" id="translator-info">
            <p>Dikanteny malagasy: Zoto Ribhi</p>
        </div>
    </div>

    <!-- Popup commentaire -->
    <div class="comment-popup" id="comment-popup">
        <span class="close-popup" id="close-popup">&times;</span>
        <p id="comment-text"></p>
    </div>

<!-- Popup2 -->
<div id="popup" class="popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <p id="popup-text">Chargement...</p>
        </div>
    </div>
	
	
    <script>
        fetch('Jouz30-ob.json')
            .then(response => response.json())
            .then(data => {
                const quranData = data.quranData;
                const translationTitles = data.translationTitles;
                const comments = data.comments;

                // Dynamically populate the surah select options
                const surahSelect = document.getElementById('surah-select');
                Object.keys(quranData).forEach(surahKey => {
                    const option = document.createElement('option');
                    option.value = surahKey;
                    option.textContent = quranData[surahKey].name;
                    surahSelect.appendChild(option);
                });

                document.getElementById('surah-select').addEventListener('change', loadVerses);
                document.getElementById('translation-select').addEventListener('change', updateTranslationTitle);
                document.getElementById('translation-select').addEventListener('change', updateTranslatorInfo);
                document.getElementById('translation-select').addEventListener('change', loadVerses);
                document.getElementById('search').addEventListener('input', loadVerses);

                function removeDiacritics(text) {
                    return text.normalize('NFD').replace(/[\u064B-\u065F]/g, '');
                }

                function loadVerses() {
    const surah = document.getElementById('surah-select').value;
    const translation = document.getElementById('translation-select').value;
    const search = removeDiacritics(document.getElementById('search').value.toLowerCase());

    const surahData = quranData[surah];
    const versesContainer = document.getElementById('verses');
    versesContainer.innerHTML = '';

    // Add Bismillah at the beginning of the surah only if the search bar is empty
    if (!search) {
        const bismillahText = 'بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيم';
        const bismillahTranslation = {
            "fr": "Au nom d'Allah, le Tout Miséricordieux, le Très Miséricordieux",
            "en": "In the name of Allah, the Most Gracious, the Most Merciful",
            "mg": "Amin'ny anaran'i Allah (no hanombohako ny famakiana Korany), Ilay be Indrafo (amin'izay rehetra velona na mpino na tsy mpino), Ilay Mpamindra fo (ireo mpino efa maty)."
        };

        const bismillahDiv = document.createElement('div');
        bismillahDiv.classList.add('verse');
        bismillahDiv.innerHTML = `
            <div class="arabic-text">${bismillahText}</div>
            <div class="translation">${bismillahTranslation[translation]}</div>
        `;
        versesContainer.appendChild(bismillahDiv);
    }

    surahData.verses.forEach(verse => {
        const translationText = verse.translations[translation].toLowerCase();
        const arabicText = removeDiacritics(verse.arabic).toLowerCase();
        if (arabicText.includes(search) || translationText.includes(search)) {
            const verseElement = document.createElement('div');
            verseElement.classList.add('verse');

            verseElement.innerHTML = `
                <div class="verse-number">${verse.number}</div>
                <div class="arabic-text">${verse.arabic}</div>
                <div class="translation">${addClickableWords(verse.translations[translation], comments)}</div>
            `;

            versesContainer.appendChild(verseElement);
        }
    });
}


                function addClickableWords(text, comments) {
                    let newText = text;
                    Object.keys(comments).forEach(word => {
                        const regex = new RegExp(`\\b${word}\\b`, 'gi');
                        newText = newText.replace(regex, `<span class="clickable-word" data-comment="${comments[word]}">${word}</span>`);
                    });
                    return newText;
                }

                function updateTranslationTitle() {
                    const translation = document.getElementById('translation-select').value;
                    const subTitle = document.getElementById('sub-title');
                    const title = document.getElementById('title'); // Access the <title> element

                    if (translation === 'mg') {
                        title.textContent = "جزء عم بالملغاشية استنادًا إلى تفسير الطبري";  // Change the title when Malagasy is selected
                        subTitle.textContent = "Jozo Ama amin'ny teny gasy, miorina amin'ny tafsirin'i Tabari";  // Change subtitle too
                    } else {
                        subTitle.textContent = translationTitles[translation];
                        title.textContent = "جزء عم";  // Default title for other languages
                    }
                }

                function updateTranslatorInfo() {
                    const translation = document.getElementById('translation-select').value;
                    const translatorInfo = document.getElementById('translator-info');
                    if (translation === 'fr') {
                        translatorInfo.innerHTML = "<p>Traduction française: Hamidullah</p>";
                    } else if (translation === 'en') {
                        translatorInfo.innerHTML = "<p>English Translation: Saheeh International</p>";
                    } else if (translation === 'mg') {
                        translatorInfo.innerHTML = "<p>Dikanteny malagasy: Zoto Ribhi</p>";
                    }
                }

                window.addEventListener('load', () => {
                    updateTranslationTitle();
                    updateTranslatorInfo();
                    loadVerses();
                });

                // Function to show pop-up comment
                document.addEventListener('click', function (e) {
                    if (e.target.classList.contains('clickable-word')) {
                        const comment = e.target.getAttribute('data-comment');
                        const commentPopup = document.getElementById('comment-popup');
                        const commentText = document.getElementById('comment-text');
                        commentText.textContent = comment;
                        commentPopup.style.display = 'block';
                    }
                });

                // Close the pop-up
                document.getElementById('close-popup').addEventListener('click', () => {
                    document.getElementById('comment-popup').style.display = 'none';
                });
            });
          
          
          // popup2
document.addEventListener('DOMContentLoaded', (event) => {
    const popup = document.getElementById('popup');
    const popupText = document.getElementById('popup-text');
    
    // Détecter la langue de l'appareil
    const userLanguage = navigator.language || navigator.userLanguage;

    let textContent;

    // Mettre à jour le texte du pop-up selon la langue
    if (userLanguage.includes('en')) {
        textContent = "The words in yellow are clickable. [Azo kitihinina ireo teny miloko mavo]";
    } else if (userLanguage.includes('fr')) {
        textContent = "Les mots en jaune sont cliquables. [Azo kitihinina ireo teny miloko mavo]";
    } else if (userLanguage.includes('ar')) {
        textContent = "الكلمات باللون الأصفر قابلة للنقر. [Azo kitihinina ireo teny miloko mavo]";
    } else {
        textContent = "Les mots en jaune sont cliquables. [Azo kitihinina ireo teny miloko mavo]"; // Texte par défaut (français)
    }

    // Afficher le pop-up et le texte
    popupText.innerHTML = textContent;
    popup.style.display = 'flex';

    // Fermer le pop-up quand on clique sur le bouton 'fermer'
    const closeBtn = document.querySelector('.close');
    closeBtn.addEventListener('click', () => {
        popup.style.display = 'none';
    });

    // Fermer le pop-up quand on clique en dehors du contenu du pop-up
    window.addEventListener('click', (event) => {
        if (event.target == popup) {
            popup.style.display = 'none';
        }
    });
});


    </script>
</body>
</html>