Berechnen Sie Ihren Verbrauch

<body>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculateur Olixir</title>
    <style>
        #calculateur-olixir {
            font-family: Arial, sans-serif;
            padding: 20px;
            position: relative;
        }
        #calculateur-olixir .container {
            max-width: 900px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 16px;
            background-color: #11542d;
            color: white;
            position: relative;
        }
        #calculateur-olixir h3 {
            color: white;
            text-align: center;
            font-size: 32px;
            margin-bottom: 30px;
        }
        #calculateur-olixir label {
            display: inline-block;
            width: 70%;
            margin-bottom: 10px;
        }
        #calculateur-olixir input,
        #calculateur-olixir select {
            width: 25%;
            padding: 5px;
            margin: 5px 0 15px 0;
            border-radius: 5px;
        }
        #calculateur-olixir hr {
            border: none;
            height: 1px;
            background-color: #ffffff44;
            margin: 15px 0;
        }
        #calculateur-olixir .button-container {
            display: flex;
            justify-content: flex-start;
        }
        #calculateur-olixir button {
            padding: 10px;
            background: white;
            color: black;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        #calculateur-olixir button:hover {
            background: #e6e6e6;
        }
        #calculateur-olixir .result-section {
            margin-top: 15px;
            padding: 10px;
            background-color: white;
            color: black;
            border-radius: 8px;
        }
        #calculateur-olixir .inline-product {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        #calculateur-olixir .inline-product img {
            width: 100px;
        }
        #calculateur-olixir .olive-icon {
            width: 16px;
            vertical-align: middle;
            margin-right: 6px;
            border-radius: 0;
        }
    </style>

 

<div id="calculateur-olixir">
    <div class="container">
        <h3>Personnalisez votre commande DE</h3>

        <label>Combien de personnes vivent dans votre foyer ?</label>
        <input type="number" id="foyer" min="1" max="10" value="1">

        <hr>

        <label>Combien de repas par jour à la maison ?</label>
        <input type="number" id="repas" min="1" max="2" value="1">

        <hr>

        <label>Souhaitez-vous un abonnement pour ne jamais manquer d'huile fraîche ?</label>
        <select id="abonnement">
            <option value="non">Non</option>
            <option value="oui">Oui</option>
        </select>

        <hr>

        <div class="button-container">
            <button onclick="calculer()">Calculer</button>
        </div>
        <div id="resultat" class="result-section"></div>
    </div>
</div>

