tessst

<!-- Conteneur d'icônes -->
<div style="text-align: center; margin-top: 20px;">
    <button onclick="loadIframe('match_av')" style="padding: 10px 20px; font-size: 16px;">Match à venir</button>
    <button onclick="loadIframe('analyse_match')" style="padding: 10px 20px; font-size: 16px;">Analyser un match</button>
</div>

<!-- Iframes -->
<div id="iframe-container">
    <!-- Iframe "Demander l'analyse d'un Match" -->
    <div id="iframe-analyse-match" style="display: none;">
        <iframe id="inlineFrameAnalyseMatch" title="Demander l'analyse d'un Match" width="100%" height="500" src="https://predictionai-app.bubbleapps.io/" style="border: none; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);"></iframe>
    </div>

    <!-- Iframe "Analyse des Matchs à venir" -->
    <div id="iframe-match-a-venir" style="display: none;">
        <iframe id="inlineFrameMatchAVenir" title="Analyse des Matchs à venir" width="100%" height="500" src="https://predictionai-app.bubbleapps.io/accueil" style="border: none; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);"></iframe>
    </div>
</div>

<script>
    function loadIframe(option) {
        // Cacher toutes les iframes
        document.getElementById('iframe-analyse-match').style.display = 'none';
        document.getElementById('iframe-match-a-venir').style.display = 'none';

        // Afficher l'iframe correspondant à l'option sélectionnée
        if (option === 'match_av') {
            document.getElementById('iframe-match-a-venir').style.display = 'block';
        } else if (option === 'analyse_match') {
            document.getElementById('iframe-analyse-match').style.display = 'block';
        }
    }
</script>