Calc App

2025-05-04 19:58:46 +02:00
parent 5cc1188c5e
commit 9053de0e51
10 changed files with 1693 additions and 0 deletions
--- a/puffin-calculator-iframe/iframe-example.html
+++ b/puffin-calculator-iframe/iframe-example.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Puffin Calculator iFrame Integration Example</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      line-height: 1.6;
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 20px;
+      color: #333;
+    }
+    h1 { 
+      margin-bottom: 1rem;
+      color: #0f4c81;
+    }
+    .container {
+      margin-top: 2rem;
+    }
+    .example-code {
+      background-color: #f5f5f5;
+      padding: 1rem;
+      border-radius: 6px;
+      overflow-x: auto;
+    }
+    pre {
+      margin: 0;
+    }
+    code {
+      font-family: 'Courier New', Courier, monospace;
+    }
+    iframe {
+      width: 100%;
+      border: none;
+      min-height: 600px;
+      margin-top: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+  </style>
+</head>
+<body>
+  <h1>Puffin Calculator iFrame Integration</h1>
+  
+  <p>This page demonstrates how to embed the Puffin Carbon Offset Calculator into your website using an iFrame.</p>
+  
+  <div class="container">
+    <h2>Integration Code</h2>
+    <div class="example-code">
+      <pre><code>&lt;iframe 
+  src="http://localhost:8080"
+  id="puffin-calculator-iframe"
+  width="100%" 
+  height="600" 
+  frameborder="0" 
+  allow="clipboard-write"
+  title="Puffin Carbon Offset Calculator"
+&gt;&lt;/iframe&gt;
+
+&lt;script&gt;
+  // 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';
+      }
+    }
+  });
+&lt;/script&gt;</code></pre>
+    </div>
+  </div>
+  
+  <div class="container">
+    <h2>Live Example</h2>
+    <p>Here's the calculator embedded in this page:</p>
+    
+    <iframe 
+      src="index.html"
+      id="puffin-calculator-iframe"
+      width="100%" 
+      height="600" 
+      frameborder="0" 
+      allow="clipboard-write"
+      title="Puffin Carbon Offset Calculator"
+    ></iframe>
+    
+    <script>
+      // Handle iframe resizing
+      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>
+  </div>
+  
+  <div class="container">
+    <h2>Advanced Usage</h2>
+    <p>You can also communicate with the calculator through the iframe to set options or perform actions:</p>
+    
+    <div class="example-code">
+      <pre><code>// 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();
+});</code></pre>
+    </div>
+  </div>
+</body>
+</html>