Here's the code for the first app.
Here's the code for the first app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Environmental Footprint Estimator</title>
</head>
<body>
<div id="ai-impact-calculator">
<style>
#ai-impact-calculator {
max-width: 100%;
padding: 5%;
background: #f8f9fa;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
font-family: 'Segoe UI', system-ui, sans-serif;
color: #2d3436;
border: 1px solid #e0e3e6;
margin: 20px auto;
box-sizing: border-box;
}
.calculator-title {
font-size: clamp(18px, 4vw, 22px);
margin: 0 0 1.5em 0;
text-align: center;
font-weight: 700;
color: #27ae60;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.input-group {
flex: 1;
min-width: 0;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
font-size: clamp(12px, 2vw, 14px);
}
.input-group input,
.input-group select {
width: 100%;
padding: 10px;
border: 1px solid #bdc3c7;
border-radius: 6px;
background: #ffffff;
font-size: clamp(12px, 2vw, 14px);
box-sizing: border-box;
}
.region-select {
grid-column: 1 / -1;
}
.calculate-btn {
width: 100%;
padding: clamp(10px, 2vw, 14px);
background: #27ae60;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
font-size: clamp(14px, 2.5vw, 15px);
transition: opacity 0.2s;
}
.calculate-btn:hover {
opacity: 0.9;
}
.results-section {
display: none;
margin-top: 25px;
padding: 1em;
background: #ecf7f1;
border-radius: 10px;
}
.metric-row {
margin: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #d0e9d8;
font-size: clamp(12px, 2vw, 14px);
}
.metric-value {
font-weight: 700;
color: #27ae60;
}
.comparison-section {
font-size: clamp(11px, 2vw, 13px);
color: #636e72;
margin-top: 20px;
line-height: 1.7;
}
.annual-section {
margin-top: 25px;
padding: 15px;
background: #d4ede1;
border-radius: 8px;
font-size: clamp(11px, 2vw, 13px);
}
@media (max-width: 480px) {
.input-grid {
grid-template-columns: 1fr;
}
.metric-row {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
</style>
<div class="calculator-title">AI Environmental Footprint Estimator</div>
<div class="input-grid">
<div class="input-group">
<label>Text Queries</label>
<input type="number" id="text" value="0" min="0" step="1">
</div>
<div class="input-group">
<label>AI Searches</label>
<input type="number" id="search" value="0" min="0" step="1">
</div>
<div class="input-group">
<label>Image Generations</label>
<input type="number" id="images" value="0" min="0" step="1">
</div>
<div class="input-group">
<label>Video Minutes</label>
<input type="number" id="video" value="0" min="0" step="1">
</div>
<div class="input-group">
<label>Coding Tasks</label>
<input type="number" id="code" value="0" min="0" step="1">
</div>
<div class="input-group region-select">
<label>Region/Provider</label>
<select id="region">
<option value="us">USA (All Tasks)</option>
<option value="cn-deepseek">China (DeepSeek Text/Code/Search)</option>
<option value="cn-standard">China (All Tasks - Standard Models)</option>
</select>
</div>
</div>
<button class="calculate-btn" onclick="calculateImpact()">Calculate Impact</button>
<div class="results-section" id="results">
<div class="metric-row">
<span>Energy Consumption</span>
<span class="metric-value" id="energy">0 kWh</span>
</div>
<div class="metric-row">
<span>CO₂ Emissions</span>
<span class="metric-value" id="co2">0 kg</span>
</div>
<div class="metric-row">
<span>Water Usage</span>
<span class="metric-value" id="water">0 L</span>
</div>
<div class="comparison-section" id="comparisons"></div>
<div class="annual-section" id="annual"></div>
</div>
<script>
const ENERGY_DATA = {
'us': {
text: 0.0029,
search: 0.0035,
images: 0.045,
video: 5.0,
code: 0.015
},
'cn-deepseek': {
text: 0.0009,
search: 0.0012,
images: 0,
video: 0,
code: 0.004
},
'cn-standard': {
text: 0.0038,
search: 0.0045,
images: 0.068,
video: 6.2,
code: 0.022
}
};
const CARBON_INTENSITY = {
'us': 0.367,
'cn-deepseek': 0.582,
'cn-standard': 0.582
};
const WATER_FACTORS = {
'us': 1.8,
'cn-deepseek': 3.2,
'cn-standard': 3.2
};
const EQUIVALENCIES = {
phoneCharge: 0.012,
laptopHour: 0.07,
carKm: 0.122,
treeAnnual: 21.77
};
function calculateImpact() {
const inputs = {
text: Math.max(0, parseFloat(document.getElementById('text').value) || 0),
search: Math.max(0, parseFloat(document.getElementById('search').value) || 0),
images: Math.max(0, parseFloat(document.getElementById('images').value) || 0),
video: Math.max(0, parseFloat(document.getElementById('video').value) || 0),
code: Math.max(0, parseFloat(document.getElementById('code').value) || 0),
region: document.getElementById('region').value
};
const profile = ENERGY_DATA[inputs.region];
const energy = (
inputs.text * profile.text +
inputs.search * profile.search +
inputs.images * profile.images +
inputs.video * profile.video +
inputs.code * profile.code
).toFixed(3);
const co2 = (energy * CARBON_INTENSITY[inputs.region]).toFixed(3);
const water = (energy * WATER_FACTORS[inputs.region]).toFixed(1);
const comparisons = {
phone: (energy / EQUIVALENCIES.phoneCharge).toFixed(1),
laptop: (energy / EQUIVALENCIES.laptopHour).toFixed(1),
car: (co2 / EQUIVALENCIES.carKm).toFixed(1),
trees: (co2 / EQUIVALENCIES.treeAnnual).toFixed(2)
};
const annual = {
energy: (energy * 365).toFixed(1),
co2: (co2 * 365).toFixed(1),
water: (water * 365).toFixed(0),
phone: (energy * 365 / EQUIVALENCIES.phoneCharge).toFixed(0),
laptop: (energy * 365 / EQUIVALENCIES.laptopHour).toFixed(0),
car: (co2 * 365 / EQUIVALENCIES.carKm).toFixed(0),
trees: (co2 * 365 / EQUIVALENCIES.treeAnnual).toFixed(1)
};
document.getElementById('energy').textContent = `${energy} kWh`;
document.getElementById('co2').textContent = `${co2} kg`;
document.getElementById('water').textContent = `${water} L`;
document.getElementById('comparisons').innerHTML = `
${inputs.region === 'cn-deepseek' ? '♻️ DeepSeek Efficiency: estimate 69% better than standard models<br>' : ''}
🔋 ${comparisons.phone} smartphone charges<br>
💻 ${comparisons.laptop} laptop hours<br>
🚗 ${comparisons.car} km car equivalent<br>
🌳 ${comparisons.trees} trees needed for offset
`;
document.getElementById('annual').innerHTML = `
<strong>If done daily for a year:</strong><br>
⚡ ${annual.energy} kWh energy<br>
☁️ ${annual.co2} kg CO₂<br>
💧 ${annual.water} L water<br>
Equivalent to:<br>
🔋 ${annual.phone} phone charges<br>
💻 ${annual.laptop} laptop hours<br>
🚗 ${annual.car} km driven<br>
🌳 ${annual.trees} trees needed
`;
document.getElementById('results').style.display = 'block';
}
</script>
</div>
</body>
</html>
And here's the code for the second app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Environmental Impact Interactive Infographic</title>
<style>
.ai-infographic {
max-width: 100%;
padding: 20px;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
color: #2c3e50;
margin: 20px auto;
}
.section {
padding: 20px;
margin: 10px 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: transform 0.2s;
}
.section:hover {
transform: translateY(-2px);
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
}
.icon-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.icon-item:hover {
background: #e3f2fd;
transform: scale(1.02);
}
.icon-emoji {
font-size: 2em;
margin-bottom: 10px;
}
.progress-bar {
width: 100%;
height: 20px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.progress-fill {
height: 100%;
background: #4caf50;
width: 0;
transition: width 1s ease-in-out;
}
.comparison-box {
border: 2px solid #4caf50;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
display: none;
}
.tip-box {
background: #e3f2fd;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
font-size: 0.9em;
border-left: 4px solid #1976d2;
}
h2 {
color: #1976d2;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
margin-bottom: 15px;
}
p {
font-size: clamp(0.9rem, 2vw, 1rem);
line-height: 1.6;
}
.slider-container {
margin: 20px 0;
}
.slider {
width: 100%;
height: 15px;
-webkit-appearance: none;
border-radius: 10px;
background: #e9ecef;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4caf50;
cursor: pointer;
}
@media (max-width: 600px) {
.icon-grid {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="ai-infographic">
<h2>🌍 Your AI Environmental Footprint</h2>
<div class="section">
<p>Click on your common AI activities:</p>
<div class="icon-grid">
<div class="icon-item" onclick="toggleActivity('homework')">
<div class="icon-emoji">📚</div>
<div>Homework Help</div>
</div>
<div class="icon-item" onclick="toggleActivity('images')">
<div class="icon-emoji">🎨</div>
<div>Image Creation</div>
</div>
<div class="icon-item" onclick="toggleActivity('coding')">
<div class="icon-emoji">💻</div>
<div>Coding Help</div>
</div>
<div class="icon-item" onclick="toggleActivity('video')">
<div class="icon-emoji">🎥</div>
<div>Video Creation</div>
</div>
</div>
<div class="slider-container">
<p>How many times per week do you use AI?</p>
<input type="range" min="1" max="50" value="5" class="slider" id="usageSlider">
<p id="usageValue">Current usage: 5 times per week</p>
</div>
</div>
<div class="section">
<h2>Your Impact</h2>
<div class="progress-bar">
<div class="progress-fill" id="impactBar"></div>
</div>
<p id="impactText">Select your activities to see your impact</p>
</div>
<div class="comparison-box" id="comparisons">
<h3>Did you know?</h3>
<p id="comparisonText"></p>
</div>
<div class="tip-box">
<h3>🌱 Tips to Reduce Your Impact</h3>
<ul id="tips">
<li>Don't use AI - think about your own learning</li>
<li>Use AI efficiently - plan your questions before asking</li>
<li>Don't waste resources on superficial uses of AI</li>
<li>Use region-optimized or locally-hosted AI models when available</li>
<li>Combine multiple questions into one session - learn how to create better prompts and instructions</li>
</ul>
</div>
<script>
const activities = {
homework: { active: false, impact: 0.0029 },
images: { active: false, impact: 0.045 },
coding: { active: false, impact: 0.015 },
video: { active: false, impact: 5.0 }
};
const slider = document.getElementById('usageSlider');
const usageValue = document.getElementById('usageValue');
slider.oninput = function() {
usageValue.textContent = `Current usage: ${this.value} times per week`;
updateImpact();
};
function toggleActivity(activity) {
activities[activity].active = !activities[activity].active;
const element = document.querySelector(`[onclick="toggleActivity('${activity}')"]`);
element.style.background = activities[activity].active ? '#e3f2fd' : '#f8f9fa';
updateImpact();
}
function updateImpact() {
const weeklyUses = parseInt(slider.value);
let totalImpact = 0;
for (const [activity, data] of Object.entries(activities)) {
if (data.active) {
totalImpact += data.impact * weeklyUses;
}
}
const monthlyImpact = totalImpact * 4;
const impactPercentage = Math.min((monthlyImpact / 10) * 100, 100);
document.getElementById('impactBar').style.width = `${impactPercentage}%`;
document.getElementById('impactText').textContent =
`Your monthly AI usage consumes approximately ${monthlyImpact.toFixed(2)} kWh`;
const comparisons = document.getElementById('comparisons');
const comparisonText = document.getElementById('comparisonText');
if (totalImpact > 0) {
comparisons.style.display = 'block';
comparisonText.innerHTML = `
Your monthly AI usage is equivalent to:<br>
🔋 ${Math.round(monthlyImpact / 0.012)} smartphone charges<br>
💡 ${Math.round(monthlyImpact / 0.06)} hours of LED bulb use<br>
🚗 ${(monthlyImpact * 0.367).toFixed(1)} kg of CO₂ emissions
`;
} else {
comparisons.style.display = 'none';
}
}
// Initialize with default values
updateImpact();
</script>
</div>
</body>
</html>
Here's another one, made with Perplexity Pro with DeepSeek-R1 enabled, using the prompt:
Please help me make a simple HTML-based web app that can be embedded in a site. It is intended for middle and high school students to be able to estimate their environmental footprint of using AI. It must be based on reliable research and link to sources of data. It must be responsive to the changing frame size. It must be allow a user to select the number and types of interactions that they have had with AI in a project or a day. For example, how many text queries, image generations or minutes of video. AI types must include AI text, AI search, AI coding assistance, AI images, AI video. You must also include the option to toggle between China and USA-based AI, for the purposes of energy calculations for the grid. For china-based AI, assume DeepSeek efficiencies in your calculations. For China-based video and image assume same model impacts as USA, but account for grid differences. The UI must be simple but attractive. When students enter their uses of AI, it must provide a total of AI impacts in terms of kWh, CO2 emissions and water usage. It should provide some comparisons of footprint in terms of number of cellphone charges, hours of macbook pro usage, km driven in a petrol car and trees needed to offset this footprint. Finally, finish with a section that says "if you did this every day for a year..." and total up the impacts and equivalencies. Let's Go!
Here's another one, made with Qwen