<script>
    // ton script reste strictement inchangé
    function calculer() {
        const foyer = parseInt(document.getElementById("foyer").value);
        const repas = parseInt(document.getElementById("repas").value);
        const abonnement = document.getElementById("abonnement").value;

        if (isNaN(foyer) || isNaN(repas) || foyer < 1 || repas < 1 || repas > 2 || foyer > 10) {
            document.getElementById("resultat").innerHTML = "Veuillez entrer des valeurs valides.";
            return;
        }

        const consommationTable = {
            1: [512, 1023],
            2: [1023, 2046],
            3: [1535, 3069],
            4: [2046, 4092],
            5: [2558, 5115],
            6: [3070, 6138],
            7: [3580, 7161],
            8: [4090, 8184],
            9: [4600, 9207],
            10: [5115, 10230]
        };

        const consommationMensuelle = consommationTable[foyer][repas - 1];
        const consommationLitres = (consommationMensuelle / 1000).toFixed(2);
        let message = `Sur la base des indications que vous nous avez fournies, nous vous recommandons pour votre foyer une consommation mensuelle d'olixir® de : <strong>${consommationLitres} L</strong><br><br>`;

        const produits = {
            "2x500ml": {
                nom: "2 bouteilles 0,5L",
                lien: "https://olixir-xelico.myshopify.com/products/olixir%C2%AE-recolte-2024-bouteille-en-verre-250ml",
                image: "https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olixir_Recolte2024_Bouteilleenverre500ML_5.png?v=1740728639"
            },
            "HS3L": {
                nom: "1 Home Systeme 3L",
                lien: "https://olixir-xelico.myshopify.com/products/olixir%C2%AE-recolte-2024-home-system-3l",
                image: "https://cdn.shopify.com/s/files/1/0888/7409/0762/files/13_1.png?v=1740730870"
            },
            "HS5L": {
                nom: "1 Home Systeme 5L",
                lien: "https://olixir-xelico.myshopify.com/products/olixir%C2%AE-recolte-2024-home-system-3l",
                image: "https://cdn.shopify.com/s/files/1/0888/7409/0762/files/13_1.png?v=1740730870"
            }
        };

        const recommandations = {
            1023: ["2x500ml", "HS3L"],
            2046: ["HS3L"],
            3069: ["HS3L"],
            4092: ["HS5L"],
            5115: ["HS5L"],
            6138: ["HS5L"],
            7161: ["HS5L", "HS5L"],
            8184: ["HS5L", "HS5L"],
            9207: ["HS5L", "HS5L"],
            10230: ["HS5L", "HS5L"]
        };

        const reco = recommandations[consommationMensuelle];
        if (abonnement === "oui") {
            const totalHS3L = Math.ceil((consommationMensuelle * 2) / 3000);
            message += `Pour la consommation quotidienne de votre foyer, nous vous conseillons de choisir notre formule abonnement à raison de <strong>${totalHS3L} Home Systeme 3L</strong> tous les 2 mois.<br>`;
            message += `<div class="inline-product"><a href="${produits.HS3L.lien}" target="_blank"><img src="${produits.HS3L.image}" alt="${produits.HS3L.nom}"></a></div><br>`;
            message += `<strong>Les avantages de notre formule abonnement ?</strong><br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous recevez tous les 2 mois la quantité d'olixir® dont vous avez besoin à domicile.<br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous bénéficiez de l'huile la plus fraîche disponible, issue uniquement de la dernière récolte.<br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous bénéficiez d'un prix plus avantageux pour vous remercier de votre confiance (-5% par rapport à un achat unique).<br><br>`;
        } else {
            let formats = "";
            if (!reco || consommationMensuelle < 1023) {
                const produit = produits["2x500ml"];
                formats += `<div class="inline-product"><strong>${produit.nom}</strong></div>`;
                formats += `<div class="inline-product"><a href="${produit.lien}" target="_blank"><img src="${produit.image}" alt="${produit.nom}"></a></div>`;
            } else {
                reco.forEach(ref => {
                    const produit = produits[ref];
                    formats += `<div class="inline-product"><strong>${produit.nom}</strong></div>`;
                    formats += `<div class="inline-product"><a href="${produit.lien}" target="_blank"><img src="${produit.image}" alt="${produit.nom}"></a></div>`;
                });
            }

            const totalHS3L = Math.ceil((consommationMensuelle * 2) / 3000);
            message += `Pour la consommation quotidienne de votre foyer, nous vous conseillons ce format :<br>${formats}<br>`;
            message += `Vous pouvez également choisir la formule abonnement pour ne jamais manquer de votre dose quotidienne olixir®, à raison de <strong>${totalHS3L} Home Systeme 3L</strong> tous les 2 mois.<br><br>`;
            message += `<strong>Les avantages de notre formule abonnement ?</strong><br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous recevez tous les 2 mois la quantité d'olixir® dont vous avez besoin à domicile.<br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous bénéficiez de l'huile la plus fraîche disponible, issue uniquement de la dernière récolte.<br>`;
            message += `<img src="https://cdn.shopify.com/s/files/1/0888/7409/0762/files/olives_2963255.png?v=1742570188" class="olive-icon"> Vous bénéficiez d'un prix plus avantageux pour vous remercier de votre confiance (-5% par rapport à un achat unique).<br><br>`;
        }

        message += `<strong>La saviez-vous ?</strong><br>L’Autorité européenne de sécurité des aliments - EFSA - a validé les résultats d’une série d’études cliniques liant les polyphénols de l’huile d’olive vierge extra et la santé cardiovasculaire.<br>`;
        message += `Il a été démontré que les polyphénols de l'huile d'olive contribuent à la protection des lipides sanguins contre le stress oxydatif, un facteur clé dans le développement des maladies cardiovasculaires.<br>`;
        message += `L'huile d'olive doit présenter une certaine teneur en polyphénols pour avoir cet impact bénéfique et être consommée quotidiennement à raison de 20g-30g soit l'équivalent de 2-3 cuillères à soupe.<br><br>`;
        message += `Tout notre travail est de faire en sorte qu’olixir® soit riche en polyphénols année après année pour vous offrir tous ces bienfaits.`;

        document.getElementById("resultat").innerHTML = message;
    }
</script>

 

</body>