<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoto Wakati</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1a237e, #311b92);
            color: #fff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .container {
            max-width: 380px;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header {
            font-size: 2.2em;
            font-weight: bold;
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
        }

        .date {
            font-size: 1em;
            margin: 10px 0;
            color: #ffd700;
            font-weight: 500;
        }

        .clock-round {
            position: relative;
            width: 120px;
            height: 120px;
            border: 5px solid #ffd700;
            border-radius: 50%;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }

        .hand {
            position: absolute;
            transform-origin: bottom;
            bottom: 50%;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 5px;
            transition: transform 0.5s cubic-bezier(0.4, 2.8, 0.3, 0.8);
        }

        .hour-hand {
            width: 5px;
            height: 35px;
            background: #ffd700;
        }

        .minute-hand {
            width: 4px;
            height: 45px;
            background: #ffd700;
        }

        .second-hand {
            width: 2px;
            height: 50px;
            background: #ff4081;
        }

        .clock-center {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ffd700;
            border-radius: 50%;
            z-index: 10;
        }

        .clock-text {
            font-size: 1em;
            margin: 15px 0;
            color: #fff;
        }

        .form {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 20px 0;
        }

        label {
            font-size: 0.9em;
            color: #ffd700;
            font-weight: 500;
        }

        select {
            padding: 10px;
            font-size: 0.9em;
            border-radius: 10px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        select:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .result {
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            margin-top: 20px;
            text-align: left;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .result h3 {
            color: #ffd700;
            font-size: 1.3em;
            margin: 0 0 15px 0;
            text-align: center;
        }

        .prayer-times {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .prayer-times div {
            background: rgba(255, 255, 255, 0.1);
            padding: 12px 15px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .prayer-times div:hover {
            transform: translateX(5px);
            background: rgba(255, 255, 255, 0.15);
        }

        .prayer-times i {
            color: #ffd700;
            font-size: 1.2em;
            width: 25px;
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .container {
                padding: 20px;
            }

            .header {
                font-size: 1.8em;
            }

            .clock-round {
                width: 100px;
                height: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Zoto Wakati</div>
        <p> Heures de Salat à Madagascar <p>
        <div class="date" id="dateDisplay"></div>
        <div class="clock-round">
            <div class="hand hour-hand" id="hourHand"></div>
            <div class="hand minute-hand" id="minuteHand"></div>
            <div class="hand second-hand" id="secondHand"></div>
            <div class="clock-center"></div>
        </div>
        <div class="clock-text" id="textClock"></div>
        <div class="form">
            <label for="city">Sélectionner une ville</label>
            <select id="city" onchange="getPrayerTimes()">
                <option value="Ambalavao">Ambalavao</option>
                <option value="Ambanja">Ambanja</option>
                <option value="Ambato-Boeny">Ambato-Boeny</option>
                <option value="Ambatofinandrahana">Ambatofinandrahana</option>
                <option value="Ambatolampy">Ambatolampy</option>
                <option value="Ambatomainty">Ambatomainty</option>
                <option value="Ambatondrazaka">Ambatondrazaka</option>
                <option value="Ambatoriha">Ambatoriha</option>
                <option value="Ambilobe">Ambilobe</option>
                <option value="Amboasary">Amboasary</option>
               <option value="Ambodifototra">Ambodifototra</option>
               <option value="Ambohidratrimo">Ambohidratrimo</option>
               <option value="Ambohimahasoa">Ambohimahasoa</option>
               <option value="Ambositra">Ambositra</option>
                <option value="Ambovombe">Ambovombe</option>
                <option value="Ampanihy">Ampanihy</option>
                <option value="Amparafaravola">Amparafaravola</option>
                <option value="Ampijoroa">Ampijoroa</option>
                <option value="Analalava">Analalava</option>
                <option value="Andapa">Andapa</option>
                <option value="Andevoranto">Andevoranto</option>
                <option value="Andilamena">Andilamena</option>
                <option value="Andoany">Andoany</option>
                <option value="Andramasina">Andramasina</option>
                <option value="Anjozorobe">Anjozorobe</option>
                <option value="Ankazoabo">Ankazoabo</option>
                <option value="Ankazobe">Ankazobe</option>
                <option value="Anosibe An\'ala">Anosibe An\'ala</option>
                <option value="Antanambao">Antanambao</option>
                <option value="Antananarivo">Antananarivo</option>
                <option value="Antanifotsy">Antanifotsy</option>
                <option value="Antanimora Sud">Antanimora Sud</option>
                <option value="Antsalova">Antsalova</option>
                <option value="Antsirabe">Antsirabe</option>
                <option value="Antsiranana">Antsiranana</option>
                <option value="Antsohihy">Antsohihy</option>
                <option value="Antsohimbondrona">Antsohimbondrona</option>
                <option value="Atsimondrano">Atsimondrano</option>
                <option value="Arivonimamo">Arivonimamo</option>
                <option value="Avaradrano">Avaradrano</option>
                <option value="Bealanana">Bealanana</option>
                <option value="Befandriana">Befandriana</option>
                <option value="Befotaka">Befotaka</option>
                <option value="Bekily">Bekily</option>
                <option value="Belo Tsiribihina">Belo Tsiribihina</option>
                <option value="Beloha">Beloha</option>
                <option value="Benenitra">Benenitra</option>
                <option value="Benjana">Benjana</option>
                <option value="Beroroha">Beroroha</option>
                <option value="Besalampy">Besalampy</option>
                <option value="Betafo">Betafo</option>
                <option value="Betioka">Betioka</option>
                <option value="Betroka">Betroka</option>
               <option value="Brickaville">Brickaville</option>
                <option value="Fandriana">Fandriana</option>
                <option value="Farafangana">Farafangana</option>
                <option value="Faratsiho">Faratsiho</option>
                <option value="Fenoarivo Atsinanana">Fenoarivo Atsinanana</option>
                <option value="Fenoarivobe">Fenoarivobe</option>
                <option value="Fianarantsoa">Fianarantsoa</option>
                <option value="Iakora">Iakora</option>
                <option value="Ifanadiana">Ifanadiana</option>
                <option value="Ikalamavony">Ikalamavony</option>
                <option value="Ikongo">Ikongo</option>
                <option value="Ihosy">Ihosy</option>
                <option value="Isandra">Isandra</option>
                <option value="Ivohibe">Ivohibe</option>
                <option value="Ivongo">Ivongo</option>
                <option value="Kandreho">Kandreho</option>
                <option value="Lalangina">Lalangina</option>
                <option value="Maevatanana">Maevatanana</option>
                <option value="Mahabo">Mahabo</option>
                <option value="Mahajanga">Mahajanga</option>
                <option value="Mahanoro">Mahanoro</option>
                <option value="Mahavelona">Mahavelona</option>
                <option value="Maintirano">Maintirano</option>
                <option value="Mampikony">Mampikony</option>
                <option value="Manakara">Manakara</option>
                <option value="Manampontsy">Manampontsy</option>
                <option value="Mananara Avaratra">Mananara Avaratra</option>
                <option value="Manandriana">Manandriana</option>
                <option value="Mananjary">Mananjary</option>
                <option value="Mandoto">Mandoto</option>
                <option value="Mandritsara">Mandritsara</option>
                <option value="Manja">Manja</option>
                <option value="Manjakandriana">Manjakandriana</option>
                <option value="Maroantsetra">Maroantsetra</option>
                 <option value="Marolambo">Marolambo</option>
                <option value="Marovoay">Marovoay</option>
                <option value="Mampikony">Mampikony</option>
                <option value="Miandrivazo">Miandrivazo</option>
                <option value="Miarinarivo">Miarinarivo</option>
                <option value="Midongy">Midongy</option>
                <option value="Mitsinjo">Mitsinjo</option>
                <option value="Morafenobe">Morafenobe</option>
                <option value="Moramanga">Moramanga</option>
                <option value="Morombe">Morombe</option>
                <option value="Morondava">Morondava</option>
                <option value="Nosy Be">Nosy Be</option>
                <option value="Nosy Varika">Nosy varika</option>
                <option value="Port-Bergé">Port-Bergé</option>
                <option value="Sainte-Marie">Sainte-Marie</option>
                <option value="Sakaraha">Sakaraha</option>
                <option value="Sambava">Sambava</option>
                <option value="Soalala">Soalala</option>
                <option value="Soanierana">Soanierana</option>
                <option value="Soavinandriana">Soavinandriana</option>
                <option value="Toamasina">Toamasina</option>
                <option value="Tolanaro">Tolanaro</option>
                <option value="Toliara">Toliara</option>
                <option value="Tsaratanana">Tsaratanana</option>
                <option value="Tsianomandidy">Tsianomandidy</option>
                <option value="Tsiombe">Tsiombe</option>
                <option value="Tsiroanomandidy">Tsiroanomandidy</option>
                <option value="Vangaindrano">Vangaindrano</option>
                <option value="Vatomandry">Vatomandry</option>
                <option value="Vavatenina">Vavatenina</option>
                <option value="Vohemar">Vohemar</option>
                <option value="Vohibato">Vohibato</option>
                <option value="Vohipeno">Vohipeno</option>
                <option value="Vondrozo">Vondrozo</option>
            </select>
        </div>
        <div class="form">
            <label for="method">Sélectionner une méthode de calcul</label>
            <select id="method" onchange="getPrayerTimes()">
                <option value="3">Ligue Islamique</option>
                <option value="4">Umm al-Qura</option>
            </select>
        </div>
        <div class="result" id="result"></div>
    </div>

    <script>
        function startClock() {
            const hourHand = document.getElementById('hourHand');
            const minuteHand = document.getElementById('minuteHand');
            const secondHand = document.getElementById('secondHand');
            const textClockDiv = document.getElementById('textClock');
            const dateDisplay = document.getElementById('dateDisplay');

            setInterval(() => {
                const now = new Date();
                const hours = now.getHours();
                const minutes = now.getMinutes();
                const seconds = now.getSeconds();
                
                const hourDeg = (hours % 12) * 30 + minutes * 0.5;
                const minuteDeg = minutes * 6;
                const secondDeg = seconds * 6;

                hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
                minuteHand.style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
                secondHand.style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;

                const formattedTime = now.toLocaleString('fr-FR', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                });
                textClockDiv.textContent = `Heure actuelle : ${formattedTime}`;

                const formattedDate = now.toLocaleDateString('fr-FR', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                dateDisplay.textContent = formattedDate;
            }, 1000);
        }
        startClock();

        async function getPrayerTimes() {
            const city = document.getElementById('city').value;
            const method = document.getElementById('method').value;
            const date = new Date().toISOString().split('T')[0];
   const cityCountryMap = {
    'Ambalavao': 'MG',
    'Ambanja': 'MG',
    'Ambato-Boeny': 'MG',
    'Ambatolampy': 'MG',
    'Ambatofinandrahana': 'MG',
    'Ambatomainty': 'MG',
    'Ambatondrazaka': 'MG',
    'Ambatoriha': 'MG',
    'Ambilobe': 'MG',
    'Ambodifototra': 'MG',
    'Amboasary': 'MG',
    'Ambohidratsimo': 'MG',
    'Ambohimahasoa': 'MG',
    'Ambositra': 'MG',
    'Ambovombe': 'MG',
    'Ampanihy': 'MG',
    'Amparafaravola': 'MG',
    'Analalava': 'MG',
    'Andapa': 'MG',
    'Andevoranto': 'MG',
    'Andilamena': 'MG',
    'Andoany': 'MG',
    'Andramasina': 'MG',
    'Anjozorobe': 'MG',
    'Ankazoabo': 'MG',
    'Ankazobe': 'MG',
    'Anosibe An\'ala': 'MG',
    'Antanambao': 'MG',
    'Antananarivo': 'MG',
    'Antalaha': 'MG',
    'Antanifotsy': 'MG',
    'Antanimora Sud': 'MG',
    'Antsalova': 'MG',
    'Atsimondrano': 'MG',
    'Antsirabe': 'MG',
    'Antsiranana': 'MG',
    'Antsohihy': 'MG',
    'Antsohimbondrona': 'MG',
    'Arivonimamo': 'MG',
     'Avaradrano': 'MG',
    'Bealanana': 'MG',
    'Befandriana': 'MG',
    'Befotaka': 'MG',
    'Bekily': 'MG',
    'Belo Tsiribihina': 'MG',
    'Beloha': 'MG',
    'Benenitra': 'MG',
    'Benjana': 'MG',
    'Beroroha': 'MG',
    'Besalampy': 'MG',
    'Betafo': 'MG',
    'Betioka': 'MG',
    'Betroka': 'MG',
    'Brickaville': 'MG',
    'Fandriana': 'MG',
    'Farafangana': 'MG',
    'Faratsiho': 'MG',
    'Fenoarivo Atsinanana': 'MG',
     'Fenoarivobe': 'MG',
    'Fianarantsoa': 'MG',
    'Iakora': 'MG',
    'Ifanadiana': 'MG',
    'Ikalamavony': 'MG',
    'Ikongo': 'MG',
    'Ihosy': 'MG',
    'Isandra': 'MG',
    'Isoanala': 'MG',
    'Ivohibe': 'MG',
    'Ivongo': 'MG',
    'Kandreho': 'MG',
    'Lalangina': 'MG',
    'Maevatanana': 'MG',
    'Mahabo': 'MG',
    'Mahajanga': 'MG',
    'Mahanoro': 'MG',
    'Mahavelona': 'MG',
    'Maintirano': 'MG',
    'Manakara': 'MG',
    'Manampontsy': 'MG',
    'Mananara Avaratra': 'MG',
    'Manandriana': 'MG',
    'Mananjary': 'MG',
    'Mandoto': 'MG',
    'Mandritsara': 'MG',
    'Manja': 'MG',
    'Manjakandriana': 'MG',
   'Maroantsetra': 'MG',
   'Marolambo': 'MG',
    'Marovoay': 'MG',
    'Miandrivazo': 'MG',
    'Miarinarivo': 'MG',
    'Midongy': 'MG',
    'Midongy Atsimo': 'MG',
    'Mitsinjo': 'MG',
    'Morafenobe': 'MG',
    'Moramanga': 'MG',
    'Morombe': 'MG',
    'Morondava': 'MG',
    'Nosy Be': 'MG',
    'Nosy Varika': 'MG',
    'Port-Bergé': 'MG',
    'Sainte-Marie': 'MG',
    'Sakaraha': 'MG',
    'Sambava': 'MG',
    'Soalala': 'MG',
    'Soanierana': 'MG',
    'Soavinandriana': 'MG',
    'Toamasina': 'MG',
    'Tolanaro': 'MG',
    'Toliara': 'MG',
    'Tsaratanana': 'MG',
    'Tsianomandidy': 'MG',
    'Tsiombe': 'MG',
    'Tsiroanomandidy': 'MG',
    'Vangaindrano': 'MG',
    'Vatomandry': 'MG',
    'Vavatenina': 'MG',
    'Vohemar': 'MG',
    'Vohibato': 'MG',
    'Vohipeno': 'MG',
    'Vondrozo': 'MG',
};

const country = cityCountryMap[city] || 'SA'; // Si la ville n'est pas trouvée, on utilise 'SA' par défaut


            const apiUrl = `https://api.aladhan.com/v1/timingsByCity?city=${city}&country=${country}&method=${method}&date=${date}`;

            try {
                const response = await fetch(apiUrl);
                const data = await response.json();
                if (data.code === 200) {
                    const timings = data.data.timings;
                    displayResults(timings);
                } else {
                    alert("Erreur lors de la récupération.");
                }
            } catch (error) {
                console.error("Erreur API:", error);
                alert("Erreur, veuillez réessayer.");
            }
        }

        function calculateLastThirdOfNight(maghrib, fajr) {
            const maghribTime = convertToMinutes(maghrib);
            let fajrTime = convertToMinutes(fajr);
            if (fajrTime <= maghribTime) {
                fajrTime += 1440;
            }
            const nightDuration = fajrTime - maghribTime;
            const lastThirdStart = maghribTime + (2 * nightDuration) / 3;
            return convertToTime(Math.floor(lastThirdStart));
        }

        function convertToMinutes(time) {
            const [hours, minutes] = time.split(':').map(Number);
            return hours * 60 + minutes;
        }

        function convertToTime(minutes) {
            const hours = Math.floor(minutes / 60) % 24;
            const mins = Math.floor(minutes % 60);
            return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
        }

        function displayResults(timings) {
  const resultDiv = document.getElementById('result');
  const lastThird = calculateLastThirdOfNight(timings.Maghrib, timings.Fajr);
  const duhaTime = addMinutes(timings.Sunrise, 20);
  const asrHanafi = calculateAsrHanafi(timings.Dhuhr, timings.Maghrib);
  
  resultDiv.innerHTML = `
    <h3>Heures de prière</h3>
    <div class="prayer-times">
      <div><i class="fas fa-clock"></i> <strong>Tahajoud:</strong> ${lastThird}</div>
      <div><i class="fas fa-moon"></i> <strong>Imsak :</strong> ${timings.Imsak.slice(0, 5)}</div>
      <div><i class="fas fa-moon"></i> <strong>Fajr:</strong> ${timings.Fajr.slice(0, 5)}</div>
      <div><i class="fas fa-sun"></i> <strong>Lever du soleil:</strong> ${timings.Sunrise.slice(0, 5)}</div>
      <div><i class="fas fa-sun"></i> <strong>Duha:</strong> ${duhaTime}</div>
      <div><i class="fas fa-clock"></i> <strong>Dhuhr:</strong> ${timings.Dhuhr.slice(0, 5)}</div>
      <div><i class="fas fa-clock"></i> <strong>Asr (Shafi'i):</strong> ${timings.Asr.slice(0, 5)}</div>
      <div><i class="fas fa-clock"></i> <strong>Asr (Hanafi):</strong> ${asrHanafi}</div>
      <div><i class="fas fa-clock"></i> <strong>Maghrib:</strong> ${timings.Maghrib.slice(0, 5)}</div>
      <div><i class="fas fa-clock"></i> <strong>Isha:</strong> ${timings.Isha.slice(0, 5)}</div>
    </div>
  `;
}

        function addMinutes(time, minutesToAdd) {
            const [hours, minutes] = time.split(':').map(Number);
            const totalMinutes = hours * 60 + minutes + minutesToAdd;
            return convertToTime(Math.floor(totalMinutes));
        }

        window.onload = () => {
            getPrayerTimes();
        }
        
        function calculateAsrHanafi(dhuhr, maghrib) {
  const dhuhrTime = convertToMinutes(dhuhr);
  const maghribTime = convertToMinutes(maghrib);
  const duration = maghribTime - dhuhrTime;
  const asrHanafiTime = dhuhrTime + Math.floor((4.79/7) * duration);
  return convertToTime(asrHanafiTime);
}
    </script>
</body>
</html>



