3.2 KiB

Raw Blame History

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

Clone this repository
Open the project directory
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:

Fuel-Based: Calculate emissions based on the amount of fuel consumed (in liters or gallons)
Distance-Based: Calculate emissions based on distance traveled, vessel speed, and fuel consumption rate
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.

3.2 KiB Raw Blame History