Embedded E-Waste Calculator

https://cdn.tailwindcss.com

body {
font-family: “Inter”, sans-serif;
background-color: #f0f4f8; /* Light blue-grey background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 1rem; /* Add some padding for smaller screens */
box-sizing: border-box;
}
iframe {
border: none; /* Remove default iframe border */
border-radius: 12px; /* Match the calculator’s rounded corners */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0px 10px -5px rgba(0, 0, 0, 0.05); /* Soft shadow */
width: 100%; /* Make iframe responsive */
max-width: 768px; /* Limit max width for larger screens */
height: 600px; /* Fixed height, adjust as needed */
transition: all 0.3s ease-in-out;
}
@media (max-width: 768px) {
iframe {
height: 550px; /* Slightly adjust height for smaller devices */
}
}
@media (max-width: 480px) {
iframe {
height: 500px; /* Further adjust height for very small devices */
}
}

<iframe
srcdoc="

E-Waste Value Calculator

https://cdn.tailwindcss.com

body {
font-family: "Inter", sans-serif;
background-color: #f0f4f8; /* Light blue-grey background */
}
.container {
max-width: 90%; /* Responsive width */
padding: 1.5rem;
margin: 2rem auto;
background-color: #ffffff;
border-radius: 12px; /* More rounded corners */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0px 10px -5px rgba(0, 0, 0, 0.05); /* Softer shadow */
}
.form-label {
font-weight: 600; /* Semi-bold */
color: #334155; /* Darker text */
margin-bottom: 0.5rem;
}
.form-select, .form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #cbd5e1; /* Light grey border */
border-radius: 8px; /* Slightly more rounded */
background-color: #f8fafc; /* Very light grey input background */
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-select:focus, .form-input:focus {
outline: none;
border-color: #6366f1; /* Indigo focus border */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Soft focus shadow */
}
.btn-primary {
background-color: #4f46e5; /* Indigo */
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
background-color: #4338ca; /* Darker indigo on hover */
transform: translateY(-1px); /* Slight lift */
}
.result-box {
background-color: #e0e7ff; /* Light blue */
padding: 1rem;
border-radius: 8px;
border: 1px solid #a5b4fc; /* Medium blue border */
color: #1e3a8a; /* Dark blue text */
font-weight: 600;
margin-top: 1rem;
}
.reason-box {
background-color: #dbeafe; /* Lighter blue */
padding: 1rem;
border-radius: 8px;
border: 1px solid #93c5fd; /* Light blue border */
color: #1e40af; /* Darker blue text */
margin-top: 1rem;
line-height: 1.6;
}
/* Message Box Styling */
#messageBox {
display: none; /* Hidden by default */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
text-align: center;
}
#messageBox.show {
display: block;
}
#messageOverlay {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
#messageOverlay.show {
display: block;
}
#messageBox button {
background-color: #4f46e5;
color: white;
padding: 8px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 15px;
}

// Function to show a custom message box
function showMessageBox(message) {
document.getElementById(‘messageText’).innerText = message;
document.getElementById(‘messageBox’).classList.add(‘show’);
document.getElementById(‘messageOverlay’).classList.add(‘show’);
}

// Function to hide the custom message box
function hideMessageBox() {
document.getElementById(‘messageBox’).classList.remove(‘show’);
document.getElementById(‘messageOverlay’).classList.remove(‘show’);
}

const ewasteTypeSelect = document.getElementById(‘ewasteType’);
const quantityInput = document.getElementById(‘quantity’);
const calculateBtn = document.getElementById(‘calculateBtn’);
const resultsDiv = document.getElementById(‘results’);
const valueUSDElement = document.getElementById(‘valueUSD’);
const valueGHSElement = document.getElementById(‘valueGHS’);
const calculationReasonsElement = document.getElementById(‘calculationReasons’);

let usdToGhsRate = 0; // Global variable to store the exchange rate

