puffinOffsetCalculator/puffin-calculator-iframe

Puffin Carbon Offset Calculator (iFrame version)

A lightweight, embeddable version of the Puffin Carbon Offset Calculator for yachts and marine vessels.

Features

• Carbon emissions calculator based on fuel consumption or trip distance
• Support for multiple currencies
• Responsive design that works in any iFrame
• Automatic height adjustment
• Dark/light theme support
• Docker-ready for easy deployment

Getting Started

Running Locally

1. Clone this repository
2. Open the project directory
3. Open index.html in your browser

Using Docker

Build and run using Docker Compose:

docker-compose up -d

This will start a server on port 8080. You can then access the calculator at http://localhost:8080.

Embedding in Your Website

Add the following code to your website:

<iframe 
  src="http://your-server:8080"
  id="puffin-calculator-iframe"
  width="100%" 
  height="600" 
  frameborder="0" 
  allow="clipboard-write"
  title="Puffin Carbon Offset Calculator"
></iframe>

<script>
  // Optional: Handle iframe resizing for responsive behavior
  window.addEventListener('message', function(event) {
    if (event.data.type === 'puffin-calculator-resize') {
      const iframe = document.getElementById('puffin-calculator-iframe');
      if (iframe) {
        // Add a bit of extra space to avoid scrollbars
        iframe.style.height = (event.data.height + 50) + 'px';
      }
    }
  });
</script>

See iframe-example.html for a complete integration example.

Advanced Usage

The calculator exposes a JavaScript API that you can use to control it from the parent page:

// Access the iframe's window object
const calculatorFrame = document.getElementById('puffin-calculator-iframe');

// Set the theme (once the iframe has loaded)
calculatorFrame.addEventListener('load', function() {
  // Access the API methods
  calculatorFrame.contentWindow.PuffinCalculator.setTheme('dark');
  
  // Reset the calculator to initial state
  calculatorFrame.contentWindow.PuffinCalculator.resetCalculator();
});

Project Structure

puffin-calculator-iframe/
├── index.html              # Main HTML file
├── iframe-example.html     # Example of embedding the calculator
├── styles.css              # Main stylesheet
├── Dockerfile              # Docker configuration
├── docker-compose.yml      # Docker Compose configuration
├── README.md               # This file
└── js/
    ├── app.js              # Main application code
    ├── components.js       # React components
    └── utils.js            # Utility functions

Carbon Calculation Methods

This calculator offers three methods for calculating carbon emissions:

1. Fuel-Based: Calculate emissions based on the amount of fuel consumed (in liters or gallons)
2. Distance-Based: Calculate emissions based on distance traveled, vessel speed, and fuel consumption rate
3. Custom Amount: Enter a monetary amount directly for offsetting without a specific carbon calculation

Integration with WordPress

To integrate with WordPress, see the companion PHP file puffin-calculator-integrated.php in the parent directory.

License

Copyright (c) Puffin Offset. All rights reserved.