<div class="eco-card">
<div class="eco-icon">
<svg id="eco-leaf" viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
<path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
</svg>
</div>
<div class="eco-data">
<div class="eco-value">
<span id="co2-counter">0.0</span>
<span class="unit">kg</span>
</div>
<div class="eco-label">CO2 Emissions Saved</div>
</div>
<div class="eco-progress-bar">
<div class="eco-progress-fill" id="eco-fill"></div>
</div>
<p class="eco-fact">Equivalent to planting <strong>3 trees</strong> this month.</p>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #f0fdf4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.eco-card {
background: #ffffff;
padding: 40px;
border-radius: 24px;
box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.15);
width: 100%;
max-width: 380px;
text-align: center;
border: 1px solid #d1fae5;
}
.eco-icon {
width: 80px;
height: 80px;
background: #d1fae5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 24px auto;
box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}
#eco-leaf {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eco-data {
margin-bottom: 30px;
}
.eco-value {
font-size: 3.5rem;
font-weight: 800;
color: #064e3b;
line-height: 1;
letter-spacing: -1px;
display: flex;
justify-content: center;
align-items: baseline;
gap: 8px;
}
.unit {
font-size: 1.5rem;
color: #10b981;
font-weight: 600;
}
.eco-label {
color: #047857;
font-weight: 600;
font-size: 1.125rem;
margin-top: 8px;
}
.eco-progress-bar {
width: 100%;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 24px;
}
.eco-progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #34d399, #059669);
border-radius: 6px;
transition: width 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eco-fact {
color: #475569;
font-size: 0.95rem;
margin: 0;
padding: 16px;
background: #f8fafc;
border-radius: 12px;
}
.eco-fact strong {
color: #059669;
}
const counter = document.getElementById("co2-counter");
const fill = document.getElementById("eco-fill");
const leaf = document.getElementById("eco-leaf");
const targetValue = 42.8;
const duration = 2000;
const frameRate = 30;
const totalFrames = duration / frameRate;
const increment = targetValue / totalFrames;
let currentVal = 0;
let frame = 0;
setTimeout(function() {
fill.style.width = "75%";
leaf.style.transform = "scale(1.2) rotate(10deg)";
const timer = setInterval(function() {
frame++;
currentVal += increment;
if (frame >= totalFrames) {
currentVal = targetValue;
clearInterval(timer);
leaf.style.transform = "scale(1) rotate(0deg)";
}
// Format to 1 decimal place safely
counter.innerText = currentVal.toFixed(1);
}, frameRate);
}, 500);
