Select Page

HVO Calculator Shortcode Function

// HVO Calculator Shortcode Functionnfunction hvo_calculator_shortcode($atts) {n $atts = shortcode_atts(array(n ‚max_width‘ => ‚800px‘,n ‚padding‘ => ’24px’n ), $atts, ‚hvo_calculator‘);nn ob_start();n ?>n <div class="hvo-calculator" style="max-width: <?php echo esc_attr($atts[‚max_width‘]); ?>; margin: 0 auto; padding: <?php echo esc_attr($atts[‚padding‘]); ?>; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #d1e7dd; font-family: inherit;">n <h2 style="color: #2f855a; font-size: 28px; text-align: center; margin-bottom: 12px; font-weight: bold;">HVO CO2-Einsparungsrechner

n <p style="color: #4a5568; text-align: center; margin-bottom: 32px; font-size: 16px;">Berechnen Sie Ihre CO2-Einsparung beim Umstieg von Diesel auf HVO

n n <div style="margin-bottom: 28px;">n <label style="display: block; color: #2d3748; font-weight: 600; margin-bottom: 12px; font-size: 16px;">Jährlicher Dieselverbrauch (Liter)n <input type="number" id="diesel-consumption-calc" value="10000" min="0" step="100" style="width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 16px; transition: border-color 0.2s;" onchange="calculateHVOSavings()" oninput="calculateHVOSavings()">n

n n <div style="margin-bottom: 28px;">n <label style="display: block; color: #2d3748; font-weight: 600; margin-bottom: 12px; font-size: 16px;">CO2-Reduktion durch HVO: <span id="percent-display-calc" style="color: #2f855a; font-weight: bold;">90%n <input type="range" id="percentage-reduction-calc" min="0" max="100" value="90" style="width: 100%; height: 12px; background: #e2e8f0; border-radius: 6px; outline: none; -webkit-appearance: none; appearance: none;" onchange="calculateHVOSavings()" oninput="updatePercentDisplay(); calculateHVOSavings();">n <div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #6b7280;">n 0%n 50%n 100%n

n

n n <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0;">n <div style="background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%); padding: 28px 20px; border-radius: 12px; border: 2px solid #d1e7dd; text-align: center;">n <div id="co2-result-calc" style="font-size: 42px; font-weight: bold; color: #2f855a; margin-bottom: 8px;">23.85

n <div style="color: #374151; font-size: 14px; font-weight: 500;">Tonnen CO2 Einsparung pro Jahr

n

n <div style="background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%); padding: 28px 20px; border-radius: 12px; border: 2px solid #d1e7dd; text-align: center;">n <div id="trees-result-calc" style="font-size: 42px; font-weight: bold; color: #2f855a; margin-bottom: 8px;">1.136

n <div style="color: #374151; font-size: 14px; font-weight: 500;">Bäume absorbieren diese CO2-Menge pro Jahr

n

n

n n <div style="background: #f8fafc; padding: 24px; border-radius: 10px; border: 1px solid #e2e8f0; font-size: 14px; color: #4a5568;">n <p style="margin-top: 0; margin-bottom: 12px; font-weight: 600;">Berechnungsgrundlage:

n <ul style="padding-left: 20px; margin: 0 0 12px 0; line-height: 1.6;">n <li style="margin-bottom: 6px;">Konventioneller Diesel erzeugt ca. 2,65 kg CO2 pro Liter

n <li style="margin-bottom: 6px;">HVO100 reduziert CO2-Emissionen um bis zu 90% im Vergleich zu fossilem Diesel

n <li style="margin-bottom: 6px;">Ein Baum bindet durchschnittlich 21 kg CO2 pro Jahr

n

n <p style="font-size: 12px; font-style: italic; margin-top: 16px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 12px;">Die Anzahl der Bäume zeigt, wie viele Bäume benötigt würden, um die gleiche Menge CO2 innerhalb eines Jahres zu absorbieren, die Sie durch den Umstieg auf HVO einsparen. Diese Berechnung dient der Veranschaulichung. Die tatsächlichen Werte können je nach HVO-Rohstoff und Produktionsprozess variieren.

n

n

n n

n n n <?phpn return ob_get_clean();n}nadd_shortcode(‚hvo_calculator‘, ‚hvo_calculator_shortcode‘);