// Hypothetical base values for e-waste in USD per unit/kg
// These values are illustrative and can vary greatly in real-world scenarios
const ewasteValuesUSD = {
laptop: { valuePerUnit: 15.00, unit: ‘unit’,
reason: ‘Laptops contain valuable components like RAM, CPU, motherboards (with trace amounts of gold, silver, palladium), and copper wiring. The value reflects potential recovery of these materials.’ },
smartphone: { valuePerUnit: 5.00, unit: ‘unit’,
reason: ‘Smartphones are rich in precious metals (gold, silver, copper, palladium) and rare earth elements. Their compact size concentrates more valuable material per unit weight compared to larger electronics.’ },
printer: { valuePerUnit: 2.00, unit: ‘unit’,
reason: ‘Printers typically have less recoverable valuable material compared to other electronics. Their value is mainly from common metals and plastics suitable for recycling.’ },
tv: { valuePerUnit: 0.20, unit: ‘kg’, // Assuming average TV weight ~15-30kg, so ~3-6 USD per TV
reason: ‘Televisions, especially older CRT models, contain leaded glass. Newer LCD/LED TVs have less hazardous materials but still contain plastics, glass, and some metals. Value is based on material recovery, with considerations for safe disposal costs.’ },
monitor: { valuePerUnit: 0.25, unit: ‘kg’, // Assuming average monitor weight ~5-10kg, so ~1.25-2.5 USD per monitor
reason: ‘Computer monitors are similar to TVs in composition, with glass, plastics, and some metals. Value derived from material recycling potential and disposal considerations.’ },
desktop: { valuePerUnit: 10.00, unit: ‘unit’,
reason: ‘Desktop PCs (towers) contain power supplies, circuit boards, and various metal components (aluminum, steel, copper). They offer a good mix of recoverable materials.’ },
server: { valuePerUnit: 50.00, unit: ‘unit’, // Servers can be much heavier and contain more valuable components
reason: ‘Servers and network equipment often contain higher-grade components, more precious metals on circuit boards, and valuable metals like copper and aluminum, making them more valuable for recycling.’ },
battery: { valuePerUnit: 0.50, unit: ‘kg’, // Lithium-ion batteries
reason: ‘Lithium-ion batteries contain valuable materials like cobalt, lithium, and nickel, which are increasingly sought after for recycling to support new battery production and reduce environmental impact.’ },
other: { valuePerUnit: 0.10, unit: ‘kg’,
reason: ‘This category covers miscellaneous electronics. The value is a general estimate based on mixed e-waste, considering the presence of common metals, plastics, and minimal valuable components.’ }
};

// Function to fetch the current USD to GHS exchange rate
async function fetchExchangeRate() {
try {
// Using a free and public exchange rate API (no API key required)
const response = await fetch(‘https://open.er-api.com/v6/latest/USD&#8217;);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.rates && data.rates.GHS) {
usdToGhsRate = data.rates.GHS;
console.log(`Current USD to GHS Exchange Rate: 1 USD = ${usdToGhsRate} GHS`);
} else {
throw new Error(‘GHS exchange rate not found in API response.’);
}
} catch (error) {
console.error(‘Failed to fetch exchange rate:’, error);
// Fallback rate if API fails
usdToGhsRate = 12.00; // A reasonable fallback rate (as of early June 2025 based on search results)
showMessageBox(`Failed to fetch live exchange rate. Using a fallback rate: 1 USD = ${usdToGhsRate} GHS. Please try again later for real-time rates.`);
}
}

