112 lines
3.2 KiB
Markdown
112 lines
3.2 KiB
Markdown
|
# 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.
|