# 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:

```bash
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:

```html
<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:

```javascript
// 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.