// Function to calculate e-waste value
function calculateEwasteValue() {
const selectedType = ewasteTypeSelect.value;
let quantity = parseFloat(quantityInput.value);

if (isNaN(quantity) || quantity 1 ? ‘s’ : ”}.`;

resultsDiv.classList.remove(‘hidden’); // Show results section
}

// Event Listeners
calculateBtn.addEventListener(‘click’, calculateEwasteValue);

// Fetch exchange rate on page load
document.addEventListener(‘DOMContentLoaded’, fetchExchangeRate);

“
title=”E-Waste Value Calculator”
>

Just EWAII (E-waste AI Identifier) https://cdn.tailwindcss.com body { font-family: ‘Inter’, sans-serif; margin: 0; padding: 0; background: linear-gradient(to bottom right, #10B981, #059669); /* Green gradient */ display: flex; justify-content: center; align-items: flex-start; /* Align to top for better scroll behavior */ min-height: 100vh; padding: 2rem; box-sizing: border-box; overflow-y: auto; /* Ensure body itself is scrollable if content overflows */ } /* Custom styles for button focus and hover effects */ .btn-primary { background-color: #047857; /* Darker emerald for buttons */ color: white; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn-primary:hover:not(:disabled) { background-color: #065F46; /* Even darker on hover */ transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .btn-primary:focus:not(:disabled) { outline: none; box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.5); } .input-field { padding: 0.75rem; border-radius: 0.5rem; border: 2px solid #D1D5DB; /* Gray-300 */ transition: border-color 0.2s ease; } .input-field:focus { outline: none; border-color: #10B981; /* Emerald-500 */ } /* Style for the copy feedback message */ .copy-feedback { position: absolute; bottom: 10px; right: 10px; background-color: #047857; color: white; padding: 8px 15px; border-radius: 8px; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; /* Allows clicks to pass through */ } .copy-feedback.show { opacity: 1; } // Import the functions you need from the SDKs you need import { initializeApp } from “https://www.gstatic.com/firebasejs/11.9.1/firebase-app.js&#8221;; import { getAnalytics } from “https://www.gstatic.com/firebasejs/11.9.1/firebase-analytics.js&#8221;; // Your web app’s Firebase configuration const firebaseConfig = { apiKey: “AIzaSyCErz2WStqCQB1DK4ZxhrjJwRaoTTie22E”, authDomain: “ewai-20fe0.firebaseapp.com”, projectId: “ewai-20fe0”, storageBucket: “ewai-20fe0.firebasestorage.app”, messagingSenderId: “811848239865”, appId: “1:811848239865:web:527b34d151b25190c7f028”, measurementId: “G-K6MVFMJZKN” }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); // — DOM Elements — const appErrorMessage = document.getElementById(‘app-error-message’); const appErrorText = document.getElementById(‘app-error-text’); const imageUploadInput = document.getElementById(‘image-upload’); const imagePreviewContainer = document.getElementById(‘image-preview-container’); const imagePreview = document.getElementById(‘image-preview’); const classifyButton = document.getElementById(‘classify-button’); const aiResponseSection = document.getElementById(‘ai-response-section’); const aiResponseText = document.getElementById(‘ai-response-text’); const educationalTipsSection = document.getElementById(‘educational-tips-section’); const educationalTipsText = document.getElementById(‘educational-tips-text’); const copyButton = document.getElementById(‘copy-button’); const copyFeedbackMessage = document.getElementById(‘copy-feedback-message’); let selectedImageFile = null; // — Utility Functions — const displayAppError = (message) => { appErrorText.textContent = message; appErrorMessage.classList.remove(‘hidden’); }; const clearErrors = () => { appErrorMessage.classList.add(‘hidden’); appErrorText.textContent = ”; }; const resetClassificationUI = () => { imageUploadInput.value = ”; imagePreviewContainer.classList.add(‘hidden’); imagePreview.src = ”; aiResponseSection.classList.add(‘hidden’); aiResponseText.textContent = ”; educationalTipsSection.classList.add(‘hidden’); classifyButton.disabled = true; }; const fileToBase64 = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result.split(‘,’)[1]); // Get base64 string reader.onerror = error => reject(error); }); }; // — Image Handling — imageUploadInput.addEventListener(‘change’, (event) => { clearErrors(); const file = event.target.files[0]; if (file) { selectedImageFile = file; const reader = new FileReader(); reader.onloadend = () => { imagePreview.src = reader.result; imagePreviewContainer.classList.remove(‘hidden’); aiResponseSection.classList.add(‘hidden’); // Clear previous AI response aiResponseText.textContent = ”; educationalTipsSection.classList.add(‘hidden’); }; reader.readAsDataURL(file); classifyButton.disabled = false; // Enable classify button } else { selectedImageFile = null; imagePreviewContainer.classList.add(‘hidden’); imagePreview.src = ”; classifyButton.disabled = true; } }); // — AI Classification — classifyButton.addEventListener(‘click’, async () => { clearErrors(); if (!selectedImageFile) { displayAppError(‘Please select an image first.’); return; } classifyButton.disabled = true; classifyButton.innerHTML = ` Classifying… `; aiResponseSection.classList.add(‘hidden’); aiResponseText.textContent = ”; educationalTipsSection.classList.add(‘hidden’); try { const base64ImageData = await fileToBase64(selectedImageFile); const prompt = ‘Identify all e-waste items in this image and describe them. For each identified e-waste item, also list potential major electronic components (e.g., circuit boards, capacitors, CPUs, LCD screens, batteries, wires, power supplies, memory modules, hard drives, optical drives, cooling fans) that might be found inside. If no e-waste is present, state that clearly and briefly. Be concise and provide a list of identified items and their components.’; const payload = { contents: [ { role: ‘user’, parts: [ { text: prompt }, { inlineData: { mimeType: selectedImageFile.type, data: base64ImageData } } ] } ], }; const apiKey = ”; // For Canvas environment, leave empty. const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`; const response = await fetch(apiUrl, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(payload) }); // Check if the response is OK (status 200-299) if (!response.ok) { const errorBody = await response.text(); throw new Error(`API request failed with status ${response.status}: ${errorBody}`); } const result = await response.json(); if (result.candidates && result.candidates.length > 0 && result.candidates[0].content && result.candidates[0].content.parts && result.candidates[0].content.parts.length > 0) { const text = result.candidates[0].content.parts[0].text; aiResponseText.textContent = text; aiResponseSection.classList.remove(‘hidden’); // Show educational tips based on AI response (basic keyword matching) displayEducationalTips(text); } else { aiResponseText.textContent = ‘Could not identify e-waste. Please try another image.’; displayAppError(‘AI response was empty or malformed. This might be due to a strict Content Security Policy (CSP) on the embedding platform (e.g., Google Sites) blocking the AI API call. Try running the app directly or hosting it on a different platform.’); } } catch (err) { console.error(‘AI Classification Error:’, err); displayAppError(`Failed to classify image: ${err.message}. This might be due to a strict Content Security Policy (CSP) on the embedding platform (e.g., Google Sites) blocking the AI API call. Try running the app directly or hosting it on a different platform.`); } finally { classifyButton.disabled = false; classifyButton.textContent = ‘Classify E-Waste’; } }); // — Educational Content/Tips Logic — const educationalContent = { ‘laptop’: “Laptops contain valuable metals and hazardous materials like lead, mercury, and cadmium. Always wipe your data before recycling. Batteries also need special handling!”, ‘computer’: “Computers are full of recoverable materials but also toxins. Ensure hard drives are wiped. Look for recycling programs that safely dismantle and process components.”, ‘phone’: “Mobile phones are rich in precious metals like gold, silver, and copper. They also contain heavy metals like lead. Always factory reset your phone before recycling.”, ‘tablet’: “Tablets, similar to phones, have valuable internal components and batteries. Delete all personal data and remove any SIM/SD cards before drop-off.”, ‘monitor’: “Old CRT monitors contain leaded glass. LCD/LED monitors have mercury in backlights (older ones). Recycle them properly to prevent environmental contamination.”, ‘tv’: “Tevisions, especially older CRT models, contain significant amounts of lead. Flat-screen TVs also have hazardous materials. Never put them in regular trash.”, ‘printer’: “Printers contain plastics, metals, and residual ink/toner. Many manufacturers offer take-back programs for their old models and cartridges.”, ‘keyboard’: “Keyboards are mostly plastic and metal, but can still be recycled. Look for electronics recycling events.”, ‘mouse’: “Mice are small e-waste items, primarily plastic and circuit boards. Recycle them with other small electronics.”, ‘battery’: “Batteries (especially lithium-ion) pose fire risks and contain hazardous chemicals. Always recycle batteries separately at designated drop-off points.”, ‘cable’: “Cables and wires contain copper. While small, their volume adds up. They are valuable for metal recovery.” }; const displayEducationalTips = (aiResponse) => { let tipsFound = false; let tipsHtml = ”; const lowerCaseResponse = aiResponse.toLowerCase(); for (const keyword in educationalContent) { if (lowerCaseResponse.includes(keyword)) { tipsHtml += `

