Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Attachments / Replit – Comparison Calculator
Duplicate Snippet

Embed Snippet on Your Site

Replit – Comparison Calculator

Compares Fractal Capital vs. Land Equity Loan

Harrison Rogers
<10
Code Preview
Comments
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fractal Agriculture Calculator</title>
    <style>
        /* Reset and Base Styles */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        .fractal-calculator {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .fractal-primary { color: #033b3d; }
        .fractal-accent { color: #e3ad24; }
        .fractal-light { background-color: #f8fffe; }
        
        /* Typography */
        .bebas-heading {
            font-family: 'Bebas Neue', cursive;
            font-weight: normal;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        
        h1 { font-size: 3rem; margin-bottom: 1rem; }
        h2 { font-size: 2rem; margin-bottom: 1rem; }
        h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
        h4 { font-size: 1.25rem; margin-bottom: 0.5rem; }
        
        /* Layout Components */
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .section {
            padding: 2rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .section:last-child { border-bottom: none; }
        
        .section.gray { background-color: #f9fafb; }
        
        .grid { display: grid; gap: 1rem; }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
        
        @media (max-width: 768px) {
            .grid-cols-2, .grid-cols-3, .grid-cols-4 {
                grid-template-columns: 1fr;
            }
        }
        
        /* Form Elements */
        .form-group {
            margin-bottom: 1rem;
        }
        
        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            margin-bottom: 0.5rem;
        }
        
        input, select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 0.875rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #033b3d;
            box-shadow: 0 0 0 3px rgba(3, 59, 61, 0.1);
        }
        
        .input-with-symbol {
            position: relative;
        }
        
        .input-symbol {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #6b7280;
            font-size: 0.875rem;
            pointer-events: none;
        }
        
        .input-symbol.left { left: 0.75rem; }
        .input-symbol.right { right: 0.75rem; }
        
        .input-with-symbol input.with-left-symbol { padding-left: 2rem; }
        .input-with-symbol input.with-right-symbol { padding-right: 2rem; }
        
        /* Checkbox Styles */
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 0.75rem;
        }
        
        .checkbox-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
        }
        
        .checkbox-item:hover {
            background-color: #f9fafb;
        }
        
        .checkbox-item.selected {
            background-color: #e3ad24;
            border-color: rgba(3, 59, 61, 0.2);
        }
        
        .checkbox {
            width: 1rem;
            height: 1rem;
            margin-top: 0.125rem;
            flex-shrink: 0;
        }
        
        /* Buttons */
        .btn {
            display: inline-block;
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s ease-in-out;
        }
        
        .btn-primary {
            background-color: #e3ad24;
            color: #000;
        }
        
        .btn-primary:hover {
            background-color: #d19a1f;
        }
        
        .btn-link {
            background: none;
            border: none;
            color: #033b3d;
            text-decoration: underline;
            cursor: pointer;
            font-size: inherit;
            padding: 0;
        }
        
        /* Table Styles */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .comparison-table th {
            background-color: #f9fafb;
            font-weight: 600;
            color: #374151;
        }
        
        .comparison-table .number {
            font-weight: 600;
            color: #033b3d;
        }
        
        /* Savings Summary */
        .savings-summary {
            background-color: #e5ebeb;
            padding: 2rem;
            margin-top: 2rem;
            border-radius: 8px;
        }
        
        .savings-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .savings-card {
            background: white;
            padding: 1.5rem;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .savings-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #033b3d;
            margin-bottom: 0.5rem;
        }
        
        .savings-label {
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        /* Sticky Banner */
        .sticky-banner {
            position: fixed;
            top: 1rem;
            left: 0;
            right: 0;
            z-index: 1000;
            background: #022a2c;
            color: white;
            text-align: center;
            padding: 1rem 2rem;
            margin: 0 1rem;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            display: none;
        }
        
        .sticky-banner.show {
            display: block;
        }
        
        .banner-text {
            font-size: 1.25rem;
            font-weight: 600;
        }
        
        .banner-highlight {
            color: #e3ad24;
            font-weight: bold;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .fractal-calculator {
                padding: 1rem;
            }
            
            h1 { font-size: 2rem; }
            h2 { font-size: 1.5rem; }
            
            .section {
                padding: 1.5rem;
            }
            
            .comparison-table {
                font-size: 0.875rem;
            }
            
            .comparison-table th,
            .comparison-table td {
                padding: 0.75rem 0.5rem;
            }
        }
        
        /* Utilities */
        .text-center { text-align: center; }
        .text-sm { font-size: 0.875rem; }
        .text-xs { font-size: 0.75rem; }
        .text-gray-600 { color: #6b7280; }
        .text-gray-700 { color: #374151; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-8 { margin-top: 2rem; }
        .hidden { display: none; }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="fractal-calculator">
        <!-- Header -->
        <header class="text-center mb-8">
            <h1 class="bebas-heading fractal-primary">Access capital with fewer payments & collateral</h1>
            <p class="text-gray-600 text-lg">Compare Fractal Capital vs traditional equity loans for agricultural financing</p>
        </header>
        <!-- Sticky Banner -->
        <div id="stickyBanner" class="sticky-banner">
            <div id="bannerContent" class="banner-text">
                With Fractal, you pay <span id="bannerPaymentDiff" class="banner-highlight">0%</span> less annually 
                & pledge <span id="bannerAcresDiff" class="banner-highlight">0%</span> fewer acres
            </div>
            <div class="text-sm mt-2">Results update as you adjust inputs</div>
        </div>
        <!-- Original Banner (for scroll detection) -->
        <div id="originalBanner" class="card mb-8" style="background: #022a2c; color: white;">
            <div class="section text-center">
                <div id="originalBannerContent" class="banner-text">
                    With Fractal, you pay <span id="originalPaymentDiff" class="banner-highlight">0%</span> less annually 
                    & pledge <span id="originalAcresDiff" class="banner-highlight">0%</span> fewer acres
                </div>
                <div class="text-sm mt-2">Results update as you adjust inputs</div>
            </div>
        </div>
        <!-- Main Calculator -->
        <div class="card">
            <!-- Step 1: Land Loan Terms -->
            <div class="section gray">
                <h3 class="bebas-heading fractal-primary" style="font-size: 2rem;">Step 1: Land Loan Terms</h3>
                <p class="text-sm text-gray-600 mb-4">Input terms you could get from your lender</p>
                
                <div class="grid grid-cols-4">
                    <div class="form-group">
                        <label for="valuePerAcre">Land Value/Acre</label>
                        <div class="input-with-symbol">
                            <span class="input-symbol left">$</span>
                            <input type="text" id="valuePerAcre" class="with-left-symbol" placeholder="Enter value">
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Value bank loans against</p>
                    </div>
                    
                    <div class="form-group">
                        <label for="ltvRatio">Loan-to-Value</label>
                        <div class="input-with-symbol">
                            <input type="number" id="ltvRatio" class="with-right-symbol" min="0" max="100" placeholder="0-100">
                            <span class="input-symbol right">%</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="debtRate">Interest Rate</label>
                        <div class="input-with-symbol">
                            <input type="number" id="debtRate" class="with-right-symbol" step="0.1" placeholder="Enter rate">
                            <span class="input-symbol right">%</span>
                        </div>
                        <p class="text-xs text-gray-600 mt-1">For a fixed rate land loan</p>
                    </div>
                    
                    <div class="form-group">
                        <label for="debtTerm">Term</label>
                        <div class="input-with-symbol">
                            <input type="number" id="debtTerm" class="with-right-symbol" placeholder="Enter term">
                            <span class="input-symbol right">yrs</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Step 2: Fractal Terms -->
            <div class="section">
                <h3 class="bebas-heading fractal-primary" style="font-size: 2rem;">Step 2: Fractal Terms</h3>
                <p class="text-sm text-gray-600 mb-2">Fractal passively invests in fields you own and charges interest-only payments over a 10-year term</p>
                <p class="text-sm text-gray-600 mb-4">
                    <button class="btn-link" onclick="openDialog()">Learn how Fractal Capital works</button>
                </p>
                
                <div class="mb-6">
                    <label class="text-lg font-semibold text-gray-700 mb-2 block">Calculate Your Fractal Rate</label>
                    <p class="text-sm text-gray-600 mb-4">Fractal reduces its rate when you implement the below soil health practices</p>
                    
                    <div class="checkbox-group">
                        <div class="checkbox-item" onclick="togglePractice('coverCrops')">
                            <input type="checkbox" class="checkbox" id="coverCrops">
                            <div>
                                <div class="text-sm font-medium text-gray-800">Cover Crops</div>
                                <p class="text-xs text-gray-600 mt-1">Plant cover crops to protect and improve soil health between cash crop seasons</p>
                            </div>
                        </div>
                        
                        <div class="checkbox-item" onclick="togglePractice('noTill')">
                            <input type="checkbox" class="checkbox" id="noTill">
                            <div>
                                <div class="text-sm font-medium text-gray-800">No-Till or Strip-Till</div>
                                <p class="text-xs text-gray-600 mt-1">Minimize soil disturbance & maximize crop residue throughout the year</p>
                            </div>
                        </div>
                        
                        <div class="checkbox-item" onclick="togglePractice('knowledgeSharing')">
                            <input type="checkbox" class="checkbox" id="knowledgeSharing">
                            <div>
                                <div class="text-sm font-medium text-gray-800">Knowledge Sharing</div>
                                <p class="text-xs text-gray-600 mt-1">Share soil health data with Fractal for research and improvement</p>
                            </div>
                        </div>
                        
                        <div class="checkbox-item" onclick="togglePractice('cropRotation')">
                            <input type="checkbox" class="checkbox" id="cropRotation">
                            <div>
                                <div class="text-sm font-medium text-gray-800">Diverse Crop Rotation</div>
                                <p class="text-xs text-gray-600 mt-1">Rotate different crops to enhance soil biology and reduce pest pressure</p>
                            </div>
                        </div>
                        
                        <div class="checkbox-item" onclick="togglePractice('nutrientManagement')">
                            <input type="checkbox" class="checkbox" id="nutrientManagement">
                            <div>
                                <div class="text-sm font-medium text-gray-800">Precision Nutrient Management</div>
                                <p class="text-xs text-gray-600 mt-1">Optimize fertilizer application timing and rates based on soil and plant needs</p>
                            </div>
                        </div>
                        
                        <div class="checkbox-item" onclick="togglePractice('grazing')">
                            <input type="checkbox" class="checkbox" id="grazing">
                            <div>
                                <div class="text-sm font-medium text-gray-800">Integrating Livestock</div>
                                <p class="text-xs text-gray-600 mt-1">Incorporate livestock grazing to improve soil health and farm profitability</p>
                            </div>
                        </div>
                    </div>
                    
                    <div style="border: 1px solid rgba(3, 59, 61, 0.2); padding: 1rem; background: #f0fdf4; margin-top: 1.5rem; border-radius: 4px;">
                        <div class="text-center">
                            <label class="text-lg font-semibold text-gray-700 mb-2 block">Fractal Rate</label>
                            <div style="font-size: 1.5rem; font-weight: bold; color: #033b3d;" id="fractalRateDisplay">5.6%</div>
                            <p class="text-xs text-gray-600 mt-1" id="fractalRateCalculation">5.6% Base Rate minus (0 practices × 0.2%)</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Step 3: Example Capital Need -->
            <div class="section">
                <h3 class="bebas-heading fractal-primary" style="font-size: 2rem;">Step 3: Example Capital Need</h3>
                
                <div class="form-group" style="max-width: 300px;">
                    <label for="capitalNeed">Capital Needed</label>
                    <input type="text" id="capitalNeed" placeholder="$1,000,000">
                </div>
                
                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Equity Loan</th>
                            <th>Fractal Capital</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Annual Payment</strong></td>
                            <td class="number" id="debtPayment">$0</td>
                            <td class="number" id="fractalPayment">$0</td>
                        </tr>
                        <tr>
                            <td><strong>Acres Pledged as Collateral</strong></td>
                            <td class="number" id="debtAcres">0</td>
                            <td class="number" id="fractalAcres">0</td>
                        </tr>
                    </tbody>
                </table>
                <!-- Savings Summary -->
                <div class="savings-summary">
                    <h4 class="bebas-heading text-center" style="font-size: 2rem; color: #000;">Fractal Savings</h4>
                    <p class="text-center text-gray-600 mb-4">Where will you deploy these savings into your operation?</p>
                    
                    <div class="savings-cards">
                        <div class="savings-card">
                            <div class="savings-value" id="paymentSavings">$0</div>
                            <div class="savings-label">Annual Payment Savings</div>
                        </div>
                        <div class="savings-card">
                            <div class="savings-value" id="acresSavings">0</div>
                            <div class="savings-label">Fewer Acres Pledged</div>
                        </div>
                    </div>
                </div>
                <!-- How Farmers Use Fractal -->
                <div style="margin-top: 2rem; padding: 2rem; background: white; border-top: 1px solid #e5e7eb;">
                    <h4 class="bebas-heading text-center mb-4" style="font-size: 2rem; color: #000;">How Are Farmers Using Fractal?</h4>
                    <p class="text-center text-gray-600 mb-6">Free up cashflow to expand in a low margin, low appreciation environment</p>
                    
                    <div class="grid grid-cols-3">
                        <div class="text-center">
                            <h5 class="font-semibold text-gray-900 mb-2">No-Brainer ROI Projects</h5>
                            <p class="text-sm text-gray-600">Finance projects that immediately improve cash flow</p>
                        </div>
                        <div class="text-center">
                            <h5 class="font-semibold text-gray-900 mb-2">Down Payment Replacement</h5>
                            <p class="text-sm text-gray-600">Access more debt to cashflow more land deals when others can't</p>
                        </div>
                        <div class="text-center">
                            <h5 class="font-semibold text-gray-900 mb-2">Buy-Out Term Debt</h5>
                            <p class="text-sm text-gray-600">Replace high interest rate debt that drags cash flow and stunts growth</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Call to Action -->
        <div class="text-center mt-8">
            <a href="https://www.fractal.ag" target="_blank" class="btn btn-primary">Contact Us to Learn More</a>
            <p class="mt-4 text-gray-600">
                <a href="https://fractal.ag/hear-from-farmers/" target="_blank" class="fractal-primary" style="text-decoration: underline;">Hear from farmers using Fractal Capital</a>
            </p>
        </div>
    </div>
    <!-- Modal Dialog -->
    <div id="dialogOverlay" class="hidden" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem;">
        <div style="background: white; max-width: 600px; width: 100%; padding: 2rem; border-radius: 8px; max-height: 90vh; overflow-y: auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 class="bebas-heading fractal-primary" style="font-size: 1.5rem;">Fractal Capital Basics</h3>
                <button onclick="closeDialog()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
            </div>
            
            <div style="space-y: 1rem;">
                <p class="text-gray-700 text-sm">Fractal invests in up to 45% of a field you own, allowing you to maintain ownership & control.</p>
                
                <div>
                    <h4 class="font-semibold text-gray-900 mb-2">More capital for less cash flow & collateral:</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Fractal doesn't take collateral and is 2nd to the bank</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Fractal charges interest-only payments as a fixed % of the investment value</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Investment value is reassessed annually using 3rd party survey data</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Fractal discounts rate up to 1.8% for implementing soil health practices</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-900 mb-2">Designed for risk management:</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Fractal shares in land value risk – as land values go down, so do your payments</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Annual payments can be made in cash or additional equity</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">You can buy-out Fractal anytime after 2 years, as crop prices increase and interest rates drop</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Fractal is locked in for a 10-year term</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-900 mb-2">Tax benefit:</h4>
                    <ul style="list-style: none; padding: 0;">
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Sum of annual payments and the buyout amount is tax deductible at term</span>
                        </li>
                        <li style="display: flex; margin-bottom: 0.5rem;">
                            <span style="margin-right: 0.5rem;">-</span>
                            <span class="text-gray-700 text-sm">Equates to a 25% discount on the buyout amount assuming 20% tax rate</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Calculator State
        let calculatorInputs = {
            capitalNeed: 1000000,
            valuePerAcre: 10000,
            ltvRatio: 60,
            debtRate: 7.5,
            fractalRate: 5.6,
            debtTerm: 20,
            fractalTerm: 10,
            soilHealthPractices: ['Cover Crops', 'No-Till or Strip-Till', 'Knowledge Sharing']
        };
        // Soil health practices mapping
        const practiceMapping = {
            'coverCrops': 'Cover Crops',
            'noTill': 'No-Till or Strip-Till',
            'knowledgeSharing': 'Knowledge Sharing',
            'cropRotation': 'Diverse Crop Rotation',
            'nutrientManagement': 'Precision Nutrient Management',
            'grazing': 'Integrating Livestock'
        };
        // Financial Calculations
        function calculatePMT(rate, nper, pv) {
            if (rate === 0) return pv / nper;
            const annualRate = rate / 100;
            return (pv * annualRate * Math.pow(1 + annualRate, nper)) / 
                   (Math.pow(1 + annualRate, nper) - 1);
        }
        function formatCurrency(amount) {
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(amount);
        }
        function formatNumber(num) {
            return new Intl.NumberFormat('en-US').format(Math.round(num));
        }
        function formatPercentage(num) {
            return Math.round(num) + '%';
        }
        function calculateFractalRate(practices) {
            const baseRate = 5.6;
            const discount = practices.length * 0.2;
            return Math.max(3.8, baseRate - discount);
        }
        function calculateResults(inputs) {
            // Debt calculations
            const debtPayment = calculatePMT(inputs.debtRate, inputs.debtTerm, inputs.capitalNeed);
            const debtAcres = inputs.capitalNeed / (inputs.valuePerAcre * inputs.ltvRatio / 100);
            
            // Fractal calculations (interest-only)
            const fractalPayment = inputs.capitalNeed * (inputs.fractalRate / 100);
            const fractalAcres = inputs.capitalNeed / (inputs.valuePerAcre * 0.45); // 45% LTV for Fractal
            
            // Differences
            const paymentDifference = ((debtPayment - fractalPayment) / debtPayment) * 100;
            const acresDifference = ((debtAcres - fractalAcres) / debtAcres) * 100;
            
            return {
                debtPayment,
                fractalPayment,
                debtAcres,
                fractalAcres,
                paymentDifference,
                acresDifference,
                paymentSavings: debtPayment - fractalPayment,
                acresSavings: debtAcres - fractalAcres
            };
        }
        // UI Updates
        function updateDisplay() {
            const results = calculateResults(calculatorInputs);
            
            // Update comparison table
            document.getElementById('debtPayment').textContent = formatCurrency(results.debtPayment);
            document.getElementById('fractalPayment').textContent = formatCurrency(results.fractalPayment);
            document.getElementById('debtAcres').textContent = formatNumber(results.debtAcres);
            document.getElementById('fractalAcres').textContent = formatNumber(results.fractalAcres);
            
            // Update savings cards
            document.getElementById('paymentSavings').textContent = formatCurrency(results.paymentSavings);
            document.getElementById('acresSavings').textContent = formatNumber(results.acresSavings);
            
            // Update banners
            const paymentDiff = formatPercentage(results.paymentDifference);
            const acresDiff = formatPercentage(results.acresDifference);
            
            document.getElementById('bannerPaymentDiff').textContent = paymentDiff;
            document.getElementById('bannerAcresDiff').textContent = acresDiff;
            document.getElementById('originalPaymentDiff').textContent = paymentDiff;
            document.getElementById('originalAcresDiff').textContent = acresDiff;
            
            // Update fractal rate display
            const fractalRate = calculateFractalRate(calculatorInputs.soilHealthPractices);
            calculatorInputs.fractalRate = fractalRate;
            document.getElementById('fractalRateDisplay').textContent = fractalRate.toFixed(2) + '%';
            document.getElementById('fractalRateCalculation').textContent = 
                `5.6% Base Rate minus (${calculatorInputs.soilHealthPractices.length} practices × 0.2%)`;
        }
        // Input Handlers
        function formatNumberWithCommas(num) {
            return num.toLocaleString('en-US');
        }
        function handleNumberInput(field, value) {
            if (field === 'capitalNeed') {
                const cleanValue = value.replace(/[^0-9]/g, '');
                if (cleanValue) {
                    calculatorInputs[field] = parseInt(cleanValue);
                    document.getElementById(field).value = '$' + formatNumberWithCommas(parseInt(cleanValue));
                } else {
                    document.getElementById(field).value = '$';
                }
            } else if (field === 'valuePerAcre') {
                const cleanValue = value.replace(/[^0-9]/g, '');
                if (cleanValue) {
                    calculatorInputs[field] = parseInt(cleanValue);
                    document.getElementById(field).value = formatNumberWithCommas(parseInt(cleanValue));
                }
            } else {
                const numValue = parseFloat(value);
                if (!isNaN(numValue)) {
                    calculatorInputs[field] = numValue;
                }
            }
            updateDisplay();
        }
        // Soil Health Practice Toggle
        function togglePractice(practiceId) {
            const practiceName = practiceMapping[practiceId];
            const checkbox = document.getElementById(practiceId);
            const item = checkbox.parentElement;
            
            if (calculatorInputs.soilHealthPractices.includes(practiceName)) {
                calculatorInputs.soilHealthPractices = calculatorInputs.soilHealthPractices.filter(p => p !== practiceName);
                checkbox.checked = false;
                item.classList.remove('selected');
            } else {
                calculatorInputs.soilHealthPractices.push(practiceName);
                checkbox.checked = true;
                item.classList.add('selected');
            }
            updateDisplay();
        }
        // Dialog Functions
        function openDialog() {
            document.getElementById('dialogOverlay').classList.remove('hidden');
        }
        function closeDialog() {
            document.getElementById('dialogOverlay').classList.add('hidden');
        }
        // Sticky Banner
        function handleScroll() {
            const originalBanner = document.getElementById('originalBanner');
            const stickyBanner = document.getElementById('stickyBanner');
            const rect = originalBanner.getBoundingClientRect();
            
            if (rect.top <= 16) {
                stickyBanner.classList.add('show');
            } else {
                stickyBanner.classList.remove('show');
            }
        }
        // Initialize
        function initialize() {
            // Set default values
            document.getElementById('capitalNeed').value = '$1,000,000';
            document.getElementById('valuePerAcre').value = '10,000';
            document.getElementById('ltvRatio').value = '60';
            document.getElementById('debtRate').value = '7.5';
            document.getElementById('debtTerm').value = '20';
            
            // Set default selected practices
            ['coverCrops', 'noTill', 'knowledgeSharing'].forEach(id => {
                document.getElementById(id).checked = true;
                document.getElementById(id).parentElement.classList.add('selected');
            });
            
            // Add event listeners
            document.getElementById('capitalNeed').addEventListener('input', (e) => {
                handleNumberInput('capitalNeed', e.target.value);
            });
            
            document.getElementById('valuePerAcre').addEventListener('input', (e) => {
                handleNumberInput('valuePerAcre', e.target.value);
            });
            
            document.getElementById('ltvRatio').addEventListener('input', (e) => {
                handleNumberInput('ltvRatio', e.target.value);
            });
            
            document.getElementById('debtRate').addEventListener('input', (e) => {
                handleNumberInput('debtRate', e.target.value);
            });
            
            document.getElementById('debtTerm').addEventListener('input', (e) => {
                handleNumberInput('debtTerm', e.target.value);
            });
            
            // Add scroll listener for sticky banner
            window.addEventListener('scroll', handleScroll);
            
            // Close dialog when clicking overlay
            document.getElementById('dialogOverlay').addEventListener('click', (e) => {
                if (e.target === e.currentTarget) {
                    closeDialog();
                }
            });
            
            // Prevent mouse wheel from changing input values
            document.querySelectorAll('input[type="number"]').forEach(input => {
                input.addEventListener('wheel', (e) => {
                    e.target.blur();
                });
            });
            
            // Initial calculation
            updateDisplay();
        }
        // Start the calculator when page loads
        document.addEventListener('DOMContentLoaded', initialize);
    </script>
</body>
</html>
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet