Calculateur de Temps de Triathlon

Distance: 🏊 Temps de natation:
Temps de transition 1 (minutes): 🚴 Temps de vélo:
Temps de transition 2 (minutes): 🏃 Temps de course à pied:
</> Intégrer ce calculateur à votre site :
<style>
    .calculator-container { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    h1 { text-align: center; color: #333; }
    .container { display: flex; justify-content: space-between; }
    .input-section, .result-section { width: 48%; }
    label { display: block; margin-top: 10px; font-weight: bold; }
    input, select { width: 30%; padding: 8px; margin-top: 5px; margin-right: 2%; border: 1px solid #ddd; border-radius: 4px; }
    button { width: 100%; margin-top: 20px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    #result { margin-top: 20px; padding: 15px; background-color: #f0f0f0; border-radius: 4px; }
    .result-item { margin-bottom: 10px; }
    .result-item span { font-weight: bold; }
    .time-input { display: flex; justify-content: space-between; }
</style>

<div class="calculator-container">
    <h1>Calculateur de Temps de Triathlon</h1>
    <div class="container">
        <div class="input-section">
            <form id="triForm">
                <label for="distance">Distance:</label>
                <select id="distance" required>
                    <option value="sprint">Sprint</option>
                    <option value="olympic">Olympique</option>
                    <option value="halfIronman">Half Ironman</option>
                    <option value="ironman">Ironman</option>
                </select>
                <label>🏊 Temps de natation:</label>
                <div class="time-input">
                    <input type="number" id="swimHours" placeholder="Heures" min="0">
                    <input type="number" id="swimMinutes" placeholder="Minutes" min="0" max="59">
                    <input type="number" id="swimSeconds" placeholder="Secondes" min="0" max="59">
                </div>
                
                <label for="t1">Temps de transition 1 (minutes):</label>
                <input type="number" id="t1">
                
                <label>🚴 Temps de vélo:</label>
                <div class="time-input">
                    <input type="number" id="bikeHours" placeholder="Heures" min="0">
                    <input type="number" id="bikeMinutes" placeholder="Minutes" min="0" max="59">
                    <input type="number" id="bikeSeconds" placeholder="Secondes" min="0" max="59">
                </div>
                
                <label for="t2">Temps de transition 2 (minutes):</label>
                <input type="number" id="t2">
                
                <label>🏃 Temps de course à pied:</label>
                <div class="time-input">
                    <input type="number" id="runHours" placeholder="Heures" min="0">
                    <input type="number" id="runMinutes" placeholder="Minutes" min="0" max="59">
                    <input type="number" id="runSeconds" placeholder="Secondes" min="0" max="59">
                </div>
                
                <button type="submit">Calculer</button>
            </form>
        </div>
        <div class="result-section">
            <div id="result"></div>
        </div>
    </div>
</div>

<script>
    const distances = {
        sprint: { swim: 0.75, bike: 20, run: 5 },
        olympic: { swim: 1.5, bike: 40, run: 10 },
        halfIronman: { swim: 1.9, bike: 90, run: 21.1 },
        ironman: { swim: 3.8, bike: 180, run: 42.2 }
    };

    function formatTime(hours, minutes, seconds) {
        return `${hours}h ${minutes}min ${seconds}s`;
    }

    function formatPace(totalMinutes) {
        const minutes = Math.floor(totalMinutes);
        const seconds = Math.round((totalMinutes - minutes) * 60);
        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
    }

    function calculateTotalMinutes(hours, minutes, seconds) {
        return hours * 60 + minutes + seconds / 60;
    }

    document.getElementById('triForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const distance = document.getElementById('distance').value;
        const swim = calculateTotalMinutes(
            parseInt(document.getElementById('swimHours').value) || 0,
            parseInt(document.getElementById('swimMinutes').value) || 0,
            parseInt(document.getElementById('swimSeconds').value) || 0
        );
        const t1 = parseFloat(document.getElementById('t1').value) || 0;
        const bike = calculateTotalMinutes(
            parseInt(document.getElementById('bikeHours').value) || 0,
            parseInt(document.getElementById('bikeMinutes').value) || 0,
            parseInt(document.getElementById('bikeSeconds').value) || 0
        );
        const t2 = parseFloat(document.getElementById('t2').value) || 0;
        const run = calculateTotalMinutes(
            parseInt(document.getElementById('runHours').value) || 0,
            parseInt(document.getElementById('runMinutes').value) || 0,
            parseInt(document.getElementById('runSeconds').value) || 0
        );
        
        const totalTime = swim + t1 + bike + t2 + run;
        const swimPace = (swim / (distances[distance].swim * 10)); // Calcul pour 100m
        const bikeSpeed = (distances[distance].bike / (bike / 60)).toFixed(2);
        const runPace = (run / distances[distance].run).toFixed(2);
        
        let resultHTML = `
            <div class="result-item"><span>Temps total:</span> ${formatTime(Math.floor(totalTime/60), Math.floor(totalTime%60), Math.round((totalTime%1)*60))}</div>
            <div class="result-item"><span>🏊 Natation:</span> ${formatTime(Math.floor(swim/60), Math.floor(swim%60), Math.round((swim%1)*60))} (${formatPace(swimPace)} /100m)</div>
            <div class="result-item"><span>T1:</span> ${formatTime(0, Math.floor(t1), Math.round((t1%1)*60))}</div>
            <div class="result-item"><span>🚴 Vélo:</span> ${formatTime(Math.floor(bike/60), Math.floor(bike%60), Math.round((bike%1)*60))} (${bikeSpeed} km/h)</div>
            <div class="result-item"><span>T2:</span> ${formatTime(0, Math.floor(t2), Math.round((t2%1)*60))}</div>
            <div class="result-item"><span>🏃 Course:</span> ${formatTime(Math.floor(run/60), Math.floor(run%60), Math.round((run%1)*60))} (${formatPace(runPace)} /km)</div>
        `;
        
        document.getElementById('result').innerHTML = resultHTML;
    });
</script>