Greeneum Carbon Offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greeneum Carbon Offset</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
.result a {
color: #007bff;
text-decoration: none;
}
.result a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Greeneum Carbon Offset</h1>
<form id="offsetForm">
<label for="company_name">Company Name:</label>
<input type="text" id="company_name" name="company_name" required>
<label for="company_domain">Company Domain:</label>
<select id="company_domain" name="company_domain" required>
<option value="Construction">Construction</option>
<option value="Energy">Energy</option>
<option value="Sustainability">Sustainability</option>
<option value="Electrical">Electrical</option>
<option value="Mechanics">Mechanics</option>
<option value="Others">Others</option>
</select>
<div id="other_domain" style="display: none;">
<label for="other_domain_input">Please Specify:</label>
<input type="text" id="other_domain_input" name="other_domain_input">
</div>
<label for="emissions">Emissions (tons of Co2/Co2e):</label>
<input type="number" id="emissions" name="emissions" max="15000000" required>
<label for="project_type">Project Type:</label>
<select id="project_type" name="project_type" required>
<option value="renewable">Renewable</option>
<option value="forestry">Forestry and Land Use</option>
</select>
<div id="forestry_options" style="display: none;">
<label for="forestry_type">Forestry Type:</label>
<select id="forestry_type" name="forestry_type">
<option value="afforestation">Afforestation/Reforestation</option>
<option value="forest_conservation">Forest Conservation (REDD+)</option>
<option value="Afforestation and Reforestation (A/R) ">Afforestation and Reforestation (A/R) </option>
<option value="Soil Carbon Sequestration">Soil Carbon Sequestration</option>
<option value="Wetlands and Blue Carbon">Wetlands and Blue Carbon</option>
<option value="improved_forest">Improved Forest Management</option>
</select>
</div>
<div id="renewable_options" style="display: none;">
<label for="renewable_type">Renewable Type:</label>
<select id="renewable_type" name="renewable_type">
<option value="solar">Solar</option>
<option value="wind">Wind</option>
<option value="geothermal">Geo Thermal</option>
<option value="biomass">Biomass</option>
</select>
</div>
<button type="submit">Calculate Offset</button>
</form>
<div id="result" class="result" style="display: none;"></div>
</div>
<script>
document.getElementById('project_type').addEventListener('change', function() {
var forestryOptions = document.getElementById('forestry_options');
var renewableOptions = document.getElementById('renewable_options');
if (this.value === 'forestry') {
forestryOptions.style.display = 'block';
renewableOptions.style.display = 'none';
} else {
forestryOptions.style.display = 'none';
renewableOptions.style.display = 'block';
}
});
document.getElementById('company_domain').addEventListener('change', function() {
var otherDomain = document.getElementById('other_domain');
if (this.value === 'Others') {
otherDomain.style.display = 'block';
} else {
otherDomain.style.display = 'none';
}
});
document.getElementById('offsetForm').addEventListener('submit', function(event) {
event.preventDefault();
var emissions = document.getElementById('emissions').value;
var projectType = document.getElementById('project_type').value;
var renewableType = document.getElementById('renewable_type').value;
var forestryType = document.getElementById('forestry_type').value;
if (emissions < 150) {
alert('Emissions must be greater than 15 metric tons of CO2.');
return;
}
var usdCost, eurCost;
if (projectType === 'forestry') {
usdCost = emissions * 25;
} else {
switch (renewableType) {
case 'solar':
usdCost = emissions * 10;
break;
case 'wind':
usdCost = emissions * 30;
break;
case 'thermal':
usdCost = emissions * 20;
break;
case 'biomass':
usdCost = emissions * 10;
break;
}
}
eurCost = usdCost * 0.85;
var suggestions = '';
if (projectType === 'forestry') {
switch (forestryType) {
case 'afforestation':
suggestions = 'Afforestation/Reforestation projects involve planting trees in areas where there were no previous tree cover. It helps in sequestering CO2 and restoring biodiversity.';
break;
case 'forest_conservation':
suggestions = 'Forest Conservation (REDD+) projects aim to reduce emissions from deforestation and forest degradation by preserving existing forests and promoting sustainable forest management.';
break;
case 'improved_forest':
suggestions = 'Improved Forest Management projects focus on enhancing the carbon sequestration capacity of forests through sustainable forestry practices and better forest management techniques.';
break;
}
} else {
switch (renewableType) {
case 'solar':
suggestions = 'Solar projects involve installing solar panels to generate electricity from sunlight. Solar energy is a renewable resource that reduces greenhouse gas emissions and dependency on fossil fuels.';
break;
case 'wind':
suggestions = 'Wind projects involve setting up wind turbines to generate electricity from wind energy. Wind energy is a clean and sustainable way to generate power, reducing carbon footprint.';
break;
case 'thermal':
suggestions = 'Thermal projects use heat sources, such as geothermal or solar thermal, to produce energy. Geothermal energy harnesses heat from the Earth, while solar thermal energy captures and uses heat from the sun.';
break;
case 'biomass':
suggestions = 'Biomass projects convert organic materials into energy through combustion or other processes. Biomass energy is produced from plant and animal waste, making it a renewable and sustainable energy source.';
break;
}
}
var result = document.getElementById('result');
result.innerHTML = `
<p>Cost in USD: $${usdCost.toFixed(2)}</p>
<p>Cost in EUR: €${eurCost.toFixed(2)}</p>
<p>Suggestions: ${suggestions}</p>
<p><a id="paymentLink" href="#" target="_blank">Proceed to Payment</a></p>
`;
result.style.display = 'block';
// Update the Stripe payment link with the calculated amount
var paymentLink = document.getElementById('paymentLink');
paymentLink.href = `https://buy.stripe.com/8wM5kqcyq0Qc7U4bIN?amount=${eurCost.toFixed(2)}`;
});
</script>
</body>
</html>
