OneCompiler

Démonstration d'Application de la BibleDescription

205


<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Démonstration d'Application de la Bible</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } 
    body {
        background: #f0f2f5;
        color: #1a1a1a;
        line-height: 1.6;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    header {
        text-align: center;
        padding: 2rem;
        background: #2c3e50;
        color: white;
        margin-bottom: 2rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .search-box {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    input, button {
        padding: 10px;
        margin: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
    }

    button {
        background: #2c3e50;
        color: white;
        cursor: pointer;
        border: none;
        padding: 10px 20px;
    }

    button:hover {
        background: #34495e;
    }

    .verse-content {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .verse {
        margin-bottom: 1rem;
        font-size: 1.1em;
    }

    .reference {
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .loading {
        text-align: center;
        padding: 2rem;
        color: #666;
    }

    @media (max-width: 600px) {
        input {
            width: 100%;
            margin: 5px 0;
        }
    }
</style>
</head> <body> <header> <h1>Démonstration d'Application de la Bible</h1> </header> 
<div class="container">
    <div class="search-box">
        <input type="text" id="reference" placeholder="Ex: Jean 3:16" value="Jean 3:16">
        <button onclick="getVerse()">Lire le verset</button>
    </div>

    <div id="result" class="verse-content">
        <p>Entrez une référence biblique ci-dessus pour commencer à lire.</p>
    </div>
</div>

<script>
    async function getVerse() {
        const reference = document.getElementById('reference').value;
        const resultDiv = document.getElementById('result');
        
        resultDiv.innerHTML = '<div class="loading">Chargement...</div>';

        try {
            const response = await fetch(`https://bible-api.com/${reference}`);
            const data = await response.json();

            if (data.text) {
                resultDiv.innerHTML = `
                    <div class="verse">
                        <div class="reference">${data.reference}</div>
                        <div class="text">${data.text}</div>
                    </div>
                `;
            } else {
                resultDiv.innerHTML = 'Verset non trouvé. Veuillez essayer une autre référence.';
            }
        } catch (error) {
            resultDiv.innerHTML = 'Erreur lors du chargement du verset. Veuillez réessayer.';
            console.error('Erreur:', error);
        }
    }

    // Charger un verset par défaut au démarrage
    getVerse();
</script>
</body> </html>