${keyword.charAt(0).toUpperCase() + keyword.slice(1)}: ${educationalContent[keyword]}

`; tipsFound = true; } } if (tipsFound) { educationalTipsText.innerHTML = tipsHtml; educationalTipsSection.classList.remove(‘hidden’); } else { educationalTipsSection.classList.add(‘hidden’); educationalTipsText.innerHTML = ”; } }; // — Copy to Clipboard Functionality — copyButton.addEventListener(‘click’, () => { const textToCopy = aiResponseText.textContent; if (textToCopy) { // Create a temporary textarea element const tempTextArea = document.createElement(‘textarea’); tempTextArea.value = textToCopy; document.body.appendChild(tempTextArea); tempTextArea.select(); try { document.execCommand(‘copy’); copyFeedbackMessage.classList.add(‘show’); setTimeout(() => { copyFeedbackMessage.classList.remove(‘show’); }, 2000); // Hide after 2 seconds } catch (err) { console.error(‘Failed to copy text: ‘, err); displayAppError(‘Failed to copy text to clipboard. Please try manually.’); } finally { document.body.removeChild(tempTextArea); } } else { displayAppError(‘No text to copy.’); } }); // Initial setup on page load document.addEventListener(‘DOMContentLoaded’, () => { resetClassificationUI(); // Ensure UI is clean on load });