<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌟 ZotoCoran 🌟</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1a5f7a;
            --secondary-color: #86b049;
            --background-color: #f5f5f5;
            --verse-bg: #ffffff;
            --verse-border: #e0e0e0;
            --text-primary: #2c3e50;
            --text-secondary: #666;
            --highlight-color: rgba(134, 176, 73, 0.6);
            --shadow-color: rgba(0, 0, 0, 0.1);
            --border-radius: 10px;
        }

        [data-theme="dark"] {
            --primary-color: #2a9d8f;
            --secondary-color: #e9c46a;
            --background-color: #264653;
            --verse-bg: #1a323e;
            --verse-border: #335566;
            --text-primary: #e9ecef;
            --text-secondary: #adb5bd;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--background-color);
            color: var(--text-primary);
            line-height: 1.4;
            padding: 15px;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 15px;
            border: 1px solid var(--secondary-color);
            border-radius: var(--border-radius);
            box-shadow: 0 0 15px var(--shadow-color);
            background-color: #ffffff;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            padding: 1.5rem;
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: 0 2px 8px var(--shadow-color);
        }

        h1 {
            color: white;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        p {
            font-size: 1rem;
            color: white;
            margin: 0.5rem 0;
        }

        .controls {
            background: var(--verse-bg);
            padding: 15px;
            border-radius: var(--border-radius);
            margin: 20px 0;
            box-shadow: 0 2px 5px var(--shadow-color);
        }

        .control-group {
            margin-bottom: 10px;
        }

        .control-group label {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.9rem;
            display: block;
        }

        select, button {
            width: 100%;
            padding: 8px;
            border-radius: var(--border-radius);
            border: 1px solid var(--verse-border);
            background: var(--verse-bg);
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        select:hover, button:hover {
            background-color: var(--highlight-color);
            color: white;
        }

        .translation-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .translation-checkbox {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
        }

        .verse {
            background: var(--verse-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px var(--shadow-color);
            animation: fadeIn 0.3s ease;
        }

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

        .verse-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .verse-number {
            font-size: 1.1rem;
            color: var(--secondary-color);
            font-weight: 500;
        }

        .arabic-text {
            font-family: 'Scheherazade New', serif;
            font-size: 30px;
            text-align: right;
            margin: 15px 0;
            color: var(--primary-color);
        }

        .translation {
            padding: 10px;
            background: rgba(0,0,0,0.03);
            border-radius: 8px;
            margin-bottom: 5px;
        }

        .translation-header {
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 5px;
            text-transform: capitalize;
        }

        .footnotes {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 5px;
            font-style: italic;
            padding-left: 10px;
            border-left: 2px solid var(--secondary-color);
        }

        .theme-toggle {
            position: fixed;
            bottom: 15px;
            right: 15px;
            padding: 10px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 1px 5px var(--shadow-color);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        }

        .theme-toggle:hover {
            transform: scale(1.1);
        }

        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loading-spinner::after {
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 3px solid var(--secondary-color);
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .error-message {
            background: #ff6b6b;
            color: white;
            padding: 10px;
            border-radius: 8px;
            margin: 20px 0;
            display: none;
            font-weight: bold;
        }

        .fun-fact {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-top: 10px;
            font-style: italic;
            text-align: center;
            transition: transform 0.3s;
        }

        .fun-fact:hover {
            transform: scale(1.05);
            color: var(--primary-color);
        }
        /* Style for the overlay */
        #popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            animation: fadeIn 0.5s ease-in-out;
        }

        /* Style for the popup */
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px;
            background-color: #ffffff;
            border: 2px solid #007bff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            width: 80%;
            max-width: 350px;
            max-height: 250px;
            overflow-y: auto;
            border-radius: 10px;
            text-align: left;
            font-family: 'Arial', sans-serif;
            animation: popup-appear 0.5s ease-in-out;
        }

        /* Close button style */
        #popup-close {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 16px;
            font-weight: bold;
            color: #888;
            cursor: pointer;
        }

        #popup-close:hover {
            color: #333;
        }

        /* Style for the popup message */
        #popup-message {
            font-size: 13px;
            line-height: 1.4;
            color: #333;
        }

        /* Adding some animation */
        @keyframes popup-appear {
            from { opacity: 0; transform: translate(-50%, -40%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }

        /* Style for links */
        #popup-message a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }

        #popup-message a:hover {
            text-decoration: underline;
        }

        /* Additional styling for aesthetics */
        #popup {
            background: linear-gradient(to bottom right, #f0f4ff, #ffffff);
            border-radius: 10px;
        }

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

        /* Style for the numbered list */
        ol {
            padding-left: 20px;
        }

        ol li {
            margin-bottom: 5px;
        }
               /* Page d'accueil*/
.floating-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(45deg, #FF6B6B, #FF3B3B);
    color: white;
    border: 2px solid #FF4500;
    border-radius: 15px;
    width: 120px;
    height: 70px;
    text-align: center;
    line-height: 1.2;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation: pulse 1.5s infinite; /* Ajout de l'animation de pulsation */
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, transform 0.3s;
}

/* Animation de pulsation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Taille normale */
    }
    50% {
        transform: scale(1.05); /* Légère augmentation de taille */
    }
}

