<!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; } }
        
       /* popup d'instruc*/
       /* Style pour la boîte modale */
        .popup {
            display: none; /* Cacher la modale par défaut */
            position: fixed; /* Rester à la même position (fixe) */
            z-index: 1; /* Assurer que la modale soit au-dessus des autres éléments */
            left: 0;
            top: 0;
            width: 100%; /* Largeur complète */
            height: 100%; /* Hauteur complète */
            overflow: auto; /* Activer le défilement si nécessaire */
            background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond avec opacité */
            animation: fadeIn 0.5s; /* Animation d'apparition */
        }

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

        /* Style pour le contenu de la modale */
        .popup-content {
            background-color: #f0f0f0;
            margin: 10% auto; /* 10% à partir du haut et centré */
            padding: 30px;
            border: none;
            border-radius: 12px;
            width: 50%; /* Largeur */
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.5s; /* Animation de glissement */
            text-align: center;
            font-family: 'Arial', sans-serif;
            color: #333;
        }

        @keyframes slideIn {
            from { transform: translateY(-50px); }
            to { transform: translateY(0); }
        }

        /* Style pour le bouton de fermeture */
        .close {
            color: #aaa;
            float: right;
            font-size: 24px;
            font-weight: bold;
            transition: color 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* Style pour le texte de la modale */
        .popup-content p {
            font-size: 18px;
            line-height: 1.6;
            color: #333;
        }

        /* Style pour le bouton */
        .popup-button {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 15px;
            font-size: 16px;
            color: #fff;
            background-color: #007BFF;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .popup-button:hover {
            background-color: #0056b3;
        }

        /* Style pour les icônes */
        .popup-icon {
            font-size: 40px;
            color: #007BFF;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 id="title">جزء عم بالملغاشية استنادا إلى تفسير الطبري</h1>
            <p id="sub-title">Jozo Amma amin'ny teny gasy, miorina amin'ny tafsirin'i Tabari</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>

<!-- Popup d'instru -->
<!-- Première boîte modale -->
<div id="popup1" class="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <div class="popup-icon">📜</div>
        <p id="popup1-text">Ce site contient le Coran en malgache, ainsi qu'en français et en anglais.</p>
        <button class="popup-button" onclick="openNextPopup('popup2')">Continue</button>
    </div>
</div>

<!-- Deuxième boîte modale -->
<div id="popup2" class="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <div class="popup-icon">🔎</div>
        <p id="popup2-text">Vous pouvez y choisir des sourates et rechercher des versets.</p>
        <button class="popup-button" onclick="openNextPopup('popup3')">Continue</button>
    </div>
</div>

<!-- Troisième boîte modale -->
<div id="popup3" class="popup">
    <div class="popup-content">
        <span class="close">&times;</span>
        <div class="popup-icon">🐥</div>
        <p id="popup3-text">Les mots en jaune sont cliquables.</p>
        <button class="popup-button" onclick="closePopup('popup3')">Close</button>
    </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 miaina eto an-tany, na mpino na tsy mpino), Ilay Mpamindra fo (ireo mpino efa maty, ka hiaro azy ireo amin'ny sazy mamirifiry)."
        };

        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';
                });
            });
          
          
          // popup d'instruc
const translations = {
    'fr': {
        popup1: {
            text: "Ce site contient le Coran en malgache, ainsi qu'en français et en anglais."
        },
        popup2: {
            text: "Vous pouvez y choisir des sourates et rechercher des versets."
        },
        popup3: {
            text: "Les mots en jaune sont cliquables."
        }
    },
    'en': {
        popup1: {
            text: "This site contains the Quran in Malagasy, as well as in French and English."
        },
        popup2: {
            text: "You can choose surahs and search for verses."
        },
        popup3: {
            text: "The words in yellow are clickable."
        }
    },
    'ar': {
        popup1: {
            text: "يحتوي هذا الموقع على القرآن باللغة الملغاشية، بالإضافة إلى الفرنسية والإنجليزية"
        },
        popup2: {
            text: "يمكنك اختيار السور والبحث عن الآيات"
        },
        popup3: {
            text: "الكلمات باللون الأصفر قابلة للنقر"
        }
    }
};

function getBrowserLanguage() {
    const language = navigator.language || navigator.userLanguage;
    return language.startsWith('fr') ? 'fr' : language.startsWith('ar') ? 'ar' : 'en';
}

function applyTranslations(language) {
    document.getElementById('popup1-text').textContent = translations[language].popup1.text;
    document.getElementById('popup2-text').textContent = translations[language].popup2.text;
    document.getElementById('popup3-text').textContent = translations[language].popup3.text;
}

function openModal(modalId) {
    var modal = document.getElementById(modalId);
    modal.style.display = "block";
}

setTimeout(function() {
    const language = getBrowserLanguage();
    applyTranslations(language);
    openModal("popup1");
}, 5000);

function openNextPopup(nextPopupId) {
    var currentPopup = document.querySelector(".popup:not([style*='display: none'])");
    if (currentPopup) {
        currentPopup.style.display = "none";
    }
    openModal(nextPopupId);
}

function closePopup(popupId) {
    var modal = document.getElementById(popupId);
    modal.style.display = "none";
}
    </script>
</body>
</html>