<!DOCTYPE html>
<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>
</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>

        <div class="fun-fact">Saviez-vous ? Le Coran a été révélé sur une période de 23 ans. 📅</div>
    </div>

    <button class="theme-toggle" onclick="toggleTheme()">🌓</button>

    <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 translationsContainer = document.getElementById('translations');
            
            loading.style.display = 'block';
            translationsContainer.innerHTML = ''; // Réinitialiser le contenu avant de charger
            document.getElementById('errorMessage').style.display = 'none';

            try {
                const apis = selectedTranslations.map(trans =>
                    fetch(`https://quranenc.com/api/v1/translation/sura/french_${trans}/${surahNumber}`)
                        .then(response => {
                            if (!response.ok) throw new Error(`Erreur HTTP : ${response.status}`);
                            return response.json();
                        })
                );

                const results = await Promise.all(apis);
                const combinedVerses = mergeTranslations(results, selectedTranslations);
                displayTranslations(combinedVerses, selectedTranslations);
            } catch (error) {
                console.error(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) => {
                    const translationData = results[i].result[index];
                    mergedVerse[`translation_${trans}`] = translationData.translation || 'Traduction non disponible';
                    mergedVerse[`footnotes_${trans}`] = translationData.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);
        });
    </script>
</body>
</html>