/* Animation d'apparition */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.floating-button:hover {
    background: linear-gradient(45deg, #FF3B3B, #FF6B6B);
    transform: scale(1.1); /* Augmentation de la taille au survol */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ZotoCoran</h1>
            <p>Comparatif des traductions françaises du Coran</p>
        </div>

        <div class="controls">
            <div class="control-group">
                <label for="surahSelect">Choisir une sourate</label>
                <select id="surahSelect" onchange="changeSurah()">
                    <option value="1">1. Al-Fatiha (L'Ouverture)</option>
                    <option value="2">2. Al-Baqarah (La Vache)</option>
                    <option value="3">3. Al-Imran (La Famille d'Imran)</option>
                    <option value="4">4. An-Nisa (Les Femmes)</option>
                    <option value="5">5. Al-Ma'idah (La Table Servie)</option>
                    <option value="6">6. Al-An'am (Les Bestiaux)</option>
                    <option value="7">7. Al-A'raf (Le Mur)</option>
                    <option value="8">8. Al-Anfal (Le Butin)</option>
                    <option value="9">9. At-Tawbah (Le Repentir)</option>
                    <option value="10">10. Yunus (Jonas)</option>
                    <option value="11">11. Hud (Houd)</option>
                    <option value="12">12. Yusuf (Joseph)</option>
                    <option value="13">13. Ar-Ra'd (Le Tonnerre)</option>
                    <option value="14">14. Ibrahim (Abraham)</option>
                    <option value="15">15. Al-Hijr (La Pierre)</option>
                    <option value="16">16. An-Nahl (Les Abeilles)</option>
                    <option value="17">17. Al-Isra (Le Voyage Nocturne)</option>
                    <option value="18">18. Al-Kahf (La Caverne)</option>
                    <option value="19">19. Maryam (Marie)</option>
                    <option value="20">20. Ta-Ha (Ta-Ha)</option>
                    <option value="21">21. Al-Anbiya (Les Prophètes)</option>
                    <option value="22">22. Al-Haj (Le Pèlerinage)</option>
                    <option value="23">23. Al-Mu'minun (Les Croyants)</option>
                    <option value="24">24. An-Nur (La Lumière)</option>
                    <option value="25">25. Al-Furqan (Le Discernement)</option>
                    <option value="26">26. Ash-Shu'ara (Les Poètes)</option>
                    <option value="27">27. An-Naml (Les Fourmis)</option>
                    <option value="28">28. Al-Qasas (Le Récit)</option>
                    <option value="29">29. Al-Ankabut (L'Araignée)</option>
                    <option value="30">30. Ar-Rum (Les Romains)</option>
                    <option value="31">31. Luqman (Luqman)</option>
                    <option value="32">32. As-Sajda (La Prosternation)</option>
                    <option value="33">33. Al-Ahzab (Les Coalisés)</option>
                    <option value="34">34. Saba (Sheba)</option>
                    <option value="35">35. Fatir (Le Créateur)</option>
                    <option value="36">36. Ya-Sin (Ya-Sin)</option>
                    <option value="37">37. As-Saffat (Les Rangés)</option>
                    <option value="38">38. Sad (Le Signe)</option>
                    <option value="39">39. Az-Zumar (Les Groupes)</option>
                    <option value="40">40. Ghafir (Le Pardonneur)</option>
                    <option value="41">41. Fussilat (Les Versets Détaillés)</option>
                    <option value="42">42. Ash-Shura (La Consultation)</option>
                    <option value="43">43. Az-Zukhruf (L'Ornement)</option>
                    <option value="44">44. Ad-Dukhan (La Fumée)</option>
                    <option value="45">45. Al-Jathiya (L'Agenouillée)</option>
                    <option value="46">46. Al-Ahqaf (Les Dunes)</option>
                    <option value="47">47. Muhammad (Muhammad)</option>
                    <option value="48">48. Al-Fath (La Victoire)</option>
                    <option value="49">49. Al-Hujurat (Les Appartements)</option>
                    <option value="50">50. Qaf (Qaf)</option>
                    <option value="51">51. Adh-Dhariyat (Les Vents Hurleurs)</option>
                    <option value="52">52. At-Tur (La Montagne)</option>
                    <option value="53">53. An-Najm (L'Étoile)</option>
                    <option value="54">54. Al-Qamar (La Lune)</option>
                    <option value="55">55. Ar-Rahman (Le Très Miséricordieux)</option>
                    <option value="56">56. Al-Waqi'a (L'Événement)</option>
                    <option value="57">57. Al-Hadid (Le Fer)</option>
                    <option value="58">58. Al-Mujadila (La Plaidoirie)</option>
                    <option value="59">59. Al-Hashr (L'Exode)</option>
                    <option value="60">60. Al-Mumtahana (L'Éprouvée)</option>
                    <option value="61">61. As-Saff (La Rangée)</option>
                    <option value="62">62. Al-Jumu'a (Le Vendredi)</option>
                    <option value="63">63. Al-Munafiqun (Les Hypocrites)</option>
                    <option value="64">64. At-Taghabun (La Mutuelle Perdition)</option>
                    <option value="65">65. At-Talaq (Le Divorce)</option>
                    <option value="66">66. At-Tahrim (L'Interdiction)</option>
                    <option value="67">67. Al-Mulk (La Royauté)</option>
                    <option value="68">68. Al-Qalam (Le Calame)</option>
                    <option value="69">69. Al-Haaqqa (La Réalité)</option>
                    <option value="70">70. Al-Maarij (Les Voies d'Ascension)</option>
                    <option value="71">71. Nuh (Noé)</option>
                    <option value="72">72. Al-Jinn (Les Djinns)</option>
                    <option value="73">73. Al-Muzzammil (Le Revêtu)</option>
                    <option value="74">74. Al-Muddathir (Le Couvert)</option>
                    <option value="75">75. Al-Qiyama (La Résurrection)</option>
                    <option value="76">76. Al-Insan (L'Homme)</option>
                    <option value="77">77. Al-Mursalat (Les Envoyés)</option>
                    <option value="78">78. An-Naba (La Nouvelle)</option>
                    <option value="79">79. An-Nazi'at (Les Arrachants)</option>
                    <option value="80">80. Abasa (Il se détourna)</option>
                    <option value="81">81. At-Takwir (L'Éclipse)</option>
                    <option value="82">82. Al-Infitar (La Déchirure)</option>
                    <option value="83">83. Al-Mutaffifin (Les Fraudeurs)</option>
                    <option value="84">84. Al-Inshiqaq (La Césure)</option>
                    <option value="85">85. Al-Burooj (Les Edifices)</option>
                    <option value="86">86. At-Takwir (L'Éclipse)</option>
                    <option value="87">87. Al-A'la (Le Très-Haut)</option>
                    <option value="88">88. Al-Ghashiya (L'Obscurcissement)</option>
                    <option value="89">89. Al-Fajr (L'Aube)</option>
                    <option value="90">90. Al-Balad (La Ville)</option>
                    <option value="91">91. Ash-Shams (Le Soleil)</option>
                    <option value="92">92. Al-Lail (La Nuit)</option>
                    <option value="93">93. Ad-Duha (Le Matin)</option>
                    <option value="94">94. Al-Inshirah (L'Ouverture)</option>
                    <option value="95">95. At-Tin (Le Figuier)</option>
                    <option value="96">96. Al-Alaq (Le Caillot de Sang)</option>
                    <option value="97">97. Al-Qadr (La Destinée)</option>
                    <option value="98">98. Al-Bayyina (La Preuve)</option>
                    <option value="99">99. Az-Zalzalah (Le Tremblement de Terre)</option>
                    <option value="100">100. Al-Adiyat (Les Courreurs)</option>
                    <option value="101">101. Al-Qari'a (Le Fracas)</option>
                    <option value="102">102. At-Takathur (L'Afflux)</option>
                    <option value="103">103. Al-Asr (Le Temps)</option>
                    <option value="104">104. Al-Humazah (Le Calomniateur)</option>
                    <option value="105">105. Al-Fil (L'Éléphant)</option>
                    <option value="106">106. Quraich (Les Quraysh)</option>
                    <option value="107">107. Al-Ma'un (L'Aide)</option>
                    <option value="108">108. Al-Kawthar (L'Abondance)</option>
                    <option value="109">109. Al-Kafirun (Les Infidèles)</option>
                    <option value="110">110. An-Nasr (Le Secours)</option>
                    <option value="111">111. Al-Masad (La Corde)</option>
                    <option value="112">112. Al-Ikhlas (La Pureté)</option>
                    <option value="113">113. Al-Falaq (L'Aube Naissante)</option>
                    <option value="114">114. An-Nas (Les Hommes)</option>
                </select>
            </div>

            <div class="control-group">
                <label>Sélectionner les traductions</label>
                <div class="translation-options">
                    <label class="translation-checkbox">
                        <input type="checkbox" value="montada" checked onchange="fetchTranslations(currentSurah)"> Radhouane
                    </label>
                    <label class="translation-checkbox">
                        <input type="checkbox" value="hameedullah" checked onchange="fetchTranslations(currentSurah)"> Hamidullah
                    </label>
                    <label class="translation-checkbox">
                        <input type="checkbox" value="rashid" checked onchange="fetchTranslations(currentSurah)"> Rachid
                    </label>
                </div>
            </div>
        </div>

        <div class="loading-spinner" id="loading"></div>
        <div class="error-message" id="errorMessage"></div>
        <div id="translations"></div>
    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
    </div>
<div id="popup-overlay"></div>
<div id="popup">
    <span id="popup-close">&times;</span>
    <div id="popup-message"></div>
</div>
    <a href="https://husnedine.github.io/rz3/index" class="floating-button">
        <span>🏠</span>
        <span style="font-size: 8px;">Retourner à l'accueil<br>العودة إلى الرئيسية</span>
    </a>
    <script>
        let currentSurah = 1;
        let isDarkMode = false;

        function toggleTheme() {
            isDarkMode = !isDarkMode;
            document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
        }

        async function fetchTranslations(surahNumber) {
            const selectedTranslations = Array.from(document.querySelectorAll('.translation-options input:checked'))
                .map(input => input.value);

            if (selectedTranslations.length === 0) {
                displayErrorMessage("Veuillez sélectionner au moins une traduction");
                return;
            }

            const loading = document.getElementById('loading');
            const translations = document.getElementById('translations');
            
            loading.style.display = 'block';
            translations.innerHTML = '';
            document.getElementById('errorMessage').style.display = 'none';

            try {
                // Fetch translations
                const apis = selectedTranslations.map(trans => 
                    fetch(`https://quranenc.com/api/v1/translation/sura/french_${trans}/${surahNumber}`)
                        .then(response => response.json())
                );

                const results = await Promise.all(apis);
                const combinedVerses = mergeTranslations(results, selectedTranslations);
                displayTranslations(combinedVerses, selectedTranslations);
            } catch (error) {
                displayErrorMessage("Erreur lors du chargement des traductions");
            } finally {
                loading.style.display = 'none';
            }
        }

        function mergeTranslations(results, selectedTranslations) {
            const verses = results[0].result.map((verse, index) => {
                let mergedVerse = {
                    sura: verse.sura,
                    aya: verse.aya,
                    arabic_text: verse.arabic_text,
                };

                selectedTranslations.forEach((trans, i) => {
                    mergedVerse[`translation_${trans}`] = results[i].result[index].translation;
                    mergedVerse[`footnotes_${trans}`] = results[i].result[index].footnotes;
                });

                return mergedVerse;
            });

            return verses;
        }

        function displayTranslations(verses, selectedTranslations) {
            const container = document.getElementById('translations');
            container.innerHTML = '';

            verses.forEach(verse => {
                const verseElement = document.createElement('div');
                verseElement.className = 'verse';

                let translationsHtml = '';
                selectedTranslations.forEach(trans => {
                    translationsHtml += `
                        <div class="translation">
                            <div class="translation-header">${trans === 'montada' ? 'Dr. Nebil Radhouane' : trans === 'hameedullah' ? 'Pr. Muhammad Hamidullah' : trans === 'rashid' ? 'Sheikh. Rashid Maach' : trans.charAt(0).toUpperCase() + trans.slice(1)}</div>
                            <div class="translation-text">${verse[`translation_${trans}`]}</div>
                            ${verse[`footnotes_${trans}`] ? 
                                `<div class="footnotes">📝 ${verse[`footnotes_${trans}`]}</div>` : 
                                ''}
                        </div>
                    `;
                });

                verseElement.innerHTML = `
                    <div class="verse-header">
                        <span class="verse-number">Verset ${verse.aya}</span>
                    </div>
                    <div class="arabic-text">${verse.arabic_text}</div>
                    ${translationsHtml}
                `;

                container.appendChild(verseElement);
            });
        }

        function displayErrorMessage(message) {
            const errorElement = document.getElementById('errorMessage');
            errorElement.style.display = 'block';
            errorElement.textContent = message;
        }

        function changeSurah() {
            const surahNumber = document.getElementById('surahSelect').value;
            currentSurah = parseInt(surahNumber);
            fetchTranslations(currentSurah);
        }

        // Initialiser
        document.addEventListener('DOMContentLoaded', () => {
            fetchTranslations(currentSurah);
        });
        document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            var userLang = navigator.language || navigator.userLanguage;
            var popup = document.getElementById('popup');
            var overlay = document.getElementById('popup-overlay');
            var popupMessage = document.getElementById('popup-message');
            var closeButton = document.getElementById('popup-close');

            // Message content for each language
            var messageFr = `Ce site web compare les traductions françaises du Coran. Vous y trouverez une comparaison entre :
                <ol>
                    <li>La traduction du Dr. Nebil Radhouane (Université du Roi Saoud, Arabie Saoudite)</li>
                    <li>La traduction du Pr. Muhammad Hamidullah (Université de Bonn, Allemagne)</li>
                    <li>La traduction du Sheikh Rachid Maach (Centre Al-Albâni, Jordanie)</li>
                </ol>
                Développé par Zoto Ribhi.`;

            var messageEn = `This website compares French translations of the Quran. You will find comparisons between:
                <ol>
                    <li>The translation by Dr. Nebil Radhouane (King Saud University, Saudi Arabia)</li>
                    <li>The translation by Prof. Muhammad Hamidullah (University of Bonn, Germany)</li>
                    <li>The translation by Sheikh Rachid Maach (Al-Albani Center, Jordan)</li>
                </ol>
                Developed by Zoto Ribhi.`;

            var messageAr = `هذا الموقع يقارن بين الترجمات الفرنسية للقرآن الكريم. ستجدون مقارنة بين:
                <ol>
                    <li>ترجمة الدكتور نبيل رضوان (جامعة الملك سعود، المملكة العربية السعودية)</li>
                    <li>ترجمة الأستاذ محمد حميد الله (جامعة بون، ألمانيا)</li>
                    <li>ترجمة الشيخ رشيد معاش (مركز الألباني، الأردن)</li>
                </ol>
                تم التطوير بواسطة زوتو ربحي.`;

            // Set the message based on the user's language
            if (userLang.startsWith('fr')) {
                popupMessage.innerHTML = messageFr;
            } else if (userLang.startsWith('ar')) {
                popupMessage.innerHTML = messageAr;
            } else {
                popupMessage.innerHTML = messageEn;
            }

            popup.style.display = 'block';
            overlay.style.display = 'block';

            // Close the popup when the close button is clicked
            closeButton.addEventListener('click', function() {
                popup.style.display = 'none';
                overlay.style.display = 'none';
            });

            // Close the popup if the overlay is clicked
            overlay.addEventListener('click', function() {
                popup.style.display = 'none';
                overlay.style.display = 'none';
            });

        }, 2000); // 2 seconds
    });
    </script>
</body>
</html>




 

